:root{
  --bg:#141214; --bg2:#1d1a1c; --panel:#211d20; --line:#3a3236;
  --amber:#ffb000; --amber2:#ffd27a; --green:#39ff88; --pink:#ff2d78;
  --text:#e9dcc8; --dim:#8c7f73;
  --mono:'IBM Plex Mono', monospace; --pix:'Press Start 2P', monospace; --vt:'VT323', monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(ellipse at 20% -10%, #3a2413 0%, transparent 55%),
    radial-gradient(ellipse at 110% 100%, #102a1d 0%, transparent 50%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px),
    var(--bg);
  color:var(--text); font-family:var(--mono); min-height:100vh;
}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}

.topbar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:2px solid #000;background:linear-gradient(#231e1f,#171415);box-shadow:0 2px 0 #3a2d24}
.brand{display:flex;gap:14px;align-items:center}
.brand h1{font-family:var(--pix);font-size:22px;margin:0;color:var(--amber);text-shadow:0 0 12px rgba(255,176,0,.55),3px 3px 0 #5a2c00;letter-spacing:1px}
.brand .eight{color:var(--pink);text-shadow:0 0 12px rgba(255,45,120,.6),3px 3px 0 #4a0020}
.slogan{font-family:var(--vt);font-size:20px;color:var(--dim);margin-top:4px}
.led{width:14px;height:14px;border-radius:50%;background:#400;box-shadow:inset 0 -2px 3px #000;flex:none}
.led.on{background:#ff3b3b;box-shadow:0 0 10px #ff3b3b,0 0 22px #ff3b3b88;animation:blink 1.4s infinite}
@keyframes blink{0%,70%{opacity:1}85%{opacity:.35}100%{opacity:1}}
.transport{display:flex;flex-wrap:wrap;gap:8px}

.key{font-family:var(--pix);font-size:10px;color:var(--text);background:linear-gradient(#3b3437,#2a2427);border:2px solid #000;border-radius:6px;padding:10px 12px;box-shadow:0 4px 0 #000,inset 0 1px 0 #5b5156;transition:transform .05s, box-shadow .05s}
.key:hover{color:var(--amber2)}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 #000,inset 0 1px 0 #5b5156}
.key.k-green{color:var(--green)}
.key.k-pink{color:var(--pink)}
.key.k-amber{background:linear-gradient(#ffbf2e,#d98e00);color:#2a1600;box-shadow:0 4px 0 #6a3f00,inset 0 1px 0 #ffe09a}
.key.lit{outline:2px solid var(--green);outline-offset:2px}

.deck{display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);gap:20px;padding:20px;max-width:1500px;margin:0 auto;animation:rise .6s ease both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.bezel{
  padding:22px 22px 10px;border-radius:18px;border:2px solid #000;
  background:
    repeating-linear-gradient(93deg, rgba(0,0,0,.18) 0 2px, transparent 2px 7px, rgba(255,220,170,.05) 7px 9px, transparent 9px 15px),
    linear-gradient(160deg,#6b3f22,#40240f 60%,#2d180a);
  box-shadow:0 14px 30px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,210,160,.25);
}
.screen-wrap{position:relative;border-radius:22px/28px;overflow:hidden;background:#000;border:6px solid #111;box-shadow:inset 0 0 0 2px #333,0 0 0 3px #1a1a1a}
.screen-wrap canvas{display:block;width:100%;height:auto;image-rendering:pixelated;outline:none}
.screen-wrap.crt canvas{filter:saturate(1.25) contrast(1.08) brightness(1.08)}
.screen-wrap.crt::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);box-shadow:inset 0 0 40px rgba(120,255,180,.08)}
.screen-wrap:focus-within{box-shadow:inset 0 0 0 2px var(--green),0 0 0 3px #1a1a1a}
.gate{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;background:rgba(0,0,0,.55);font-family:var(--pix);font-size:12px;color:var(--amber);cursor:pointer;z-index:3;text-align:center}
.gate span{animation:blink 1s infinite}
.gate small{font-family:var(--vt);font-size:18px;color:var(--dim)}
.missed{position:absolute;left:50%;top:10%;transform:translateX(-50%) rotate(-3deg);font-family:var(--pix);font-size:13px;color:#fff;background:var(--pink);padding:8px 12px;border:2px solid #000;box-shadow:4px 4px 0 #000;opacity:0;pointer-events:none;z-index:2;white-space:nowrap}
.missed.show{opacity:1;animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(-50%) rotate(-3deg)}25%{transform:translateX(-53%) rotate(-5deg)}75%{transform:translateX(-47%) rotate(-1deg)}}
.beamlabel{position:absolute;right:10px;bottom:8px;font-family:var(--vt);font-size:18px;color:var(--green);text-shadow:0 0 6px var(--green);pointer-events:none}
.bezel-bottom{display:flex;justify-content:space-between;align-items:center;padding:10px 4px 2px}
.badge{font-family:var(--pix);font-size:10px;padding:6px 10px;border-radius:4px;color:#222;background:linear-gradient(#f4f4f4,#9a9a9a 50%,#e0e0e0 51%,#8a8a8a);border:1px solid #000;box-shadow:0 2px 0 #000;letter-spacing:2px}
.knobs{display:flex;gap:10px}
.knob{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ddd,#555 60%,#222);border:1px solid #000}

.meters{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.meter{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 10px;display:flex;flex-direction:column;min-width:80px}
.meter label{font-size:9px;letter-spacing:2px;color:var(--dim)}
.meter b{font-family:var(--vt);font-size:22px;color:var(--green);font-weight:400}
.meter.wide{flex:1;min-width:200px}
.cycbar{position:relative;height:8px;background:#0d0b0c;border:1px solid #000;margin:4px 0}
.cycbar div{height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--amber),var(--pink));transition:width .15s}
.cycbar .limit{position:absolute;right:0;top:-3px;bottom:-3px;width:2px;background:var(--pink)}

.toggles{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;color:var(--amber2)}
.toggles label{display:flex;gap:6px;align-items:center;cursor:pointer}
.toggles input{accent-color:var(--amber)}

.pad{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding:12px 16px;background:linear-gradient(#262123,#1a1718);border:1px solid var(--line);border-radius:12px;user-select:none;-webkit-user-select:none;touch-action:none}
.dpad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px)}
.padbtn{background:#333;color:var(--text);border:2px solid #000;font-size:14px;box-shadow:0 3px 0 #000}
.padbtn.pressed,.padbtn:active{background:var(--amber);color:#000;transform:translateY(2px);box-shadow:0 1px 0 #000}
.up{grid-column:2;grid-row:1;border-radius:6px 6px 0 0}
.left{grid-column:1;grid-row:2;border-radius:6px 0 0 6px}
.right{grid-column:3;grid-row:2;border-radius:0 6px 6px 0}
.down{grid-column:2;grid-row:3;border-radius:0 0 6px 6px}
.padlabel{font-family:var(--pix);font-size:9px;color:var(--dim);text-align:center;line-height:1.8}
.padlabel small{font-family:var(--vt);font-size:16px}
.abtns{display:flex;gap:12px}
.ab{width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff6b9b,#b0104a);color:#fff;font-family:var(--pix);font-size:12px}

.chip{margin-top:14px;background:linear-gradient(#1b1b1d,#0e0e10);border:2px solid #000;border-radius:4px;padding:10px 12px;position:relative;box-shadow:0 0 0 3px #555,0 0 0 4px #000}
.chip::before,.chip::after{content:"";position:absolute;left:10px;right:10px;height:6px;background:repeating-linear-gradient(90deg,#c9c9c9 0 6px,transparent 6px 14px)}
.chip::before{top:-10px}.chip::after{bottom:-10px}
.chiphead{display:flex;gap:10px;align-items:center;font-family:var(--pix);font-size:10px;color:#ccc}
.chiphead small{font-family:var(--vt);font-size:15px;color:#777}
.notch{width:12px;height:12px;border-radius:50%;background:#000;border:1px solid #333}
.chipch{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:8px}
.ch{display:flex;flex-direction:column;align-items:center;font-family:var(--vt);font-size:14px}
.ch b{font-weight:400;color:var(--amber)}.ch.n b{color:var(--pink)}
.ch small{color:#888;font-size:12px}
.vu{width:14px;height:48px;background:#050505;border:1px solid #333;display:flex;align-items:flex-end}
.vu i{display:block;width:100%;background:linear-gradient(0deg,var(--green),var(--amber))}
.ch.n .vu i{background:linear-gradient(0deg,#ff8fb4,var(--pink))}
.corrupter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px;padding:10px;background:#1f0a12;border:1px dashed var(--pink);border-radius:8px;font-family:var(--pix);font-size:10px;color:var(--pink)}
.corrupter input,.corrupter select{background:#0f0d0e;color:var(--amber2);border:2px solid #000;border-radius:4px;padding:6px;font-family:var(--mono);width:90px}
.code-col{display:flex;flex-direction:column;min-width:0}
.tabs{display:flex;gap:4px}
.tab{font-family:var(--pix);font-size:10px;padding:10px 14px;background:#1a1718;color:var(--dim);border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0}
.tab.on{background:var(--panel);color:var(--amber)}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:0 8px 8px 8px;padding:12px;flex:1;display:flex;flex-direction:column;min-height:0}
.cartbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.cartbar select{flex:1;min-width:180px;background:#0f0d0e;color:var(--amber2);border:2px solid #000;border-radius:6px;padding:8px;font-family:var(--mono);font-size:13px}
.editor{position:relative;flex:1;min-height:420px;background:#0c0b0b;border:2px solid #000;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 30px rgba(255,176,0,.04)}
.editor pre,.editor textarea{position:absolute;inset:0;margin:0;padding:12px 14px;font-family:var(--mono);font-size:13px;line-height:1.5;white-space:pre;tab-size:8;overflow:auto;border:0}
.editor pre{color:#c9bca8;pointer-events:none}
.editor textarea{background:transparent;color:transparent;caret-color:var(--amber);resize:none;outline:none}
.editor textarea::selection{background:rgba(255,176,0,.25);color:transparent}
.t-op{color:var(--amber);font-weight:700}
.t-lb{color:var(--green)}
.t-dr{color:#ff8f3c}
.t-im{color:#ffd27a}
.t-hx{color:#7fd6ff}
.t-rg{color:#ff6fa6}
.t-cm{color:#6c625a;font-style:italic;font-weight:300}
.t-st{color:#c5ff7a}
.console{margin-top:10px;padding:8px 12px;border-radius:6px;font-family:var(--vt);font-size:19px;border:2px solid #000}
.console.ok{background:#0c1f14;color:var(--green)}
.console.err{background:#2a0714;color:#ff8fb4;border-color:var(--pink)}

.manual{overflow:auto;font-size:13px;line-height:1.6;max-height:640px;padding-right:6px}
.manual h2{font-family:var(--pix);font-size:13px;color:var(--amber);margin:4px 0 10px}
.manual h3{font-family:var(--pix);font-size:10px;color:var(--green);margin:18px 0 8px}
.manual h3 small{font-family:var(--vt);font-size:15px;color:var(--dim)}
.manual code{background:#0c0b0b;color:var(--amber2);padding:1px 5px;border-radius:3px}
.regtable{width:100%;border-collapse:collapse;font-size:12px}
.regtable th{text-align:left;color:var(--dim);font-weight:400;border-bottom:1px solid var(--line);padding:4px}
.regtable td{padding:4px;border-bottom:1px dashed #2c2528;vertical-align:top}
.regtable td:nth-child(1){color:#7fd6ff}
.regtable td:nth-child(2){color:#ff6fa6;font-weight:700;cursor:help}
.palgrid{display:grid;grid-template-columns:repeat(16,1fr);gap:1px;max-height:420px;overflow-y:auto}
.palgrid .palbank{grid-column:1/-1;margin:6px 0 2px;font-size:10px;color:var(--amber)}
.palgrid div{aspect-ratio:2/1;cursor:pointer;border:1px solid #000;font-size:8px;color:transparent;display:flex;align-items:center;justify-content:center}
.palgrid div:hover{outline:2px solid #fff;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}

.drawer{max-width:1500px;margin:0 auto;padding:0 20px 20px}
.drawer summary{font-family:var(--pix);font-size:11px;color:var(--amber);cursor:pointer;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:8px}
.drawer summary small{font-family:var(--vt);font-size:16px;color:var(--dim);margin-left:10px}
.dbg-grid{display:grid;grid-template-columns:280px 1.2fr 1fr 1.3fr;gap:10px;margin-top:10px}
.dbox{background:#161314;border:1px solid var(--line);border-radius:8px;padding:10px;min-width:0}
.dbox h4{margin:0 0 8px;font-family:var(--pix);font-size:9px;color:var(--dim);display:flex;gap:6px;align-items:center}
.cpuregs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-family:var(--vt);font-size:20px}
.cpuregs span{color:var(--dim)}
.cpuregs b{color:var(--green);font-weight:400}
.flags{display:flex;gap:4px;margin:10px 0}
.flags span{flex:1;text-align:center;font-family:var(--pix);font-size:9px;padding:6px 0;border-radius:3px;background:#2a2326;color:#5a4f55;border:1px solid #000}
.flags span.on{background:var(--amber);color:#000;box-shadow:0 0 8px var(--amber)}
#scope{width:100%;background:#061009;border:1px solid #000;border-radius:4px}
.disasm{font-size:12px;line-height:1.55;max-height:300px;overflow:auto}
.disasm div{display:flex;gap:10px;padding:0 4px;cursor:pointer;white-space:nowrap}
.disasm div:hover{background:#221c1f}
.disasm .cur{background:#3a2a00;color:var(--amber)}
.disasm .bp::before{content:"●";color:var(--pink)}
.disasm .nbp::before{content:"·";color:#333}
.disasm .ad{color:#7fd6ff}
.disasm .lbl{color:var(--green)}
.ioregs{display:grid;grid-template-columns:1fr 1fr;gap:3px 10px;font-size:12px}
.ioregs div{display:flex;align-items:center;gap:6px}
.ioregs .n{color:#ff6fa6;flex:1}
.ioregs .sw{width:14px;height:10px;border:1px solid #000}
.hexview{font-size:11px;line-height:1.5;white-space:pre;overflow:auto;max-height:300px;color:#c9bca8}
.hexview .ha{color:#7fd6ff}
.hexview .nz{color:var(--amber2)}
.hexview .sp{background:var(--pink);color:#000}
.mini{font-family:var(--pix);font-size:8px;padding:3px 6px;background:#2a2326;color:var(--dim);border:1px solid #000;border-radius:3px}
.mini.on{color:#000;background:var(--green)}

.foot{text-align:center;padding:20px;font-family:var(--vt);font-size:20px;color:var(--dim);border-top:1px solid #000}
.foot a{color:var(--amber)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:var(--amber);color:#000;font-family:var(--pix);font-size:10px;padding:10px 14px;border:2px solid #000;box-shadow:4px 4px 0 #000;transition:transform .25s;z-index:10}
.toast.show{transform:translateX(-50%) translateY(0)}
.sstmodal{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:20;display:flex;align-items:center;justify-content:center;padding:12px}
.sstmodal.hidden{display:none}
.sstbox{background:var(--panel);border:2px solid var(--amber);box-shadow:6px 6px 0 #000;padding:16px;width:min(720px,100%);max-height:94vh;overflow:auto;font-family:var(--mono);color:var(--text)}
.sstbox h3{font-family:var(--pix);font-size:12px;color:var(--amber);margin:0 0 10px}
.sstbox h3 small{color:var(--dim);font-size:9px}
.sstctl{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.sstctl select{background:#000;color:var(--amber);border:1px solid var(--line);font-family:var(--mono)}
.sststat{font-family:var(--vt);font-size:20px;color:var(--green);margin:6px 0}
.sstgrid{display:grid;grid-template-columns:repeat(16,1fr);gap:2px}
.sstgrid div{font-size:9px;text-align:center;padding:3px 0;background:#111;color:var(--dim)}
.sstgrid .run{background:var(--amber);color:#000}
.sstgrid .ok{background:#0f5a2e;color:var(--green)}
.sstgrid .bad{background:#5a0f28;color:var(--pink)}
.sstgrid .err{background:#333;color:#888}
.sstlog{font-size:11px;max-height:200px;overflow:auto;background:#000;padding:8px;color:var(--pink);white-space:pre-wrap;margin-top:8px}
.hud{position:absolute;inset:0;pointer-events:none;z-index:2;font-family:var(--pix);color:var(--amber)}
.hbar{display:flex;justify-content:space-between;padding:8px 12px;font-size:10px;text-shadow:2px 2px 0 #000}
.hbar span:nth-child(2){color:var(--pink)}
.hmsg{position:absolute;left:0;right:0;top:38%;text-align:center;font-size:20px;text-shadow:3px 3px 0 #000,0 0 14px rgba(255,176,0,.6)}
.hmsg small{display:block;margin-top:14px;font-size:9px;color:var(--green);animation:blink 1s infinite}
.hmsg.over{color:var(--pink)}

@media (max-width:1100px){
  .deck{grid-template-columns:1fr}
  .dbg-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .deck{padding:10px}
  .brand h1{font-size:15px}
  .bezel{padding:12px 12px 6px}
  .dbg-grid{grid-template-columns:1fr}
  .key{font-size:9px;padding:8px 9px}
  .editor{min-height:320px}
}