:root{--bg: #0a0f0a;--phos: #33ff66;--amber: #ffd23f;--red: #ff3b3b;--dim: #1c2b20}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{background:#050805;color:var(--phos);font-family:IBM Plex Mono,Menlo,Consolas,Courier New,monospace;display:flex;align-items:center;justify-content:center;overflow:hidden}#crt{position:relative;background:var(--bg);border:2px solid #14351f;border-radius:12px;box-shadow:0 0 60px #33ff661f,inset 0 0 120px #0000008c;padding:10px 14px 8px}#crt:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:12px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}#crt:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:12px;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.35) 100%);z-index:3}#crt.no-crt:before,#crt.no-crt:after{display:none}#crt.no-crt{box-shadow:inset 0 0 120px #0000008c}#hud{display:flex;justify-content:space-between;align-items:baseline;font-size:17px;padding:2px 2px 8px;text-shadow:0 0 6px rgba(51,255,102,.6);min-width:660px;gap:16px;white-space:nowrap}#hud .warn{color:var(--amber);text-shadow:0 0 6px rgba(255,210,63,.6)}#hud .danger{color:var(--red);text-shadow:0 0 6px rgba(255,59,59,.7);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.55}}#stage{position:relative}canvas{display:block;image-rendering:pixelated}#statusline{margin-top:8px;font-size:17px;display:flex;gap:0;align-items:stretch;background:#c8ffc8;color:#0a0f0a;min-width:660px;line-height:1.7}#statusline .mode{padding:0 10px;font-weight:700;background:#3f6}#statusline .mode.insert{background:var(--amber)}#statusline .mid{flex:1;padding:0 10px;overflow:hidden;white-space:nowrap}#statusline .echo{color:#7a1010;font-weight:700}#statusline .pos,#statusline .pend,#statusline .last{padding:0 10px}#statusline .pend{min-width:4ch;color:#333}#overlay{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;background:#050a05d1}#overlay.hidden{display:none}.panel{border:1px solid var(--phos);background:#0c130d;padding:22px 34px;box-shadow:0 0 40px #33ff6626,inset 0 0 30px #0009;text-align:left;max-width:700px;font-size:16px;line-height:1.65;text-shadow:0 0 5px rgba(51,255,102,.45)}.panel h1{font-size:26px;letter-spacing:3px;margin-bottom:10px}.panel h2{font-size:17px;margin-bottom:12px;color:var(--amber);text-shadow:0 0 6px rgba(255,210,63,.5)}.panel .foot{margin-top:16px;color:#8fbf9f;font-size:13px}.panel .logo{font-size:11px;line-height:1.15;white-space:pre;color:var(--phos);margin-bottom:14px}.menu-item{padding:1px 8px;white-space:pre}.menu-head{padding:7px 8px 1px;color:#58806a;font-size:12px;letter-spacing:2px;white-space:pre}.menu-head:first-of-type{padding-top:0}.menu-item.sel{background:var(--phos);color:#0a0f0a;font-weight:700;text-shadow:none}.menu-item.locked{color:#35573f}.menu-item.locked.sel{background:#35573f;color:#0a0f0a}.stars{color:var(--amber);text-shadow:0 0 6px rgba(255,210,63,.6)}.dim{color:#58806a}.kbd{color:var(--amber)}.redx{color:var(--red)}#toast{position:absolute;top:14px;left:50%;transform:translate(-50%);z-index:5;background:var(--amber);color:#201500;font-weight:700;padding:3px 14px;font-size:14px;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:0 0 20px #ffd23f66}#termbox{position:absolute;left:50%;bottom:12px;transform:translate(-50%);z-index:4;background:#150c20;border:1px solid #c792ea;padding:10px 18px 8px;box-shadow:0 0 30px #c792ea40;font-size:22px;white-space:pre;color:#c792ea;text-align:center}#termbox.hidden{display:none}#termbox .buf span{padding:1px 2px}#termbox .buf .cur{background:#c792ea;color:#150c20}#termbox .buf .cur.ins{background:transparent;border-left:2px solid #ffd23f;margin-left:-2px}#termbox .buf .bad{color:#f56;text-shadow:0 0 8px rgba(255,85,102,.6)}#termbox .buf .coin{color:#ffd23f;text-shadow:0 0 8px rgba(255,210,63,.6)}#termbox .buf .zap{background:#f56;color:#150c20}#termbox .buf .cur.zap{background:#f89}#termbox .tgt{font-size:12px;color:#7e6a94;margin-top:4px}#termbox .tmode{font-size:11px;color:var(--amber);margin-top:2px}#vocab{display:flex;gap:6px;justify-content:center;padding:3px 0 5px;min-height:22px;font-family:inherit;font-size:11px}#vocab .cap{padding:1px 7px;border:1px solid #1d3a22;border-radius:3px;color:#234a2a;background:#0b140c;min-width:2.4ch;text-align:center}#vocab .cap.on{color:#b6ffce;border-color:#2f8a44;background:#0e2413;text-shadow:0 0 6px rgba(51,255,102,.5)}
