:root{
  --bg:#07070c;
  --panel:#12121c;
  --amber:#ffb000;
  --green:#39ff77;
  --cyan:#3df0ff;
  --edge:#2a2a3a;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:
  radial-gradient(circle at 30% 0%, #171728 0%, #07070c 60%);
  color:#d7d7e0;font-family:'IBM Plex Mono',monospace;min-height:100%;}

#wrap{max-width:760px;margin:0 auto;padding:16px;}

/* Header */
#hdr{text-align:center;margin-bottom:14px;position:relative;}
.rainbow-bar{height:6px;border-radius:3px;margin-bottom:12px;
  background:linear-gradient(90deg,#e2003c 0 20%,#e2b100 20% 40%,#0aa300 40% 60%,#00b7c2 60% 80%,#4d4dff 80% 100%);
  box-shadow:0 0 14px rgba(0,183,194,.4);}
#hdr h1{font-family:'VT323',monospace;font-size:64px;line-height:.9;margin:0;
  color:var(--green);text-shadow:0 0 12px rgba(57,255,119,.6),0 0 2px #fff;}
.sub{font-size:13px;letter-spacing:2px;color:var(--cyan);margin:4px 0 0;opacity:.8;text-transform:uppercase;}

/* Bezel + screen */
#bezel{position:relative;background:linear-gradient(160deg,#20202a,#0d0d13);
  border:2px solid #33333f;border-radius:14px;padding:16px;
  box-shadow:0 0 0 3px #05050a,0 16px 40px rgba(0,0,0,.7);overflow:hidden;}
.bezel-corner{position:absolute;right:14px;bottom:14px;width:60px;height:8px;border-radius:4px;
  background:linear-gradient(90deg,#e2003c,#e2b100,#0aa300,#00b7c2);opacity:.85;}
#screen{display:block;width:100%;height:auto;image-rendering:pixelated;
  border-radius:6px;background:#000;box-shadow:0 0 24px rgba(61,240,255,.15) inset;}

#crt-overlay{position:absolute;inset:16px;border-radius:6px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;}

#tape-loader{position:absolute;inset:16px;background:rgba(4,4,10,.9);border-radius:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.tape-text{font-family:'VT323',monospace;font-size:30px;color:var(--amber);
  text-shadow:0 0 8px rgba(255,176,0,.6);}
.tape-bar{width:70%;height:16px;background:#000;border:2px solid var(--amber);border-radius:3px;overflow:hidden;}
#tape-fill{height:100%;width:0;transition:width .05s linear;
  background:repeating-linear-gradient(90deg,#e2003c 0 8px,#e2b100 8px 16px,#0aa300 16px 24px,#00b7c2 24px 32px);}

#crash{position:absolute;top:24px;left:50%;transform:translateX(-50%);
  background:#3a0010;border:1px solid #e2003c;color:#ffd;padding:8px 14px;border-radius:6px;
  font-size:14px;box-shadow:0 0 20px rgba(226,0,60,.5);}
#crash button{margin-left:8px;background:var(--amber);border:0;padding:4px 10px;border-radius:4px;
  font-weight:600;cursor:pointer;}

.hidden{display:none!important;}

/* Controls */
#controls{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0;justify-content:center;}
.btn{background:var(--panel);color:var(--cyan);border:1px solid var(--edge);
  padding:9px 14px;border-radius:8px;font-family:'IBM Plex Mono',monospace;font-size:14px;
  cursor:pointer;transition:transform .06s,background .15s,box-shadow .15s;}
.btn:hover{background:#1c1c2c;box-shadow:0 0 12px rgba(61,240,255,.25);}
.btn:active{transform:translateY(2px);}
.load-btn{color:var(--green);border-color:#2e5a3e;}
select.btn{appearance:none;}

/* Status */
#status{font-size:12px;color:var(--amber);background:#000;border:1px solid var(--edge);
  border-radius:6px;padding:8px 12px;text-align:center;letter-spacing:.5px;
  box-shadow:0 0 10px rgba(255,176,0,.1) inset;}

#dbg{margin:12px 0;background:var(--panel);border:1px solid var(--edge);border-radius:8px;padding:6px 12px;}
#dbg summary{cursor:pointer;color:var(--cyan);font-size:13px;}
#regs{font-size:12px;color:var(--green);margin:8px 0 4px;white-space:pre;overflow-x:auto;}

/* On-screen keyboard */
#kbd{margin:18px 0;display:flex;flex-direction:column;gap:6px;user-select:none;}
.kbd-row{display:flex;gap:5px;justify-content:center;}
.key{flex:1;min-width:0;background:#1a1a24;color:#cfcfe0;border:1px solid #33333f;
  border-radius:6px;padding:10px 0;font-size:13px;font-family:'IBM Plex Mono',monospace;
  cursor:pointer;transition:transform .05s,background .1s;box-shadow:0 3px 0 #05050a;}
.key.key-wide{flex:3;}
.key:hover{background:#252533;}
.key.down,.key:active{transform:translateY(3px);box-shadow:0 0 0 #05050a;background:var(--cyan);color:#000;}

.hint{font-size:12px;color:#7a7a90;text-align:center;line-height:1.5;}
.hint code{background:#000;color:var(--amber);padding:1px 5px;border-radius:3px;}

footer{text-align:center;font-size:12px;color:#6a6a80;margin:20px 0 8px;}
footer a{color:var(--cyan);text-decoration:none;border-bottom:1px dotted var(--cyan);}

@media (max-width:560px){
  #hdr h1{font-size:44px;}
  .btn{padding:8px 10px;font-size:13px;}
  .key{padding:12px 0;font-size:12px;}
}