:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#e4ede7;background:#0a151b;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% 15%,#17302c55,transparent 55%),#0a151b}main{max-width:1136px;padding:0 36px;margin:auto}header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #26373a}.brand{font-size:27px;letter-spacing:-1.2px;font-weight:850;color:inherit;text-decoration:none}.brand-mark{color:#b6e792;margin-right:9px}.bang{color:#c6eea6}.build-label,.eyebrow,.scene-bar,.scene-caption,.control-label,#player-count,footer{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:1.3px}.build-label{display:flex;align-items:center;gap:9px;color:#b5c5bd}.version{color:#5f7778}.status-dot{width:6px;height:6px;background:#b6e792;border-radius:50%;box-shadow:0 0 12px #b6e77566}.intro{display:flex;justify-content:space-between;align-items:end;padding:44px 0 32px}.eyebrow{color:#b5db91;font-size:10px;letter-spacing:2px;margin:0 0 14px}h1{font-size:43px;line-height:1.12;font-weight:650;letter-spacing:-1.8px;margin:0}h1 span{color:#8aa69b}.intro-copy{font-size:13px;line-height:1.8;color:#9bb0aa;padding-bottom:3px;margin:0}.game-shell{border:1px solid #3e5550;border-radius:10px;overflow:hidden;background:#0f2025;box-shadow:0 25px 70px #0004}.scene-bar{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #304841;font-size:10px;letter-spacing:1.1px;color:#c0d0c4}.tiny-square{display:inline-block;width:6px;height:6px;background:#b8d79a;margin-right:9px}.muted{color:#627b72;margin:0 8px}#renderer-status{font-size:9px;color:#91aa9f}.viewport{position:relative;aspect-ratio:16/9;isolation:isolate;background:#0e1d27}canvas{width:100%;height:100%;display:block;outline:none}canvas:focus-visible{outline:2px solid #c3eb9e;outline-offset:-3px}.lobby-panel{position:absolute;left:5.5%;top:11%;width:340px;padding:27px;background:#102125eF;border:1px solid #58735d77;border-radius:8px;box-shadow:0 20px 50px #0004;pointer-events:auto}.lobby-panel h2{font-size:25px;font-weight:600;letter-spacing:-.7px;line-height:1.2;margin:0 0 17px}.lobby-panel p:not(.eyebrow){font-size:12px;color:#9fb4aa;line-height:1.9}.lobby-panel small{display:block;font-size:10px;color:#849e92;text-align:center;margin-top:12px}button{cursor:pointer;font:inherit}#start{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:22px;padding:13px 16px;background:#c0e99d;color:#17261c;font-weight:650;border:0;border-radius:5px;font-size:12px}#start:hover:enabled{background:#d1f6b4}#start:disabled{opacity:.4;cursor:default}button:focus-visible{outline:2px solid #e0ffba;outline-offset:4px}.scene-caption{position:absolute;bottom:18px;left:20px;right:20px;display:flex;justify-content:space-between;color:#9cae9e;font-size:8px;pointer-events:none}.party-bar{display:flex;justify-content:space-between;align-items:center;min-height:62px;padding:12px 18px;border-top:1px solid #354a42;background:#102126}.party{display:flex;flex-wrap:wrap;gap:12px}.player-slot{display:flex;gap:8px;align-items:center;font-size:10px;color:#abc0b6}.player-dot{display:flex;justify-content:center;align-items:center;width:25px;height:25px;border:1px solid var(--player-color,#456056);border-radius:6px;color:var(--player-color,#77918a);background:#23382e55;font-family:monospace;font-size:10px}.empty{color:#60796e}.quiet{border:1px solid #3d5849;background:transparent;color:#a8c4b1;border-radius:4px;font-size:10px;padding:9px 10px}.under-scene{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 1px}#message{font-size:11px;color:#96aaa2;margin:0;line-height:1.6}#player-count{font-size:9px;color:#aac494;white-space:nowrap}.controls{display:grid;grid-template-columns:1fr 1.1fr 1.2fr;border-top:1px solid #2a3b3b;border-bottom:1px solid #2a3b3b;margin-top:12px;padding:22px 0;gap:20px}.control-label{color:#7d968d;font-size:9px;letter-spacing:1px}.controls p{font-size:10px;color:#b5c7bd;line-height:2;margin:10px 0 0}kbd{font-family:ui-monospace,monospace;font-size:10px;border:1px solid #4a6155;border-bottom-width:2px;border-radius:4px;background:#23372e;display:inline-block;min-width:21px;line-height:20px;text-align:center;color:#d7e9c6;margin-right:3px}.divider{margin:0 6px;color:#597669}footer{display:flex;justify-content:space-between;padding:23px 0 30px;color:#637d75;font-size:8px;letter-spacing:.4px}footer>span:first-child{font-family:inherit;font-size:12px;font-style:italic;letter-spacing:0;color:#9db59f}.pause-panel{position:absolute;inset:30% 22%;text-align:center;align-content:center;background:#0d2025ed;border:1px solid #5a7768;border-radius:8px;pointer-events:none;padding:15px}.pause-panel h2{font-size:22px}.pause-panel p{font-size:12px;color:#a6bbae;line-height:1.6}[hidden]{display:none!important}@media(max-width:760px){main{padding:0 18px}header{height:76px}.intro{padding:30px 0 25px}.intro-copy{display:none}h1{font-size:34px}.lobby-panel{left:4%;top:5%;padding:14px;width:260px}.lobby-panel h2{font-size:19px;margin-bottom:8px}.lobby-panel .eyebrow{margin-bottom:8px}.lobby-panel p:not(.eyebrow){font-size:10px;margin:5px 0}.lobby-panel small{font-size:8px;margin-top:7px}#start{margin-top:10px;padding:9px}.scene-caption{bottom:8px;font-size:6px}.controls{grid-template-columns:1fr;gap:14px}.controls p{margin-top:4px}.party{gap:7px}.player-slot{font-size:8px}.party-bar{padding:10px;flex-wrap:wrap;gap:8px}footer{gap:14px;line-height:1.8}.scene-bar{font-size:8px;padding:12px}#renderer-status{font-size:7px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

.view-tabs { display:flex; gap:8px; margin:0 0 15px; }
.view-tabs button { padding:11px 16px; border:1px solid #38524a; border-radius:5px; color:#94ada1; background:#102126; font-size:11px; }
.view-tabs button[aria-pressed="true"] { border-color:#b4d793; color:#d5e9bf; background:#24392c; }
.objective { display:flex; gap:14px; align-items:center; padding:16px 0 4px; }
.objective p { flex:1; margin:0; font-size:12px; color:#c4d4c6; line-height:1.5; }
.objective label { font:9px ui-monospace,monospace; color:#9bb287; white-space:nowrap; }
.objective progress { width:120px; height:9px; accent-color:#edb86a; }
.lighting-controls { border:1px solid #38524a; border-radius:6px; padding:18px; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:20px; color:#b1c8bc; font-size:12px; }
.lighting-controls legend { font-size:11px; color:#bdcfad; padding:0 8px; }
.lighting-controls label { display:flex; align-items:center; gap:9px; }
.lighting-controls input { accent-color:#deb984; }
.lighting-controls input[type="range"] { width:120px; }
.lighting-controls p { width:100%; margin:0; color:#93a99e; font-size:11px; line-height:1.6; }
.completion-panel { position:absolute; left:25%; right:25%; top:25%; padding:30px; text-align:center; background:#122820f5; border:1px solid #8baa73; border-radius:8px; box-shadow:0 15px 60px #0006; }
.completion-panel h2 { font-size:25px; letter-spacing:-.7px; margin:0 0 14px; }
.completion-panel p:not(.eyebrow) { color:#b2c5b7; font-size:12px; line-height:1.6; }
.completion-panel button { border:0; border-radius:5px; background:#c0e99d; color:#1b2c20; padding:12px 17px; font-size:12px; margin-top:10px; }
.asset-examples { margin:26px 0; padding:24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:center; border:1px solid #38524a; border-radius:8px; background:#101f26; }
.asset-examples > div { grid-column:1 / -1; max-width:700px; }
.asset-examples h2 { font-size:22px; font-weight:600; letter-spacing:-.5px; margin:0 0 12px; }
.asset-examples p:not(.eyebrow), .asset-examples figcaption { font-size:11px; color:#9cb2a9; line-height:1.7; }
.asset-examples figure { margin:0; min-width:0; }
.asset-examples img { width:100%; display:block; border-radius:5px; }
.asset-examples figure img { max-height:220px; object-fit:contain; }
.asset-examples figcaption { margin-top:8px; }
@media(max-width:760px) { .asset-examples { grid-template-columns:1fr; padding:18px; } }
@media(max-width:760px) { .objective { flex-wrap:wrap; } .objective p { flex-basis:100%; } .completion-panel { left:8%; right:8%; top:9%; padding:18px; } .completion-panel h2 { font-size:20px; } }

.lighting-controls select { background:#10201d; color:#d4dfcd; border:1px solid #52685b; border-radius:4px; padding:5px; }

.player-slot{flex-wrap:wrap}.player-slot select{max-width:100%;background:#142d32;color:#e4ede7;border:1px solid #47625d;border-radius:5px;padding:5px;font-size:11px}.player-slot select:disabled{opacity:.8}

.loading-panel{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:radial-gradient(ellipse at 50% 45%,#254433,#102126 65%);color:#e4ede7}
.viewport:has(>.loading-panel:not([hidden]))>:not(.loading-panel){visibility:hidden}
.loading-light{font-size:52px;line-height:1.2;color:#d6f5a8;text-shadow:0 0 35px #bbec8c88;animation:loading-glow 2s ease-in-out infinite}
.loading-panel .eyebrow{margin:16px 0 10px}.loading-panel h2{margin:0;font-size:clamp(20px,3vw,30px);font-weight:600;letter-spacing:-.7px}
.loading-panel #loading-detail{max-width:360px;margin:14px 0 22px;font-size:13px;line-height:1.7;color:#a9bfb0}
.loading-track{height:3px;width:150px;border-radius:3px;background:#48644766;overflow:hidden}.loading-track span{display:block;height:100%;width:40%;background:#c0e99d;animation:loading-travel 1.6s ease-in-out infinite alternate}
#loading-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px}#loading-retry{border:0;border-radius:5px;padding:11px 18px;background:#c0e99d;color:#17261c;font-weight:600}#loading-fallback{color:#c0e99d;font-size:12px;text-underline-offset:4px}
.loading-error .loading-track{display:none}.loading-error .loading-light{animation:none}
@keyframes loading-glow{50%{opacity:.55;text-shadow:0 0 50px #bbec8ccc}}@keyframes loading-travel{to{transform:translateX(150%)}}
@media(prefers-reduced-motion:reduce){.loading-light,.loading-track span{animation:none}}
@media(max-width:500px){.loading-panel{padding:12px}.loading-light{font-size:28px}.loading-panel .eyebrow{margin:5px 0}.loading-panel #loading-detail{font-size:11px;margin:8px 0 12px}}