@font-face{font-family:Inter;src:url('./assets/Inter.ttf') format('truetype');font-display:swap}*{box-sizing:border-box} :root{color-scheme:dark;--ink:#eeeaf7;--muted:#aaa2b9;--line:#2e263d;--accent:#c7b1ef;--focus:#eed9b7;--surface:#100c17}body{margin:0;background:radial-gradient(ellipse at 50% 0,#221127 0,#0c0912 55%,#07060b 100%);color:var(--ink);font:16px/1.5 Inter,system-ui,sans-serif}button,input{font:inherit}button{cursor:pointer}button:disabled,input:disabled{cursor:wait;opacity:.5}button{color:inherit}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:5px}button,input,a{-webkit-tap-highlight-color:transparent}button{transition:background .15s,border-color .15s,color .15s}h1,h2,h3,p{margin:0}h2{font-size:16px;font-weight:500;letter-spacing:.015em}h3{font-size:16px;font-weight:500}.app{max-width:1560px;margin:auto;padding:24px 40px 14px}.masthead{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:20px}.eyebrow{font-size:12px;letter-spacing:.18em;color:#b5a2c6;margin-bottom:4px}h1{font:38px/1.1 Georgia,serif;letter-spacing:-.035em}.title-star{font:20px Inter,sans-serif;margin-left:18px;color:#c5a4eb}.masthead-right{display:flex;align-items:center;gap:28px}.credit{display:flex;flex-direction:column;text-align:right;font-size:14px}.credit span{font-size:12px;color:var(--muted)}.quiet-button,.icon-button{border:1px solid var(--line);border-radius:5px;background:transparent;padding:8px 12px;font-size:14px}.quiet-button:hover,.icon-button:hover{background:#282033;border-color:#67517e}.quiet-button[aria-pressed=true]{border-color:var(--accent);color:#e6d2ff;background:#362044}.theater{position:relative;width:100%;aspect-ratio:15/8;max-height:58vh;min-height:300px;border:1px solid #40304b;border-radius:8px;overflow:hidden;background:#040309;box-shadow:0 28px 70px #0005,inset 0 0 80px #0009}#stage{width:100%;height:100%;display:block}.stage-note{position:absolute;bottom:14px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px;color:#c0b8cd}.mode-switch{display:flex;background:#080610d9;border:1px solid #36293e;border-radius:5px;overflow:hidden}.mode-switch button{font-size:13px;padding:7px 13px;border:0;background:transparent;color:#b9adc8}.mode-switch button[aria-pressed=true]{background:#34253f;color:#f2e7ff}.performers{position:absolute;inset:0;pointer-events:none}.performer{position:absolute;pointer-events:auto;touch-action:none;border:1px solid transparent;border-radius:50% 50% 25% 25%;background:transparent;color:var(--color);cursor:grab}.performer:active{cursor:grabbing}.performer::after{content:attr(data-name);position:absolute;top:100%;left:50%;transform:translate(-50%,0);font-size:12px;letter-spacing:.05em;opacity:0;white-space:nowrap;padding:3px 8px;background:#080610c9;border-radius:3px}.performer:hover::after,.performer:focus-visible::after{opacity:1}.performer:focus-visible{outline:none}.performer:focus-visible::after{box-shadow:0 0 0 2px var(--color)}.loading{position:absolute;inset:0;display:flex;gap:14px;justify-content:center;align-items:center;flex-direction:column;background:#06040ced;z-index:2}.loading p{font-size:15px;color:#c8bad4}.loading[hidden]{display:none}.loading-orb{width:10px;height:10px;border-radius:50%;background:#cbb4fa;box-shadow:0 0 30px 8px #ad6dd966;animation:breathe 1.4s ease-in-out infinite}.loading.error .loading-orb{animation:none;background:#f0b49b}.transport{display:flex;gap:14px;align-items:center;padding:20px 0 22px;border-bottom:1px solid var(--line)}.play-button{display:flex;align-items:center;justify-content:center;gap:11px;min-width:155px;padding:12px 17px;border:1px solid #d4b99a;border-radius:5px;background:#e1c9a6;color:#241626;font-size:16px;font-weight:500}.play-button:hover{background:#f5dbb1}.icon-button{font-size:23px;line-height:1;padding:13px 12px}.timeline{flex:1;min-width:70px}.time-row{display:flex;justify-content:space-between;color:#b7aebf;font:12px/1.4 Inter,sans-serif;font-variant-numeric:tabular-nums}input[type=range]{--range-color:#c3a6e9;-webkit-appearance:none;appearance:none;background:transparent;width:100%;height:22px;margin:4px 0;cursor:pointer;accent-color:var(--range-color)}input[type=range]::-webkit-slider-runnable-track{height:3px;background:#40344c;border-radius:2px}input[type=range]::-moz-range-track{height:3px;background:#40344c;border-radius:2px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;background:var(--range-color);border-radius:50%;margin-top:-4.5px;border:0;box-shadow:0 0 12px #ad80bd25}input[type=range]::-moz-range-thumb{width:12px;height:12px;background:var(--range-color);border-radius:50%;border:0}.master{display:grid;grid-template-columns:auto 94px auto;gap:11px;align-items:center;font-size:13px;color:var(--muted);margin-left:12px}.master output{font-size:12px;min-width:29px;font-variant-numeric:tabular-nums}.studio{display:grid;grid-template-columns:minmax(320px,.95fr) minmax(480px,1.65fr);gap:34px;padding:25px 0}.section-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}.section-meta{font-size:12px;color:var(--muted)}.switch{display:flex;align-items:center;gap:8px;font-size:13px;color:#bdb2ca;cursor:pointer}.switch input{accent-color:#b89cda;width:14px;height:14px;margin:0}.cues{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}.cues button{display:flex;align-items:center;gap:7px;background:#130e1c;border:1px solid #392b44;border-radius:5px;padding:7px 9px;font-size:13px;color:#c7b8d4}.cues button[aria-pressed=true]{border-color:#baa1df;background:#302139;color:#f5eafa}.cues button:hover{background:#35233c}.cues i{width:7px;height:7px;background:var(--swatch);display:inline-block;border-radius:50%;box-shadow:0 0 8px color-mix(in srgb,var(--swatch) 45%,transparent)}.selected-light{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;gap:12px}.selected-light>div{display:flex;align-items:center;gap:8px}.color-dot{width:10px;height:10px;border-radius:50%;background:var(--color,#77d7bd);box-shadow:0 0 13px var(--color,#77d7bd)}.selected-detail{font-size:13px;color:#9d90ad}.selected-light button{font-size:12px;padding:5px 9px}.light-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px}.light-grid label{font-size:13px;color:#bbb0c8;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1px}.light-grid output{font-size:12px;color:#8f819f;font-variant-numeric:tabular-nums}.hue-range::-webkit-slider-runnable-track{background:linear-gradient(90deg,#ef6868,#e3da79,#72e9a3,#6dcced,#7d82e8,#e480cd,#ed7474)!important}.hue-range::-moz-range-track{background:linear-gradient(90deg,#ef6868,#e3da79,#72e9a3,#6dcced,#7d82e8,#e480cd,#ed7474)!important}.atmosphere{display:grid;grid-template-columns:1fr 1fr;gap:22px;border-top:1px solid #271e30;padding-top:12px;margin-top:10px}.atmosphere label{font-size:13px;color:#b4a7c2}.follow{margin-top:12px}.tracks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.track{border:1px solid #302439;border-radius:6px;padding:13px 11px 11px;background:linear-gradient(150deg,#1d1326,#100c17);min-width:0}.track.muted{opacity:.52}.track-head{display:flex;align-items:center;justify-content:space-between;gap:7px}.track h3{font-size:14px;font-weight:500;letter-spacing:.015em}.track-light{width:22px;height:22px;padding:0;background:transparent;border:1px solid color-mix(in srgb,var(--color) 50%,transparent);border-radius:50%;display:grid;place-items:center}.track-light span{width:8px;height:8px;border-radius:50%;background:var(--color);box-shadow:0 0 9px var(--color)}.track[data-selected=true]{border-color:color-mix(in srgb,var(--color) 50%,transparent)}.track-role{font-size:12px;color:#9e8fb0;margin:5px 0 19px;white-space:nowrap}.meter{height:46px;display:flex;align-items:flex-end;gap:3px;overflow:hidden;border-bottom:1px solid #37293d;padding-bottom:5px}.meter span{height:calc(var(--level,0)*100%);flex:1;min-height:2px;max-height:100%;background:var(--color);opacity:.60;border-radius:2px 2px 0 0;transition:height .07s ease}.track-volume{margin-top:11px;display:flex;align-items:center;gap:7px}.track-volume input{--range-color:var(--color);min-width:0}.track-volume output{font-size:12px;color:#b8a7c8;min-width:29px;text-align:right}.track-actions{display:flex;gap:5px;margin-top:8px}.track-actions button{flex:1;min-width:0;border:1px solid #45304d;border-radius:4px;background:transparent;font-size:12px;padding:5px;color:#a996b8}.track-actions button[aria-pressed=true]{color:var(--color);border-color:var(--color);background:#392344}.track-actions button:hover{background:#35213e}.mix-tip{font-size:13px;color:#94829f;margin-top:19px;max-width:650px}footer{display:flex;justify-content:space-between;gap:15px;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:#94889e}footer a{color:#b8a6cc;text-decoration:none}footer a:hover{text-decoration:underline}.notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);border-radius:6px;background:#281a33;border:1px solid #725181;padding:10px 18px;max-width:90vw;font-size:14px;z-index:10}.notice:empty{display:none}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes breathe{50%{opacity:.4;transform:scale(.8)}}@media(min-width:1600px){.app{padding-top:30px}.theater{max-height:64vh}}@media(max-width:1050px){.studio{grid-template-columns:1fr;gap:28px}.mix-desk{order:0}.lighting-desk{order:1}.light-grid{grid-template-columns:repeat(4,1fr)}.light-editor{padding-top:4px}.atmosphere{max-width:520px}.master{grid-template-columns:auto 65px}.master output{display:none}}@media(max-width:640px){.app{padding:18px 14px 12px}.masthead{gap:12px;padding-bottom:16px}.eyebrow{font-size:10px;letter-spacing:.15em}h1{font-size:30px}.title-star{margin-left:10px;font-size:16px}.masthead-right{gap:12px}.credit{display:none}.quiet-button{font-size:12px;padding:7px 9px}.theater{min-height:245px;max-height:none}.stage-note{bottom:10px;left:10px;right:10px;gap:7px;font-size:10px}.mode-switch button{font-size:11px;padding:6px 9px}.transport{gap:9px;flex-wrap:wrap;padding:15px 0}.play-button{min-width:128px;padding:10px 12px;font-size:14px}.icon-button{font-size:21px;padding:10px}.timeline{flex:1;min-width:120px}.master{width:100%;grid-template-columns:auto 1fr 32px;gap:15px;margin:0}.master output{display:block}.master input{margin:0}.studio{padding:21px 0;gap:24px}.tracks{grid-template-columns:repeat(3,1fr);gap:8px}.track{padding:11px 9px}.track:nth-child(n+4){margin-top:0}.track-role{margin-bottom:12px;font-size:11px}.track h3{font-size:13px}.meter{height:30px}.track-actions button{font-size:12px;padding:6px 3px}.mix-tip{font-size:12px}.light-grid{grid-template-columns:1fr 1fr}.cues button{font-size:12px;padding:7px 8px}.section-meta{font-size:11px}.switch{font-size:12px}footer{font-size:11px;flex-direction:column;gap:7px}.selected-detail{font-size:12px}.performer::after{font-size:10px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Core controls stay readable even on a compact mixing desk. */
.light-grid label,.atmosphere label,.switch,.master,.cues button,.mode-switch button,.track-actions button{font-size:14px}.track-role{white-space:normal}.track-light{width:24px;height:24px}.track-actions button{padding:5px 3px}

.performer{transform-origin:50% 50%;transition:transform .18s ease-out}

.stage-exit,.stage-play{display:none}
html.stage-expanded,html.stage-expanded body{overflow:hidden;overscroll-behavior:none}
html.stage-expanded body{position:fixed;inset:0;width:100%}
html.stage-expanded .theater,.theater:fullscreen{position:fixed;inset:0;z-index:100;width:100%;height:var(--stage-viewport-height,100dvh);max-height:none;min-height:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:#040309}
html.stage-expanded .stage-exit,.theater:fullscreen .stage-exit{display:block;position:absolute;z-index:5;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));background:#100c17d9}
html.stage-expanded .stage-play,.theater:fullscreen .stage-play{display:block;background:#100c17d9;white-space:nowrap}
html.stage-expanded .stage-note,.theater:fullscreen .stage-note{bottom:max(14px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));justify-content:flex-start}
html.stage-expanded .mode-switch,.theater:fullscreen .mode-switch{margin-left:auto}
@media(max-width:640px){html.stage-expanded #stage-instruction{display:none}}

.studio{grid-template-columns:1fr}.mix-desk{width:100%}

@media (orientation:portrait) and (max-width:1000px){html:not(.stage-expanded) .theater{aspect-ratio:4/5;min-height:0;max-height:none}}

.pumpkin{position:absolute;z-index:1;display:flex;touch-action:none;border-radius:50%;clip-path:ellipse(50% 50% at 50% 50%)}
.pumpkin-lobe{flex:1;min-width:0;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;touch-action:none}
.pumpkin-lobe:focus-visible{outline:none}

/* The stage and music controls are the whole interface. */
.app{max-width:none;padding:0}
.theater{border:0;border-radius:0;box-shadow:none}
.transport{padding:8px;gap:10px;border:0}
.studio{padding:0 8px 8px;gap:0}
.stage-fullscreen{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:3;background:#100c17d9}
html.stage-expanded .stage-fullscreen,.theater:fullscreen .stage-fullscreen{display:none}
@media(max-width:640px){.transport{gap:8px}.studio{padding:0 8px 8px}}

/* Treat the whole stage, including generated note labels, as an instrument. */
.theater,.theater *,.theater::before,.theater::after,.theater *::before,.theater *::after{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#stage{-webkit-user-drag:none}

.theater[data-ghosts-active="false"] .performer{pointer-events:none}
.theater[data-ghosts-active="false"] .performer::after{display:none}

.song-picker{display:flex;align-items:center;gap:8px;padding:8px 8px 0}.song-picker select{background:#17101f;color:#eeeaf7;border:1px solid #45304d;border-radius:5px;padding:8px 12px;min-width:0;max-width:min(65vw,420px);font:inherit;font-size:14px}.midi-upload{position:relative;overflow:hidden;cursor:pointer;white-space:nowrap}.midi-upload input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.midi-upload:focus-within{outline:2px solid var(--focus);outline-offset:3px}

/* Stage-first layout; playback settings are a small optional overlay. */
.scene-view{position:absolute;inset:0;transform-origin:0 0}
.stage-toolbar{position:absolute;z-index:5;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;gap:6px;align-items:center}
.stage-toolbar .quiet-button,.stage-toolbar select{background:#100c17d9;border:1px solid #45304d;border-radius:5px;color:var(--ink);padding:8px 10px;font:inherit;font-size:13px}
.stage-toolbar [hidden],.music-panel[hidden]{display:none!important}
.stage-fullscreen{display:none!important}
.music-panel{position:fixed;z-index:105;bottom:max(64px,env(safe-area-inset-bottom));left:12px;right:12px;max-width:720px;margin:auto;background:#100c17f2;border:1px solid #45304d;border-radius:8px;padding:8px;box-shadow:0 12px 36px #0008}
.music-panel .transport{flex-wrap:wrap}.music-panel .timeline{min-width:120px}
html.stage-expanded .stage-exit{display:none}
@media(max-width:640px){.stage-toolbar{gap:4px}.stage-toolbar .quiet-button,.stage-toolbar select{padding:7px;font-size:11px}.music-panel .master{grid-template-columns:auto 1fr 32px}}


/* Camera motion is composited once, with the instrument hit areas inside it. */
.scene-view{will-change:transform;transition:transform 1800ms cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.scene-view{transition:none}}
.interaction-spotlights{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.interaction-spotlight{position:absolute;top:0;left:0;width:var(--contact-size,84px);height:var(--contact-size,84px);border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s ease;will-change:transform,opacity;background:radial-gradient(circle,transparent 0 18%,color-mix(in srgb,var(--contact-color) 20%,transparent) 30%,transparent 70%)}
.interaction-spotlight::before{content:'';position:absolute;inset:18%;border-radius:50%;border:3px solid var(--contact-color);box-shadow:0 0 9px var(--contact-color),0 0 22px color-mix(in srgb,var(--contact-color) 45%,transparent);opacity:.8}
.interaction-spotlight::after{content:'';position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#fff5;box-shadow:0 0 6px var(--contact-color)}
.interaction-spotlight[data-pressed="true"]::before{border-color:#fff9;opacity:1}
@media(prefers-reduced-motion:reduce){.interaction-spotlight{transition:none}}

/* One shared pitch instrument, fixed to the viewport rather than the camera. */
.performer::after{content:none!important;display:none!important}
.pitch-graph{position:absolute;z-index:2;left:max(16px,env(safe-area-inset-left));bottom:max(14px,env(safe-area-inset-bottom));width:calc(100% - max(16px,env(safe-area-inset-left)) - max(16px,env(safe-area-inset-right)));height:90px;pointer-events:none;opacity:.95;background:linear-gradient(transparent,#04030955);border-radius:6px}
.pitch-graph[hidden]{display:none}
html.stage-expanded .stage-note{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 102px)}
.theater[data-ghosts-active="false"] .stage-note{bottom:max(14px,env(safe-area-inset-bottom))}
@media(max-width:640px){.pitch-graph{height:72px}html.stage-expanded .stage-note{bottom:calc(max(14px,env(safe-area-inset-bottom)) + 84px)}}

/* Minimal stage controls: one replay icon at top left and one transport icon. */
.stage-toolbar{left:max(12px,env(safe-area-inset-left));right:auto}
.stage-restart,.stage-play{width:44px;height:44px;padding:10px!important;display:grid!important;place-items:center;background:#100c17d9}
.stage-restart svg,.stage-play svg{width:22px;height:22px;display:block;fill:currentColor}
.stage-restart svg path{fill:none}

/* Gentle automatic framing keeps the ensemble visible. */
.scene-view{transition:transform 1800ms cubic-bezier(.22,.61,.36,1)}
.auto-frame{position:absolute;z-index:5;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:44px;height:44px;padding:10px;background:#100c17d9}
.auto-frame svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.auto-frame[aria-pressed="true"]{color:#ddcaff;border-color:#806997}.framing-off{display:none}.auto-frame[aria-pressed="false"] .framing-off{display:block}
@media(prefers-reduced-motion:reduce){.scene-view{transition:none}}