.piano-keyboard-shell{position:relative;display:grid;gap:8px;width:100%;min-width:0}.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}.piano-balance-inline{display:inline-grid;grid-template-columns:max-content 76px max-content;gap:8px;width:max-content;max-width:100%;min-width:0;align-items:center}.piano-balance-inline-label{color:var(--muted);font-size:.72rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.piano-balance-inline-range{position:relative;display:grid;width:76px;min-width:76px;height:24px;align-items:center}.piano-balance-inline-track,.piano-balance-inline-fill{position:absolute;height:6px;border-radius:999px}.piano-balance-inline-track{right:0;left:0;overflow:hidden;background:var(--line)}.piano-balance-inline-fill{left:0;background:var(--accent)}.piano-balance-inline-range input{position:relative;z-index:1;width:100%;margin:0;accent-color:var(--accent);cursor:pointer}.piano-balance-inline-range input:disabled{cursor:not-allowed;opacity:.58}.piano-keyboard-head{position:relative;z-index:18;display:flex;align-items:baseline;justify-content:space-between;gap:14px}.piano-keyboard-title-row{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px;flex:0 0 auto}.piano-keyboard-head h2,.piano-keyboard-head p{margin:0}.piano-keyboard-head h2{font-size:1.05rem;line-height:1.1}.piano-keyboard-capture{position:absolute;top:6px;left:6px;z-index:18;display:inline-flex;align-items:flex-start}.piano-keyboard-capture.in-heading{position:static}.piano-keyboard-capture-button{display:inline-grid;place-items:center;width:22px;height:22px;min-height:0;border:1px solid var(--line);border-radius:999px;padding:0;background:var(--surface-2);color:var(--muted);cursor:pointer;line-height:1;box-shadow:0 2px 8px #1f24281f}.piano-keyboard-capture-button:hover,.piano-keyboard-capture-button.active{border-color:var(--accent);color:var(--accent)}.piano-keyboard-capture-button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.piano-keyboard-capture-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.piano-keyboard-popover{position:absolute;top:30px;left:0;z-index:20;display:grid;width:min(430px,calc(100vw - 48px));gap:7px;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}.piano-keyboard-popover.in-flow{position:relative;top:auto;bottom:auto;left:auto;width:100%;margin-bottom:-8px;border-bottom-right-radius:0;border-bottom-left-radius:0}.piano-keyboard-popover-content{display:flex;min-width:0;align-items:center;gap:10px}.piano-keyboard-popover p{margin:0;font-size:.78rem;font-weight:500;line-height:1.36}.piano-keyboard-head .piano-keyboard-popover p{text-align:start}.piano-keyboard-popover strong{color:var(--text);font-weight:900}.piano-keyboard-popover-chips{display:flex;min-width:0;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:6px;padding-inline-end:26px}.piano-keyboard-octave-chip,.piano-keyboard-key-chip,.piano-keyboard-scale-chip{border:1px solid var(--line);border-radius:999px;padding:3px 7px;background:var(--surface-2);color:var(--text);font-size:.72rem;font-weight:850;line-height:1.2}.piano-keyboard-key-chip.unavailable{color:var(--muted)}.piano-keyboard-info{position:relative;display:inline-flex;flex:0 0 auto}.piano-keyboard-info.tooltip-open{z-index:1000}@media(min-width:1001px),(min-width:821px)and (min-height:601px){.piano-keyboard-head:has(.piano-keyboard-info.tooltip-open){z-index:10030}}.piano-keyboard-info-button{display:grid;width:18px;height:18px;min-height:0;place-items:center;border:1px solid var(--line);border-radius:50%;padding:0;background:var(--surface-2);color:var(--muted);cursor:help;font:inherit;font-size:.72rem;font-weight:900;line-height:1}.piano-keyboard-info-button:hover,.piano-keyboard-info-button:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}:where([role=tooltip]){--info-surface-width: 340px;--info-surface-padding: 8px;--info-surface-radius: 8px;--info-surface-font-size: .78rem;--info-surface-font-weight: 500;--info-surface-line-height: 1.32;--info-surface-compact-padding: clamp(12px, 3.5vw, 20px);color:var(--text);text-align:start}.piano-keyboard-info-popover{position:fixed;z-index:1000;top:0;left:0;display:none;width:min(430px,calc(100vw - 48px));max-height:calc(100vh - 16px);overflow-y:auto;flex-direction:column;gap:6px;padding:9px;border:1px solid var(--line);border-radius:var(--info-surface-radius);background:var(--surface);color:var(--text);font-size:var(--info-surface-font-size);font-weight:var(--info-surface-font-weight);line-height:1.36;text-align:start;white-space:normal;box-shadow:var(--shadow);transform:none;visibility:hidden}.piano-keyboard-info-popover.is-open{display:flex}.piano-keyboard-info-popover.is-positioned{visibility:visible}.piano-keyboard-head .piano-keyboard-info-popover>p{margin:0!important;color:inherit;font:inherit;line-height:inherit;text-align:start}.piano-balance-info-hint{margin-top:0!important}.piano-keyboard-instructions{flex:1 1 360px;min-width:0}.piano-keyboard-popover-accessory{display:flex;min-width:0;flex:0 1 auto;align-items:center;margin-inline-start:auto}.piano-keyboard-popover-close{position:absolute;top:6px;right:6px;display:grid;width:24px;height:24px;min-height:0;place-items:center;border:0;border-radius:999px;padding:0;background:transparent;color:var(--muted);cursor:pointer;font-size:1rem;font-weight:900;line-height:1}.piano-keyboard-popover-close:hover{color:var(--text)}.piano-keyboard-popover-close:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.piano{position:relative;display:flex;align-items:stretch;width:max-content;height:170px;margin:0 auto;padding:8px;border-radius:8px;background:var(--surface-2);direction:ltr}.piano.has-range-boundaries{height:177px;padding-top:15px}.piano-key{position:relative;display:flex;justify-content:center;align-items:flex-end;border:1px solid rgba(31,36,40,.2);border-radius:0 0 6px 6px;font-size:.72rem;font-weight:700;user-select:none}.piano-key.clickable{cursor:pointer;touch-action:manipulation}.piano-key.no-preview{cursor:not-allowed}.piano-key.clickable:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.piano-key.white{width:34px;background:#fff;color:#222;padding-bottom:8px;z-index:1}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .piano-key.white{background:#b6b6b3}}:root[data-theme=dark] .piano-key.white{background:#b6b6b3}.piano-key.black{width:22px;height:104px;margin-left:-11px;margin-right:-11px;background:#17191b;z-index:2}.piano-key.white.active,.piano-key.black.active{background:linear-gradient(rgba(var(--key-active-rgb),var(--key-confidence, 1)),rgba(var(--key-active-rgb),var(--key-confidence, 1))),var(--key-active);color:#161616;box-shadow:inset 0 0 0 3px #0000002e}.piano-key.white.keyboard-pressed,.piano-key.black.keyboard-pressed{background:var(--key-active);color:#161616;box-shadow:inset 0 0 0 3px #0000003d;transform:translateY(2px)}.piano-key.white.expected,.piano-key.white.expected.active{background:linear-gradient(rgba(var(--key-active-rgb),var(--key-confidence, 1)),rgba(var(--key-active-rgb),var(--key-confidence, 1))),var(--key-active);color:#161616}:root[data-theme=dark] .piano-key.white.active,:root[data-theme=dark] .piano-key.white.expected{background:linear-gradient(rgba(var(--key-active-rgb),var(--key-confidence, 1)),rgba(var(--key-active-rgb),var(--key-confidence, 1))),var(--key-active);color:#161616}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .piano-key.white.active,:root:not([data-theme=light]) .piano-key.white.expected{background:linear-gradient(rgba(var(--key-active-rgb),var(--key-confidence, 1)),rgba(var(--key-active-rgb),var(--key-confidence, 1))),var(--key-active);color:#161616}}.piano-key.black.expected,.piano-key.black.expected.active{background:linear-gradient(rgba(var(--key-active-rgb),var(--key-confidence, 1)),rgba(var(--key-active-rgb),var(--key-confidence, 1))),var(--key-active);color:#161616}.piano-key.expected{isolation:isolate;box-shadow:inset 0 0 0 3px #0000002e}.piano-key.black.expected{box-shadow:inset 0 0 0 3px #0000002e}@keyframes piano-expected-pulse{0%{filter:brightness(1)}to{filter:brightness(1.14)}}.piano-key.expected:before{position:absolute;z-index:0;inset:4px;border-radius:inherit;background:linear-gradient(rgba(var(--key-active-rgb),var(--key-confidence, 1)),rgba(var(--key-active-rgb),var(--key-confidence, 1))),var(--key-active);content:"";pointer-events:none;animation:piano-expected-pulse .76s ease-in-out infinite alternate}@media(max-width:820px),(max-width:1000px)and (max-height:600px){@keyframes piano-expected-pulse-mobile{0%{opacity:.62}to{opacity:1}}.piano-key.expected:before{animation-name:piano-expected-pulse-mobile;will-change:opacity}}@media(prefers-reduced-motion:reduce){.piano-key.expected:before{animation:none}}.piano-key span{position:relative;z-index:3}.piano-key .piano-keyboard-hint{position:absolute;z-index:4;display:grid;min-width:17px;height:17px;place-items:center;border-radius:999px;background:#1f24281a;font-size:.65rem;font-weight:950;line-height:1;text-transform:lowercase}.piano-key .piano-keyboard-hint-primary.black-key{bottom:7px;left:50%;background:#ffffff29;color:#fff;transform:translate(-50%)}.piano-key .piano-keyboard-hint-scale.white-key{bottom:29px;left:50%;color:#222;transform:translate(-50%)}.piano-key .piano-keyboard-hint-scale.black-key{bottom:31px;left:50%;background:#ffffff29;color:#fff;transform:translate(-50%)}.piano-note-label.keyboard-hint-active{display:grid;min-width:17px;height:17px;place-items:center;border-radius:999px;padding:0 2px;background:#1f24281a;font-size:.78rem;font-weight:950;line-height:1;text-transform:lowercase}.piano-key.expected .expected-keyboard-hint{background:#79519b;color:#fff}.piano-key.no-preview .piano-keyboard-hint-primary,.piano-key.no-preview .piano-note-label.keyboard-hint-active{opacity:.42}.piano-key .piano-octave-label{position:absolute;top:5px;left:5px;color:#5d666f;font-size:.58rem;font-weight:850;line-height:1}.piano-key.white.scale-overlay{border-width:3px;border-color:var(--scale-stroke)}.piano-key.black.scale-overlay{border-width:3px;border-color:var(--scale-stroke-black)}.piano-key .piano-range-boundary{position:absolute;top:-15px;width:18px;height:15px;color:var(--piano-roll-range-boundary, var(--accent));pointer-events:none;touch-action:none;z-index:7}.piano-key .piano-range-boundary.generation{color:var(--piano-generation-range-boundary, #b55a13);z-index:5}.piano-key .piano-range-boundary.roll{z-index:7}.piano-key .piano-range-boundary.editable{cursor:ew-resize;pointer-events:auto}.piano-key .piano-range-boundary:focus-visible{outline:3px solid var(--accent);outline-offset:1px}.piano-key .piano-range-boundary:after{content:"";position:absolute;top:0;height:170px;width:3px;border-radius:999px;background:currentColor;box-shadow:0 0 0 1px #ffffffbf;pointer-events:none}.piano-key .piano-range-boundary.min{left:-10px}.piano-key .piano-range-boundary.max{right:-10px}.piano-key .piano-range-boundary.min:after{left:8px}.piano-key .piano-range-boundary.max:after{right:8px}.piano-key .piano-range-boundary-label{position:absolute;top:1px;width:max-content;max-width:72px;overflow:hidden;color:currentColor;font-size:.58rem;font-weight:950;line-height:1;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;z-index:1}.piano-key .piano-range-boundary.min.inside .piano-range-boundary-label{left:14px}.piano-key .piano-range-boundary.min.outside .piano-range-boundary-label,.piano-key .piano-range-boundary.max.inside .piano-range-boundary-label{right:14px}.piano-key .piano-range-boundary.max.outside .piano-range-boundary-label{left:14px}.mobile-tooltip-close{display:none}@media(max-width:820px),(max-width:1000px)and (max-height:600px){.top-shell:has([role=tooltip]){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}[role=tooltip]{position:fixed!important;z-index:1000!important;inset:auto max(10px,env(safe-area-inset-right)) auto max(10px,env(safe-area-inset-left))!important;top:50%!important;width:auto!important;min-width:0!important;max-width:none!important;height:auto!important;max-height:calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;overflow:auto!important;overscroll-behavior:contain;align-content:center;align-items:center;justify-content:center;transform:translateY(-50%)!important;pointer-events:auto!important;border:1px solid var(--line)!important;border-radius:12px!important;padding:var(--info-surface-compact-padding)!important;background:var(--surface)!important;color:var(--text)!important;box-shadow:0 18px 48px #1114164d!important}[role=tooltip].mobile-tooltip-open{display:flex}.mobile-tooltip-backdrop{display:none}[role=tooltip].is-open+.mobile-tooltip-backdrop,[role=tooltip].mobile-tooltip-open+.mobile-tooltip-backdrop,.runtime-chip.chip-more:focus-within>[role=tooltip]+.mobile-tooltip-backdrop{position:fixed;z-index:999;inset:0;display:block;background:#1114169e;pointer-events:none}[role=tooltip].is-open~button.mobile-tooltip-close,[role=tooltip].mobile-tooltip-open~button.mobile-tooltip-close,.runtime-chip.chip-more:focus-within>[role=tooltip]~button.mobile-tooltip-close{position:fixed;z-index:1001;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));display:grid;width:29px!important;min-width:29px!important;height:29px;min-height:29px;place-items:center;border:0;border-radius:50%;padding:0;background:#000000ad;color:#fff;cursor:pointer;font:inherit;font-size:0;line-height:1;box-shadow:none}button.mobile-tooltip-close:before,button.mobile-tooltip-close:after{position:absolute;width:21px;height:2px;border-radius:999px;background:currentColor;content:""}button.mobile-tooltip-close:before{transform:rotate(45deg)}button.mobile-tooltip-close:after{transform:rotate(-45deg)}button.mobile-tooltip-close:hover,button.mobile-tooltip-close:focus-visible{background:var(--accent);color:#fff;outline:none}html[dir=rtl] [role=tooltip].is-open~button.mobile-tooltip-close,html[dir=rtl] [role=tooltip].mobile-tooltip-open~button.mobile-tooltip-close,html[dir=rtl] .runtime-chip.chip-more:focus-within>[role=tooltip]~button.mobile-tooltip-close{right:auto;left:max(14px,env(safe-area-inset-left))}.home-page [role=tooltip]{top:calc(50% + ((var(--home-header-height) - var(--home-footer-height)) / 2))!important;max-height:calc(100dvh - var(--home-header-height) - var(--home-footer-height) - 20px)!important}.home-page [role=tooltip].is-open+.mobile-tooltip-backdrop,.home-page [role=tooltip].mobile-tooltip-open+.mobile-tooltip-backdrop,.home-page .runtime-chip.chip-more:focus-within>[role=tooltip]+.mobile-tooltip-backdrop{top:var(--home-header-height);bottom:var(--home-footer-height)}.home-page [role=tooltip].is-open~button.mobile-tooltip-close,.home-page [role=tooltip].mobile-tooltip-open~button.mobile-tooltip-close,.home-page .runtime-chip.chip-more:focus-within>[role=tooltip]~button.mobile-tooltip-close{top:calc(var(--home-header-height) + 14px)}.wizard-app [role=tooltip]{top:calc(50% + ((var(--wizard-mobile-header-height) - var(--wizard-mobile-footer-height)) / 2))!important;max-height:calc(100dvh - var(--wizard-mobile-header-height) - var(--wizard-mobile-footer-height) - 20px)!important}.wizard-app [role=tooltip].is-open+.mobile-tooltip-backdrop,.wizard-app [role=tooltip].mobile-tooltip-open+.mobile-tooltip-backdrop,.wizard-app .runtime-chip.chip-more:focus-within>[role=tooltip]+.mobile-tooltip-backdrop{top:var(--wizard-mobile-header-height);bottom:var(--wizard-mobile-footer-height)}.wizard-app [role=tooltip].is-open~button.mobile-tooltip-close,.wizard-app [role=tooltip].mobile-tooltip-open~button.mobile-tooltip-close,.wizard-app .runtime-chip.chip-more:focus-within>[role=tooltip]~button.mobile-tooltip-close{top:calc(var(--wizard-mobile-header-height) + 14px)}}