.library{--ink: #2f3a2c;--muted: #858c7d;--soft: #f5f4ec;--line: #e7e6dc;--sage: #72885f;--sage-deep: #4d6640;--sage-tint: #e9efe1;--clay: #b27a55;--clay-deep: #8a5a3e;--spring: cubic-bezier(.2, .8, .2, 1);--ease: cubic-bezier(.2, .8, .2, 1);--clay-tint: #f5e8dc;height:100dvh;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable;background:#fffefa;color:var(--ink)}.library svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.app-header{position:sticky;top:0;z-index:5;background:#fffefae6;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid #efeee6}.app-header-inner{position:relative;max-width:1180px;margin:0 auto;padding:12px max(48px,env(safe-area-inset-right)) 12px max(48px,env(safe-area-inset-left));padding-top:max(12px,env(safe-area-inset-top));display:flex;align-items:center;gap:32px}.wordmark{display:inline-flex;align-items:center;gap:9px;font:600 25px Georgia,serif;letter-spacing:-.8px}.wordmark img{width:20px;height:20px}.brand-dot{color:#7a9165}.module-nav{position:absolute;left:50%;transform:translate(-50%);display:flex;gap:4px;padding:4px;border-radius:999px;background:#f1f0e7}.module-tab{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 18px;border-radius:999px;color:var(--muted);font-size:15px;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}.module-tab svg{width:18px;height:18px}.module-tab[aria-current=page]{color:var(--sage-deep)}.module-tab{position:relative;z-index:1}.nav-indicator{position:absolute;top:4px;bottom:4px;left:0;width:var(--width, 0);transform:translate(var(--left, 0));border-radius:999px;background:#fff;box-shadow:0 1px 2px #2f3a2c14,0 2px 8px #2f3a2c0d;transition:transform .42s var(--spring),width .42s var(--spring)}.header-about{margin-left:auto;min-height:40px;padding:0 4px;font-size:13px;color:var(--muted)}.tab-bar{display:none}.library-inner{max-width:1180px;min-height:calc(100% - 66px);margin:0 auto;padding:36px max(48px,env(safe-area-inset-right)) max(48px,env(safe-area-inset-bottom)) max(48px,env(safe-area-inset-left));display:flex;flex-direction:column}.view-heading{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.view-title{margin:0;font:600 34px var(--serif, Georgia, serif);letter-spacing:.02em}.section-label{margin:36px 0 14px;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--muted)}.pill-button{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;min-height:42px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--sage-deep);transition:background-color .12s ease}.pill-button img{width:14px;height:14px}.progress-bar{position:relative;display:block;height:6px;border-radius:3px;background:#2f3a2c14;overflow:hidden}.progress-bar span{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:currentColor;transition:width .3s ease}.piece-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;margin:28px 0 20px}#piece-search{width:min(260px,100%);min-width:0;min-height:44px;padding:8px 4px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:14px}#piece-search:focus{outline:none;box-shadow:none}.piece-filters{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px}#piece-filter-reset{min-height:44px;padding:8px 0;color:var(--muted);font-size:13px}.piece-search-empty{padding:32px 0;color:var(--muted);font-size:14px}.piece-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}.piece-card{display:flex;align-items:center;gap:16px;padding:12px;border-radius:18px;background:var(--soft);text-align:left;transition:background-color .12s ease,transform .15s ease}.piece-card.selected{box-shadow:inset 0 0 0 2px #a9bb97}.piece-cover{position:relative;display:grid;place-items:center;flex-shrink:0;width:72px;height:72px;border-radius:14px;background:linear-gradient(145deg,var(--cover-light, #e5ebdc),var(--cover-deep, #9fb58a));overflow:hidden}.piece-cover img{display:block;width:100%;height:100%;object-fit:cover}.piece-text{display:flex;flex-direction:column;gap:6px;min-width:0}.piece-text strong{font-size:17px;font-weight:500;line-height:1.4}.piece-meta{font-size:13px;color:var(--muted);line-height:1.5}.book-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.book-card{display:flex;flex-direction:column;gap:10px;min-height:210px;padding:24px;border-radius:22px;text-align:left;background:var(--sage-tint);color:var(--sage-deep);transition:transform .15s ease}.book-card.theme-clay{background:var(--clay-tint);color:var(--clay-deep)}.book-card-head{display:flex;align-items:baseline;justify-content:space-between}.book-name{font:600 30px var(--serif, Georgia, serif);color:var(--ink)}.book-count{font-size:13px}.book-units{font-size:13px;line-height:1.6;opacity:.85}.book-card-foot{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:10px;font-size:12px}.book-card-foot .progress-bar{flex:1}.back-link{display:inline-flex;align-items:center;gap:4px;min-height:40px;margin:-8px 0 12px -6px;padding-right:8px;color:var(--muted);font-size:14px}.back-link svg{transform:rotate(180deg);width:18px;height:18px}.book-hero{padding:28px 28px 24px;border-radius:24px;background:var(--sage-tint);color:var(--sage-deep);margin-bottom:16px}.book-hero.theme-clay{background:var(--clay-tint);color:var(--clay-deep)}.book-title{margin:0;font:600 40px var(--serif, Georgia, serif);color:var(--ink)}.book-stats{display:flex;align-items:center;gap:14px;max-width:360px;margin-top:20px;font-size:13px}.book-stats .progress-bar{flex:1}.unit{margin-top:40px;scroll-margin-top:80px}.unit-head{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;margin-bottom:16px}.unit-index{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--soft);font:600 15px Georgia,serif;color:var(--muted)}.unit-text h3{display:flex;align-items:center;gap:10px;margin:0;font-size:20px;font-weight:600}.hand-tag{padding:2px 8px;border-radius:999px;border:1px solid var(--line);font-size:12px;font-weight:400;color:var(--muted)}.unit-range{margin:4px 0 0;font-size:13px;color:var(--muted)}.unit-progress{padding-top:8px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.unit-progress.complete{color:var(--sage-deep)}.unit-progress.complete:before{content:"✓ "}.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px;padding-left:56px}.lesson-grid.wide{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.lesson{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 12px;border-radius:14px;background:var(--soft);border:1.5px solid transparent;text-align:left;transition:background-color .12s ease,border-color .12s ease}.lesson.recent{border-color:#a9bb97;background:#f1f5ea}.lesson-mark{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}.lesson.done .lesson-mark{background:var(--sage);box-shadow:none;color:#fff}.lesson-mark svg{width:16px;height:16px;stroke-width:2.2}.lesson-text{display:flex;flex-direction:column;gap:2px;min-width:0}.lesson-text strong{font-size:15px;font-weight:500}.lesson-text span{font-size:12px;color:var(--muted);line-height:1.45}@media(hover:hover){.resume-card:hover{transform:translateY(-1px)}.piece-card:hover,.lesson:hover{background:#efeee4}.book-card:hover{transform:translateY(-2px)}.pill-button:hover{background:var(--soft)}.module-tab:hover,.back-link:hover{color:var(--ink)}}.library button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.resume-card,.piece-card,.book-card,.lesson,.back-link,.pill-button{transition-property:transform,background-color,box-shadow;transition-duration:.42s;transition-timing-function:var(--spring)}.resume-card:active,.piece-card:active,.book-card:active,.lesson:active,.pill-button:active{transform:scale(.97);transition-duration:80ms;transition-timing-function:ease-out}.back-link:active{transform:translate(-3px);transition-duration:80ms}@media(pointer:coarse){.module-tab{min-height:48px;padding:0 24px;font-size:16px}.header-about,.back-link,.pill-button{min-height:48px}.pill-button{padding:0 20px}.piece-card{padding:14px}.lesson{min-height:68px;padding:12px 14px}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.lesson-text strong{font-size:16px}.lesson-text span{font-size:13px}.lesson-mark{width:36px;height:36px}}.book-layout{display:block}@media(min-width:721px)and (max-width:999px){.book-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:8px}.book-side .book-hero{margin-bottom:0}}@media(min-width:1000px){.book-layout{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);gap:40px;align-items:start}.book-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:14px}.book-side .book-hero{margin-bottom:0}.book-units-list>.unit:first-child{margin-top:4px}}.book-card,.book-hero{background:radial-gradient(90% 120% at 100% 100%,#cfdcbf 0%,transparent 60%),radial-gradient(60% 80% at 0% 0%,#f3f7ee 0%,transparent 70%),var(--sage-tint)}.book-card.theme-clay,.book-hero.theme-clay{background:radial-gradient(90% 120% at 100% 100%,#ecccb4 0%,transparent 60%),radial-gradient(60% 80% at 0% 0%,#fbf3ec 0%,transparent 70%),var(--clay-tint)}.piece-cover{transition:filter .3s var(--ease)}.piece-card:active .piece-cover,.resume-card:active .piece-cover{filter:saturate(1.25) brightness(1.04);transition-duration:.1s}.progress-bar span{transform-origin:left;animation:grow .8s var(--ease) .15s both}@keyframes grow{0%{transform:scaleX(0)}}.lesson.pop .lesson-mark svg path{stroke-dasharray:20;animation:draw .42s var(--ease) .26s both}@keyframes pop{0%{transform:scale(.86)}}@keyframes draw{0%{stroke-dashoffset:20}}@supports not (view-transition-name: none){.module-view:not([hidden]){animation:view-arrive .22s var(--ease)}}.library.returning .module-view:not([hidden]){animation:view-arrive .28s var(--ease)}.workspace:not([hidden]){animation:sheet-up .36s cubic-bezier(.2,.8,.2,1)}@keyframes view-arrive{0%{opacity:.4;transform:translateY(6px)}}@keyframes sheet-up{0%{opacity:0}}::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}html[data-nav=tab]::view-transition-new(root){animation:vt-fade-in .32s cubic-bezier(.2,.8,.2,1) both}html[data-nav=tab]::view-transition-old(root){animation:vt-fade-out .2s ease-out both}html[data-nav=forward]::view-transition-old(root){animation:vt-out .28s ease-in both}html[data-nav=forward]::view-transition-new(root){animation:vt-in .38s cubic-bezier(.2,.8,.2,1) both}html[data-nav=back]::view-transition-old(root){animation:vt-out-back .28s ease-in both}html[data-nav=back]::view-transition-new(root){animation:vt-in-back .38s cubic-bezier(.2,.8,.2,1) both}::view-transition-group(book-beyer),::view-transition-group(book-hanon){animation-duration:.46s;animation-timing-function:cubic-bezier(.2,.9,.25,1)}@keyframes vt-fade-in{0%{opacity:0;transform:translateY(8px)}}@keyframes vt-fade-out{to{opacity:0}}@keyframes vt-out{to{opacity:0;transform:translate(-3%)}}@keyframes vt-in{0%{opacity:0;transform:translate(4%)}}@keyframes vt-out-back{to{opacity:0;transform:translate(3%)}}@keyframes vt-in-back{0%{opacity:0;transform:translate(-4%)}}.library [hidden]{display:none}.large-mode .module-tab{min-height:48px;font-size:18px}.large-mode .lesson-text strong{font-size:18px}.large-mode .piece-text strong{font-size:21px}.large-mode .piece-meta,.large-mode .lesson-text span,.large-mode .unit-range{font-size:15px}.large-mode .lesson{min-height:72px}@media(max-width:720px){.app-header-inner{padding:10px 20px}.module-nav{display:none}.tab-bar{position:fixed;inset:auto 0 0;z-index:6;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:6px 12px calc(6px + env(safe-area-inset-bottom));background:#fffefaeb;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid #ecebe2}.tab-bar .module-tab{flex-direction:column;gap:3px;min-height:54px;padding:4px 0;border-radius:12px;font-size:11px}.tab-bar .module-tab svg{width:23px;height:23px}.tab-bar .module-tab[aria-current=page]{background:none;box-shadow:none;color:var(--sage-deep)}.tab-bar .module-tab[aria-current=page] svg{stroke-width:2.1}.tab-bar .nav-indicator{top:0;bottom:auto;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--sage);box-shadow:none;transform:translate(calc(var(--left, 0px) + var(--width, 0px) / 2 - 14px))}.library-inner{padding:24px 20px calc(96px + env(safe-area-inset-bottom))}.view-title{font-size:28px}.pill-button span{display:none}.pill-button{width:42px;padding:0;justify-content:center}.piece-grid,.book-grid{grid-template-columns:1fr}.piece-cover{width:60px;height:60px}.book-card{min-height:0;padding:20px}.book-hero{padding:22px 20px 20px}.book-title{font-size:32px}.unit-head{grid-template-columns:1fr auto}.unit-index{display:none}.lesson-grid{padding-left:0;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.lesson-grid.wide{grid-template-columns:1fr}.large-mode .tab-bar .module-tab{font-size:13px}}@media(prefers-reduced-motion:reduce){.library *,.workspace{animation:none!important;transition:none!important}}@media(max-width:600px){.piece-toolbar{flex-direction:column;align-items:stretch;gap:8px;margin:24px 0 16px}.piece-toolbar #piece-search{order:-1;width:100%}.piece-filters{gap:4px 20px}}.book-count strong{font-weight:700;color:var(--ink)}.exercise-navigation{display:flex;align-items:center;gap:0;flex-shrink:0}.done-toggle{display:inline-flex;align-items:center;gap:5px;min-height:34px;margin:0 6px 0 4px;padding:0 12px 0 9px;border-radius:999px;border:1px solid #dfe4d8;font-size:13px;color:#5c6d50;white-space:nowrap;transition:background-color .15s ease,color .15s ease}.done-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.done-toggle:hover{background:#f1f5ea}.done-toggle[aria-pressed=true]{background:#72885f;border-color:#72885f;color:#fff}.large-mode .done-toggle{min-height:44px;font-size:16px}#previous-exercise img{transform:rotate(90deg)}#next-exercise img{transform:rotate(-90deg)}.exercise-navigation button:disabled{opacity:.25;cursor:default}.library [hidden],.exercise-navigation[hidden]{display:none}@media(max-width:600px){.piece-navigation{gap:4px}.done-toggle span{display:none}.done-toggle{padding:0 8px;margin:0 2px}.exercise-navigation .icon-button{width:36px;min-width:36px}.large-mode .exercise-navigation .icon-button{width:44px;min-width:44px}}#exercise-settings[hidden]{display:none}.practice-hands{display:flex;gap:6px;margin-bottom:18px}.practice-hands button{flex:1;min-height:44px;border-radius:6px;font-size:13px}.practice-hands button[aria-pressed=true]{background:#eaf0e4;color:#34512f}.practice-range{display:flex;align-items:center;gap:12px;margin:8px 0 24px}.practice-range input{width:0;flex:1;min-height:44px;padding:8px 12px;border:1px solid #dce2d6;border-radius:6px;background:transparent;font:inherit;color:inherit}.practice-range input[aria-invalid=true]{border-color:#ac574e}.large-mode .practice-hands button,.large-mode .practice-range input{min-height:56px;font-size:17px}.practice-hands[hidden]{display:none}@media(pointer:coarse){.done-toggle{min-height:44px;padding:0 16px 0 12px}.exercise-navigation .icon-button{min-width:44px;min-height:44px}}.done-toggle{transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease-out}.done-toggle:active{transform:scale(.92);transition-duration:80ms}.done-toggle[aria-pressed=true] svg path{stroke-dasharray:20;animation:done-draw .38s ease .12s both}@keyframes done-draw{0%{stroke-dashoffset:20}}.burst{position:fixed;z-index:1000;width:0;height:0;pointer-events:none}.burst i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#72885f;animation:burst-dot .62s cubic-bezier(.15,.8,.3,1) forwards}.burst i:nth-child(2n){background:#c9a27e}@keyframes burst-dot{0%{transform:translate(0) scale(.4);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(1);opacity:0}}@media(prefers-reduced-motion:reduce){.done-toggle,.done-toggle svg path{animation:none!important}}:root{font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Microsoft YaHei,sans-serif;color:#303631;background:#fffefa;font-synthesis:none;--green: #365642;--muted: #858980;--line: #e6e7df;--serif: "Songti SC", Georgia, serif}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{color:inherit;cursor:pointer;border:0;background:none}button:disabled{cursor:wait;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #829a65;outline-offset:3px}a{color:inherit;text-decoration:none}img{display:block}[hidden]{display:none!important}.icon-button{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:10px;border-radius:6px}.icon-button img{width:18px;height:18px}.icon-button:hover{background:#30383109}.icon-button[aria-pressed=true]{color:var(--green)}.icon-button[aria-pressed=true] img{filter:sepia(.4) saturate(2)}.workspace-bar{height:56px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;position:sticky;top:0;z-index:8;background:#fffefaf2;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.piece-navigation{display:flex;align-items:center;gap:8px;min-width:0}h1{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}.header-actions,.zoom-control{display:flex;align-items:center;gap:4px}.zoom-control{font-size:11px;font-variant-numeric:tabular-nums;color:#858980}.zoom-control span{min-width:34px;text-align:center}.zoom-control img{width:14px}.header-actions{flex-shrink:0}main{padding:18px 32px 190px;width:100%}.score-paper{max-width:1920px;margin-inline:auto;min-height:70vh}#score svg{display:block;width:100%;height:auto;overflow:visible}#score .note{cursor:pointer}#score .note .notehead{transition:fill .14s ease}@media(hover:hover){#score .note:not(.active):hover .notehead{fill:#62765a}}#score .note.active,#score .rest.active{fill:#66864d}#score svg .note .note-hit{stroke:none;fill:transparent}.score-footnote{text-align:right;margin:24px 4px;color:#8b9185;font-size:11px}.player{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:600px;max-width:calc(100% - 28px);padding:6px 12px 2px;background:rgb(255 255 255 / var(--surface-opacity, .88));-webkit-backdrop-filter:blur(var(--surface-blur, 10.56px));backdrop-filter:blur(var(--surface-blur, 10.56px));border:1px solid rgb(214 221 208 / var(--surface-opacity, .88));border-radius:12px;box-shadow:0 4px 22px #26332212;z-index:10}.keyboard-strip{padding:0 4px 4px}#keyboard{height:40px;display:flex;width:100%;position:relative}.key{border:1px solid #dce0d7;background:#fdfdfb;height:100%;flex:1;position:relative;border-radius:0 0 2px 2px}.key+.key{border-left:0}.key.black{position:absolute;top:0;right:-30%;width:60%;height:62%;background:#525a50;border:0;z-index:2}.key.active{background:#acc88d}.key.black.active{background:#608244}.key.left-hand{background:#a8c7de}.key.right-hand{background:#e4bb91}.key.black.left-hand{background:#4c789b}.key.black.right-hand{background:#a74}.key.left-hand.right-hand{background:linear-gradient(90deg,#a8c7de 50%,#e4bb91 50%)}.key.black.left-hand.right-hand{background:linear-gradient(90deg,#4c789b 50%,#a74 50%)}.key-label{position:absolute;bottom:1px;left:50%;transform:translate(-50%);font:400 7px/1.2 -apple-system,sans-serif;color:#a8ada4;pointer-events:none}.player-content,.transport,.practice-controls,.time-display,.volume-control{display:flex;align-items:center}.player-content{height:40px;gap:12px}.transport{gap:2px}.practice-controls{gap:2px;margin-left:auto}.play-button{height:40px;width:40px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:transparent}.play-button img{width:17px}.play-button:hover{background:#30383109}.play-button.loading{opacity:.5}.time-display{gap:4px;font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:10px;color:#90978c}#current-time{color:#46523f}.time-divider{opacity:.5}.timeline{height:8px;display:flex;align-items:center}.timeline input{width:100%;height:12px;margin:0;cursor:pointer}.player input[type=range]{appearance:none;-webkit-appearance:none;background:transparent}.player input[type=range]:focus-visible{outline:none}.player input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #dbe6d3}.player input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #dbe6d3}.player input[type=range]::-webkit-slider-runnable-track{height:2px;background:#e2e7dc;border-radius:2px}.player input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;margin-top:-3px;width:8px;height:8px;background:#70865b;border-radius:50%}.player input[type=range]::-moz-range-track{height:2px;background:#e2e7dc}.player input[type=range]::-moz-range-thumb{border:0;width:8px;height:8px;background:#70865b;border-radius:50%}.volume-control input{width:100%;height:32px}.player-settings{position:relative}.player-settings summary{list-style:none;cursor:pointer}.player-settings summary::-webkit-details-marker{display:none}.settings-panel{position:absolute;z-index:4;right:0;bottom:calc(100% + 14px);width:204px;padding:16px;border:1px solid #e4e8df;border-radius:10px;background:#fffefa;box-shadow:0 6px 24px #26332212}.setting-label{display:flex;justify-content:space-between;font-size:11px;color:#626d5b}.setting-label output{color:#90998a;font-variant-numeric:tabular-nums}#transparency{width:100%;height:32px;margin:2px 0 12px}.settings-panel .volume-control{gap:4px;margin-left:-8px}.score-source{display:block;margin-top:12px;padding:8px 0;font-size:12px;color:var(--sage-deep);text-decoration:none}.score-source:hover{text-decoration:underline}.player-settings summary:focus-visible{outline:2px solid #829a65;outline-offset:2px}.keyboard-hidden main{padding-bottom:120px}.text-button{font-size:11px;color:#8b9185;padding:8px 0}dialog{max-width:470px;width:calc(100% - 36px);padding:48px 38px 34px;border:1px solid #e5e6dc;background:#fcfcf7;border-radius:12px;color:#3b4636;box-shadow:0 20px 100px #28352024}dialog::backdrop{background:#27332638;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.dialog-close{position:absolute;top:10px;right:10px}dialog h2{font:500 22px/1.7 var(--serif);margin:14px 0 10px}dialog p{font-size:12px;line-height:1.9;color:#8b9382}.drop-zone{margin-top:28px;border:1px dashed #c5ceba;border-radius:6px;min-height:200px;display:flex;align-items:center;justify-content:center;gap:11px;flex-direction:column;cursor:pointer;background:#f4f5ed}.drop-zone:hover,.drop-zone.drag-over{background:#e8eddd}.drop-zone img{width:25px;margin-bottom:6px;opacity:.7}.drop-zone strong{font-size:13px;font-weight:500}.drop-zone span{font-size:11px;color:#8e9982}.drop-zone small{font-size:10px;color:#a3ab99;margin-top:12px}.import-note{text-align:center!important;font-size:10px!important}.credits{margin-top:25px}.credits h3{font-size:12px;font-weight:500;margin-top:20px}.credits p{font-size:11px}.credits a{text-decoration:underline;text-underline-offset:3px}#import-error{margin-top:15px;font-size:12px;color:#995e48;line-height:1.8}#toast{position:fixed;bottom:155px;left:50%;transform:translate(-50%);z-index:30;border-radius:6px;padding:13px 20px;background:#35432f;color:#fff;font-size:12px;max-width:calc(100vw - 36px);box-shadow:0 5px 25px #16200920;line-height:1.7}#toast[hidden]{display:none}@media(max-width:700px){.workspace-bar{height:52px;padding:0 8px;gap:8px}.piece-navigation{gap:2px}h1{font-size:12px}.zoom-control{display:none}.header-actions{gap:0}main{padding:12px 10px 180px}.player{padding:8px 8px 4px;bottom:max(8px,env(safe-area-inset-bottom));max-width:calc(100% - 16px)}.player-content{gap:4px}.player .icon-button{min-width:36px;padding:8px}.transport{gap:0}.time-display{margin-left:6px;font-size:9px}.key-label{font-size:7px}#keyboard{height:36px}.keyboard-strip{padding:0 2px 4px}.practice-controls{gap:0}.play-button{width:36px;height:36px}.speed-control select{font-size:11px}.score-footnote{margin-top:14px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}.speed-control{position:relative}.speed-control summary{display:flex;align-items:center;justify-content:center;gap:6px;min-width:58px;height:40px;padding:0 8px;cursor:pointer;list-style:none;font-size:11px;font-variant-numeric:tabular-nums;border-radius:6px}.speed-control summary::-webkit-details-marker{display:none}.speed-control summary img{width:12px;height:12px;opacity:.6}.speed-control summary:hover{background:#30383109}.control-panel{position:absolute;bottom:calc(100% + 12px);right:0;padding:5px;border:1px solid #e4e8df;border-radius:10px;background:#fffefa;box-shadow:0 6px 24px #26332212}.speed-unit{font-size:.75em;color:#858d80}.speed-options{width:224px;padding:16px}.speed-label{display:flex;justify-content:space-between;font-size:12px;color:#6e7869}.speed-label span{font-size:10px}.speed-stepper{display:flex;align-items:center;gap:8px;margin:8px 0 12px}.speed-stepper button{flex:0 0 40px;height:44px;border:0;border-radius:6px;background:transparent;font-size:24px;color:#53634a;cursor:pointer}.speed-stepper input{width:100%;min-width:0;height:44px;border:0;border-bottom:1px solid #dce2d6;background:transparent;text-align:center;font:inherit;font-size:24px;font-variant-numeric:tabular-nums;appearance:textfield;color:#35462c;border-radius:0}.speed-stepper input::-webkit-inner-spin-button,.speed-stepper input::-webkit-outer-spin-button{appearance:none;margin:0}.speed-stepper input:focus-visible{outline:none;border-color:#748a60;box-shadow:0 1px #748a60}.speed-stepper input[aria-invalid=true]{border-color:#b45a45}.speed-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}.speed-presets button{height:36px;border:0;border-radius:5px;background:transparent;color:#68745e;font:inherit;font-size:12px;cursor:pointer}.speed-presets button[aria-pressed=true]{background:#eaf0e4;color:#365642}.speed-options button:hover:not(:disabled){background:#f1f3ed}.speed-options button:disabled{opacity:.4;cursor:default}#speed-reset{width:100%;min-height:36px;margin-top:10px;padding:4px 0;border:0;border-radius:5px;background:transparent;color:#718363;font:inherit;font-size:12px;cursor:pointer}#speed-error{margin:0 0 8px;color:#a24631;font-size:11px}.player button:focus-visible,.player summary:focus-visible{outline:1px solid #94a28a;outline-offset:-2px}.player{transform:translate(calc(-50% + var(--dock-x, 0px)),var(--dock-y, 0px));padding-top:20px}#player-grip{position:absolute;top:0;left:calc(50% - 40px);width:80px;height:20px;display:grid;place-items:center;cursor:grab;touch-action:none}#player-grip span{width:30px;height:3px;border-radius:3px;background:#bfc6bb}.player.dragging #player-grip{cursor:grabbing}.player.expanded{width:1100px;padding:24px 20px 8px}.player.expanded #keyboard{height:84px}.player.expanded .player-content{height:52px}.player.expanded .icon-button,.player.expanded .play-button{min-width:48px;min-height:48px}.player.expanded .time-display,.player.expanded .speed-control summary{font-size:13px}.player.expanded #player-expand img{transform:rotate(180deg)}.player .timeline{height:24px}.player .timeline input{height:28px;touch-action:pan-y}.player input[type=range]::-webkit-slider-thumb{width:12px;height:12px;margin-top:-5px}.player input[type=range]::-moz-range-thumb{width:12px;height:12px}#score{position:relative;isolation:isolate}.score-playhead{position:absolute;width:20px;background:#83aa6030;border-radius:4px;pointer-events:none;z-index:-1}#score .note.active,#score .rest.active{fill:#346020}#score .note.active .notehead{filter:drop-shadow(0 0 1px #34602080)}@media(pointer:coarse){.player .icon-button,.player .play-button{min-width:44px;min-height:44px}.player-content{min-height:48px}.speed-control summary{min-height:44px}.player input[type=range]{min-height:36px}.player input[type=range]::-webkit-slider-thumb{width:16px;height:16px;margin-top:-7px}.player input[type=range]::-moz-range-thumb{width:16px;height:16px}#player-grip{height:28px;top:-4px}}@media(max-width:700px){.player.expanded{padding:22px 8px 4px}.player.expanded #keyboard{height:68px}.player.expanded .icon-button,.player.expanded .play-button{min-width:40px;padding:8px}.player .time-display{margin-left:2px}.player .time-divider,.player #total-time{display:none}.player.expanded .time-display,.player.expanded .speed-control summary{font-size:11px}.speed-control summary{min-width:50px;padding:0 4px}}.awake-setting{display:flex;align-items:center;justify-content:space-between;min-height:40px;font-size:11px;gap:12px;cursor:pointer}.awake-setting input{appearance:none;width:28px;height:16px;border-radius:16px;background:#d9ded4;position:relative;cursor:pointer;flex-shrink:0}.awake-setting input:after{content:"";width:12px;height:12px;position:absolute;top:2px;left:2px;background:#fff;border-radius:50%;transition:transform .12s}.awake-setting input:checked{background:#70865b}.awake-setting input:checked:after{transform:translate(12px)}.awake-setting input:disabled{opacity:.4;cursor:default}#awake-status{font-size:10px;color:#7e8777;line-height:1.5;margin-bottom:12px}#awake-status:empty{margin-bottom:8px}@media(pointer:coarse){.awake-setting{min-height:44px}}.settings-panel,.control-panel{max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}.player details[open]{z-index:5}.control-panel{z-index:4}#score[aria-busy=true]{pointer-events:none}button:active,summary:active{opacity:.65}.score-page{position:relative;width:100%;overflow:visible}#score .score-page>svg{position:absolute;inset:0;width:100%;height:100%}.page-retry{position:absolute;top:32px;left:50%;transform:translate(-50%);padding:12px;font-size:12px;color:#7e8777}.initial-score-loading{min-height:calc(100svh - 100px)}.initial-score-loading,.score-page[aria-busy=true]{position:relative}.initial-score-loading:before,.score-page[aria-busy=true]:before{content:"";position:absolute;inset:64px 24px 24px;background:url(/score-placeholder.svg) repeat-y top center / 100% 220px;opacity:.65;animation:score-loading-pulse 2s ease-in-out infinite}.score-page[aria-busy=true]:after{content:"正在加载谱页…";position:absolute;top:24px;left:0;right:0;text-align:center;font-size:12px;color:#8a9283}#score[aria-busy=true] .score-page:after{display:none}#score[aria-busy=true] .score-page:not([aria-busy=true]){opacity:.35}.score-loading{position:fixed;z-index:9;top:76px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:9px;padding:8px 12px;font-size:12px;color:#7e8777;background:#fffefaee;border-radius:6px}.loading-spinner{width:12px;height:12px;border:1.5px solid #dfe4da;border-top-color:#829575;border-radius:50%;animation:loading-spin .9s linear infinite}@keyframes loading-spin{to{transform:rotate(360deg)}}@keyframes score-loading-pulse{50%{opacity:.3}}@media(prefers-reduced-motion:reduce){.loading-spinner,.initial-score-loading:before,.score-page[aria-busy=true]:before{animation:none}}.score-loading{top:50%;transform:translate(-50%,-50%);font-size:14px;padding:14px 18px}.reading-mode{min-width:48px;min-height:44px;padding:8px;font-size:13px;color:#747d6c;border-radius:6px}.reading-mode[aria-pressed=true]{color:#365642;font-weight:600;text-decoration:underline;text-underline-offset:6px}.large-mode{--muted: #616b59}.large-mode .workspace-bar{height:72px}.large-mode h1{font-size:17px}.large-mode .reading-mode{font-size:17px;min-height:56px;min-width:64px}.large-mode .icon-button,.large-mode .player .icon-button,.large-mode .player .play-button{min-width:56px;min-height:56px}.large-mode .icon-button img{width:24px;height:24px}.large-mode .player .play-button img{width:30px;height:30px}.large-mode .player{width:1100px;padding:26px 16px 8px}.large-mode #player-expand{display:none}.large-mode .player .player-content{height:64px;gap:16px}.large-mode .player .time-display,.large-mode .player .speed-control summary{font-size:16px;color:#57624e}.large-mode .player #current-time{color:#35462c}.large-mode .player .speed-control summary{min-width:80px;min-height:56px}.large-mode .player .speed-options{width:264px;padding:20px}.large-mode .speed-label,.large-mode .speed-presets button,.large-mode #speed-reset{font-size:16px}.large-mode .speed-presets button,.large-mode .speed-stepper button,.large-mode #speed-reset{min-height:44px}.large-mode .speed-stepper input{font-size:30px;height:52px}.large-mode .player .speed-control summary img{width:16px;height:16px}.large-mode .player .settings-panel{width:280px;padding:20px}.large-mode .player .setting-label,.large-mode .player .awake-setting{font-size:16px;color:#4c5845}.large-mode .player #awake-status{font-size:13px}.large-mode .player .awake-setting{min-height:52px}.large-mode .player .awake-setting input{width:36px;height:22px}.large-mode .player .awake-setting input:after{width:18px;height:18px}.large-mode .player .awake-setting input:checked:after{transform:translate(14px)}.large-mode .player input[type=range]{min-height:40px}.large-mode .player input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-9px}.large-mode .player input[type=range]::-moz-range-thumb{width:20px;height:20px}.large-mode .player .timeline{height:36px}.large-mode .player .keyboard-strip{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x}.large-mode .player .keyboard-strip::-webkit-scrollbar{display:none}.large-mode .player #keyboard{height:104px;min-width:1144px}.large-mode .player .key-label{font-size:10px;bottom:4px}.large-mode .player #player-grip{height:28px;width:96px;left:calc(50% - 48px)}.large-mode .player #player-grip span{width:40px;height:4px}.large-mode main{padding-bottom:280px}.large-mode .score-loading{font-size:18px}.large-mode .loading-spinner{width:18px;height:18px}.large-mode .text-button{font-size:15px}.large-mode dialog h2{font-size:26px}.large-mode dialog p,.large-mode .credits p{font-size:16px}.large-mode .score-playhead{background:#83aa6040}@media(max-width:1000px){.large-mode .zoom-control{display:none}}@media(max-width:600px){.large-mode .workspace-bar{padding:0 8px;gap:0}.large-mode h1{font-size:16px}.large-mode #export-button{display:none}.large-mode .player{padding:26px 10px 8px}.large-mode .player .player-content{flex-wrap:wrap;justify-content:center;height:auto;gap:0}.large-mode .transport{justify-content:center;width:100%}.large-mode .practice-controls{margin:0;justify-content:center;width:100%}.large-mode .player #keyboard{height:92px}.large-mode main{padding-bottom:340px}.large-mode .player .time-display{margin-left:12px}.large-mode .time-divider,.large-mode #total-time{display:inline}}.large-mode .drop-zone strong{font-size:18px}.large-mode .drop-zone span,.large-mode .drop-zone small,.large-mode .credits h3{font-size:15px}.library-loading{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:#fffefb;color:#6c7865;font-size:16px}.library-loading button{padding:12px 24px;color:inherit;border:0;background:transparent;cursor:pointer;text-decoration:underline}.filing-footer{margin:48px 0 12px;color:var(--muted);font-size:12px;line-height:1.6;text-align:center}.filing-footer a{color:inherit;text-decoration:none}.filing-footer a:hover{text-decoration:underline;text-underline-offset:3px}.library{--ear-tint: #e4ebf2;--ear-deep: #3e5a78;--staff-tint: #ecebdc;--staff-deep: #66672f}.book-card.theme-ear,.book-hero.theme-ear{background:radial-gradient(90% 120% at 100% 100%,#c9d6e5 0%,transparent 60%),radial-gradient(60% 80% at 0% 0%,#f5f8fb 0%,transparent 70%),var(--ear-tint);color:var(--ear-deep)}.book-card.theme-staff,.book-hero.theme-staff{background:radial-gradient(90% 120% at 100% 100%,#dcd9b6 0%,transparent 60%),radial-gradient(60% 80% at 0% 0%,#f8f7ee 0%,transparent 70%),var(--staff-tint);color:var(--staff-deep)}.resume-card.theme-ear{--from: #34506d;--to: #6a87a6}.resume-card.theme-staff{--from: #57582a;--to: #8f8f4f}#training-grid{margin-top:0}.level-list{display:grid;gap:10px}.level-row{width:100%;min-height:68px}.level-row .lesson-text{flex:1}.level-best{font-size:14px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}.level-row.done .level-best{color:var(--sage-deep)}body.training-open{overflow:hidden}.trainer{--bg: #fbfbf9;--label: #1d1d1f;--secondary: #86868b;--fill: #ececf0;--tint: #4f7a52;--tint-soft: #e6efe4;--wrong: #e0533d;--wrong-soft: #fbe6e1;--accent: var(--tint);--accent-deep: var(--tint);--ease: cubic-bezier(.25, .1, .25, 1);--spring: cubic-bezier(.2, .8, .2, 1);position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto auto 1fr auto auto auto;background:var(--bg);color:var(--label);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,PingFang SC,sans-serif;-webkit-font-smoothing:antialiased;padding:max(10px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) 0 max(28px,env(safe-area-inset-left));animation:trainer-in .42s var(--ease)}.trainer.leaving{animation:trainer-out .22s ease-in forwards}@keyframes trainer-in{0%{opacity:0;transform:scale(.98) translateY(16px)}}@keyframes trainer-out{to{opacity:0;transform:scale(.98)}}.trainer-close svg,.trainer-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.trainer-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:980px;width:100%;margin:0 auto;min-height:52px}.trainer-close{justify-self:start;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--fill);color:#6e6e73;transition:transform .3s var(--spring)}.trainer-close:before{content:"";position:absolute;width:48px;height:48px}.trainer-close:active{transform:scale(.88)}.trainer-heading{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}.trainer-heading strong{font-size:15px;font-weight:600;letter-spacing:-.01em}.trainer-heading span{font-size:12px;color:var(--secondary)}.trainer-counter{justify-self:end;font-size:15px;font-weight:500;color:var(--secondary);font-variant-numeric:tabular-nums}.trainer-progress{max-width:980px;width:100%;height:4px;margin:8px auto 0;border-radius:2px;background:var(--fill);overflow:hidden}.trainer-progress span{display:block;height:100%;border-radius:inherit;background:var(--tint);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}.trainer-progress.review span{background:var(--secondary)}.trainer-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;min-height:0;padding:20px 0 8px}.trainer-stage.enter>*{animation:stage-in .48s var(--ease) both}.trainer-stage.enter>:nth-child(2){animation-delay:50ms}.trainer-stage.enter>:nth-child(3){animation-delay:.1s}@keyframes stage-in{0%{opacity:0}}@keyframes fade-in{0%{opacity:0}}.trainer-prompt{margin:0;font-size:30px;font-weight:600;letter-spacing:-.02em}.trainer-stage.is-review .trainer-prompt:before{content:"复习　";color:var(--secondary);font-weight:500}.melody{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.slot{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--fill);color:var(--secondary);font-size:15px;font-weight:600;transition:background-color .22s var(--ease),color .22s var(--ease),transform .36s var(--spring)}.slot.given{background:transparent;box-shadow:inset 0 0 0 1.5px #d2d2d7;color:var(--label)}.slot.ask.current{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--label)}.slot.ask{background:var(--label);color:#fff;font-size:22px}.slot.playing{transform:scale(1.12);background:var(--tint);box-shadow:none;color:#fff}.slot.right{background:var(--tint);color:#fff}.slot.miss{background:var(--wrong);color:#fff}.staff-card{max-width:86vw;padding:10px 28px;border-radius:24px;background:#fff;box-shadow:0 1px 2px #0000000a,0 12px 32px -16px #0000002e}.trainer .staff{display:block;width:auto;max-width:100%;height:clamp(170px,32vh,320px)}.staff .staff-line{stroke:#1d1d1f;stroke-width:.7}.staff .staff-clef,.staff .staff-note{fill:#1d1d1f}.staff .staff-note{animation:note-in .46s var(--ease) both}@keyframes note-in{0%{opacity:0;transform:translate(8px)}}.trainer-feedback{height:28px;line-height:28px;margin:0;text-align:center;font-size:17px;font-weight:600;letter-spacing:-.01em}.trainer-feedback.right{color:var(--tint)}.trainer-feedback.miss{color:var(--wrong)}.trainer-feedback.right,.trainer-feedback.miss{animation:fade-in .2s var(--ease)}.trainer-actions{display:flex;justify-content:center;align-items:center;gap:12px;height:50px;box-sizing:content-box;padding:12px 0 22px}.trainer-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:120px;min-height:50px;padding:0 24px;border-radius:999px;font-size:17px;font-weight:600;letter-spacing:-.01em;transition:transform .26s var(--spring),opacity .2s}.trainer-button svg{fill:currentColor;stroke:none;width:14px;height:14px}.trainer-button.filled{background:var(--tint);color:#fff}.trainer-button.tinted{background:var(--tint-soft);color:var(--tint)}.trainer-button.plain{min-width:0;padding:0 14px;color:var(--tint)}.trainer-button:active{transform:scale(.96);opacity:.85}.trainer-result{display:flex;flex-direction:column;align-items:center;gap:10px;animation:stage-in .52s var(--ease)}.result-score{display:flex;align-items:baseline;gap:6px;color:var(--secondary)}.result-score strong{font-family:ui-rounded,SF Pro Rounded,-apple-system,sans-serif;font-size:112px;font-weight:700;line-height:1;letter-spacing:-.04em;color:var(--label)}.trainer-result.pass .result-score strong{color:var(--tint)}.result-score span{font-size:28px;font-weight:600}.result-verdict{margin:4px 0 0;font-size:20px;font-weight:600}.result-note{margin:0;font-size:15px;color:var(--secondary);font-variant-numeric:tabular-nums}.trainer-keys{margin:0 calc(-1*max(24px,env(safe-area-inset-left)));padding:0 max(24px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-bottom));overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.answer-keyboard{--key-w: max(34px, min(88px, calc((100vw - 48px) / var(--whites))));position:relative;display:flex;width:calc(var(--key-w) * var(--whites));height:clamp(150px,27vh,240px);margin:0 auto;padding-top:8px;border-radius:10px;overflow:hidden;background:#1d1d1f;box-shadow:0 1px 2px #0000001f,0 16px 34px -20px #00000059;user-select:none;-webkit-user-select:none;touch-action:manipulation}.answer-key{min-width:0;padding:0;-webkit-touch-callout:none}.answer-key.white{position:relative;flex:0 0 var(--key-w);height:100%;border-radius:0;background:linear-gradient(#d6d6db 0,#fff 7% 88%,#f2f2f5);box-shadow:inset -1px 0 #d1d1d6,inset 0 -4px #e5e5ea;transition:background .16s ease,box-shadow .12s ease}.answer-key.white:last-child{box-shadow:inset 0 -4px #e5e5ea}.answer-key.white>span:not(.key-tag){position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:12px;color:#a1a1a6}.answer-key.middle-c>span:not(.key-tag){color:var(--accent-deep);font-weight:700}.answer-key.black{position:absolute;z-index:2;top:8px;left:calc(var(--at) * var(--key-w) - var(--key-w) * .3);width:calc(var(--key-w) * .6);height:58%;border-radius:0 0 3px 3px;background:linear-gradient(#0e0e10,#262628 82%,#4a4a4d 82%,#38383b);box-shadow:inset 1px 0 #ffffff12,inset -1px 0 #0006,0 2px 4px #0000004d;transition:background .16s ease,box-shadow .12s ease}.answer-key.inactive{cursor:default;opacity:1}.answer-key.white.inactive{background:linear-gradient(#d6d6db 0,#f2f2f5 7%);box-shadow:inset -1px 0 #d1d1d6}.answer-key.black.inactive{background:linear-gradient(#5c5c60,#6e6e72 82%,#8e8e92 82%,#7e7e82);box-shadow:none}.answer-keyboard:not(.locked) .answer-key.white:not(.inactive):active{background:linear-gradient(#dcdce1 0,#f2f2f5 12%);box-shadow:inset -1px 0 #d2d2d7,inset 0 -2px #e8e8ed}.answer-keyboard:not(.locked) .answer-key.black:not(.inactive):active{box-shadow:inset 0 -1px #000}.answer-key.is-correct,.answer-key.is-answer{background:var(--tint)!important;box-shadow:inset 0 -4px #0000001f!important}.answer-key.is-wrong{background:var(--wrong)!important;box-shadow:inset 0 -4px #0000001f!important}.answer-key.is-correct>span:not(.key-tag),.answer-key.is-answer>span:not(.key-tag),.answer-key.is-wrong>span:not(.key-tag){color:#fff!important}.answer-key.is-lit{animation:lit .52s ease}.answer-key.nudge{animation:nudge .26s ease}@keyframes nudge{40%{filter:brightness(.88)}}.key-tag{position:absolute;left:50%;bottom:34px;transform:translate(-50%);padding:3px 8px;border-radius:999px;background:var(--accent-deep);color:#fff;font-size:12px;font-weight:700;line-height:16px;white-space:nowrap;pointer-events:none;animation:fade-in .2s var(--ease)}.answer-key.black .key-tag{bottom:10px}.answer-key.is-correct .key-tag,.answer-key.is-answer .key-tag,.answer-key.is-wrong .key-tag{background:#ffffffe6;color:var(--accent-deep)}.answer-key.is-wrong .key-tag{color:var(--wrong)}@keyframes lit{0%{background:var(--accent)}}@media(max-width:720px){.trainer{padding-inline:16px}.trainer-heading span{display:none}.slot{width:48px;height:48px;font-size:14px}.trainer-prompt{font-size:24px}.trainer-button{min-width:0;padding:0 18px}.result-score strong{font-size:84px}.trainer-keys{margin-inline:-16px;padding-inline:16px}}@media(prefers-reduced-motion:reduce){.trainer,.trainer *{animation:none!important;transition:none!important}}.book-card.theme-names,.book-hero.theme-names{background:radial-gradient(90% 120% at 100% 100%,#e3cfdc 0%,transparent 60%),radial-gradient(60% 80% at 0% 0%,#fbf5f9 0%,transparent 70%),#f1e6ee;color:#7a4a69}.resume-card.theme-names{--from: #6b3f5c;--to: #a2708f}@media(min-width:1000px){#training-grid,#challenge-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.note-name{display:flex;align-items:baseline;font-family:ui-rounded,SF Pro Rounded,-apple-system,sans-serif;font-weight:700;letter-spacing:-.02em;color:var(--label)}.note-name span{font-size:clamp(64px,11vh,104px);line-height:1}.note-name .acc{margin-left:2px;font-size:clamp(40px,7vh,64px);font-weight:500}.note-name sub{margin-left:4px;font-size:clamp(22px,3.4vh,32px);font-weight:600;color:var(--secondary);vertical-align:baseline}.staff-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:min(940px,100%)}.staff-option{padding:6px 10px;border-radius:20px;background:#fff;box-shadow:0 1px 2px #0000000a,0 10px 26px -18px #0003;transition:transform .26s var(--spring),box-shadow .2s var(--ease),background-color .2s var(--ease)}.trainer .staff-option .staff{width:100%;height:auto}.staff-option:not(:disabled):active{background:#f2f2f5}.staff-option:disabled{cursor:default;opacity:1}.staff-option:disabled:not(.is-correct,.is-answer,.is-wrong){opacity:.45}.staff-option.is-correct,.staff-option.is-answer{box-shadow:inset 0 0 0 3px var(--tint),0 10px 26px -18px #0003;background:var(--tint-soft)}.staff-option.is-wrong{box-shadow:inset 0 0 0 3px var(--wrong);background:var(--wrong-soft)}.trainer-keys.empty{min-height:max(16px,env(safe-area-inset-bottom))}.letter-pad{display:flex;flex-direction:column;align-items:center;gap:14px;padding-bottom:6px}.accidental-switch{display:inline-flex;padding:3px;border-radius:12px;background:var(--fill)}.accidental-switch button{min-width:64px;min-height:40px;border-radius:9px;font-size:22px;color:var(--secondary);transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}.accidental-switch button[aria-checked=true]{background:#fff;color:var(--label);box-shadow:0 1px 2px #0000001a,0 3px 8px #0000000f}.letter-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;width:min(820px,100%)}.letter-key{min-height:clamp(64px,11vh,96px);border-radius:18px;background:#fff;box-shadow:0 1px 2px #0000000f,0 8px 22px -16px #00000040;font-family:ui-rounded,SF Pro Rounded,-apple-system,sans-serif;font-size:clamp(26px,4vh,34px);font-weight:700;color:var(--label);transition:transform .24s var(--spring),background-color .2s var(--ease),color .2s var(--ease)}.letter-key:active{background:#f2f2f5}.letter-key.is-correct,.letter-key.is-answer{background:var(--tint);color:#fff}.letter-key.is-wrong{background:var(--wrong);color:#fff}@media(max-width:720px){.staff-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.letter-row{gap:6px}.letter-key{border-radius:12px}}#challenge-grid{margin-top:0}.challenge-card{--a1: #ffb340;--a2: #ff5e62;position:relative;overflow:hidden;background:radial-gradient(120% 140% at 100% 100%,color-mix(in srgb,var(--a2) 42%,transparent),transparent 62%),radial-gradient(90% 120% at 0% 0%,color-mix(in srgb,var(--a1) 30%,transparent),transparent 70%),#fbfbfd!important;color:color-mix(in srgb,var(--a2) 70%,#1d1d1f)!important}.theme-sunrise{--a1: #ffb340;--a2: #ff5e62;--accent: #ff6a3d}.theme-bloom{--a1: #ff6fa5;--a2: #a46cf5;--accent: #d6559a}.theme-sky{--a1: #5ac8fa;--a2: #5e5ce6;--accent: #3f74f0}.theme-mint{--a1: #5ee39a;--a2: #22b8cf;--accent: #14a37f}.challenge-intro{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:34em;text-align:center}.challenge-best{display:flex;align-items:baseline;gap:6px;min-height:34px;color:var(--secondary)}.challenge-best strong{font-family:ui-rounded,SF Pro Rounded,-apple-system,sans-serif;font-size:30px;font-weight:700;color:var(--label);font-variant-numeric:tabular-nums}.challenge-best span{font-size:14px;font-weight:600}.staff-picker{display:flex;gap:12px}.staff-pick{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;width:112px;height:112px;padding:14px 12px 12px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px #e3e3e8,0 1px 2px #0000000a;font-size:14px;font-weight:600;color:var(--secondary);transition:box-shadow .2s var(--ease),color .2s var(--ease)}.staff-pick[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--tint),0 8px 20px -14px var(--tint);color:var(--tint)}.mini-staff{width:64px;height:auto;max-height:72px;overflow:visible}.mini-staff line{stroke:#1d1d1f;stroke-width:.6}.mini-staff path{fill:#1d1d1f}.segmented{display:inline-flex;padding:3px;border-radius:12px;background:var(--fill)}.segmented button{min-width:88px;height:36px;padding:0 16px;border-radius:9px;font-size:15px;font-weight:600;color:var(--label);transition:background-color .2s var(--ease),box-shadow .2s var(--ease)}.segmented button[aria-checked=true]{background:#fff;box-shadow:0 1px 2px #0000001a,0 3px 8px #0000000f}.sprint-head{display:flex;align-items:baseline;gap:12px;min-height:52px}.sprint-count{font-family:ui-rounded,SF Pro Rounded,-apple-system,sans-serif;font-size:48px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;color:var(--label)}.sprint-combo{min-width:5em;font-size:15px;font-weight:600;color:var(--tint)}.hearts{display:inline-flex;gap:4px}.heart svg{width:20px;height:20px;fill:var(--fill);stroke:none;transition:fill .26s var(--ease)}.heart.on svg{fill:var(--wrong)}.memory-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:520px;min-height:12px}.memory-dots span{width:12px;height:12px;border-radius:50%;background:var(--fill);transition:background-color .16s var(--ease)}.memory-dots span.on{background:var(--tint)}.challenge .trainer-stage{overflow-y:auto}.challenge .trainer-stage{justify-content:safe center}.challenge .staff .staff-note{animation:none}.challenge .trainer-keys .answer-keyboard{--key-w: max(18px, min(88px, calc((100vw - 48px) / var(--whites))))}.challenge{--deep: var(--accent);--gradient: linear-gradient(135deg, var(--a1), var(--a2))}.challenge.is-cover{background:#f5f5f7}.challenge.is-cover .trainer-heading,.challenge.is-cover .trainer-progress{visibility:hidden}.challenge.is-cover .trainer-stage{justify-content:safe center}.challenge-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,1fr);align-items:stretch;gap:20px;width:min(1000px,100%);max-width:none;text-align:left}.intro-cover{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;min-height:clamp(320px,52vh,460px);padding:28px;border-radius:32px;overflow:hidden;background:radial-gradient(70% 60% at 20% 10%,#ffffff40,transparent 70%),radial-gradient(80% 80% at 100% 100%,#00000014,transparent 70%),var(--gradient);box-shadow:0 30px 60px -36px var(--a2);color:#fff}.intro-title{position:absolute;top:26px;left:28px;margin:0;font-family:-apple-system,SF Pro Display,PingFang SC,sans-serif;font-size:clamp(26px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;color:#fff}.intro-panel{display:flex;flex-direction:column;justify-content:center;gap:24px;padding:24px;border-radius:32px;background:#fff;box-shadow:0 1px 2px #0000000a,0 20px 50px -34px #0000004d}.intro-panel .staff-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.intro-panel .staff-pick{width:auto;height:104px;border-radius:18px;background:#f5f5f7;box-shadow:none}.intro-panel .staff-pick[aria-checked=true]{background:#fff;box-shadow:inset 0 0 0 2px var(--accent),0 10px 24px -16px var(--accent);color:var(--accent)}.intro-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:18px;background:#f5f5f7}.stat strong{font-family:ui-rounded,SF Pro Rounded,-apple-system,sans-serif;font-size:30px;font-weight:700;line-height:1.1;color:var(--label);font-variant-numeric:tabular-nums}.stat span{font-size:13px;font-weight:600;color:var(--secondary)}.stat.empty strong{font-weight:400;color:#c7c7cc}.trainer-button.intro-start{width:100%;min-height:56px;background:var(--gradient);font-size:18px;box-shadow:0 14px 30px -18px var(--a2)}.challenge .hero-dial{display:grid;place-items:center;align-content:center;width:clamp(180px,22vw,230px);aspect-ratio:1;border-radius:50%;background:#ffffff26;box-shadow:inset 0 0 0 10px #fff,0 20px 40px -24px #0000004d}.challenge .hero-dial strong{font-family:ui-rounded,SF Pro Rounded,-apple-system,sans-serif;font-size:clamp(64px,7vw,84px);font-weight:700;line-height:1;color:#fff}.challenge .hero-dial span{font-size:15px;font-weight:600;color:#fffc}.challenge .hero-hearts{display:flex;gap:16px}.challenge .hero-hearts .heart svg{width:clamp(64px,8vw,88px);height:clamp(64px,8vw,88px);fill:#fff;filter:drop-shadow(0 12px 16px #0000002e)}.challenge .hero-hearts .heart:nth-child(2) svg{fill:#ffffffd9}.challenge .hero-hearts .heart:nth-child(3) svg{fill:#ffffffb3}.challenge .hero-chain{display:flex;align-items:flex-end;gap:10px}.challenge .hero-chain span{width:clamp(40px,4.6vw,52px);height:clamp(130px,16vw,176px);border-radius:0 0 10px 10px;background:#ffffffeb;box-shadow:0 16px 30px -22px #0000005c;animation:chain-lit 3.2s var(--ease) infinite;animation-delay:calc(var(--i) * .45s)}.challenge .hero-chain span.new{background:transparent;box-shadow:none;outline:2px dashed #ffffffb3;outline-offset:-2px;animation:none}@keyframes chain-lit{0%,12%{background:#ffffff59}30%,to{background:#ffffffeb}}.challenge-result{min-width:min(420px,100%);padding:40px 36px 32px;border-radius:32px;background:#fff;box-shadow:0 1px 2px #0000000a,0 20px 50px -34px #0000004d}.challenge-result .result-score strong{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}.challenge.is-cover .trainer-actions .trainer-button.filled{background:var(--gradient)}.challenge.is-cover .trainer-actions .trainer-button.tinted{background:#fff;color:var(--accent)}@media(max-width:860px){.challenge-intro{grid-template-columns:1fr;gap:16px;width:min(560px,100%)}.intro-cover{min-height:clamp(260px,38vh,380px)}}@media(max-width:520px){.intro-panel{padding:16px;gap:16px}.intro-panel .staff-pick{height:92px;padding:10px 6px}.stat{padding:10px 12px}.stat strong{font-size:24px}}.challenge.is-cover .trainer-feedback:empty,.challenge.is-cover .trainer-actions:empty{display:none}.challenge.is-cover .trainer-stage{margin-inline:-28px;padding:24px 28px 40px}@media(max-width:720px){.challenge.is-cover .trainer-stage{margin-inline:-16px;padding-inline:16px}}.view-meta{font-size:14px;color:var(--muted)}.learn-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px;margin-top:36px;align-items:start}.learn-unit-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}.learn-unit-head h3{margin:0;font-size:18px;font-weight:600}.learn-unit-head span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}@media(max-width:860px){.learn-units{grid-template-columns:1fr}}.lesson-player{grid-template-rows:auto auto 1fr auto auto}.lesson-stage{justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;padding:24px 0}.lesson-card{display:flex;flex-direction:column;align-items:center;gap:20px;width:min(820px,100%);text-align:center}.lesson-card>*{flex-shrink:0}.question .figure-staff.grand{height:clamp(170px,26vh,250px)}.lesson-title{margin:0;font-size:30px;font-weight:600;letter-spacing:-.02em}.lesson-copy{display:flex;flex-direction:column;gap:6px;max-width:38em}.lesson-copy p{margin:0;text-wrap:balance;font-size:19px;line-height:1.65;color:#3a3a3c}.lesson-eyebrow{margin:0;font-size:14px;font-weight:600;color:var(--tint)}.lesson-card.intro .lesson-title{font-size:40px}.lesson-card.intro .lesson-copy p{font-size:21px}.figure-hint{margin:0;font-size:13px;color:var(--secondary)}.figure-hands{display:block;width:auto;height:clamp(130px,22vh,200px)}.figure-hands .hand-palm,.figure-hands .hand-finger{fill:#f4f2ec;stroke:#c9c6bb;stroke-width:1}.figure-hands .hand-finger.lit{fill:var(--tint-soft);stroke:var(--tint)}.figure-hands .hand-number{font-family:-apple-system,PingFang SC,sans-serif;font-size:9px;font-weight:700;fill:#6e6e73}.figure-hands .hand-number.lit{fill:var(--tint)}.figure-hands .hand-name{font-family:-apple-system,PingFang SC,sans-serif;font-size:10px;font-weight:600;fill:#8e8e93}.lesson-card strong{font-size:inherit;color:var(--label);font-weight:700}.figure{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%}.figure-card{max-width:100%;padding:10px 22px;border-radius:22px;background:#fff;box-shadow:0 1px 2px #0000000a,0 12px 30px -18px #0000002e}.figure-staff{display:block;width:auto;max-width:100%;height:clamp(150px,24vh,230px)}.figure-staff.rhythm{height:clamp(110px,17vh,160px)}.figure-staff.grand{height:clamp(230px,36vh,340px)}.figure-staff .fig-line{stroke:#1d1d1f;stroke-width:.7}.figure-staff .fig-line.bar{stroke-width:.9}.figure-staff .fig-stem{stroke:#1d1d1f;stroke-width:1.1}.figure-staff .fig-ink,.figure-staff .fig-dot{fill:#1d1d1f}.figure-staff .hl .fig-ink{fill:var(--tint)}.figure-staff .fig-label{font-family:-apple-system,PingFang SC,sans-serif;font-size:8px;font-weight:600;fill:var(--secondary)}.figure-staff .hl .fig-label{fill:var(--tint)}.figure-sounds{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.lesson-card .answer-keyboard{--key-w: max( 26px, min(60px, calc((min(100vw, 860px) - 64px) / var(--whites))) );height:clamp(120px,21vh,190px)}.answer-key.is-hint.white{background:linear-gradient(#e2ece0 0,#eef5ec 12% 100%)}.answer-key.is-hint.black{background:linear-gradient(#3f6b45,#4f7a52)}.choice-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(600px,100%)}.choice-option{min-height:58px;padding:10px 16px;border-radius:16px;background:#fff;box-shadow:0 1px 2px #0000000f,0 8px 22px -16px #00000040;font-size:17px;font-weight:600;color:var(--label);transition:background-color .2s var(--ease),color .2s var(--ease)}.choice-option:not(:disabled):active{background:#f2f2f5}.choice-option:disabled{cursor:default;opacity:1}.choice-option:disabled:not(.is-correct,.is-answer,.is-wrong){opacity:.45}.choice-option.is-correct,.choice-option.is-answer{background:var(--tint);color:#fff}.choice-option.is-wrong{background:var(--wrong);color:#fff}.lesson-card .letter-row{width:min(640px,100%)}.lesson-feedback{height:58px;text-align:center}.lesson-feedback p{margin:0}.lesson-feedback p:first-child{font-size:17px;font-weight:600;line-height:26px}.lesson-feedback p:last-child:not(:first-child){font-size:15px;line-height:24px;color:var(--secondary)}.lesson-feedback .right{color:var(--tint)}.lesson-feedback .miss{color:var(--wrong)}.lesson-feedback.show{animation:fade-in .2s var(--ease)}@media(max-width:720px){.lesson-title{font-size:23px}.lesson-copy p{font-size:17px}.lesson-card.intro .lesson-title{font-size:30px}.choice-list{grid-template-columns:1fr}}.figure-staff .fig-note{animation:fig-note-in .42s var(--ease) both;animation-delay:calc(var(--i, 0) * 70ms + .12s)}@keyframes fig-note-in{0%{opacity:0;transform:translateY(-4px)}}.figure-staff .fig-note.sounding .fig-ink,.figure-staff .fig-note.sounding .fig-stem{fill:var(--tint);stroke:var(--tint)}.figure-staff .fig-note.sounding .fig-label{fill:var(--tint)}.figure-staff .fig-note .fig-ink{transition:fill .16s var(--ease)}.figure .answer-key.is-hint{animation:hint-in .46s var(--ease) both;animation-delay:calc(var(--i, 0) * 80ms + .15s)}.figure .answer-key.is-hint .key-tag{animation:fade-in .3s var(--ease) both;animation-delay:calc(var(--i, 0) * 80ms + .25s)}@keyframes hint-in{0%{filter:saturate(0) brightness(1.08)}}.figure .answer-key.is-hint.is-lit{animation:lit .52s ease}.figure-hands .hand-finger.lit{transform-box:fill-box;transform-origin:bottom;animation:finger-tap 1.6s var(--ease) .4s infinite}@keyframes finger-tap{0%,60%,to{transform:translateY(0)}30%{transform:translateY(3px) scaleY(.96)}}.lesson-card.intro .lesson-title{animation:fade-in .5s var(--ease) both}.lesson-card.intro .lesson-copy{animation:fade-in .5s var(--ease) .15s both}@media(prefers-reduced-motion:reduce){.lesson-player *,.lesson-player *:after{animation:none!important}}.figure .answer-keyboard.sweeping .answer-key.sweep{animation-duration:calc(var(--groups) * 1.1s);animation-delay:calc(var(--g) * 1.1s + .4s);animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-fill-mode:none}.figure .answer-keyboard.sweeping[style*="--groups: 3"] .answer-key.sweep.white{animation-name:sweep-white-3}.figure .answer-keyboard.sweeping[style*="--groups: 3"] .answer-key.sweep.black{animation-name:sweep-black-3}@keyframes sweep-white-3{0%,28%{background:#dbe8d7}36%,to{background:linear-gradient(#d6d6db 0,#fff 7% 88%,#f2f2f5)}}@keyframes sweep-black-3{0%,28%{background:#4f7a52}36%,to{background:linear-gradient(#0e0e10,#262628 82%,#4a4a4d 82%,#38383b)}}.h-scroll{max-width:calc(100% + 48px);margin:-8px -24px -26px;padding:8px 24px 34px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}.h-scroll::-webkit-scrollbar{display:none}.lesson-card .answer-keyboard.full-range{--key-w: calc(min(100vw - 80px, 816px) / var(--whites));height:clamp(90px,15vh,140px)}.answer-keyboard.full-range .answer-key.white>span:not(.key-tag){display:none}.answer-keyboard.full-range .answer-key.middle-c>span:not(.key-tag){display:block;bottom:6px;font-size:10px}.lesson-card.is-play{gap:12px}.lesson-card.is-play .lesson-copy p{font-size:17px;color:var(--secondary)}.play{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}.play-status{height:22px;margin:0;font-size:15px;font-weight:600;color:var(--secondary);transition:color .2s var(--ease)}.play-status.good{color:var(--tint)}.play-status.miss{color:var(--wrong)}.play-controls{display:flex;gap:12px;justify-content:center;min-height:50px}.answer-key.is-target:after{content:"";position:absolute;left:50%;bottom:6px;width:min(36px,76%);aspect-ratio:1;border-radius:50%;transform:translate(-50%);background:radial-gradient(circle,color-mix(in srgb,var(--tint) 34%,transparent) 0 46%,color-mix(in srgb,var(--tint) 16%,transparent) 48% 100%);pointer-events:none;animation:fade-in .22s var(--ease)}.answer-key.black.is-target:after{bottom:12%;background:radial-gradient(circle,color-mix(in srgb,#9fd4a3 70%,transparent) 0 46%,color-mix(in srgb,#9fd4a3 30%,transparent) 48% 100%)}.answer-key.is-target>span:not(.key-tag){color:var(--tint);font-weight:700}.play-keyboard .answer-key.white>span:not(.key-tag){bottom:15px;font-size:13px;font-weight:600;color:#8e8e93}.play-lane{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:720px;min-height:40px}.lane-note{display:grid;place-items:center;width:calc(var(--b, 1) * 34px + (var(--b, 1) - 1) * 8px);min-width:34px;height:40px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px #e3e3e8,0 1px 2px #0000000a;font-size:15px;font-weight:700;color:#6e6e73;transition:background-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}.lane-note.now{box-shadow:inset 0 0 0 2px var(--tint),0 6px 16px -10px var(--tint);color:var(--tint)}.lane-note.played,.lane-note.sounding{background:var(--tint-soft);box-shadow:none;color:var(--tint)}.lane-note.sounding{background:var(--tint);color:#fff}.play-staff .figure-staff{height:clamp(120px,18vh,170px)}.lesson-card.is-play .lesson-title{font-size:26px}.play-staff .figure-staff.grand{height:clamp(170px,26vh,230px)}.play-staff .figure-staff.rhythm{height:clamp(84px,12vh,120px)}.play-staff .fig-note .fig-stem{transition:stroke .16s var(--ease)}.play-staff .fig-note.now .fig-ink,.play-staff .fig-note.hit .fig-ink{fill:var(--tint)}.play-staff .fig-note.now .fig-stem,.play-staff .fig-note.hit .fig-stem{stroke:var(--tint)}.play-staff .fig-note.played .fig-ink{fill:#b9b9be}.play-staff .fig-note.played .fig-stem,.play-staff .fig-note.played .fig-line{stroke:#b9b9be}.play-staff .fig-note.miss .fig-ink{fill:var(--wrong)}.play-staff .fig-note.miss .fig-stem{stroke:var(--wrong)}.play-dots{display:flex;gap:8px;height:10px}.play-dots span{width:10px;height:10px;border-radius:50%;background:var(--fill);transition:background-color .22s var(--ease),box-shadow .22s var(--ease)}.play-dots span.now{box-shadow:inset 0 0 0 2px var(--tint)}.play-dots span.on{background:var(--tint)}.count-dots{display:flex;gap:10px}.count-dots span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fill);font-size:15px;font-weight:700;color:var(--secondary);transition:background-color .12s ease,color .12s ease}.count-dots span.on{background:var(--tint);color:#fff}.tap-pad{width:min(480px,100%);height:clamp(76px,12vh,120px);border-radius:24px;background:#fff;box-shadow:inset 0 0 0 1px #e3e3e8,0 1px 2px #0000000a,0 14px 30px -20px #00000040;font-size:22px;font-weight:700;color:var(--tint);touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:background-color .16s ease}.tap-pad:active{background:#f2f2f5}.tap-pad.good{animation:pad-good .36s ease}.tap-pad.off{animation:pad-off .36s ease}@keyframes pad-good{0%{background:var(--tint-soft)}}@keyframes pad-off{0%{background:var(--wrong-soft)}}.dash-prompt{min-height:52px;font-size:40px;font-weight:700;letter-spacing:-.02em;color:var(--label)}.dash-prompt.swap{animation:fade-in .2s var(--ease)}.play.complete .dash-prompt{color:var(--tint)}@media(max-width:720px){.dash-prompt{font-size:32px}.lane-note{width:calc(var(--b, 1) * 28px + (var(--b, 1) - 1) * 6px);min-width:28px;height:34px;font-size:13px}.play-lane{gap:6px}}.play-staff .playhead{stroke:var(--tint);stroke-width:1.6;stroke-linecap:round;opacity:.35;transition:opacity .2s var(--ease)}.play-staff .playhead.moving{opacity:1}.count-dots.ready span.on{background:var(--secondary)}.play-staff .hold-bar{fill:#e8e8ed}.play-staff .hold-fill{fill:var(--tint)}.play-staff .fig-note.short .fig-ink{fill:#d98a2b}.play-staff .fig-note.short .fig-stem{stroke:#d98a2b}.tap-pad.down{background:var(--tint-soft)}.steps-card{display:flex;flex-direction:column;gap:18px;padding:22px 26px}.steps-row{display:flex;align-items:center;gap:14px;justify-content:center}.steps-label{min-width:4.5em;font-size:14px;font-weight:600;color:var(--secondary);text-align:right}.steps-track{display:flex;align-items:center;gap:6px}.step-note{display:grid;place-items:center;min-width:42px;height:42px;padding:0 7px;border-radius:12px;background:#f2f2f5;font-size:18px;font-weight:700;color:var(--label)}.step-note.altered{background:#1d1d1f;color:#fff}.step-gap{min-width:22px;font-size:14px;font-weight:600;color:var(--secondary);text-align:center}.step-gap.half{color:var(--tint)}.step-gap.off{color:var(--wrong);text-decoration:underline 2px;text-underline-offset:3px}.steps-row .trainer-button{min-width:0;min-height:34px;padding:0 14px;font-size:14px}@media(max-width:720px){.steps-label{min-width:0;width:100%;text-align:center}.steps-card{padding:16px 12px}.steps-row{flex-wrap:wrap}.steps-track{gap:2px}.step-note{min-width:28px;height:32px;padding:0 4px;border-radius:9px;font-size:14px}.step-gap{min-width:12px;font-size:11px}}.build-prompt{font-size:22px;font-weight:700;color:var(--label)}.play.complete .build-prompt{color:var(--tint)}.build-names{display:flex;gap:6px;min-height:30px}.build-names span{display:grid;place-items:center;min-width:30px;height:30px;padding:0 6px;border-radius:9px;background:#f2f2f5;font-size:14px;font-weight:700;animation:fade-in .2s var(--ease)}.build-names span.altered{background:#1d1d1f;color:#fff}