:root{--terminal-bg:#000;--terminal-fg:#ff0;color-scheme:dark;background:var(--terminal-bg);color:var(--terminal-fg);font-family:"DejaVu Sans Mono","Liberation Mono",Consolas,"Courier New",monospace;font-size:16px;line-height:1.6}
*{box-sizing:border-box}
body{margin:0;background:var(--terminal-bg);color:var(--terminal-fg);min-height:100dvh}
main{padding:26px 32px 40px;max-width:100%;cursor:text}
.entry{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.entry.command{margin:0}
.entry.boot{margin:0}
a{color:var(--terminal-fg);text-underline-offset:4px}
a:hover,a:focus-visible{color:var(--terminal-bg);background:var(--terminal-fg);outline:0}
::selection{background:transparent;color:var(--terminal-bg);text-shadow:none}
input::selection{background:var(--terminal-fg);color:var(--terminal-bg)}
#selection-layer{position:absolute;inset:0;pointer-events:none;z-index:0}
#selection-layer div{position:absolute;background:var(--terminal-fg)}
main{position:relative;z-index:1}
#caret,.output-caret{user-select:none}
/* Both flex children start at the same line-box top. The positioned input
   mirror cannot supply a flex baseline, so baseline alignment is unsuitable. */
form{display:flex;align-items:flex-start;gap:0 1ch;flex-wrap:wrap;font:inherit;line-height:inherit}
form[hidden]{display:none}
label{display:block;white-space:nowrap;font:inherit;line-height:inherit}
#input-wrap{position:relative;flex:1;min-width:12ch;height:1.6em;overflow:hidden;font:inherit;line-height:inherit}
input{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:transparent;caret-color:transparent;font:inherit;line-height:inherit;outline:none;letter-spacing:normal;appearance:none}
#mirror{white-space:pre;position:absolute;left:0;top:0;pointer-events:none;isolation:isolate;font:inherit;line-height:inherit}
#caret{display:inline-block;position:relative;width:1ch;line-height:inherit;color:var(--terminal-bg)}
#caret::before{content:"█";position:absolute;inset:0;color:var(--terminal-fg);z-index:-1;animation:cursor-blink 1s steps(1,end) infinite}
.output-caret{display:inline;line-height:inherit;color:var(--terminal-fg)}
body.exiting #terminal{animation:exit-blink .45s steps(1,end) 3}
body.exiting form{display:none}
@keyframes cursor-blink{50%{opacity:0}}
@keyframes exit-blink{50%{visibility:hidden}}
@media(max-width:600px){:root{font-size:14px}main{padding:18px 16px 32px}}
@media(prefers-reduced-motion:reduce){#caret::before,body.exiting #terminal{animation:none}}

/* Square terminal scrollbar: yellow thumb, black track, no rounded chrome. */
html{scrollbar-color:var(--terminal-fg) var(--terminal-bg);scrollbar-width:auto}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--terminal-bg);border-left:1px solid var(--terminal-fg)}
::-webkit-scrollbar-thumb{background:var(--terminal-fg);border:2px solid var(--terminal-bg);border-radius:0}
::-webkit-scrollbar-corner{background:var(--terminal-bg)}
.ascii-button{display:inline-block;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--terminal-fg);font:inherit;line-height:inherit;white-space:pre;text-align:left;cursor:pointer}
.ascii-button:hover,.ascii-button:focus-visible{background:var(--terminal-fg);color:var(--terminal-bg);outline:1px solid var(--terminal-fg);outline-offset:3px}

:root.inverted{--terminal-bg:#ff0;--terminal-fg:#000;color-scheme:light}