:root{
  --bg:#0a0f0b; --panel:#0d140f; --fg:#b8f5c8; --dim:#5f8a6b; --hi:#39ff88; --warn:#ffb454; --err:#ff6b6b; --link:#7dd3fc;
  --glow:0 0 8px color-mix(in srgb,var(--hi) 45%,transparent);
  --mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
[data-theme=amber]{--bg:#120d05;--panel:#18110a;--fg:#ffd9a0;--dim:#9a7a45;--hi:#ffb000;--warn:#ff8c42;--link:#ffe08a}
[data-theme=ice]{--bg:#070d14;--panel:#0b1420;--fg:#c4e3ff;--dim:#5b7a99;--hi:#5cc8ff;--warn:#ffd166;--link:#a5f3fc}
[data-theme=paper]{--bg:#f4f1ea;--panel:#fbf9f4;--fg:#26231d;--dim:#8a8372;--hi:#b4410f;--warn:#9a6700;--err:#b42318;--link:#0b5fa5;--glow:none}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--mono);display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));overflow:hidden}
#art{position:fixed;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.5s;filter:saturate(.7) brightness(.45);mix-blend-mode:screen;pointer-events:none}
#art.on{opacity:.55}
#term{position:relative;width:min(1000px,100%);height:min(100dvh - 24px,860px);display:flex;flex-direction:column;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid color-mix(in srgb,var(--hi) 28%,transparent);border-radius:12px;box-shadow:0 0 0 1px #0006,0 20px 80px #000a,inset 0 0 60px #0004;overflow:hidden}
body.crt #term::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0003 2px 3px);mix-blend-mode:multiply;animation:flick 6s infinite}
body.crt #screen{text-shadow:var(--glow)}
@keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.85}98%{opacity:1}99%{opacity:.9}}
.bar{display:flex;align-items:center;gap:12px;padding:8px 12px;border-bottom:1px solid color-mix(in srgb,var(--hi) 18%,transparent);font-size:12px;color:var(--dim);user-select:none}
.dots{display:flex;gap:6px}.dots i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.dots i:nth-child(2){background:#febc2e}.dots i:nth-child(3){background:#28c840}
.title{flex:1;text-align:center}.hint{white-space:nowrap}
kbd{border:1px solid var(--dim);border-radius:3px;padding:0 4px;font:inherit;font-size:11px}
#screen{flex:1;overflow-y:auto;padding:14px 16px 8px;outline:0;scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.ln{white-space:pre-wrap;word-break:break-word;min-height:1.5em}
.ln.pre{white-space:pre;overflow-x:auto;word-break:normal}
.dim{color:var(--dim)}.hi{color:var(--hi)}.warn{color:var(--warn)}.err{color:var(--err)}.ok{color:var(--hi)}
.ln a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.ln a:hover{background:var(--link);color:var(--bg)}
.prompt{color:var(--hi);white-space:pre}.prompt .p-cwd{color:var(--link)}.prompt .p-at{color:var(--dim)}
#row{display:flex;align-items:center}
#cmd{flex:1;background:none;border:0;outline:0;color:var(--fg);font:inherit;caret-color:var(--hi);padding:0;min-width:0}
.bar-chart b{color:var(--hi);font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:8px 0 6px}
.tile{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--hi) 22%,transparent);border-radius:8px;pointer-events:none;user-select:none;-webkit-user-select:none;background:color-mix(in srgb,var(--bg) 60%,transparent)}
.tile span{font-size:12.5px;line-height:1.2}.tile small{display:block;color:var(--dim);font-size:11px}
.logo{display:block;width:26px;height:26px;flex:none;background:var(--hi);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;pointer-events:none;animation:scan 7s infinite;animation-delay:calc(var(--n)*.35s);opacity:.9}
@keyframes scan{0%,88%,100%{filter:none;opacity:.8}92%{filter:drop-shadow(0 0 6px var(--hi)) brightness(1.5);opacity:1}}
.chips{display:flex;gap:6px;overflow-x:auto;padding:6px 12px;border-top:1px solid color-mix(in srgb,var(--hi) 14%,transparent);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{flex:none;font:inherit;font-size:12px;color:var(--fg);background:none;border:1px solid color-mix(in srgb,var(--hi) 30%,transparent);border-radius:999px;padding:3px 10px;cursor:pointer}
.chips button:hover,.chips button:focus-visible{background:var(--hi);color:var(--bg);outline:0}
.ticker{overflow:hidden;border-top:1px solid color-mix(in srgb,var(--hi) 14%,transparent);padding:6px 0;mask:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000);-webkit-mask:linear-gradient(90deg,#0000,#000 8%,#000 92%,#0000);pointer-events:none;user-select:none}
.track{display:flex;gap:34px;width:max-content;animation:marq 38s linear infinite}
.track .logo{width:18px;height:18px;opacity:.55;animation:none}
@keyframes marq{to{transform:translateX(-50%)}}
#matrix{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9;display:none}
.cursor{display:inline-block;width:.6em;background:var(--hi);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@media (max-width:640px){body{font-size:13px;padding:0}#term{height:100dvh;border-radius:0;border:0}.hint,.dots{display:none}.title{text-align:left}.banner{display:none}}
@media (prefers-reduced-motion:reduce){.logo,.track,body.crt #term::after{animation:none}}
