:root{--bg: #0b0d12;--bg-2: #12151c;--surface: #171b24;--surface-2: #1f2430;--border: #2a3040;--fg: #eef1f6;--fg-2: #b4bccb;--muted: #8a93a6;--accent: #5aa9ff;--accent-strong: #2f8cff;--live: #ff4757;--ok: #3fb950;--warn: #e3b341;--radius: 12px;--radius-sm: 8px;--focus: 0 0 0 3px rgba(90, 169, 255, .55);--topbar-h: 60px;color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg)}body{font:16px/1.5 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body.no-scroll{overflow:hidden}h1,h2,h3{line-height:1.2;margin:0}a{color:var(--accent)}.mono{font-family:ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:.04em}:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--accent);color:#000;padding:8px 12px;border-radius:6px}.skip:focus{left:8px}.topbar{position:sticky;top:0;z-index:20;height:var(--topbar-h);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-left));background:#0b0d12d9;backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-weight:650;font-size:18px}.brand svg{width:26px;height:26px;color:var(--accent)}.brand em{font-style:normal;color:var(--accent)}.header-right{display:flex;align-items:center;gap:8px}.chip{font-size:13px;padding:5px 10px;border-radius:999px;border:1px solid var(--border);color:var(--fg-2)}.chip-guest{border-color:#e3b34180;color:var(--warn)}.account{position:relative}.avatar{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);cursor:pointer;background:var(--surface-2);color:var(--fg);font-weight:650;font-size:14px}.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 12px 32px #00000073}.menu-id{display:flex;flex-direction:column;padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}.menu-id span{color:var(--muted);font-size:13px;overflow-wrap:anywhere}.menu a,.menu button{display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:var(--radius-sm);background:none;color:var(--fg);font:inherit;text-decoration:none;cursor:pointer}.menu a:hover,.menu button:hover,.menu a:focus-visible,.menu button:focus-visible{background:var(--surface-2)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);color:var(--fg);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{border-color:#3a4256;background:#262c3a}.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}.btn-primary:hover{background:#4598ff;border-color:#4598ff}.btn-ghost{background:transparent}.btn-lg{min-height:50px;padding:0 28px;font-size:17px}.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}input{font:inherit;color:var(--fg);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 14px;min-height:44px}input:focus{border-color:var(--accent);outline:none;box-shadow:var(--focus)}input::placeholder{color:#5d6678}main{outline:none}.page{max-width:880px;margin:0 auto;padding:28px 16px 64px}.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}.page-head h1{font-size:28px}.centre{display:grid;place-items:center;min-height:50vh}.hero{max-width:640px;margin:0 auto;padding:14vh 20px 40px;text-align:center}.hero h1{font-size:clamp(30px,6vw,46px);letter-spacing:-.02em}.hero p{color:var(--fg-2);font-size:18px;margin:18px auto 0;max-width:520px}.hero .hint{font-size:14px;color:var(--muted);margin-top:28px}.join-form{display:flex;flex-direction:column;gap:6px;min-width:min(100%,330px)}.join-form label{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.join-row{display:flex;gap:8px}.join-row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.08em;font-family:ui-monospace,Consolas,monospace}.form-msg{margin:0;min-height:20px;font-size:14px;color:var(--muted)}.form-msg.error{color:#ff8a8a}.session-group{margin-bottom:30px}.session-group h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}.session-group ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}.session-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--fg);text-decoration:none;transition:border-color .15s,transform .15s}.session-card:hover{border-color:#3d4660;transform:translateY(-1px)}.session-card h3{font-size:17px}.session-card p{margin:4px 0 0;color:var(--muted);font-size:14px}.session-card.is-past{opacity:.65}.session-card-main{min-width:0}.pill{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--fg-2);white-space:nowrap}.pill-live{background:#ff475726;color:#ff8994}.pill-open{background:#5aa9ff24;color:var(--accent)}.pill-muted{color:var(--muted)}.dot{width:8px;height:8px;border-radius:50%;background:var(--live);animation:blink 1.6s infinite}@keyframes blink{50%{opacity:.35}}.skeleton{height:76px;border-radius:var(--radius);background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);background-size:200% 100%;animation:shimmer 1.4s infinite;margin-bottom:10px}@keyframes shimmer{to{background-position:-200% 0}}.message-card{max-width:480px;margin:12vh auto 0;padding:0 20px;text-align:center}.message-card h1{font-size:24px}.message-card p{color:var(--fg-2)}.message-icon,.banner-icon{width:52px;height:52px;margin:0 auto 16px;color:var(--accent)}.message-icon svg,.banner-icon svg{width:100%;height:100%}.spinner{width:40px;height:40px;border-radius:50%;border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.watch{max-width:1280px;margin:0 auto;padding:16px 16px 48px}.stage{position:relative;width:100%;aspect-ratio:16 / 9;max-height:calc(100vh - var(--topbar-h) - 140px);min-height:260px;background:#000;border-radius:var(--radius);overflow:hidden;isolation:isolate}.stage:fullscreen,.stage.pseudo-fs{max-height:none;border-radius:0;aspect-ratio:auto}.stage.pseudo-fs{position:fixed;inset:0;z-index:50;width:100vw;height:100dvh}.player-host,.p360-canvas{position:absolute;inset:0;width:100%;height:100%}.p360-canvas{display:block;cursor:grab;touch-action:none}.p360-dragging .p360-canvas{cursor:grabbing}.p360-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.stage-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:20px;pointer-events:none;z-index:2}.stage-overlay>*{pointer-events:auto}.stage[data-state=live] .stage-overlay{display:none}.stage:not([data-state=live]){background:radial-gradient(ellipse at 50% 35%,#1b2438,#0b0d12 70%)}.banner{max-width:440px;text-align:center}.banner h2{font-size:clamp(20px,3.4vw,26px)}.banner p{color:var(--fg-2);margin:8px 0 0}.banner .btn{margin-top:18px}.banner-kicker{color:var(--accent)!important;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.08em}.banner-card .message-card{margin:0}.countdown{font-size:clamp(40px,9vw,72px)!important;font-weight:700;color:var(--fg)!important;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:4px 0 6px!important}.pulse{width:18px;height:18px;margin:0 auto 18px;border-radius:50%;background:var(--accent);box-shadow:0 0 #5aa9ff99;animation:pulse 1.8s infinite}@keyframes pulse{70%{box-shadow:0 0 0 22px #5aa9ff00}to{box-shadow:0 0 #5aa9ff00}}.live-badge{position:absolute;top:12px;left:12px;z-index:3;display:flex;align-items:center;gap:6px;padding:3px 9px;border-radius:6px;background:#0000008c;color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;pointer-events:none}.stage.buffering .live-badge .dot{animation:none;background:var(--warn)}.sound-prompt{position:absolute;top:12px;right:12px;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 10px;border:0;border-radius:999px;background:#0009;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px)}.sound-prompt svg{width:20px;height:20px}.controls{position:absolute;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translate(-50%);z-index:3;display:flex;gap:4px;padding:5px;border-radius:999px;background:#0000008c;backdrop-filter:blur(8px);opacity:.85;transition:opacity .2s}.stage:hover .controls,.controls:focus-within{opacity:1}.ctl{width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#fff;cursor:pointer}.ctl:hover{background:#ffffff1f}.ctl[aria-pressed=true]{color:var(--accent)}.ctl svg{width:22px;height:22px}.toast{position:absolute;left:50%;bottom:76px;transform:translate(-50%);z-index:4;max-width:90%;padding:10px 14px;border-radius:var(--radius-sm);background:#000c;color:#fff;font-size:14px}.session-info{padding:18px 4px 0}.session-title{font-size:clamp(20px,3vw,28px)}.session-meta{color:var(--muted);margin:6px 0 0}.session-hint{color:var(--muted);font-size:14px;margin:14px 0 0}@media(max-width:640px){.watch{padding:0 0 32px}.stage{border-radius:0;aspect-ratio:auto;height:min(62vh,520px);max-height:none}.session-info{padding:16px}.page-head{align-items:stretch}.join-form{min-width:100%}}@media(max-height:500px)and (orientation:landscape){.topbar{display:none}.watch{padding:0}.stage{height:100dvh;max-height:none;border-radius:0;aspect-ratio:auto}.session-info{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}