:root {
  color-scheme: dark;
  --line: rgba(255,255,255,.17); --line-strong: rgba(255,255,255,.52);
  --panel: rgba(2,2,3,.88); --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.46);
  --off: rgba(255,255,255,.17); --accent: rgba(255,255,255,.96);
}
* { box-sizing: border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#000; }
body { color:var(--text); font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace; font-size:11px; letter-spacing:.075em; user-select:none; }
button,input,select { font:inherit; } button,select { letter-spacing:.055em; }
#stage { display:block; width:100%; height:100%; outline:none; background:#000; }
.fallback { position:fixed; inset:0; display:grid; place-items:center; padding:10vw; background:#000; color:#fff; font-size:14px; text-align:center; }
.fallback[hidden] { display:none; }

.showcase-welcome { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 50% 44%,rgba(20,23,30,.72),rgba(0,0,0,.94) 58%,#000); color:#fff; text-align:center; }
.showcase-welcome[hidden] { display:none; }
.showcase-welcome-inner { width:min(760px,92vw); padding:clamp(30px,7vw,76px) clamp(22px,6vw,64px); border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.44); backdrop-filter:blur(15px); }
.showcase-welcome p:first-child { margin:0 0 26px; color:rgba(255,255,255,.62); font-size:10px; letter-spacing:.56em; }
.showcase-welcome h1 { margin:0; font-size:clamp(40px,8vw,104px); font-weight:300; letter-spacing:.18em; text-indent:.18em; }
.showcase-welcome h2 { margin:20px 0 0; color:rgba(255,255,255,.62); font-size:clamp(8px,1.3vw,12px); font-weight:400; letter-spacing:.3em; }
.showcase-intro { max-width:570px; margin:32px auto!important; color:rgba(255,255,255,.72)!important; font-size:11px!important; line-height:1.9; letter-spacing:.09em!important; }
.showcase-welcome-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:530px; margin:0 auto 24px; }
.showcase-welcome button,.showcase-toolbar button { min-height:42px; padding:0 15px; border:1px solid rgba(255,255,255,.38); background:rgba(255,255,255,.04); color:#fff; }
.showcase-welcome button:hover,.showcase-toolbar button:hover { border-color:#fff; background:rgba(255,255,255,.1); }
.showcase-welcome small { color:rgba(255,255,255,.34); font-size:7px; letter-spacing:.18em; }
.showcase-toolbar { position:fixed; z-index:35; top:154px; left:50%; display:flex; gap:6px; transform:translateX(-50%); }
.showcase-toolbar[hidden] { display:none; }
.showcase-toolbar button { min-height:30px; padding:0 10px; background:rgba(0,0,0,.72); font-size:7px; backdrop-filter:blur(12px); }
body.hud-hidden .showcase-toolbar,body.hud-hidden .help { display:none; }
body.showcase .audio-meter,body.showcase .audio-status,body.showcase .record-status,body.showcase .bridge-only { display:none!important; }
body.showcase .status-line { top:91px; }

.scene-inspector { position:fixed; z-index:29; top:17px; left:17px; width:min(390px,calc(100vw - 34px)); max-height:calc(100vh - 34px); overflow:auto; padding:14px; border:1px solid var(--line-strong); background:var(--panel); backdrop-filter:blur(14px); transform:translateX(calc(-100% - 24px)); opacity:0; pointer-events:none; transition:transform 180ms ease,opacity 180ms ease; }
.scene-inspector.visible { transform:translateX(0); opacity:1; pointer-events:auto; }
.scene-inspector[data-display-mode="hidden"] { display:none; }
.scene-inspector>header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:11px; border-bottom:1px solid var(--line); }
.scene-inspector>header strong,.scene-inspector>header span { display:block; }
.scene-inspector>header strong { font-size:12px; letter-spacing:.18em; }
.scene-inspector>header span { margin-top:5px; color:var(--muted); font-size:7px; }
.scene-inspector>header button { width:26px; height:26px; border:1px solid var(--line); background:#000; color:var(--text); }
.scene-inspector-tabs { display:grid; grid-template-columns:1fr 1fr 72px; gap:6px; margin:12px 0; }
.scene-inspector-tabs button { min-width:0; overflow:hidden; padding:8px; border:1px solid var(--line); background:#050505; color:var(--muted); text-overflow:ellipsis; white-space:nowrap; }
.scene-inspector-tabs button.active { border-color:var(--line-strong); color:var(--text); background:#161616; }
.scene-inspector h2 { margin:0 0 12px; font-size:11px; letter-spacing:.13em; }
.scene-inspector-page { margin:0 0 12px; padding:10px; border:1px solid var(--line); background:rgba(0,0,0,.32); }
.scene-inspector-page h3 { margin:0 0 9px; color:var(--muted); font-size:8px; letter-spacing:.16em; }
.scene-inspector-control { display:grid; grid-template-columns:106px minmax(80px,1fr) 70px 24px; align-items:center; gap:7px; min-height:29px; color:var(--muted); font-size:8px; }
.scene-inspector-control input[type="range"] { width:100%; min-width:0; padding:0; touch-action:none; }
.scene-inspector-control select { position:relative; z-index:1; width:100%; min-width:0; padding:5px 3px; border:1px solid var(--line); background:#050505; color:var(--text); font-size:8px; cursor:pointer; pointer-events:auto; }
.scene-inspector-control output { color:rgba(255,255,255,.34); text-align:right; }
.scene-inspector-control.override-active>span,.scene-inspector-control.override-active output { color:var(--text); }
.scene-inspector-control.override-active>span::before { content:"• "; }
.scene-inspector-empty { margin:20px 4px; color:var(--muted); line-height:1.7; font-size:9px; }
.scene-inspector-reset { width:100%; padding:9px; border:1px solid var(--line); background:#080808; color:var(--text); }
.scene-inspector-reset:disabled { opacity:.3; }
body[data-mode="performance"] .scene-inspector:not(.visible) { display:none; }
.scene-detail-target { display:grid; grid-template-columns:55px 1fr; align-items:center; gap:8px; margin-top:11px; color:var(--muted); font-size:8px; letter-spacing:.12em; }
.scene-detail-target select { padding:6px; border:1px solid var(--line); background:#050505; color:var(--text); }
.scene-detail-output { margin:0 0 10px; padding:7px; border:1px solid var(--line); color:var(--muted); font-size:7px; letter-spacing:.08em; }
.scene-detail-slot-heading { margin-top:14px!important; padding-bottom:6px; border-bottom:1px solid var(--line); }
.scene-detail-param-reset { width:24px; height:22px; padding:0; border:1px solid var(--line); background:#050505; color:var(--text); }
.scene-detail-param-reset:disabled { opacity:.2; }
.scene-detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.scene-detail-actions button { padding:8px; border:1px solid var(--line); background:#080808; color:var(--text); font-size:8px; }
.scene-inspector.compact { width:300px; }
.scene-inspector.compact .scene-inspector-page { padding:7px; }
.scene-inspector.compact .scene-inspector-control { grid-template-columns:88px minmax(62px,1fr) 52px 22px; }
.scene-inspector.pinned { border-color:rgba(255,255,255,.55); }

.title-card { position:fixed; inset:0; z-index:20; display:grid; place-content:center; text-align:center; background:#000; color:#fff; pointer-events:none; }
.title-card[hidden] { display:none; }
.title-card p { margin:30px 0 12px; font-size:13px; letter-spacing:.58em; }
.title-card h1 { margin:0; font-size:clamp(36px,6vw,98px); font-weight:400; letter-spacing:.25em; }
.title-card span { margin-top:22px; color:rgba(255,255,255,.52); font-size:9px; letter-spacing:.24em; }
.title-mark { width:min(48vw,520px); height:80px; margin:auto; position:relative; }
.title-mark i { position:absolute; top:50%; width:38%; height:1px; background:#fff; transform-origin:center; }
.title-mark i:nth-child(1){left:0;transform:rotate(9deg)} .title-mark i:nth-child(2){left:16%;transform:rotate(-13deg)}
.title-mark i:nth-child(3){right:16%;transform:rotate(13deg)} .title-mark i:nth-child(4){right:0;transform:rotate(-9deg)}

.calibration { position:fixed; inset:0; z-index:19; pointer-events:none; color:#fff; }
.calibration[hidden] { display:none; }
.calibration-grid { position:absolute; inset:5%; border:1px solid #fff; background-image:linear-gradient(rgba(255,255,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.22) 1px,transparent 1px); background-size:10% 10%; }
.calibration-grid::before,.calibration-grid::after { content:""; position:absolute; inset:5%; border:1px solid rgba(255,255,255,.52); }
.calibration-grid::after { inset:10%; border-style:dashed; }
.calibration-center { position:absolute; left:50%; top:50%; width:80px; height:80px; border:1px solid #fff; border-radius:50%; transform:translate(-50%,-50%); }
.calibration-center::before,.calibration-center::after { content:""; position:absolute; background:#fff; }
.calibration-center::before { left:50%; top:-30px; bottom:-30px; width:1px; } .calibration-center::after { top:50%; left:-30px; right:-30px; height:1px; }
.calibration-label { position:absolute; font-size:9px; letter-spacing:.18em; } .calibration-label-a{left:6%;top:3%}.calibration-label-b{right:6%;bottom:3%}

.hud { position:fixed; inset:0; pointer-events:none; transition:opacity 160ms ease; z-index:5; }
.hud.hidden { opacity:0; }
.hud-header,.hud-footer,.status-line { position:absolute; left:22px; right:22px; display:flex; justify-content:space-between; align-items:center; text-shadow:0 0 12px rgba(0,0,0,.95); }
.hud-header { top:20px; border-top:1px solid var(--line-strong); padding-top:10px; gap:18px; }
.identity { flex:1 1 auto; min-width:150px; }.identity strong{display:block;font-size:15px;letter-spacing:.28em}.identity span{display:block;margin-top:5px;color:var(--muted);font-size:8px}
.movement-readout { min-width:180px; text-align:center; }.movement-readout b,.movement-readout span{display:block}.movement-readout b{font-size:10px;letter-spacing:.15em}.movement-readout span{margin-top:5px;color:var(--muted);font-size:8px}
.mixer-readout { width:min(39vw,430px); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; text-align:center; font-size:8px; }
.mixer-readout small { grid-column:1/-1; color:var(--muted); font-size:8px; }
.mixer-mini-track { position:relative; height:1px; background:rgba(255,255,255,.35); }.mixer-mini-track i{position:absolute;top:50%;left:0;width:8px;height:15px;border:1px solid #fff;background:#000;transform:translate(-50%,-50%)}
.mode-label{border:1px solid var(--line);padding:7px 9px;min-width:96px;text-align:center}
.status-line{top:91px;justify-content:flex-start;gap:20px;color:var(--muted);font-size:8px}.status-line>span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--off)}.dot[data-state="ok"]{background:#fff;box-shadow:0 0 8px rgba(255,255,255,.85)}.dot[data-state="active"]{background:#fff;box-shadow:0 0 14px #fff;animation:recordPulse 700ms steps(2,end) infinite}.dot[data-state="pending"]{animation:pulse 1s steps(2,end) infinite}
@keyframes pulse{50%{opacity:.22}}@keyframes recordPulse{50%{opacity:.15}}
.audio-meter{position:absolute;top:116px;left:22px;display:flex;gap:10px;color:rgba(255,255,255,.32);font-size:8px}.audio-meter label{display:grid;grid-template-columns:29px 64px;align-items:center;gap:5px}.audio-meter i{display:block;width:64px;height:2px;background:rgba(255,255,255,.1);overflow:hidden}.audio-meter i::after{content:"";display:block;width:calc(var(--level,0)*100%);height:100%;background:rgba(255,255,255,.72)}
.transition-track{position:absolute;left:22px;right:22px;top:140px;height:1px;background:rgba(255,255,255,.07)}.transition-track i{display:block;width:calc(var(--progress,1)*100%);height:1px;background:rgba(255,255,255,.48);transition:width 50ms linear}
.hud-footer{bottom:19px;border-bottom:1px solid var(--line-strong);padding-bottom:10px;color:var(--muted)}
.message{position:absolute;left:50%;top:16%;transform:translateX(-50%);padding:7px 10px;border:1px solid var(--line);background:rgba(0,0,0,.82);max-width:min(760px,86vw);text-align:center}

.controls { position:fixed; z-index:30; top:17px; right:17px; width:min(520px,calc(100vw - 34px)); max-height:calc(100vh - 34px); overflow:auto; padding:14px; border:1px solid var(--line-strong); background:var(--panel); backdrop-filter:blur(14px); transform:translateX(calc(100% + 24px)); opacity:0; pointer-events:none; transition:transform 180ms ease,opacity 180ms ease; }
.controls.visible{transform:translateX(0);opacity:1;pointer-events:auto}.controls>header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--line)}.controls>header strong,.controls>header span{display:block}.controls>header span{margin-top:4px;color:var(--muted);font-size:8px;line-height:1.45}.controls>header button{border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer}
.control-section{padding:12px 0;border-bottom:1px solid var(--line)}.control-section:last-child{border-bottom:0;padding-bottom:0}.control-section h2{margin:0 0 9px;color:var(--muted);font-size:8px;font-weight:400}
.scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.scene-grid button{position:relative;min-height:54px;padding:7px 4px;display:grid;place-items:center}.scene-grid button b{font-size:14px}.scene-grid button span{font-size:7px;line-height:1.2}.scene-grid button.slot-a{border-top-color:#fff;border-left-color:#fff}.scene-grid button.slot-a::before{content:"A";position:absolute;left:4px;top:3px;font-size:7px}.scene-grid button.slot-b{border-bottom-color:#fff;border-right-color:#fff}.scene-grid button.slot-b::after{content:"B";position:absolute;right:4px;bottom:3px;font-size:7px}
.pair-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;color:rgba(255,255,255,.72);font-size:8px}.pair-status button{min-height:24px;padding:0 8px}
select,button,.scene-grid button{border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.035);cursor:pointer}select{min-height:34px;padding:0 8px}button:hover,select:hover{border-color:rgba(255,255,255,.78);background:rgba(255,255,255,.08)}
.mixer-section{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mixer-section h2,.crossfader-row,.mixer-buttons{grid-column:1/-1}.mixer-section>label{display:grid;grid-template-columns:84px 1fr 58px;gap:7px;align-items:center;color:var(--muted);font-size:8px}.mixer-section>label select{grid-column:2/-1}.mixer-section>label input{min-width:0}.mixer-section output{text-align:right;color:var(--text)}
.channel-controls-section{display:grid;grid-template-columns:1fr 1fr;gap:9px}.channel-controls-section>h2{grid-column:1/-1}.channel-control{min-width:0;margin:0;padding:9px;border:1px solid var(--line)}.channel-control legend{padding:0 6px;color:var(--text);font-size:8px}.channel-control label{display:grid;grid-template-columns:72px 1fr 42px;gap:6px;align-items:center;min-height:27px;color:var(--muted);font-size:7px}.channel-control input{min-width:0}.channel-control output{text-align:right;color:var(--text)}.channel-control button{width:100%;min-height:30px;margin-top:7px}.channel-control-a{border-top-color:rgba(255,255,255,.62)}.channel-control-b{border-bottom-color:rgba(255,255,255,.62)}
.crossfader-row{display:grid;grid-template-columns:14px 1fr 14px 42px;gap:8px;align-items:center}.crossfader-row output{text-align:right}
input[type="range"]{appearance:none;height:28px;margin:0;background:transparent;outline:none;cursor:ew-resize}
input[type="range"]::-webkit-slider-runnable-track{width:100%;height:1px;background:var(--line-strong)}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:8px;height:17px;margin-top:-8px;border:1px solid #fff;background:#000;cursor:ew-resize}
input[type="range"]::-moz-range-track{width:100%;height:1px;background:var(--line-strong)}
input[type="range"]::-moz-range-thumb{width:8px;height:17px;border:1px solid #fff;border-radius:0;background:#000;cursor:ew-resize}
.preset-section{display:grid;grid-template-columns:1fr 112px;gap:7px;align-items:end}.preset-section h2{grid-column:1/-1}
.score-progress{height:2px;background:rgba(255,255,255,.1);margin:0 0 9px}.score-progress i{display:block;height:100%;width:0;background:#fff}
.parameter-grid{padding:0}.parameter-divider{margin:9px 0 5px;color:rgba(255,255,255,.26);font-size:8px}.parameter-row{display:grid;grid-template-columns:126px 1fr 58px;gap:9px;align-items:center;min-height:28px;color:var(--muted)}.parameter-row output{text-align:right;color:var(--text)}
.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.button-grid button{min-height:35px}.mixer-buttons{grid-template-columns:repeat(4,1fr)}.button-grid button.active{background:#fff;color:#000}
.help{position:fixed;z-index:6;right:22px;bottom:46px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 12px;max-width:78vw;color:rgba(255,255,255,.26);font-size:8px;pointer-events:none}kbd{padding:1px 3px;border:1px solid rgba(255,255,255,.25);font:inherit;color:rgba(255,255,255,.55)}
body[data-mode="performance"] .help,body[data-mode="performance"] .audio-meter,body[data-mode="performance"] .status-line,body[data-mode="performance"] .identity span{opacity:0}body[data-mode="performance"] .hud-header{border-color:rgba(255,255,255,.24)}body[data-mode="performance"] .hud-footer{opacity:.38}body[data-mode="performance"] .controls{display:none}body.blackout .hud{opacity:.18}
@media(max-width:960px){.hud-header,.hud-footer,.status-line{left:12px;right:12px}.audio-meter,.transition-track{left:12px;right:12px}.movement-readout{display:none}.mixer-readout{width:45vw}.status-line{gap:9px;flex-wrap:wrap}.audio-meter{display:none}.transition-track{top:127px}.mode-label{display:none}.hud-footer{align-items:flex-start;flex-direction:column;gap:5px}.help{display:none}.scene-grid{grid-template-columns:1fr 1fr}.parameter-row{grid-template-columns:110px 1fr 52px}.mixer-section{grid-template-columns:1fr}}
.articulation-section{display:grid;grid-template-columns:1fr 1fr;gap:8px}.articulation-section h2{grid-column:1/-1}.articulation-section>label{display:grid;grid-template-columns:96px 1fr 48px;gap:7px;align-items:center;color:var(--muted);font-size:8px}.articulation-section>label select{grid-column:2/-1}.articulation-section output{text-align:right;color:var(--text)}
@media(max-width:960px){.articulation-section{grid-template-columns:1fr}}
@media(max-width:960px){.channel-controls-section{grid-template-columns:1fr}}

.output-section{display:grid;grid-template-columns:1fr 1fr;gap:8px}.output-section h2,.output-section>button{grid-column:1/-1}.output-section>label{display:grid;grid-template-columns:86px 1fr 50px;gap:7px;align-items:center;color:var(--muted);font-size:8px}.output-section input{min-width:0}.output-section output{text-align:right;color:var(--text)}.output-section>button{min-height:32px}
@media(max-width:960px){.output-section{grid-template-columns:1fr}}
@media(max-width:720px){.showcase-welcome-actions{grid-template-columns:1fr}.showcase-toolbar{top:auto;right:10px;bottom:10px;left:10px;display:grid;grid-template-columns:1fr 1fr;transform:none}.showcase-toolbar button{min-height:38px}.showcase-welcome h1{font-size:clamp(34px,12vw,64px)}body.showcase .hud-header{top:10px}.scene-inspector,.controls{top:10px;right:10px;left:10px;width:auto;max-height:calc(100vh - 76px)}}