:root{color-scheme:dark;font-family:Helvetica,Arial,sans-serif;color:#e9edf2;background:#0c1219;font-size:16px;--ink:#e9edf2;--muted:#92a0ae;--line:#26323e;--gold:#edb66b;--panel:#121b24}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button{color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:7px;padding:10px 14px;min-height:42px;transition:background .15s,border-color .15s}button:hover{background:#25323f;border-color:#64717d}button:active{transform:translateY(1px)}button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible,.jog:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.45;cursor:wait}button[aria-pressed=true]{color:var(--gold);border-color:#8f714d;background:#2c2925}.primary{background:var(--gold);border-color:var(--gold);color:#1c1c1c;font-weight:600;display:flex;gap:12px;align-items:center;min-width:128px;justify-content:center}.primary:hover{background:#f5c582;border-color:#f5c582}header{height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--line);gap:20px;background:#0c1219}.identity{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);font-size:25px;letter-spacing:-.6px}.identity svg{width:25px;height:34px;stroke:var(--gold);fill:none;stroke-width:1.6}.identity small{display:block;font-size:12px;letter-spacing:1.7px;color:var(--muted);margin-top:5px}.transport,.header-end{display:flex;align-items:center;gap:9px}.header-end{min-width:180px;justify-content:flex-end}#status{color:var(--muted);font-size:13px}.icon{padding:9px;width:42px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.meter{width:45px;height:5px;background:#26313c;overflow:hidden;border-radius:3px;margin-left:6px}.meter i{display:block;height:100%;background:var(--gold);transform-origin:left;transform:scaleX(0)}main{display:grid;grid-template-columns:minmax(0,1fr) 316px;min-height:calc(100dvh - 78px)}.workspace{min-width:0;display:flex;flex-direction:column;position:sticky;top:0;height:calc(100dvh - 78px);min-height:500px;background:#101820}.stage-bar{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:12px;background:#101820;z-index:2}.stage-actions{display:flex;gap:8px}.stage-actions button{font-size:14px}.select-wrap select{border:none;background:transparent;padding-left:0;color:#d5dce4}.stage-actions .icon{border-color:transparent}select{width:100%;border:1px solid var(--line);background:#0d161f;color:var(--ink);border-radius:6px;padding:10px 27px 10px 11px;min-height:42px;font-size:14px}.select-wrap{max-width:240px}#viewport{flex:1;position:relative;min-height:320px;overflow:hidden;touch-action:none}canvas{display:block;width:100%;height:100%;outline:0;touch-action:none}.stage-labels{position:absolute;top:12px;left:0;width:100%;display:flex;justify-content:space-around;pointer-events:none;z-index:2}.stage-labels button{pointer-events:auto;border:0;min-height:42px;text-align:left;background:#101820bb;font-size:14px;padding:8px 12px}.stage-labels button small{display:block;color:var(--muted);font-size:12px;margin:4px 0 0 29px}.number{display:inline-flex;color:var(--gold);font-size:12px;margin-right:12px}#gesture-hint{position:absolute;bottom:18px;left:0;width:100%;text-align:center;font-size:12px;color:#8c9aa7;pointer-events:none}#loading,#error{position:absolute;inset:0;display:grid;place-content:center;padding:30px;text-align:center;color:var(--muted);z-index:3;background:#101820}#error{color:#f0baa6}#error[hidden],#loading[hidden],[hidden]{display:none!important}.score{padding:16px 23px 20px;border-top:1px solid var(--line);background:#111b25;min-height:110px}.score-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:13px;color:#bfc9d3}#last-note{color:var(--muted);font-size:12px}#sequence{display:grid;grid-template-columns:repeat(var(--count,6),minmax(40px,1fr));overflow-x:auto;gap:7px}#sequence button{min-width:0;min-height:48px;font-size:14px;position:relative;overflow:hidden;background:#1b2732;border-color:#2c3945;padding:7px 2px}#sequence button small{display:block;font-size:12px;color:#8393a3;margin-top:4px}#sequence button.selected{border-color:#c3975f}#sequence button.active{background:#dfab68;color:#151b21;border-color:#edc590}#sequence button.active small{color:#43413c}aside{padding:22px 22px 30px;background:var(--panel);border-left:1px solid var(--line);min-width:0}.tabs{display:flex;background:#0c141c;border:1px solid var(--line);padding:4px;border-radius:8px;gap:4px;margin-bottom:24px}.tabs button{flex:1;border:0;font-size:14px;padding:9px 4px;min-height:38px}.tabs button[aria-selected=true]{background:#2a3641;color:#f4d3a4}h1{font-size:17px;font-weight:500;letter-spacing:-.2px;margin:0}.section-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 22px}.muted-toggle{font-size:12px!important;color:#91a0ae!important;white-space:nowrap}.range-label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;color:#c6cfd8;margin:19px 0 8px}.range-label output{font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;height:22px;margin:0;accent-color:var(--gold);cursor:pointer}input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;margin:0}.two-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}.two-fields label,.details-body>label:not(.range-label){font-size:13px;color:var(--muted);display:grid;gap:7px}.two-fields select{font-size:13px}.section-top.small{font-size:14px;margin:22px 0 8px}.section-top.small select{width:auto;max-width:166px;font-size:13px}.hint{color:var(--muted);font-size:12px;line-height:1.5;margin:10px 0 14px}.wide{width:100%;font-size:14px}.secondary{background:#1a2733}.speed-presets{display:flex;justify-content:space-between;gap:6px;margin-top:7px}.speed-presets button{min-height:28px;font-size:12px;flex:1;padding:4px 0;border-color:transparent;color:var(--muted)}.speed-presets button:hover{color:var(--gold)}details{border-top:1px solid var(--line);margin-top:24px;padding-top:18px}summary{cursor:pointer;font-size:14px;color:#c5d0db;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:28px}summary:after{content:'+';font-size:19px;color:var(--muted)}details[open]>summary:after{content:'−'}summary::-webkit-details-marker{display:none}.details-body{padding-top:3px}.checks{display:flex;flex-direction:column;gap:13px;margin-top:22px}.check{display:flex;gap:8px;align-items:center;font-size:14px;color:#b3c0cd}.about p{font-size:14px;line-height:1.65;color:#a9b7c6}.about .hint{font-size:12px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#293745;color:#fff;border:1px solid #607182;padding:12px 20px;z-index:20;border-radius:8px;max-width:min(90vw,520px);font-size:14px}#manual-controls{position:absolute;bottom:38px;left:0;width:100%;display:flex;justify-content:space-around;pointer-events:none}.jog-wrap{display:grid;justify-items:center;gap:7px;pointer-events:auto}.jog-wrap small{color:#adb7c2;font-size:12px}.jog{width:90px;height:90px;border:1px solid #607083;border-radius:50%;background:radial-gradient(circle,#25323ce8 55%,#111b24ef 56%);touch-action:none;display:grid;place-items:center;cursor:grab;position:relative;box-shadow:0 5px 20px #0004}.jog span{color:#c5a16d;font-size:13px;pointer-events:none}.jog i{position:absolute;left:41px;top:8px;width:7px;height:16px;border-radius:4px;background:var(--gold);transform-origin:3.5px 37px;pointer-events:none}.manual-mode canvas{cursor:grab}.immersive header{height:65px}.immersive main{min-height:calc(100dvh - 65px)}
@media(min-width:1500px){main{grid-template-columns:minmax(0,1fr) 344px}aside{padding:25px 28px}.score{padding:20px 30px 25px}.stage-bar{padding:0 30px}}
@media(max-width:950px){header{padding:0 18px}.header-end{min-width:auto}#status{display:none}main{grid-template-columns:minmax(0,1fr) 288px}aside{padding:18px}.identity{font-size:21px}.stage-bar{padding:0 14px}.stage-actions button{font-size:12px;padding:8px}#gesture-hint{padding:0 15px;font-size:12px}.score{padding:13px}.score-heading{flex-wrap:wrap;gap:6px}#last-note{font-size:12px}.stage-labels{top:0}}
@media(max-width:700px){header{height:72px;padding:0 12px;gap:10px}.identity{font-size:19px;gap:8px}.identity small{font-size:12px;letter-spacing:.8px}.identity svg{width:21px}.transport{gap:5px}.primary{min-width:91px;padding:9px;gap:8px}.icon{width:36px;min-height:38px;padding:7px}.meter{display:none}.header-end{display:none}main{display:block}.workspace{height:66dvh;min-height:490px;position:relative;top:0}.stage-bar{height:54px;padding:0 12px}.stage-bar select{font-size:13px}#viewport{min-height:300px}.stage-labels button{font-size:12px;padding:6px 8px}.stage-labels button small{font-size:12px;margin-left:0}.number{margin-right:6px}#gesture-hint{font-size:12px;bottom:12px}.score{min-height:102px;padding:12px}#sequence{gap:4px}#sequence button{font-size:12px;min-height:45px}#sequence button small{font-size:12px}.score-heading{font-size:12px}aside{border-left:0;border-top:1px solid var(--line);padding:20px}.tabs{margin-bottom:22px}#instrument-panel{max-width:600px;margin:auto}.jog{width:74px;height:74px}.jog i{left:33px;top:6px;transform-origin:3.5px 31px}.jog-wrap small{font-size:12px}#manual-controls{bottom:31px}.range-label{font-size:15px}.muted-toggle{font-size:13px!important}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

@media(max-width:450px){.identity small{display:none}}

/* Shared language control and scene-only fullscreen. */
.stage-bar{height:auto;min-height:60px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;overflow:visible;z-index:8}.stage-actions{align-items:center;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}.locale-control{position:relative;display:inline-flex;flex-shrink:0}.globe-button{position:relative;width:42px;height:42px;padding:4px;color:#fff;border-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.globe-button svg{width:34px;height:34px;stroke:#fff;stroke-width:1;fill:none;opacity:.88}.globe-button .globe-mask{fill:#101820;stroke:none}.globe-button:hover .globe-mask{fill:#25323f}#language-code{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:400;letter-spacing:.3px;pointer-events:none}#language-menu{position:absolute;top:calc(100% + 8px);right:0;width:200px;max-height:min(430px,65dvh);overflow-y:auto;border:1px solid #50606f;border-radius:9px;padding:5px;background:#14212d;box-shadow:0 12px 40px #0008;z-index:30}#language-menu button{width:100%;border:0;border-radius:5px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 12px;text-align:left;font-size:14px;color:#fff;min-height:42px}#language-menu small{font-size:12px;color:#aab8c6}#language-menu .current{background:#2d4050}#scene-play{display:none}.workspace:fullscreen,.workspace.scene-expanded{width:100vw;height:100dvh;min-height:0;max-height:none;background:#101820;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.workspace.scene-expanded{position:fixed;inset:0;z-index:10000}.scene-fullscreen #viewport{min-height:0}.scene-fullscreen #scene-play{display:inline-flex}.scene-fullscreen .score{display:none}.scene-fullscreen .stage-bar{flex-shrink:0}.scene-fullscreen #scene-fullscreen{color:#edb66b}.scene-fullscreen .stage-labels{top:10px}
@media(max-width:700px){.stage-actions{gap:4px}.stage-actions #manual{max-width:140px}.stage-bar{gap:5px 10px;min-height:58px}.stage-bar .select-wrap{max-width:155px}.globe-button{width:38px;height:38px}.workspace{min-height:530px}.workspace.scene-expanded,.workspace:fullscreen{min-height:0}#language-menu{right:-42px}.scene-fullscreen #language-menu{right:0}}

.travel-mode-field{display:grid;gap:8px;margin-top:19px;font-size:14px;color:#c6cfd8}select:disabled{opacity:.42;cursor:default}

/* Keep the WebGL drawing buffer out of flex intrinsic-size calculations. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.workspace{height:calc(100vh - 78px);height:calc(100dvh - 78px)}
.stage-bar,.score{flex-shrink:0}
#viewport{flex:1 1 0;min-width:0}
#viewport>canvas{position:absolute;inset:0;width:100%;height:100%}
.two-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
select{min-width:0;max-width:100%}
@media(max-width:900px),(max-width:1100px) and (orientation:portrait){
  main{display:block}
  .workspace{position:relative;top:0;height:72vh;height:72svh;min-height:530px}
  aside{border-left:0;border-top:1px solid var(--line)}
  #instrument-panel{max-width:600px;margin:auto}
  aside>details,.tabs{max-width:600px;margin-left:auto;margin-right:auto}
  header{height:auto;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .header-end{display:none}
}
@media(pointer:coarse){select,.two-fields select,.section-top.small select,.stage-bar select{font-size:16px}}
@media(max-width:450px){header{gap:8px}.identity{font-size:17px}.transport{margin-left:auto}.stage-actions{gap:2px}.stage-bar{padding-left:8px;padding-right:8px}}
.workspace.scene-expanded,.workspace:fullscreen{width:100%;height:100vh;height:100dvh;min-height:0}
.scene-fullscreen #viewport{min-height:0}
#language-menu{max-width:calc(100vw - 24px);right:0}

#play-icon{display:inline-flex;width:20px;height:20px;flex-shrink:0}
#play-icon svg,#scene-play svg{width:20px;height:20px;fill:currentColor;stroke:none}
.globe-button svg{stroke-linecap:butt;stroke-linejoin:round}
#viewport.isolated-light .stage-labels button{background:#ffffffe6;color:#18222d}
#viewport.isolated-light .stage-labels button small,#viewport.isolated-light #gesture-hint{color:#4d5c6b}
#viewport.isolated-light .number{color:#805113}