.metronome-icon{position:relative;display:inline-block;flex:0 0 auto;vertical-align:middle}.metronome-icon svg{display:block}.metronome-pendulum{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:50% 70.833%;transform:rotate(var(--metronome-angle, -22deg))}[data-swing] .metronome-pendulum{animation:metronome-swing-left var(--metronome-beat, .5s) cubic-bezier(.37,0,.63,1) var(--metronome-delay, 0ms) both}[data-swing=right] .metronome-pendulum{animation-name:metronome-swing-right}@keyframes metronome-swing-left{0%{transform:rotate(24deg)}to{transform:rotate(-24deg)}}@keyframes metronome-swing-right{0%{transform:rotate(-24deg)}to{transform:rotate(24deg)}}@media(prefers-reduced-motion:reduce){.metronome-pendulum,[data-swing] .metronome-pendulum{transform:rotate(-22deg);animation:none}}:root:has(dialog[open]){overflow:hidden}.dialog.dialog{overflow:hidden}.dialog .dialog-content{display:flex;flex-direction:column;max-height:calc(100svh - 50px);padding:0}.dialog .dialog-header{position:sticky;top:0;z-index:1;display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px 14px;background:var(--panel);border-bottom:1px solid var(--line)}.dialog .dialog-header h2{min-width:0;margin:0;line-height:1.45;overflow-wrap:anywhere}.dialog .dialog-close{position:static;display:flex;flex:0 0 40px;align-items:center;justify-content:center;width:40px;height:40px;padding:0}.dialog .dialog-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 26px}.dialog-body>.dialog-intro:first-child{margin-top:0}@media(max-width:560px){.dialog .dialog-header{gap:12px;padding:12px 18px}.dialog .dialog-body{padding:18px 18px 22px}.dialog .dialog-close{flex-basis:44px;width:44px;height:44px}}.select-control{display:inline-flex;flex:0 0 auto;min-width:0}.select-trigger{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:38px;min-width:160px;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:5px;color:var(--text);font:inherit;font-size:12px}.select-trigger>svg{color:var(--muted);transition:transform .14s ease}.select-trigger[aria-expanded=true]{border-color:var(--accent)}.select-trigger[aria-expanded=true]>svg{transform:rotate(180deg);color:var(--accent)}.select-trigger:hover{background:var(--surface);color:var(--accent)}.select-control--compact .select-trigger{min-width:40px;min-height:36px;gap:7px;padding:7px 5px;background:transparent;border-color:transparent;color:var(--muted);font-size:11px}.select-control--compact .select-trigger:hover,.select-control--compact .select-trigger[aria-expanded=true]{background:var(--surface);color:var(--accent)}.header .select-control--compact .select-trigger{justify-content:center}.select-menu{position:fixed;inset:auto;margin:0;padding:5px;max-height:min(320px,calc(100svh - 16px));overflow:auto;z-index:30;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:7px;box-shadow:0 8px 28px #0003;font:inherit;font-size:12px}.select-menu::backdrop{background:transparent}.select-option{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:36px;padding:7px 10px;border-radius:3px;cursor:pointer;-webkit-user-select:none;user-select:none}.select-option.is-active{background:var(--surface)}.select-option[aria-selected=true]{color:var(--accent)}.select-option>svg{flex:0 0 auto}@media(max-width:360px){.header .brand-name{font-size:20px}.header .header-actions{gap:1px}.header .select-control--compact .select-trigger{min-width:36px;gap:4px;padding-inline:3px}}.library-dialog{width:min(610px,calc(100% - 32px));overflow:hidden}.library-search{display:flex;flex-shrink:0;align-items:center;gap:12px;padding:12px 14px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px}.library-search:focus-within{border-color:var(--accent)}.library-search input{width:100%;min-width:0;padding:0;border:0;outline:none;background:transparent;color:var(--text);font:inherit;font-size:12px;line-height:1.7}.library-search input::placeholder{color:var(--muted);opacity:1}.library-search input::-webkit-search-cancel-button{cursor:pointer}.library-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:14px}.library-filters{display:flex;flex:1 1 275px;min-width:0;gap:3px;padding:3px;border:1px solid var(--line);border-radius:7px}.library-filters button{display:inline-flex;flex:1;min-width:0;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px;border-radius:4px;color:var(--muted);font-size:11px;line-height:1.4}.library-filters button>svg{flex-shrink:0;visibility:hidden}.library-filters button:hover{color:var(--text);background:color-mix(in srgb,var(--surface) 60%,transparent)}.library-filters button[aria-pressed=true]{color:var(--accent);background:var(--surface)}.library-filters button[aria-pressed=true]>svg{visibility:visible}.library-octave{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-left:auto;color:var(--muted);font-size:10px}.library-octave .select-trigger{white-space:nowrap}.library-summary{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;margin:16px 0 8px;color:var(--muted);font-size:11px;line-height:1.5}.library-summary strong{color:var(--text);font-weight:400}.library-list{min-height:100px;margin:0 -10px;padding:0 10px}.library-row{display:flex;width:100%;gap:16px;align-items:center;min-height:64px;padding:12px 10px;text-align:left;border-radius:5px;color:var(--muted)}.library-row:hover,.library-row.selected{background:var(--surface)}.library-row:focus-visible{outline-offset:-2px}.library-row.selected{color:var(--accent)}.library-row-icon{display:flex;width:22px;flex:0 0 22px;justify-content:center}.library-row-copy{flex:1;min-width:0}.library-row-copy strong{display:block;color:var(--text);font-size:13px;line-height:1.45;font-weight:400}.library-row.selected .library-row-copy strong{color:var(--accent)}.library-row-copy small{display:block;margin-top:4px;font-size:10px;line-height:1.5;color:var(--muted)}.library-level-count{flex-shrink:0;color:var(--faint);font-size:9px;white-space:nowrap}.library-duration{flex-shrink:0;min-width:4ch;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}.library-row>svg{flex-shrink:0}.random-row{margin-bottom:8px;border-bottom:1px solid var(--line);border-radius:0;padding-bottom:16px}.library-empty{padding:38px 12px;text-align:center;font-size:12px;line-height:1.8;color:var(--muted)}.library-footer{margin:12px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:9px;line-height:1.7}@media(max-width:600px){.library-row{gap:10px;padding-inline:7px}.library-row-copy strong{font-size:12px}.library-level-count{font-size:8px}}.segmented{display:inline-flex;flex-shrink:0;align-items:center;gap:2px}.segmented button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:4px 10px;border:0;border-radius:6px;color:var(--muted);background:transparent;font-size:11px;line-height:1.2;white-space:nowrap;transition:color .12s ease,background .12s ease}.segmented button:not([aria-pressed=true],[aria-checked=true],:disabled):hover{color:var(--text)}.segmented button:is([aria-pressed=true],[aria-checked=true]){color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.segmented button:disabled{cursor:not-allowed;opacity:.4}.segmented button:focus-visible{outline-width:1px;outline-offset:1px}.segmented button>svg{flex-shrink:0}.segmented-label{display:inline-block}.segmented-label:first-letter{text-transform:uppercase}:root[data-theme=glacier]{--bg: #edf4f8;--surface: #e0eaf1;--panel: #f7fafc;--text: #243846;--muted: #4d687c;--faint: #7d92a3;--accent: #245fa5;--on-accent: #ffffff;--success: #28715a;--error: #b43b58;--warning: #93600c;--line: #c9d9e4;--key-black: #465d70;--key-black-text: #f3f8fc;color-scheme:light}:root[data-theme=parchment]{--bg: #f7f0e2;--surface: #eee4d1;--panel: #fff9ed;--text: #433a2d;--muted: #746048;--faint: #9a866d;--accent: #a04e30;--on-accent: #fff9ed;--success: #4a744d;--error: #b03550;--warning: #8f5a0b;--line: #dfd1b9;--key-black: #665545;--key-black-text: #faf4e8;color-scheme:light}:root[data-theme=midnight]{--bg: #172337;--surface: #121c2d;--panel: #21314a;--text: #e0e9f5;--muted: #99acc8;--faint: #6e83a3;--accent: #8fbdf1;--on-accent: #182c47;--success: #94cdb4;--error: #f2a2ad;--warning: #e6c583;--line: #344660}:root[data-theme=forest]{--bg: #1d2924;--surface: #17221d;--panel: #29372e;--text: #e0e9dd;--muted: #a0b49f;--faint: #738b76;--accent: #afc99d;--on-accent: #243522;--success: #9dd4ba;--error: #ed9e96;--warning: #dfc884;--line: #3a4e3f}:root[data-theme=amber]{--bg: #282622;--surface: #201f1b;--panel: #35322b;--text: #eee7d8;--muted: #b7ab94;--faint: #8c806c;--accent: #e7bd73;--on-accent: #352914;--success: #adca9f;--error: #ed9ba1;--warning: #f19b62;--line: #4c4539}:root[data-theme=classic]{--bg: #ffffff;--surface: #f3f3f3;--panel: #ffffff;--text: #000000;--muted: #585858;--faint: #777777;--accent: #000000;--on-accent: #ffffff;--success: #216b45;--error: #b4233a;--warning: #9c5a00;--line: #d6d6d6;--key-black: #000000;--key-black-text: #ffffff;color-scheme:light}:root[data-theme=classic] :is(.note-future,.treble-clef,.bass-clef){color:#000}:root[data-theme=classic] :is(.staff-line,.staff-barline){stroke:#000}:root[data-theme=classic] .piano-guide .white-key{--classic-key-fill: #ffffff;--classic-key-ink: #000000;border:1px solid var(--line)}:root[data-theme=classic] .piano-guide .black-key{--classic-key-fill: #000000;--classic-key-ink: #ffffff}:root[data-theme=classic] .piano-guide .piano-key:where(:not(.key-pressed):not(.wrong-key):not([data-attack]):not([data-accepted=true])){background:var(--classic-key-fill);color:var(--classic-key-ink)}:root[data-theme=classic] .piano-guide .target-key:where(:not(.key-pressed):not(.wrong-key):not([data-attack]):not([data-accepted=true])){box-shadow:inset 0 -4px var(--classic-key-ink)}:root[data-theme=classic] .piano-guide .piano-key[data-accepted=true]:not([data-attack]){background:var(--success)}:root[data-theme=classic] .piano-guide button.black-key:focus-visible{outline-color:#fff}.header .brand{direction:ltr;gap:1px;align-items:center}.header .brand-mark{flex:0 0 auto;width:17px;height:21px;transform:translateY(-1px)}.header .brand-name{white-space:nowrap}.theme-list .theme-choice{display:grid;grid-template-columns:55px minmax(0,1fr) 18px;align-items:center;gap:14px;width:100%;padding:12px;border:1px solid transparent;border-radius:9px;text-align:start}.theme-list .theme-choice:hover{background:var(--surface);border-color:var(--line)}.theme-list .theme-choice[aria-pressed=true]{background:var(--surface);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}.theme-list .theme-preview{flex:0 0 55px}.theme-list .theme-choice>span:nth-child(2){min-width:0}.theme-list .theme-choice small{line-height:1.5}.theme-check{display:flex;align-items:center;justify-content:center;width:18px;color:var(--accent)}.theme-menu{position:relative}.theme-popover{position:absolute;inset-inline-end:0;bottom:calc(100% + 8px);z-index:20;display:grid;gap:2px;width:240px;max-height:min(480px,70vh);overflow:auto;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--panel, var(--bg));box-shadow:0 10px 30px #0004;animation:theme-popover-in .14s ease both}@keyframes theme-popover-in{0%{opacity:0;transform:translateY(4px)}}.theme-option{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:10px;width:100%;min-height:34px;padding:5px 8px;border-radius:7px;color:var(--text);font-size:12px;text-align:start}.theme-option .theme-preview{width:34px;height:20px}.theme-tone{justify-self:stretch;margin-bottom:4px}.theme-tone button{flex:1 1 0}.dialog .theme-tone{display:flex;margin:0 0 12px}.theme-groups{display:grid}.theme-groups>*{grid-area:1 / 1}.theme-groups>[inert]{visibility:hidden}.theme-options{display:grid;gap:2px;align-content:start}.theme-option:is(:hover,:focus-visible){background:var(--surface)}.theme-option[aria-pressed=true]{color:var(--accent)}@media(prefers-reduced-motion:reduce){.theme-popover{animation:none}}@media(max-width:600px){.header .brand-mark{width:14px;height:17px}.theme-list .theme-choice{gap:10px;padding:10px}}.tempo-bpm .select-control.tempo-picker .select-trigger{min-width:78px;min-height:32px;gap:6px;padding:5px 2px;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--muted);font-size:11px}.tempo-bpm .select-control.tempo-picker .select-trigger:hover,.tempo-bpm .select-control.tempo-picker .select-trigger[aria-expanded=true]{background:transparent;color:var(--accent)}.tempo-picker-value{display:inline-flex;align-items:baseline;gap:6px}.tempo-picker-value small{color:var(--muted);font-size:9px;font-weight:400}.tempo-picker-menu{padding:5px;overflow-x:hidden;touch-action:manipulation}.tempo-picker-row{display:grid;grid-template-columns:42px minmax(0,1fr) 24px;align-items:center;gap:3px;min-height:38px;border-radius:4px}.tempo-picker-row.is-expanded{background:var(--surface)}.tempo-picker-refinements{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px}.tempo-picker-option{display:flex;align-items:center;justify-content:center;height:34px;border:1px solid transparent;border-radius:3px;font-size:11px;cursor:pointer;-webkit-user-select:none;user-select:none}.tempo-picker-refinements .tempo-picker-option{color:var(--muted)}.tempo-picker-option.is-active{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.tempo-picker-option[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}.tempo-picker-expand{display:flex;align-items:center;justify-content:center;width:24px;min-height:34px;padding:0;color:var(--faint);font-size:15px}.tempo-picker-expand:hover,.tempo-picker-expand[aria-expanded=true]{color:var(--muted)}.playback-view-pair{display:inline-flex;align-items:center;gap:1px}@media(max-width:760px){.playback-view-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.playback-view button{min-width:40px;min-height:36px;padding-inline:8px}}.composition-trigger{display:inline-flex;align-items:center;gap:9px;min-width:0;min-height:40px;padding:3px 0;color:var(--text);font-size:13px;line-height:1.35;text-align:start}.composition-text{display:flex;flex-direction:column;min-width:0}.composition-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.composition-meta{display:flex;align-items:baseline;gap:6px;min-width:0;overflow:hidden;color:var(--muted);font-size:11px;white-space:nowrap;text-overflow:ellipsis}.composition-level{color:var(--muted);font-size:11px;white-space:nowrap;font-weight:400}.composition-duration{flex-shrink:0;color:var(--muted);font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:400}.composition-separator,.composition-trigger>svg{color:var(--muted);flex-shrink:0}.composition-trigger>svg:last-child{margin-inline-start:auto}.composition-trigger:hover,.composition-trigger:hover>svg{color:var(--accent)}.input-dock--actions{display:flex;align-items:center;gap:10px}@media(max-width:600px){.composition-trigger{font-size:12px;gap:7px}.composition-level,.composition-duration,.composition-meta{font-size:10px}}.note-stream{--note-row-height: 52px;--note-cell-width: 62px;--note-column-gap: clamp(12px, 2.25vw, 25px);position:relative;min-width:0;width:100%;font-family:inherit}.note-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.letters-viewport{height:calc(var(--note-row-height) * 2);overflow:hidden;overflow-anchor:none;scroll-behavior:smooth;padding:0 2px}.letters-flow{display:flex;flex-wrap:wrap;column-gap:var(--note-column-gap);align-content:start;overflow:hidden}.letter-cell{position:relative;flex:0 0 var(--note-cell-width);height:var(--note-row-height)}.letter-cell:before{content:"";position:absolute;left:calc(var(--note-column-gap) / -2);top:calc(var(--note-row-height) * .28);height:calc(var(--note-row-height) * .42);width:1px;background:var(--muted);opacity:.3;pointer-events:none}.letter-note{position:relative;display:inline-flex;align-items:baseline;justify-content:center;width:100%;height:var(--note-row-height);padding-top:8px;font-size:30px;font-weight:500;line-height:1.25;letter-spacing:-.06em;transition:color .12s ease}.letter-note sub{bottom:0;position:relative;margin-left:3px;font-size:.48em;line-height:1;font-weight:400;letter-spacing:0;transform:translateY(3px)}.note-future{color:var(--muted)}.note-past{color:var(--success);opacity:.68}.note-past.note-missed{color:var(--error);opacity:.85;animation:none}.note-current{color:var(--accent)}.last-correct{color:var(--success);animation:correct-note .28s ease-out}@keyframes correct-note{0%{opacity:1}to{opacity:.68}}.letter-note.note-current:after{content:"";position:absolute;height:3px;width:42px;border-radius:3px;bottom:4px;background:currentColor}.note-stream[data-feedback=wrong] .note-current{color:var(--error)}.staff-wrap{position:relative;height:var(--staff-height, 120px);padding-top:0;min-width:0}.staff-clef{position:absolute;top:0;left:0;width:var(--clef-width, 40px);height:var(--staff-height, 120px)}.staff-viewport{margin-left:var(--clef-width, 40px);height:var(--staff-height, 120px);overflow:hidden;overflow-anchor:none;scroll-behavior:smooth}.staff-score{display:block;max-width:none;height:var(--staff-height, 120px);overflow:hidden}.staff-line{stroke:var(--muted);stroke-width:1;opacity:.45;vector-effect:non-scaling-stroke}.staff-barline{stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke;opacity:.48;pointer-events:none}.treble-clef,.bass-clef{color:var(--muted)}.treble-clef path,.bass-clef path{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:3.4}.treble-clef ellipse,.bass-clef ellipse,.bass-clef circle,.note-head{fill:currentColor}.note-stem,.note-ledger,.note-sharp path,.staff-cursor{stroke:currentColor;fill:none;stroke-width:1.6}.note-sharp .sharp-crossbars{stroke-width:3}.staff-cursor{stroke-linecap:round;stroke-width:3}.staff-note-caption{fill:currentColor;font-size:18px;letter-spacing:.02em}.staff-octave{fill:var(--accent);font-size:20px;font-weight:600}.note-ottava{fill:currentColor;font-size:15px;font-style:italic;opacity:.85}@media(max-width:600px){.note-stream{--note-row-height: 44px;--note-cell-width: 48px;--note-column-gap: 12px}.letter-note{font-size:27px}.letter-note.note-current:after{width:36px;bottom:3px}.staff-wrap{padding-top:0}}@media(prefers-reduced-motion:reduce){.letters-viewport,.staff-viewport{scroll-behavior:auto}.letter-note{transition:none}.last-correct{animation:none;opacity:1}}.note-stream--roomy{--note-row-height: 70px;--note-cell-width: 76px}.note-stream--roomy .letter-note{font-size:40px;padding-top:10px}.note-stream[data-note-naming=solfege]{--note-cell-width: 100px}.note-stream[data-note-naming=solfege] .letter-note{font-size:28px}.note-stream--roomy[data-note-naming=solfege]{--note-cell-width: 120px}.note-stream--roomy[data-note-naming=solfege] .letter-note{font-size:35px}@media(max-width:600px){.note-stream--roomy{--note-row-height: 58px;--note-cell-width: 56px}.note-stream--roomy .letter-note{font-size:33px}.note-stream[data-note-naming=solfege]{--note-cell-width: 86px}.note-stream[data-note-naming=solfege] .letter-note{font-size:24px}.note-stream--roomy[data-note-naming=solfege]{--note-cell-width: 100px}.note-stream--roomy[data-note-naming=solfege] .letter-note{font-size:29px}}.score-pages{position:relative;display:flex;flex-direction:column;gap:8px;overflow:clip}.score-pages.grand-staff{gap:14px}.score-system{position:relative;overflow:clip}.score-system--empty{visibility:hidden}.score-pages .staff-track{transition:none}.score-pages:not([data-systems="1"]) .score-system[data-reading] :is(.treble-clef,.bass-clef){color:var(--accent)}.score-cursor{position:absolute;top:0;left:0;z-index:1;width:3px;height:120px;margin-left:-1.5px;border-radius:2px;background:color-mix(in srgb,var(--accent) 65%,transparent);pointer-events:none;will-change:transform;transition:transform 80ms cubic-bezier(.2,.7,.3,1)}.score-cursor[data-jump=true]{transition:none}.score-badge{position:absolute;top:2px;left:7px;padding:1px 6px;border-radius:4px;background:var(--bg);color:var(--success);font-size:11px;line-height:1.5;white-space:nowrap;pointer-events:none;animation:score-badge-out .7s ease-in both}.score-badge[data-tone=near]{color:var(--warning, #e7c27c)}.score-badge[data-tone=bad]{color:var(--error)}@keyframes score-badge-out{0%,55%{opacity:1}to{opacity:0}}.score-cursor[data-count-in=true]{opacity:.4}.score-pages :is(.staff-glyph,.staff-rest,.staff-bar,.note-tie){animation:score-system-in .2s ease-out backwards}@keyframes score-system-in{0%{opacity:0}}.staff-page-seam{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 4;opacity:.45;vector-effect:non-scaling-stroke}.note-stream--fill{display:flex;flex-direction:column;flex:1 1 0}.note-stream--fill .score-pages{flex:1 1 0;min-height:var(--score-system-height, 120px);justify-content:center}.note-head--open{fill:var(--bg);stroke:currentColor;stroke-width:2.4}.note-dot,.note-flag{fill:currentColor}.note-tuplet{fill:currentColor;font-size:16px;font-style:italic}.note-tie{stroke:currentColor;stroke-width:1.4;fill:none}.staff-barline--ending{stroke-width:1.8}.grand-staff{position:relative}.staff-hand-label{position:absolute;top:50%;inset-inline-end:100%;z-index:1;margin-inline-end:3px;color:var(--muted);font-size:9px;line-height:1;white-space:nowrap;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}.staff-chord-caption{font-size:15px;letter-spacing:0}.rest-shape{fill:currentColor}.rest-stem{stroke:currentColor;stroke-width:2;fill:none}@media(prefers-reduced-motion:reduce){.score-pages :is(.staff-glyph,.staff-rest,.staff-bar,.note-tie){animation:none}.score-cursor{transition:none}.score-badge{animation:none}}.piano-guide{min-width:0;max-width:100%}.piano-scroll{overflow:clip;overflow-anchor:none;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.piano-scroll:focus-visible{outline:1px solid var(--accent);outline-offset:3px;border-radius:4px}.piano-roll{box-sizing:content-box}.piano-guide .piano-keys{display:block;height:82px}.piano-guide .piano-key{flex-direction:column;align-items:center;justify-content:flex-end;font-size:clamp(8px,calc(12px * var(--piano-key-scale, 1)),12px);gap:5px}.piano-guide button.piano-key{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;padding-inline:0}.piano-guide button.piano-key:disabled{opacity:1;cursor:default}.piano-guide button.piano-key:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.piano-guide .white-key{position:absolute;top:0;height:100%;transform:translate(-50%);padding-bottom:11px}.piano-guide .black-key{height:50px;padding-bottom:7px;font-size:10px}.piano-guide[data-strip=true] .piano-keys{height:62px}.piano-guide[data-strip=true] .black-key{height:38px}.key-note{min-height:12px}.key-binding{display:inline-flex;align-items:center;justify-content:center;min-width:min(18px,calc(18px * var(--piano-key-scale, 1)));height:18px;padding-inline:min(2px,calc(2px * var(--piano-key-scale, 1)));border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:3px;font:inherit;font-size:clamp(7px,calc(12px * var(--piano-key-scale, 1)),12px);line-height:1}.piano-guide[data-keyboard-bindings=true] .piano-key[data-bound=true] .key-note:not(.key-note-anchor){display:none}.piano-guide[data-keyboard-bindings=true] .piano-key[data-bound=true] .key-note-anchor{min-height:0;font-size:9px;line-height:1;opacity:.75}.piano-guide .key-pressed{box-shadow:inset 0 -4px color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent) 32%,var(--bg));color:var(--text)}.piano-guide .key-pressed.target-key{background:var(--accent);color:var(--on-accent);box-shadow:inset 0 -4px color-mix(in srgb,var(--on-accent) 30%,transparent)}.piano-guide[data-previewing=true] .piano-key{transition:none}.piano-guide:where([data-tempo-practice=true]) .target-key{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}.piano-guide:where([data-tempo-practice=true]) .white-key.target-key{background:color-mix(in srgb,var(--muted) 18%,var(--bg));color:var(--accent)}.piano-guide:where([data-tempo-practice=true]) .black-key.target-key{background:var(--key-black, var(--bg));color:var(--accent)}.piano-guide .piano-key[data-attack]{color:var(--on-accent);box-shadow:none;transition:none}.piano-guide .piano-key[data-attack=on-time]{background:var(--success)}.piano-guide .piano-key[data-accepted=true]{background:color-mix(in srgb,var(--success) 70%,var(--bg));color:var(--on-accent)}.piano-guide .piano-key[data-attack=wrong]{background:var(--error)}.piano-guide .piano-key[data-attack=early],.piano-guide .piano-key[data-attack=late]{background:var(--warning, #e7c27c)}.key-attack-flash{position:absolute;top:2px;right:2px;bottom:2px;left:2px;pointer-events:none;border:1px solid currentColor;border-radius:inherit;animation:key-attack-pulse .26s ease-out both}@keyframes key-attack-pulse{0%{opacity:.45;transform:scale(.92)}to{opacity:0;transform:scale(1)}}.piano-rain{position:relative;margin-bottom:5px;overflow:hidden;contain:layout paint}.piano-rain-track{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.piano-rain[data-animated=true] .piano-rain-track{will-change:transform}.piano-rain[data-timed=true] .piano-rain-step,.piano-rain[data-timed=true] .piano-rain-note{transition:none}.piano-rain:not([data-timed=true]) .piano-rain-step[data-outside=true]{visibility:hidden}.piano-strike-line{position:absolute;inset:auto 0 0;z-index:1;height:2px;background:color-mix(in srgb,var(--accent) 75%,transparent);box-shadow:0 0 8px color-mix(in srgb,var(--accent) 40%,transparent)}.piano-strike-flash{position:absolute;inset:auto 0 0;z-index:2;height:0;pointer-events:none}.piano-strike-flash i{position:absolute;bottom:0;height:16px;border-radius:4px 4px 0 0;background:var(--accent);box-shadow:0 0 14px var(--accent);transform:translate(-50%);transform-origin:bottom;animation:piano-strike-flash .38s ease-out both}@keyframes piano-strike-flash{0%{opacity:1;transform:translate(-50%) scaleY(1.2)}to{opacity:0;transform:translate(-50%) scaleY(.4)}}.piano-rain-lane{position:absolute;width:1px;inset-block:0;background:linear-gradient(transparent,color-mix(in srgb,var(--muted) 10%,transparent))}.piano-rain-step{position:absolute;left:0;width:100%;transition:top .18s ease-out}.piano-rain-note{position:absolute;height:100%;overflow:hidden;display:block;transform:translate(-50%);border-radius:4px;color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg));font-size:12px;font-weight:500;line-height:1;transition:background .18s ease,color .18s ease}.piano-rain-step[data-order="0"] .piano-rain-note{background:var(--accent);color:var(--on-accent)}.piano-rain-step[data-order="1"] .piano-rain-note{background:color-mix(in srgb,var(--accent) 25%,var(--bg))}.piano-rain-step[data-order="3"] .piano-rain-note{background:color-mix(in srgb,var(--accent) 10%,var(--bg));color:color-mix(in srgb,var(--accent) 75%,var(--muted))}.piano-rain-step[data-distant=true] .piano-rain-note{background:color-mix(in srgb,var(--accent) 7%,var(--bg));color:color-mix(in srgb,var(--accent) 55%,var(--muted))}.piano-rain-note[data-hand=left]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}.piano-guide[data-note-naming=solfege] .key-note{font-size:clamp(7px,calc(11px * var(--piano-key-scale, 1)),11px);letter-spacing:-.04em;white-space:nowrap}.piano-guide[data-note-naming=solfege] .black-key .key-note{font-size:clamp(6px,calc(9px * var(--piano-key-scale, 1)),9px);letter-spacing:-.06em}.piano-guide[data-note-naming=solfege] .piano-rain-note{font-size:10px;letter-spacing:-.04em;white-space:nowrap}.piano-bank{display:flex;align-items:center;justify-content:flex-end;gap:5px;min-height:28px;margin-bottom:4px;color:var(--muted);font-size:10px}.piano-bank>span{display:inline-flex;align-items:center;gap:5px}.piano-bank>span:first-child{margin-inline-end:5px}.piano-bank button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:4px;background:transparent;color:var(--muted)}.piano-bank button:not(:disabled):hover{color:var(--text);background:var(--surface)}.piano-bank button:disabled{opacity:.3}.piano-bank-range{min-width:7em;justify-content:center;font-variant-numeric:tabular-nums}.piano-bank[inert]{visibility:hidden}@media(max-width:600px){.piano-guide .piano-keys{height:76px}.piano-guide .black-key{height:46px;font-size:9px}.piano-rain-note{font-size:11px}}@media(hover:none)and (pointer:coarse){.piano-bank,.piano-guide[data-keyboard-bindings=true] .key-binding{display:none}.piano-guide[data-keyboard-bindings=true] .piano-key[data-bound=true] .key-note:not(.key-note-anchor){display:block}.piano-guide[data-keyboard-bindings=true] .piano-key[data-bound=true] .key-note-anchor{min-height:12px;font-size:inherit;line-height:inherit;opacity:1}}@media(prefers-reduced-motion:reduce){.key-attack-flash{display:none;animation:none}.piano-strike-flash i{animation:none;opacity:.5}.piano-guide .piano-key,.piano-rain-step,.piano-rain-note{transition:none}.piano-rain-track{transform:none!important;will-change:auto!important}.piano-rain[data-timed=true] .piano-rain-step{top:var(--rain-static-top)!important;transition:none}.piano-rain-step[data-outside=true]{visibility:hidden}}.practice-area .piano-guide{margin-top:12px}.without-rain .piano-guide{margin-top:18px}.app-shell.is-view-notes .main{display:flex;flex-direction:column}.app-shell.is-view-notes .practice-area{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}.app-shell.is-view-notes .stream-wrap{display:flex;flex-direction:column;flex:1 1 0}.preferences-settings.dialog{width:min(660px,calc(100% - 32px))}.settings-panel{display:grid;gap:28px}.settings-section{min-width:0;margin:0;padding:0;border:0}.settings-section+.settings-section{border-top:1px solid var(--line);padding-top:24px}.settings-section legend{float:left;width:100%;padding:0;margin:0 0 17px;color:var(--accent);font-size:12px;font-weight:500}.settings-section legend+*{clear:both}.settings-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);align-items:center;gap:15px 24px;padding:9px 0}.settings-row-label{min-width:0;font-size:12px;line-height:1.6}.settings-row-label:first-letter{text-transform:uppercase}.settings-row-label small{display:block;margin-top:6px;color:var(--muted);font-size:10px;line-height:1.7}.settings-row-control{display:flex;justify-content:flex-end;min-width:0}.settings-row-control>.select-control{width:100%}.settings-row-control .select-trigger{width:100%;min-width:0;text-align:start}.settings-row-control .select-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.settings-row-control .select-trigger>svg{flex-shrink:0}.settings-row-control>.tempo-bpm{display:flex;align-items:center;gap:8px;width:100%}.settings-row-control>.tempo-bpm .select-control{flex:1}.settings-row-control .tempo-bpm .select-control.tempo-picker .select-trigger{width:100%;min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:5px;background:var(--surface);color:var(--text);font-size:12px}.settings-row-control .select-control--compact .select-trigger{min-height:38px;padding:8px 12px;background:var(--surface);border-color:var(--line);color:var(--text);font-size:12px}.settings-segments{display:flex;gap:3px;width:100%;min-width:0;padding:3px;border:1px solid var(--line);border-radius:6px;max-width:100%}.settings-segments button{display:flex;flex:1 1 0;min-width:0;justify-content:center;align-items:center;gap:6px;min-height:38px;padding:6px 8px;border-radius:3px;color:var(--muted);font-size:12px;line-height:1.5;overflow-wrap:anywhere}.settings-segments button[aria-pressed=true]{color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.settings-segments button:not([aria-pressed=true]):hover{color:var(--text);background:var(--surface)}.settings-segments button>svg{flex-shrink:0}.settings-input-modes{gap:6px;padding:0;border:0}.settings-input-modes button{min-height:44px;padding:10px 8px;border:1px solid var(--line);border-radius:5px;font-size:13px}.settings-input-modes button[aria-pressed=true]{border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}.settings-note-names button{padding-inline:5px;font-size:11px}.settings-segments.settings-octaves button{flex:1 1 auto;padding-inline:3px;font-size:11px}.settings-inline-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 22px;margin-bottom:7px}.settings-inline-actions .text-button,.settings-theme-link{font-size:11px}.settings-section-hint{margin:8px 0 0;color:var(--muted);font-size:10px;line-height:1.8}.settings-theme-link{margin-inline-start:auto}@media(max-width:560px){.settings-row{grid-template-columns:minmax(0,1fr);gap:8px;padding-block:10px}.settings-row-control{justify-content:flex-start}.settings-segments{width:100%}.settings-segments button{flex:1}.settings-inline-actions{justify-content:flex-start}.settings-theme-link{margin-inline-start:0}}@media(max-width:380px){.settings-input-modes button{flex-direction:column;min-height:68px;padding:10px 5px;gap:8px;white-space:nowrap;overflow-wrap:normal}}.input-dock{width:min(100%,620px);margin:8px auto 0;text-align:center;font-size:12px}.input-action{display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;width:fit-content;max-width:100%;padding:10px 18px;border-radius:6px;font-size:12px;line-height:1.5;background:var(--accent);color:var(--on-accent)}.input-action:hover{background:color-mix(in srgb,var(--accent) 85%,white);color:var(--on-accent)}.input-action:disabled{cursor:default}.input-duration{white-space:nowrap;font-size:.9em;opacity:.75;font-variant-numeric:tabular-nums}.input-actions{display:flex;align-items:stretch;justify-content:center;gap:12px}.input-actions>button{margin:0;min-width:0;max-width:calc((100% - 12px)/2)}.input-actions>button:only-child{max-width:100%}.input-actions>button>svg{flex-shrink:0}.input-preview{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 14px;color:var(--muted);font-size:11px;line-height:1.5;border-radius:6px}.input-preview:hover{color:var(--accent);background:var(--surface)}.input-hint{color:var(--muted);font-size:11px;line-height:1.7;margin:6px 0;display:flex;justify-content:center;gap:8px;align-items:center}.input-connected{display:flex;gap:10px;align-items:center;justify-content:center;min-height:28px;margin-top:8px}.input-off{display:flex;color:var(--muted);padding:7px}.input-detected{display:flex;justify-content:center;gap:7px;align-items:center;color:var(--muted);font-size:10px}.input-detected strong{font-weight:500;color:var(--accent)}.input-detected[aria-hidden=true]{visibility:hidden}.input-error{color:var(--error);font-size:11px;line-height:1.7;margin:8px 0 0}.input-error strong{font-weight:500}.input-error p{color:var(--muted);margin:4px 0 0}@media(max-width:600px){.input-dock{padding-inline:0}.input-actions{gap:8px}.input-actions>button{max-width:calc((100% - 8px)/2);min-height:50px;padding-inline:10px;gap:6px;font-size:11px}}.stage-bar{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"actions" "detail" "notes";grid-template-rows:minmax(46px,auto) minmax(34px,auto) auto;align-items:center;column-gap:14px;position:relative;width:100%;margin:16px auto 10px}.stage-cell{display:flex;align-items:center;gap:12px;min-width:0;height:100%}.stage-layers{display:grid;flex:1 1 auto;min-width:0;height:100%}.stage-layer{grid-area:1 / 1;display:flex;align-items:center;gap:12px;min-width:0;opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s}.stage-layer[data-hidden]{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility 0s .12s}.stage-layer--playing{animation:stage-layer-in .18s ease both}.stage-lead{grid-area:lead}.stage-actions{grid-area:actions;justify-content:center}.stage-actions .stage-layer{justify-content:center}.stage-detail{grid-area:detail}.stage-detail .stage-layer{justify-content:center;align-items:center;gap:22px}.stage-notes{grid-area:notes;height:auto}.stage-notes .stage-layer{display:block}.stage-bar .input-dock{width:auto;margin:0}.stage-notes .input-dock{width:100%}.stage-actions .input-dock{display:flex;justify-content:center}.stage-summary{margin:0;color:var(--muted);font-size:11px;line-height:1.4;text-align:center}.stage-detail-end{position:relative;display:inline-flex;flex-shrink:0;align-items:center;gap:12px}.stage-bar .composition-trigger{justify-content:flex-start;max-width:100%;padding-inline:0}.stage-bar .input-actions{flex-wrap:nowrap;gap:8px}.stage-bar .input-action,.stage-bar .input-preview{min-height:38px;padding-block:7px}.stage-bar .input-actions>button{max-width:none}.stage-bar .restart-button{width:30px;height:30px;flex-basis:30px}.stage-bar .tempo-status{flex-wrap:nowrap;align-items:center;gap:22px;min-width:0;font-size:12px}.tempo-score{display:inline-flex;align-items:center;justify-content:center;gap:16px;min-width:112px;font-variant-numeric:tabular-nums}.tempo-hits,.tempo-missed{display:inline-flex;align-items:center;gap:5px;min-width:40px}.tempo-hits{color:var(--success)}.tempo-missed{color:var(--error)}.tempo-score .count-in{white-space:nowrap}.stage-bar .tempo-status+.live-stats>:not(.time-remaining){display:none}.stage-bar .tempo-status+.live-stats .time-remaining{font-size:16px;line-height:1}.stage-bar .session-message{flex:0 1 auto;max-width:50%;min-width:0;margin:0;overflow:hidden;color:var(--text);font-size:11px;line-height:1.4;text-align:end;text-overflow:ellipsis;white-space:nowrap}.stage-bar .session-message:empty{flex-basis:0;margin-inline-start:-12px}.stage-bar .live-stats{display:flex;align-items:baseline;gap:18px;position:static;opacity:1;font-size:14px;white-space:nowrap}.stage-bar .live-stats .time-remaining{font-size:20px}.stage-bar .tempo-status{justify-content:flex-start;min-height:0;margin:0}@keyframes stage-layer-in{0%{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}.focus-mode{display:inline-flex;align-items:center;gap:9px;min-width:0;color:var(--text);font-size:13px;line-height:1.35}.focus-mode>svg{flex-shrink:0;color:var(--accent)}.focus-mode-text{display:flex;flex-direction:column;min-width:0}.focus-mode-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.focus-mode-meta{display:flex;align-items:baseline;gap:6px;min-width:0;color:var(--muted);font-size:11px;white-space:nowrap}.focus-mode-label{font-size:inherit}.preview-duration{flex-shrink:0;color:var(--muted);font-size:inherit;font-variant-numeric:tabular-nums;white-space:nowrap}.focus-stop{display:inline-flex;flex-shrink:0;align-items:center;gap:7px;min-height:36px;padding:6px 10px;border-radius:5px;color:var(--muted);font-size:11px;line-height:1.5}.focus-stop:hover{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}.focus-stop:focus-visible{color:var(--accent);outline-width:1px;outline-offset:2px}.tempo-bpm{display:flex;align-items:center;gap:5px;font-size:10px}.metronome-toggle{display:inline-flex;flex-shrink:0;align-items:center;gap:6px;min-height:32px;padding:4px 6px;border:0;border-radius:7px;color:var(--muted);background:transparent;font-size:11px;line-height:1.2;white-space:nowrap}.metronome-toggle:hover{color:var(--text);background:var(--surface)}.metronome-toggle>.metronome-icon{flex-shrink:0}.metronome-toggle.enabled{color:var(--accent)}.switch-track{position:relative;flex-shrink:0;width:22px;height:12px;border-radius:6px;background:color-mix(in srgb,var(--muted) 32%,transparent);transition:background .14s ease}.switch-thumb{position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:var(--muted);transition:transform .14s ease,background .14s ease}.metronome-toggle.enabled .switch-track{background:var(--accent)}.metronome-toggle.enabled .switch-thumb{background:var(--on-accent);transform:translate(10px)}.tempo-status{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 15px;color:var(--muted);font-size:10px;min-height:32px;margin-top:5px;line-height:1.6}.count-in strong{color:var(--accent);font-size:14px}.tempo-error{grid-column:1 / -1;font-size:10px;line-height:1.7;color:var(--error);text-align:center}.stage-alert{position:absolute;inset:100% 0 auto;z-index:2;padding:4px 8px;border-radius:4px;background:color-mix(in srgb,var(--bg) 92%,transparent);text-align:center}.stage-alert .input-error{margin:0}.tempo-result-summary{display:flex;flex-wrap:wrap;gap:12px 26px;margin:20px 0 0;font-size:11px;color:var(--muted)}.tempo-result-summary strong{color:var(--text);font-weight:500}.action-split{display:inline-flex;align-items:stretch;flex-shrink:0}.action-split>:first-child{border-start-end-radius:0;border-end-end-radius:0}.quick-settings-button{display:inline-flex;align-items:center;justify-content:center;min-width:38px;padding:0 10px;border:0;border-radius:0 6px 6px 0;color:var(--on-accent);background:var(--accent)}.quick-settings-button:hover,.quick-settings-button[aria-expanded=true]{background:color-mix(in srgb,var(--accent) 85%,white)}.action-split>.input-action+.quick-settings-button{box-shadow:inset 1px 0 color-mix(in srgb,var(--on-accent) 28%,transparent)}.action-split--quiet{border-radius:6px;box-shadow:inset 0 0 0 1px var(--line)}.action-split--quiet .focus-stop{min-height:42px;padding-inline:16px}.action-split--quiet .quick-settings-button{min-width:38px;color:var(--muted);background:transparent;box-shadow:inset 1px 0 color-mix(in srgb,var(--line) 80%,transparent)}.action-split--quiet .quick-settings-button:hover,.action-split--quiet .quick-settings-button[aria-expanded=true]{color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}[dir=rtl] .quick-settings-button{border-radius:6px 0 0 6px}.stage-popover{position:absolute;grid-area:actions;top:calc(100% + 6px);inset-inline:0;margin-inline:auto;z-index:5;width:max-content;max-width:min(340px,calc(100vw - 24px));padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel, var(--bg));box-shadow:0 10px 30px #0004;animation:stage-popover-in .14s ease both}@keyframes stage-popover-in{0%{opacity:0;transform:translateY(-4px)}}.quick-settings{display:grid;gap:10px}.quick-row{display:grid;grid-template-columns:58px auto;align-items:center;gap:10px;min-width:0;margin:0;padding:0;border:0}.quick-label{color:var(--muted);font-size:11px}.quick-label:first-letter{text-transform:uppercase}.quick-tempo{display:flex;align-items:center;gap:12px}.quick-tempo fieldset{display:contents}.quick-row:disabled .segmented,.quick-tempo fieldset:disabled .tempo-bpm{opacity:.45}.quick-note{margin:2px 0 0;color:var(--muted);font-size:10px;line-height:1.5}.quick-all{display:inline-flex;align-items:center;gap:8px;justify-self:start;margin-top:2px;padding:6px 2px;border-top:0;color:var(--muted);font-size:11px}.quick-all:hover{color:var(--accent)}.quick-settings .playback-view-label{position:static;width:auto;height:auto;overflow:visible;clip-path:none}@media(max-width:600px){.stage-bar{grid-template-rows:minmax(50px,auto) minmax(36px,auto) auto}.stage-popover{inset-inline:0;width:auto;max-width:none}.stage-bar .input-action,.stage-bar .input-preview{min-height:42px;padding-inline:10px;gap:6px;font-size:11px}.stage-bar .input-duration,.stage-bar .input-preview-label{display:none}.stage-detail:has(.session-message:not(:empty)) .live-stats>:not(.time-remaining){display:none}.stage-bar .session-message{max-width:60%;font-size:10px;line-height:1.3}.stage-bar .live-stats{gap:12px;font-size:12px}.stage-bar .live-stats .time-remaining{font-size:17px}.focus-mode,.focus-stop{font-size:12px}.focus-mode-meta{font-size:10px}.focus-stop{padding-inline:7px}.tempo-status{font-size:9px;gap:6px 10px}}@media(prefers-reduced-motion:reduce){.stage-layer,.stage-layer[data-hidden],.switch-track,.switch-thumb{transition:none}.stage-layer--playing,.stage-popover{animation:none}.focus-stop{transition:none}}.app-accessible-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-cyrillic-ext-400-normal-xuaO2J-f.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-ext-400-normal-DMdlQ8Kv.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-cyrillic-400-normal-BSMlKf0J.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-400-normal-CEL4l2ZJ.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-vietnamese-400-normal-BulugwFq.woff2) format("woff2"),url(/assets/ibm-plex-mono-vietnamese-400-normal-DDuiU_S-.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-latin-ext-400-normal-BmRBH3aV.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-ext-400-normal-D3D2R8hC.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-400-normal-CvHOgSBP.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-cyrillic-ext-500-normal-BqneJy0T.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-ext-500-normal-BIfNGwUT.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-cyrillic-500-normal-Bq9vWWag.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-500-normal-Ael50iVv.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-vietnamese-500-normal-DZ4AoWbu.woff2) format("woff2"),url(/assets/ibm-plex-mono-vietnamese-500-normal-C8zxqsMH.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-latin-ext-500-normal-CAhNIIs5.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-ext-500-normal-CZ70TYgx.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/ibm-plex-mono-latin-500-normal-DSY6xOcd.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-500-normal-CB9ihrfo.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-cyrillic-ext-600-normal-V-xxqcpd.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-ext-600-normal-9HEixskS.woff) format("woff");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-cyrillic-600-normal-CTOM6hUh.woff2) format("woff2"),url(/assets/ibm-plex-mono-cyrillic-600-normal-fLZuRloM.woff) format("woff");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-vietnamese-600-normal-D2EvbN8M.woff2) format("woff2"),url(/assets/ibm-plex-mono-vietnamese-600-normal-iLQfcSjf.woff) format("woff");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-latin-ext-600-normal-D38SheWl.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-ext-600-normal-DmB0ttJJ.woff) format("woff");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/ibm-plex-mono-latin-600-normal-BgSNZQsw.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-600-normal-DWFSQ4vo.woff) format("woff");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{font-family:IBM Plex Mono,SFMono-Regular,Consolas,monospace;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--bg: #211e2b;--surface: #1c1925;--panel: #2b2638;--text: #e6dff0;--muted: #a399b2;--faint: #746b85;--accent: #c4a7fa;--on-accent: #251a38;--success: #91c4b3;--error: #f18e9b;--warning: #e7c27c;--line: #3b334b;color-scheme:dark}:root[data-theme=serika]{--bg: #2b2323;--surface: #241d1d;--panel: #362b2b;--text: #f0dfd7;--muted: #b69d96;--faint: #806c68;--accent: #efa58e;--on-accent: #35211e;--success: #a9c6ac;--error: #f58caa;--warning: #e8c07c;--line: #4b3936}:root[data-theme=nord]{--bg: #192a2d;--surface: #142326;--panel: #21373b;--text: #d8e9e7;--muted: #92b0b1;--faint: #62878b;--accent: #82cfbd;--on-accent: #15302c;--success: #afd2a8;--error: #f29eaa;--warning: #e2c886;--line: #314a4e}:root[data-theme=rose-pine]{--bg: #2c202b;--surface: #251a24;--panel: #392a38;--text: #eddfeb;--muted: #b59eb1;--faint: #826b7d;--accent: #e9a1c2;--on-accent: #372035;--success: #a9c8bb;--error: #f5998d;--warning: #eac386;--line: #4e384a}:root[data-theme=paper]{--bg: #f3f0eb;--surface: #eae5e1;--panel: #faf8f5;--text: #38313f;--muted: #756b7e;--faint: #8c8294;--accent: #7754a1;--on-accent: #fffaff;--success: #3d7768;--error: #b5415d;--warning: #98620f;--line: #dad1dc;--key-black: #62586d;--key-black-text: #f3edf8;color-scheme:light}*{box-sizing:border-box}:root{scrollbar-width:thin;scrollbar-color:var(--faint) transparent}*,.piano-scroll,.library-list{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}*::-webkit-scrollbar{width:6px;height:6px}*::-webkit-scrollbar-track,*::-webkit-scrollbar-corner{background:transparent}*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 45%,transparent);border-radius:10px}*::-webkit-scrollbar-thumb:hover{background:var(--muted)}*::-webkit-scrollbar-button{display:none;width:0;height:0}@media(forced-colors:active){:root,*,.piano-scroll,.library-list{scrollbar-color:auto}}body{margin:0;min-width:min(320px,100%)}button,a,input,select{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}button,a{touch-action:manipulation}button{transition:color .14s ease,background .14s ease,opacity .14s ease}button:disabled{cursor:wait;opacity:.5}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:4px}button:hover{color:var(--text)}button svg{flex:0 0 auto}::selection{color:var(--bg);background:var(--accent)}.app-shell{max-width:1192px;min-height:100svh;margin:0 auto;padding:24px 32px 20px;display:flex;flex-direction:column}.skip-link{position:fixed;top:-100px;left:20px;background:var(--accent);color:var(--on-accent);padding:10px;z-index:20}.skip-link:focus{top:10px}.header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"brand piece actions";align-items:center;column-gap:16px}.header>.brand{grid-area:brand;justify-self:start}.header>.header-actions{grid-area:actions;justify-self:end}.header-piece{grid-area:piece;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;max-width:min(620px,60vw)}.header-piece-title{min-width:0}.header-piece .composition-trigger{max-width:100%}.header-listen{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}.header-listen:before{content:"";width:1px;height:22px;background:var(--line)}.header-listen .input-preview{min-height:36px;padding:6px 8px}.header-listen .input-preview:disabled{opacity:.4}.header-listen .input-preview.is-live{color:color-mix(in srgb,var(--accent) 45%,var(--muted))}.header-listen .input-preview.is-live .listen-meter{opacity:.6}.listen-labels{display:inline-grid}.listen-labels>span{grid-area:1 / 1;visibility:hidden}.listen-labels>span[data-shown]{visibility:visible}.listen-meter{display:inline-flex;align-items:flex-end;gap:2px;width:15px;height:13px}.listen-meter i{flex:1;height:100%;border-radius:1px;background:currentColor;transform-origin:bottom;animation:listen-meter 1.6s ease-in-out infinite}.listen-meter i:nth-child(2){animation-delay:-.53s}.listen-meter i:nth-child(3){animation-delay:-1.07s}@keyframes listen-meter{0%,to{transform:scaleY(.45)}50%{transform:scaleY(.85)}}@media(prefers-reduced-motion:reduce){.listen-meter i{animation:none;transform:scaleY(.7)}}.brand{display:flex;align-items:center;gap:10px}.brand-mark{color:var(--accent)}.brand-name{font-size:26px;line-height:1.2;letter-spacing:-1.2px;font-weight:500}.header-actions{display:flex;align-items:center;gap:10px}.language-switch{color:var(--muted);background:var(--bg);border:0;padding:8px 3px;font:inherit;font-size:11px;cursor:pointer;border-radius:4px}.language-switch:hover{color:var(--accent)}.icon-button{display:inline-flex;align-items:center;justify-content:center;color:var(--muted);width:40px;height:40px;border-radius:7px}.icon-button:hover{background:var(--surface);color:var(--accent)}.header-divider{width:1px;height:19px;background:var(--line);margin:0 3px}.mic-button{position:relative}.mic-button.enabled{color:var(--accent)}.mic-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);position:absolute;right:5px;top:6px}.main{width:100%;max-width:900px;margin:0 auto;padding:18px 0 14px;outline:none;flex:1}.practice-area{position:relative}.live-stats{display:flex;align-items:baseline;gap:18px;color:var(--text);font-size:14px;font-variant-numeric:tabular-nums}.live-stats small{color:var(--muted);font-size:10px}.live-stats .time-remaining{color:var(--accent);font-size:20px}.time-remaining small{color:var(--accent)}.small-best{color:var(--muted);font-size:11px;display:flex;gap:7px;align-items:center}.stream-wrap{min-width:0;position:relative}.progress-track{width:100%;height:2px;margin-top:3px;overflow:hidden}.progress-track span{display:block;height:100%;background:var(--accent);transform-origin:left;transition:transform 60ms linear}.progress-track span.is-draining{animation-name:practice-drain;animation-timing-function:linear;animation-fill-mode:both;transition:none}@keyframes practice-drain{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.supporting-text{margin:-12px 0 16px;color:var(--muted);font-size:11px}.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:11px;color:var(--on-accent);background:var(--accent);padding:13px 19px;border-radius:7px;font-size:12px;min-height:44px;font-weight:600}.primary-button:hover{color:var(--on-accent);background:color-mix(in srgb,var(--accent) 83%,white)}.primary-button:active{transform:translateY(1px)}.enable-button{gap:10px}.enable-button>svg:last-child{margin-left:8px}.privacy-copy{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:10px;margin-top:11px}.restart-button{color:var(--muted);width:32px;height:32px;flex:0 0 32px}.quiet-button{padding:10px 20px;color:var(--muted);font-size:12px}.detected-note{min-height:45px;display:flex;gap:9px;align-items:center;font-size:12px;color:var(--muted)}.detected-note strong{font-size:20px;font-weight:500;color:var(--accent);min-width:35px}.detected-frequency{font-size:10px;min-width:56px}.signal-light{width:5px;height:5px;background:var(--muted);border-radius:50%}.signal-light.has-note{background:var(--accent)}.piano-guide{width:560px;margin:0 auto}.piano-keys{display:flex;position:relative;height:59px;gap:3px}.piano-key{border-radius:2px 2px 3px 3px;display:flex;align-items:flex-end;justify-content:center;font-size:8px;transition:background .16s ease,color .16s ease}.white-key{flex:1;background:color-mix(in srgb,var(--muted) 18%,var(--bg));color:var(--muted);padding-bottom:7px}.black-key{position:absolute;width:19px;height:35px;transform:translate(-50%);background:var(--key-black, var(--bg));color:var(--key-black-text, var(--muted));border:2px solid var(--bg);border-top:0;padding-bottom:4px}.piano-key.target-key{background:var(--accent);color:var(--on-accent)}.piano-key.wrong-key{background:var(--error);color:var(--bg)}.piano-caption{display:block;text-align:center;font-size:9px;color:var(--muted);margin-top:10px}.footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);gap:15px}.footer-left,.footer-right{display:flex;align-items:center;gap:22px}.footer-button,.footer-privacy{display:inline-flex;align-items:center;gap:7px;padding:6px 0;white-space:nowrap}.footer-button:hover{color:var(--accent)}.footer-privacy{font-size:9px}.mic-status{display:flex;align-items:center;gap:8px;font-size:9px}.level-meter{display:flex;align-items:center;gap:2px;height:13px}.level-meter i{width:2px;height:4px;background:var(--muted);transition:opacity 90ms}.level-meter i:nth-child(2),.level-meter i:nth-child(4){height:8px}.level-meter i:nth-child(3){height:12px}.meter-active i{background:var(--accent)}.version{color:var(--muted);font-size:9px}.notice,.storage-note{font-size:11px;color:var(--muted);line-height:1.7;text-align:center;margin:6px auto 0;max-width:560px}.error-message{max-width:560px;margin-bottom:17px}.error-message strong{color:var(--error);font-weight:500}.error-message p{margin:5px 0 0;color:var(--muted);font-size:11px}.spinner{width:12px;height:12px;border:1px solid var(--muted);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.results{min-height:535px;padding:25px 0;animation:arrive .24s ease}.results-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;color:var(--muted);font-size:11px}.result-configuration{max-width:70%;text-align:right;line-height:1.8}.eyebrow{color:var(--accent)}.results h1{font-weight:400;font-size:22px;letter-spacing:-.5px;margin:15px 0 34px}.results h1:focus{outline:none}.result-metrics{display:flex;gap:60px;align-items:flex-start}.metric{display:flex;flex-direction:column;gap:7px}.metric-label{color:var(--muted);font-size:12px}.metric strong{font-size:30px;font-weight:400;color:var(--text);font-variant-numeric:tabular-nums}.featured-metric strong{font-size:82px;letter-spacing:-5px;color:var(--accent);line-height:1.2}.metric-unit{font-size:.48em;letter-spacing:-1px;margin-left:4px}.secondary-metrics{display:flex;gap:30px;padding:0 0 0 14px;margin-top:2px}.secondary-metrics .metric strong{margin-top:13px}.personal-best{display:flex;align-items:center;gap:11px;font-size:12px;color:var(--muted);margin:30px 0 44px}.personal-best strong{font-weight:400;color:var(--text);margin-left:8px}.record-badge{color:var(--accent);font-size:10px;padding:5px 7px;background:var(--surface);border-radius:3px}.result-actions{display:flex;gap:20px;align-items:center}.result-actions>span{font-size:11px;color:var(--muted)}.storage-note{text-align:left;margin:24px 0 0}.dialog{width:min(520px,calc(100% - 32px));max-height:calc(100svh - 48px);background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:13px;padding:0;overflow:auto;box-shadow:0 20px 100px #0004}.dialog::backdrop{background:#101114b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.dialog-content{padding:34px}.dialog-close{position:absolute;top:11px;right:11px}.dialog h2{font-size:19px;font-weight:500;letter-spacing:-.7px;margin:9px 15px 14px 0}.dialog-intro{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:25px}.theme-list{display:flex;flex-direction:column;gap:4px}.theme-choice{display:flex;align-items:center;gap:14px;padding:13px 10px;border-radius:7px;text-align:left}.theme-choice:hover,.theme-choice[aria-pressed=true]{background:var(--surface)}.theme-choice>span:nth-child(2){flex:1}.theme-choice strong{display:block;font-size:13px;font-weight:500}.theme-choice small{display:block;font-size:9px;margin-top:7px;color:var(--muted)}.theme-choice>svg{color:var(--accent)}.theme-preview{display:flex;align-items:center;justify-content:center;gap:4px;width:55px;height:40px;border:1px solid #ffffff1a;border-radius:5px}.theme-preview i{width:6px;height:15px;background:currentColor;border-radius:1px}.theme-preview i:nth-child(2){height:22px}.help-steps{padding-left:24px;margin:25px 0;font-size:12px;line-height:1.9}.help-steps li{margin-bottom:14px;padding-left:9px}.help-steps li::marker{color:var(--accent)}.help-footnote{color:var(--muted);font-size:11px;line-height:1.9;margin:25px 0}.settings-detail{margin:23px 0;font-size:12px;line-height:1.8}.settings-detail h3{color:var(--accent);font-size:12px;font-weight:500;margin:0 0 12px}.settings-detail p{color:var(--muted);margin:9px 0;display:flex;gap:17px}.settings-detail strong{color:var(--text);font-weight:400;min-width:54px}.settings-language{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;color:var(--text)}.settings-language select{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:8px 12px}.text-button{display:flex;align-items:center;gap:10px;color:var(--accent);font-size:12px;padding:9px 0}.debug-panel{margin-top:25px;padding:14px;background:var(--surface);border-radius:6px;color:var(--muted);font-size:10px}.debug-panel>span{color:var(--accent)}.debug-panel dl{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:0}.debug-panel dl>div{display:flex;gap:7px}.debug-panel dd{margin:0;color:var(--text)}.fatal-error{max-width:600px;margin:20vh auto;padding:30px;text-align:center}.fatal-error h1{font-size:24px;font-weight:500}.fatal-error p{color:var(--muted);font-size:13px;line-height:1.8;margin-bottom:25px}@keyframes arrive{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(min-height:960px){.main{padding-top:32px}}@media(max-width:900px){.app-shell{padding:20px 24px 16px}.main{padding-top:16px}.result-metrics{gap:35px}.secondary-metrics{flex-wrap:wrap;gap:20px}.featured-metric strong{font-size:70px}.footer-privacy,.version{display:none}}@media(max-width:600px){.app-shell{padding:12px 18px 10px}.header-actions{gap:4px}.header-actions>button[title]:first-of-type,.header-divider{display:none}.brand-mark{width:27px;height:27px}.brand{gap:7px}.brand-name{font-size:21px;letter-spacing:-1px}.header{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand actions" "piece piece";row-gap:10px}.header-piece{max-width:100%}.main{padding:10px 0 6px}.piano-guide{margin-top:0;width:100%}.footer{gap:8px;flex-wrap:wrap}.footer-left{order:0}.footer-right{margin-left:auto;justify-content:flex-end;gap:10px}.footer-left .footer-button{font-size:9px}.results{padding-top:10px;min-height:480px}.results h1{font-size:15px;line-height:1.7;margin-bottom:26px}.results-heading{font-size:9px}.result-metrics{flex-wrap:wrap;gap:25px 45px}.featured-metric strong{font-size:65px}.metric-label{font-size:11px}.secondary-metrics{width:100%;justify-content:space-between;flex-wrap:wrap;padding-left:0;gap:18px}.secondary-metrics .metric strong{margin-top:0}.personal-best{gap:8px;flex-wrap:wrap;font-size:10px;margin:25px 0 30px}.result-actions{gap:15px;flex-wrap:wrap}.result-actions>span{font-size:10px}.dialog-content{padding:26px 22px}.dialog h2{font-size:17px}.theme-choice{padding-left:0;padding-right:0;gap:10px}.theme-choice small{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.progress-track span.is-draining{animation-name:none}}@media(min-width:601px)and (max-height:850px){.app-shell{padding-top:14px;padding-bottom:12px}.main{padding-top:8px;padding-bottom:6px}}@media(max-width:600px)and (max-height:700px){.app-shell{padding-block:8px}.main{padding-top:6px;padding-bottom:4px}.piano-overview-toggle{margin-top:4px}}.focus-fade{opacity:1;visibility:visible;transition:opacity .18s ease,visibility 0s}.focus-fade[data-hidden=true]{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,visibility 0s .14s}@media(prefers-reduced-motion:reduce){.focus-fade,.focus-fade[data-hidden=true]{transition:none}}