:root { color-scheme: dark; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:#000; color:#e9d5ff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; display:grid; place-items:center; background:#000; overflow:hidden; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:2px solid #d49bff; outline-offset:4px; }
button:disabled { opacity:.5; cursor:wait; }
[hidden] { display:none !important; }
.stage { position:relative; width:min(100vw,177.577vh); width:min(100vw,177.577dvh); aspect-ratio:1671/941; background:#000; isolation:isolate; }
.screen { position:absolute; inset:11% 7.3% 6% 3%; z-index:1; background:#000; display:block; overflow:hidden; min-width:0; min-height:0; }
video { display:block; width:100%; height:100%; min-width:0; min-height:0; max-width:100%; max-height:100%; object-fit:contain; background:#000; }
.approved-frame { position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; user-select:none; clip-path:polygon(evenodd,0 0,100% 0,100% 100%,0 100%,0 0,3% 11%,3% 94%,92.7% 94%,92.7% 32%,87% 32%,83% 26%,81.5% 11%,3% 11%,0 0); }
.connect { position:absolute; top:0; left:43%; width:14%; height:4.2%; min-height:22px; border:0; border-radius:0; background:#000; color:#c78cf0; padding:0 0 .15%; font-size:clamp(12px,1.6vw,27px); font-weight:400; z-index:4; line-height:1; }
.connect:hover { color:#e5b8ff; }
.status { position:absolute; bottom:8.5%; left:6%; right:15%; color:#b889d0; font-size:clamp(10px,.85vw,15px); text-align:center; margin:0; pointer-events:none; z-index:3; }
.status:empty { display:none; }
.stage.is-playing .status { opacity:0; transition:opacity 1s; }
.audio-prompt { position:absolute; z-index:5; bottom:5%; left:50%; transform:translateX(-50%); background:#150a1fe8; color:#e0b7ff; border:1px solid #744499; border-radius:6px; padding:9px 15px; font-size:13px; }
dialog { width:min(520px,calc(100vw - 32px)); border:1px solid #603480; border-radius:14px; color:#eddef8; background:#100b16; padding:30px; box-shadow:0 25px 120px #000c; }
dialog::backdrop { background:#000b; backdrop-filter:blur(5px); }
dialog h1 { margin:0 0 8px; font-size:25px; font-weight:500; }
.intro { color:#b9a5c8; margin:0 0 24px; font-size:14px; line-height:1.5; }
.dialog-close-form { position:absolute; top:9px; right:10px; }
.close { border:0; background:none; color:#b9a5c8; font-size:26px; padding:0 7px; }
dialog button { background:#261332; color:#e9caff; border:1px solid #674380; border-radius:7px; padding:11px 14px; }
dialog button:hover { background:#371b49; }
dialog .primary { width:100%; background:#7945a3; border-color:#985ec5; color:#fff; margin:0 0 27px; }
dialog .primary:hover { background:#8b52b9; }
.access-notice { color:#a48cb5; font-size:12px; line-height:1.65; margin:12px 0 20px; }
#accessForm .primary { margin:0; }
.sign-out { margin-top:22px; background:none; border-color:transparent; padding:4px 0; color:#9c85ac; font-size:12px; }
.sign-out:hover { background:none; color:#d3b4e8; }
label { display:block; font-size:13px; color:#c3afce; margin:0 0 8px; }
.join-row { display:flex; gap:8px; }
input { width:100%; min-width:0; background:#08060b; color:#eddef8; border:1px solid #42304d; border-radius:7px; padding:11px; font-size:13px; }
input::placeholder { color:#786785; }
.hint { color:#93829f; font-size:12px; line-height:1.6; margin:12px 0 0; }
.notice { color:#d6addf; font-size:13px; line-height:1.6; margin:20px 0 0; white-space:pre-line; overflow-wrap:anywhere; }
.notice:empty { display:none; }
.notice.error { color:#ffb3c2; }
#sessionDescription { line-height:1.5; font-size:14px; color:#c3afce; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; }
.actions button { font-size:13px; }
dialog .danger { background:#20111b; color:#e9a8b8; border-color:#603347; margin-left:auto; }
.screen:fullscreen { inset:0; width:100%; height:100%; background:#000; }
.screen:fullscreen video { width:100vw; height:100vh; }
@media (max-width:560px) { dialog { padding:26px 20px; } .connect { font-size:12px; top:-1px; height:5%; } .hint { font-size:11px; } .join-row button { padding:10px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }