:root{
  --green:#00ff78;
  --green-dim:#0b3;
  --amber:#ffb000;
  --bg:#050a07;
  --panel:#0c140f;
  --panel2:#111c15;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:
    radial-gradient(ellipse at 50% 0%, #0d1b12 0%, #050a07 55%, #020403 100%);
  color:var(--green);
  font-family:'IBM Plex Mono', monospace;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}

/* CRT scanline overlay across whole page */
#scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply;
}
#scanlines::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.5) 100%);
}

#app{
  height:100%;
  max-width:760px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  padding:8px;
  gap:8px;
}

/* Header */
#topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px;
  background:linear-gradient(180deg,#12201700,#0c140f);
  border:1px solid rgba(0,255,120,0.25);
  border-radius:6px;
}
#topbar .title{
  font-family:'VT323', monospace;
  font-size:clamp(18px,4.5vw,30px);
  letter-spacing:1px;
  color:var(--green);
  text-shadow:0 0 8px rgba(0,255,120,0.7), 0 0 18px rgba(0,255,120,0.35);
}
.status{ display:flex; align-items:center; gap:12px; font-size:12px; }
#carrier{ color:var(--amber); text-shadow:0 0 6px rgba(255,176,0,0.6); font-family:'VT323',monospace; font-size:18px; }
.led-wrap{ display:flex; align-items:center; gap:6px; font-family:'VT323',monospace; font-size:16px; }
.led{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.led.off{ background:#3a1010; box-shadow:0 0 4px #500; }
.led.on{ background:#ff2a2a; box-shadow:0 0 10px #ff2a2a,0 0 20px #ff0000; animation:blink 1s steps(2,end) infinite; }
@keyframes blink{ 50%{ opacity:0.25; } }

/* CRT screen */
#crt{
  position:relative; flex:1; min-height:0;
  border:6px solid #0a120d;
  border-radius:14px;
  background:#020604;
  box-shadow:
    inset 0 0 60px rgba(0,255,120,0.08),
    0 0 30px rgba(0,0,0,0.8),
    0 0 0 2px rgba(0,255,120,0.12);
  overflow:hidden;
}
#canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.perm{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:20px;
  background:rgba(2,6,4,0.9);
  font-family:'VT323',monospace; font-size:26px;
  color:var(--amber); text-shadow:0 0 8px rgba(255,176,0,0.6);
}
.perm small{ font-size:14px; color:var(--green-dim); font-family:'IBM Plex Mono',monospace; margin-top:8px; }
.hidden{ display:none !important; }

#warmup{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(ellipse at center, #eafff2 0%, #00ff78 30%, #020604 75%);
}
#warmup.play{ animation:warm 0.7s ease-out forwards; }
@keyframes warm{
  0%{ opacity:0; transform:scaleY(0.02); }
  20%{ opacity:1; transform:scaleY(0.02); }
  40%{ transform:scaleY(1); }
  100%{ opacity:0; transform:scaleY(1); }
}

/* Controls */
#controls{ display:flex; flex-direction:column; gap:8px; }

.txbtn{
  width:100%;
  font-family:'VT323',monospace;
  font-size:26px; letter-spacing:2px;
  padding:12px;
  color:#031007;
  background:linear-gradient(180deg,#3dffa0,#00d466);
  border:none; border-radius:8px;
  box-shadow:0 4px 0 #007a3a, 0 0 22px rgba(0,255,120,0.4);
  cursor:pointer;
  transition:transform .08s, box-shadow .08s;
}
.txbtn:active{ transform:translateY(3px); box-shadow:0 1px 0 #007a3a, 0 0 12px rgba(0,255,120,0.4); }
.txbtn.live{
  color:#1a0000;
  background:linear-gradient(180deg,#ff6b6b,#e01010);
  box-shadow:0 4px 0 #8a0000, 0 0 24px rgba(255,40,40,0.5);
}

.knobrow{ display:flex; gap:8px; }
.ctl{ flex:1; display:flex; flex-direction:column; gap:4px;
  background:var(--panel); border:1px solid rgba(0,255,120,0.2);
  border-radius:6px; padding:8px; font-size:11px; }
.ctl span{ font-family:'VT323',monospace; font-size:15px; color:var(--green); letter-spacing:.5px; }
.ctl b{ color:var(--amber); }
.ctl input[type=range]{ -webkit-appearance:none; width:100%; height:6px; background:#0a1a10; border-radius:4px; outline:none; }
.ctl input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:20px; border-radius:3px;
  background:linear-gradient(180deg,#3dffa0,#00a050); border:1px solid #0a3;
  box-shadow:0 0 8px rgba(0,255,120,0.6); cursor:pointer;
}
.ctl input[type=range]::-moz-range-thumb{
  width:16px; height:20px; border-radius:3px; border:1px solid #0a3;
  background:linear-gradient(180deg,#3dffa0,#00a050); box-shadow:0 0 8px rgba(0,255,120,0.6); cursor:pointer;
}

.toggles{ display:flex; gap:8px; align-items:stretch; flex-wrap:wrap; }
.seg{ display:flex; flex:1; min-width:200px; border:1px solid rgba(0,255,120,0.25); border-radius:6px; overflow:hidden; }
.seg button{
  flex:1; background:var(--panel); color:var(--green-dim);
  border:none; border-right:1px solid rgba(0,255,120,0.15);
  padding:8px 4px; font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer;
}
.seg button:last-child{ border-right:none; }
.seg button.active{ background:var(--green); color:#031007; text-shadow:none; font-weight:600; }

.tgl{
  background:var(--panel); color:var(--green);
  border:1px solid rgba(0,255,120,0.25); border-radius:6px;
  padding:8px 12px; font-family:'IBM Plex Mono',monospace; font-size:12px; cursor:pointer;
}
.tgl.off{ color:#a55; border-color:rgba(255,80,80,0.3); }
.tgl.on{ background:var(--amber); color:#201200; border-color:var(--amber); }

/* Footer */
#footer{
  display:flex; justify-content:space-between; align-items:center;
  font-size:10px; color:var(--green-dim); padding:0 4px;
  font-family:'IBM Plex Mono',monospace;
}
#footer a{ color:var(--amber); text-decoration:none; }
#footer a:hover{ text-decoration:underline; text-shadow:0 0 6px rgba(255,176,0,0.6); }

@media (max-width:520px){
  .knobrow{ flex-direction:column; }
  .seg{ min-width:0; }
}
</parameter>
</invoke>