:root{
  --beige:#e6dcc3; --beige2:#d6cbae; --beige3:#bfb393; --ink:#3a342a;
  --glow:#33ff66; --bg:#2a2620;
}
*{box-sizing:border-box}
body{margin:0;font-family:"IBM Plex Mono",monospace;color:var(--ink);
  background:
    radial-gradient(ellipse at 20% 0%,#4a4234 0%,transparent 60%),
    repeating-linear-gradient(90deg,#2b2720 0 2px,#2e2a22 2px 4px),
    var(--bg);
  min-height:100vh}
.topbar{display:flex;align-items:center;gap:18px;padding:14px 22px;
  background:linear-gradient(#ece3cc,#d8cdb0);border-bottom:3px solid #9d9274;box-shadow:0 4px 0 #1a1712}
.logo{display:flex;align-items:center;gap:8px}
.logo .stripes{display:flex;flex-direction:column;gap:2px;width:28px}
.logo .stripes i{height:3px;display:block}
.logo .stripes i:nth-child(1){background:#5eb84f}.logo .stripes i:nth-child(2){background:#f8c836}
.logo .stripes i:nth-child(3){background:#f2852d}.logo .stripes i:nth-child(4){background:#e03a3e}
.logo .stripes i:nth-child(5){background:#943b95}.logo .stripes i:nth-child(6){background:#159cd8}
.logo span{font-family:"VT323";font-size:38px;letter-spacing:6px;color:#1d3d8f;
  background:repeating-linear-gradient(#1d3d8f 0 3px,transparent 3px 5px);-webkit-background-clip:text;color:transparent}
h1{flex:1;margin:0;font-weight:300;font-size:18px;letter-spacing:1px}
h1 b{font-weight:700;font-size:26px}
h1 small{display:block;font-size:11px;opacity:.6}
.power{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit}
.power .rocker{width:44px;height:30px;background:linear-gradient(#c22,#811);border-radius:4px;border:2px solid #511;
  box-shadow:inset 0 -10px 0 #6a0f0f,0 2px 0 #000;transition:.15s}
.power.on .rocker{box-shadow:inset 0 10px 0 #6a0f0f,0 2px 0 #000;background:linear-gradient(#e33,#a11)}
.power em{font-style:normal;font-size:10px;font-weight:700}

.rig{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:22px;padding:22px;max-width:1400px;margin:0 auto}
@media(max-width:980px){.rig{grid-template-columns:1fr;padding:10px}}

.bezel{background:linear-gradient(160deg,#efe6cf,#cdc1a2);border-radius:22px;padding:28px 28px 10px;
  box-shadow:inset 0 2px 0 #fff8,inset 0 -4px 0 #9d9274,0 18px 40px #000a}
@media(max-width:600px){.bezel{padding:12px 12px 6px;border-radius:12px}}
.crt{position:relative;background:#050805;border-radius:16px/22px;padding:3%;overflow:hidden;
  box-shadow:inset 0 0 40px #000,inset 0 0 6px #000,0 0 0 6px #2b2a26}
#screen{width:100%;aspect-ratio:4/3;display:block;image-rendering:pixelated;outline:none;
  filter:drop-shadow(0 0 4px var(--glow)) brightness(1.08)}
.crt.focus{box-shadow:inset 0 0 40px #000,0 0 0 6px #2b2a26,0 0 0 8px var(--glow)}
.scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.scan.off{display:none}
.vignette{position:absolute;inset:0;pointer-events:none;border-radius:16px/22px;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
#capHint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);font-size:11px;
  color:var(--glow);background:#000c;padding:3px 10px;border-radius:3px;pointer-events:none;transition:opacity .4s}
.bezel-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 6px 4px;font-size:11px}
.bezel-foot .brand{font-family:VT323;font-size:22px;letter-spacing:4px;color:#555}
.knobs i{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(#aaa,#555);margin-left:6px;box-shadow:0 1px 0 #000}
.statusline{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px;padding:6px 12px;background:#111;color:var(--glow);
  font-size:12px;border-radius:4px;border:1px solid #333}
#statMsg{flex:1;text-align:right;opacity:.85}
.statusline .err{color:#ff5555}

.mobkeys{display:flex;flex-wrap:wrap;gap:4px;margin-top:10px}
.mobkeys button{font-family:inherit;font-size:11px;padding:6px 8px;background:var(--beige);border:1px solid #8a7f62;border-radius:3px;
  box-shadow:0 2px 0 #6f6650;cursor:pointer}
.mobkeys button:active,.mobkeys button.held{transform:translateY(2px);box-shadow:none;background:#cfc3a3}
.mobkeys .type{background:#1d3d8f;color:#fff}
#hiddenInput{position:absolute;opacity:0;width:1px;height:1px;left:-100px}

.unit{display:flex;flex-direction:column;gap:14px}
.drives,.panel{background:linear-gradient(#e9e0c8,#d3c8aa);border-radius:8px;padding:12px;
  box-shadow:inset 0 1px 0 #fff9,inset 0 -3px 0 #a89d7e,0 8px 20px #0008}
.drive{margin-bottom:12px}
.drv-face{position:relative;height:58px;background:linear-gradient(#2c2a27,#1b1a18);border-radius:4px;display:flex;align-items:center;
  padding:0 12px;gap:10px;border:2px solid #0e0d0c;transition:.2s}
.drive.drag .drv-face{border-color:var(--glow);box-shadow:0 0 14px var(--glow)}
.drvlabel{color:#cfc6ad;font-weight:700;font-size:14px}
.slot{flex:1;height:10px;background:#000;border-radius:2px;box-shadow:inset 0 2px 3px #000,0 1px 0 #444;position:relative;overflow:hidden}
.disk-in{position:absolute;inset:2px 10%;background:#222;opacity:0;transition:.3s}
.drive.loaded .disk-in{opacity:1;background:linear-gradient(90deg,#333,#555,#333)}
.latch{width:60px;height:22px;background:linear-gradient(#8d8a82,#5c5a54);border-radius:3px;transition:.3s;transform-origin:left center}
.drive.loaded .latch{transform:rotate(90deg) translate(-4px,-14px);width:30px}
.led{width:12px;height:6px;border-radius:2px;background:#3a1010;box-shadow:inset 0 1px 1px #000}
.led.on{background:#ff3b30;box-shadow:0 0 8px #ff3b30}
.led.small{width:10px;height:10px;border-radius:50%;display:inline-block}
.led.green.on{background:#38ff6a;box-shadow:0 0 8px #38ff6a}
.drv-info{display:flex;justify-content:space-between;font-size:11px;margin:5px 2px;gap:8px}
.dname{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dgeom{opacity:.7;font-size:11px}
.drv-btns{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:11px}
.btn{font-family:inherit;font-size:12px;padding:5px 10px;background:linear-gradient(#f3ecda,#d3c8aa);border:1px solid #8a7f62;
  border-radius:3px;box-shadow:0 2px 0 #6f6650;cursor:pointer;color:var(--ink);display:inline-block}
.btn:active{transform:translateY(2px);box-shadow:none}
.btn.wide{width:100%}
.btn.active{background:linear-gradient(#c8f0c8,#9fd19f)}
.wp{display:flex;gap:4px;align-items:center}
.plabel{font-weight:700;font-size:11px;letter-spacing:2px;border-bottom:1px solid #a89d7e;padding-bottom:5px;margin-bottom:8px;
  text-shadow:0 1px 0 #fff8}
.plabel small{letter-spacing:0;font-weight:300}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0;font-size:12px}
.row label{display:flex;gap:6px;align-items:center}
select{font-family:inherit;font-size:12px;background:#f5efdf;border:1px solid #8a7f62;padding:3px}
.dips{display:flex;gap:4px;background:#b0241c;padding:8px;border-radius:3px;justify-content:center}
.dip{width:24px;height:46px;background:#fff;border-radius:2px;position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-size:9px}
.dip::after{content:"";position:absolute;left:4px;right:4px;height:16px;background:#333;border-radius:2px;top:24px;transition:.15s}
.dip.on::after{top:6px}
.dip span{position:absolute;bottom:-1px;font-weight:700;color:#b0241c}
.dipread{font-size:11px;margin-top:6px;line-height:1.5}

details#nerd{max-width:1400px;margin:0 auto 20px;padding:0 22px}
#nerd summary{cursor:pointer;color:var(--glow);font-family:VT323;font-size:22px;letter-spacing:2px;padding:8px 0}
.nerd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.card{background:#0c0f0c;border:1px solid #2a3a2a;border-radius:4px;padding:10px;color:#9fdfa8}
.card h3{margin:0 0 6px;font-size:12px;color:var(--glow);letter-spacing:1px;display:flex;gap:8px;align-items:center}
.card pre{margin:0;font-size:11px;line-height:1.45;white-space:pre;overflow:auto}
#memAddr{background:#000;color:var(--glow);border:1px solid #2a3a2a;font-family:inherit;font-size:11px;width:110px}
footer{text-align:center;padding:20px;color:#b5aa8c;font-size:12px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
footer a{color:var(--glow)}