:root{--font-ui:"Inter", "Segoe UI", "Noto Sans", "DejaVu Sans", system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--brand:#ff2d8a;--brand-2:#ffa03a;--accent:#4772b3;--accent-hover:#5683c4;--on-accent:#fff;--ov-bg:#1414148c;--ov-panel:#161616eb;--ov-line:#ffffff1a;--ov-text:#e6e6e6;--ov-text-2:#c3c9d4;--ov-muted:#8e8e8e;--ov-shadow:0 10px 30px #00000073;--radius:4px;--radius-md:6px;--radius-lg:10px;--ease:cubic-bezier(.2, .7, .2, 1);font:12px/1.45 var(--font-mono);color:var(--ov-text);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;background:#0e1116}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}#viewport{background:#000;position:fixed;inset:0;overflow:hidden}#canvas{touch-action:none;width:100%;height:100%;display:block;position:relative}#attribution{color:#ffffffbf;text-shadow:0 0 3px #000c;pointer-events:none;font-size:11px;position:fixed;bottom:6px;right:8px}.prepare-overlay{pointer-events:none;z-index:5;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.prepare-overlay[hidden]{display:none}.prepare-box{background:var(--ov-panel);border:1px solid var(--ov-line);border-radius:var(--radius-lg);pointer-events:auto;width:min(280px,100% - 24px);font:12px var(--font-mono);color:var(--ov-text);flex-direction:column;align-items:center;gap:10px;padding:14px 18px;display:flex}.prepare-bar{background:#ffffff1f;border-radius:2px;width:100%;height:4px;overflow:hidden}.prepare-fill{background:var(--accent);width:0;height:100%;transition:width .25s}.prepare-skip{color:var(--ov-text-2);border-radius:var(--radius);cursor:pointer;font:inherit;background:0 0;border:1px solid #ffffff26;padding:3px 12px}.hud-canvas{pointer-events:none;z-index:3;width:100%;height:100%;position:absolute;inset:0}.vf-box{pointer-events:none;z-index:4;position:absolute}.vf-box.framed{box-shadow:0 0 0 100vmax rgba(0, 0, 0, var(--vf-shade,.7));outline:1px solid rgba(255, 255, 255, var(--vf-line,.28))}body.live .vf-box.framed{outline:0}.vf-box #attribution{white-space:nowrap;text-overflow:ellipsis;max-width:calc(100% - 16px);position:absolute;bottom:6px;right:8px;overflow:hidden}.vf-label{font:11px var(--font-mono);color:#e6e9efb3;white-space:nowrap;padding:0 0 4px;position:absolute;bottom:100%;left:0}.vf-label[hidden]{display:none}#attribution .attr-logo{vertical-align:-2px;height:12px;margin-right:6px}.prepare-skip:hover{color:var(--ov-text);border-color:#ffffff4d}body.idle,body.idle canvas{cursor:none}.player-start{z-index:15;--size:clamp(52px, 16vmin, 84px);width:var(--size);height:var(--size);margin:calc(var(--size) / -2) 0 0 calc(var(--size) / -2);padding:calc(var(--size) * .2);color:#fff;background:var(--ov-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;border:1px solid #ffffff40;border-radius:50%;position:absolute;top:50%;left:50%}.player-start:hover{background:color-mix(in srgb, var(--accent) 85%, transparent)}.player-start[hidden]{display:none}.player-start:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.player-poster{z-index:5;background:#0e1116 50%/cover no-repeat;transition:opacity .35s;position:absolute;inset:0}.player-poster.gone{opacity:0;pointer-events:none}.player-poster.loading:after{content:"";border:3px solid #ffffff40;border-top-color:#fff;border-radius:50%;width:34px;height:34px;margin:-17px 0 0 -17px;animation:.9s linear infinite player-spin;position:absolute;top:50%;left:50%}@keyframes player-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.player-poster.loading:after{animation-duration:3s}}