:root{
  --body:#0a0a0a;
  --bezel:#1a1a1c;
  --bezel2:#2a2a2e;
  --phosphor:#e8f4e8;
  --accent:#e23b3b;
  --panel:#141416;
  --dim:#5a6a5a;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  background:
    radial-gradient(ellipse at 50% -10%, #1b1512 0%, transparent 55%),
    repeating-linear-gradient(45deg, #0c0c0c 0 6px, #0a0a0a 6px 12px);
  color:var(--phosphor);
  font-family:'JetBrains Mono',monospace;
  display:flex; flex-direction:column; align-items:center;
  padding:14px 10px 30px; min-height:100%;
  -webkit-user-select:none; user-select:none;
}
#machine{width:100%;max-width:560px;display:flex;flex-direction:column;gap:12px;}

#titlebar{
  text-align:center;
  border:2px solid var(--accent);
  background:linear-gradient(180deg,#151517,#101012);
  border-radius:12px;padding:10px 8px;
  box-shadow:0 0 0 3px #000 inset, 0 8px 24px rgba(0,0,0,.6);
}
#titlebar h1{
  font-family:'VT323',monospace;
  font-size:2.4rem;font-weight:400;letter-spacing:1px;
  line-height:1;color:var(--phosphor);
  text-shadow:0 0 8px rgba(232,244,232,.35);
}
#titlebar h1 .em{color:var(--accent);}
#titlebar .sub{font-size:.68rem;color:var(--dim);letter-spacing:2px;margin-top:4px;text-transform:uppercase;}

/* --- Machine bezel + screen --- */
#bezel{
  background:linear-gradient(160deg,#28282c,#141416 70%);
  border-radius:18px;padding:22px;
  box-shadow:0 10px 30px rgba(0,0,0,.7), inset 0 2px 3px rgba(255,255,255,.06), inset 0 -3px 8px rgba(0,0,0,.6);
  border:1px solid #000;
  transition:box-shadow .15s;
}
#bezel.drag{box-shadow:0 0 0 3px var(--accent), 0 10px 30px rgba(0,0,0,.7);}
#screenwrap{
  position:relative;
  aspect-ratio:4/3;width:100%;
  border-radius:10px;overflow:hidden;
  background:#050805;
  box-shadow:inset 0 0 30px rgba(0,0,0,.9), inset 0 0 0 6px #060906;
}
#screenwrap.glow{box-shadow:inset 0 0 40px rgba(30,60,30,.35), inset 0 0 0 6px #060906, 0 0 22px rgba(120,200,120,.15);}
#canvas{
  display:block;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
  filter:saturate(1.1);
}
#scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
#vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* --- Controls --- */
#controls{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.ctl{
  font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;
  color:var(--phosphor);background:linear-gradient(180deg,#232326,#161618);
  border:1px solid #000;border-top:1px solid #3a3a3e;
  border-radius:7px;padding:8px 10px;cursor:pointer;
  box-shadow:0 2px 0 #000;transition:transform .05s, background .15s, color .15s;
}
.ctl:active{transform:translateY(2px);box-shadow:none;}
.ctl.active{color:var(--accent);border-color:var(--accent);text-shadow:0 0 6px rgba(226,59,59,.5);}
.filebtn{display:inline-flex;align-items:center;}

/* --- Status LED strip --- */
#status{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  font-size:.66rem;color:#6cff8a;
  background:#050705;border:1px solid #000;border-radius:6px;
  padding:6px 10px;letter-spacing:1px;
  box-shadow:inset 0 0 10px rgba(0,40,0,.6);
}
#status span{text-shadow:0 0 5px rgba(108,255,138,.5);}
#stHalt{color:var(--accent);}
#stRom{color:#d0a060;}

/* --- Virtual keyboard --- */
#keyboard{display:flex;flex-direction:column;gap:5px;align-items:center;margin-top:2px;}
.vkrow{display:flex;gap:4px;width:100%;justify-content:center;}
.vk{
  flex:1 1 0;min-width:0;
  font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:700;
  color:#cfe0cf;background:linear-gradient(180deg,#262629,#141416);
  border:1px solid #000;border-top:1px solid #3a3a3e;border-radius:5px;
  padding:9px 0;cursor:pointer;text-align:center;
  box-shadow:0 2px 0 #000;transition:transform .04s;
}
.vk.wide{flex:1.5 1 0;font-size:.62rem;}
.vk.down{background:var(--accent);color:#fff;transform:translateY(2px);box-shadow:none;}

/* --- Footer --- */
#footer{
  margin-top:6px;text-align:center;font-size:.66rem;color:var(--dim);
  display:flex;flex-direction:column;gap:6px;
}
#footer code{color:#6cff8a;background:#0a120a;padding:1px 5px;border-radius:3px;}
#footer a{color:var(--accent);text-decoration:none;font-weight:700;border-bottom:1px dotted var(--accent);}
#footer a:hover{color:#fff;}

@media (max-width:420px){
  #titlebar h1{font-size:1.9rem;}
  .ctl{font-size:.64rem;padding:7px 8px;}
  .vk{font-size:.7rem;padding:8px 0;}
}
</parameter>