:root{--bg:#0b0d10;--surface:#14181d;--border:#252b33;--text:#e8ebef;--muted:#8f99a6;--accent:#5ee08a;--accent-ink:#062a12;--danger:#ff6b6b;--warn:#f5c451;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0;font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}[hidden]{display:none!important}button{font:inherit;cursor:pointer}.topbar{border-bottom:1px solid var(--border);align-items:baseline;gap:16px;padding:18px clamp(16px,4vw,48px);display:flex}.wordmark{letter-spacing:-.02em;font-size:20px;font-weight:800}.wordmark span{color:var(--accent)}.tagline{color:var(--muted);font-size:14px}.library{max-width:1200px;margin:0 auto;padding:clamp(16px,4vw,48px)}.hero{border:1px solid var(--border);background:var(--surface);border-radius:16px;align-items:flex-end;min-height:460px;display:flex;position:relative;overflow:hidden}.hero-art{image-rendering:pixelated;background:url(/doom-title.png) 50%/cover no-repeat;position:absolute;inset:0}.hero-art:after{content:"";background:linear-gradient(90deg,#0b0d10f5 0%,#0b0d10cc 40%,#0b0d101a 100%),linear-gradient(#0000 50%,#0b0d10e6 100%);position:absolute;inset:0}.hero-body{max-width:560px;padding:clamp(24px,4vw,48px);position:relative}.eyebrow{color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px;font-size:13px;font-weight:700}h1{letter-spacing:-.03em;margin:0;font-size:clamp(48px,8vw,84px);line-height:1}.meta{color:var(--muted);margin:8px 0 16px}.blurb{color:#c9d0d8;margin:0 0 24px}.actions{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.play{background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;align-items:center;gap:8px;padding:14px 32px;font-size:18px;font-weight:800;transition:transform .1s,filter .15s;display:inline-flex}.play:hover{filter:brightness(1.08)}.play:active{transform:scale(.97)}.play svg{fill:currentColor;width:22px;height:22px}.status{color:var(--muted);align-items:center;gap:8px;font-size:14px;display:inline-flex}.status:before{content:"";background:var(--muted);border-radius:50%;width:8px;height:8px}.status[data-state=online]:before{background:var(--accent);box-shadow:0 0 8px var(--accent)}.status[data-state=busy]:before{background:var(--warn)}.status[data-state=offline]:before{background:var(--danger)}.note{color:var(--muted);margin:20px 0 0;font-size:13px}.details{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;margin-top:40px;display:grid}h2{margin:0 0 12px;font-size:18px}.controls{grid-template-columns:max-content 1fr;gap:8px 20px;margin:0;display:grid}.controls dt{color:var(--text);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:14px}.controls dd{color:var(--muted);margin:0}.steps{color:var(--muted);margin:0;padding-left:20px}.steps li+li{margin-top:6px}.stage{z-index:10;background:#000;place-items:center;display:grid;position:fixed;inset:0}.stage.idle{cursor:none}#video{aspect-ratio:4/3;object-fit:fill;width:min(100vw,133.333vh);image-rendering:pixelated;opacity:0;outline:none;transition:opacity .4s}#video.live{opacity:1}.hud{opacity:0;pointer-events:none;background:linear-gradient(#000000bf,#0000);align-items:center;gap:12px;padding:12px 16px;transition:opacity .2s,transform .2s;display:flex;position:absolute;top:0;left:0;right:0;transform:translateY(-8px)}.hud.visible{opacity:1;pointer-events:auto;transform:none}.stats{min-width:110px;color:var(--accent);font:13px ui-monospace,SF Mono,Menlo,monospace}.hint{color:var(--muted);flex:1;font-size:13px}.hud-button{border:1px solid var(--border);color:var(--text);background:#14181de6;border-radius:999px;padding:8px 16px;font-size:14px}.hud-button:hover{border-color:var(--muted)}.hud-button.danger{color:var(--danger)}.overlay{background:radial-gradient(circle,#14181dd9,#000000f2);place-items:center;padding:16px;display:grid;position:absolute;inset:0}.panel{text-align:center;max-width:420px}.panel h2{font-size:24px}.panel p{color:var(--muted);margin:0}.spinner{border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:44px;height:44px;margin:0 auto 20px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.overlay-actions{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px;display:flex}@media (width<=640px){.tagline,.hint{display:none}.hero{min-height:0}.hero-art:after{background:linear-gradient(#0b0d1066 0%,#0b0d10f7 65%)}}