:root{
  --beige:#d9cfb8; --beige2:#cbbf a3; --beige-d:#b9ad91; --beige-l:#e9e1cd;
  --char:#2a2723; --char2:#3a362f; --blue:#1f70c1; --red:#d23a2a;
  --ph:#33ff66; --glow:drop-shadow(0 0 2px rgba(51,255,102,.55));
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans Condensed',sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--char);
  background:
    radial-gradient(ellipse at 30% 0%, #6b5f4b 0%, transparent 60%),
    repeating-linear-gradient(90deg, #3b332a 0 2px, #362f27 2px 5px),
    #362f27;
  min-height:100vh;
}
button{font-family:var(--sans);cursor:pointer}
.topcase{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 22px;background:linear-gradient(#e6ddc8,#cfc4aa);
  border-bottom:3px solid #a99d82;box-shadow:0 4px 0 #8a7f68,0 10px 30px rgba(0,0,0,.4);
}
.brand{display:flex;align-items:center;gap:16px}
.ibm-logo{
  font:900 44px/1 var(--sans);letter-spacing:2px;color:var(--blue);
  background:repeating-linear-gradient(180deg,var(--blue) 0 4px,transparent 4px 7px);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-weight:700;transform:scaleX(1.15)
}
.brand h1{margin:0;font-weight:300;font-size:26px;letter-spacing:.5px}
.brand p{margin:2px 0 0;font:12px var(--mono);color:#5d5546}
.power{display:flex;flex-direction:column;align-items:center;gap:4px;font:700 10px var(--mono);letter-spacing:2px}
.rocker{width:58px;height:40px;border-radius:6px;border:3px solid #8a7f68;background:#3a342b;padding:4px;box-shadow:inset 0 3px 6px rgba(0,0,0,.6)}
.rocker span{display:block;height:100%;border-radius:3px;background:linear-gradient(#ff6a55,#b0251a);transform:perspective(80px) rotateX(18deg);transition:transform .12s;box-shadow:0 4px 0 #7a160d}
.rocker[aria-pressed=true] span{transform:perspective(80px) rotateX(-18deg);box-shadow:0 -3px 0 #7a160d;background:linear-gradient(#b0251a,#ff6a55)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;padding:20px;max-width:1500px;margin:0 auto}
@media (max-width:1000px){.layout{grid-template-columns:1fr;padding:10px}}

.monitor{background:linear-gradient(#ddd3bc,#c6bb9f);border-radius:22px;padding:22px 22px 10px;box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 2px 0 #f1ead8;animation:rise .6s ease-out}
.bezel{background:#1d1b18;border-radius:18px;padding:22px;box-shadow:inset 0 0 0 3px #3a362f,inset 0 10px 30px #000}
.crt{position:relative;aspect-ratio:4/3;border-radius:26px/22px;overflow:hidden;background:#050806;box-shadow:inset 0 0 60px rgba(0,0,0,.9)}
.crt canvas{width:100%;height:100%;display:block;image-rendering:pixelated;filter:var(--glow);opacity:0;transition:opacity .8s}
.crt.on canvas{opacity:1;animation:warm 1s ease-out}
.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65) 100%),linear-gradient(160deg,rgba(255,255,255,.06),transparent 40%)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:#5f6b5f;font:14px var(--mono);pointer-events:none}
.crt.on .overlay{display:none}
@keyframes warm{0%{filter:brightness(3) blur(2px);transform:scaleY(.02)}40%{transform:scaleY(1)}100%{filter:var(--glow)}}
@keyframes rise{from{transform:translateY(20px);opacity:0}}

.chin{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 6px 4px;flex-wrap:wrap}
.badge{font:700 12px var(--mono);color:#6b624f;letter-spacing:2px}
.phos{display:flex;gap:4px}
.phos button,.tac{
  font:700 11px var(--sans);letter-spacing:.5px;text-transform:uppercase;padding:6px 10px;border-radius:4px;
  border:1px solid #9d9178;background:linear-gradient(#efe8d6,#cfc5ad);color:var(--char);
  box-shadow:0 2px 0 #8f846c,inset 0 1px 0 #fff8e6
}
.phos button:active,.tac:active{transform:translateY(2px);box-shadow:inset 0 2px 3px rgba(0,0,0,.25)}
.phos button.sel{background:var(--char2);color:var(--ph);box-shadow:inset 0 2px 4px #000}
.tac.red{color:#9b1d12}
.tac.on{background:var(--char2);color:#ffd36b}
.chin-r{display:flex;gap:6px;align-items:center}
.pled{width:10px;height:10px;border-radius:50%;background:#2d4a2d;box-shadow:inset 0 1px 2px #000}
.pled.on{background:#5cff6a;box-shadow:0 0 8px #5cff6a}

.sysunit{margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:14px;background:linear-gradient(#d8cdb4,#c2b69a);border-radius:10px;padding:14px;box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 2px 0 #efe7d3}
@media (max-width:640px){.sysunit{grid-template-columns:1fr}}
.drive{position:relative;background:#c8bc9f;border:2px solid #a1957a;border-radius:6px;padding:10px;transition:outline .1s}
.drive.drag{outline:3px dashed var(--blue);outline-offset:2px}
.drive-face{display:flex;gap:10px;align-items:center}
.slot{flex:1;position:relative;height:56px;background:#1f1c18;border-radius:4px;box-shadow:inset 0 4px 10px #000;overflow:hidden}
.slot:before{content:"";position:absolute;left:8%;right:8%;top:24px;height:6px;background:#000;border-radius:3px}
.latch{position:absolute;left:50%;top:6px;width:16px;height:44px;margin-left:-8px;background:linear-gradient(90deg,#8f846c,#d9cfb8,#8f846c);border-radius:3px;transition:transform .25s}
.drive.loaded .latch{transform:rotate(90deg)}
.disk-in{position:absolute;left:10%;right:10%;top:-60px;height:48px;background:#151515;border-radius:2px;transition:top .3s}
.drive.loaded .disk-in{top:4px}
.sticker{position:absolute;left:8px;right:40%;top:4px;background:#fdfbf2;color:#1c3aa8;font:italic 700 11px 'Comic Sans MS','Marker Felt',cursive;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(-2deg);border-top:3px solid #e04a3a}
.drive-meta{display:flex;flex-direction:column;align-items:center;gap:6px;font:700 11px var(--mono)}
.led{width:12px;height:6px;background:#4a1a14;border-radius:2px}
.led.on{background:#ff3b22;box-shadow:0 0 10px #ff3b22}
.drive-ctl{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.drive-ctl label{display:inline-block}
.drop-hint{font:11px var(--mono);color:#6b624f;margin-top:6px}
.wp.on{background:#2a2723;color:#ff9b6b}

.kbdbar{display:flex;gap:8px;margin-top:16px;align-items:center;flex-wrap:wrap}
.status{font:12px var(--mono);color:#e8dfc6;opacity:.85;flex:1;min-width:200px}
.kbd{margin-top:10px;background:linear-gradient(#d3c8ae,#b8ac90);padding:12px;border-radius:8px;overflow-x:auto;box-shadow:0 10px 26px rgba(0,0,0,.45)}
.kbd.hidden{display:none}
.krow{display:flex;gap:4px;margin-bottom:4px;min-width:760px}
.key{
  flex:0 0 auto;height:40px;border-radius:4px;border:1px solid #6d6553;user-select:none;touch-action:none;
  background:linear-gradient(#5b564c,#3b372f);color:#efe8d6;font:700 11px var(--sans);
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 #1f1c18;
}
.key.lite{background:linear-gradient(#efe8d6,#cbbf a3);background:linear-gradient(#efe8d6,#c9bea4);color:#2a2723}
.key.down,.key.latched{transform:translateY(3px);box-shadow:none;filter:brightness(1.2)}
.key.latched{outline:2px solid #ffd36b}
.kgap{flex:0 0 14px}

.inspector{background:#24211d;color:#d8cfb8;border-radius:10px;padding:12px;box-shadow:0 10px 30px rgba(0,0,0,.5);align-self:start;max-height:calc(100vh - 40px);overflow:auto;position:sticky;top:20px}
@media (max-width:1000px){.inspector{position:static;max-height:none}}
.inspector h2{margin:0 0 8px;font:700 13px var(--mono);letter-spacing:3px;color:#ffd36b;text-transform:uppercase}
details{background:#2e2a25;border:1px solid #403a32;border-radius:6px;margin-bottom:8px;padding:6px 8px}
summary{cursor:pointer;font:700 12px var(--sans);letter-spacing:1px;text-transform:uppercase;color:#a9c7ff}
.mono{font:11px/1.5 var(--mono)}
.regs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px 8px;margin:6px 0}
.regs b{color:#8c836f;font-weight:400}
.ledrow{display:flex;gap:3px;align-items:center;margin:2px 0}
.ledrow .lb{width:34px;color:#8c836f}
.bl{width:16px;height:16px;border-radius:3px;background:#3a2620;display:flex;align-items:center;justify-content:center;font-size:9px;color:#7a6a5a}
.bl.on{background:#ff4a2a;color:#fff;box-shadow:0 0 6px #ff4a2a}
.bl.g.on{background:#3ee06a;box-shadow:0 0 6px #3ee06a;color:#022}
.tbl{width:100%;border-collapse:collapse;margin-top:4px}
.tbl td,.tbl th{padding:1px 4px;text-align:left;border-bottom:1px solid #3a352d}
.tbl th{color:#8c836f;font-weight:400}
.tbl tr.hot td{color:#ffd36b}
.dbg{display:flex;gap:6px;margin:6px 0}
.speed{display:flex;align-items:center;gap:8px;font:12px var(--mono)}
.speed input{flex:1}
.dip{display:flex;gap:4px;background:#b8302a;padding:8px;border-radius:4px;margin-top:8px;width:max-content}
.sw{width:18px;height:40px;background:#f3efe3;border-radius:2px;position:relative;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;font:9px var(--mono);color:#333}
.sw i{position:absolute;left:3px;right:3px;height:16px;background:#2a2723;border-radius:2px;top:3px;transition:top .1s}
.sw.off i{top:3px}.sw:not(.off) i{top:21px}
.sw span{position:absolute;bottom:-14px;color:#fff;font-weight:700}
.dipinfo{margin-top:18px;color:#bdb39b}
.memsel{display:block;margin-top:6px;font:12px var(--mono)}
.memsel select,.memjump input{background:#1b1916;color:#ffd36b;border:1px solid #4a443a;font:12px var(--mono);padding:3px}
.hint{font:11px var(--mono);color:#8c836f;margin:6px 0 0}
.memjump{display:flex;gap:6px;margin:6px 0}
.memjump input{flex:1}
.memv{margin:0;white-space:pre;overflow-x:auto;color:#9fe0a8}
footer{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;padding:20px;font:12px var(--mono);color:#c9bfa6}
footer a{color:#ffd36b}