:root{color-scheme:dark;--bg:#101b1d;--sheet:#122022;--surface:var(--bg);--raised:#18272a;--hover:#1f3033;--line:#233436;--line-strong:#34484b;--track:#2c3e41;--ink:#ece9dc;--ink-2:#c3cbc6;--muted:#8e9b99;--accent:#d7b281;--accent-hi:#e6c99f;--accent-ink:#1a1d17;--accent-line:#d7b2815e;--accent-glow:#d7b28129;--teal:#80b9ae;--teal-soft:#80b9ae24;--scrim:#0c1517e0;--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--ease:cubic-bezier(.2,.75,.25,1);--chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238e9b99' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 13px/1.45 var(--font);font-synthesis:none;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
h2,h3,p{margin:0;font-size:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:disabled{cursor:default;opacity:.35}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
button.icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--ink-2);transition:background-color .15s,color .15s,box-shadow .15s}
button.icon:hover:not(:disabled){background:var(--hover);color:var(--ink)}
button.icon:active:not(:disabled){background:var(--raised)}
button.icon[aria-pressed=true]{background:var(--teal-soft);color:var(--teal)}
button.icon.finish{color:var(--accent)}
button.icon.finish:hover:not(:disabled){color:var(--accent-hi)}
button.text{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink-2);font-size:12px;white-space:nowrap;transition:box-shadow .15s,color .15s,background-color .15s}
button.text:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--muted);color:var(--ink)}
button.text:active:not(:disabled){background:var(--raised)}
button.text[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--accent);color:var(--accent)}
button.text .i{width:16px;height:16px;margin-left:-4px}
select,input[type=number],textarea{width:100%;min-width:0;min-height:34px;padding:7px 10px;font:12px/1.3 var(--mono);color:var(--ink);background:var(--raised);border:1px solid var(--line);border-radius:8px;transition:border-color .15s}
select{-webkit-appearance:none;appearance:none;padding-right:30px;background:var(--raised) var(--chevron) no-repeat right 11px center/10px 6px;cursor:pointer}
select:hover:not(:disabled),input[type=number]:hover:not(:disabled),textarea:hover:not(:disabled){border-color:var(--line-strong)}
select:disabled,input:disabled,textarea:disabled{opacity:.4;cursor:default}
textarea{resize:vertical}
input[type=checkbox]{width:16px;height:16px;margin:0;accent-color:var(--teal)}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:26px;margin:0;background:none;cursor:pointer;touch-action:pan-y}
input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:1px;background:linear-gradient(90deg,var(--fader,var(--teal)) var(--fill,0%),var(--track) var(--fill,0%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border:0;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--surface);transition:transform .15s var(--ease)}
input[type=range]:hover:not(:disabled)::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2)}
input[type=range]::-moz-range-track{height:2px;border-radius:1px;background:var(--track)}
input[type=range]::-moz-range-progress{height:2px;border-radius:1px;background:var(--fader,var(--teal))}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--surface)}
input[type=range]:focus-visible{outline:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
input[type=range]:disabled{cursor:default;opacity:.4}
@media(pointer:coarse){input[type=range]{height:38px}
select,input[type=number],textarea{font-size:16px}
input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-10px}
input[type=range]::-moz-range-thumb{width:22px;height:22px}
}
.visual-first{position:relative;height:100vh;height:100dvh;overflow:hidden;--sheet-w:0px;--sheet-h:0px}
.visual-first.controls-open{--sheet-h:min(58dvh,540px)}
@media(min-aspect-ratio:1/1) and (min-width:560px),(min-width:1100px){.visual-first.controls-open{--sheet-h:0px;--sheet-w:clamp(320px,30vw,384px)}
}
.scene{position:relative;overflow:hidden;background:var(--bg)}
.visual-first>.scene{position:absolute;inset:0 var(--sheet-w) var(--sheet-h) 0}
canvas{display:block;width:100%;height:100%}
#menu-toggle{position:absolute;z-index:5;top:max(12px,env(safe-area-inset-top));right:calc(var(--sheet-w) + max(12px,env(safe-area-inset-right)));background:#101b1db3;opacity:0;transition:opacity .4s,background-color .15s,color .15s}
.visual-first:not(.running) #menu-toggle,#menu-toggle.revealed,#menu-toggle:hover,#menu-toggle:focus-visible,#menu-toggle[aria-expanded=true]{opacity:1}
#menu-toggle .i-close,#menu-toggle[aria-expanded=true] .i-open{display:none}
#menu-toggle[aria-expanded=true] .i-close{display:block}
#surface-play{position:absolute;z-index:2;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;color:var(--accent);background:#101b1dcc;box-shadow:inset 0 0 0 1px var(--accent-line);transition:box-shadow .3s var(--ease),transform .3s var(--ease),color .15s}
#surface-play .i{width:26px;height:26px;margin-left:3px}
#surface-play:hover{background:#101b1dcc;color:var(--accent-hi);box-shadow:inset 0 0 0 1px var(--accent),0 0 48px var(--accent-glow);transform:scale(1.04)}
#surface-play:active{transform:scale(.98)}
.visual-first.controls-open #surface-play{display:none}
.control-drawer{--surface:var(--sheet);position:absolute;z-index:4;left:0;right:0;bottom:0;height:var(--sheet-h);max-width:920px;margin-inline:auto;display:flex;flex-direction:column;background:var(--sheet);border-radius:18px 18px 0 0;box-shadow:0 0 0 1px var(--line),0 -30px 80px #00000059;container-type:inline-size;animation:sheet-rise .36s var(--ease)}
@media(min-aspect-ratio:1/1) and (min-width:560px),(min-width:1100px){.control-drawer{top:0;left:auto;width:var(--sheet-w);height:auto;max-width:none;border-radius:0;box-shadow:-1px 0 0 var(--line),-30px 0 80px #00000040;padding-right:env(safe-area-inset-right);animation-name:sheet-slide}
}
@keyframes sheet-rise{from{opacity:0;transform:translateY(32px)}}
@keyframes sheet-slide{from{opacity:0;transform:translateX(32px)}}
.deck{flex:none;padding:16px 16px 0}
.transport{display:flex;align-items:center;gap:10px}
.transport-group{display:flex;align-items:center;gap:2px}
.transport-group.utility{margin-left:auto}
#start{width:48px;height:48px;background:var(--accent);color:var(--accent-ink)}
#start:hover:not(:disabled){background:var(--accent-hi);color:var(--accent-ink)}
#start .i-play{margin-left:2px}
#start .i-live,#start[data-state=playing] .i-play{display:none}
#start[data-state=playing] .i-live{display:block}
#start[data-state=playing]{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
#start[data-state=playing]:disabled{opacity:1}
.readouts{display:flex;align-items:baseline;gap:16px;padding:14px 4px 12px;font:11px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
#section{color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
#clock{color:var(--ink)}
#meter{margin-left:auto;overflow:hidden;text-overflow:ellipsis}
.cycle{flex:none;height:1px;background:var(--line)}
#progress{width:0;height:1px;background:var(--accent)}
.tabs{flex:none;display:flex;gap:2px;padding:0 8px;border-bottom:1px solid var(--line)}
.tabs [role=tab]{position:relative;padding:13px 10px 12px;font-size:12px;font-weight:500;color:var(--muted);transition:color .15s}
.tabs [role=tab]:hover{color:var(--ink-2)}
.tabs [role=tab][aria-selected=true]{color:var(--ink)}
.tabs [role=tab][aria-selected=true]::after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:1px;background:var(--ink)}
.tabs [role=tab]:focus-visible{outline-offset:-6px;border-radius:8px}
.panels{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
@media(max-height:360px){.control-drawer{overflow-y:auto}.panels{flex:none;overflow:visible}}
.panel{display:grid;align-content:start;gap:28px;padding:20px 16px calc(28px + env(safe-area-inset-bottom))}
.panel h2{margin-bottom:12px;font-size:12px;font-weight:500;color:var(--muted)}
.scene-slots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:3px;border-radius:999px;background:var(--raised);transition:box-shadow .15s}
.scene-controls:has(#save-scene[aria-pressed=true]) .scene-slots{box-shadow:inset 0 0 0 1px var(--accent-line)}
.scene-slots button{position:relative;min-height:34px;padding:0 6px;border-radius:999px;font-size:12px;color:var(--muted);transition:background-color .15s,color .15s}
.scene-slots button:hover:not(:disabled){color:var(--ink)}
.scene-slots button[aria-pressed=true]{background:var(--hover);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong),0 1px 3px #0005}
.scene-slots button.morphing::after{content:'';position:absolute;left:20%;right:20%;bottom:5px;height:1px;background:var(--teal);transform:scaleX(var(--morph,0));transform-origin:left}
.scene-tools{display:flex;align-items:center;gap:6px;margin-top:10px}
.scene-tools label{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:12px;color:var(--muted)}
.scene-tools select{width:auto;min-height:32px}
#cancel-morph{width:32px;height:32px}
#cancel-morph .i{width:18px;height:18px}
#cancel-morph:disabled{visibility:hidden}
.faders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
.fader label{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--ink-2)}
.fader output{font:11px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
#faders .fader:last-child{--fader:var(--accent)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.panel .section-title h2{margin:0}
.section-title button.text{min-height:28px;padding:0 12px}
.room-faders{grid-template-columns:minmax(0,1fr)}
@container (min-width:330px){.room-faders{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px}
}
.visual-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.visual-controls label{display:grid;gap:6px;font-size:12px;color:var(--muted)}
.visual-controls .section-title{grid-column:1 / -1;margin:0}
.visual-controls .caption{display:flex;gap:16px;font:11px var(--mono);color:var(--muted)}
.visual-controls .caption small{font-size:inherit}
.visual-controls .depth{grid-template-columns:1fr auto;align-items:baseline;align-self:end}
.visual-controls .depth input{grid-column:1 / -1}
.visual-controls output{font:11px var(--mono);color:var(--ink-2)}
.pitch-key{grid-column:1 / -1;margin-top:8px}
#note-colours{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 8px;font:11px var(--mono);color:var(--muted)}
#note-colours span{display:flex;align-items:center;gap:7px;white-space:nowrap}
#note-colours span::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--note);box-shadow:0 0 8px var(--note)}
.composition-form{display:grid}
.composition-heading,.composition-macros,.structure-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.composition-heading{padding-bottom:20px}
.composition-form label{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;font-size:12px;color:var(--muted)}
.composition-form label:has(>input[type=checkbox]){flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:10px;color:var(--ink-2)}
.composition-form .wide{grid-column:1 / -1}
.composition-form details{border-top:1px solid var(--line)}
.composition-form summary{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-size:12px;font-weight:500;color:var(--ink-2);cursor:pointer;list-style:none;transition:color .15s}
.composition-form summary:hover{color:var(--ink)}
.composition-form summary::-webkit-details-marker{display:none}
.composition-form summary::after{content:'';width:6px;height:6px;margin-right:4px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.composition-form details[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.composition-form details>div{padding-bottom:20px}
.composition-files{display:flex;gap:8px;padding-top:16px;border-top:1px solid var(--line)}
.link{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 16px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.link:last-child{padding-bottom:0;border-bottom:0}
.link h3{font-size:13px;font-weight:500;color:var(--ink)}
.link p{font-size:12px;color:var(--muted)}
.link .wide{grid-column:1 / -1}
.link label{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted)}
.link label select{width:auto;min-width:150px}
#pair-info,#midi-status{font-size:12px;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
#pair-info:empty,#midi-status:empty{display:none}
#pair-info a{color:var(--teal)}
@container (max-width:350px){.transport{gap:6px}
.transport-group{gap:0}
.control-drawer button.icon{width:36px;height:36px}
.control-drawer #start{width:44px;height:44px}
.readouts{gap:12px}
}
@container (max-width:300px){.deck{padding-inline:8px}.transport{gap:2px}.control-drawer button.icon,.control-drawer #start{width:30px;height:36px}.transport-group{gap:0}}
@container (min-width:600px){.faders{grid-template-columns:repeat(4,minmax(0,1fr))}
.room-faders{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 24px}
.visual-controls{grid-template-columns:repeat(4,minmax(0,1fr))}
#note-colours{grid-template-columns:repeat(12,minmax(0,1fr))}
.composition-macros,.structure-settings{grid-template-columns:repeat(4,minmax(0,1fr))}
.scene-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px}
.scene-controls h2{grid-column:1 / -1}
.scene-tools{margin-top:0}
}
@media(max-height:440px){.deck{padding-top:10px}
.readouts{padding:10px 4px 8px}
.tabs [role=tab]{padding:10px 10px 9px}
.panel{padding-top:16px;gap:22px}
}
.control-drawer,.remote{-webkit-user-select:none;user-select:none}
.control-drawer input,.control-drawer textarea,#pair-info{-webkit-user-select:text;user-select:text}
.field-name{min-width:0}
.help{position:relative;display:inline-grid;place-items:center;vertical-align:-3px;width:16px;height:16px;margin-left:7px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--muted);font:600 10px/1 var(--font);transition:color .15s,box-shadow .15s}
.help::before{content:'';position:absolute;inset:-6px -8px}
.help:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--muted)}
.help[aria-expanded=true]{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.help-pop{position:fixed;z-index:8;max-width:min(300px,calc(100vw - 16px));padding:12px 14px;border-radius:12px;background:#1a2a2cf5;box-shadow:0 0 0 1px var(--line-strong),0 16px 40px #0009;color:var(--ink-2);font-size:12px;line-height:1.55;white-space:pre-line;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow-y:auto;overscroll-behavior:contain;animation:help-in .14s var(--ease)}
@keyframes help-in{from{opacity:0;transform:translateY(-3px)}}
.takes{position:absolute;z-index:2;left:0;right:var(--sheet-w);top:calc((100% - var(--sheet-h)) / 2 + 66px);display:flex;justify-content:center;gap:8px;pointer-events:none}
.takes:not(:has(button:enabled)){display:none}
.takes button{pointer-events:auto;background:var(--scrim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.takes button:disabled{display:none}
.takes button.text{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}
.takes button.text:hover:not(:disabled){color:var(--accent-hi);box-shadow:inset 0 0 0 1px var(--accent)}
.messages{position:absolute;z-index:3;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));max-width:min(440px,calc(100% - 32px));font-size:12px;line-height:1.5;color:var(--ink-2)}
.messages:has(#status:not(.sr-only)){padding:10px 14px;border-radius:12px;background:var(--scrim);box-shadow:0 0 0 1px var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#status:not(.sr-only){color:var(--accent)}
#exit-cinema{display:none}
.scene:fullscreen{border:0;border-radius:0}
.scene:fullscreen #exit-cinema{display:grid;position:absolute;top:16px;right:16px;background:var(--scrim);opacity:.7;transition:opacity .3s,background-color .15s}
.scene:fullscreen.pointer-idle{cursor:none}
.scene:fullscreen.pointer-idle #exit-cinema{opacity:0}
.scene:fullscreen #exit-cinema:hover,.scene:fullscreen #exit-cinema:focus-visible{opacity:1}
.remote{max-width:980px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));display:grid;gap:28px}
.remote-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.connection{font:11px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.remote .actions{display:flex;align-items:center;gap:2px}
.remote button.icon{width:48px;height:48px}
.remote .i{width:22px;height:22px}
.remote h2{margin-bottom:12px;font-size:12px;font-weight:500;color:var(--muted)}
.remote .room-faders{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 18px}
.xy{position:relative;height:clamp(240px,44vh,440px);border-radius:20px;background:radial-gradient(circle at 50% 50%,#1b302e,var(--bg) 72%);box-shadow:inset 0 0 0 1px var(--line);touch-action:none;cursor:crosshair;overflow:hidden}
.xy::before{content:'';position:absolute;inset:0;background:linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat}
.xy i{position:absolute;left:40%;top:35%;width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 28px var(--accent-glow);transform:translate(-50%,-50%);pointer-events:none}
.xy span{position:absolute;left:16px;bottom:14px;font:11px var(--mono);letter-spacing:.06em;color:var(--muted);pointer-events:none}
@media(max-width:420px){.remote .room-faders{grid-template-columns:minmax(0,1fr)}
}
@media(min-width:880px){.remote{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-areas:'head head' 'pad mix' 'pad room';grid-template-rows:auto auto 1fr;align-items:start;column-gap:40px}
.remote-head{grid-area:head}
.xy{grid-area:pad;height:min(70vh,560px)}
.remote .mix{grid-area:mix}
.remote .room{grid-area:room}
}
@media(prefers-reduced-motion:reduce){*,::before,::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}