[hidden]{display:none!important}
/* Layout: one beige-black CRT on a dark desk, a USR-style LED strip and controls under it. Single dark world by design. */
:root{
  color-scheme: dark;
  --room:#0c0a09; --plastic:#1c1917; --plastic-hi:#2b2623; --edge:#3a332f;
  --ink:#c9bdb4; --dim:#7a6e67; --led-off:#2c1b18; --led-red:#ff4b3a; --led-grn:#59e36d;
  --focus:#ffcf5a;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--room);color:var(--ink);font:13px/1.4 var(--mono);margin:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding-inline:16px;padding-block:12px;overflow-x:hidden}
.rig{width:min(100%,1040px,calc((100vh - 140px) * 4 / 3),calc((100dvh - 140px) * 4 / 3));min-width:0;display:flex;flex-direction:column;gap:10px}
.crt{position:relative;width:100%;max-width:100%;aspect-ratio:4/3;background:#000;border-radius:18px;
  box-shadow:0 0 0 10px var(--plastic),0 0 0 11px var(--edge),0 18px 50px rgba(0,0,0,.7),inset 0 0 60px rgba(0,0,0,.9);overflow:hidden;cursor:text}
.crt canvas{position:absolute;inset:2.5% 2.5%;width:95%;height:95%;display:block}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%)}
.crt.noscan::after{background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.55) 100%)}
#kb{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;resize:none;color:transparent;background:transparent;caret-color:transparent}
.crt:focus-within{outline:2px solid transparent}
.panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;
  background:linear-gradient(var(--plastic-hi),var(--plastic));border:1px solid var(--edge);border-radius:8px;padding:8px 12px}
.leds{display:flex;gap:10px;flex-wrap:wrap}
.led{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;letter-spacing:.08em;color:var(--dim)}
.led i{width:9px;height:9px;border-radius:50%;background:var(--led-off);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.led.on i{background:var(--led-red);box-shadow:0 0 6px var(--led-red)}
.led.g.on i{background:var(--led-grn);box-shadow:0 0 6px var(--led-grn)}
.modem{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;min-width:0}
.modem select{font:inherit;font-size:12px;letter-spacing:.02em;text-transform:none;color:var(--ink);background:var(--room);border:1px solid var(--edge);border-radius:4px;padding:5px 6px;max-width:100%;min-width:0}
.modem select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ctl{display:flex;gap:6px;flex-wrap:wrap}
.ctl button{font:inherit;font-size:11px;letter-spacing:.06em;color:var(--ink);background:var(--room);border:1px solid var(--edge);border-radius:4px;padding:5px 9px;cursor:pointer}
.ctl button:hover{border-color:var(--dim)}
.ctl button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ctl button[aria-pressed="false"]{color:var(--dim)}
.fine{font-size:11px;color:var(--dim);text-align:center;max-width:80ch;text-wrap:balance}
.rotate{display:none}
@media (max-width:520px) and (orientation:portrait){.rotate{display:inline}}
.rig:fullscreen{width:100%;height:100%;justify-content:center;align-items:center;background:#000;padding:16px}
.rig:fullscreen .crt{width:min(100%,calc((100vh - 90px) * 4 / 3))}
.rig:fullscreen .panel{width:min(100%,calc((100vh - 90px) * 4 / 3))}
@media (max-width:520px){.modem span{display:none}.crt{border-radius:10px;box-shadow:0 0 0 5px var(--plastic),0 0 0 6px var(--edge)}}
@media (prefers-reduced-motion:reduce){.led.on i{box-shadow:none}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-48px;background:var(--plastic-hi);color:var(--ink);padding:8px 12px;border:1px solid var(--edge);border-radius:4px;z-index:5}
.skip:focus{top:12px}
.fine a{color:var(--ink)}
.crt canvas.doorscreen{z-index:1;background:#000;image-rendering:pixelated;cursor:default}