/* REGION: LEEWAY.VOICE.STUDIO; TAG: SPATIAL_STUDIO_DESIGN
5WH: Creator-authorized voice interface; existing Studio; responsive control surface;
2026-10; CSS presentation only. ROLES: Studio operator. LICENSE: Existing repository terms. */
:root{color-scheme:dark;--bg:#080d17;--panel:#101725;--input:#0b1220;--ink:#e7edf7;--muted:#91a1ba;--line:#263145;--accent:#54d0ed;--violet:#b398fd;--green:#70dca5;--dock-height:230px;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:radial-gradient(ellipse at 48% -20%,#15263d 0,transparent 55%),var(--bg);color:var(--ink);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body[data-theme=warm]{--accent:#f6ba83;--violet:#f697b3;--bg:#120f12;--panel:#1c191f;--input:#151218;--line:#39303b}body[data-theme=dark]{--accent:#aabbd0;--violet:#94a1b4;--bg:#080a0e;--panel:#12161d;--input:#0c1016}button,input,textarea,select{font:inherit}button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent}button{min-height:40px;padding:9px 13px;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:#ffffff04;cursor:pointer;font-size:12px;font-weight:600;transition:background .15s,border-color .15s}button:hover:not(:disabled){background:#ffffff0b;border-color:var(--accent)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);border-color:var(--accent);color:#07131b;box-shadow:0 0 20px #54d0ed0c}button.interrupt{color:#f3a3b2;border-color:#754351;background:#b8294c0b}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}[hidden]{display:none!important}
#studioMain{max-width:1880px;margin:auto;padding:24px 30px calc(var(--dock-height) + 30px)}.studio-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:22px}.brand{display:flex;align-items:center;gap:13px;color:var(--ink)}.brand:hover{text-decoration:none}.brand-mark{display:grid;place-items:center;width:47px;height:52px;background:#54d0ed0a;border:1px solid #54d0ed30;border-radius:13px;color:var(--accent);font-size:35px}.eyebrow{font-size:9px;font-weight:750;letter-spacing:.18em;color:var(--accent);margin:0 0 6px}.brand .eyebrow{font-size:8px;color:var(--muted);margin:0}h1{font-size:27px;line-height:1.15;letter-spacing:-.05em;margin:3px 0}.title-dot{color:var(--accent)}.brand-caption{font-size:10px;color:var(--muted);letter-spacing:.06em}.studio-header nav{display:flex;gap:28px}.studio-header nav a{font-size:12px;color:var(--muted)}.session-indicator{display:flex;align-items:flex-end;flex-direction:column;gap:5px}.phase-badge{font-size:10px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--line);border-radius:30px;padding:6px 12px;color:var(--muted)}.phase-badge::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:7px}.phase-badge[data-phase=speaking],.phase-badge[data-phase=streaming]{color:var(--green);border-color:#70dca544}.phase-badge[data-phase=generating],.phase-badge[data-phase=preparing]{color:var(--accent)}.phase-badge[data-phase=interrupted],.phase-badge[data-phase=error]{color:#f897ab;border-color:#f897ab44}.status{font-size:12px;padding:10px 14px;margin-bottom:18px;background:#111a2a;border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:6px;overflow-wrap:anywhere}.status.error{border-left-color:#fb98ae;color:#ffc2cf}
.studio-grid{display:grid;grid-template-columns:minmax(235px,.83fr) minmax(420px,2.4fr) minmax(250px,.92fr);gap:18px;align-items:start}.stage-column,.channel-rack{display:grid;gap:18px;min-width:0}.panel{min-width:0;background:linear-gradient(160deg,#ffffff02,transparent 55%),var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.section-title h2{margin:0}h2{font-size:17px;font-weight:650;letter-spacing:-.035em;margin:3px 0 14px}h3{font-size:13px;margin:20px 0 10px}.badge{font:10px ui-monospace,monospace;padding:5px 8px;border:1px solid var(--line);border-radius:6px;color:var(--muted);white-space:nowrap}.hint{font-size:11px;line-height:1.6;color:var(--muted)}.compact{font-size:10px;margin:9px 0 0}.metadata,.source-info{font-size:10px;color:var(--muted);overflow-wrap:anywhere}.metadata{margin:5px 0 15px}.signal-source{font:9px ui-monospace,monospace;color:var(--accent);text-align:right;max-width:145px}label{display:block;font-size:11px;color:var(--muted);margin:15px 0 6px}input:not([type=range]):not([type=checkbox]),textarea,select{width:100%;min-width:0;padding:10px 11px;border:1px solid var(--line);border-radius:7px;background:var(--input);color:var(--ink);font-size:12px}input[type=file]{font-size:10px!important}input::placeholder,textarea::placeholder{color:#687a95}textarea{min-height:112px;resize:vertical;line-height:1.7}select{font-size:11px}.toggle{display:flex;align-items:center;gap:7px;font-size:10px;line-height:1.4}.toggle input{width:15px;height:15px;flex-shrink:0;accent-color:var(--accent)}input[type=range]{width:100%;height:22px;accent-color:var(--accent);cursor:pointer}.preset-toggle{margin:12px 0}.voice-list{display:grid;gap:6px;max-height:600px;overflow-y:auto;padding:2px 4px 2px 2px;scrollbar-width:thin}.voice-group-title{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin:16px 0 4px}.voice-group-title:first-child{margin-top:4px}.voice-card{text-align:left;padding:10px 11px;width:100%;background:#0a111c55;border-color:#25304499;border-radius:8px}.voice-card strong{display:block;font-size:12px;font-weight:600}.voice-card small{display:block;line-height:1.6;font-size:9px;font-weight:400;color:var(--muted);margin-top:4px;overflow-wrap:anywhere}.voice-card[aria-pressed=true]{background:#54d0ed0c;border-color:#54d0ed66;box-shadow:inset 2px 0 var(--accent)}.voice-card[aria-pressed=true] strong{color:var(--accent)}#search{margin-top:15px}details{border-top:1px solid var(--line);margin-top:18px;padding-top:13px}details summary{font-size:11px;font-weight:650;cursor:pointer;min-height:26px}details button{margin-top:10px}.actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.actions button{flex:0 1 auto}.package-actions button{font-size:10px}.library-panel details .hint{font-size:10px}
.scene-wrap{position:relative;height:340px;border:1px solid #293f5b88;border-radius:9px;overflow:hidden;background:radial-gradient(ellipse at 50% 48%,#15274488,#080e1900 65%),#080e18}.scene-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 99%,#80b6ef07 99%);background-size:100% 6px}#webglCanvas{display:block;width:100%;height:100%;touch-action:pan-y}.scene-hud{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;gap:16px;pointer-events:none;font:9px/1.8 ui-monospace,monospace;color:#7c91ae}.scene-hud>div{display:flex;flex-direction:column}.scene-hud strong{font-size:11px;color:#cfdeee;font-weight:500}.scene-hud span strong{font-size:9px;margin-left:5px;color:var(--accent)}.scene-position{text-align:right}.scene-caption{position:absolute;bottom:13px;left:16px;right:16px;display:flex;gap:7px;align-items:center;font:8px ui-monospace,monospace;letter-spacing:.09em;color:#7a8da9;pointer-events:none}.scene-caption>span:last-child{margin-left:auto;letter-spacing:0}.signal-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--accent)}.spectral-rack{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}.spectrum-label{display:flex;justify-content:space-between;font:8px ui-monospace,monospace;color:var(--muted);gap:10px;letter-spacing:.04em}.mic-color{color:var(--violet)}.tts-color{color:var(--accent)}.spectral-rack canvas{width:100%;height:46px;display:block;margin-top:8px;background:#0b122088;border-bottom:1px solid var(--line)}.stage-actions{display:flex;align-items:center;gap:9px;margin-top:16px}.stage-actions button{flex:1;min-height:42px}.stage-actions button:last-child{font-size:10px;flex:.7}.mix-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 26px;margin-top:10px}.slider-control label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}.slider-control output{font:10px ui-monospace,monospace;color:var(--accent)}.slider-control input{height:16px;margin:5px 0}.scene-options{display:flex;align-items:center;gap:16px;margin-top:17px}.scene-options label{margin:0;font-size:10px}.scene-options select{font-size:10px;max-width:180px;padding:6px 10px}
.runtime-panel h2,.shared-panel h2{margin-bottom:16px}.runtime-panel button{font-size:10px}.rack-divider{height:1px;background:var(--line);margin:18px 0}.model-box{margin-top:12px;padding:12px;background:var(--input);border:1px solid var(--line);border-radius:7px}.model-box .hint{font-size:10px;margin-bottom:0}.model-box button{width:100%}progress{width:100%;accent-color:var(--accent);margin-top:10px}.shared-panel{border-color:#32715755}.shared-panel .eyebrow{color:var(--green)}.shared-panel>.primary{background:var(--green);border-color:var(--green);color:#0a2219}.shared-panel>button{width:100%;font-size:10px;margin-top:7px}.binding-readout{margin:12px 0;font:10px/1.6 ui-monospace,monospace}.binding-readout>div{padding:8px 0;border-top:1px solid var(--line)}.binding-readout dt{color:var(--muted);font-size:9px}.binding-readout dd{margin:3px 0 0;overflow-wrap:anywhere;color:var(--green)}.evidence-panel{margin:0;padding-top:20px}.evidence-panel pre{font:9px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted)}.event-list{padding-left:17px;font:9px/1.7 ui-monospace,monospace;color:var(--muted);max-height:160px;overflow:auto}#outputPlayer{display:none}audio{width:100%;height:36px;margin:7px 0}.source-info{line-height:1.7}
.tuning-dock{position:fixed;bottom:0;left:0;right:0;z-index:20;background:#111928f5;backdrop-filter:blur(20px);border-top:1px solid #344259;box-shadow:0 -15px 45px #0004;padding:12px 28px 10px;max-height:42dvh;overflow:auto}.dock-top{display:flex;align-items:center;gap:24px}.dock-selected{flex:0 1 245px;min-width:120px;line-height:1.35}.dock-selected .eyebrow{font-size:8px}.dock-selected strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dock-selected .hint{font-size:9px}.transport{flex:1;display:flex;align-items:center;gap:9px;min-width:0}.play-button{min-width:90px;font-size:13px}.playback-position{display:flex;align-items:center;gap:10px;flex:1;max-width:420px;min-width:0}.playback-position input{min-width:30px}.playback-position output{font:9px ui-monospace,monospace;color:var(--muted);white-space:nowrap}.dock-options{display:flex;align-items:center;gap:13px}.dock-options button{font-size:10px}.dock-options label{margin:0}.dock-tabs{display:flex;gap:5px;align-items:center;margin-top:10px;border-bottom:1px solid var(--line);padding-bottom:6px}.dock-tabs button{font-size:10px;min-height:30px;padding:6px 12px;background:none;border-color:transparent}.dock-tabs button[aria-selected=true]{color:var(--accent);background:#54d0ed0a;border-color:#54d0ed22}.dock-tabs .hint{margin-left:auto;font-size:10px}.dial-strip{display:flex;gap:12px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:thin}.dial-control{flex:1 0 84px;max-width:140px;display:flex;align-items:center;flex-direction:column;gap:5px}.dial-label{font-size:9px;color:var(--muted);margin:0;text-align:center;white-space:nowrap}.rotary{position:relative;width:44px;height:44px;min-height:44px;border-radius:50%;border:2px solid #344259;background:radial-gradient(circle at 32% 23%,#48596d,#152032 70%);box-shadow:0 3px 8px #0008;padding:0;touch-action:none;cursor:ns-resize;user-select:none}.rotary::before{content:'';position:absolute;inset:4px;border:1px solid #ffffff15;border-radius:50%}.rotary::after{content:'';position:absolute;top:4px;left:calc(50% - 1px);width:2px;height:10px;background:var(--accent);border-radius:2px;transform-origin:50% 16px;transform:rotate(var(--angle,-135deg));box-shadow:0 0 5px #54d0ed99}.dial-value{display:flex;align-items:center;gap:3px}.dial-value input[type=number]{width:56px;padding:3px;text-align:center;font:10px ui-monospace,monospace;border-radius:4px}.dial-unit{font-size:9px;color:var(--muted)}.dial-control .hint{display:none}.sr-only{position:absolute!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;width:1px;height:1px;padding:0;margin:-1px;border:0}
@media(min-width:1700px){.scene-wrap{height:410px}.voice-list{max-height:730px}}@media(max-width:1200px){#studioMain{padding:20px 20px calc(var(--dock-height) + 24px)}.studio-grid{grid-template-columns:minmax(220px,.78fr) minmax(400px,2fr)}.channel-rack{grid-column:1/-1;grid-template-columns:1fr 1fr}.evidence-panel{grid-column:1/-1}.dock-top{gap:15px}.dock-selected{flex-basis:170px}.dock-options{gap:8px}.dock-options label{max-width:100px}.studio-header nav{gap:18px}.panel{padding:17px}}@media(max-width:760px){#studioMain{padding:18px 14px 25px}.studio-header{gap:10px;flex-wrap:wrap;align-items:flex-start}.studio-header nav{order:3;flex-basis:100%;gap:25px;margin-top:8px}.studio-header nav a{font-size:11px}.studio-header h1{font-size:24px}.brand-mark{width:40px;height:47px}.session-indicator{max-width:120px;padding-top:3px}.session-indicator .hint{font-size:9px;text-align:right}.phase-badge{font-size:8px;padding:5px 8px}.studio-grid{grid-template-columns:1fr}.stage-column{grid-row:1}.library-panel{grid-row:2}.channel-rack{grid-template-columns:1fr;grid-row:3}.evidence-panel{grid-column:auto}.scene-wrap{height:310px}.voice-list{max-height:390px}.panel{padding:16px}.tuning-dock{position:relative;padding:14px;max-height:none;backdrop-filter:none}.dock-top{flex-wrap:wrap;gap:12px}.dock-selected{flex:1 1 150px}.dock-options{flex:0 1 auto}.transport{order:3;flex-basis:100%}.dock-tabs .hint{display:none}.dock-tabs{margin-top:13px}.dial-strip{gap:7px}.dial-control{flex-basis:87px}.playback-position{max-width:none}.scene-hud{top:12px;left:12px;right:12px}.scene-caption{left:12px;right:12px;font-size:7px}.signal-source{max-width:115px;font-size:8px}.mix-grid{gap:0 18px}.stage-actions{gap:6px}.stage-actions button{font-size:11px;padding:8px}.stage-actions button:last-child{font-size:9px}.spectral-rack{gap:12px}.spectrum-label{font-size:7px}}
@media(max-width:400px){.mix-grid{grid-template-columns:1fr}.scene-wrap{height:280px}.scene-hud{font-size:8px}.scene-hud strong{font-size:10px}.scene-caption>span:last-child{max-width:105px;text-align:right}.spectral-rack{gap:8px}.spectrum-label{letter-spacing:0}.studio-header .brand-caption{font-size:9px}.audition-panel .section-title{align-items:flex-start;flex-direction:column;gap:7px}.stage-actions button{min-height:44px}.transport button{padding:7px}.play-button{min-width:75px}.dock-options{gap:7px}.dock-selected{flex-basis:130px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button{transition:none}}@media(max-height:650px) and (min-width:761px){.tuning-dock{max-height:38dvh}.dock-tabs{margin-top:5px}.dial-strip{padding-top:7px}.tuning-dock{padding-top:8px}.dock-selected .hint{display:none}}

/* Unknown or pending publication is never a green acceptance indicator. */
.hint{overflow-wrap:anywhere}.binding-readout dd{color:var(--muted)}#sharedDelivery{color:#deb973}.shared-panel[data-connected=true] #sharedSpeaker{color:var(--green)}