@font-face{font-family:Pixel;src:url('/assets/pixel.ttf') format('truetype');font-display:swap}
@font-face{font-family:DM;src:url('/assets/sans.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--bg:#111113;--surface:#18181b;--line:#2a292e;--muted:#85838e;--text:#eeeaf0;--orange:#ffb477;--mint:#a6e4be;font-family:DM,Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--orange);outline-offset:4px}a{color:inherit}button:disabled{cursor:wait;opacity:.6}button{border:0}img{image-rendering:pixelated}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}button{transition:background .16s,transform .16s}button:active{transform:translateY(1px)}[hidden]{display:none!important}
.topbar{height:94px;max-width:1600px;padding:0 48px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:Pixel,monospace;font-size:16px;line-height:1.7;letter-spacing:-.5px}.brand img{width:43px;height:43px}.brand-sub{display:block;font-family:DM,Arial,sans-serif;font-size:10px;color:var(--muted);letter-spacing:4px;line-height:1.7}.top-center{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:1.8px;color:#76747e}.tiny-dot{width:5px;height:5px;display:inline-block;background:var(--orange);border-radius:50%}.top-actions{display:flex;align-items:center;gap:22px}.sim-label{font-size:12px;color:#c8b3a4;padding:8px 11px;border:1px solid #43352e;border-radius:5px;background:#241d19;display:flex;align-items:center;gap:8px}.sim-label>span{width:5px;height:5px;background:var(--orange);border-radius:50%}.icon-button{width:34px;height:34px;background:none;color:#8c8895;display:grid;place-items:center}.icon-button:hover{color:white;background:#242329}
.studio{max-width:1330px;margin:0 auto;padding:35px 35px 26px;display:grid;grid-template-columns:minmax(220px,1fr) minmax(300px,410px) minmax(260px,1fr);gap:42px;align-items:start}.overview{padding-top:18px;max-width:285px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--orange);display:flex;align-items:center;gap:8px}.orange-line{height:1px;width:20px;background:var(--orange)}h1{font-size:clamp(29px,2.6vw,40px);font-weight:500;line-height:1.22;letter-spacing:-1.5px;margin:23px 0 17px}h1 em{font-style:normal;color:var(--orange)}.intro{font-size:14px;line-height:1.8;color:#aaa5b1;margin:0 0 32px}.mission-card{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0 19px}.section-label{font-size:10px;letter-spacing:1.4px;color:#aaa4b1;display:flex;align-items:center;justify-content:space-between;gap:10px}.section-label>span{font-size:10px;color:#77717f;letter-spacing:1px}.mission-location{display:flex;align-items:center;gap:10px;font-size:17px;margin-top:16px;font-weight:500}.location-marker{color:#c6a9ec;font-size:24px}.route{display:flex;align-items:center;margin:20px 0 10px;gap:7px}.route i{border:1px solid #54445e;background:#241e2b;display:block;width:8px;height:8px;transform:rotate(45deg)}.route i.active{background:#c5a3e8;border-color:#c5a3e8;box-shadow:0 0 9px #b890d733}.route b{height:1px;background:#343039;flex:1}.route .boss-node{border:0;background:transparent;color:#8b698a;font-size:21px;transform:none;width:17px;height:22px;font-style:normal}.route .boss-node.active{color:var(--orange);background:transparent;box-shadow:none}.route-label{display:flex;justify-content:space-between;color:#8f8899;font-size:12px}.session-stats{display:flex;justify-content:space-between;gap:15px;padding:24px 0 27px;border-bottom:1px solid var(--line)}.session-stats strong{font-size:22px;font-weight:500;letter-spacing:-.7px;font-variant-numeric:tabular-nums;display:block}.session-stats span{display:block;font-size:9px;letter-spacing:1.4px;color:#89838f;margin-top:5px}.crew-section{margin-top:25px}.crew-list{min-height:100px;margin-top:15px;display:flex;flex-direction:column;gap:11px}.crew-row{display:flex;gap:9px;align-items:center;font-size:13px}.crew-row img{width:31px;height:31px;background:#24262b;border-radius:4px}.crew-row .crew-detail{flex:1;min-width:0}.crew-row strong{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.crew-track{width:65px;height:2px;background:#323b35;margin-top:5px}.crew-track i{display:block;height:100%;background:var(--mint)}.crew-row>span{color:#827d89;font-size:11px}.empty-crew{font-size:12px;color:#726d7b;line-height:1.7}.left-note{display:flex;gap:11px;align-items:center;margin-top:24px;color:#8c8495}.left-note p{font-size:12px;line-height:1.65}.live-orbit{font-size:20px;color:#a89aaf}.credits{font-size:11px;color:#68616f;text-decoration:none;display:block;margin-top:18px}.credits:hover{color:var(--orange)}.credits span{margin-left:6px}
.broadcast-column{width:100%;max-width:410px;margin:0 auto}.broadcast{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border-radius:10px;background:#110e29;box-shadow:0 0 0 1px #38303e,0 18px 70px #0005;isolation:isolate;container-type:inline-size}#game{display:block;width:100%;height:100%;image-rendering:pixelated}.stream-top{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;gap:8px}.channel-avatar{width:37px;height:37px;display:grid;place-items:center;border:1px solid #a788b14d;border-radius:50%;background:#302344;flex-shrink:0}.channel-name{flex:1;min-width:0;text-shadow:0 1px 4px #000}.channel-name strong{font-size:12px;display:block;font-weight:600}.channel-name>span{font-size:9px;color:#d2bacf;display:block;margin-top:3px}.live-pill{background:#dd546b;color:white;font-size:9px;font-weight:800;letter-spacing:.7px;border-radius:3px;padding:4px 6px}.viewers{display:flex;align-items:center;gap:4px;font-size:10px;padding:5px;background:#ffffff0b;border-radius:3px}.viewers svg{width:12px;height:12px}.viewers b{font-weight:500}.stream-simulation{position:absolute;right:14px;top:59px;font-size:7px;letter-spacing:1.3px;color:#bba4bc}.stream-bottom{position:absolute;left:17px;bottom:16px;width:calc(100% - 68px);pointer-events:none}.stream-chat{display:flex;flex-direction:column;gap:6px;margin-bottom:15px;max-width:93%}.stream-chat p{margin:0;font-size:10px;line-height:1.4;text-shadow:0 1px 4px #000,0 1px 6px #000}.stream-chat strong{color:#dfbbeb;margin-right:6px;font-weight:700}.stream-chat p:last-child{animation:chat-in .25s ease-out}.stream-chat .gift-chat strong{color:#a5ebbf}.stream-instruction{font-family:Pixel,monospace;font-size:6px;color:#f6dfb8;letter-spacing:.1px;white-space:nowrap}.blink{color:var(--orange);margin-right:4px}.sound-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);white-space:nowrap;display:flex;align-items:center;gap:12px;font-size:12px;background:#fff1de;color:#282029;padding:13px 16px;border-radius:5px;box-shadow:0 8px 25px #0007;z-index:5}.sound-start:active{transform:translate(-50%,-49%)}.sound-start>span:first-child{font-size:18px}.sound-arrow{color:#9b7262}.broadcast-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;height:47px;font-size:11px;color:#9e96a5}.broadcast-footer>span:first-child{display:flex;align-items:center;gap:7px}.broadcast-footer i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#a6e4be}.runtime{color:#736d7c;font-variant-numeric:tabular-nums;font-size:10px}.broadcast-footer>div{display:flex;gap:8px}.small-icon{position:relative;background:transparent;color:#a49aaa;font-size:18px;min-width:28px;height:30px}.small-icon:hover{background:#252029;border-radius:4px}.slash{font-size:20px;position:absolute;left:12px;top:2px;color:#edbaa2}.floating-hearts{position:absolute;right:15px;bottom:48px;width:25px;height:150px;pointer-events:none}.heart{position:absolute;bottom:0;font-size:22px;color:#ee7794;animation:float-up 3s linear forwards;text-shadow:2px 2px #351931}.load-error{position:absolute;inset:20%;z-index:20;background:#381926;color:#fff;padding:25px;font-size:16px;line-height:1.5}
.audience{padding-top:4px;min-width:0}.chat-panel{border:1px solid var(--line);border-radius:8px;background:#161518;overflow:hidden}.chat-heading{padding:19px 17px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}.chat-heading h2{font-size:15px;font-weight:500;margin:0}.chat-heading>span{font-size:8px;letter-spacing:.8px;color:#95899f;white-space:nowrap;display:flex;align-items:center;gap:5px}.chat-heading i{width:4px;height:4px;border-radius:50%;background:#a6b39c}.chat-feed{height:340px;overflow:auto;padding:10px 14px 12px;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin;scrollbar-color:#36303d transparent}.chat-row{display:flex;align-items:flex-start;gap:9px;animation:chat-in .2s ease-out;flex-shrink:0}.avatar{display:grid;place-items:center;flex-shrink:0;width:27px;height:27px;background:var(--avatar-bg,#353047);color:var(--avatar-color,#cab2e7);border-radius:50%;font-size:10px;font-weight:700}.chat-copy{min-width:0;flex:1}.chat-copy header{display:flex;gap:6px;align-items:center}.chat-copy strong{font-size:11px;font-weight:650;color:#b5a8c0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px}.chat-copy time{margin-left:auto;font-size:9px;color:#5c5664;white-space:nowrap}.chat-copy p{font-size:12px;line-height:1.5;color:#d3cbd9;margin:2px 0 0;overflow-wrap:anywhere}.chat-row.gift{padding:10px 8px;margin:0 -5px;background:#202922;border:1px solid #344234;border-radius:5px}.chat-row.gift .chat-copy strong{color:#b3debc}.chat-row.gift .chat-copy p{font-size:11px;color:#c5dac6}.chat-gift-icon{width:27px;height:27px;flex-shrink:0;margin-top:3px}.chat-row.join .avatar{width:19px;height:19px;font-size:8px}.chat-row.join{gap:7px;align-items:center;padding-left:4px}.chat-row.join p{margin:0;color:#82798c;font-size:10px;overflow-wrap:anywhere}.chat-row.join strong{color:#a399ad;font-weight:500}.chat-compose{padding:12px 13px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line)}.your-avatar{display:grid;place-items:center;width:27px;height:27px;background:#382c25;border-radius:50%;color:#e7b491;font-size:10px;flex-shrink:0}.chat-compose form{display:flex;align-items:center;flex:1;min-width:0}.chat-compose input{width:100%;min-width:0;background:transparent;border:none;outline:none;color:#ddd2e3;font-size:11px}.chat-compose input::placeholder{color:#6f657b}.chat-compose button{background:transparent;font-size:22px;color:#8f7d9d;width:25px}.interaction-panel{padding-top:25px}.interaction-panel>p{font-size:12px;color:#8d8497;margin:10px 0 15px}.interaction-panel .section-label{font-size:10px;color:#c3b5ca}.interaction-panel .section-label>span{font-size:8px;color:#776b81}.gift-buttons{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.gift-button{padding:10px 3px 11px;background:#1d1a21;border:1px solid #322b39;border-radius:6px;display:flex;flex-direction:column;align-items:center;gap:6px}.gift-button:hover{background:#2b2231;border-color:#826373;transform:translateY(-3px)}.gift-button strong{font-size:11px;font-weight:550}.gift-button small{font-size:9px;color:#9e8fa8}.gift-art{width:45px;height:40px;display:grid;place-items:center}.gift-art img{width:38px;height:38px;filter:drop-shadow(0 2px 6px #0005)}.gift-art.blue img{width:32px;height:32px}.gift-art.peach img{width:35px;height:35px}.gift-identity{display:flex;align-items:center;gap:6px;margin-top:14px;font-size:10px;color:#82768e}.gift-identity input{background:transparent;border:0;border-bottom:1px dashed #514457;color:#d2bbdf;padding:3px;width:70px;min-width:0;font-size:11px}.gift-identity button{background:transparent;color:#b3a0c2;font-size:10px;margin-left:auto;white-space:nowrap}.interaction-panel>.interaction-status{font-size:10px;line-height:1.5;color:#716478;margin-top:13px;min-height:30px}
.studio-footer{max-width:1504px;margin:0 auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-size:9px;letter-spacing:1px;color:#766d80}.studio-footer>div:first-child{display:flex;align-items:center;gap:9px}.footer-separator{margin:0 7px;color:#4d4555}.footer-controls{display:flex;align-items:center;gap:13px;letter-spacing:0;font-size:11px}.footer-controls label{color:#91859e}.footer-controls select{background:#1d1922;color:#bdb0c9;border:1px solid #33293d;padding:6px 8px;font-size:10px;border-radius:4px}.footer-controls button{font-size:11px;color:#a59aaf;background:transparent;padding:6px 0 6px 12px}.footer-controls button span{margin-left:7px}.settings-panel{position:fixed;right:35px;bottom:65px;width:300px;border:1px solid #514158;background:#211b28;border-radius:9px;padding:22px;z-index:30;box-shadow:0 10px 60px #000a}.settings-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.settings-heading h2{font-size:18px;margin:0;font-weight:500}.settings-heading button{background:transparent;font-size:23px;color:#b5a0c0}.setting-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:17px 0;color:#c6b6d0}.setting-row input{accent-color:var(--orange)}.setting-row input[type=range]{width:110px}.settings-panel p{font-size:11px;color:#a08aa9;line-height:1.6}.export-button{padding:10px 12px;background:#382b40;border:1px solid #51405b;width:100%;border-radius:4px;font-size:12px;color:#dbc7e7}.exit-focus{position:fixed;top:20px;left:20px;z-index:50;background:#25212bd9;padding:12px 16px;border-radius:5px;color:#ddd1e6;font-size:12px;opacity:.4}.exit-focus:hover{opacity:1}body.focus .topbar,body.focus .overview,body.focus .audience,body.focus .studio-footer,body.focus .broadcast-footer{display:none}body.focus .studio{padding:0;display:block;max-width:none}body.focus .broadcast-column{height:100dvh;width:calc(100dvh * 9 / 16);max-width:100vw}body.focus .broadcast{border-radius:0;box-shadow:none}body.focus{background:#08080c}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
@keyframes float-up{0%{transform:translate(0,0) scale(.7);opacity:0}15%{opacity:.85}50%{transform:translate(-14px,-70px) scale(1)}100%{transform:translate(4px,-170px) scale(.6);opacity:0}}@keyframes chat-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1400px){.studio{padding-top:40px;gap:55px;max-width:1380px;grid-template-columns:minmax(240px,1fr) minmax(350px,432px) minmax(300px,1fr)}.broadcast-column{max-width:432px}.chat-feed{height:375px}.studio-footer{margin:0 48px}}
@media(max-height:900px) and (min-width:1000px){.topbar{height:76px}.studio{padding-top:24px;padding-bottom:9px;grid-template-columns:minmax(220px,1fr) minmax(295px,calc((100dvh - 168px) * 9 / 16)) minmax(260px,1fr);gap:34px;max-width:1200px}.broadcast-column{max-width:calc((100dvh - 168px) * 9 / 16)}.overview{padding-top:8px}.intro{margin-bottom:22px}.mission-card{padding:17px 0}.crew-section{margin-top:19px}.crew-list{min-height:65px;gap:7px}.left-note{margin-top:14px}.credits{margin-top:10px}.chat-feed{height:calc(100dvh - 498px);min-height:160px}.interaction-panel{padding-top:19px}.studio-footer{margin:0 40px;padding:14px 0}.chat-heading{padding:15px}.session-stats{padding:18px 0 20px}h1{font-size:34px;margin-top:18px}}
@media(max-width:1150px){.top-center{display:none}.studio{gap:25px;padding-left:28px;padding-right:28px}.topbar{padding:0 30px}.studio-footer{margin:0 30px}.overview h1{font-size:30px}.chat-heading>span{font-size:7px}.gift-button small{font-size:8px}}
@media(max-width:999px){.studio{grid-template-columns:minmax(300px,410px) minmax(260px,320px);justify-content:center;gap:30px}.overview{display:none}.studio-footer{padding:18px 0}.chat-feed{height:350px}}
@media(max-width:680px){.topbar{height:70px;padding:0 18px}.brand{font-size:12px;gap:7px}.brand img{width:34px;height:34px}.brand-sub{font-size:8px;letter-spacing:3px}.top-actions{gap:8px}.sim-label{font-size:10px;padding:7px 8px}.studio{display:flex;flex-direction:column;padding:18px 14px;gap:15px}.broadcast-column{max-width:432px}.audience{width:100%;max-width:432px;margin:auto;display:flex;flex-direction:column-reverse;gap:22px}.interaction-panel{padding-top:0}.gift-button{padding:12px 5px}.gift-button strong{font-size:13px}.gift-button small{font-size:11px}.gift-identity{font-size:12px}.gift-identity input{font-size:13px;width:100px}.gift-identity button{font-size:12px}.interaction-panel>.interaction-status{font-size:11px}.chat-feed{height:230px}.chat-copy strong,.chat-copy p{font-size:13px}.chat-heading>span{font-size:9px}.chat-compose input{font-size:13px}.studio-footer{margin:10px 18px 0;flex-direction:column;align-items:flex-start;gap:16px}.footer-controls{width:100%;justify-content:space-between;font-size:12px}.settings-panel{right:15px;bottom:25px;width:min(320px,calc(100vw - 30px))}.stream-top{top:14px}.broadcast{border-radius:8px}.exit-focus{font-size:10px;top:70px;left:10px;padding:8px}.stream-chat p{font-size:11px}}
@media(prefers-reduced-motion:reduce){button{transition:none}.heart{display:none}.chat-row,.stream-chat p:last-child{animation:none}}
.pause-indicator{position:absolute;left:50%;top:40%;transform:translateX(-50%);padding:12px 16px;background:#21192def;border:1px solid #7e6287;border-radius:4px;color:#e9d1ef;font-size:12px;letter-spacing:2px;z-index:6}

/* Capture uses a portrait viewport; the canvas paints edge to edge. Native TikTok UI owns its margins. */
body.capture .stream-top,body.capture .stream-bottom,body.capture .floating-hearts,body.capture .exit-focus,body.capture .sound-start{display:none!important}
body.capture .broadcast{border-radius:0}body.capture .stream-simulation{top:3%;left:5%;right:auto;font-size:clamp(8px,1.5cqw,20px);color:#f3cb9b}
body.capture #connection-state{display:none}
body.connected .interaction-panel,body.connected .chat-compose,body.connected #pace,body.connected label[for=pace]{display:none}
body.connected .stream-chat{display:none}
#connection-state{position:absolute;bottom:5%;left:5%;right:5%;font-size:11px;color:#ffcf9d;background:#161024d9;padding:8px;pointer-events:none}
#connection-state:empty{display:none}
.safe-guides{display:none;position:absolute;inset:0;pointer-events:none}
body.guides .safe-guides{display:block}.safe-guides span{position:absolute;background:#fa647a22;border:1px dashed #fba0ab;color:#ffd5db;font-size:12px;padding:12px;left:0;right:0}
.safe-guides span:first-child{top:0;height:10%}.safe-guides span:last-child{bottom:0;height:30%}