:root{
  --shell:#c9c9c9; --shell-d:#a9a9ad; --shell-l:#e4e4e6; --ink:#24242a;
  --bg:#2b2d38; --scr:#07080c; --tri:#2fbf8f; --cir:#ff5a5f; --crs:#6ea8ff; --sqr:#ff8ad8;
  --mono:'IBM Plex Mono',monospace; --pix:'Silkscreen',monospace;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:'Chakra Petch',sans-serif;min-height:100vh;
  background:radial-gradient(1200px 600px at 20% -10%,#4a4f6a 0,transparent 60%),
  repeating-linear-gradient(45deg,#2b2d38 0 14px,#2e3040 14px 28px);}
.top{padding:18px 22px 6px;color:#eee}
.logo{display:flex;gap:16px;align-items:center}
h1{font-family:var(--pix);font-size:clamp(22px,4vw,40px);margin:0;letter-spacing:1px}
h1 span{color:var(--cir)}
.tag{margin:2px 0 0;font-weight:300;opacity:.8;font-size:14px}
.disc{width:54px;height:54px;border-radius:50%;flex:none;position:relative;
  background:conic-gradient(#ddd,#9cf,#fcf,#ffc,#cfc,#ddd);animation:spin 3s linear infinite;animation-play-state:paused;box-shadow:0 0 0 3px #111}
.disc.on{animation-play-state:running}
.disc .hole{position:absolute;inset:20px;border-radius:50%;background:#2b2d38;box-shadow:0 0 0 4px #bbb}
@keyframes spin{to{transform:rotate(360deg)}}
.grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;padding:12px 22px;max-width:1400px;margin:auto}
@media(max-width:900px){.grid{grid-template-columns:1fr;padding:10px}}
.shell{background:linear-gradient(180deg,var(--shell-l),var(--shell) 30%,var(--shell-d));border-radius:22px;padding:16px;
  box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 #8f8f95,0 20px 40px rgba(0,0,0,.45)}
.shell-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.led{width:12px;height:12px;border-radius:50%;background:#5a1414;box-shadow:inset 0 1px 2px #000}
.led.on{background:#ff2a2a;box-shadow:0 0 10px #f22;animation:pulse 1.6s infinite}
@keyframes pulse{50%{box-shadow:0 0 3px #f22}}
.brand{font-family:var(--pix);font-size:13px;color:#555}
.groove{flex:1;height:4px;border-radius:3px;background:#9a9aa0;box-shadow:0 1px 0 #fff}
.sym b{font-size:15px;margin-left:5px}
.tri{color:var(--tri)}.cir{color:var(--cir)}.crs{color:var(--crs)}.sqr{color:var(--sqr)}
.screen-wrap{position:relative;background:var(--scr);border-radius:14px;padding:10px;border:3px solid #555;
  box-shadow:inset 0 0 40px rgba(110,168,255,.15),0 0 0 6px #b5b5b9;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
#canvas{width:100%;height:100%;image-rendering:pixelated;object-fit:contain;filter:saturate(1.1)}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);border-radius:12px}
.scan.off{display:none}
.osd{position:absolute;left:16px;bottom:14px;font-family:var(--pix);color:#9cf;font-size:12px;text-shadow:0 0 6px #39f;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:4px}
.deck{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.btn{font-family:var(--pix);font-size:12px;border:none;border-radius:8px;padding:8px 12px;cursor:pointer;color:#222;
  background:linear-gradient(#f1f1f3,#c3c3c8);box-shadow:0 3px 0 #85858c,0 4px 6px rgba(0,0,0,.25)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #85858c}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.big{background:linear-gradient(#ff8a8a,#d94a4a);color:#fff}
.btn.sm{padding:3px 8px;font-size:10px}
.speed{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700}
.speed input{width:120px}
.speed b{font-family:var(--mono);font-size:11px;min-width:56px}
.tog{font-size:12px;font-weight:700}
.progress{margin-top:12px;background:#3a3b44;border-radius:10px;padding:8px 10px;color:#ddd}
.pl{display:flex;justify-content:space-between;font-family:var(--pix);font-size:11px}
.pl.small{font-family:var(--mono);font-size:11px;opacity:.8}
.bar{height:10px;background:#1b1c22;border-radius:6px;margin:6px 0;overflow:hidden}
#barFill{height:100%;width:0;background:linear-gradient(90deg,var(--tri),var(--crs),var(--sqr),var(--cir));transition:width .3s}
.pad{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:12px 18px;background:linear-gradient(#b8b8bd,#9d9da3);border-radius:60px;user-select:none;touch-action:none}
.pad button{border:none;cursor:pointer;background:#444;color:#ddd;font-size:14px}
.dpad{display:grid;grid-template-columns:34px 34px 34px;grid-template-rows:34px 34px 34px}
.dpad .up{grid-column:2;grid-row:1}.dpad .left{grid-column:1;grid-row:2}.dpad .right{grid-column:3;grid-row:2}.dpad .down{grid-column:2;grid-row:3}
.dpad button{border-radius:6px}
.mid{display:flex;gap:8px}
.pill{border-radius:10px;font-family:var(--pix);font-size:9px!important;padding:5px 8px}
.face{display:grid;grid-template-columns:40px 40px 40px;grid-template-rows:36px 36px 36px}
.face .f{width:40px;height:40px;border-radius:50%;background:#2a2a30;font-size:18px}
.face .tri{grid-column:2;grid-row:1}.face .sqr{grid-column:1;grid-row:2}.face .cir{grid-column:3;grid-row:2}.face .crs{grid-column:2;grid-row:3}
.pad button.held{filter:brightness(1.8);transform:scale(.94)}
.keys{font-size:11px;margin:8px 4px 0;color:#444;text-align:center}
.side{display:flex;flex-direction:column;gap:16px;min-width:0}
.card{background:#1d1f29;color:#d6d8e4;border-radius:14px;padding:14px;border:1px solid #3a3d50;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card h2{font-family:var(--pix);font-size:15px;margin:0 0 10px;color:#fff}
.drop{border:2px dashed #555a75;border-radius:12px;padding:12px;text-align:center;font-size:13px;transition:.2s;
  background:radial-gradient(circle at 50% 120%,rgba(110,168,255,.12),transparent 70%)}
.drop.over{border-color:var(--crs);background:rgba(110,168,255,.12)}
.slots{display:flex;gap:10px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.slot{flex:1;min-width:130px;background:#2a2d3c;border-radius:10px;padding:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid #3d4157}
.slot input{display:none}
.slot .st{font-size:18px;color:#777}
.slot.ok{border-color:var(--tri)}.slot.ok .st{color:var(--tri)}
.slot .nm{font-family:var(--pix)}
.slot small{font-family:var(--mono);font-size:10px;opacity:.7;word-break:break-all}
.tracks{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:10px}
.chip{font-family:var(--mono);font-size:10px;padding:3px 7px;border-radius:20px;background:#333850;border:1px solid #4a5070}
.chip.audio{border-color:var(--sqr)}
.lid{width:100%;margin-top:10px;padding:12px}
.tray.closing .drop{animation:lid .7s ease}
@keyframes lid{0%{transform:perspective(500px) rotateX(0)}50%{transform:perspective(500px) rotateX(70deg);opacity:.3}100%{transform:none}}
.mono{font-family:var(--mono);font-size:12px}
.dim{opacity:.6}
.kv{display:grid;grid-template-columns:110px 1fr;gap:3px 10px}
.kv b{color:#8fa0c8;font-weight:400}
.files{max-height:140px;overflow:auto;margin-top:8px;border-top:1px solid #333;padding-top:6px}
.files div{display:flex;justify-content:space-between}
.files .boot{color:var(--tri)}
.tabs{display:flex;gap:4px;margin-bottom:8px}
.tabs button{font-family:var(--pix);font-size:11px;background:#2a2d3c;color:#aaa;border:none;padding:6px 10px;border-radius:6px 6px 0 0;cursor:pointer}
.tabs button.on{background:#3b3f57;color:#fff}
.pane{height:300px;overflow:auto;background:#12131a;border-radius:8px;padding:8px}
.hidden{display:none!important}
.regs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:2px 8px}
.regs span{white-space:nowrap}
.regs i{color:#7d86a8;font-style:normal;display:inline-block;width:34px}
.regs .chg{color:#ffd76a}
.dl{white-space:pre}
.dl.cur{background:#3b3f57;color:#fff}
.dl em{color:#666;font-style:normal}
.lg{white-space:pre-wrap;word-break:break-all}
.lg.tty{color:var(--tri)}.lg.warn{color:#ffd76a}.lg.err{color:var(--cir)}.lg.hle{color:#9ab}
.memhead input{font-family:var(--mono);width:90px;background:#222;color:#fff;border:1px solid #444;padding:2px 4px}
#memDump{margin:6px 0 0;font-size:11px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9;padding:20px}
.errcard{background:#1d1f29;color:#eee;border:2px solid var(--cir);border-radius:14px;padding:20px;max-width:440px;box-shadow:0 0 40px rgba(255,90,95,.4)}
.errcard h3{font-family:var(--pix);color:var(--cir);margin:0 0 8px}
.errcard pre{font-family:var(--mono);font-size:12px;background:#111;padding:8px;border-radius:6px;white-space:pre-wrap}
footer{text-align:center;color:#bbb;padding:20px;font-size:13px}
footer a{color:var(--crs);font-family:var(--pix)}