:root { color-scheme: dark; font-family: Consolas, "Courier New", monospace; color: #ededed; background: #111; }
* { box-sizing: border-box; }
body { margin: 0; }
main { height: 100vh; height: 100dvh; display: flex; flex-direction: column; max-width: 1400px; padding: 20px; margin: auto; }
#output-scroll { min-height: 0; flex: 1; overflow: auto; padding-bottom: 14px; scrollbar-gutter: stable; }
#output { margin: 0; font: inherit; font-size: 14px; line-height: 1.5; white-space: pre; tab-size: 4; }
form { display: flex; align-items: center; border-top: 1px solid #444; padding-top: 12px; gap: 12px; }
label { font-size: 18px; }
input { min-width: 0; flex: 1; padding: 8px 0; font: inherit; font-size: 16px; background: transparent; color: inherit; border: 0; border-radius: 0; outline: none; caret-color: white; }
input:focus-visible { box-shadow: 0 1px #888; }
button { padding: 8px 14px; border: 1px solid #777; background: #222; color: inherit; font: inherit; border-radius: 3px; cursor: pointer; }
button:hover { background: #333; }
button:focus-visible, #output-scroll:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.hint { margin: 10px 0 0; color: #a3a3a3; font-size: 11px; line-height: 1.5; }
code { font: inherit; }
@media (max-width: 650px) { main { padding: 12px; } #output { font-size: 12px; } .hint { font-size: 10px; } }