:root{
  --bg:#07080a; --panel:#111316; --panel2:#0b0c0e; --edge:#24282e;
  --ph:#39ff14; --phd:#1a7a0a; --amb:#ffb000; --ambd:#7a5400; --txt:#b9c2b0; --dim:#5d6658;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--txt);font-family:'IBM Plex Mono',monospace;font-size:13px}
body{
  background:
   radial-gradient(ellipse at 50% -10%, rgba(57,255,20,.08), transparent 60%),
   repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 4px),
   var(--bg);
  min-height:100vh;
}
header{text-align:center;padding:18px 10px 6px}
.title{font-family:'Major Mono Display',monospace;font-weight:400;font-size:clamp(28px,6vw,64px);margin:0;color:var(--ph);
  letter-spacing:.12em;text-shadow:0 0 6px var(--ph),0 0 24px rgba(57,255,20,.5);animation:flick 4s infinite}
@keyframes flick{0%,100%{opacity:1}92%{opacity:1}93%{opacity:.6}94%{opacity:1}97%{opacity:.85}}
.sub{margin:4px 0 0;color:var(--dim);font-weight:200;letter-spacing:.08em}
.cpuname{color:var(--amb);cursor:help;border-bottom:1px dotted var(--ambd)}
.grid{display:grid;grid-template-columns:280px minmax(300px,1fr) 360px;gap:16px;padding:12px 16px;max-width:1400px;margin:0 auto;align-items:start}
.rack{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--edge);border-radius:4px;padding:16px 14px;position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 10px 30px rgba(0,0,0,.6);animation:rise .6s both}
.rack.right{animation-delay:.15s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.rack::before,.rack::after{content:'';position:absolute;top:6px;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#666,#222 60%);box-shadow:inset 0 0 0 1px #000}
.rack::before{left:6px}.rack::after{right:6px}
h2{font-family:'Major Mono Display',monospace;font-weight:400;font-size:15px;color:var(--amb);margin:0 0 12px;letter-spacing:.15em;text-align:center}
h2.mt{margin-top:18px}
.drop{border:1px dashed var(--phd);border-radius:3px;padding:12px;margin-bottom:8px;cursor:pointer;transition:.15s;background:rgba(57,255,20,.02)}
.drop:hover,.drop.over{border-color:var(--ph);background:rgba(57,255,20,.07);box-shadow:0 0 14px rgba(57,255,20,.2)}
.dlabel{color:var(--ph);font-weight:700;letter-spacing:.05em}
.dhint{color:var(--dim);font-size:11px}
.finfo{margin-top:6px;color:var(--amb);font-size:11px;word-break:break-all}
.hex{font-size:10px;color:var(--phd);margin:0 0 10px;min-height:10px;white-space:pre;overflow:hidden}
button{font-family:inherit;background:#1a1d21;color:var(--txt);border:1px solid #2e333a;border-radius:3px;padding:7px 9px;cursor:pointer;font-size:12px;letter-spacing:.05em;transition:.1s}
button:hover{border-color:var(--ph);color:var(--ph)}
button:active{transform:translateY(1px)}
button.big{color:var(--amb);border-color:var(--ambd)}
button.on{background:var(--ph);color:#000;border-color:var(--ph)}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0}
.wide{width:100%;margin-top:6px}
.ghost{background:transparent;color:var(--dim)}
.adv{margin-top:10px;color:var(--dim)}
.adv input,.memjump input{width:56px;background:#000;border:1px solid var(--edge);color:var(--ph);font-family:inherit;padding:3px}
.cabinet{display:flex;flex-direction:column;align-items:center;animation:rise .6s .05s both}
.bezel{background:linear-gradient(160deg,#1b1c1f,#050506);padding:22px;border-radius:18px;box-shadow:0 0 0 2px #000,0 30px 60px rgba(0,0,0,.8),inset 0 2px 0 rgba(255,255,255,.06);width:100%;max-width:560px}
.screenwrap{position:relative;width:100%;aspect-ratio:3/4;background:#000;border-radius:10px;overflow:hidden;box-shadow:inset 0 0 40px rgba(0,0,0,1)}
#canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#overlay{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;background-size:cover;background-position:center}
.led{position:absolute;right:10px;bottom:10px;width:6px;height:6px;border-radius:50%;background:#300}
.led.on{background:#f22;box-shadow:0 0 8px #f22}
.cabfoot{display:flex;justify-content:space-between;width:100%;max-width:560px;color:var(--dim);font-size:11px;padding:6px 12px}
.keys{color:var(--dim);font-size:11px;text-align:center}
.pad{display:none;width:100%;max-width:560px;justify-content:space-between;align-items:center;padding:10px 8px}
.dpad{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}
.dpad button{font-size:18px;padding:0}
.dpad [data-j=up]{grid-column:2;grid-row:1}.dpad [data-j=left]{grid-column:1;grid-row:2}
.dpad [data-j=right]{grid-column:3;grid-row:2}.dpad [data-j=down]{grid-column:2;grid-row:3}
.fbtns{display:grid;grid-template-columns:repeat(4,46px);gap:8px}
.fbtns button{height:46px;border-radius:50%;color:var(--amb);border-color:var(--ambd);font-weight:700}
@media (hover:none){.pad{display:flex}}
.tabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap}
.tabs button{flex:1;padding:5px 2px;font-size:11px}
.tab{display:none}.tab.on{display:block}
.tab pre{margin:0;font-size:11px;line-height:1.45;color:var(--ph);background:#000;border:1px solid var(--edge);padding:8px;min-height:180px;overflow:auto;white-space:pre}
.tab canvas{width:100%;background:#000;border:1px solid var(--edge);display:block;margin-bottom:6px}
.memjump{display:block;margin-bottom:6px;color:var(--dim)}
.knobs label{display:block;margin:6px 0;color:var(--dim);font-size:11px}
.knobs input[type=range]{width:100%;accent-color:var(--ph)}
.knobs select{width:100%;background:#000;color:var(--ph);border:1px solid var(--edge);font-family:inherit;padding:4px}
.chk{display:flex!important;align-items:center;gap:6px}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:18px 20px;color:var(--dim);font-size:11px;max-width:1400px;margin:0 auto;border-top:1px solid #15181b}
footer a{color:var(--amb)}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:#000;color:var(--amb);border:1px solid var(--ambd);
  padding:10px 16px;border-radius:3px;transition:.3s;max-width:90vw;z-index:9;box-shadow:0 0 20px rgba(255,176,0,.2)}
#toast.show{transform:translateX(-50%) translateY(0)}
@media (max-width:1100px){.grid{grid-template-columns:1fr 1fr}.cabinet{grid-column:1/-1;order:-1}}
@media (max-width:700px){.grid{grid-template-columns:1fr;padding:8px}.bezel{padding:12px}}