:root{--bg:#030604;--screen:#060a07;--text:#c9d2ca;--muted:#657168;--green:#33ff77;--red:#ff6b6b;--blue:#70a5ff;--yellow:#e5c07b}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.75 Consolas,Menlo,Monaco,"Courier New",monospace}
body::after{content:"";position:fixed;z-index:5;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0,rgba(0,0,0,.08) 1px,transparent 1px,transparent 3px);opacity:.32}
.shell{width:100%;min-height:100vh;min-height:100svh;background:radial-gradient(circle at 50% 0,#0b160e 0,var(--screen) 55%)}
.titlebar{position:sticky;z-index:3;top:0;display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 12px;border-bottom:1px solid #18231b;background:rgba(9,14,10,.94);color:var(--muted);font-size:12px;backdrop-filter:blur(8px)}
.session{color:#478b5a}.session::first-letter{color:var(--green)}.titlebar .secure{color:#478b5a}
.terminal{width:100%;min-height:calc(100svh - 36px);padding:28px 32px 48px;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:0 0 10px rgba(51,255,119,.06)}
.line{min-height:1.75em}.prompt,.user{color:var(--green)}.path{color:var(--blue)}.symbol{color:var(--text)}.muted{color:var(--muted)}.error{color:var(--red)}.info{color:var(--blue)}.warning{color:var(--yellow)}
a{color:inherit;text-decoration:none}a:hover,a:focus-visible{color:var(--green);outline:none}
.input-line{--prompt-width:145px;position:relative;display:block;width:100%;white-space:normal}.input-line label{position:absolute;z-index:1;top:0;left:0;line-height:1.75;white-space:nowrap;pointer-events:none}
#command{display:block;width:100%;min-width:0;height:1.75em;max-height:7em;margin:0;padding:0;border:0;outline:0;resize:none;overflow:hidden;background:transparent;color:var(--text);font:inherit;line-height:1.75;text-indent:var(--prompt-width);caret-color:var(--green)}
.cursor{display:inline-block;width:9px;height:18px;background:var(--green);vertical-align:middle;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.boot{animation:appear .22s ease both}@keyframes appear{from{opacity:0;transform:translateY(3px)}}
.visualizer{position:fixed;z-index:20;inset:0;overflow:hidden;background:#000;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .45s ease,visibility .45s}.visualizer.active{opacity:1;visibility:visible;pointer-events:auto;cursor:crosshair}.visualizer canvas{display:block;width:100%;height:100%}.visual-hud{position:absolute;z-index:2;inset:14px 16px auto;display:flex;justify-content:space-between;gap:20px;color:rgba(64,255,108,.7);font:11px/1.4 Consolas,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 0 8px #00ff66}.visual-hud span:last-child{text-align:right}
::selection{background:var(--green);color:var(--bg)}
@media(max-width:700px){body{font-size:14px;line-height:1.65;overflow-x:hidden}.titlebar{height:40px;padding:0 14px;font-size:11px}.terminal{min-height:calc(100svh - 40px);padding:18px 14px calc(32px + env(safe-area-inset-bottom))}.line{min-height:1.65em}.input-line label{line-height:1.6}#command{height:1.6em;max-height:6.4em;font-size:16px;line-height:1.6}.visual-hud{inset:12px 12px auto;font-size:9px;letter-spacing:.04em}.visual-hud span:last-child{font-size:8px}}
@media(prefers-reduced-motion:reduce){.boot{animation:none}.cursor{animation:none}}