:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#f8f7fc;font-synthesis:none;--ink:#f8f7fc;--muted:#9795a5;--line:#ffffff17;--violet:#a78bfa;background:#0b0b0f;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-width:320px;min-height:100%;margin:0}body{background:#0b0b0f;min-height:100vh}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline-offset:3px;outline:2px solid #c4b5fd}html[data-route=overlay],html[data-route=overlay] body,html[data-route=overlay] #root{background:0 0;width:100%;min-width:0;height:100%;overflow:hidden}.studio-shell{background:radial-gradient(circle at 82% 5%,#7048e81f,#0000 28%),#0b0b0f;min-height:100vh}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:78px;padding:0 clamp(24px,4vw,64px);display:flex}.brand{letter-spacing:-.02em;align-items:center;gap:11px;font-size:15px;font-weight:720;display:inline-flex}.brand svg{color:var(--violet)}.topbar nav{align-items:center;gap:24px;display:flex}.topbar a,.text-button{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:13px;text-decoration:none}.topbar a:hover,.text-button:hover{color:var(--ink)}.studio{width:min(1440px,100% - 48px);margin:0 auto;padding:70px 0 96px}.intro{grid-template-columns:1fr auto;align-items:end;gap:56px;margin-bottom:64px;display:grid}.eyebrow{color:#b9b6c8;text-transform:uppercase;letter-spacing:.13em;align-items:center;gap:9px;font-size:10px;font-weight:750;display:flex}.live-dot,.status-light{background:#67e8b0;border-radius:50%;width:7px;height:7px;display:inline-block;box-shadow:0 0 14px #67e8b0}.status-light.connecting,.status-light.reconnecting{background:#fbbf8b;box-shadow:0 0 14px #fbbf8b}.status-light.error{background:#fb7185;box-shadow:0 0 14px #fb7185}h1{letter-spacing:-.075em;margin:20px 0 22px;font-size:clamp(48px,7vw,96px);font-weight:650;line-height:.89}h1 em{color:var(--violet);font-family:Georgia,serif;font-weight:400}.intro>div:first-child>p{color:var(--muted);max-width:620px;margin:0;font-size:17px;line-height:1.6}.connection-card{border:1px solid var(--line);background:#ffffff06;border-radius:18px;align-items:center;gap:13px;min-width:340px;padding:17px;display:flex}.connection-card .avatar,.twitch-icon{color:#c4b5fd;background:#211b33;border-radius:12px;place-items:center;width:42px;height:42px;font-weight:750;display:grid}.connection-card div{flex-direction:column;flex:1;gap:3px;display:flex}.connection-card small{color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:10px}.connection-card strong{font-size:14px}.connected-pill{color:#78e6b6;border:1px solid #67e8b038;border-radius:999px;padding:6px 9px;font-size:10px}.connected-pill.connecting,.connected-pill.reconnecting,.connected-pill.error{color:#fbbf8b;border-color:#fbbf8b38}.error-banner{color:#fecdd3;background:#3e16206b;border:1px solid #fb718540;border-radius:12px;align-items:center;gap:14px;margin:-34px 0 32px;padding:13px 15px;font-size:12px;display:flex}.error-banner span{flex:1}.error-banner a{color:#fff}.error-banner button{color:#fecdd3;cursor:pointer;background:0 0;border:0;font-size:18px}.button{background:var(--violet);color:#100c19;border-radius:11px;padding:12px 18px;font-size:12px;font-weight:750;text-decoration:none}.button.secondary{color:#ddd8e8;background:#27232f}.button.compact{padding:10px 14px}.workspace{grid-template-columns:minmax(360px,.78fr) minmax(500px,1.22fr);align-items:start;gap:clamp(24px,4vw,64px);display:grid}.controls{border-top:1px solid var(--line);padding-top:25px}.section-heading{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.section-heading>div{align-items:baseline;gap:12px;display:flex}.section-heading span{color:#706d7b;font:10px ui-monospace,monospace}.section-heading h2,.obs-card h2{letter-spacing:-.02em;margin:0;font-size:16px}.save-state.saved{color:#67e8b0}.save-state.error{color:#fb7185}.preset-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.preset-grid button{text-align:left;color:var(--ink);border:1px solid var(--line);cursor:pointer;background:#ffffff05;border-radius:14px;grid-template-rows:auto auto;grid-template-columns:46px 1fr;column-gap:12px;padding:13px;display:grid}.preset-grid button:hover{border-color:#a78bfa59}.preset-grid button.selected{border-color:var(--violet);background:#a78bfa14;box-shadow:inset 0 0 0 1px #a78bfa24}.preset-grid strong{align-self:end;font-size:12px}.preset-grid small{color:var(--muted);align-self:start;margin-top:2px;font-size:9px}.preset-swatch{background:#1a1820;border-radius:9px;grid-row:1/3;width:46px;height:42px;position:relative;overflow:hidden}.preset-swatch:before,.preset-swatch:after{content:"";background:#8b819a;border-radius:4px;height:4px;position:absolute;left:8px;right:8px}.preset-swatch:before{top:11px}.preset-swatch:after{width:21px;top:23px}.preset-swatch.glass{background:linear-gradient(145deg,#2b2637,#17151d)}.preset-swatch.bubble:before,.preset-swatch.bubble:after{border-radius:8px;height:11px;top:7px}.preset-swatch.bubble:after{top:23px}.preset-swatch.terminal{background:#0c1713}.preset-swatch.terminal:before,.preset-swatch.terminal:after{background:#56c990;height:2px}.control-section{border-top:1px solid var(--line);margin-top:38px;padding-top:25px}.field{color:#c5c2cf;border-bottom:1px solid #ffffff0e;gap:11px;padding:15px 0;font-size:12px;display:grid}.field>span{justify-content:space-between;display:flex}.field output{color:#aaa6b4}.field small{color:#aaa6b4;font-weight:400}.text-input{width:100%;color:var(--ink);border:1px solid var(--line);background:#151419;border-radius:10px;padding:11px 13px}select{appearance:none;color:var(--ink);border:1px solid var(--line);background:#151419;border-radius:10px;padding:11px 13px}input[type=range]{width:100%;accent-color:var(--violet)}.color-field{grid-template-columns:1fr auto;align-items:center}input[type=color]{background:0 0;border:0;width:34px;height:26px;padding:0}.toggle-grid{grid-template-columns:1fr 1fr;gap:10px 28px;margin-top:19px;display:grid}.toggle{color:#aaa6b4;cursor:pointer;justify-content:space-between;align-items:center;font-size:12px;display:flex}.toggle input{opacity:0;position:absolute}.toggle i{background:#2a2830;border-radius:99px;width:28px;height:16px;transition:all .2s;position:relative}.toggle i:after{content:"";background:#8a8791;border-radius:50%;width:10px;height:10px;transition:all .2s;position:absolute;top:3px;left:3px}.toggle input:checked+i{background:var(--violet)}.toggle input:checked+i:after{background:#fff;transform:translate(12px)}.toggle:has(input:focus-visible) i{outline-offset:3px;outline:2px solid #c4b5fd}.portable-actions{gap:8px;margin-top:18px;display:flex}.portable-actions button{border:1px solid var(--line);color:#aaa6b4;cursor:pointer;background:#ffffff06;border-radius:9px;flex:1;padding:9px;font-size:11px}.portable-actions button:hover{color:#fff;border-color:#a78bfa59}.segmented{border:1px solid var(--line);background:#111015;border-radius:11px;grid-template-columns:1fr 1fr;gap:4px;margin-top:15px;padding:4px;display:grid}.segmented button{color:#aaa6b4;cursor:pointer;background:0 0;border:0;border-radius:7px;padding:9px;font-size:11px}.segmented button.selected{color:#f5f2fa;background:#28242f}.preview-column{min-width:0}.preview-toolbar{border:1px solid var(--line);text-transform:uppercase;letter-spacing:.08em;color:#b4b1bf;background:#101014;border-bottom:0;border-radius:17px 17px 0 0;justify-content:space-between;align-items:center;height:48px;padding:0 17px;font-size:10px;display:flex}.preview-toolbar>div{align-items:center;gap:9px;display:flex}.preview-toolbar small{color:#625f6b;margin-left:5px}.preview-toolbar button{color:#aaa5b8;cursor:pointer;background:0 0;border:0;font-size:10px}.preview-toolbar button:hover{color:#fff}.preview-stage{border:1px solid var(--line);background:#0d0d12;border-radius:0 0 17px 17px;place-items:center;min-height:748px;padding:24px;display:grid;position:relative;overflow:hidden}.preview-viewport{aspect-ratio:5/7;background:radial-gradient(circle at 70% 25%,#49375e 0,#0000 26%),linear-gradient(145deg,#201a29,#101117 58%,#192a28);border:1px solid #ffffff14;border-radius:12px;width:min(100%,500px);position:relative;overflow:hidden}.preview-viewport:before{content:"";opacity:.12;background-image:linear-gradient(#ffffff14 1px,#0000 1px),linear-gradient(90deg,#ffffff14 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.preview-glow{filter:blur(35px);opacity:.35;border-radius:50%;position:absolute}.preview-glow.one{background:#7c3aed;width:180px;height:180px;top:12%;right:8%}.preview-glow.two{background:#0d9488;width:220px;height:100px;bottom:8%;left:2%}.preview-viewport>.chat-canvas{z-index:1;position:relative}.obs-card{border:1px solid var(--line);background:#ffffff05;border-radius:17px;grid-template-columns:auto 1fr;gap:15px;margin-top:18px;padding:22px;display:grid}.obs-card>div{min-width:0}.step-number{color:#706d7b;padding-top:3px;font:10px ui-monospace,monospace}.obs-card p{color:var(--muted);margin:6px 0 14px;font-size:11px}.url-field{border:1px solid var(--line);background:#09090c;border-radius:10px;min-width:0;padding:5px;display:flex}.url-field code{color:#817c8b;white-space:nowrap;text-overflow:ellipsis;flex:1;min-width:0;padding:8px;font-size:10px;overflow:hidden}.url-field button{color:#15101e;background:var(--violet);cursor:pointer;border:0;border-radius:7px;padding:0 14px;font-size:10px;font-weight:750}.obs-note{margin-bottom:0!important}.rotate-button{color:#777381;cursor:pointer;background:0 0;border:0;padding:8px 0 0;font-size:10px}.rotate-button:hover{color:#f0edf6}.account-actions{justify-content:space-between;display:flex}.rotate-button.danger:hover{color:#fb7185}footer{border-top:1px solid var(--line);color:#aaa6b4;justify-content:space-between;padding:28px clamp(24px,4vw,64px);font-size:11px;display:flex}.chat-canvas{--font-size:20px;--panel-alpha:.72;--accent:#a78bfa;width:100%;height:100%;font-size:var(--font-size);text-shadow:0 1px 3px #00000080;flex-direction:column;justify-content:flex-end;padding:clamp(14px,4%,32px);line-height:1.42;display:flex;overflow:hidden}.chat-stack{flex-direction:column;gap:.45em;width:100%;display:flex}.direction-top{justify-content:flex-start}.direction-top .chat-stack{flex-direction:column-reverse}.align-right{text-align:right}.font-sans{font-family:Inter,ui-sans-serif,system-ui,sans-serif}.font-rounded{font-family:ui-rounded,SF Pro Rounded,Segoe UI,sans-serif}.font-mono{letter-spacing:-.025em;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}.chat-message{color:#faf9fd;overflow-wrap:anywhere;max-width:100%;animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:both}.motion-slide .chat-message{animation-name:chat-slide}.motion-fade .chat-message{animation-name:chat-fade}.motion-none .chat-message{animation:none}@keyframes chat-slide{0%{opacity:0;transform:translateY(12px)}}@keyframes chat-fade{0%{opacity:0}}.message-line{display:inline}.chat-message strong{letter-spacing:-.015em;font-weight:780}.separator{color:#ffffff8c;margin-right:.28em}.badge{object-fit:contain;vertical-align:-.08em;width:.9em;height:.9em;margin-right:.25em}.badge-fallback{background:var(--accent);vertical-align:.06em;border-radius:2px;width:.52em;height:.52em;margin-right:.3em;display:inline-block;transform:rotate(45deg);box-shadow:0 0 0 2px #ffffff1f}.first-message{border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);color:color-mix(in srgb, var(--accent) 55%, white);text-transform:uppercase;letter-spacing:.06em;vertical-align:.2em;border-radius:999px;margin-right:.45em;padding:.05em .35em;font-size:.48em;font-weight:800;display:inline-block}.emote{object-fit:contain;vertical-align:-.36em;max-width:3em;height:1.45em;margin:0 .08em}.mention{color:#ddd6fe;background:#a78bfa2e;border-radius:.2em;padding:0 .18em}.cheermote{color:color-mix(in srgb, var(--accent) 58%, white);font-weight:800}.reply{color:#ffffff8f;white-space:nowrap;text-overflow:ellipsis;margin-bottom:.18em;font-size:.63em;overflow:hidden}.chat-message time{color:#ffffff73;margin-right:.55em;font:.55em ui-monospace,monospace}.is-action .message-body{font-style:italic}.preset-minimal .chat-message{filter:drop-shadow(0 2px 5px #000c);padding:.18em .3em}.preset-glass .chat-message{background:rgba(15, 13, 20, var(--panel-alpha));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #ffffff1c;border-radius:.7em;width:fit-content;padding:.5em .65em;box-shadow:0 7px 24px #00000029,inset 0 1px #ffffff0f}.align-right.preset-glass .chat-message{align-self:flex-end}.preset-bubble .chat-message{background:rgba(24, 21, 31, var(--panel-alpha));border-radius:1em 1em 1em .28em;width:fit-content;padding:.52em .72em;box-shadow:0 5px 20px #0000002e}.align-right.preset-bubble .chat-message{border-radius:1em 1em .28em;align-self:flex-end}.preset-terminal{color:#d1fae5}.preset-terminal .chat-message{background:rgba(3, 18, 13, var(--panel-alpha));border-left:2px solid var(--accent);padding:.28em .45em}.preset-terminal .separator:before{content:">";color:var(--accent);font-size:var(--font-size);margin:0 .25em}.preset-terminal .separator{margin-right:0;font-size:0}.overlay-status{color:#fff9;background:#0c0b10a6;border-radius:99px;padding:5px 9px;font-size:10px;position:absolute;top:10px;left:50%;transform:translate(-50%)}.overlay-status.error{color:#fecdd3;border:1px solid #fb718540}.device-shell{color:#f7f6fb;background:radial-gradient(circle at 50% 20%,#9146ff2e,#0000 36%),#0b0b0f;min-height:100vh}.device-card{text-align:center;width:min(520px,100% - 32px);margin:0 auto;padding:18vh 0 60px}.device-card h1{margin:14px 0 18px;font-size:clamp(42px,8vw,68px);line-height:.96}.device-card p{color:#bcb8c8;max-width:470px;margin:0 auto 28px;line-height:1.65}.device-code{width:min(360px,100%);color:inherit;cursor:pointer;background:#ffffff12;border:1px solid #ffffff29;border-radius:18px;flex-direction:column;gap:5px;margin:0 auto 18px;padding:22px;display:flex}.device-code:hover,.device-code:focus-visible{border-color:#a970ff;outline:3px solid #a970ff40}.device-code strong{font-family:var(--font-mono);letter-spacing:.12em;font-size:clamp(32px,9vw,48px)}.device-code small,.device-waiting{color:#aaa6b7}.device-card>.button{margin-top:4px;display:inline-flex}.device-waiting{margin-top:24px;display:block}.device-cancel{color:#aaa6b7;width:max-content;margin:18px auto 0;font-size:13px;display:block}.device-cancel:hover,.device-cancel:focus-visible{color:#fff}@media (prefers-reduced-motion:reduce){.chat-message{animation:none!important}*{scroll-behavior:auto!important}}@media (width<=900px){.studio{width:min(100% - 32px,680px);padding-top:45px}.intro{grid-template-columns:1fr;align-items:start;gap:30px}.connection-card{width:100%;min-width:0}.workspace{grid-template-columns:1fr}.preview-stage{min-height:0}}@media (width<=520px){.topbar{padding:0 16px}.brand span{display:none}.topbar nav{gap:14px}.studio{width:calc(100% - 24px);padding-top:32px}h1{font-size:52px}.preset-grid,.toggle-grid{grid-template-columns:1fr}.preview-stage{min-height:0;padding:10px}.obs-card{padding:17px}footer{flex-direction:column;gap:8px}}