:root{--bg:#0b0b10;--cy:#22f3ff;--mg:#ff2bd6;--dim:#2a2a38}
body{background:radial-gradient(ellipse at top,#1a1030 0%,var(--bg) 60%);background-color:var(--bg);color:#e6e6f0;font-family:'IBM Plex Mono',monospace;min-height:100vh}
.vt{font-family:'VT323',monospace}
.rec{animation:blink 1s steps(2) infinite;color:#ff3355}
@keyframes blink{50%{opacity:0}}
.screen{position:relative;border:1px solid var(--dim);border-radius:14px;overflow:hidden;background:#000}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
.screen canvas{width:100%;height:auto;display:block}
.pill{border:1px solid var(--dim);border-radius:999px;padding:2px 0;font-size:13px;transition:.15s}
.pill:hover{border-color:var(--cy)}
.pill.cap{border-style:dashed;color:#888}
.pill.on{background:var(--cy);color:#000;border-color:var(--cy);box-shadow:0 0 14px var(--cy)}
.pill.on.mg{background:var(--mg);border-color:var(--mg);box-shadow:0 0 14px var(--mg)}
.card{background:rgba(20,20,30,.7);border:1px solid var(--dim);border-radius:16px}
input[type=range]{accent-color:var(--cy);width:100%}
.fade{animation:fade .6s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}