@font-face{font-family:"Source Serif 4";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/source-serif-4-latin-wght-normal-D9elroTD.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Source Sans 3";font-style:normal;font-display:swap;font-weight:200 900;src:url(/assets/source-sans-3-latin-wght-normal-BqRLTx4X.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f8f4ec;--surface:#fefcf8;--sunk:#eee9df;--text:#231d18;--text-muted:#645a52;--border:#d7d0c6;--control:#8e8479;--accent:#25497b;--accent-hover:#183a68;--accent-contrast:#fefcf8;--accent-soft:#dee9f5;--focus:#25497b;--ok:#316843;--warn:#935f1a;--warn-soft:#faefdc;--warn-rule:#d5b993;--bad:#a23b2e;--ok-soft:#e3efe2;--bad-soft:#f9e6e1;--wash:.35;--shadow-rgb:60 44 30;--shadow-sheet:0 0 0 1px rgb(var(--shadow-rgb) / .07), 0 1px 2px rgb(var(--shadow-rgb) / .06), 0 18px 40px -22px rgb(var(--shadow-rgb) / .3);--shadow-pop:0 0 0 1px rgb(var(--shadow-rgb) / .14), 0 12px 28px -10px rgb(var(--shadow-rgb) / .4);--felt:#332c29;--key-white-top:#fffdf9;--key-white:#faf6ee;--key-white-front:#ede7dc;--key-white-edge:#c3bdb3;--key-black:#191513;--key-black-top:#2a2523;--key-black-slope:#413c38;--key-black-edge:#0b0908;--key-label:#645a52;--key-held:#3e6596;--key-held-black:#6289b5;--key-sustained:#d2e0ee;--key-sustained-black:#39495d;--key-target:#25497b;--key-target-black:#94b5d8;--heat-0:#dca35d;--heat-1:#cf8c4c;--heat-2:#bd753b;--heat-3:#ab5d2a;--heat-4:#97451a;--heat-5:#832c0c;--heat-6:#6f1002;--heat-ink:#231d18;--heat-none:#645a52;--heat-error:#3b342e;--heat-track:#e8e2d9;--heat-key-white:#fefcf8;--heat-key-white-edge:#c3bdb3;--heat-key-label:#645a52;--year-0:#e6e0d6;--year-1:#8fb0dd;--year-2:#5d88c2;--year-3:#35619b;--year-4:#193d6b;--bar-wash:22%;--font-serif:"Source Serif 4", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", Georgia, serif;--font-sans:"Source Sans 3", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;--radius-sm:2px;--radius:3px;--dur-fast:.12s;--dur:.18s;--gutter:clamp(16px, 3.5vw, 40px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--gutter-left:max(var(--gutter), env(safe-area-inset-left,0px));--gutter-right:max(var(--gutter), env(safe-area-inset-right,0px));--content-width:72rem;--veil:color-mix(in srgb, var(--bg) 86%, transparent);--ease-out:cubic-bezier(.16, 1, .3, 1)}:root:lang(zh-TW){--font-serif:"Source Serif 4", "Songti TC", "Noto Serif CJK TC", "Source Han Serif TC", "PMingLiU", Georgia, serif;--font-sans:"Source Sans 3", "PingFang TC", "Noto Sans CJK TC", "Source Han Sans TC", "Microsoft JhengHei", system-ui, -apple-system, "Segoe UI", sans-serif}:root:lang(ja){--font-serif:"Source Serif 4", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", "Noto Serif JP", "Source Han Serif JP", Georgia, serif;--font-sans:"Source Sans 3", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans CJK JP", "Noto Sans JP", "Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif}:root:lang(ko){--font-serif:"Source Serif 4", "AppleMyungjo", "Nanum Myeongjo", "Noto Serif CJK KR", "Noto Serif KR", "Source Han Serif K", "Batang", Georgia, serif;--font-sans:"Source Sans 3", "Apple SD Gothic Neo", "Noto Sans CJK KR", "Noto Sans KR", "Source Han Sans K", "Malgun Gothic", system-ui, -apple-system, "Segoe UI", sans-serif}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#181411;--surface:#211c19;--sunk:#120f0c;--text:#ece6d8;--text-muted:#b0a89c;--border:#393430;--control:#6f6860;--accent:#94b5d8;--accent-hover:#aac8e7;--accent-contrast:#181411;--accent-soft:#232f3e;--focus:#94b5d8;--ok:#8ac195;--warn:#e5b46e;--warn-soft:#2b1f11;--warn-rule:#5e492e;--bad:#e1897b;--ok-soft:#1d2a1f;--bad-soft:#35211d;--wash:.2;--shadow-rgb:0 0 0;--shadow-sheet:0 0 0 1px #fff5e60f, 0 1px 2px #0000004d, 0 18px 40px -20px #000000b3;--shadow-pop:0 0 0 1px #fff5e61f, 0 12px 28px -10px #000000b3;--felt:#0d0a09;--key-white-top:#e5dfd1;--key-white:#ddd5c4;--key-white-front:#c7bcab;--key-white-edge:#877f75;--key-black:#090706;--key-black-top:#161311;--key-black-slope:#2a2523;--key-black-edge:#000;--key-label:#3d3631;--key-held:#466a93;--key-held-black:#7196bc;--key-sustained:#9badc1;--key-sustained-black:#222f3f;--key-target:#25497b;--key-target-black:#94b5d8;--heat-0:#744b20;--heat-1:#8a5c34;--heat-2:#a16c48;--heat-3:#b97e5c;--heat-4:#d19072;--heat-5:#e9a289;--heat-6:#ffb5a1;--heat-ink:#ece6d8;--heat-none:#b0a89c;--heat-error:#d1c9be;--heat-track:#2f2a26;--heat-key-white:#26221e;--heat-key-white-edge:#3c3733;--heat-key-label:#b0a89c;--year-0:#2c2622;--year-1:#365681;--year-2:#567caf;--year-3:#7ea4d6;--year-4:#b5d0f5}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#181411;--surface:#211c19;--sunk:#120f0c;--text:#ece6d8;--text-muted:#b0a89c;--border:#393430;--control:#6f6860;--accent:#94b5d8;--accent-hover:#aac8e7;--accent-contrast:#181411;--accent-soft:#232f3e;--focus:#94b5d8;--ok:#8ac195;--warn:#e5b46e;--warn-soft:#2b1f11;--warn-rule:#5e492e;--bad:#e1897b;--ok-soft:#1d2a1f;--bad-soft:#35211d;--wash:.2;--shadow-rgb:0 0 0;--shadow-sheet:0 0 0 1px #fff5e60f, 0 1px 2px #0000004d, 0 18px 40px -20px #000000b3;--shadow-pop:0 0 0 1px #fff5e61f, 0 12px 28px -10px #000000b3;--felt:#0d0a09;--key-white-top:#e5dfd1;--key-white:#ddd5c4;--key-white-front:#c7bcab;--key-white-edge:#877f75;--key-black:#090706;--key-black-top:#161311;--key-black-slope:#2a2523;--key-black-edge:#000;--key-label:#3d3631;--key-held:#466a93;--key-held-black:#7196bc;--key-sustained:#9badc1;--key-sustained-black:#222f3f;--key-target:#25497b;--key-target-black:#94b5d8;--heat-0:#744b20;--heat-1:#8a5c34;--heat-2:#a16c48;--heat-3:#b97e5c;--heat-4:#d19072;--heat-5:#e9a289;--heat-6:#ffb5a1;--heat-ink:#ece6d8;--heat-none:#b0a89c;--heat-error:#d1c9be;--heat-track:#2f2a26;--heat-key-white:#26221e;--heat-key-white-edge:#3c3733;--heat-key-label:#b0a89c;--year-0:#2c2622;--year-1:#365681;--year-2:#567caf;--year-3:#7ea4d6;--year-4:#b5d0f5}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:5rem}::selection{background:var(--accent-soft);color:var(--text)}body{background:var(--bg);min-height:100dvh;color:var(--text);font-family:var(--font-sans);font-synthesis-style:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;font-size:1.0625rem;line-height:1.6;overflow-x:hidden}body:is(:lang(zh),:lang(ja),:lang(ko)){line-height:1.75}:is(h1,h2,h3):lang(ja){word-break:auto-phrase}body:lang(ko){word-break:keep-all;overflow-wrap:break-word}a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}h1{font-family:var(--font-serif);letter-spacing:-.02em;text-wrap:balance;margin:0 0 .75rem;font-size:clamp(2.125rem,1.75rem + 1.5vw,2.75rem);font-weight:500;line-height:1.1}h1:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-weight:600;line-height:1.25}.muted{color:var(--text-muted)}.field>label,.field>legend,.eyebrow{color:var(--text-muted);letter-spacing:.09em;text-transform:uppercase;margin-bottom:.75rem;padding:0;font-size:.8125rem;font-weight:600;line-height:1.4;display:block}.field>label:is(:lang(zh),:lang(ja),:lang(ko)),.field>legend:is(:lang(zh),:lang(ja),:lang(ko)),.eyebrow:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.875rem}.header{z-index:30;border-bottom:1px solid var(--border);background:var(--veil);-webkit-backdrop-filter:saturate(1.4)blur(14px);backdrop-filter:saturate(1.4)blur(14px);position:sticky;top:0}.header-inner{max-width:var(--content-width);padding:calc(.625rem + var(--safe-top)) var(--gutter-right) .625rem var(--gutter-left);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem 2rem;margin:0 auto;display:flex}@media (width<=48rem){.header{position:static}}@media (prefers-reduced-transparency:reduce){.header{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}.brand{min-height:2.75rem;color:var(--text);align-items:center;text-decoration:none;display:inline-flex}.brand-mark{aspect-ratio:4154/975;fill:currentColor;width:auto;height:1.75rem;display:block}.nav{flex-wrap:wrap;gap:0 1.75rem;margin:0;padding:0;list-style:none;display:flex}.nav-link{color:var(--text-muted);transition:color var(--dur-fast) ease-out;padding:.625rem 0;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-block;position:relative}.nav-link:after{content:"";background:var(--accent);height:2px;transition:transform var(--dur) ease-out;position:absolute;bottom:.375rem;left:0;right:0;transform:scaleX(0)}.nav-link.is-active{color:var(--text)}.nav-link.is-active:after{transform:scaleX(1)}@media (hover:hover){.nav-link:hover{color:var(--text)}}.header nav{flex:1 1 0;min-width:0;position:relative}.header .nav{justify-content:flex-end}.nav-ruler-box{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0;overflow:hidden}.header .nav-ruler{white-space:nowrap;flex-wrap:nowrap;width:max-content}.nav-more{position:relative}.nav-more-button{font-family:inherit;line-height:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:.375rem;display:inline-flex}.nav-more-chevron{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:.625rem;height:.375rem;transition:transform var(--dur-fast) ease-out}.nav-more-button[aria-expanded=true] .nav-more-chevron{transform:rotate(180deg)}.nav-more-menu{z-index:20;border-radius:var(--radius);background:var(--surface);min-width:11rem;box-shadow:var(--shadow-pop);padding:.375rem 0;position:absolute;top:calc(100% + .25rem);right:0}.nav-more-menu ul{margin:0;padding:0;list-style:none}.nav-more-link{color:var(--text-muted);white-space:nowrap;padding:.625rem 1rem;font-size:.9375rem;font-weight:600;text-decoration:none;display:block}.nav-more-link.is-active{color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}@media (hover:hover){.nav-more-link:hover{color:var(--text);background:var(--sunk)}}#root{flex-direction:column;min-height:100dvh;display:flex}.main{width:100%;max-width:var(--content-width);padding:2.75rem var(--gutter-right) calc(4.5rem + var(--safe-bottom)) var(--gutter-left);flex:1 0 auto;margin:0 auto}.page{max-width:40rem}.field{border:0;margin:2.25rem 0 0;padding:0}.help{max-width:38rem;color:var(--text-muted);text-wrap:pretty;margin:.5rem 0 0;font-size:.9375rem}select{border:1px solid var(--control);border-radius:var(--radius-sm);background:linear-gradient(45deg, transparent 50%, currentColor 50%) right 1.125rem center / 5px 5px no-repeat, linear-gradient(135deg, currentColor 50%, transparent 50%) right .8125rem center / 5px 5px no-repeat, var(--surface);min-width:14rem;max-width:100%;min-height:2.75rem;color:var(--text);font:inherit;appearance:none;padding:.5rem 2.5rem .5rem .75rem}.segmented{border:1px solid var(--control);border-radius:var(--radius-sm);background:var(--surface);flex-wrap:wrap;display:inline-flex;overflow:hidden}.segmented label{cursor:pointer;position:relative}.segmented input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.segmented span{min-width:3.5rem;min-height:2.75rem;color:var(--text);font-variant-numeric:tabular-nums;text-align:center;transition:background-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;padding:.5rem 1.125rem;display:block}.segmented label+label span{border-left:1px solid var(--border)}.segmented input:checked+span{color:var(--accent-contrast);background:var(--accent);font-weight:600}@media (hover:hover){.segmented input:not(:checked):hover+span{background:var(--sunk)}}.segmented input:focus-visible+span{outline:2px solid var(--focus);outline-offset:-4px}.check,.field>.check{min-height:2.75rem;color:var(--text);letter-spacing:normal;text-transform:none;cursor:pointer;align-items:center;gap:.625rem;font-size:1rem;font-weight:600;display:inline-flex}.field>.check{margin-bottom:0}.field>.check+.help{margin-top:0}.check input,.level input{border:1.5px solid var(--control);background:var(--surface);appearance:none;cursor:pointer;width:1.125rem;height:1.125rem;transition:background-color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;flex:none;place-content:center;margin:0;display:grid}.check input{border-radius:var(--radius-sm)}.check input:before{content:"";background:var(--accent-contrast);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,86% 8%,37% 70%);width:.6875rem;height:.6875rem;transition:transform var(--dur-fast) ease-out;transform:scale(0)}.check input:checked{border-color:var(--accent);background:var(--accent)}.check input:checked:before{transform:scale(1)}@media (forced-colors:active){.check input,.level input{appearance:auto}}@media (width<=30rem){.header .nav{flex-wrap:nowrap;justify-content:space-between;gap:0 .75rem}.nav-link{white-space:nowrap;font-size:.875rem}}.header-end{align-items:center;gap:.5rem;display:flex}.gh-star{border:1px solid var(--border);background:var(--surface);height:2.5rem;color:var(--text-muted);font:600 .9375rem / 1 var(--font-sans);transition:border-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;border-radius:1.25rem;align-items:center;gap:.4375rem;padding:0 .875rem 0 .75rem;text-decoration:none;display:inline-flex}.gh-star:focus-visible{outline:2px solid var(--focus);outline-offset:2px}@media (hover:hover){.gh-star:hover{border-color:var(--control);color:var(--text)}}.gh-star-mark{fill:currentColor;width:1.0625rem;height:1.0625rem}@media (width<=40rem){.gh-star{justify-content:center;width:2.5rem;padding:0}.gh-star-label{display:none}}@media (width<=30rem){.gh-star{display:none}}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.button-link{color:var(--accent);font:inherit;text-underline-offset:.18em;cursor:pointer;background:0 0;border:0;padding:0;font-weight:600;text-decoration:underline;text-decoration-thickness:1px}kbd{border:1px solid var(--control);border-radius:var(--radius);background:var(--surface);min-width:1.6em;color:var(--text);font:600 .875em / 1.5 var(--font-sans);text-align:center;border-bottom-width:2px;padding:0 .35em;display:inline-block}.play-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1.5rem;display:flex}.play-head h1{margin:0}.device-status{color:var(--warn);align-items:center;gap:.5rem;margin:0;font-size:.9375rem;font-weight:600;display:inline-flex}.device-status.is-connected{color:var(--ok)}.device-status.is-pending{color:var(--text-muted)}.device-icon{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;border:1.5px solid;border-radius:50%;flex:none;width:1.125rem;height:1.125rem;padding:.125rem}.device-status.is-pending .device-icon{border-color:#0000;padding:0}.device-help{max-width:38rem;margin-top:.5rem}.play-now{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;margin:2.25rem 0 1.25rem;display:flex}.readout{flex-direction:column;min-width:0;display:flex}.readout-label{color:var(--text-muted);letter-spacing:.09em;text-transform:uppercase;font-size:.8125rem;font-weight:600;line-height:1.4}.readout-label:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.875rem}.readout-notes{min-height:1.15em;color:var(--text-muted);font-family:var(--font-serif);font-variant-numeric:tabular-nums;letter-spacing:-.01em;overflow-wrap:anywhere;font-size:clamp(2.5rem,1.75rem + 3vw,4rem);font-weight:500;line-height:1.15}.readout-notes:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:0;font-weight:600}.readout-notes.is-live{color:var(--text)}.sustain{border:1px solid var(--control);border-radius:var(--radius-sm);min-height:2.75rem;color:var(--text-muted);transition:background-color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;align-items:center;gap:.625rem;padding:.375rem .875rem .375rem .75rem;display:inline-flex}.sustain.is-down{border-color:var(--accent);background:var(--accent);color:var(--accent-contrast)}.sustain-icon{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;width:1.375rem;height:1.375rem}.sustain.is-down .sustain-icon{fill:currentColor}.sustain-text{flex-direction:column;line-height:1.25;display:flex}.sustain-label{font-size:.8125rem}.sustain-state{color:var(--text);font-weight:600}.sustain.is-down .sustain-state{color:inherit}.piano-scroller{--white-min:18px;overscroll-behavior-x:contain;background:var(--felt);box-shadow:0 0 0 1px rgb(var(--shadow-rgb) / .12), 0 16px 30px -20px rgb(var(--shadow-rgb) / .55);scrollbar-width:thin;border-radius:4px;padding-top:5px;overflow-x:auto}@media (pointer:coarse){.piano-scroller{--white-min:30px}}.piano{min-width:calc(var(--whites,52) * var(--white-min));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;min-height:7rem;max-height:14rem;position:relative}.key{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:0;margin:0;padding:0;position:absolute;top:0;bottom:0;overflow:hidden}.key-white{z-index:0;border-right:1px solid var(--key-white-edge);background:linear-gradient(to bottom, var(--key-white-top), var(--key-white) 72%, var(--key-white-front));box-shadow:inset 0 -3px 0 rgb(var(--shadow-rgb) / .07);border-radius:0 0 3px 3px}.key-black{z-index:1;background:linear-gradient(to bottom, var(--key-black-edge), var(--key-black) 8%, var(--key-black-top) 84%, var(--key-black-slope) 86%, var(--key-black) 100%);border-radius:0 0 2px 2px;bottom:auto;box-shadow:inset 1px 0 #ffffff0f,inset -1px 0 #00000059,0 2px 3px #0000004d}.key-fill{background:var(--key-held);position:absolute;inset:0}.key-black .key-fill{background:var(--key-held-black)}.key-white.is-sustained{background:var(--key-sustained)}.key-black.is-sustained{background:var(--key-sustained-black)}.key-white.is-held{box-shadow:inset 0 4px 5px #00000047}.key-black.is-held{box-shadow:inset 0 3px 3px #00000073}.key:focus-visible{z-index:2;outline-offset:-3px}.key-mark{color:var(--key-label);text-align:center;pointer-events:none;font-size:.625rem;font-weight:600;line-height:1;position:absolute;bottom:.3rem;left:0;right:0}.key-mark:before{content:"";background:currentColor;border-radius:50%;width:5px;height:5px;margin:0 auto .25rem;display:block}.key.is-held .key-mark{color:#fff}.keys-hint{border-top:1px solid var(--border);max-width:36rem;margin-top:2.5rem;padding-top:1.5rem}.keys-hint h2{font-family:var(--font-serif);text-wrap:balance;margin:0;font-size:1.375rem;font-weight:500;line-height:1.3}.keys-hint h2:is(:lang(zh),:lang(ja),:lang(ko)){font-weight:600}.keys-hint>.help:first-of-type{margin-top:.25rem}.keycaps{grid-template-columns:repeat(16,minmax(0,1fr));gap:.375rem .25rem;max-width:26rem;margin:1.25rem 0 1rem;display:grid}.keycap{flex-direction:column;align-items:center;gap:.125rem;min-width:0;display:flex}.keycap kbd{width:100%;max-width:2.5rem}.keycap.is-upper kbd{border-color:var(--control);background:var(--key-black-top);color:var(--key-white-top)}.keycap-note{color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.75rem}.keys-octave{flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;margin:0;display:flex}.keys-octave-value strong{font-family:var(--font-serif);font-variant-numeric:tabular-nums;font-size:1.125rem;font-weight:600}.key.is-marked{box-shadow:inset 0 0 0 3px var(--key-target)}.key-black.is-marked{box-shadow:inset 0 0 0 3px var(--key-target-black)}.key-target{pointer-events:none;justify-content:center;display:flex;position:absolute;bottom:.3rem;left:0;right:0}.key-target svg{width:min(70%,.875rem);fill:var(--key-target)}.key-black .key-target svg{fill:var(--key-target-black)}.key-finger{aspect-ratio:1;background:var(--key-target);color:#fff;width:min(88%,1.25rem);font-family:var(--font-serif);font-variant-numeric:lining-nums;border-radius:50%;place-items:center;font-size:clamp(.625rem,.5rem + .35vw,.875rem);font-weight:600;line-height:1;display:grid}.key-black .key-finger{background:var(--key-target-black);color:var(--key-black)}.button{border:1px solid var(--control);border-radius:var(--radius-sm);min-height:2.75rem;color:var(--text);font:inherit;cursor:pointer;touch-action:manipulation;transition:background-color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out, transform var(--dur-fast) ease-out;background:0 0;justify-content:center;align-items:center;gap:.5rem;padding:.5rem 1.25rem;font-size:1rem;font-weight:600;display:inline-flex}.button:active:not(:disabled){transform:scale(.97)}.button-primary{border-color:var(--accent);background:var(--accent);color:var(--accent-contrast)}@media (hover:hover){.button:hover:not(:disabled){border-color:var(--text-muted);background:var(--sunk)}.button-primary:hover:not(:disabled){border-color:var(--accent-hover);background:var(--accent-hover)}}.read-intro{text-wrap:pretty;max-width:36rem;margin:0;font-size:1.125rem}.read-setup{max-width:46rem}.levels{border-top:1px solid var(--border)}.level{border-bottom:1px solid var(--border);cursor:pointer;transition:background-color var(--dur-fast) ease-out;grid-template-columns:1.125rem 2.25rem minmax(0,1fr) auto;align-items:center;column-gap:1rem;padding:.875rem .75rem;display:grid}.level.is-checked{background:var(--accent-soft)}@media (hover:hover){.level:not(.is-checked):hover{background:var(--sunk)}}.level input{border-radius:50%}.level input:before{content:"";background:var(--accent);width:.5rem;height:.5rem;transition:transform var(--dur-fast) ease-out;border-radius:50%;transform:scale(0)}.level input:checked{border-color:var(--accent)}.level input:checked:before{transform:scale(1)}.level-id{color:var(--text-muted);font-family:var(--font-serif);font-size:1.25rem;font-weight:500;line-height:1}.level.is-checked .level-id{color:var(--accent)}.level-body{flex-direction:column;min-width:0;line-height:1.4;display:flex}.level-name{font-weight:600}.level-range{color:var(--text-muted);font-size:.9375rem}.level-status{text-align:end;flex-direction:column;align-items:flex-end;gap:.125rem;font-size:.875rem;line-height:1.4;display:flex}.level-stats{color:var(--text-muted);font-variant-numeric:tabular-nums}.badge{letter-spacing:.09em;text-transform:uppercase;align-items:center;gap:.25rem;font-size:.75rem;font-weight:700;display:inline-flex}.badge:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.8125rem}.badge svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:.875rem;height:.875rem}.badge.is-mastered{color:var(--ok)}.badge.is-suggested{color:var(--accent)}@media (width<=40rem){.level{grid-template-columns:1.125rem 1.75rem minmax(0,1fr);column-gap:.75rem;padding-inline:.5rem}.level-status{text-align:start;flex-flow:wrap;grid-column:3;align-items:baseline;gap:0 .75rem;margin-top:.25rem}}.read-start{min-width:11rem;margin-top:2.5rem;font-size:1.0625rem}.read-options-level{display:none}@media (width>=64rem){.read-setup{grid-template-columns:minmax(0,1fr) minmax(17rem,21rem);align-items:start;gap:0 clamp(2.5rem,4vw,4rem);max-width:none;display:grid}.read-options{border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sheet);margin-top:2.25rem;padding:1.5rem 1.5rem 1.75rem;position:sticky;top:6rem}.read-options-level{border-bottom:1px solid var(--border);font-family:var(--font-serif);align-items:baseline;gap:.75rem;margin:0 0 1.5rem;padding-bottom:1.25rem;font-size:1.25rem;font-weight:500;line-height:1.3;display:flex}.read-options-level .level-id{color:var(--accent)}.read-options>.field:nth-child(2){margin-top:0}.read-start{width:100%;margin-top:1.75rem}}.read-session:focus{outline:none}.read-session{--sheet-px:2rem;--read-chrome:26.5rem;--staff-w:min(59rem, calc((100dvh - var(--read-chrome) - var(--safe-top) - var(--safe-bottom)) * var(--staff-aspect)))}.main:has(.read-session){padding-top:1rem}.read-bar,.read-progress,.read-feedback{max-width:46rem;margin-inline:auto}.read-bar{flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;font-size:.9375rem;display:flex}.read-bar p{margin:0}.read-level{font-weight:600}.read-count{color:var(--text-muted);font-variant-numeric:tabular-nums}.read-bar .check{margin-left:auto;font-size:.9375rem}.read-bar .button{padding:.25rem 1rem;font-size:.9375rem}.read-progress{background:var(--border);height:2px;margin-block:.5rem 1rem;overflow:hidden}.read-progress span{background:var(--text-muted);transform-origin:0;height:100%;transition:transform var(--dur) ease-out;display:block}.read-card{isolation:isolate;width:min(100%, calc(var(--staff-w) + 2 * var(--sheet-px)));padding:1rem var(--sheet-px) .75rem;border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sheet);flex-direction:column;align-items:center;margin-inline:auto;display:flex;position:relative}.read-card:before{content:"";z-index:-1;border-radius:inherit;background:var(--ok-soft);opacity:0;transition:opacity var(--dur) ease-out;pointer-events:none;position:absolute;inset:0}.read-card.is-wrong:before{background:var(--bad-soft)}.read-card.is-correct:before,.read-card.is-wrong:before{opacity:var(--wash)}.read-card:after{content:"";border-radius:inherit;box-shadow:inset 0 0 0 1px var(--ok);opacity:0;transition:opacity var(--dur) ease-out;pointer-events:none;position:absolute;inset:0}.read-card.is-wrong:after{box-shadow:inset 0 0 0 1px var(--bad)}.read-card.is-correct:after,.read-card.is-wrong:after{opacity:.5}.grand-staff{width:min(100%, var(--staff-w));aspect-ratio:var(--staff-aspect);min-width:min(100%,17rem);color:var(--text);position:relative}.grand-staff-svg,.grand-staff-svg svg{width:100%;height:100%;display:block}.grand-staff .vf-stavenote{transition:color var(--dur) ease-out}.grand-staff[data-state=correct] .vf-stavenote{color:var(--ok)}.grand-staff[data-state=wrong] .vf-stavenote{color:var(--bad)}.grand-staff-error{color:var(--bad);text-align:center;place-items:center;margin:0;padding:1rem;display:grid;position:absolute;inset:0}.read-hint{font-family:var(--font-serif);margin:0;font-size:2rem;font-weight:500;line-height:2.5rem;position:absolute;top:.375rem;right:.875rem}.read-feedback{text-align:center;flex-direction:column;justify-content:flex-start;align-items:center;min-height:5.5rem;margin-block:.75rem .5rem;display:flex}.read-feedback p{margin:0}.read-prompt{color:var(--text-muted);font-size:1.125rem}.read-result{font-family:var(--font-serif);font-variant-numeric:tabular-nums;animation:ink-in var(--dur) ease-out;align-items:center;gap:.625rem;font-size:clamp(1.75rem,1.4rem + 1.5vw,2.25rem);font-weight:500;line-height:1.2;display:inline-flex}.read-result:is(:lang(zh),:lang(ja),:lang(ko)){font-weight:600}.read-feedback.is-correct .read-result{color:var(--ok)}.read-feedback.is-wrong .read-result{color:var(--bad)}.read-icon{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:.8em;height:.8em}.read-feedback .read-target{text-wrap:balance;max-width:30rem;animation:ink-in var(--dur) ease-out;margin-top:.875rem;font-size:1.0625rem}.read-keyboard{margin-top:1rem}@keyframes ink-in{0%{opacity:0;transform:translateY(.25rem)}}.read-summary h2{text-wrap:balance;font-family:var(--font-serif);letter-spacing:-.015em;margin:1.75rem 0 0;font-size:clamp(1.75rem,1.5rem + 1vw,2.125rem);font-weight:500;line-height:1.2}.read-summary h2:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-weight:600}.read-summary>.muted{margin:.25rem 0 0}.figures{border-block:1px solid var(--border);grid-template-columns:repeat(3,minmax(0,1fr));max-width:38rem;margin:2rem 0;display:grid}.figures div{padding:1rem 1.25rem 1.125rem}.figures div:first-child{padding-inline-start:0}.figures div+div{border-inline-start:1px solid var(--border)}.figures dt{color:var(--text-muted);letter-spacing:.09em;text-transform:uppercase;font-size:.8125rem;font-weight:600}.figures dt:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.875rem}.figures dd{font-family:var(--font-serif);font-variant-numeric:tabular-nums;white-space:nowrap;margin:.25rem 0 0;font-size:clamp(1.75rem,1.4rem + 2vw,2.75rem);font-weight:500;line-height:1.15}.note-lists{flex-wrap:wrap;gap:1.25rem 3.5rem;display:flex}.note-list h3{color:var(--text-muted);letter-spacing:.09em;text-transform:uppercase;margin:0 0 .375rem;font-size:.8125rem;font-weight:600}.note-list h3:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.875rem}.note-list ul{margin:0;padding:0;list-style:none}.note-list li{font-variant-numeric:tabular-nums}.note-list p{margin:0}.read-mastery{text-wrap:pretty;max-width:38rem;margin:2rem 0 0}.read-mastery.is-mastered{color:var(--ok);font-weight:600}.actions{flex-wrap:wrap;gap:.75rem;margin-top:2rem;display:flex}@media (width<=30rem){.figures div{padding-inline:.75rem}}@media (width<=40rem){.read-session{--sheet-px:clamp(.25rem, 3.5vw - .5rem, 2.5rem)}.read-card{padding-top:clamp(.5rem,2.5vw,1.5rem)}.read-feedback{min-height:7.5rem}}.storage-notice{border:1px solid var(--warn-rule);border-radius:var(--radius);background:var(--warn-soft);flex-wrap:wrap;align-items:flex-start;gap:.5rem 1rem;margin:0 0 2rem;padding:.75rem .75rem .75rem 1rem;display:flex}.storage-notice svg{fill:none;width:1.25rem;height:1.25rem;stroke:var(--warn);stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;flex:none;margin-top:.1875rem}.storage-notice p{text-wrap:pretty;flex:16rem;margin:0}.storage-notice .button{border-color:var(--text-muted);margin-inline-start:auto}.empty{flex-direction:column;align-items:flex-start;gap:1rem;max-width:34rem;margin-top:1.5rem;display:flex}.empty p{color:var(--text-muted);text-wrap:pretty;margin:0}.empty-staff{width:9rem;height:auto;fill:var(--text);stroke:var(--text);margin-bottom:.25rem;overflow:visible}.empty-staff line{stroke-width:.9px}.empty-staff .empty-barline{stroke-width:1.2px}.empty-staff path,.empty-staff rect{stroke:none}.button:is(a){text-decoration:none}.progress>h1+.practice-figures .figures{margin-top:1.5rem}.progress h2,.data h2{font-family:var(--font-serif);letter-spacing:-.012em;text-wrap:balance;margin:0 0 .5rem;font-size:clamp(1.5rem,1.3rem + .8vw,1.75rem);font-weight:500;line-height:1.2}.progress h2:is(:lang(zh),:lang(ja),:lang(ko)),.data h2:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-weight:600}.history,.heatmap,.sessions{border-top:1px solid var(--border);margin-top:3.5rem;padding-top:2rem}.practice-figures .figures{margin:1rem 0}.goal{align-items:center;gap:.5rem;margin:0;font-weight:600;display:inline-flex}.goal svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:1rem;height:1rem}.goal.is-reached{color:var(--ok)}.practice-figures .help{max-width:40rem}.history{max-width:46rem}.history-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.5rem 1.5rem;display:flex}.history-head h2{margin-bottom:0}.history-switch{border:0;min-width:0;margin:0;padding:0}.history-chart{border-bottom:1px solid var(--text);align-items:flex-end;gap:2px;height:10rem;margin-top:1.25rem;padding-top:.25rem;display:flex;position:relative}.history-goal{border-top:1px dotted var(--text-muted);pointer-events:none;position:absolute;inset-inline:0}.history-chart,.history-axis{margin-inline-end:3rem}.history-goal-label{color:var(--text-muted);white-space:nowrap;font-variant-numeric:tabular-nums;padding-inline-start:.5rem;font-size:.75rem;line-height:1;position:absolute;top:0;left:100%;transform:translateY(-50%)}.history-day{border-radius:var(--radius) var(--radius) 0 0;min-width:0;height:100%;transition:background-color var(--dur-fast) ease-out;flex:1 1 0;justify-content:center;align-items:flex-end;display:flex}.history-day[data-today]{background:var(--sunk)}@media (hover:hover){.history-day:hover{background:var(--sunk)}}.history-bar{border-radius:4px 4px 0 0;width:min(100%,.875rem)}.history-bar.is-some{background:var(--control);min-height:2px}.history-bar.is-reached{background:var(--text)}.history-axis{color:var(--text-muted);font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:.375rem;font-size:.8125rem;display:flex}.history-axis span:last-child{color:var(--text);font-weight:600}.history-details{margin-top:1rem}.history-details summary{min-height:2.75rem;color:var(--accent);cursor:pointer;align-items:center;gap:.375rem;font-weight:600;list-style:none;display:inline-flex}.history-details summary::-webkit-details-marker{display:none}.history-details summary:before{content:"";width:.4375rem;height:.4375rem;transition:transform var(--dur) ease-out;border-bottom:1.5px solid;border-right:1.5px solid;transform:translateY(-1px)rotate(-45deg)}.history-details[open] summary:before{transform:translateY(-3px)rotate(45deg)}.history-table,.import-counts{border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:.5rem}.history-table th,.history-table td,.import-counts th,.import-counts td{border-bottom:1px solid var(--border);text-align:start;padding:.375rem 1.25rem .375rem 0}.history-table thead th,.import-counts thead th{border-bottom-color:var(--text-muted);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;vertical-align:bottom;font-size:.75rem;font-weight:600}.history-table thead th:is(:lang(zh),:lang(ja),:lang(ko)),.import-counts thead th:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.8125rem}.history-table tbody th,.import-counts tbody th{font-weight:500}.year-scroll{margin-top:1.25rem;padding-bottom:.25rem;overflow-x:auto}.year-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.year-grid{width:max-content;color:var(--text-muted);font-variant-numeric:tabular-nums;grid-template-rows:auto repeat(7,.625rem);grid-template-columns:max-content;grid-auto-columns:.625rem;grid-auto-flow:column;gap:3px;padding-inline-end:1rem;font-size:.75rem;line-height:1;display:grid}.year-weekday{z-index:1;background:var(--bg);box-shadow:3px 0 0 var(--bg);align-self:stretch;align-items:center;padding-inline-end:.375rem;font-size:.6875rem;display:flex;position:sticky;inset-inline-start:0}.year-month{white-space:nowrap;padding-bottom:.25rem}.year-cell{border-radius:var(--radius-sm);background:var(--year-0);forced-color-adjust:none;width:.625rem;height:.625rem;display:block}.year-cell[data-level="1"]{background:var(--year-1)}.year-cell[data-level="2"]{background:var(--year-2)}.year-cell[data-level="3"]{background:var(--year-3)}.year-cell[data-level="4"]{background:var(--year-4)}.year-grid .year-cell[data-today]{outline:1.5px solid var(--text);outline-offset:1px}@media (hover:hover){.year-grid .year-cell:hover{outline:1.5px solid var(--text-muted);outline-offset:1px}}.year-legend{color:var(--text-muted);font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:.375rem 1.25rem;margin:.75rem 0 0;padding:0;font-size:.8125rem;list-style:none;display:flex}.year-legend li{align-items:center;gap:.375rem;display:inline-flex}.session-table{grid-template-columns:minmax(9rem,1.6fr) minmax(6rem,1fr) repeat(5,auto);column-gap:1.25rem;display:grid}.session-head,.session-list,.session,.session dl{grid-column:1/-1;grid-template-columns:subgrid;display:grid}.sessions h2{margin-bottom:1.25rem}.session-head{border-bottom:1px solid var(--text-muted);color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;padding-bottom:.5rem;font-size:.75rem;font-weight:600}.session-head:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.8125rem}.session-list{margin:0;padding:0;list-style:none}.session{border-bottom:1px solid var(--border);padding:.625rem 0}.session dl{margin:0}.session dt{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.session dd{font-variant-numeric:tabular-nums;margin:0}.session abbr{text-decoration:none}.session.is-free dd{color:var(--text-muted)}.session-piece{text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap;max-width:14rem;display:inline-block;overflow:hidden}.session.is-free dl>div:nth-child(-n+2) dd,.session.is-free dl>div:nth-child(4) dd,.session.is-free dl>div:nth-child(5) dd{color:var(--text)}.session-more{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1.25rem;display:flex}.session-more p{margin:0}@media (width<=47.99rem){.session-table,.session-list,.session{display:block}.session-head{display:none}.session dl{flex-wrap:wrap;gap:.125rem 1rem;display:flex}.session dl>div{align-items:baseline;gap:.375rem;display:flex}.session dl>div:first-child{flex-basis:100%;font-weight:600}.session dl>div:nth-child(n+4) dt{clip-path:none;width:auto;height:auto;color:var(--text-muted);font-size:.8125rem;position:static;overflow:visible}.session.is-free dl>div:nth-child(3),.session.is-free dl>div:nth-child(n+6){display:none}}.field.data{border-top:1px solid var(--border);margin-top:3.5rem;padding-top:2rem}.about-links{flex-wrap:wrap;gap:.25rem 1.5rem;margin:.75rem 0 0;padding:0;list-style:none;display:flex}.about-links a{padding-block:.5rem;font-weight:600;display:inline-block}@media (width>=64rem){.settings{grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);align-items:start;column-gap:clamp(2.5rem,4vw,4rem);max-width:none;display:grid}.settings>*,.settings>.field.data>*{grid-column:2;min-width:0;max-width:42rem}.settings>h1{grid-area:1/1/span 2;margin:0}.settings>h1+.field{margin-top:.5rem}.settings>.field.data{grid-template-columns:subgrid;grid-column:1/-1;max-width:none;display:grid}.settings>.field.data>h2{grid-area:1/1/span 40;align-self:start;position:sticky;top:6rem}}.credits{margin:0;padding:0;list-style:none}.credit{overflow-wrap:anywhere;padding-block:1rem}.credit+.credit{border-top:1px solid var(--border)}.credit p{margin:.25rem 0 0}.licence-text{margin-top:.25rem}.licence-text pre{border-radius:var(--radius);background:var(--sunk);white-space:pre-wrap;max-height:24rem;margin:.25rem 0 0;padding:.75rem 1rem;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.75rem;line-height:1.5;overflow:auto}.data-status{margin:.75rem 0 0}.account-form{gap:.5rem;max-width:34rem;margin-top:1rem;display:grid}.account-form>label{font-weight:600}.account-row{flex-wrap:wrap;gap:.5rem .75rem;display:flex}.account-code{font-variant-numeric:tabular-nums;letter-spacing:.2em;flex:0 9rem}.account-email{overflow-wrap:anywhere;margin:.75rem 0 0;font-weight:600}.account-delete{margin-top:1.25rem}.data-status.is-warning{color:var(--warn);font-weight:600}.data-actions{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1.25rem 2rem;margin-top:1.5rem;display:grid}.button:disabled{opacity:.5;cursor:not-allowed}.data-message{animation:ink-in var(--dur) ease-out;margin:1.25rem 0 0;font-weight:600}.data-message.is-ok{color:var(--ok)}.data-message.is-error{color:var(--bad)}.import-preview{border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sheet);animation:ink-in var(--dur) ease-out;margin-top:1.75rem;padding:clamp(1rem,3vw,1.5rem)}.import-preview h3{font-family:var(--font-serif);margin:0;font-size:1.375rem;font-weight:500;line-height:1.3}.import-preview h3:is(:lang(zh),:lang(ja),:lang(ko)){font-weight:600}.import-preview>.muted{overflow-wrap:anywhere;margin:.25rem 0 0}.import-counts td,.import-counts thead th+th{text-align:end}.import-counts{margin-top:1rem}.import-counts td.is-invalid{color:var(--bad);font-weight:700}.import-invalid p{margin:1rem 0 .25rem;font-weight:600}.import-invalid ul{overflow-wrap:anywhere;margin:0;padding-inline-start:1.25rem}.import-prefs{align-items:flex-start;margin-top:1rem;padding-block:.5rem}.import-prefs input{margin-top:.25rem}.hm-intro{max-width:40rem;margin-top:0}.hm-controls{flex-wrap:wrap;align-items:flex-end;gap:1rem 2rem;margin:1.5rem 0 1.25rem;display:flex}.hm-control{border:0;min-width:0;margin:0;padding:0}.hm-control>label,.hm-control>legend{color:var(--text-muted);letter-spacing:.09em;text-transform:uppercase;margin-bottom:.5rem;padding:0;font-size:.8125rem;font-weight:600;line-height:1.4;display:block}.hm-control>label:is(:lang(zh),:lang(ja),:lang(ko)),.hm-control>legend:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.875rem}.hm-control select{width:100%;max-width:22rem}.hm-weakest{margin:0 0 1rem}.hm-weak-note{white-space:nowrap;align-items:center;gap:.375rem;display:inline-flex}.hm-swatch{border-radius:3px;flex:none;width:.875rem;height:.875rem;display:inline-block;box-shadow:inset 0 0 0 1px #0003}.hm-swatch.is-none{border:1.5px dashed var(--heat-none);box-shadow:none;background:0 0}.hm-legend{flex-wrap:wrap;align-items:flex-start;gap:.75rem 2.5rem;font-size:.875rem;display:flex}.hm-scale{flex:0 22rem;min-width:0;margin:0}.hm-scale figcaption{margin-bottom:.375rem;font-weight:600}.hm-scale-bar{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;height:.875rem;display:grid;position:relative}.hm-scale-bar>span:not(.hm-scale-target){border-radius:2px}.hm-scale-target{background:var(--text);width:2px;margin-left:-1px;position:absolute;top:-4px;bottom:-4px}.hm-scale-ticks,.hm-scale-ends{height:1.25rem;color:var(--text-muted);font-variant-numeric:tabular-nums;position:relative}.hm-scale-ticks span,.hm-scale-target-label{white-space:nowrap;position:absolute;top:.125rem;transform:translate(-50%)}.hm-scale-ends{justify-content:space-between;display:flex}.hm-scale-target-label{color:var(--text);font-weight:600;top:0}.hm-keys{flex-direction:column;gap:.375rem;margin:0;padding:0;list-style:none;display:flex}.hm-keys li{align-items:center;gap:.5rem;display:flex}.hm-errors-icon{flex:none;width:.875rem;height:.875rem}.hm-track{fill:var(--heat-track)}.hm-bar{fill:var(--heat-error)}.hm-view{border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sheet);margin-top:1.25rem;padding:1rem .75rem;position:relative}.hm-systems{flex-direction:column;gap:.5rem;display:flex}.hm-system{max-width:100%;display:block;overflow:visible}.hm-staff-line,.hm-barline,.hm-ledger{stroke:var(--text)}.hm-staff-line{stroke-width:.11px}.hm-barline{stroke-width:.14px}.hm-ledger{stroke-width:.16px}.hm-glyph{fill:var(--text);font-family:Bravura}.hm-accidental-text{fill:var(--text)}.hm-strip-base{stroke:var(--text-muted);stroke-width:.08px}.hm-head{stroke:var(--heat-ink);stroke-width:.12px}.hm-head.is-none{fill:var(--surface);stroke:var(--heat-none);stroke-width:.16px;stroke-dasharray:.32 .22}.hm-note{outline:none}.hm-hit{fill:#0000}.hm-note.is-active .hm-hit{fill:var(--accent-soft)}.hm-note:focus-visible .hm-hit{stroke:var(--focus);stroke-width:.25px}.hm-scroller{--white-min:22px;box-shadow:none;background:0 0;border-radius:0;padding-top:0}.hm-keyboard{min-width:calc(var(--whites) * var(--white-min));max-width:calc(var(--whites) * 2.75rem)}.hm-piano{min-width:0;min-height:9rem;aspect-ratio:var(--whites) / 5.6}.hm-piano .key{cursor:default}.hm-piano .key-white{border-right-color:var(--heat-key-white-edge);background:var(--heat-key-white)}.hm-key-swatch{height:calc(37% - 1.25rem - 6px);box-shadow:0 0 0 1px var(--heat-ink);border-radius:3px;position:absolute;bottom:1.25rem;left:12%;right:12%}.key-black .hm-key-swatch{height:40%;box-shadow:0 0 0 1px var(--key-white);bottom:7px;left:14%;right:14%}.hm-key-swatch.is-none{border:2px dashed var(--heat-none);box-shadow:none}.key-black .hm-key-swatch.is-none{border-color:var(--key-white-edge)}.hm-key-label{color:var(--heat-key-label);text-align:center;pointer-events:none;font-size:.625rem;font-weight:600;line-height:1;position:absolute;bottom:.375rem;left:0;right:0}.hm-piano .key.is-active{z-index:2;box-shadow:inset 0 0 0 3px var(--focus)}.hm-key-strip{height:2rem;margin-top:.375rem;position:relative}.hm-key-errors{background:var(--heat-track);border-radius:2px 2px 0 0;align-items:flex-end;display:flex;position:absolute;top:0;bottom:0}.hm-key-bar{background:var(--heat-error);width:100%}.hm-tooltip{z-index:5;border-radius:var(--radius);background:var(--surface);width:max-content;max-width:min(18rem,100%);box-shadow:var(--shadow-pop);pointer-events:none;padding:.75rem .875rem;font-size:.875rem;line-height:1.45;position:absolute}.hm-tooltip.is-floating{z-index:20;max-width:min(18rem,100vw - 1rem);position:fixed}.hm-tooltip p{margin:0}.hm-tooltip-title{font-size:1rem;font-weight:700}.hm-tooltip .hm-tooltip-speed,.hm-tooltip .hm-tooltip-nodata{flex-wrap:wrap;align-items:center;gap:.125rem .5rem;margin-top:.25rem;display:flex}.hm-tooltip-speed strong{font-family:var(--font-serif);font-variant-numeric:tabular-nums;font-size:1.375rem;font-weight:500}.hm-tooltip-speed span:last-child,.hm-tooltip-nodata{color:var(--text-muted)}.hm-tooltip-figures{gap:.125rem;margin:.5rem 0 0;display:grid}.hm-tooltip-figures div{gap:.375rem;display:flex}.hm-tooltip-figures dd{font-variant-numeric:tabular-nums;margin:0;font-weight:650}.hm-tooltip-figures dt{color:var(--text-muted)}.hm-tooltip .hm-tooltip-note{color:var(--text-muted);margin-top:.375rem}.hm-table-order{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:.75rem 0 .25rem;display:flex}.hm-table-order label{font-weight:600}.hm-table-order select{min-width:0}.hm-table-scroll{max-width:100%;overflow-x:auto}.hm-table th,.hm-table td{white-space:nowrap}.hm-band{white-space:nowrap;align-items:center;gap:.375rem;display:inline-flex}.pieces-intro{text-wrap:pretty;max-width:38rem;margin:0;font-size:1.125rem}.library{margin-top:2.25rem}.library-level{border-top:1px solid var(--border);grid-template-columns:8rem minmax(0,1fr);column-gap:1.5rem;display:grid}.library-level-name{color:var(--text-muted);letter-spacing:.09em;text-transform:uppercase;margin:0;padding-top:1rem;font-size:.8125rem;font-weight:600;line-height:1.4}.library-level-name:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.875rem}.library-list{margin:0;padding:0;list-style:none}.library-list>li+li{border-top:1px solid var(--border)}.library-piece{color:var(--text);transition:background-color var(--dur-fast) ease-out;flex-wrap:wrap;align-items:baseline;gap:0 .75rem;padding:.75rem .75rem .875rem;text-decoration:none;display:flex}@media (hover:hover){.library-piece:hover{background:var(--sunk)}.library-piece:hover .library-piece-title{color:var(--accent)}}.library-piece-title{font-family:var(--font-serif);letter-spacing:-.012em;transition:color var(--dur-fast) ease-out;font-size:1.3125rem;font-weight:500;line-height:1.3}.library-piece-title:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-weight:600}.library-piece-composer{color:var(--text-muted);font-size:.9375rem}.library-piece-progress{color:var(--text-muted);font-variant-numeric:tabular-nums;flex-basis:100%;font-size:.875rem;line-height:1.5}.library-piece-note{max-width:40rem;color:var(--text-muted);text-wrap:pretty;flex-basis:100%;font-size:.9375rem;line-height:1.5}.library-level:last-of-type{border-bottom:1px solid var(--border)}.library-help{margin-top:.75rem}@media (width<=40rem){.library-level{grid-template-columns:minmax(0,1fr)}.library-level-name{padding-top:.875rem;padding-inline:.75rem}}.your-pieces{border-top:1px solid var(--border);margin-top:3.5rem;padding-top:2rem}.your-pieces h2{font-family:var(--font-serif);letter-spacing:-.012em;margin:0 0 .5rem;font-size:clamp(1.5rem,1.3rem + .8vw,1.75rem);font-weight:500;line-height:1.2}.your-pieces h2:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-weight:600}.pieces-drop{border:1px dashed var(--control);border-radius:var(--radius);max-width:38rem;transition:background-color var(--dur-fast) ease-out, border-color var(--dur-fast) ease-out;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:1.25rem 0;padding:.875rem 1rem;display:flex}.pieces-drop.is-dragging{border-color:var(--accent);background:var(--accent-soft);border-style:solid}.pieces-progress{color:var(--text-muted);margin:0 0 1rem}.pieces-report{max-width:38rem;margin-bottom:1.5rem}.pieces-report>p{margin:.75rem 0 0}.pieces-report .muted{margin-top:.25rem}.pieces-report-warn{color:var(--warn);font-weight:600}.pieces-warnings p{margin:1rem 0 .25rem;font-weight:600}.pieces-warnings ul{color:var(--text-muted);margin:0;padding-inline-start:1.25rem}.your-list{border-block:1px solid var(--border);max-width:46rem}.your-piece-row{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:0 1rem;display:flex}.your-piece-row .library-piece{flex:20rem;min-width:0}.your-piece-row .library-piece-note{overflow-wrap:anywhere}.your-piece-actions{flex-wrap:wrap;gap:0 1.25rem;padding:.375rem .75rem;display:flex}.your-piece-actions .button-link,.your-piece-panel .button-link{min-height:2.5rem}.button-link.is-danger{color:var(--bad)}.your-piece-panel{animation:ink-in var(--dur) ease-out;padding:.25rem .75rem 1.25rem}.your-piece-panel>p{margin:0}.your-piece-panel .actions{margin-top:1rem}.your-piece-panel.rename{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.your-piece-panel.rename label{font-weight:600}.text-input{border:1px solid var(--control);border-radius:var(--radius-sm);background:var(--surface);min-width:0;min-height:2.75rem;color:var(--text);font:inherit;flex:14rem;padding:.5rem .75rem}.hands-grid{gap:.5rem;max-width:34rem;margin-top:.75rem;display:grid}.hands-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem 1rem;display:flex}.hands-row select{min-width:11rem}.button-danger{border-color:var(--bad);background:var(--bad);color:var(--accent-contrast)}@media (hover:hover){.button-danger:hover:not(:disabled){border-color:var(--bad);background:var(--bad);opacity:.88}}.main:has(.piece-session){padding-block:.75rem calc(1rem + var(--safe-bottom))}.piece-back{margin:0 0 1rem}.piece-session{flex-direction:column;gap:.625rem;display:flex}.piece-session:focus{outline:none}.piece-session>:not(.piece-stage){flex:none}@media (width>=48rem) and (height>=36rem){#root:has(.piece-session){flex-direction:column;height:100dvh;display:flex}#root:has(.piece-session)>.header{width:100%}.main:has(.piece-session){width:100%}.main:has(.piece-session){flex-direction:column;flex:auto;min-height:0;display:flex}.piece-session{flex:auto;min-height:0}}.piece-head{flex-wrap:wrap;align-items:baseline;gap:0 1.25rem;display:flex}.piece-back-link{align-items:center;gap:.375rem;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-flex}.piece-back-link:before{content:"";border-bottom:1.5px solid;border-left:1.5px solid;width:.4375rem;height:.4375rem;transform:rotate(45deg)}.piece-title{letter-spacing:-.012em;margin:0;font-size:clamp(1.375rem,1.2rem + .6vw,1.625rem);line-height:1.25}.piece-composer{color:var(--text-muted);font-family:var(--font-sans);letter-spacing:normal;margin-inline-start:.75rem;font-size:.9375rem;font-weight:400}.piece-controls{flex-wrap:wrap;align-items:center;gap:.5rem 1.125rem;font-size:.9375rem;display:flex}.piece-control{border:0;align-items:center;gap:.5rem;min-width:0;margin:0;padding:0;display:inline-flex}.piece-control-label{color:var(--text-muted);letter-spacing:.09em;text-transform:uppercase;font-size:.75rem;font-weight:600}.piece-control-label:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.8125rem}.piece-controls .check{min-height:2.5rem;font-size:.9375rem}.segmented.is-compact span{min-width:0;min-height:2.5rem;padding:.3125rem .875rem}select.is-compact{field-sizing:content;min-width:4.25rem;min-height:2.5rem;padding:.3125rem 2.25rem .3125rem .625rem}.button.is-compact{min-height:2.5rem;padding:.25rem 1rem;font-size:.9375rem}.button-icon{border-radius:var(--radius-sm);width:2.5rem;height:2.5rem;color:var(--text-muted);cursor:pointer;background:0 0;border:0;place-items:center;padding:0;display:inline-grid}.button-icon svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;width:.875rem;height:.875rem}@media (hover:hover){.button-icon:hover{background:var(--sunk);color:var(--text)}}.piece-actions{gap:.5rem;margin-inline-start:auto;display:flex}.piece-notes{flex-direction:column;display:flex}.piece-stage{flex:auto;min-height:14rem;display:flex;position:relative}.score-frame{overscroll-behavior:contain;border-radius:var(--radius);background:var(--surface);min-width:0;box-shadow:var(--shadow-sheet);scrollbar-width:thin;flex:auto;overflow:hidden auto}.score-page{padding:.25rem .5rem .5rem;position:relative}.score-layer{pointer-events:none;position:absolute;inset:0}.score-cursor{border-radius:var(--radius-sm);background:var(--accent-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--accent) 28%, transparent);transition:transform var(--dur) cubic-bezier(.16, 1, .3, 1);position:absolute;top:0;left:0}.score-host{color:var(--text);position:relative}.score-svg{fill:currentColor;width:100%;height:auto;display:block}.score-svg [fill]:not([fill=none]){fill:currentColor}.score-svg [stroke]:not([stroke=none]){stroke:currentColor}.score-svg g.note{transition:color var(--dur-fast) ease-out}.score-svg .is-other{opacity:.4}.score-svg .is-held{color:var(--text-muted)}.score-svg .is-current{color:var(--accent)}.score-svg .is-pressed{color:var(--ok)}.piece-overlay{pointer-events:none;text-align:center;place-items:center;padding:1rem;display:grid;position:absolute;inset:0}.piece-overlay p{max-width:28rem;margin:0}.piece-error{color:var(--bad);font-weight:600}.bar-tint,.bar-strip,.bar-wrong{position:absolute}.bar-tint{border-radius:var(--radius-sm)}.bar-strip{border-radius:2px;height:4px}.bar-strip.is-none{border-top:1.5px dashed var(--heat-none);border-radius:0;height:0}.bar-wrong{width:32px;color:var(--text);font-family:var(--font-sans);font-variant-numeric:tabular-nums;text-align:right;font-size:.6875rem;font-weight:650;line-height:14px}.bar-wrong.is-key{width:auto;position:static}.bar-targets{pointer-events:none;position:absolute;inset:0}.bar-target{border-radius:var(--radius-sm);pointer-events:auto;background:0 0;border:0;padding:0;position:absolute}@media (hover:hover){.bar-target:hover{box-shadow:inset 0 0 0 1px var(--text-muted)}}.bar-target:focus-visible{outline:2px solid var(--focus);outline-offset:1px}.weak-bars{flex-wrap:wrap;align-items:center;gap:.375rem 1.5rem;font-size:.8125rem;display:flex}.weak-scale{flex-direction:column;gap:.125rem;min-width:0;margin:0;display:flex}.weak-scale figcaption{color:var(--text-muted);white-space:nowrap;padding-top:.0625rem;font-weight:600}.weak-scale>div{width:13rem;max-width:100%}.weak-scale .hm-scale-bar{height:.625rem}.weak-scale .hm-scale-ticks{height:1rem}.weak-keys{color:var(--text-muted);flex-direction:column;gap:.125rem;margin:0;padding:0;list-style:none;display:flex}.weak-keys li{align-items:center;gap:.375rem;display:inline-flex}.weak-actions{flex-wrap:wrap;gap:.5rem;margin-inline-start:auto;display:flex}.weak-note{flex-basis:100%;margin:0}.weak-metric .segmented.is-compact span{min-height:2.25rem;padding-inline:.75rem;font-size:.875rem}.weak-table{max-width:44rem}.weak-table-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;display:flex}.weak-table .hm-table-scroll{overflow-x:auto}.weak-table .help{margin-bottom:0}.piece-summary{z-index:2;border-radius:var(--radius);background:var(--surface);max-width:38rem;height:fit-content;max-height:calc(100% - 1.5rem);box-shadow:var(--shadow-pop);animation:ink-in var(--dur) ease-out;margin:auto;padding:1.25rem clamp(1rem,3vw,1.75rem) 1.5rem;position:absolute;inset:.75rem;overflow-y:auto}.piece-summary h2{font-family:var(--font-serif);letter-spacing:-.012em;margin:0;font-size:clamp(1.5rem,1.3rem + .8vw,1.875rem);font-weight:500;line-height:1.2}.piece-summary h2:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-weight:600}.piece-summary h2:focus{outline:none}.piece-summary .figures{margin:1rem 0}.piece-summary .figures dd{font-size:clamp(1.5rem,1.25rem + 1vw,2.125rem)}.piece-summary .figures div{padding-block:.625rem .75rem}.piece-summary .actions{margin-top:1.25rem}.piece-status{flex-wrap:wrap;align-items:center;gap:.25rem 1.5rem;min-height:2.5rem;font-size:.9375rem;line-height:1.4;display:flex}.piece-status .piece-notes{font-size:.875rem}.piece-status p{margin:0}.piece-status-main{font-variant-numeric:tabular-nums;flex-wrap:wrap;gap:0 1rem;display:flex}.piece-status-keys{color:var(--accent)}.piece-keys{width:100%;max-width:calc(var(--piece-whites,22) * 1.375rem);margin-inline:auto}.piece-piano{--white-min:14px}.piece-piano .piano{min-height:0}.key.is-wrong{box-shadow:inset 0 0 0 3px var(--bad)}.key-white.is-wrong{background:var(--bad-soft)}.key-black.is-wrong{background:var(--bad)}@media (width<=47.99rem){.piece-stage{flex:none;height:62dvh}.piece-actions{margin-inline-start:0}}.piece-mode .segmented span{font-weight:600}.piece-options{margin-inline-start:auto;position:relative}.piece-options>summary{cursor:pointer;align-items:center;gap:.5rem;list-style:none;display:inline-flex}.piece-options>summary::-webkit-details-marker{display:none}.piece-options>summary:after{content:"";width:.4375rem;height:.4375rem;transition:transform var(--dur) ease-out;border-bottom:1.5px solid;border-right:1.5px solid;transform:translateY(-2px)rotate(45deg)}.piece-options[open]>summary:after{transform:translateY(1px)rotate(-135deg)}.piece-options-panel{z-index:6;width:max-content;max-width:min(24rem, calc(100vw - 2 * var(--gutter)));border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-pop);animation:ink-in var(--dur) ease-out;gap:.625rem;padding:.875rem 1rem 1rem;display:grid;position:absolute;top:calc(100% + .375rem);right:0}.piece-option{border:0;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:0;padding:0;display:flex}.piece-option .piece-control-label{min-width:5.5rem}.piece-option-checks{border-top:1px solid var(--border);flex-wrap:wrap;gap:0 1.25rem;padding-top:.375rem;display:flex}.piece-option-checks .check{min-height:2.5rem;font-size:.9375rem}.piece-latency{border-top:1px solid var(--border);color:var(--text-muted);font-variant-numeric:tabular-nums;padding-top:.625rem;font-size:.875rem}.piece-volume{width:10rem;accent-color:var(--accent)}.piece-actions>*{white-space:nowrap;flex:none}.piece-go{justify-content:center;align-items:center;gap:.5rem;min-width:6.5rem;display:inline-flex}.piece-go svg{width:.75rem;height:.75rem}.piece-go svg .is-filled{fill:currentColor}.piece-count{font-family:var(--font-serif);font-size:1.125rem;font-weight:500}.timing-mark{color:var(--text-muted);align-items:center;gap:.5rem;display:inline-flex}.timing-mark svg{width:3.75rem;height:.75rem;overflow:visible}.timing-track{stroke:var(--border);stroke-width:1px}.timing-zero{stroke:var(--text-muted);stroke-width:1px}.timing-tick{stroke:var(--accent);stroke-width:2.5px;stroke-linecap:round}.timing-words{min-width:8ch;color:var(--text)}.timing-words.is-extra{color:var(--text-muted)}.rhythm-summary{max-width:44rem;padding-top:1rem}.rhythm-summary-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;display:flex}.rhythm-summary-head .actions{flex-wrap:wrap;gap:.5rem;margin:0;display:flex}.rhythm-summary h2{font-size:clamp(1.375rem,1.25rem + .5vw,1.625rem)}.rhythm-summary .figures{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin:.75rem 0}.rhythm-summary .figures div{padding-block:.375rem .5rem}.rhythm-summary .figures dt{font-size:.75rem}.rhythm-summary .figures dd{margin-top:.125rem;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem)}.rhythm-summary .history-details{margin-top:.25rem}.rhythm-summary>.help{margin:.5rem 0 0}.rhythm-verdict{max-width:40rem;margin:0 0 .5rem;font-size:1.0625rem;line-height:1.5}.deviation{margin:0}.deviation figcaption{color:var(--text-muted);letter-spacing:.09em;text-transform:uppercase;font-size:.8125rem;font-weight:600}.deviation figcaption:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.875rem}.deviation-frame{margin-top:.375rem;position:relative}.deviation-frame svg{width:100%;height:auto;font-family:var(--font-sans);touch-action:pan-y;display:block;overflow:visible}.deviation-band{fill:color-mix(in oklab, var(--text) 7%, var(--surface))}.deviation-grid text,.deviation-zero text,.deviation-word,.deviation-stretch text{fill:var(--text-muted);font-variant-numeric:tabular-nums;font-size:11px}.deviation-zero line{stroke:var(--text);stroke-width:1px}.deviation-stretch line{stroke:var(--text);stroke-width:2px;stroke-linecap:round}.deviation-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2px;paint-order:stroke}.deviation-dot.is-hover{fill:var(--text)}.deviation-missed{fill:none;stroke:var(--text-muted);stroke-width:1.5px;stroke-linecap:round}.deviation-tip{border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow-pop);white-space:nowrap;pointer-events:none;margin:0;padding:.25rem .5rem;font-size:.8125rem;position:absolute;top:-.25rem;transform:translate(-50%,-100%)}.deviation .help{margin:.25rem 0 0}.deviation-table{font-variant-numeric:tabular-nums}.scale-picker{flex-wrap:wrap;align-items:flex-end;gap:.75rem 1.5rem;display:flex}.scale-picker .field{margin:0}.scale-picker select{min-width:9rem}.scale-stage:focus{outline:none}.scale-session{flex-direction:column;gap:.75rem;margin-top:1.25rem;display:flex}.scale-head{flex-wrap:wrap;align-items:baseline;gap:.25rem 1rem;display:flex}.scale-title{margin:0;font-size:clamp(1.375rem,1.25rem + .5vw,1.625rem)}.scale-status{color:var(--text-muted);margin:0}.scale-head-tools{flex-wrap:wrap;align-items:center;gap:.25rem 1rem;margin-inline-start:auto;display:flex}.scale-head-tools .check{min-height:2.5rem;font-size:.9375rem}.scale-cue{color:var(--accent);margin:0;font-weight:600}.scale-sheet{min-height:9rem;display:flex;position:relative}.scale-keys{width:100%;max-width:calc(var(--piece-whites,22) * 1.375rem);margin-inline:auto}.score-svg .is-dev-1{color:var(--heat-1)}.score-svg .is-dev-2{color:var(--heat-3)}.score-svg .is-dev-3{color:var(--heat-5)}.score-svg .is-dev-4{color:var(--heat-6)}.score-svg .is-missed{color:var(--bad)}.scale-summary{max-width:44rem}.scale-summary .figures{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin:.25rem 0 0}.scale-summary .figures div{padding-block:.375rem .5rem}.scale-summary .figures dt{font-size:.75rem}.scale-summary .figures dd{margin-top:.125rem;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem)}.scale-per-hand{gap:.125rem;display:grid}.scale-per-hand-word{color:var(--text-muted);font-family:var(--font-sans);font-size:.8125rem;font-weight:600}.scale-summary .scale-profile+.scale-profile{margin-top:1.5rem}.scale-rough{color:var(--text-muted);font-family:var(--font-sans);font-size:.8125rem;font-weight:600}.scale-verdict{max-width:40rem;margin:.75rem 0 1rem;font-size:1.0625rem;line-height:1.5}.scale-profile .deviation-dot.is-crossing{fill:var(--surface);stroke:var(--accent);stroke-width:2px}.scale-profile .deviation-dot.is-crossing.is-hover{stroke:var(--text)}.scale-profile .deviation-missed.is-wrong{stroke:var(--bad)}.scale-profile-turn line{stroke:var(--border);stroke-dasharray:3 3}.scale-profile-turn text,.scale-profile-finger{fill:var(--text-muted);font-variant-numeric:tabular-nums;font-size:10px}.scale-profile-finger.is-crossing{fill:var(--text);font-weight:700}.scale-profile-pause line{stroke:var(--warn);stroke-width:2px}.scale-profile-row line{stroke:var(--border)}.scale-profile-row rect{fill:var(--text-muted)}.scale-profile-row rect.is-marked{fill:var(--warn)}.scale-progress,.scale-list{border-top:1px solid var(--border);max-width:44rem;margin-top:2.5rem;padding-top:1.5rem}.scale-progress h2,.scale-list h2{margin:0;font-size:clamp(1.25rem,1.15rem + .4vw,1.5rem)}.scale-progress .figures{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin:.75rem 0 0}.scale-progress .figures div{padding-block:.375rem .5rem}.scale-progress .figures dt{font-size:.75rem}.scale-progress .figures dd{margin-top:.125rem;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem)}.scale-progress .figures dd.scale-progress-when{font-family:var(--font-sans);font-size:1rem;font-weight:600}.scale-suggestion{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:.75rem 0;display:flex}.scale-list-table tr[aria-current] th{color:var(--accent)}.scale-list-table td:last-child{text-align:end}@media (width<=30rem){.scale-progress .figures{grid-template-columns:repeat(2,minmax(0,1fr))}.scale-progress .figures div:nth-child(3){border-inline-start:0;padding-inline-start:0}}.scale-trend-grid{stroke:var(--border);stroke-width:1px}.scale-trend-line{fill:none;stroke:var(--accent);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.scale-trend-reference line{stroke:var(--text-muted);stroke-width:1px;opacity:.6}.scale-trend-reference text{fill:var(--text-muted);font-size:10px}.scale-dev,.scale-keyboard{text-align:center;margin:0}@media (width<=30rem){.scale-summary .figures{grid-template-columns:repeat(2,minmax(0,1fr))}.scale-summary .figures div:nth-child(3){border-inline-start:0;padding-inline-start:0}}.calibration-title.eyebrow{margin-bottom:.25rem}.calibration-tips{margin:.5rem 0;padding-inline-start:1.125rem}.calibration-tips li+li{margin-top:.25rem}.calibration-row{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.75rem;display:flex}.calibration-row p{margin:0}.calibration-progress{font-variant-numeric:tabular-nums;font-weight:600}.calibration-sheet{max-width:36rem}.sound-click,.sound-piano,.sound-keys{margin-top:1.5rem}.sound-click .sound-row input[type=range],.sound-piano .sound-row input[type=range]{width:12rem;accent-color:var(--accent)}.sound-keys .check{display:flex}.sound-piano .help[role=status],.sound-failed{margin-top:.5rem}.sound .calibration{margin-top:1.5rem}@media (width<=47.99rem){.rhythm-summary .figures{grid-template-columns:repeat(2,minmax(0,1fr))}.rhythm-summary .figures div:nth-child(3){border-inline-start:0;padding-inline-start:0}.piece-options{margin-inline-start:0}.piece-options[open]{flex-basis:100%}.piece-options-panel{width:auto;max-width:none;margin-top:.5rem;position:static}}.header nav{margin-inline-start:auto}.met-chip{border:1px solid var(--border);background:var(--surface);height:2.5rem;color:var(--text-muted);transition:border-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;border-radius:1.25rem;align-items:stretch;display:inline-flex}.met-chip[data-status=running]{border-color:var(--accent);color:var(--text)}.met-chip-toggle{color:inherit;font:600 .9375rem / 1 var(--font-sans);font-variant-numeric:tabular-nums;cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:1.25rem 0 0 1.25rem;align-items:center;gap:.5rem;padding:0 .625rem 0 .75rem;display:inline-flex}.met-chip-toggle:disabled{cursor:not-allowed}.met-chip-toggle:focus-visible{outline-offset:-2px}.met-chip-icon{fill:none;stroke:currentColor;stroke-width:1.3px;stroke-linejoin:round;stroke-linecap:round;flex:none;width:1rem;height:1rem}.met-chip-weight{fill:currentColor}.met-chip-dots{align-items:center;gap:.1875rem;display:inline-flex}.met-chip-dots .beat-slot{display:contents}.met-chip-dots .beat-dot{place-items:center;width:.4375rem;height:1rem;display:grid}.met-chip-dots .beat-dot-mark{opacity:.45;background:currentColor;border-radius:50%;width:.3125rem;height:.3125rem;transition:transform .16s ease-out,opacity .16s ease-out}.met-chip-dots .beat-dot[data-accent=accent] .beat-dot-mark{background:var(--accent);width:.4375rem;height:.4375rem}.met-chip-dots .beat-dot[data-accent=mute] .beat-dot-mark{background:0 0;box-shadow:inset 0 0 0 1px}.met-chip-dots .beat-dot[data-now] .beat-dot-mark{background:var(--accent);opacity:1;transition:none;transform:scale(1.5)}.met-chip-dots .beat-dot[data-now][data-accent=mute] .beat-dot-mark{background:0 0}.met-chip-bpm{text-align:end;min-width:1.75em}.met-chip-note{color:var(--warn);font-size:.8125rem}.met-chip-more{display:flex;position:relative}.met-chip-summary{border-left:1px solid var(--border);cursor:pointer;border-radius:0 1.25rem 1.25rem 0;place-items:center;width:2rem;list-style:none;display:grid}.met-chip-summary::-webkit-details-marker{display:none}.met-chip-summary svg{fill:none;stroke:currentColor;stroke-width:1.75px;stroke-linecap:round;stroke-linejoin:round;width:.875rem;height:.875rem;transition:transform var(--dur) ease-out}.met-chip-more[open] .met-chip-summary svg{transform:rotate(180deg)}@media (hover:hover){.met-chip-toggle:hover:not(:disabled),.met-chip-summary:hover{background:var(--sunk);color:var(--text)}}.met-chip-panel{z-index:20;width:max-content;max-width:min(22rem, calc(100vw - 2 * var(--gutter)));border-radius:var(--radius);background:var(--surface);color:var(--text);box-shadow:var(--shadow-pop);animation:ink-in var(--dur) ease-out;gap:.75rem;padding:.875rem 1rem 1rem;display:grid;position:absolute;top:calc(100% + .5rem);right:-1px}.met-chip-why{max-width:18rem;color:var(--warn);margin:0;font-size:.9375rem;font-weight:600}.met-chip-tempo{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.met-chip-mark{justify-content:center;min-width:5.5rem;font-size:1.25rem}.met-step{min-width:2.5rem;font-family:var(--font-serif);padding-inline:.5rem;font-size:1.25rem;line-height:1}.met-chip-offer{justify-self:start;gap:.625rem}.met-chip-offer .tempo-mark{font-size:1rem}.met-chip-meter{color:var(--text-muted);font-variant-numeric:tabular-nums}.met-chip-link{justify-self:start;font-size:.9375rem;font-weight:600}@media (width<=48rem){.header-end{order:1;margin-inline-start:auto}.header nav{flex-basis:100%;order:2}}@media (width>=30.0625rem) and (width<=48rem){.header .nav{justify-content:flex-start}}.tempo-mark{font-family:var(--font-serif);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;align-items:baseline;gap:.25em;display:inline-flex}.note-value{fill:currentColor;align-self:center;width:.62em;height:.9em;overflow:visible}.note-value .is-open{fill:none;stroke:currentColor;stroke-width:1.5px}.note-value .note-stem{fill:none;stroke:currentColor;stroke-width:1.3px}.metronome-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1.5rem;display:flex}.metronome-head h1{margin:0}.metronome-status{min-height:1.6em;color:var(--warn);margin:0;font-weight:600}.metronome-stage{grid-template:"instrument panel"/minmax(0,1fr) minmax(0,27rem);align-items:start;gap:1.25rem 3.5rem;margin-top:.5rem;display:grid}.main:has(>.metronome){padding-top:1.5rem;padding-bottom:1.5rem}.metronome-instrument{--walnut-hi:#6e452b;--walnut:#4a2c19;--walnut-lo:#2c190c;--walnut-edge:#1b0f07;--walnut-sheen:#ffe9cf;--grain-dark:#160a03;--grain-light:#a8764c;--ivory-hi:#fbf5e6;--ivory:#f1e6cb;--ivory-lo:#e2d2ae;--engrave:#2a2018;--brass-spec:#f7ecc9;--brass-hi:#d2b67c;--brass:#a8884c;--brass-lo:#5e4922;--met-shadow:rgb(var(--shadow-rgb));--met-height:min(36rem, calc(100dvh - 15rem));--met-box:calc(var(--met-height) * 320 / 334);isolation:isolate;grid-area:instrument;justify-items:center;display:grid;position:relative;container-type:inline-size}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .metronome-instrument{--walnut-hi:#5c3a24;--walnut:#3d2414;--walnut-lo:#22130a;--walnut-edge:#120904;--walnut-sheen:#ffd9aa;--grain-light:#8a5f3c;--ivory-hi:#e4dac4;--ivory:#d8cbad;--ivory-lo:#c3b18c;--engrave:#221912;--brass-spec:#eadbb0;--brass-hi:#bb9d63;--brass:#917240;--brass-lo:#4a3819;--met-shadow:#000}}:root[data-theme=dark] .metronome-instrument{--walnut-hi:#5c3a24;--walnut:#3d2414;--walnut-lo:#22130a;--walnut-edge:#120904;--walnut-sheen:#ffd9aa;--grain-light:#8a5f3c;--ivory-hi:#e4dac4;--ivory:#d8cbad;--ivory-lo:#c3b18c;--engrave:#221912;--brass-spec:#eadbb0;--brass-hi:#bb9d63;--brass:#917240;--brass-lo:#4a3819;--met-shadow:#000}.metronome-instrument:before{content:"";z-index:-1;background:radial-gradient(ellipse 46% 50% at 50% 62%, rgb(255 190 120/var(--met-lamp,0)), transparent 72%);pointer-events:none;position:absolute;inset:-2rem 0 -1rem}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .metronome-instrument:before{--met-lamp:.09}}:root[data-theme=dark] .metronome-instrument:before{--met-lamp:.09}.pendulum{z-index:1;width:min(100%, var(--met-box));position:relative;overflow:clip}.pendulum>svg,.pendulum-shade,.pendulum-shade>svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.pendulum-shade,.pendulum-rod,.pendulum-front{pointer-events:none}.pendulum-rod,.pendulum-shadow,.pendulum-case{will-change:transform}.pendulum-rod,.pendulum-shade{transition:opacity var(--dur) ease-out}.pendulum[data-silent] .pendulum-rod,.pendulum[data-silent] .pendulum-shade{opacity:.45}.pendulum-weight{transition:transform .26s cubic-bezier(.2,.7,.3,1)}.pendulum-grain{fill:none;stroke:var(--grain-dark)}.pendulum-grain.is-light{stroke:var(--grain-light)}.pendulum-bevel-light,.pendulum-bevel-dark{fill:none;stroke-width:.8px;stroke-linecap:round;stroke-linejoin:round}.pendulum-bevel-light{stroke:var(--walnut-sheen);stroke-opacity:.3}.pendulum-bevel-dark{stroke:#000;stroke-opacity:.4}.pendulum-inner path{fill:none;stroke:#1a0e05;stroke-opacity:.07}.pendulum-frame{fill:none;stroke:var(--engrave);stroke-opacity:.45;stroke-width:.3px}.pendulum-ticks path{stroke:var(--engrave);stroke-width:.3px}.pendulum-ticks path.is-major{stroke-width:.55px}.pendulum-numbers,.pendulum-bands{fill:var(--engrave);font-family:"Source Serif 4",Georgia,serif}.pendulum-numbers{font-variant-numeric:lining-nums tabular-nums;font-weight:500}.pendulum-bands{letter-spacing:.03em;text-transform:uppercase;font-weight:560}.pendulum-cap-shade{fill:none;stroke:#000;stroke-opacity:.35;stroke-width:1.4px}.pendulum-sheen{fill:#fff4d6;opacity:0}.pendulum-screw{fill:var(--brass-lo)}.pendulum-soft{fill:var(--met-shadow);fill-opacity:.05;stroke:var(--met-shadow);stroke-opacity:.05;stroke-linejoin:round;stroke-linecap:round}.pendulum-soft.is-stroke{fill:none}.pendulum-engraving{stroke:#3b2a0c;stroke-opacity:.35;stroke-width:.35px}.pendulum-index{stroke:#fff6dc;stroke-opacity:.85;stroke-width:.7px;stroke-linecap:round}.pendulum-glint{opacity:0}.pendulum-slot{stroke:var(--brass-lo);stroke-width:.9px;stroke-linecap:round}.pendulum-jaw{fill:none;stroke:var(--brass-spec);stroke-width:.9px;stroke-linecap:round}.pendulum-jaw-shade{fill:none;stroke:var(--brass-lo);stroke-width:1.1px;stroke-linecap:round}.beat-dots{min-width:min(100%, calc(var(--met-box) * .68));background: linear-gradient(to bottom, #ffe9cf3d, #ffe9cf1a 6px, #00000059 7px, #ffe9cf0f 8px, transparent 10px, transparent calc(100% - 3px), #0006),  repeating-linear-gradient(to bottom, transparent 0 3px, #140a031a 3px 4px, transparent 4px 7px), repeating-linear-gradient(to bottom, transparent 0 5px, #a8764c14 5px 6px, transparent 6px 11px), linear-gradient(100deg, var(--walnut-hi), var(--walnut) 45%, var(--walnut-lo));max-width:100%;box-shadow:0 0 0 .5px #00000059, 0 2px 3px rgb(var(--shadow-rgb) / .3), 0 12px 18px -8px rgb(var(--shadow-rgb) / .6);border-radius:2px 2px 3px 3px;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 .125rem;margin-top:-5px;padding:.625rem .875rem .3125rem;display:flex;position:relative}.beat-dots:before{content:"";width:calc(min(100cqw, var(--met-box)) * .57);pointer-events:none;background:radial-gradient(closest-side,#00000080,#0000);height:5px;position:absolute;top:3px;left:50%;translate:-50%}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .beat-dots{box-shadow:0 0 0 .5px #0009,0 2px 3px #00000080,0 12px 18px -8px #000c}}:root[data-theme=dark] .beat-dots{box-shadow:0 0 0 .5px #0009,0 2px 3px #00000080,0 12px 18px -8px #000c}.beat-dots .beat-slot{align-items:center;gap:.3125rem;display:inline-flex}.beat-dots .beat-dot{cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:50%;place-items:center;width:2.75rem;height:2.75rem;margin:-.375rem 0;padding:0;display:grid}.beat-dots .beat-dot-mark{background:radial-gradient(circle at 38% 32%, var(--ivory-hi), var(--ivory) 45%, var(--ivory-lo) 85%);will-change:transform;border-radius:50%;width:.75rem;height:.75rem;position:relative;box-shadow:0 0 0 1px #00000080,0 1px 0 1px #ffe9cf14}.beat-dots .beat-dot-mark:after,.beat-dots .beat-sub:after{content:"";opacity:0;will-change:opacity;pointer-events:none;background:radial-gradient(closest-side,#ffd69699,#ffd69600);border-radius:50%;position:absolute;inset:-.5rem}.beat-dots .beat-dot[data-accent=accent] .beat-dot-mark{background:radial-gradient(circle at 36% 30%, var(--brass-spec), var(--brass-hi) 30%, var(--brass) 62%, var(--brass-lo));width:1rem;height:1rem}.beat-dots .beat-dot[data-accent=mute] .beat-dot-mark{background:radial-gradient(circle at 50% 38%,#080402,#1f130a 80%);box-shadow:inset 0 1px 2px #000000e6,0 1px #ffe9cf1f}.beat-dots .beat-dot[data-now] .beat-dot-mark{transform:scale(1.12)}.beat-dots .beat-dot[data-now] .beat-dot-mark:after,.beat-dots .beat-sub[data-now]:after{opacity:1}.beat-dots .beat-dot[data-now][data-accent=mute] .beat-dot-mark{transform:none}.beat-dots .beat-dot[data-now][data-accent=mute] .beat-dot-mark:after{opacity:.35}.beat-dots .beat-sub{background:radial-gradient(circle at 40% 35%, var(--brass-spec), var(--brass) 60%, var(--brass-lo));border-radius:50%;width:.25rem;height:.25rem;position:relative;box-shadow:0 0 0 .5px #00000080}.beat-dots .beat-sub:after{inset:-.375rem}.beat-dots[data-silent] .beat-dot-mark,.beat-dots[data-silent] .beat-sub{opacity:.35}@media (hover:hover){.beat-dots .beat-dot:hover .beat-dot-mark{box-shadow:0 0 0 1px #00000080,0 0 0 .25rem #ffe9cf29}.beat-dots .beat-dot[data-accent=mute]:hover .beat-dot-mark{box-shadow:inset 0 1px 2px #000000e6,0 0 0 .25rem #ffe9cf29}}.beat-dots .beat-dot:focus-visible{outline-offset:-4px}.metronome-panel{grid-area:panel;gap:.625rem;min-width:0;display:grid}.tempo-name{justify-self:start;position:relative}.tempo-name-button{color:var(--text);font:inherit;text-align:start;cursor:help;background:0 0;border:0;flex-wrap:wrap;align-items:baseline;gap:0 .625rem;padding:0;display:flex}.tempo-name-word{font-family:var(--font-serif);font-size:1.75rem;font-weight:600;line-height:1.2}.tempo-name-gloss{color:var(--text-muted);font-size:.9375rem}.tempo-scale{z-index:6;border-radius:var(--radius);background:var(--surface);width:max-content;box-shadow:var(--shadow-pop);animation:ink-in var(--dur) ease-out;padding:.75rem 1rem .875rem;display:none;position:absolute;top:calc(100% + .375rem);left:0}.tempo-name[data-open] .tempo-scale{display:block}@media (hover:hover){.tempo-name:hover .tempo-scale{display:block}}.tempo-scale .eyebrow{margin-bottom:.375rem}.tempo-scale dl{grid-template-columns:auto auto;gap:.125rem 1.5rem;margin:0;display:grid}.tempo-scale dl>div{display:contents}.tempo-scale dt{font-family:var(--font-serif)}.tempo-scale dd{color:var(--text-muted);font-variant-numeric:tabular-nums;text-align:end;margin:0}.tempo-scale .is-current :is(dt,dd){color:var(--accent);font-weight:700}.metronome-bpm{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.metronome-bpm .met-step{width:3rem;height:3rem;font-size:1.625rem}.metronome-figure{font-family:var(--font-serif);font-variant-numeric:lining-nums tabular-nums;justify-content:center;align-items:center;gap:.375rem;margin:0;display:flex}.metronome-unit{align-self:center;width:1.3rem;height:1.9rem}.metronome-eq{color:var(--text-muted);font-size:2rem}.metronome-number{letter-spacing:-.03em;text-align:center;min-width:2.2ch;font-size:clamp(4rem,3rem + 3vw,5.5rem);font-weight:500;line-height:1}.metronome-slider,.metronome-volume{width:100%;accent-color:var(--accent);margin:0}.metronome-slider{height:2rem}.metronome-actions{grid-template-columns:1fr 2fr;gap:.75rem;display:grid}.metronome-go svg{fill:currentColor;width:.875rem;height:.875rem}.metronome-settings{border-top:1px solid var(--border);gap:.375rem;padding-top:.625rem;display:grid}.metronome-setting{border:0;flex-wrap:wrap;align-items:center;gap:.375rem 1rem;min-width:0;margin:0;padding:0;display:flex}.metronome-label{width:7.5rem;color:var(--text-muted);letter-spacing:.09em;text-transform:uppercase;flex:none;padding:0;font-size:.8125rem;font-weight:600}.metronome-label:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;width:5rem;font-size:.875rem}.metronome-setting .segmented.is-compact span{padding-inline:.625rem}.metronome-setting .metronome-volume{flex:1;width:auto;min-width:8rem}.metronome-silent{min-height:2.25rem;margin-inline-start:8.5rem;font-size:.9375rem}.metronome-silent:is(:lang(zh),:lang(ja),:lang(ko)){margin-inline-start:6rem}@media (width<=30rem){.metronome-label,.metronome-label:is(:lang(zh),:lang(ja),:lang(ko)){width:100%}.metronome-silent,.metronome-silent:is(:lang(zh),:lang(ja),:lang(ko)){margin-inline-start:0}}.metronome-trainer{border-top:1px solid var(--border)}.metronome-trainer>summary{cursor:pointer;align-items:center;gap:.75rem;min-height:2.75rem;font-weight:600;list-style:none;display:flex}.metronome-trainer>summary::-webkit-details-marker{display:none}.metronome-trainer>summary:after{content:"";width:.4375rem;height:.4375rem;transition:transform var(--dur) ease-out;border-bottom:1.5px solid;border-right:1.5px solid;margin-inline-start:auto;transform:translateY(-2px)rotate(45deg)}.metronome-trainer[open]>summary:after{transform:translateY(1px)rotate(-135deg)}.metronome-trainer-state{color:var(--text-muted);font-weight:400}.metronome-trainer-body{gap:.75rem;padding-bottom:.5rem;display:grid}.metronome-trainer-body .help{margin:0;font-size:.875rem}.metronome-trainer-body .segmented{justify-self:start}.metronome-fields{grid-template-columns:repeat(auto-fill,minmax(5.25rem,1fr));gap:.5rem .75rem;display:grid}.metronome-field{color:var(--text-muted);gap:.25rem;font-size:.8125rem;font-weight:600;display:grid}.metronome-field input{border:1px solid var(--control);border-radius:var(--radius-sm);background:var(--surface);width:100%;min-height:2.5rem;color:var(--text);font:inherit;font-variant-numeric:tabular-nums;padding:.25rem .5rem;font-size:1rem}.metronome-notes{gap:.125rem;max-width:none;font-size:.75rem;line-height:1.4;display:grid}.metronome-notes p{margin:0}.metronome-notes kbd{font-size:.8125rem}@media (hover:none) and (pointer:coarse){.metronome-keys{display:none}}@media (width<=47.99rem){.metronome-stage{grid-template:"instrument""panel"/minmax(0,1fr)}.metronome-instrument{--met-height:min(24rem, 50dvh)}}@media (width<=29.99rem){.pendulum-numbers{font-size:7.4px}.pendulum-numbers .is-minor{display:none}}@media (prefers-reduced-motion:reduce){.pendulum-weight,.met-chip-summary svg{transition:none}.beat-dots .beat-dot[data-now] .beat-dot-mark{transform:none}.met-chip-dots .beat-dot[data-now] .beat-dot-mark{box-shadow:0 0 0 .375rem var(--accent-soft);transition:box-shadow .12s ease-out;transform:none}.met-chip-panel,.tempo-scale{animation:none}.nav-link:after,.button,.segmented span,.check input,.check input:before,.level,.level input:before,.read-progress span,.read-card:before,.read-card:after,.grand-staff .vf-stavenote,.sustain,.history-day,.history-details summary:before,.library-piece,.library-piece-title,.pieces-drop,.score-cursor,.score-svg g.note,.piece-options>summary:after{transition:none}.read-result,.read-feedback .read-target,.data-message,.import-preview,.your-piece-panel,.piece-summary,.piece-options-panel{animation:none}}.sound-output{margin-top:1.5rem}.sound-row{flex-wrap:wrap;align-items:center;gap:.75rem 1rem;display:flex}.sound-row select{flex:0 22rem;min-width:0}.sound .device-help{margin-top:.5rem}.piece-bpm{color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap;font-size:.875rem}.piece-listen{align-items:center;gap:.5rem;display:inline-flex}.piece-listen svg{fill:none;stroke:currentColor;stroke-width:2.25px;stroke-linecap:round;width:.75rem;height:.75rem}.piece-listen svg .is-filled,.button-icon svg .is-filled{fill:currentColor;stroke:none}.main:has(.is-focus){max-width:100rem;padding-top:calc(.5rem + var(--safe-top))}.piece-controls[hidden],.scale-picker[hidden]{display:none}.focus-bar{flex-wrap:wrap;align-items:center;gap:.25rem .75rem;min-height:2.75rem;display:flex}.focus-back{margin-inline-start:-.5rem}.focus-heading{flex:10rem;min-width:0}.focus-title{font-family:var(--font-serif);letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1.25rem;font-weight:500;line-height:1.3;overflow:hidden}.focus-title:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-weight:600}.focus-title .piece-composer{font-size:.875rem}.focus-tools{flex-wrap:wrap;align-items:center;gap:.25rem;margin-inline-start:auto;display:flex}.focus-tools .met-chip{margin-inline:.25rem}.focus-tools .button-icon svg,.focus-back svg,.focus-enter svg{stroke-width:1.5px;stroke-linejoin:round;width:1rem;height:1rem}.focus-enter svg{fill:none;stroke:currentColor;stroke-linecap:round}.button-icon:disabled{opacity:.35;cursor:default}.focus-tools .button-icon[aria-pressed=true]{color:var(--accent)}.focus-tools .button-icon[aria-pressed=false] svg{opacity:.55}.focus-settings:after{content:"";width:.4375rem;height:.4375rem;transition:transform var(--dur) ease-out;border-bottom:1.5px solid;border-right:1.5px solid;transform:translateY(-2px)rotate(45deg)}.focus-settings.is-open:after{transform:translateY(1px)rotate(-135deg)}.piece-head .focus-enter{align-self:center;margin-block:-.25rem;margin-inline-start:auto}.scales.is-focus .scale-picker:not([hidden]),.scales.is-focus .scale-session{margin-top:.5rem}.account-profile{border-top:1px solid var(--border);margin-top:2.25rem;padding-top:1.5rem}.account-profile>.eyebrow{margin:0 0 .25rem}.account-username{flex:0 16rem}.account-visibility{margin-top:1.5rem}.account-visibility:disabled .segmented{opacity:.5}.account-visibility:disabled .segmented label,.account-visibility:disabled .segmented input{cursor:not-allowed}.account-visibility .check{margin-top:1rem;display:flex}.account-link{margin-top:1.5rem}.account-link .eyebrow{margin:0 0 .5rem}.account-link .account-row{align-items:center}.account-link a{overflow-wrap:anywhere}.engraved{color:var(--text);fill:currentColor;display:block;overflow:visible}.engraved-lines line,.engraved-ledgers line{stroke:currentColor;stroke-width:1.3px}.engraved-lines .engraved-bar,.engraved-ledgers line{stroke-width:1.6px}.engraved-ledgers{animation:engraved-in .42s var(--ease-out)}.engraved-head{transition:transform .56s var(--ease-out)}.engraved-note.is-accent{color:var(--accent)}.engraved-note.is-good{color:var(--ok)}.engraved-note.is-bad{color:var(--bad)}.engraved-note.is-faint{color:var(--control)}.engraved-clefs{transition:color var(--dur) ease-out}.engraved-clefs.is-accent{color:var(--accent)}.engraved-mark{stroke:var(--accent);stroke-width:3px}.engraved-band{fill:var(--accent-soft)}.engraved-mark.is-faint{stroke:var(--accent-soft);stroke-width:5px}.engraved-band.is-faint{fill:var(--accent-soft);opacity:.6}.engraved-label{fill:var(--text-muted);font-family:var(--font-sans);font-size:9px;font-weight:600}.engraved-hit{fill:#0000;cursor:pointer}@keyframes engraved-in{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.engraved-head{transition:none}.engraved-ledgers{animation:none}}.home{--home-gap:clamp(4rem, 2.5rem + 5vw, 7rem)}.main:has(>.home){padding-top:clamp(2rem,1rem + 4vw,4.5rem)}.home-hero{grid-template-columns:minmax(0,1fr);align-items:center;gap:3rem;display:grid}@media (width>=60rem){.home-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(3rem,5vw,5.5rem)}}.home-hero .eyebrow{color:var(--accent);align-items:center;gap:.75rem;margin-bottom:1.25rem;display:flex}.home-hero .eyebrow:before{content:"";background:currentColor;flex:none;width:1.5rem;height:1px}.home-hero-text{container-type:inline-size}.home-title{letter-spacing:-.03em;margin:0;font-size:clamp(2.25rem,13.2cqi,4.75rem);font-weight:500;line-height:1.02}.home-title>span{display:block}.home-title:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-size:clamp(2rem,11.5cqi,3.5rem);font-weight:600;line-height:1.2}.home-lede{max-width:33rem;color:var(--text-muted);text-wrap:pretty;margin:1.5rem 0 0;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.6}.home-actions{flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:2.25rem;display:flex}.button-large{min-height:3.25rem;padding:.5rem 1.375rem .5rem 1.625rem;font-size:1.0625rem}.arrow{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:1rem;height:.625rem;transition:transform var(--dur) var(--ease-out);flex:none}@media (hover:hover){a:hover>.arrow{transform:translate(3px)}}.home-link{min-height:2.75rem;color:var(--accent);align-items:center;gap:.5rem;font-weight:600;text-decoration:none;display:inline-flex}@media (hover:hover){.home-link:hover{text-decoration:underline;text-decoration-thickness:1px}}:is(.home-lede,.home-facts,.specimen-caption):lang(ja){word-break:auto-phrase}.home-facts{max-width:33rem;color:var(--text-muted);text-wrap:pretty;margin:2rem 0 0;font-size:.875rem}.specimen{width:100%;max-width:38rem;margin:0 auto}@media (width>=60rem){.specimen{max-width:none}}.specimen-sheet{border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sheet);padding:clamp(1.25rem,3vw,2.25rem) clamp(1rem,3vw,2rem) clamp(1rem,2vw,1.5rem);position:relative}.specimen-name{color:var(--text-muted);font-family:var(--font-serif);font-variant-numeric:tabular-nums;animation:engraved-in .42s var(--ease-out);margin:0;font-size:1.375rem;line-height:1;position:absolute;top:clamp(.75rem,2vw,1.25rem);right:clamp(1rem,2.5vw,1.5rem)}.specimen[data-played] .specimen-name{color:var(--accent)}.specimen-staff{width:100%;height:auto;display:block}.specimen[data-played] .engraved-head{transition-duration:.16s}.specimen-keys{border-top:5px solid var(--felt);border-radius:0 0 var(--radius) var(--radius);width:100%;height:auto;box-shadow:0 14px 28px -18px rgb(var(--shadow-rgb) / .5);margin-top:clamp(1rem,2.5vw,1.5rem);display:block}.specimen-keys rect{fill:var(--key-white);stroke:var(--key-white-edge);stroke-width:.75px;transition:fill .24s ease-out}.specimen-keys rect.is-black{fill:var(--key-black);stroke:var(--key-black-edge)}.specimen-keys rect.is-lit{fill:var(--key-held)}.specimen-keys rect.is-black.is-lit{fill:var(--key-held-black)}.specimen-middle-c{fill:var(--key-label)}.specimen-caption{color:var(--text-muted);text-align:center;margin-top:.875rem;font-size:.875rem}@media (prefers-reduced-motion:reduce){.specimen-keys rect{transition:none}.specimen-name{animation:none}}.home-welcome{margin-top:var(--home-gap)}.home-welcome .figures{max-width:none;margin:0}.home-welcome-end{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1.5rem;margin:.75rem 0 0;display:flex}.home-welcome-end .goal{margin:0}.home-contents{margin-top:var(--home-gap)}.contents{border-top:1px solid var(--text);counter-reset:none;margin:0;padding:0;list-style:none}.contents li{border-bottom:1px solid var(--border)}.contents-row{color:var(--text);transition:background-color var(--dur) ease-out;grid-template-columns:3.5rem minmax(0,1fr) auto 1.25rem;align-items:baseline;gap:0 1.5rem;padding:1.5rem .75rem 1.625rem 0;text-decoration:none;display:grid}.contents-numeral{color:var(--text-muted);font-family:var(--font-serif);font-variant-numeric:lining-nums;padding-inline-start:.25rem;font-size:1.375rem;font-style:italic}.contents-title{font-family:var(--font-serif);letter-spacing:-.012em;transition:color var(--dur-fast) ease-out;font-size:clamp(1.5rem,1.25rem + .8vw,1.875rem);font-weight:500;line-height:1.2;display:block}.contents-title:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-weight:600}.contents-text{max-width:40rem;color:var(--text-muted);text-wrap:pretty;margin-top:.375rem;font-size:1rem;display:block}.contents-meta{color:var(--text-muted);font-variant-numeric:tabular-nums;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;font-size:.8125rem;font-weight:600}.contents-meta:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-size:.875rem}.contents-row .arrow{color:var(--text-muted);align-self:center}@media (hover:hover){.contents-row:hover{background:linear-gradient(to right, transparent, var(--sunk) 12%, var(--sunk))}.contents-row:hover .contents-title,.contents-row:hover .arrow{color:var(--accent)}}@media (width<=40rem){.contents-row{grid-template-columns:2.25rem minmax(0,1fr) 1rem;gap:0 .75rem;padding-inline-end:0}.contents-meta{grid-area:2/2;margin-top:.625rem}.contents-row .arrow{grid-area:1/3}}.home-principles,.home-faq{margin-top:var(--home-gap);grid-template-columns:minmax(0,1fr);gap:1.5rem 3rem;display:grid}@media (width>=52rem){.home-principles,.home-faq{grid-template-columns:minmax(0,1fr) minmax(0,2.4fr)}}.home-principles h2,.home-faq h2{font-family:var(--font-serif);letter-spacing:-.018em;text-wrap:balance;margin:0;font-size:clamp(1.75rem,1.4rem + 1vw,2.25rem);font-weight:500;line-height:1.15}.home-principles h2:is(:lang(zh),:lang(ja),:lang(ko)),.home-faq h2:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-weight:600}.home-principles dl{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:0 2.5rem;margin:0;display:grid}.home-principles dl>div{border-top:1px solid var(--border);padding:1.125rem 0 1.5rem}.home-principles dt{font-weight:600}.home-principles dd{color:var(--text-muted);text-wrap:pretty;margin:.375rem 0 0;font-size:.9375rem}.home-faq-list{border-top:1px solid var(--border)}.home-question{border-bottom:1px solid var(--border)}.home-question summary{cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;min-height:3.75rem;padding:.75rem 0;font-size:1.0625rem;font-weight:600;list-style:none;display:flex}.home-question summary::-webkit-details-marker{display:none}.home-question summary:after{content:"";width:.75rem;height:.75rem;color:var(--text-muted);transition:transform var(--dur) var(--ease-out);background:linear-gradient(currentColor,currentColor) 50%/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 50%/1.5px 100% no-repeat;flex:none}.home-question[open] summary:after{background:linear-gradient(currentColor,currentColor) 50%/100% 1.5px no-repeat;transform:rotate(180deg)}@media (hover:hover){.home-question summary:hover{color:var(--accent)}}.home-question p{max-width:40rem;color:var(--text-muted);text-wrap:pretty;margin:-.25rem 0 1.25rem}.footer{border-top:1px solid var(--border)}.footer-inner{max-width:var(--content-width);padding:1.75rem var(--gutter-right) calc(1.75rem + var(--safe-bottom)) var(--gutter-left);color:var(--text-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;margin:0 auto;font-size:.875rem;display:flex}.footer-brand{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0;display:flex}.footer-mark{aspect-ratio:4154/975;width:auto;height:1.125rem;fill:var(--text);display:block}.footer-links{flex-wrap:wrap;gap:.25rem 1.5rem;margin:0;padding:0;list-style:none;display:flex}.footer-links a{color:inherit;text-decoration:none}@media (hover:hover){.footer-links a:hover{color:var(--text);text-decoration:underline}}.footer-version{font-variant-numeric:tabular-nums}#root:has(.piece-session,.read-session,.metronome)>.footer{display:none}:root{--lk-two:#3e6596;--lk-three:#a8741c;--lk-tint:#d4e2f1;--lk-found:#d3e6d0;--lk-found-edge:#316843}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lk-two:#6289b5;--lk-three:#c49445;--lk-tint:#c2d4e8;--lk-found:#c4dcc0;--lk-found-edge:#4f8a5f}}:root[data-theme=dark]{--lk-two:#6289b5;--lk-three:#c49445;--lk-tint:#c2d4e8;--lk-found:#c4dcc0;--lk-found-edge:#4f8a5f}.learn-lede,.lesson-lede{max-width:36rem;color:var(--text-muted);text-wrap:pretty;margin:0;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem)}.learn .contents{margin-top:2.5rem}.contents-row.is-planned,.contents-row.is-planned .contents-title{color:var(--text-muted)}.lesson{grid-template-columns:minmax(0,1fr);gap:1.5rem clamp(2.5rem,4vw,4rem);display:grid}@media (width>=64rem){.lesson{grid-template-columns:13rem minmax(0,1fr)}.lesson-rail{align-self:start;max-height:calc(100dvh - 8rem);position:sticky;top:6rem;overflow-y:auto}}.lesson-back{min-height:2.75rem;color:var(--text-muted);align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-flex}.lesson-back svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:.375rem;height:.625rem}@media (hover:hover){.lesson-back:hover{color:var(--text)}}.lesson-toc{margin-top:1.5rem;display:none}@media (width>=64rem){.lesson-toc{display:block}}.lesson-toc .eyebrow{margin-bottom:.5rem}.lesson-toc ol{margin:0;padding:0;list-style:none}.lesson-toc button{width:100%;color:var(--text-muted);font:inherit;text-align:start;cursor:pointer;transition:color var(--dur-fast) ease-out;background:0 0;border:0;align-items:baseline;gap:.625rem;padding:.375rem 0;font-size:.9375rem;line-height:1.4;display:flex}.lesson-toc button:before{content:"";background:var(--border);width:5px;height:5px;transition:background-color var(--dur-fast) ease-out;border-radius:50%;flex:none;transform:translateY(-2px)}.lesson-toc button.is-current{color:var(--text);font-weight:600}.lesson-toc button.is-current:before{background:var(--accent)}@media (hover:hover){.lesson-toc button:hover{color:var(--text)}}.lesson-main{min-width:0;max-width:50rem}.lesson-head h1{margin-bottom:1rem}.lesson-head .eyebrow{color:var(--accent)}.lesson-head .help{margin-top:1rem}.lesson-body{counter-reset:plate;margin-top:2.5rem}.lesson-body>p,.lesson-section>p,.lesson-section>ul{text-wrap:pretty;max-width:38rem;font-size:1.0625rem;line-height:1.75}.lesson-body p,.lesson-body ul{margin:0 0 1.125rem}.lesson-section>ul{padding-inline-start:1.25rem}.lesson-section>ul li+li{margin-top:.375rem}.lesson-body strong{font-weight:600}.lesson-section{border-top:1px solid var(--border);margin-top:3.5rem;padding-top:2rem}.lesson-section h2{font-family:var(--font-serif);letter-spacing:-.012em;text-wrap:balance;margin:0 0 1rem;font-size:clamp(1.5rem,1.3rem + .8vw,1.875rem);font-weight:500;line-height:1.2}.lesson-section h2:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.02em;font-weight:600}.plate{counter-increment:plate;max-width:44rem;margin:1.75rem 0 2rem}.plate.is-wide{max-width:none}.plate-body{border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sheet);transition:box-shadow var(--dur) ease-out;padding:clamp(1rem,2.5vw,1.5rem)}.plate-body:has(.exercise.is-active){box-shadow:0 0 0 2px var(--accent), var(--shadow-sheet)}.plate-caption{max-width:38rem;color:var(--text-muted);text-wrap:pretty;margin-top:.75rem;font-size:.9375rem;line-height:1.55}.plate-number{color:var(--text);font-weight:600}.plate-number:after{content:counter(plate) " · "}.plate-choices{white-space:nowrap;flex-wrap:nowrap;max-width:100%;margin-bottom:1rem}.plate-readout{flex-wrap:wrap;align-items:baseline;gap:.25rem .75rem;min-height:2.75rem;margin:0 0 .75rem;display:flex}.plate-readout.is-small{min-height:2rem;margin-bottom:.25rem}.plate-readout-name{color:var(--accent);font-family:var(--font-serif);font-variant-numeric:tabular-nums;font-size:2rem;font-weight:500;line-height:1.1}.plate-readout.is-small .plate-readout-name{font-size:1.375rem}.plate-readout-label,.plate-readout-empty{color:var(--text-muted);font-size:.9375rem}.plate-staff{width:100%;max-width:34rem;height:auto;margin:0 auto 1rem}.plate-staff.is-grand{max-width:28rem}.plate-staff.is-card{max-width:16rem;margin-bottom:0}.plate-actions{gap:.75rem;display:flex}.button-glyph{fill:currentColor;width:.625rem;height:.75rem}.plate-note{color:var(--text-muted);text-wrap:pretty;margin:.75rem 0 0;font-size:.875rem}.lesson-piano .piano{min-height:6rem;max-height:13rem}.key-black.lk-two{background:var(--lk-two)}.key-black.lk-three{background:var(--lk-three)}.key-white:is(.lk-named,.lk-same){background:var(--lk-tint)}.key-black.lk-same{background:var(--lk-two)}.key-white.lk-found{background:var(--lk-found);box-shadow:inset 0 -4px 0 var(--lk-found-edge)}.key-black.lk-found{background:var(--lk-found-edge)}.key-name{letter-spacing:-.02em;font-size:.625rem}.key-name:before{display:none}.key-black .key-name{color:#ffffffe0;font-size:.5625rem}.exercise-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem 1rem;margin-bottom:.875rem;display:flex}.exercise-prompt{text-wrap:pretty;margin:0;font-weight:600}.exercise-ask{min-height:2.5rem;color:var(--accent);font-family:var(--font-serif);font-size:1.75rem;font-weight:500;line-height:1.3}.exercise-progress{color:var(--text-muted);font-variant-numeric:tabular-nums;margin:0;font-size:.875rem}.exercise-card{justify-content:center;margin-bottom:1rem;padding:.5rem 0;display:flex}.exercise-foot{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;min-height:2.75rem;margin-top:.875rem;display:flex}.exercise-message{color:var(--text-muted);flex:16rem;margin:0;font-size:.9375rem}.lesson-aside{border-radius:var(--radius);background:color-mix(in oklab, var(--accent-soft) 55%, transparent);max-width:38rem;margin:1.75rem 0;padding:1rem 1.25rem .25rem}.lesson-aside-title{color:var(--accent);letter-spacing:.09em;text-transform:uppercase;font-size:.8125rem;font-weight:600;margin:0 0 .375rem!important}.lesson-aside-title:is(:lang(zh),:lang(ja),:lang(ko)){letter-spacing:.04em;font-size:.875rem}.lesson-aside p{font-size:.9375rem;line-height:1.65}.lesson-picture{max-width:44rem;margin:2rem 0}.lesson-picture img{border-radius:var(--radius);width:100%;height:auto;box-shadow:var(--shadow-sheet);background:#f8f4ec;display:block}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .lesson-picture img{filter:brightness(.86)sepia(.12)}}:root[data-theme=dark] .lesson-picture img{filter:brightness(.86)sepia(.12)}.lesson-end{border-top:1px solid var(--text);margin-top:4rem;padding-top:2rem}.lesson-pager{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2rem;margin-top:2.5rem;display:grid}.lesson-pager-link{color:var(--text);flex-direction:column;gap:.25rem;text-decoration:none;display:flex}.lesson-pager-link.is-next{text-align:end;grid-column:2;align-items:flex-end}.lesson-pager-link .eyebrow{margin:0}.lesson-pager-title{font-family:var(--font-serif);transition:color var(--dur-fast) ease-out;font-size:1.25rem;line-height:1.3}@media (hover:hover){.lesson-pager-link:hover .lesson-pager-title{color:var(--accent)}}.plate-toolbar{flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-bottom:1rem;display:flex}.plate-toolbar .plate-choices{margin-bottom:0}.plate-select{color:var(--text-muted);align-items:center;gap:.625rem;font-size:.9375rem;font-weight:600;display:inline-flex}.plate-actions{flex-wrap:wrap;margin-bottom:1rem}.plate-actions.is-top{margin-bottom:.875rem}.plate-actions.is-center{justify-content:center}.plate-actions .button.is-current{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.plate-staff.is-rhythm{width:auto;max-width:none;height:7rem;margin:0}.plate-staff.is-value{max-width:8rem}.plate-staff.is-fingering{max-width:30rem}.engraved-beam{fill:currentColor}.plate-staff.is-rhythm .engraved-label{font-size:11px}.scale-steps{font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:baseline;gap:.25rem 0;margin:0 0 .75rem;padding:0;list-style:none;display:flex}.scale-steps li{align-items:baseline;display:inline-flex}.scale-steps span{min-width:2.5rem;font-family:var(--font-serif);text-align:center;transition:color var(--dur-fast) ease-out;font-size:1.25rem}.scale-steps b{min-width:1.5rem;color:var(--text-muted);text-align:center;font-size:.8125rem;font-weight:600}.scale-steps li.is-current span{color:var(--accent)}.beat-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;display:flex}.lesson-beats{gap:.75rem;display:flex}.lesson-beats span{border:1.5px solid var(--border);width:2.5rem;height:2.5rem;color:var(--text-muted);font-family:var(--font-serif);font-variant-numeric:tabular-nums;border-radius:50%;place-items:center;font-size:1.125rem;transition:background-color 60ms ease-out,color 60ms ease-out,border-color 60ms ease-out;display:grid}.lesson-beats span.is-accent{border-color:var(--control)}.lesson-beats span.is-on{border-color:var(--accent);background:var(--accent);color:var(--accent-contrast)}.lesson-beats.is-small{gap:.5rem;margin-bottom:.75rem}.lesson-beats.is-small span{width:1.75rem;height:1.75rem;font-size:.875rem}.beat-tempo{max-width:20rem;color:var(--text-muted);flex-direction:column;flex:14rem;gap:.25rem;font-size:.9375rem;font-weight:600;display:flex}.beat-tempo b{color:var(--text);font-family:var(--font-serif);font-variant-numeric:tabular-nums;font-size:1.25rem;font-weight:500}.beat-tempo input{width:100%;accent-color:var(--accent)}.tap-meter{border-radius:var(--radius);background:var(--sunk);height:2.5rem;margin-top:1.25rem;position:relative}.tap-centre{background:var(--text);width:2px;position:absolute;top:.25rem;bottom:.25rem;left:50%;transform:translate(-1px)}.tap{background:var(--warn);border-radius:50%;width:.75rem;height:.75rem;position:absolute;top:50%;transform:translate(-50%,-50%)}.tap.is-good{background:var(--ok)}.tap-scale{color:var(--text-muted);justify-content:space-between;margin-top:.25rem;font-size:.8125rem;display:flex}.rhythm-rows{gap:1rem;display:grid}.rhythm-row+.rhythm-row{border-top:1px solid var(--border);padding-top:1rem}.rhythm-row-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;display:flex}.rhythm-row-head p{margin:0;font-weight:600}.rhythm-row .plate-staff.is-rhythm,.exercise .plate-staff.is-rhythm,.plate-body>.plate-staff.is-rhythm{max-width:100%;display:block}.retry{margin-top:.5rem;font-size:.9375rem}.choice-figure{justify-content:center;min-height:7rem;margin-bottom:1rem;display:flex}.choice-question{font-family:var(--font-serif);text-wrap:pretty;margin:0 0 1rem;font-size:1.25rem;line-height:1.4}.choice-options{flex-wrap:wrap;gap:.5rem;display:flex}.button.choice{min-width:4.5rem}.choice-options.is-long{flex-direction:column;align-items:stretch}.choice-options.is-long .button.choice{text-align:start;justify-content:flex-start}.choice-options.is-long .choice-listen{align-self:flex-start;margin-inline-start:0}.button.choice.is-right{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}.button.choice.is-wrong{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}.choice-listen{margin-inline-start:auto}.finger-figure{max-width:44rem;position:relative}.finger-figure .lesson-picture{margin-bottom:0}.finger-spots{aspect-ratio:3/2;pointer-events:none;position:absolute;inset:0 0 auto}.finger-spots span{background:var(--accent);width:clamp(1.375rem,4.2vw,2rem);height:clamp(1.375rem,4.2vw,2rem);color:var(--accent-contrast);font-family:var(--font-serif);border-radius:50%;place-items:center;font-size:clamp(.8125rem,2.4vw,1.125rem);font-weight:600;display:grid;position:absolute;transform:translate(-50%,-50%)}.finger-spots b{color:#231d18;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(.75rem,2vw,.9375rem);font-weight:600;position:absolute;bottom:3%;transform:translate(-50%)}.inside{--act-wood:#d9b98f;--act-wood-dark:#a67c52;--act-ivory:#fbf7ee;--act-felt:#efe6d2;--act-hammer:#f4eee2;--act-brass:#c9a24a;--act-metal:#8a8580;--act-iron:#b5aca1;--act-case:#6b4a33;--act-line:#3b2e24}.act-scroll{overscroll-behavior-x:contain;margin:.5rem 0 .75rem;overflow-x:auto}.act{touch-action:pan-x;width:100%;min-width:36rem;height:auto;display:block}.act :is(rect,path,circle){stroke:var(--act-line);stroke-width:1px}.act-wood{fill:var(--act-wood)}.act-wood-dark{fill:var(--act-wood-dark)}.act-ivory{fill:var(--act-ivory)}.act-felt{fill:var(--act-felt)}.act-hammer-felt{fill:var(--act-hammer);stroke-width:1.5px}.act-brass{fill:var(--act-brass)}.act-metal{fill:var(--act-metal)}.act-iron{fill:var(--act-iron)}.act-case{fill:var(--act-case)}.act .act-pivot{fill:var(--act-line);stroke:none}.act-string{fill:none;stroke:var(--act-line);stroke-width:1.6px}.act-part{cursor:help;pointer-events:bounding-box}.act-part.is-focus :is(rect,path,circle){stroke:var(--accent);stroke-width:2.5px}.act-part.is-focus .act-string{stroke:var(--accent)}.act-names line{stroke:var(--control);stroke-width:.8px}.act-names text{fill:var(--text-muted);font-family:var(--font-sans);font-size:15px;font-weight:600}.act-names .is-focus text{fill:var(--accent)}.act-names .is-focus line{stroke:var(--accent)}.inside-readout{color:var(--text-muted);flex-wrap:wrap;align-items:baseline;gap:.5rem 1.75rem;font-size:.9375rem;display:flex}.inside-readout b{color:var(--accent);font-family:var(--font-serif);font-variant-numeric:tabular-nums;font-size:1.375rem;font-weight:500}.inside-meter{align-items:center;gap:.625rem;display:inline-flex}.inside-meter i{background:var(--accent);transform-origin:0;width:8rem;height:.375rem;box-shadow:0 0 0 1px var(--border);border-radius:1rem;display:block}.inside-part{text-wrap:pretty;min-height:3.25rem;margin:0 0 .75rem;font-size:.9375rem}.inside-part b{color:var(--accent)}.inside-parts{flex-wrap:wrap;gap:.375rem;margin:0 0 1rem;display:flex}.inside-parts button{border:1px solid var(--border);background:var(--surface);min-height:2.25rem;color:var(--text-muted);font:inherit;cursor:pointer;transition:border-color var(--dur-fast) ease-out, color var(--dur-fast) ease-out;border-radius:1.25rem;padding:.25rem .75rem;font-size:.875rem;font-weight:600}.inside-parts button.is-current{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}@media (hover:hover){.inside-parts button:hover{border-color:var(--control);color:var(--text)}}.inside-steps{counter-reset:step;gap:.25rem;margin:0 0 1.25rem;padding:0;list-style:none;display:grid}.inside-steps li{border-radius:var(--radius);color:var(--text-muted);counter-increment:step;gap:.75rem;padding:.375rem .625rem;font-size:.9375rem;transition:background-color 90ms ease-out,color 90ms ease-out;display:flex}.inside-steps li:before{content:counter(step);width:1.25rem;font-family:var(--font-serif);text-align:end;flex:none;font-weight:600}.inside-steps li.is-current{background:var(--accent-soft);color:var(--text)}.learn-extras{margin-top:3rem}