:root{--fg:#33ff66;--dim:#1a9940;--bg:#020a04;--glow:rgba(51,255,102,.55);--accent:#b6ffcb}
.theme-amber{--fg:#ffb000;--dim:#a66f00;--bg:#0b0700;--glow:rgba(255,176,0,.55);--accent:#ffe0a0}
.theme-nightcity{--fg:#ff2a6d;--dim:#05d9e8;--bg:#0d0221;--glow:rgba(255,42,109,.6);--accent:#f9f871}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:#000;overflow:hidden}
body{font-family:"IBM Plex Mono","Fira Code",Consolas,monospace;font-size:15px;color:var(--fg)}
#crt{position:fixed;inset:0;background:radial-gradient(ellipse at center,var(--bg) 60%,#000 100%);border-radius:18px/14px;overflow:hidden;
 box-shadow:inset 0 0 120px rgba(0,0,0,.9);transform:perspective(1200px) scale(1.0);animation:flick 4s infinite}
#screen{position:absolute;inset:0;padding:22px 26px 90px;overflow-y:auto;text-shadow:0 0 4px var(--glow),0 0 10px var(--glow);white-space:pre-wrap;word-break:break-word;
 transform:scale(1.015,1.025);filter:url(#none)}
#screen::-webkit-scrollbar{width:0}
.scan{pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75) 100%);border-radius:inherit}
@keyframes flick{0%,100%{opacity:1}50%{opacity:.975}52%{opacity:.94}54%{opacity:1}}
.cursor{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.hidden{display:none!important}.dim{color:var(--dim)}.acc{color:var(--accent)}.err{color:#ff5555}.ok{color:var(--fg);font-weight:bold}
.red{color:#ff2a2a;text-shadow:0 0 8px #f00}
#kbd{position:fixed;opacity:0;left:-100px;top:0;width:10px}
#fx{position:fixed;inset:0;pointer-events:none;z-index:5}
#chips{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;gap:6px;overflow-x:auto;padding:8px;background:rgba(0,0,0,.6);border-top:1px solid var(--dim)}
#chips button{flex:none;font:inherit;font-size:13px;background:transparent;color:var(--fg);border:1px solid var(--fg);border-radius:4px;padding:6px 10px;text-shadow:0 0 4px var(--glow)}
@media (hover:hover) and (min-width:800px){#chips{opacity:.35;transition:opacity .2s}#chips:hover{opacity:1}}
@media (max-width:600px){body{font-size:12px}#screen{padding:14px 12px 80px}}
.grid{display:inline-grid;gap:4px;margin:6px 0}
.grid button{font:inherit;width:3.2em;height:2.2em;background:transparent;color:var(--fg);border:1px solid var(--dim);cursor:pointer;text-shadow:inherit}
.grid button.hl{background:rgba(255,255,255,.08);border-color:var(--fg)}
.grid button.used{opacity:.25;cursor:default}
.grid button:disabled{cursor:default}
.melt{position:fixed;z-index:7;color:var(--fg);text-shadow:0 0 6px var(--glow);transition:transform 1.6s cubic-bezier(.5,0,1,1),opacity 1.6s;pointer-events:none;font-family:inherit}
a{color:var(--accent)}
.nowrap{white-space:pre;overflow-x:auto}
