:root{
  --bg:#0a0a0d;
  --panel:#121218;
  --edge:#26262f;
  --red:#e01f1f;
  --amber:#ffb000;
  --grn:#39d353;
  --txt:#d8d8e2;
  --dim:#6b6b7a;
  --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:
  radial-gradient(1200px 600px at 50% -10%, #16161d 0%, #0a0a0d 60%);
  color:var(--txt); font-family:'IBM Plex Sans',sans-serif;
  -webkit-font-smoothing:antialiased;}

/* boot splash */
.boot{position:fixed;inset:0;z-index:50;background:#000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease, visibility .5s;}
.boot.done{opacity:0;visibility:hidden;}
.boot-inner{text-align:center;color:#39d353;font-family:var(--mono);}
.boot-logo{font-family:'VT323',monospace;font-size:96px;color:var(--red);
  text-shadow:0 0 24px rgba(224,31,31,.6); line-height:1;}
.boot-txt{margin-top:8px;letter-spacing:2px;}
.boot-bar{width:220px;height:8px;background:#111;border:1px solid #333;margin:16px auto;overflow:hidden;}
.boot-bar span{display:block;height:100%;background:var(--grn);animation:load 1.4s ease forwards;}
@keyframes load{from{width:0}to{width:100%}}
.boot-sub{color:#555;font-size:12px;}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;background:linear-gradient(#141419,#0d0d12);
  border-bottom:1px solid var(--edge);gap:12px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:14px;}
.berry{font-size:34px;filter:drop-shadow(0 0 8px rgba(224,31,31,.5));}
.topbar h1{margin:0;font-size:22px;font-weight:600;letter-spacing:.5px;}
.topbar h1 .sub{font-weight:200;color:var(--red);font-size:15px;letter-spacing:1px;}
.chips-line{font-family:var(--mono);font-size:11px;color:var(--dim);}
.leds{display:flex;gap:14px;}
.led{display:flex;align-items:center;gap:5px;font-family:var(--mono);font-size:11px;color:var(--dim);}
.led i{width:9px;height:9px;border-radius:50%;background:#333;box-shadow:inset 0 0 2px #000;transition:.1s;}
#led-pwr i{background:#1a4a24;}
.led.flash i{background:var(--grn);box-shadow:0 0 10px var(--grn);}
#led-pwr.flash i{background:var(--grn);box-shadow:0 0 10px var(--grn);}

/* layout */
.layout{display:grid;grid-template-columns:1fr 380px;gap:20px;padding:20px;max-width:1400px;margin:0 auto;}
@media(max-width:900px){.layout{grid-template-columns:1fr;}}

/* stage */
.stage{display:flex;flex-direction:column;gap:14px;}
.bezel{background:linear-gradient(145deg,#2a2a30,#141418);border-radius:22px;
  padding:26px;box-shadow:0 20px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);}
.screen-wrap{position:relative;border-radius:8px;overflow:hidden;background:#000;
  box-shadow:inset 0 0 60px rgba(0,0,0,.9);}
#canvas{display:block;width:100%;height:auto;image-rendering:pixelated;
  image-rendering:crisp-edges;aspect-ratio:2/1;background:#000;cursor:text;}
#canvas.focused{outline:2px solid var(--grn);outline-offset:-2px;}
#crt{position:absolute;inset:0;pointer-events:none;opacity:0;transition:.3s;}
#crt.on{opacity:1;background:repeating-linear-gradient(
  to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,0) 4px);}
.vignette{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 120px rgba(0,0,0,.7);border-radius:8px;}

.stage-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.badge{font-family:var(--mono);font-size:12px;background:#1a1a22;color:var(--amber);
  padding:5px 10px;border-radius:6px;border:1px solid var(--edge);}
.mode-btns{display:flex;gap:8px;}
.mode-btn{background:#16161d;color:var(--dim);border:1px solid var(--edge);
  padding:7px 12px;border-radius:6px;font-family:var(--mono);font-size:12px;cursor:pointer;transition:.15s;}
.mode-btn:hover{color:var(--txt);}
.mode-btn.active{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 0 14px rgba(224,31,31,.4);}

.palette{display:flex;gap:6px;}
.sw{width:34px;height:22px;border-radius:4px;border:1px solid rgba(255,255,255,.15);}

.transport{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--panel);padding:12px;border-radius:10px;border:1px solid var(--edge);}
.tbtn{background:#1c1c24;color:var(--txt);border:1px solid var(--edge);
  padding:8px 14px;border-radius:7px;font-family:var(--mono);font-size:13px;cursor:pointer;transition:.15s;}
.tbtn:hover{border-color:var(--dim);background:#24242e;}
.tbtn.primary{background:var(--grn);color:#04120a;border-color:var(--grn);font-weight:600;}
.clk{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--dim);margin-left:auto;}
.clk input{accent-color:var(--red);}
#clk-val{color:var(--amber);min-width:60px;}

.demo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--dim);}
.demo-row select{background:#1c1c24;color:var(--txt);border:1px solid var(--edge);padding:7px;border-radius:6px;font-family:var(--mono);}
.save-status{color:var(--grn);font-size:11px;}
.save-status a{color:var(--amber);}
.type-hint{font-family:var(--mono);font-size:11px;color:var(--dim);}

/* ROM loader */
.rom-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--dim);
  background:var(--panel);padding:10px 12px;border-radius:10px;border:1px solid var(--edge);}
.rom-label{display:flex;align-items:center;gap:8px;color:var(--amber);}
.rom-label input[type=file]{font-family:var(--mono);font-size:11px;color:var(--txt);
  background:#1c1c24;border:1px solid var(--edge);border-radius:6px;padding:5px;max-width:220px;}
.rom-label input[type=file]::file-selector-button{
  background:var(--red);color:#fff;border:none;border-radius:5px;
  padding:5px 10px;margin-right:8px;font-family:var(--mono);font-size:11px;cursor:pointer;}
.rom-status{font-size:11px;color:var(--dim);}
.rom-status.loaded{color:var(--grn);}
.bezel.rom-drag{outline:2px dashed var(--grn);outline-offset:-6px;}

/* reset vector readout */
.reset-vec{background:#0b0b0f;border:1px solid var(--edge);border-radius:6px;
  padding:6px 8px;margin:8px 0;}
.reset-vec .rv{display:flex;justify-content:space-between;padding:2px 0;
  color:var(--dim);font-size:11px;}
.reset-vec .rv b{color:var(--red);font-weight:600;}
.reset-vec .rv.dim{color:var(--dim);justify-content:center;}

/* panels */
.panels{display:flex;flex-direction:column;gap:14px;}
.panel{background:var(--panel);border:1px solid var(--edge);border-radius:10px;overflow:hidden;}
.panel summary{cursor:pointer;padding:12px 14px;font-family:var(--mono);font-size:13px;
  color:var(--amber);list-style:none;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#15151c;border-bottom:1px solid var(--edge);}
.panel summary::-webkit-details-marker{display:none;}
.panel summary::before{content:'▸';color:var(--dim);transition:.2s;}
.panel[open] summary::before{transform:rotate(90deg);}
.pnote{font-family:'IBM Plex Sans';color:var(--dim);font-size:11px;font-weight:200;}
.annot{display:none;}
body.annot-on .annot{display:inline;}
.pbody{padding:12px 14px;font-family:var(--mono);font-size:12px;}

.regs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 10px;margin-bottom:6px;}
@media(max-width:1100px){.regs{grid-template-columns:repeat(2,1fr);}}
.reg{color:var(--dim);font-size:11px;}
.reg b{color:var(--grn);font-weight:600;}
.pcflags{display:flex;align-items:center;gap:14px;margin:8px 0;flex-wrap:wrap;}
.mono{font-family:var(--mono);color:var(--amber);}
.flags{display:flex;gap:5px;}
.flag{font-style:normal;width:20px;height:20px;line-height:20px;text-align:center;
  border-radius:4px;background:#111;color:#444;border:1px solid var(--edge);font-size:11px;}
.flag.on{background:var(--red);color:#fff;border-color:var(--red);}

.disasm{background:#0b0b0f;border:1px solid var(--edge);border-radius:6px;padding:8px;margin-top:6px;}
.dline{color:var(--dim);white-space:pre;overflow:hidden;text-overflow:ellipsis;font-size:11px;line-height:1.5;}
.dline.cur{color:var(--grn);background:rgba(57,211,83,.08);}
.daddr{color:#4a4a5a;}

.kv{display:flex;justify-content:space-between;padding:3px 0;color:var(--dim);}
.kv b{color:var(--txt);font-weight:400;}
.heat{width:100%;height:auto;image-rendering:pixelated;border:1px solid var(--edge);border-radius:6px;margin-top:8px;background:#000;}
.hlabel{color:var(--dim);font-size:10px;text-align:center;margin-top:4px;}

.matrix{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin-bottom:10px;}
.mkey{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:#15151c;border:1px solid var(--edge);border-radius:5px;font-size:12px;color:var(--dim);transition:.08s;}
.mkey.lit{background:var(--red);color:#fff;box-shadow:0 0 10px rgba(224,31,31,.6);border-color:var(--red);}
.serial{background:#0b0b0f;border:1px solid var(--edge);border-radius:6px;padding:8px;margin-top:8px;
  font-size:11px;color:var(--grn);min-height:60px;line-height:1.6;}
.serial .dim{color:var(--dim);}

.foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  padding:16px 20px;border-top:1px solid var(--edge);color:var(--dim);
  font-family:var(--mono);font-size:11px;}
.foot a{color:var(--red);text-decoration:none;border-bottom:1px dotted var(--red);}
.foot a:hover{color:var(--amber);border-color:var(--amber);}
.dim{color:var(--dim);}