:root{--ink:#1b1f2e;--panel:#232839;--line:#343b52;--text:#e6e8f0;--muted:#9aa0b5;--ivory:#ebe5d6;--ivory-shade:#cfc7b3;--ebony:#2b2220;--ebony-locked:#5a504b;--brass:#c9a24a;--brass-soft:#c9a24a59;--warn:#e58a5c;--font-display:"Rozha One", Georgia, serif;--font-ui:"Hanken Grotesk", system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (prefers-color-scheme:light){:root{--ink:#e4e6ee;--panel:#f3f4f8;--line:#c9cddb;--text:#1b1f2e;--muted:#5b6178;--ivory:#fbf8f1;--ivory-shade:#d9d2c0;--ebony:#2b2220;--brass:#9c7a2a;--brass-soft:#9c7a2a4d;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}}*{box-sizing:border-box}html,body{background:var(--ink);height:100%;color:var(--text);font:15px/1.4 var(--font-ui);-webkit-font-smoothing:antialiased;margin:0}#app{flex-direction:column;min-height:100%;display:flex}:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.mono{font-family:var(--font-mono);font-size:13px}.bar{align-items:center;gap:16px;padding:16px 24px;display:flex}.wordmark{font:400 26px/1 var(--font-display);letter-spacing:.01em;color:var(--brass);margin:0 auto 0 0}.status{color:var(--muted)}.status.warn{color:var(--warn)}.btn{font:500 14px var(--font-ui);color:var(--text);border:1px solid var(--line);cursor:pointer;background:0 0;border-radius:999px;padding:6px 14px}.btn:hover{border-color:var(--muted)}.btn[aria-expanded=true],.btn.on{border-color:var(--brass);color:var(--brass)}.btn.small{padding:2px 10px}.btn.quiet{color:var(--muted);border-color:#0000}.metro{align-items:center;gap:8px;display:inline-flex}.metro .mono:after{content:" bpm";color:var(--muted)}.beat-dot{background:var(--line);border-radius:50%;width:8px;height:8px}.beat-dot.tick{animation:.18s ease-out beat}.beat-dot.tick.accent{animation-name:beat-accent}@keyframes beat{0%{background:var(--text);transform:scale(1.4)}}@keyframes beat-accent{0%{background:var(--brass);transform:scale(1.8)}}.dashboard{border-bottom:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px 24px;padding:8px 24px 20px;display:none}.dashboard.open{display:grid}.dashboard>.row{grid-column:1/-1;justify-content:flex-end}.group{border:0;flex-direction:column;gap:10px;min-width:0;margin:0;padding:0;display:flex}.group legend{font:400 18px var(--font-display);color:var(--brass);padding:0 0 6px}.row{flex-wrap:wrap;align-items:center;gap:6px 14px;display:flex}.sublabel{color:var(--muted);margin-bottom:-6px;font-size:13px}.save-note{color:var(--muted);margin-right:auto;font-size:13px}.save-note.warn{color:var(--warn)}.ctl{align-items:center;gap:4px 8px;display:grid}.ctl-label{font-size:13px}.ctl-value{font:12px var(--font-mono);color:var(--muted);justify-self:end}.ctl.slider{grid-template-columns:1fr auto}.ctl.slider input{grid-column:1/-1}.ctl.toggle{cursor:pointer;grid-template-columns:auto 1fr}.ctl.select{grid-template-columns:1fr auto}.ctl.stepper{grid-template-columns:1fr auto auto auto}.ctl.disabled{opacity:.4}input[type=range]{width:100%;accent-color:var(--brass)}input[type=checkbox]{accent-color:var(--brass);width:16px;height:16px;margin:0}select{font:13px var(--font-ui);color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:6px;max-width:190px;padding:3px 6px}.stage{flex-direction:column;flex:1;justify-content:center;gap:14px;padding:24px;display:flex}.bellows{--air:1;height:26px;width:calc(28% + 72% * var(--air));background:linear-gradient(to bottom, transparent, #00000040), repeating-linear-gradient(to right, var(--brass) 0, var(--brass) calc(2px + 10px * var(--air)), var(--ebony) calc(2px + 10px * var(--air)), var(--ebony) calc(4px + 12px * var(--air)));opacity:calc(.35 + .65 * var(--air));border-radius:3px;margin:0 auto;transition:width 60ms linear}.keys{--whites:25;-webkit-user-select:none;user-select:none;touch-action:none;height:clamp(150px,32vh,260px);display:flex;position:relative}.key{cursor:pointer;flex-direction:column;justify-content:flex-end;align-items:center;gap:4px;padding-bottom:10px;transition:transform 40ms,background-color 80ms;display:flex;position:relative}.key.white{background:var(--ivory);border-right:1px solid var(--ivory-shade);color:#6b6455;border-radius:0 0 5px 5px;flex:1}.key.white:first-child{border-left:1px solid var(--ivory-shade)}.key.black{z-index:1;top:0;left:calc(100% / var(--whites) * var(--at) - 100% / var(--whites) * .3);width:calc(100% / var(--whites) * .6);background:var(--ebony);color:#b9ab98;border-radius:0 0 4px 4px;height:62%;font-size:11px;position:absolute}.key .name{font-size:12px;font-weight:500}.key kbd{font:11px/1.25 var(--font-mono);opacity:.8;flex-direction:column;align-items:center;min-height:2.5em;display:flex}.key:not(.in-window) .name{opacity:.45}.keys.hide-names .name,.keys.hide-kbd kbd{visibility:hidden}.key .dot{background:0 0;border-radius:50%;width:5px;height:5px}.key.in-scale .dot{background:var(--brass)}.key.sa .name{color:var(--brass);font-weight:700}.key.white:not(.in-window){background:var(--ivory-shade)}.key.locked{cursor:not-allowed}.key.locked .name,.key.locked kbd{opacity:.35}.key.white.locked{background:var(--ivory-shade)}.key.black.locked{background:var(--ebony-locked)}.key.held{transform:translateY(2px)}.key.white.held{box-shadow:inset 0 -4px 0 var(--brass);background:#e3cf9c}.key.black.held{box-shadow:inset 0 -3px 0 var(--brass);background:#4a3a2a}.hint{text-align:center;color:var(--muted);margin:4px 0 0;font-size:13px}.hint kbd{font:11px var(--font-mono);border:1px solid var(--line);border-radius:4px;margin:0 1px;padding:1px 5px}@media (width<=720px){.bar{flex-wrap:wrap;gap:10px;padding:12px 16px}.status{order:5;width:100%}.stage{padding:16px}.keys{height:180px}.key .name,.key kbd,.hint{display:none}.dashboard{padding:8px 16px 16px}}@media (prefers-reduced-motion:reduce){.beat-dot.tick,.key,.bellows{transition:none;animation:none}}