:root{color-scheme:dark;--paper:#eff1ed;--muted:#949d9e;--line:#ffffff12;--mint:#c4e5cf;--panel:#161b1d}
.capture-setup-toggle{position:fixed;top:16px;right:16px;z-index:4;display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 14px;border:1px solid #91b49f80;border-radius:10px;background:#15201ef5;color:#dceae1;font-size:13px;box-shadow:0 3px 12px #0003;opacity:0;pointer-events:none;transition:opacity .15s}
.capture-setup-toggle.is-visible{opacity:1;pointer-events:auto}.capture-setup-toggle kbd{border:1px solid #577663;padding:1px 5px;border-radius:4px;font:11px ui-monospace,monospace;color:#a6bbae}
@media(prefers-reduced-motion:reduce){.capture-setup-toggle{transition:none}}
.motion-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.motion-actions button{flex:1;min-width:140px;white-space:normal;text-align:center}.motion-actions button:disabled{cursor:default}.motion-actions~.field-note:empty{display:none}
.motion-settings{margin:20px 0;padding:18px 0;border-block:1px solid var(--line)}.motion-label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c4d7cc;font-size:13px}.motion-label select{min-height:40px;max-width:150px;padding:7px 10px;border:1px solid #6a867550;border-radius:8px;background:#121a18;color:var(--paper)}.motion-settings button{width:100%}.motion-label select:disabled,.motion-settings button:disabled{cursor:default}
.demo-badge{position:absolute;top:4%;left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:18px;padding:10px 16px;border:1px solid #f4d87888;border-radius:999px;background:#121b1ff2;color:#f4d878;font:13px/1.2 ui-monospace,SFMono-Regular,monospace;white-space:nowrap;box-shadow:0 3px 12px #0003}.demo-badge span:first-child{font-weight:700;letter-spacing:.08em}.demo-badge span:last-child{color:#d7dfda}.capture-demo{width:100%}
.overlay-triggers{position:absolute;bottom:3%;left:50%;transform:translateX(-50%);display:flex;width:min(380px,calc(100% - 32px));gap:14px;pointer-events:none;z-index:2}
.overlay-trigger{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:9px 10px;padding:10px 14px;border:1px solid #ffffff38;border-radius:10px;background:#0d1418f5;color:#e4ece9;font:24px/1 ui-monospace,SFMono-Regular,monospace;box-shadow:0 3px 12px #0003}
.overlay-trigger>span{grid-area:1/1;font-weight:700;letter-spacing:.02em}
.overlay-trigger.active{color:var(--input-highlight);border-color:var(--input-highlight)}
.overlay-trigger output{grid-area:1/2;min-width:4ch;text-align:right;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.overlay-trigger .trigger-meter{grid-area:2/1/3/3;width:100%;height:8px;background:#ffffff26;border-radius:5px;overflow:hidden}
.trigger-meter-fill{width:100%;height:100%;background:var(--input-highlight);border-radius:inherit;transform:scaleX(0);transform-origin:left center}
@media(max-width:480px){.overlay-triggers{gap:10px}.overlay-trigger{padding:8px 10px;gap:7px 8px;font-size:18px}.overlay-trigger output{font-size:14px}.overlay-trigger .trigger-meter{height:6px}}
*{box-sizing:border-box}body{margin:0;font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--paper)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:4px}[hidden]{display:none!important}button svg{height:18px;width:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.streamer-setup{background:#101416;background-image:radial-gradient(ellipse at 16% 26%,#20332b55,transparent 44%)}.streamer-shell{max-width:1420px;margin:auto;padding:0 48px}.streamer-header{height:85px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.studio-link .studio-logo{display:block;width:56px;height:56px;flex-shrink:0;object-fit:contain;border-radius:10px}.studio-link{font-size:24px;display:flex;align-items:center;gap:24px;letter-spacing:2px}.studio-link span,.eyebrow,.mode-tag,.preview-footer>span,.guide-badge{font:10px/1.5 ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em}.studio-link span{border-left:1px solid #ffffff2a;padding-left:24px;color:#a6afae;letter-spacing:.16em}.back-link{color:#b0b9b8;font-size:12px}.back-link span{margin-left:20px}.streamer-intro{display:flex;justify-content:space-between;align-items:flex-end;margin:42px 0 30px}.eyebrow{color:var(--mint);display:flex;align-items:center;gap:9px}.signal-dot{width:6px;height:6px;background:var(--mint);box-shadow:0 0 14px #a5ffc877;border-radius:50%}h1{font-size:clamp(38px,4.4vw,62px);line-height:1.04;font-weight:500;letter-spacing:-2.5px;margin:18px 0}h1 span{color:#8d9e98}.streamer-intro p:last-child{color:#9eaaa6;font-size:14px;margin:20px 0 0}.mode-tag{padding-bottom:6px;color:#84948c;white-space:nowrap}.mode-tag span{margin-left:18px;border:1px solid #5b6d643d;padding:6px 9px;border-radius:5px;color:var(--mint)}
.streamer-workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}.preview-panel{border:1px solid #b9d4c11d;border-radius:18px;overflow:hidden;background:#111619}.preview-heading{padding:21px 24px;display:flex;gap:16px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap}.preview-heading .eyebrow{color:#83948e}.connection-status{color:#92a49a;font-size:12px;display:flex;gap:7px;align-items:center}.connection-status:before{content:'';width:5px;height:5px;border-radius:50%;background:#677b71;flex-shrink:0}.connection-status[data-connected=true]{color:var(--mint)}.connection-status[data-connected=true]:before{background:var(--mint);box-shadow:0 0 10px #c4e5cf66}.preview-stage{position:relative;width:100%;aspect-ratio:4/3;max-height:550px;isolation:isolate}.checker{background-color:#141b1a;background-image:conic-gradient(#1c2422 25%,transparent 0 50%,#1c2422 0 75%,transparent 0);background-size:24px 24px}.preview-stage canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.preview-corner{position:absolute;width:22px;height:22px;border-color:#81978b42;border-style:solid;pointer-events:none}.top-left{top:23px;left:23px;border-width:1px 0 0 1px}.bottom-right{bottom:23px;right:23px;border-width:0 1px 1px 0}.model-loading{position:absolute;inset:45% 20px auto;text-align:center;color:#b6c8bf;font-size:13px}.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;padding:18px 24px;border-top:1px solid var(--line);flex-wrap:wrap}.preview-footer>span{font-size:11px;color:#9bafa3}.preview-demo button{background:#c4e5cf12;border:1px solid #a8c5b24d;font-size:13px;padding:10px 16px;color:#d3e7da;display:flex;gap:8px;align-items:center;min-height:44px;font-weight:600;justify-content:center;border-radius:9px}.preview-demo button[aria-pressed=true]{color:#ffe0a5}.input-strip{display:flex;justify-content:space-between;align-items:center;padding:0;gap:10px;font:12px ui-monospace,monospace;color:#9bafa3;flex:1;min-width:0}.input-strip>span{display:flex;align-items:center;gap:8px}.input-strip meter{width:48px;height:4px;appearance:none;background:#28332e;border:0;border-radius:3px;overflow:hidden}.input-strip meter::-webkit-meter-bar{background:#28332e;border:0;height:4px}.input-strip meter::-webkit-meter-optimum-value{background:var(--mint)}#preview-input{color:#b0c1b8;margin-inline:auto;text-align:center}
.settings-panel{background:#1b2223aa;border:1px solid #b9d4c11d;border-radius:18px;padding:26px}.settings-heading{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:30px}h2{font-size:19px;font-weight:500;letter-spacing:-.55px;margin:0}.text-button{font-size:12px;background:transparent;border:0;color:#92a19b;text-decoration:underline;text-underline-offset:3px;padding:0}.settings-panel fieldset{border:0;padding:0;margin:0 0 26px;min-width:0}.settings-panel legend{padding:0 0 12px;font:9px ui-monospace,monospace;color:#6a8276}.settings-panel legend span{font:13px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#c4ceca;margin-left:9px}.segmented{display:flex;padding:4px;border-radius:9px;background:#101617;border:1px solid #ffffff08}.segmented label{flex:1;text-align:center;position:relative;cursor:pointer}.segmented input,.background-options input{position:absolute;opacity:0;width:1px;height:1px}.segmented span{display:block;font-size:13px;padding:10px 3px;color:#8b9b94;border-radius:6px}.segmented input:checked+span{background:#303e37;color:#e2f2e8;box-shadow:0 2px 5px #0002}.segmented input:focus-visible+span,.background-options input:focus-visible+span{outline:2px solid var(--mint);outline-offset:3px}.range-label{display:flex;justify-content:space-between;color:#91a197;font-size:13px;margin:17px 0 9px}.range-label output{font:12px ui-monospace,monospace;color:#c4d9cc}input[type=range]{width:100%;height:4px;accent-color:var(--mint);display:block;margin:12px 0 0;cursor:pointer}.color-options{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.color-options label{display:flex;flex-direction:column;align-items:center;gap:9px;background:#12191a;border:1px solid #ffffff09;padding:14px 0 10px;border-radius:10px;font-size:12px;color:#9badA3}.color-options input[type=color]{width:30px;height:30px;background:transparent;padding:0;border:0;cursor:pointer;border-radius:50%}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:1px solid #ffffff26;border-radius:50%}input[type=color]::-moz-color-swatch{border-radius:50%;border:1px solid #ffffff26}.field-note{font-size:12px;line-height:1.6;color:#9bafa3;margin:12px 0 0}.background-options{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.background-options label{position:relative;cursor:pointer}.background-options span{border:1px solid #ffffff0d;background:#12191a;border-radius:8px;display:flex;flex-direction:column;gap:7px;align-items:center;padding:10px 2px 8px;font-size:12px;color:#94a79c}.background-options i{width:19px;height:19px;border-radius:4px;border:1px solid #ffffff18;background-size:10px 10px}.background-options input:checked+span{border-color:#a7cbb07a;color:#d4e7db;background:#2a393166}.custom-background{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px;color:#a3b4aa}.custom-background input{width:30px;height:30px;flex-shrink:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}.controller-slot{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#90a599}.controller-slot select{max-width:155px;background:#121a18;color:#c4d7ca;border:1px solid #465e4f;border-radius:6px;font-size:12px;padding:6px}
.export-panel{min-width:0;border:1px solid #afc6b523;background:linear-gradient(110deg,#23312a99,#19222288);border-radius:16px;padding:28px 30px}.export-copy .eyebrow{font-size:9px;color:#8eab99;margin:0 0 10px}.export-copy h2{font-size:25px}.export-copy>p:last-child{color:#97ac9e;font-size:13px;margin:8px 0 0}.export-actions{display:grid;gap:20px;margin-top:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:8px;font-size:14px;font-weight:600;border:1px solid transparent;white-space:nowrap;min-height:48px}.primary-button{background:var(--mint);color:#1a2c20;box-shadow:inset 0 1px #effff499}.primary-button:hover{background:#d7f1df}.secondary-button{color:#c2d4c8;background:#1a2520;border-color:#6a867550}.secondary-button:hover{background:#293a31}.export-status{grid-column:1/-1;margin:0;color:var(--mint);font-size:13px}.export-status:not(:empty){margin-top:18px}.overlay-url-label{grid-column:1/-1;margin-top:20px;color:#809b8a;font-size:12px;display:flex;align-items:center;gap:14px}.overlay-url-label input{flex:1;min-width:0;background:#0f1915;border:1px solid #8ba59723;border-radius:6px;color:#88a895;padding:9px 12px;font:12px ui-monospace,monospace}.setup-guide{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:40px 6px 35px}.setup-guide article{display:flex;gap:17px}.guide-number{border:1px solid #94b0a13b;width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex-shrink:0;font:12px ui-monospace,monospace;color:#a1b6aa}.setup-guide h3{font-size:16px;font-weight:500;margin:4px 0 14px}.guide-badge{font-size:12px;letter-spacing:.05em;color:#84a48e;white-space:normal;display:block;margin:7px 0 0}.setup-guide ol{padding-left:16px;color:#a2b6a9;font-size:13px;line-height:1.85;margin:0}.setup-guide li{padding-left:3px;margin-bottom:7px}.setup-guide strong{font-weight:500;color:#c3d4c9}.setup-guide p{font-size:12px;line-height:1.8;color:#94aa9c}.streamer-footer{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:22px 0 28px;color:#73837a;font-size:9px}.streamer-footer a{text-decoration:underline;text-underline-offset:2px}
.streamer-overlay{background:transparent!important;overflow:hidden;display:flex;align-items:center;height:100vh;height:100dvh}
html:has(.streamer-overlay){background:transparent}
.streamer-overlay #capture-stage{position:relative;flex:1;min-width:0;min-height:0;height:100%}
.streamer-overlay canvas{display:block;width:100%;height:100%;outline:none;cursor:none}
.capture-setup{position:relative;z-index:5;flex:0 0 400px;margin:16px 16px 16px 0;background:#15201ef5;border:1px solid #a9c9b548;box-shadow:0 22px 100px #0006;backdrop-filter:blur(20px);border-radius:16px;padding:24px;max-height:calc(100% - 32px);overflow:auto}
.capture-setup h1{font-size:31px;letter-spacing:-1px}.capture-setup p{color:#a6bbae;font-size:12px;line-height:1.65}.capture-setup .eyebrow{font-size:9px;color:var(--mint)}.capture-setup .connection-status{font-size:12px}.capture-actions{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}.capture-setup a{font-size:11px;color:var(--mint);text-decoration:underline;text-underline-offset:3px}.capture-setup kbd{border:1px solid #577663;padding:2px 5px;border-radius:4px;font-size:10px}
.capture-obs-guide{margin:20px 0;padding:18px 0;border-block:1px solid var(--line)}
.capture-obs-guide h2{font-size:17px;letter-spacing:-.3px}
.capture-obs-guide ol{margin:14px 0 0;padding-left:20px;color:#a6bbae;font-size:12px;line-height:1.65}
.capture-obs-guide li{padding-left:4px}.capture-obs-guide li+li{margin-top:14px}
.capture-obs-guide li::marker{color:var(--mint);font-weight:600}
.capture-obs-guide strong{display:block;color:var(--paper);font-size:13px;font-weight:600}
.capture-obs-guide span{display:block;margin-top:4px}.capture-obs-guide b{color:var(--paper);font-weight:600}
@media(max-width:760px){
  .streamer-overlay{flex-direction:column}
  .streamer-overlay #capture-stage{width:100%}
  .capture-setup{flex:0 0 auto;width:calc(100% - 24px);max-height:55%;margin:0 12px 12px;padding:20px}
}
@media(min-width:1500px){.streamer-intro{margin-top:50px}.streamer-workspace{grid-template-columns:minmax(0,1fr) 360px}.preview-stage{aspect-ratio:1.7}}
@media(max-width:1000px){.streamer-shell{padding:0 26px}.streamer-workspace{grid-template-columns:minmax(0,1fr) 295px;gap:16px}.settings-panel{padding:21px}.preview-stage{aspect-ratio:1;min-height:365px}.preview-heading{align-items:center;flex-direction:row;gap:16px;padding:18px;flex-wrap:wrap}.preview-footer{padding:16px}.export-panel{padding:25px}.export-actions{justify-content:flex-start;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}.setup-guide{gap:28px}.guide-badge{display:block;margin:7px 0 0;font-size:12px;white-space:normal}.preview-footer>span{font-size:11px;color:#9bafa3}}
@media(max-width:720px){.streamer-shell{padding:0 20px}.streamer-header{height:72px}.studio-link .studio-logo{width:44px;height:44px}.studio-link{font-size:22px;gap:12px}.studio-link span{font-size:8px;letter-spacing:.1em;padding-left:12px}.back-link{font-size:10px}.back-link span{margin-left:5px}.streamer-intro{margin:30px 0 25px}.streamer-intro .eyebrow{font-size:9px}.streamer-intro p:last-child{font-size:12px;max-width:300px}.mode-tag{display:none}h1{font-size:44px;letter-spacing:-2px}.streamer-workspace{grid-template-columns:1fr}.preview-heading{flex-direction:row;align-items:center;padding:16px;flex-wrap:wrap;gap:16px}.preview-stage{aspect-ratio:4/3;min-height:0}.preview-footer{padding:15px 16px}.settings-panel{padding:23px}.settings-heading{margin-bottom:24px}.settings-panel fieldset{margin-bottom:25px}.color-options label{flex-direction:row;justify-content:center;padding:14px 8px;font-size:12px}.settings-panel input[type=range]{height:7px;margin-top:15px}.settings-panel legend{padding-bottom:14px}.background-options span{flex-direction:row;justify-content:center;gap:7px;padding:13px 3px;font-size:12px}.segmented span{padding:10px 3px;font-size:13px}.export-panel{padding:23px}.export-actions{flex-direction:column;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:20px}.overlay-url-label{display:block;font-size:12px}.overlay-url-label input{display:block;width:100%;margin-top:8px;font:12px ui-monospace,monospace}.setup-guide{grid-template-columns:1fr;gap:24px;padding-top:30px}.guide-badge{display:block;font-size:12px;margin:7px 0 0;white-space:normal}.streamer-footer{font-size:9px;line-height:1.8}.capture-actions{flex-wrap:wrap}}

.camera-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}.custom-camera{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0 0 16px;margin-top:16px}.streamer-setup #streamer-canvas,.streamer-overlay #streamer-canvas{touch-action:none;cursor:grab}.streamer-setup #streamer-canvas.rotating,.streamer-overlay #streamer-canvas.rotating{cursor:grabbing}.capture-setup .export-status{overflow-wrap:anywhere;font-size:13px}

.meter-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line);color:#c4ceca;font-size:13px;cursor:pointer}.meter-toggle input{appearance:none;flex-shrink:0;position:relative;width:34px;height:20px;margin:0;background:#303b36;border:1px solid #738c7f66;border-radius:999px;cursor:pointer}.meter-toggle input::after{content:"";position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#b9c8c0}.meter-toggle input:checked{background:var(--mint);border-color:var(--mint)}.meter-toggle input:checked::after{left:17px;background:#1a2c20}.capture-setup .meter-toggle{margin-bottom:16px;font-size:13px}

.camera-auto .camera-tooltip{position:absolute;z-index:5;bottom:calc(100% + 9px);left:0;width:min(290px,calc(100vw - 100px));padding:14px 16px;border:1px solid #79968866;border-radius:10px;background:#15201c;color:#c4d7cc;box-shadow:0 10px 32px #0006;font-size:12px;line-height:1.55;text-align:left;cursor:default;visibility:hidden;opacity:0}.camera-tooltip::after{content:"";position:absolute;left:0;top:100%;width:100%;height:10px}.camera-tooltip strong{display:block;margin-bottom:6px;color:var(--paper);font-size:12px;font-weight:600}.camera-auto:is(:hover,:focus-within):not([data-tooltip-dismissed]) .camera-tooltip{visibility:visible;opacity:1}

.highlight-color{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:#c4d7cc}.highlight-color input{width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer}.range-ends{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:#80958a}.highlight-preview{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;margin-top:16px;padding:11px 13px;border:1px solid #97b7a350;border-radius:9px;background:#b7d8c00b;color:#d1e4d7;font-size:13px}.highlight-preview:hover{background:#b7d8c017}

@media(min-width:721px){.preview-panel{position:sticky;top:18px}.preview-stage{max-height:calc(100dvh - 200px)}}

/* Support sits beside the OBS controls, with locally served button artwork. */
.streamer-export{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;margin-top:24px}
.streamer-export:has(.export-support[hidden]){grid-template-columns:1fr}
.export-support{min-width:0;padding:28px 26px;border:1px solid #afc6b523;border-radius:16px;background:linear-gradient(145deg,#25302b80,#171e1c);text-align:center}
.export-support .eyebrow{justify-content:center;font-size:9px;color:#8eab99;margin:0 0 10px}
.export-support h2{font-size:20px}
.support-description{color:#97ac9e;font-size:13px;line-height:1.65;margin:10px 0 22px}
.export-support-options{display:flex;flex-direction:column;align-items:center;gap:17px}
.export-support-options>div{width:212px;max-width:100%}
.export-support-options small{display:block;margin-top:8px;color:#93a49a;font-size:12px}
.coffee-button{display:flex;border-radius:9px;background:#ffdd00;transition:box-shadow .15s ease}
.coffee-button img{display:block;width:100%;height:auto}
.coffee-button:hover{box-shadow:0 0 0 3px #ffdd0026}
.coffee-button:focus-visible{outline-color:#ffdd00}
.support-note{margin:23px 0 0;color:#93a49a;font-size:12px;line-height:1.5}
@media(min-width:1500px){.streamer-export{grid-template-columns:minmax(0,1fr) 360px}}
@media(max-width:1000px){.streamer-export{grid-template-columns:minmax(0,1fr) 295px;gap:16px}.export-support{padding:25px 21px}}
@media(max-width:720px){.streamer-export{grid-template-columns:1fr}.export-support{padding:25px 23px}.support-description{max-width:280px;margin-left:auto;margin-right:auto;font-size:13px}}

.settings-panel .settings-heading{margin-bottom:20px}
.settings-tabs{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:3px;margin-bottom:14px;padding:4px;border:1px solid #ffffff0c;border-radius:10px;background:#101617}
.settings-tabs button{min-width:0;min-height:40px;padding:9px 4px;border:0;border-radius:7px;background:transparent;color:#91a39a;font-size:13px;font-weight:500}
.settings-tabs button:hover{color:#e2f2e8;background:#23342c}
.settings-tabs button[aria-selected=true]{background:#c4e5cf;color:#1a2c20;box-shadow:0 2px 5px #0002}
.settings-tabs button:focus-visible{outline-offset:2px}
.settings-subtabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;margin:0 0 24px;border-bottom:1px solid var(--line)}
.settings-subtabs button{min-width:0;min-height:40px;padding:8px 0 10px;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;color:#91a39a;font-size:13px;font-weight:500}
.settings-subtabs button:hover{color:#e2f2e8}
.settings-subtabs button[aria-selected=true]{border-bottom-color:var(--mint);color:var(--mint)}
.settings-subtabs button:focus-visible{outline-offset:2px;border-radius:3px}
.settings-tabpanel,.settings-subpanel{min-width:0}
.settings-tabpanel legend span{margin-left:0}
.settings-tabpanel fieldset:last-child{margin-bottom:0}
.settings-tabpanel .trigger-meter-settings .meter-toggle{margin:0;padding:0;border:0;font-size:13px}
.settings-panel .controller-slot{margin-top:24px;font-size:13px}

.settings-description{margin:0 0 22px;color:#97ac9e;font-size:13px;line-height:1.65}


/* Keep the demo visible before users connect a controller. */
.streamer-help{display:grid;grid-template-columns:1fr 1.5fr;gap:48px;border-top:1px solid var(--line);padding:36px 6px 42px;margin-top:8px}
.streamer-help-intro .eyebrow{color:#a0beaa;font-size:12px;margin:0 0 16px}
.streamer-help-intro h2{font-size:clamp(24px,3vw,30px);line-height:1.2;letter-spacing:-.8px;margin:0 0 14px}
.streamer-help p:not(.eyebrow){color:#a2b6a9;font-size:14px;line-height:1.75;margin:0}
.streamer-help-answers{min-width:0}
.streamer-help details{border-bottom:1px solid var(--line)}
.streamer-help summary{position:relative;list-style:none;cursor:pointer;padding:18px 30px 18px 0;font-size:14px;line-height:1.5;color:#e0eae3}
.streamer-help summary::-webkit-details-marker{display:none}
.streamer-help summary::after{content:'+';position:absolute;right:3px;top:17px;color:var(--mint);font-size:20px;line-height:1}
.streamer-help details[open] summary::after{content:'−'}
.streamer-help details p{padding:0 24px 18px 0}
.streamer-help a,.streamer-noscript a{color:var(--mint);text-decoration:underline;text-underline-offset:3px}
.streamer-help summary:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:3px}
.streamer-help p.contact-note{margin-top:22px}
.capture-setup p.contact-note{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:14px}
.contact-note a{color:var(--mint);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.contact-note a:hover{color:#fff}
.contact-note a:focus-visible{outline:2px solid var(--mint);outline-offset:4px;border-radius:2px}
.streamer-noscript{padding:16px;border:1px solid var(--line);border-radius:10px;color:#a2b6a9;font-size:14px;line-height:1.7}
@media(max-width:720px){.streamer-help{grid-template-columns:1fr;gap:18px;padding:30px 0}.streamer-help-intro{max-width:480px}}
.preview-summary{display:flex;flex-direction:column;gap:8px;min-width:0}
.preview-demo{display:flex;flex-direction:column;align-items:center;gap:6px;margin-left:auto}
.preview-demo>span{font-size:12px;color:#9bafa3}
.preview-demo button:hover:not(:disabled){background:#c4e5cf24;border-color:#a8c5b280}
.preview-demo button:disabled{cursor:default}
.export-option{min-width:0}
.export-option>.primary-button,.export-option>.secondary-button{width:100%;white-space:normal;text-align:center}
.export-option>p{font-size:12px;line-height:1.6;color:#9bafa3;margin:9px 0 0}
#streamer-arrows{font-size:13px}
#streamer-arrows .arrow-auto,#streamer-arrows .arrow-note,#streamer-arrows .arrow-error{font-size:12px}
#streamer-arrows input[type=text]{font-size:12px}
#streamer-arrows .arrow-preview{font-size:13px}
@media(max-width:1000px){.preview-footer .input-strip{flex-basis:100%}}
@media(max-width:480px){.preview-demo{align-items:flex-start;margin-left:0}.preview-demo button{min-width:128px}}

.copy-toast{position:fixed;z-index:20;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);color:var(--mint);font-size:14px;font-weight:500;line-height:1.5;pointer-events:none}
.copy-toast:not(:empty){display:flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid #a8c5b25c;border-radius:12px;background:#1a2c24;box-shadow:0 8px 32px #0005;animation:copy-toast-in .18s ease-out}
.copy-toast:not(:empty)::before{content:'';flex-shrink:0;width:11px;height:6px;margin-top:-3px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.streamer-overlay:has(.capture-setup[hidden]) .copy-toast{display:none}
@keyframes copy-toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.copy-toast:not(:empty){animation:none}}