:root{--label-font-size: .95em}html{height:100%}body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%;display:flex;flex-direction:column}button{cursor:pointer}.labeledInput{display:flex;flex-direction:column;gap:5px}.labeledInputInline{display:flex;align-items:center;gap:5px}.labeledInputInline label{line-height:1}.labeledInputInline input{margin:0}@media (prefers-color-scheme: dark){:root{color-scheme:dark}}.heroTitle{text-align:center;font-size:2em;margin:10px 0}main{flex-grow:1;width:1200px;max-width:90%;margin:0 auto;display:grid;grid-template-rows:1fr 1fr;grid-template-columns:4fr 9fr 4fr;gap:15px;padding-bottom:20px}.optionsBar{grid-row:1 / 3;grid-column:3;display:flex;flex-direction:column;justify-content:space-between;gap:20px}.presets{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.labeledTextArea{display:flex;flex-direction:column;gap:5px}.labeledTextArea textarea{font-family:monospace;resize:none;flex-grow:1}.macro{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.macro .macroExplanation{font-size:.9em;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}.macro .macroExplanation code{font-weight:700;font-size:1.1em}.inputOptions{display:flex;flex-direction:column;align-items:flex-start;gap:10px}.inputOptions .tabs{width:100%;display:flex;border-bottom:1px solid gray}.inputOptions .tabs label{padding:5px;cursor:pointer;transition:background-color .2s}.inputOptions .tabs label:hover{background-color:light-dark(#00000014,#ffffff21)}.inputOptions .tabs label.active{background-color:light-dark(#0000003a,#ffffff88)}.inputOptions .tabContent{display:inherit;flex-direction:inherit;align-items:inherit;gap:inherit;font-size:var(--label-font-size)}.inputOptions .tabContent input{font-family:monospace}.outputOptions{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;overflow:auto}.outputOptions label{font-size:var(--label-font-size)}.outputOptions fieldset{display:flex;flex-direction:column}.outputOptions .columns{font-size:.9em;flex-direction:row;margin-top:5px}.outputOptions .columns input{width:5ch}.outputOptions .outputSeparator input{font-family:monospace}