:root{--navy:#0f1b3d;--outline:#1a1240;--ink:#eaf6ff;--muted:#8fb3d9;--cyan:#6cf5ff;--amber:#ffd166;--pink:#ff5d8f;--amp:0;--mic:0;--lx:0;--ly:0;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%}body{background:var(--navy);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:IBM Plex Sans,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}.crt{background:radial-gradient(120% 90% at 50% 38%, #16265180 0%, transparent 70%), var(--navy);grid-template-rows:auto 1fr auto;height:100%;padding:0 24px;display:grid;position:relative}.crt:after{content:"";pointer-events:none;z-index:5;mix-blend-mode:multiply;background:repeating-linear-gradient(0deg,#00000042 0 2px,#0000 2px 4px);position:fixed;inset:0}.bar{align-items:baseline;gap:14px;padding-block:22px 0;display:flex}.mark{letter-spacing:.06em;color:var(--amber);margin:0;font-family:Silkscreen,IBM Plex Mono,monospace;font-size:17px}.mark span{color:var(--cyan)}.tag{letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0;font-family:IBM Plex Mono,monospace;font-size:11px}.stage{align-content:center;place-items:center;gap:22px;min-height:0;display:grid}.screen{aspect-ratio:1;background:linear-gradient(#6cf5ff0d,#6cf5ff03);border:1px solid #6cf5ff38;border-radius:4px;place-items:center;width:min(44vh,330px);max-width:100%;display:grid;position:relative}.screen i{border:1px solid var(--cyan);opacity:.5;width:11px;height:11px;position:absolute}.screen i:first-child{border-bottom:0;border-right:0;top:-1px;left:-1px}.screen i:nth-child(2){border-bottom:0;border-left:0;top:-1px;right:-1px}.screen i:nth-child(3){border-top:0;border-right:0;bottom:-1px;left:-1px}.screen i:nth-child(4){border-top:0;border-left:0;bottom:-1px;right:-1px}.ring{aspect-ratio:1;border:1px solid var(--cyan);opacity:0;pointer-events:none;border-radius:50%;width:74%;position:absolute;transform:scale(.82)}body[data-state=listening] .ring,body[data-state=thinking] .ring{opacity:calc(.16 + var(--mic) * .7);transform:scale(calc(.86 + var(--mic) * .22));transition:transform 80ms linear,opacity 80ms linear}#bit{filter:drop-shadow(0 0 20px #6cf5ff47);width:78%;height:78%;display:block;overflow:visible}.caption{text-align:center;max-width:36ch;color:var(--muted);text-wrap:balance;margin:0;font-size:15px;line-height:1.5}.deck{flex-direction:column;align-items:center;gap:14px;padding-block:0 36px;display:flex}.talk{appearance:none;letter-spacing:.05em;border:1px solid var(--cyan);color:var(--cyan);cursor:pointer;background:#6cf5ff14;border-radius:3px;align-items:center;gap:12px;padding:14px 26px;font-family:Silkscreen,IBM Plex Mono,monospace;font-size:13px;transition:background .18s,color .18s;display:inline-flex}.talk:hover{background:#6cf5ff29}.talk[aria-pressed=true]{background:var(--cyan);color:var(--navy)}.talk:focus-visible{outline:2px solid var(--amber);outline-offset:3px}.talk .led{opacity:.45;background:currentColor;border-radius:50%;width:8px;height:8px}body[data-state=listening] .talk .led,body[data-state=speaking] .talk .led{opacity:1}.readout{letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums;flex-wrap:wrap;justify-content:center;font-family:IBM Plex Mono,monospace;font-size:11px;display:flex}.readout div{border-left:1px solid #8fb3d938;padding:0 14px}.readout div:first-child{border-left:0}.readout b{color:var(--cyan);text-transform:uppercase;font-weight:500}.readout[data-err="1"] b{color:var(--pink)}.keys{letter-spacing:.06em;color:var(--muted);opacity:.75;margin:0;font-family:IBM Plex Mono,monospace;font-size:11px}.cue-tap{display:none}.cue-key b,.cue-tap b{color:var(--ink);font-weight:500}@media (hover:none) and (pointer:coarse){.cue-key{display:none}.cue-tap{display:inline}.keys{display:none}}kbd{color:var(--ink);border:1px solid #8fb3d966;border-radius:3px;padding:1px 5px;font-family:IBM Plex Mono,monospace;font-size:.92em}@media (width<=560px){.crt{padding:0 16px}.screen{width:min(36vh,250px)}.caption{font-size:14px}.readout div{padding:0 9px}}.px-body{animation:1.4s steps(2,end) infinite pxbob}.px-ears{animation:6s step-end infinite pxtwitch}.px-eyes{transform-box:fill-box;transform-origin:50%;animation:5.2s step-end infinite pxblink}.px-screen{animation:3s step-end infinite pxflick}.mf{display:none}#bit[data-frame="0"] .mf[data-f="0"],#bit[data-frame="1"] .mf[data-f="1"],#bit[data-frame="2"] .mf[data-f="2"]{display:block}@keyframes pxbob{0%,to{transform:translateY(0)}50%{transform:translateY(-1px)}}@keyframes pxtwitch{0%,88%,to{transform:translateY(0)}90%{transform:translateY(-1px)}93%{transform:translateY(0)}95%{transform:translateY(-1px)}}@keyframes pxblink{0%,94%,to{transform:scaleY(1)}95%{transform:scaleY(.34)}}@keyframes pxflick{0%,96%,to{opacity:1}97%{opacity:.85}}body[data-state=speaking] .px-body{transform:translateY(calc(var(--amp) * -.7px))}.scan{opacity:0}body[data-state=thinking] .scan{opacity:.5;animation:1s linear infinite sweep}@keyframes sweep{0%{transform:translateY(0)}to{transform:translateY(8px)}}body[data-state=thinking] .px-eyes{animation:none;transform:scaleY(.4)}@media (prefers-reduced-motion:reduce){.px-body,.px-ears,.px-eyes,.px-screen,.scan{animation:none}.ring{transition:none}}