:root{
  --bg:#0a0a0f;
  --panel:#15151d;
  --edge:#2a2a38;
  --ink:#e8e8f0;
  --dim:#8a8aa0;
  --zx-red:#d80000;
  --zx-yellow:#d8d800;
  --zx-green:#00d800;
  --zx-cyan:#00d8d8;
  --accent:#00d8d8;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:
    radial-gradient(circle at 30% 0%, #1a1a2e 0%, transparent 55%),
    radial-gradient(circle at 80% 100%, #16213e 0%, transparent 50%),
    var(--bg);
  color:var(--ink);
  font-family:'JetBrains Mono',monospace;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:1rem;
}
#wrap{width:100%;max-width:760px;}
header{text-align:center;margin-bottom:1rem;}
.rainbow{
  height:6px;width:180px;margin:0 auto .8rem;
  border-radius:3px;
  background:linear-gradient(90deg,var(--zx-red) 0 25%,var(--zx-yellow) 25% 50%,var(--zx-green) 50% 75%,var(--zx-cyan) 75% 100%);
  box-shadow:0 0 14px rgba(0,216,216,.4);
}
h1{
  font-family:'VT323',monospace;
  font-size:3rem;font-weight:400;letter-spacing:2px;line-height:1;
  text-shadow:0 0 18px rgba(0,216,216,.5);
}
.k48{color:var(--zx-yellow);}
.sub{color:var(--dim);font-size:.8rem;margin-top:.3rem;}

.bezel{
  background:linear-gradient(145deg,#3a3a3a,#1c1c1c);
  padding:22px;border-radius:20px;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.08), 0 12px 40px rgba(0,0,0,.7);
  border:1px solid #000;
}
.screen-holder{
  position:relative;border-radius:8px;overflow:hidden;
  background:#000;line-height:0;
  outline:2px solid rgba(0,0,0,.6);
}
.screen-holder.drag{outline:3px dashed var(--zx-cyan);}
#canvas{
  width:100%;height:auto;display:block;
  image-rendering:pixelated;image-rendering:crisp-edges;
  filter:saturate(1.05) contrast(1.05);
}
.scanlines{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;
  box-shadow:inset 0 0 90px rgba(0,0,0,.55);
}

#controls{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;
  margin:1rem 0 .6rem;
}
.btn{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--edge);border-radius:8px;
  padding:.55rem .8rem;cursor:pointer;
  transition:transform .08s, background .15s, box-shadow .15s;
}
.btn:hover{background:#20202c;box-shadow:0 0 12px rgba(0,216,216,.25);}
.btn:active{transform:translateY(2px);}
.file-btn{border-color:var(--zx-green);color:#bfffbf;}
.file-btn.z80{border-color:var(--zx-cyan);color:#bff5ff;}
.btn.beep{border-color:var(--zx-red);color:#ffbdbd;font-family:'VT323';font-size:1.1rem;letter-spacing:1px;}
.btn.snow{
  border-color:var(--zx-cyan);color:#dff8ff;
  background:linear-gradient(115deg,var(--panel) 40%,rgba(0,216,216,.12) 50%,var(--panel) 60%);
  background-size:200% 100%;
  animation:snowdrift 3s linear infinite;
}
@keyframes snowdrift{from{background-position:200% 0;}to{background-position:-200% 0;}}
.speed{
  display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--dim);
}
.speed select{
  background:var(--panel);color:var(--ink);border:1px solid var(--edge);
  border-radius:6px;padding:.4rem;font-family:inherit;
}

.status{
  font-size:.72rem;color:var(--accent);
  background:#0d0d14;border:1px solid var(--edge);border-radius:8px;
  padding:.5rem .7rem;text-align:center;
  word-break:break-word;
}

#keyboard{
  margin-top:1rem;
  background:linear-gradient(145deg,#2a2a34,#181820);
  border-radius:14px;padding:12px;
  border:1px solid #000;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.05);
}
.kbrow{display:flex;gap:5px;margin-bottom:5px;justify-content:center;}
.kbrow:last-child{margin-bottom:0;}
.key{
  flex:1;min-width:0;
  background:linear-gradient(180deg,#4a5a66,#2f3b44);
  color:#e8f0f4;
  border-radius:6px;
  padding:.6rem .2rem;
  text-align:center;font-size:.7rem;font-weight:700;
  cursor:pointer;user-select:none;
  box-shadow:0 3px 0 #16202a, 0 4px 6px rgba(0,0,0,.5);
  border-top:1px solid rgba(255,255,255,.15);
  transition:transform .05s, box-shadow .05s;
}
.key.wide{flex:1.6;color:var(--zx-cyan);font-size:.6rem;}
.key.down{transform:translateY(3px);box-shadow:0 0 0 #16202a;background:linear-gradient(180deg,#5a6a76,#3f4b54);}
.key:hover{color:#fff;}

footer{
  margin-top:1.5rem;text-align:center;font-size:.72rem;color:var(--dim);
  display:flex;flex-direction:column;gap:.4rem;
}
footer a{color:var(--zx-cyan);text-decoration:none;border-bottom:1px dotted var(--zx-cyan);}
footer a:hover{color:#fff;}

@media(max-width:540px){
  h1{font-size:2.2rem;}
  .bezel{padding:12px;}
  .key{padding:.5rem .1rem;font-size:.6rem;}
  .btn{font-size:.7rem;padding:.5rem .6rem;}
}
</parameter>
</invoke>