/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}}@layer base,components;@layer utilities{.visible{visibility:visible}.icon-\[carbon--add\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M17 15V8h-2v7H8v2h7v7h2v-7h7v-2z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--arrow-left\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='m14 26l1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6L4 16z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--arrow-right\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='m18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--arrow-up-right\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--checkmark\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='m13 24l-9-9l1.414-1.414L13 21.171L26.586 7.586L28 9z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--chevron-down\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M16 22L6 12l1.4-1.4l8.6 8.6l8.6-8.6L26 12z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--close\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M17.414 16L24 9.414L22.586 8L16 14.586L9.414 8L8 9.414L14.586 16L8 22.586L9.414 24L16 17.414L22.586 24L24 22.586z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--music\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M25 4H10a2 2 0 0 0-2 2v14.556A3.96 3.96 0 0 0 6 20a4 4 0 1 0 4 4V12h15v8.556A3.96 3.96 0 0 0 23 20a4 4 0 1 0 4 4V6a2 2 0 0 0-2-2M6 26a2 2 0 1 1 2-2a2 2 0 0 1-2 2m17 0a2 2 0 1 1 2-2a2.003 2.003 0 0 1-2 2M10 6h15v4H10Z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--pause\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M12 8v16H8V8zm0-2H8a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2m12 2v16h-4V8zm0-2h-4a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--play\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M7 28a1 1 0 0 1-1-1V5a1 1 0 0 1 1.482-.876l20 11a1 1 0 0 1 0 1.752l-20 11A1 1 0 0 1 7 28M8 6.69v18.62L24.925 16Z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--settings\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M27 16.76v-1.53l1.92-1.68A2 2 0 0 0 29.3 11l-2.36-4a2 2 0 0 0-1.73-1a2 2 0 0 0-.64.1l-2.43.82a11 11 0 0 0-1.31-.75l-.51-2.52a2 2 0 0 0-2-1.61h-4.68a2 2 0 0 0-2 1.61l-.51 2.52a11.5 11.5 0 0 0-1.32.75l-2.38-.86A2 2 0 0 0 6.79 6a2 2 0 0 0-1.73 1L2.7 11a2 2 0 0 0 .41 2.51L5 15.24v1.53l-1.89 1.68A2 2 0 0 0 2.7 21l2.36 4a2 2 0 0 0 1.73 1a2 2 0 0 0 .64-.1l2.43-.82a11 11 0 0 0 1.31.75l.51 2.52a2 2 0 0 0 2 1.61h4.72a2 2 0 0 0 2-1.61l.51-2.52a11.5 11.5 0 0 0 1.32-.75l2.42.82a2 2 0 0 0 .64.1a2 2 0 0 0 1.73-1l2.28-4a2 2 0 0 0-.41-2.51ZM25.21 24l-3.43-1.16a8.9 8.9 0 0 1-2.71 1.57L18.36 28h-4.72l-.71-3.55a9.4 9.4 0 0 1-2.7-1.57L6.79 24l-2.36-4l2.72-2.4a8.9 8.9 0 0 1 0-3.13L4.43 12l2.36-4l3.43 1.16a8.9 8.9 0 0 1 2.71-1.57L13.64 4h4.72l.71 3.55a9.4 9.4 0 0 1 2.7 1.57L25.21 8l2.36 4l-2.72 2.4a8.9 8.9 0 0 1 0 3.13L27.57 20Z'/%3E%3Cpath fill='black' d='M16 22a6 6 0 1 1 6-6a5.94 5.94 0 0 1-6 6m0-10a3.91 3.91 0 0 0-4 4a3.91 3.91 0 0 0 4 4a3.91 3.91 0 0 0 4-4a3.91 3.91 0 0 0-4-4'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--stop-filled\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m6 18a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2Z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.icon-\[carbon--subtract\]{width:1em;height:1em;-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);-webkit-mask-image:var(--svg);mask-image:var(--svg);--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'%3E%3Cpath fill='black' d='M8 15h16v2H8z'/%3E%3C/svg%3E");background-color:currentColor;display:inline-block;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.block{display:block}.hidden{display:none}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.resize{resize:both}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}}.ui-icon{vertical-align:middle;flex:none;width:1em;height:1em;font-size:18px;display:inline-block}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}:root,[data-theme=dark]{--bg:#030305;--bg2:#1d1c21;--bg3:#2a2a2f;--line:#3a3a40;--text:#f5f5f5;--muted:#9a9aa0;--faint:#6a6a70;--cta-bg:#fff;--cta-fg:#030305;--danger:#e5484d;--staff:#c8c8cc;--note:#f5f5f5;--kb-white:#f5f5f5;--kb-white-fg:#030305;--kb-on:#fff}[data-theme=light]{--bg:#f4f4f2;--bg2:#fff;--bg3:#ebebe8;--line:#d4d4d0;--text:#111113;--muted:#5c5c62;--faint:#8a8a90;--cta-bg:#111113;--cta-fg:#fff;--danger:#d92d20;--staff:#333338;--note:#111113;--kb-white:#fff;--kb-white-fg:#111113;--kb-on:#111113}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:SF Pro Text,PingFang SC,Hiragino Sans GB,Microsoft YaHei,system-ui,sans-serif;font-size:15px;line-height:1.65}button,input{font:inherit}button,.btn,.day-tab,.piece-toggle,.done,.check-row,.wkey,.staff-svg .hit,.quiz-item summary,summary{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}.staff-svg .hit{touch-action:manipulation}.wkey,.piano{touch-action:none}input,textarea,select{font-size:16px}.home-panel,.day-panel,.day-nav,footer,.hero,.me-box,.block,.intro-grid,.illus-grid,.teach-grid,.diagram{max-width:100%}.illus-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.illus-card img,.diagram img,.photo-fig,.staff-wrap{max-width:100%}.staff-svg{max-width:100%;height:auto}.btn:hover{border-color:var(--text)}.prog-wrap{margin-top:18px}.prog-label{color:var(--muted);justify-content:space-between;margin-bottom:6px;font-size:12px;display:flex}.prog-track{background:var(--bg3);border:1px solid var(--line);height:4px}.prog-bar{background:var(--cta-bg);width:0;height:100%;transition:width .2s}.day-head{border-bottom:1px solid var(--line);margin-bottom:16px;padding:16px 0 18px}.day-kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-size:11px}.day-head h2{margin-bottom:8px;font-size:22px;font-weight:700}.day-goal{color:var(--muted);font-size:14px}.day-meta{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.chip{color:var(--muted);border:1px solid var(--line);background:var(--bg2);padding:4px 8px;font-size:11px}.block{border:1px solid var(--line);background:var(--bg2);margin:12px 0}.block-h{letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--line);background:var(--bg3);justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;font-size:12px;font-weight:700;display:flex}.block-h .muted{letter-spacing:0;text-transform:none;color:var(--faint);font-weight:500}.block>ul,.know-list{padding:12px 14px 14px 32px}.block>ul li,.know-list li{margin:6px 0;font-size:14px}.tip-inline{color:var(--muted);padding:0 14px 14px;font-size:13px}.teach-grid{background:var(--line);gap:1px;display:grid}.teach-card{background:var(--bg2);padding:14px}.teach-card h3{margin-bottom:6px;font-size:14px}.teach-card p{color:var(--muted);margin:0;font-size:13px}.speak .speak-p{margin:0;padding:14px;font-size:14px}.try-list{margin:0;padding:0;list-style:none}.try-list li{border-bottom:1px solid var(--line);grid-template-columns:28px 1fr;align-items:start;gap:10px;padding:12px 14px;font-size:13px;display:grid}.try-list li:last-child{border-bottom:0}.step-n{color:var(--muted);padding-top:2px;font-size:12px;font-weight:700}.quiz-list{counter-reset:exercise;padding:8px 0}.quiz-item{counter-increment:exercise;border-bottom:1px solid var(--line);padding:0}.quiz-item summary{cursor:pointer;padding:12px 14px;font-size:13px;font-weight:600;list-style:none}.quiz-item summary::-webkit-details-marker{display:none}.quiz-item summary:before{content:counter(exercise) ". ";color:var(--muted);font-weight:700}.quiz-item[open] summary{border-bottom:1px solid var(--line)}.quiz-item p{color:var(--muted);margin:0;padding:12px 14px 14px;font-size:13px}.quiz-item p:before{content:"答：";color:var(--text);font-weight:600}.piece{border-bottom:1px solid var(--line)}.piece:last-child{border-bottom:0}.piece-hd{align-items:stretch;display:flex}.done{border-right:1px solid var(--line);color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;min-width:72px;padding:0 12px;font-size:11px;display:flex}.done input{width:16px;height:16px}.piece-toggle{text-align:left;color:inherit;cursor:pointer;background:0 0;border:0;flex:1;grid-template-columns:36px 1fr auto 16px;align-items:center;gap:10px;padding:12px;display:grid}.piece.open .piece-toggle{border-bottom:1px solid var(--line)}.pn{font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.ptitle strong{font-size:14px;display:block}.ptitle em{color:var(--muted);font-size:11px;font-style:normal}.pmeta{flex-wrap:wrap;justify-content:flex-end;gap:4px;display:flex}.tag,.meter{border:1px solid var(--line);color:var(--muted);padding:2px 6px;font-size:10px}.meter{color:var(--text)}.chev{color:var(--muted);transition:transform .15s}.piece.open .chev{transform:rotate(180deg)}.piece-bd{background:var(--bg);padding:12px 14px 16px}.piece.done-yes{outline:1px solid var(--line)}[data-theme=dark] .piece.done-yes{box-shadow:inset 3px 0 #fff}[data-theme=light] .piece.done-yes{box-shadow:inset 3px 0 #111}.teacher-line{color:var(--text);margin:0 0 10px;font-size:13px}.howto{background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;margin:0 0 12px;display:grid}.howto>div{background:var(--bg2);padding:10px 12px}.howto h4{margin-bottom:4px;font-size:12px}.howto p{color:var(--muted);margin:0;font-size:12px}.score-block{border:1px solid var(--line);background:var(--bg2);margin:10px 0;padding:10px}.score-block.hand-rh{box-shadow:inset 3px 0 0 var(--text)}.score-block.hand-lh{box-shadow:inset 3px 0 0 var(--muted)}.score-label{color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:11px;display:flex}.staff-wrap{background:var(--bg);border:1px solid var(--line);padding:8px 4px;overflow-x:auto}.staff-svg{display:block}.staff-svg .hit{cursor:pointer}.staff-svg .hit:hover .nh{stroke:var(--cta-bg);stroke-width:2px}.jianpu{color:var(--muted);margin:8px 0;font-size:13px}.jianpu summary{cursor:pointer;color:var(--text);font-size:12px;font-weight:600}.legend{color:var(--faint);margin:8px 0 0;font-size:12px}.pass-list{padding:8px 14px 4px}.check-row{border-bottom:1px solid var(--line);cursor:pointer;align-items:center;gap:10px;padding:8px 0;font-size:13px;display:flex}.check-row:last-child{border-bottom:0}.check-row input{margin-top:2px}.day-clear{border:1px solid var(--line);background:var(--bg3);margin:0 14px 14px;padding:12px}.day-nav-btns{flex-wrap:wrap;justify-content:flex-end;gap:8px;margin:16px 0;display:flex}:root{--kb-space:56px}body.kb-open{--kb-space:200px}.kb-dock{z-index:70;background:var(--bg2);border:1px solid var(--line);width:min(960px,100%);padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px));border-bottom:0;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -8px 24px #0000002e}.kb-dock.collapsed{padding:6px 12px}.kb-dock.collapsed .piano{display:none}.kb-dock .row{justify-content:space-between;align-items:center;gap:8px;margin-bottom:0;display:flex}.kb-dock:not(.collapsed) .row{margin-bottom:8px}.kb-dock .hint{color:var(--muted);font-size:12px;font-weight:600}.kb-dock .hint .hz{color:var(--faint);margin-left:6px;font-size:10px;font-weight:500;display:none}.piano{-webkit-user-select:none;user-select:none;justify-content:center;gap:2px;height:84px;display:flex;position:relative}.wkey{background:var(--kb-white);width:34px;height:84px;color:var(--kb-white-fg);border:1px solid var(--line);cursor:pointer;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:6px;font-size:9px;font-weight:700;display:flex}.wkey .fn{color:var(--faint);font-size:8px;font-weight:500}.wkey.on{background:var(--kb-on);color:var(--cta-fg);outline:2px solid var(--text)}[data-theme=light] .wkey.on{color:#fff;background:#111}.wkey.midc{outline:1px solid var(--text)}.score-block,.piece-bd{scroll-margin-bottom:var(--kb-space)}.illus-card img,.diagram img,.photo-fig{border:1px solid var(--line);background:var(--bg);object-fit:cover;width:100%;height:auto;max-height:280px;display:block}.diagram img{object-fit:contain;background:var(--bg2);max-height:220px}.photo-cap{color:var(--faint);margin-top:6px;font-size:10px}.illus-card svg{display:none}.diagram{border:1px solid var(--line);background:var(--bg);margin:12px 14px;padding:12px;overflow-x:auto}.diagram svg{max-width:100%;height:auto;display:block}.diagram-cap{color:var(--muted);margin:8px 14px 14px;font-size:11px}.intro-grid{background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;margin:16px 0;display:grid}.intro-grid>div{background:var(--bg2);padding:14px}.intro-grid h3{margin-bottom:6px;font-size:13px}.intro-grid p{color:var(--muted);margin:0;font-size:12px}.pitch-table{border-collapse:collapse;width:100%;margin:8px 0;font-size:12px}.pitch-table th,.pitch-table td{border:1px solid var(--line);text-align:left;padding:6px 8px}.pitch-table th{background:var(--bg3)}.start-cta{flex-wrap:wrap;gap:8px;margin:16px 0;display:flex}.staff-svg .hit.active .nh{stroke:var(--cta-bg);stroke-width:2.5px;filter:drop-shadow(0 0 2px var(--text))}.staff-svg .hit.playing .nh{stroke:var(--cta-bg);stroke-width:3px}.staff-svg .solf{fill:var(--text);font-size:9px;font-weight:700}.staff-svg .pname{fill:var(--faint);font-size:8px}html[data-solf=off] .staff-svg .solf,html[data-solf=off] .solf-chip{display:none}.btn[data-solf-toggle][aria-pressed=false]{opacity:.72}.demo-bar{border:1px solid var(--line);background:var(--bg3);flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;display:flex}.demo-bar .demo-status{color:var(--muted);flex:1;min-width:140px;font-size:12px}.demo-bar .solf-chip{border:1px solid var(--line);background:var(--bg2);color:var(--text);padding:3px 8px;font-size:11px}.illus-grid{background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;margin:0;display:grid}.illus-card{background:var(--bg2);padding:12px}.illus-card h3{margin-bottom:8px;font-size:13px}.illus-card p{color:var(--muted);margin:8px 0 0;font-size:12px}.illus-card svg.legacy{width:100%;height:auto;display:none}.speak .demo-inline{margin:0 14px 14px}.howto .btn{margin-top:4px}input[type=checkbox]{appearance:none;border:1px solid var(--line);background:var(--bg);cursor:pointer;vertical-align:middle;border-radius:0;flex-shrink:0;width:16px;height:16px;margin:0;position:relative}input[type=checkbox]:hover{border-color:var(--text)}input[type=checkbox]:checked{background:var(--cta-bg);border-color:var(--cta-bg)}input[type=checkbox]:checked:after{content:"";border:solid var(--cta-fg);border-width:0 2px 2px 0;width:5px;height:9px;position:absolute;top:1px;left:4px;transform:rotate(45deg)}.done input[type=checkbox],.check-row input[type=checkbox]{margin-top:1px}.done{accent-color:unset}.check-row input{accent-color:unset;margin-top:2px}footer{text-align:center;color:var(--muted);border-top:1px solid var(--line);margin-top:24px;padding:24px 0;font-size:11px}.home-panel{padding:8px 0 16px}.me-box{border:1px solid var(--line);background:var(--bg2);margin:16px 0;padding:16px}.me-box h2{margin-bottom:8px;font-size:16px}.me-box p{color:var(--muted);margin:0 0 8px;font-size:13px}.me-box p:last-child{margin:0}@media (width<=720px){body{font-size:16px}.wrap{padding:0 12px var(--kb-space,64px)}body.kb-open{--kb-space:260px}:root{--kb-space:72px}.day-head h2{font-size:20px}.day-goal,.block>ul li,.know-list li,.speak .speak-p,.teacher-line,.teach-card h3{font-size:15px}.teach-card p,.howto p,.tip-inline,.jianpu,.demo-bar .demo-status{font-size:14px}.howto h4{font-size:13px}.howto{grid-template-columns:1fr}.howto>div{padding:12px 14px}.teach-grid{grid-template-columns:1fr}.piece-hd{flex-wrap:nowrap}.done{min-width:64px;min-height:52px;padding:0 10px;font-size:12px}.done input[type=checkbox],.check-row input[type=checkbox]{width:22px;height:22px}input[type=checkbox]:checked:after{border-width:0 2.5px 2.5px 0;width:6px;height:11px;top:2px;left:6px}.piece-toggle{grid-template-rows:auto auto;grid-template-columns:32px 1fr;gap:6px 10px;min-height:52px;padding:14px 12px}.piece-toggle .pmeta{grid-column:2;justify-content:flex-start}.piece-toggle .chev{display:none}.ptitle strong{font-size:15px}.check-row{align-items:center;min-height:44px;padding:12px 0;font-size:15px}.score-block{margin:12px 0;padding:12px 8px}.score-label{margin-bottom:10px;font-size:12px}.staff-wrap{-webkit-overflow-scrolling:touch;padding:10px 6px;overflow-x:auto}.staff-svg{width:100%;max-width:100%;height:auto;min-height:72px}.staff-svg .solf{font-size:10px}.staff-svg .pname{font-size:9px}.kb-dock{width:100%;max-width:none;padding:8px 10px calc(12px + env(safe-area-inset-bottom,0px));border-left:0;border-right:0;left:0;right:0;transform:none}.kb-dock.collapsed{padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px))}.kb-dock .row{align-items:center;gap:10px}.kb-dock .hint{flex:1;min-width:0;font-size:12px;line-height:1.35}.kb-dock #collapseKb{flex-shrink:0}.piano{justify-content:space-between;gap:3px;width:100%;height:108px}.wkey{flex:1 1 0;width:auto;min-width:0;height:108px;padding-bottom:8px;font-size:10px}.wkey .fn,.wkey.midc{font-size:9px}.illus-grid,.intro-grid{grid-template-columns:1fr}.block-h{padding:12px 14px;font-size:12px}.quiz-item p{padding:12px 14px 14px;font-size:14px}footer{padding:20px 0 calc(20px + env(safe-area-inset-bottom,0px))}}a{color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[role=checkbox]:focus-visible,.staff-svg .hit:focus-visible{outline:2px solid var(--text);outline-offset:3px}.piece-heading{min-width:0;font:inherit;flex:1;display:flex}.piece-toggle{width:100%}.checkbox{appearance:none;border:1px solid var(--muted);background:var(--bg2);width:16px;min-width:16px;height:16px;color:var(--cta-fg);cursor:pointer;vertical-align:middle;border-radius:0;flex-shrink:0;justify-content:center;align-items:center;margin:0;padding:0;display:inline-flex}.checkbox:hover:not([data-disabled]){border-color:var(--text)}.checkbox[data-checked]{background:var(--cta-bg);border-color:var(--cta-bg)}.checkbox-indicator{font-size:12px;font-weight:700;line-height:1}.detail-trigger{appearance:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:0;width:100%}.quiz-item .detail-trigger{padding:12px 14px;font-size:13px;font-weight:600}.quiz-item .detail-trigger:before{content:counter(exercise) ". ";color:var(--muted);font-weight:700}.quiz-item .detail-trigger[aria-expanded=true]{border-bottom:1px solid var(--line)}.jianpu .detail-trigger{font-size:12px;font-weight:600}.jianpu .detail-trigger:before{content:"▸ ";color:var(--muted)}.jianpu .detail-trigger[aria-expanded=true]:before{content:"▾ "}.piece-bd,.quiz-item [role=region]{overflow:hidden}.dialog-backdrop{z-index:100;background:#000000a6;position:fixed;inset:0}.dialog-popup{background:var(--bg2);border:1px solid var(--line);z-index:101;border-radius:0;width:min(420px,100% - 32px);padding:24px;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.dialog-popup h2{margin-bottom:12px;font-size:18px}.dialog-popup p{color:var(--muted);font-size:13px}.dialog-actions{justify-content:flex-end;gap:8px;margin-top:24px;display:flex}.empty-state{padding:56px 0}.empty-state h1{margin-bottom:12px;font-size:28px}.empty-state p{color:var(--muted);margin-bottom:24px}.empty-state .btn{text-decoration:none}.storage-warning{border:1px solid var(--danger);padding:10px;font-size:12px}.prog-bar{display:block}@media (width<=600px){.piece-toggle{gap:6px}.done{min-width:64px;padding:0 8px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}@media (width<=720px){.checkbox{width:22px;min-width:22px;height:22px}.checkbox-indicator{font-size:16px}}.piece-root:not(:last-child) .piece{border-bottom:1px solid var(--line)}.wrap{max-width:1240px;padding:0 32px var(--kb-space,64px);margin:0 auto}.topbar{z-index:60;background:var(--bg);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;min-height:76px;display:flex;position:sticky;top:0}.brand{letter-spacing:.06em;align-items:center;gap:12px;font-size:16px;font-weight:700;text-decoration:none;display:flex}.top-actions{align-items:center;gap:8px;display:flex}.selector-label{color:var(--muted);font-size:11px}.book-positioner{z-index:90}.book-popup{border:1px solid var(--line);background:var(--bg2);min-width:248px;max-width:calc(100vw - 32px);padding:8px;box-shadow:0 12px 32px #0003}.menu-heading{color:var(--muted);padding:8px 10px 12px;font-size:11px;font-weight:500}.book-option{justify-content:space-between;align-items:center;gap:32px;padding:11px 10px;font-size:13px;text-decoration:none;display:flex}.book-option>span:last-child{color:var(--muted);font-size:11px}.book-option:hover{background:var(--bg3)}.book-option.selected{background:var(--cta-bg);color:var(--cta-fg)}.book-option.selected>span:last-child{color:inherit;opacity:.65}.learning-layout{grid-template-columns:236px minmax(0,1fr);gap:48px;display:grid}.course-sidebar{align-self:start;padding-top:32px;position:sticky;top:100px}.sidebar-caption,.eyebrow{letter-spacing:.15em;color:var(--muted);font-size:10px}.sidebar-heading h2{align-items:baseline;gap:12px;margin:6px 0 24px;font-size:20px;display:flex}.sidebar-heading h2 span{color:var(--muted);font-size:11px;font-weight:400}.contents-toggle{display:none}.course-nav{display:grid}.overview-link{justify-content:space-between;margin-bottom:8px;padding:12px;font-size:13px;text-decoration:none;display:flex}.lesson-link{border-left:2px solid #0000;gap:12px;padding:14px 12px;text-decoration:none;display:flex;position:relative}.lesson-link:hover,.overview-link:hover{background:var(--bg2)}.lesson-link.active,.overview-link.active{background:var(--bg2);border-left:2px solid var(--text)}.lesson-number{color:var(--faint);font-variant-numeric:tabular-nums;flex-shrink:0;padding-top:2px;font-size:11px}.lesson-label{flex:1;min-width:0}.lesson-label strong{font-size:12px;font-weight:500;line-height:1.7;display:block}.lesson-label small{color:var(--muted);margin-top:4px;font-size:10px;display:block}.lesson-check{font-size:12px}.sidebar-progress{color:var(--muted);grid-template-columns:1fr auto;gap:8px;margin:32px 12px 0;font-size:11px;display:grid}.sidebar-progress strong{color:var(--text);font-weight:500}.sidebar-progress-track{background:var(--line);grid-column:1/-1;height:2px}.sidebar-progress-track span{background:var(--text);height:100%;display:block}.sidebar-progress small{font-size:10px}.learning-main{min-width:0;padding-top:44px}.hero{padding:0 0 36px}.hero h1{letter-spacing:-.035em;margin:20px 0 18px;font-size:clamp(30px,3.5vw,44px);font-weight:600;line-height:1.3}.hero p{color:var(--muted);max-width:39em;font-size:14px;line-height:1.9}.overview-bottom{justify-content:space-between;align-items:center;gap:20px;margin:28px 0 24px;display:flex}.overview-count{font-variant-numeric:tabular-nums;font-size:22px}.overview-count span{color:var(--muted);font-size:11px}.prog-label{font-size:11px}.prog-track{border:0;height:3px}.section-heading{margin-bottom:20px}.section-heading h2{letter-spacing:-.02em;margin:7px 0;font-size:21px;font-weight:600}.section-heading p{color:var(--muted);font-size:12px}.curriculum{padding:36px 0}.curriculum-list{border-top:1px solid var(--line)}.curriculum-row{border-bottom:1px solid var(--line);align-items:center;gap:22px;padding:18px 20px;text-decoration:none;display:flex}.curriculum-row:hover{background:var(--bg2)}.curriculum-number{font-variant-numeric:tabular-nums;color:var(--faint);min-width:28px;font-size:18px}.curriculum-title{flex:1;min-width:0}.curriculum-title strong{font-size:14px;font-weight:500;display:block}.curriculum-title small{color:var(--muted);margin-top:4px;font-size:11px;display:block}.curriculum-state{color:var(--muted);flex-shrink:0;justify-content:center;align-items:center;gap:8px;font-size:12px;display:inline-flex}.home-panel{padding-top:20px}.day-panel{padding:0 0 24px}.day-head{margin-bottom:28px;padding:0 0 28px}.lesson-breadcrumb{color:var(--muted);gap:12px;margin-bottom:28px;font-size:11px;display:flex}.lesson-breadcrumb a{text-decoration:none}.lesson-breadcrumb a:hover{color:var(--text)}.day-kicker{margin-bottom:10px;font-size:10px}.day-head h1{letter-spacing:-.035em;margin-bottom:14px;font-size:clamp(25px,3vw,34px);font-weight:600;line-height:1.4}.day-goal{font-size:14px;line-height:1.8}.day-meta{gap:16px;margin-top:18px}.day-meta .chip{background:0 0;border:0;padding:0;font-size:11px}.day-meta .chip+.chip{border-left:1px solid var(--line);padding-left:16px}.storage-warning{margin-top:12px}.empty-state{max-width:640px;margin:50px auto;padding:48px 0}.empty-state .eyebrow{margin-bottom:20px}footer{text-align:left;font-size:10px}@media (width>=721px) and (width<=1050px){.wrap{padding-inline:24px}.learning-layout{grid-template-columns:208px minmax(0,1fr);gap:28px}.lesson-link{gap:9px;padding-inline:8px}}@media (width<=720px){.wrap{padding:0 20px var(--kb-space,72px)}.topbar{flex-wrap:nowrap;align-items:center;gap:8px;min-height:68px;padding:10px 0}.brand{white-space:nowrap;gap:8px;font-size:13px}.top-actions{flex-wrap:nowrap;gap:6px;width:auto;display:flex}.top-actions .btn{width:auto}.selector-label{display:none}.learning-layout{display:block}.course-sidebar{border-bottom:1px solid var(--line);padding-top:16px;position:static}.contents-toggle{appearance:none;width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:0;justify-content:space-between;align-items:center;gap:16px;padding:8px 0 16px;display:flex}.contents-toggle .sidebar-caption{margin-bottom:3px;font-size:10px;display:block}.contents-toggle strong{font-size:12px;font-weight:500}.contents-toggle>span:last-child{color:var(--muted);font-size:22px}.sidebar-body{padding-bottom:16px;display:none}.contents-open .sidebar-body{display:block}.sidebar-heading{display:none}.lesson-label strong{font-size:13px}.lesson-label small{font-size:11px}.lesson-link{padding:12px}.sidebar-progress{margin-top:20px}.learning-main{padding-top:30px}.hero{padding-bottom:28px}.hero h1{margin:16px 0;font-size:32px}.hero p{font-size:13px}.overview-bottom{gap:12px;margin:24px 0}.overview-count{white-space:nowrap;font-size:20px}.overview-count span{font-size:10px}.curriculum{padding:28px 0}.section-heading h2{font-size:20px}.curriculum-row{gap:14px;padding:16px}.curriculum-number{min-width:23px;font-size:17px}.curriculum-title strong{font-size:13px}.curriculum-title small{font-size:10px}.curriculum-state{white-space:nowrap;font-size:11px}.day-head{margin-bottom:20px;padding-bottom:24px}.lesson-breadcrumb{margin-bottom:20px}.day-head h1{font-size:25px}.day-goal{font-size:13px}.day-meta{gap:10px}.day-meta .chip{font-size:10px}.day-meta .chip+.chip{padding-left:10px}.empty-state{margin:24px 0;padding:24px 0}.empty-state h1{font-size:25px}.empty-state p{font-size:14px}}.brand .brand-icon{color:inherit;margin:0;font-size:26px}.checkbox-indicator{justify-content:center;align-items:center;display:inline-flex}.checkbox-indicator .ui-icon{font-size:14px}.detail-trigger{align-items:center;gap:8px;display:flex}.detail-chevron{margin-left:auto;font-size:16px}.detail-trigger[aria-expanded=true] .detail-chevron{transform:rotate(180deg)}.jianpu .detail-trigger:before,.jianpu .detail-trigger[aria-expanded=true]:before{content:none}.lesson-check{justify-content:center;align-items:center;display:inline-flex}@media (width<=720px){.brand .brand-icon{font-size:22px}.checkbox-indicator .ui-icon{font-size:18px}}.demo-bar .solf-chip{min-height:var(--control-height-sm);align-items:center;padding:0 12px;display:inline-flex}.staff-host{gap:20px;display:grid}:root{--panel-open-dur:.4s;--panel-close-dur:.35s;--panel-ease:cubic-bezier(.22, 1, .36, 1)}.learning-layout{transition:grid-template-columns var(--panel-open-dur) var(--panel-ease), gap var(--panel-open-dur) var(--panel-ease)}.sidebar-heading{justify-content:space-between;align-items:center;gap:8px;margin-bottom:20px;display:flex}.sidebar-heading h2{margin-bottom:0}.course-sidebar{min-width:0}.sidebar-reveal{opacity:0;filter:blur(2px);visibility:hidden;transition:grid-template-rows var(--panel-close-dur) var(--panel-ease), opacity var(--panel-close-dur) var(--panel-ease), transform var(--panel-close-dur) var(--panel-ease), filter var(--panel-close-dur) var(--panel-ease), visibility var(--panel-close-dur);grid-template-rows:0fr;display:grid;transform:translateY(-8px)}.sidebar-reveal[data-open=true]{opacity:1;filter:blur();visibility:visible;transition-duration:var(--panel-open-dur);grid-template-rows:1fr;transform:translateY(0)}.sidebar-reveal .sidebar-body{min-height:0;display:block;overflow:hidden}.day-panel{opacity:1;transition:opacity var(--panel-open-dur) var(--panel-ease), transform var(--panel-open-dur) var(--panel-ease);transform:translateY(0)}@starting-style{.day-panel{opacity:0;transform:translateY(8px)}}@media (width>=721px){.learning-layout.sidebar-collapsed{grid-template-columns:40px minmax(0,1fr);gap:24px}.sidebar-collapsed .sidebar-heading h2{display:none}.sidebar-collapsed .sidebar-reveal{pointer-events:none}}@media (width<=720px){.course-sidebar>.sidebar-heading{display:none}.sidebar-reveal .sidebar-body{padding-bottom:0}.sidebar-reveal[data-open=true]{margin-bottom:16px}}@media (width<=380px){.top-actions .settings-trigger{width:var(--control-height-md);padding-inline:0}.settings-trigger-label{display:none}.brand{letter-spacing:0}.book-selector{padding-inline:12px}}@media (prefers-reduced-motion:reduce){.learning-layout,.sidebar-reveal,.day-panel{transition:none}}.book-popup{transform-origin:var(--transform-origin);opacity:1;filter:blur();transition:opacity var(--panel-open-dur) var(--panel-ease), transform var(--panel-open-dur) var(--panel-ease), filter var(--panel-open-dur) var(--panel-ease);transform:translateY(0)scale(1)}.book-popup[data-starting-style],.book-popup[data-ending-style]{opacity:0;filter:blur(2px);transform:translateY(-6px)scale(.98)}.book-popup[data-ending-style]{transition-duration:var(--panel-close-dur)}.book-selector .ui-icon{transition:transform var(--panel-close-dur) var(--panel-ease)}.book-selector[aria-expanded=true] .ui-icon{transform:rotate(180deg)}@media (prefers-reduced-motion:reduce){.book-popup,.book-selector .ui-icon{transition:none}}.piece-hd .done{flex-shrink:0;justify-content:center;width:44px;min-width:44px;padding:0}.completion-label{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.piece-heading{grid-template-columns:36px minmax(0,1fr) auto 36px;align-items:center;gap:10px;padding:12px;display:grid;position:relative}.piece-heading .piece-toggle{border-bottom:0;justify-content:center;align-items:center;min-height:36px;padding:0;display:flex}.piece-heading .piece-toggle:before{content:"";cursor:pointer;position:absolute;inset:0}.piece-title-group{align-items:center;gap:10px;min-width:0;display:flex}.piece-title-group .playback-button{z-index:1;flex-shrink:0;position:relative}.playback-icon{flex-shrink:0;place-items:center;width:20px;height:20px;display:inline-grid;position:relative}.playback-icon>span{grid-area:1/1;display:inline-flex}.piece-title-group .ptitle{min-width:0}@media (width<=720px){.piece-heading{grid-template-columns:24px minmax(0,1fr) 36px;gap:6px 8px;padding:14px 12px}.piece-heading .pmeta{grid-area:2/2;justify-content:flex-start}.piece-heading .piece-toggle{grid-area:1/3}.piece-heading .piece-toggle .chev{display:inline-block}}.completion-toggle{cursor:pointer;white-space:nowrap;align-items:center;gap:8px;font-weight:400;display:inline-flex;position:relative}.check-row,.piece-hd .done{position:relative}.check-row>input[type=checkbox],.piece-hd .done>input[type=checkbox],.completion-toggle>input[type=checkbox]{position:absolute!important;top:50%!important;left:0!important}.lesson-link[data-complete]{isolation:isolate;--completion-ink:#527561;--completion-fill:#e6ede7;--completion-rule:#b4c6b8}html[data-theme=dark] .lesson-link[data-complete]{--completion-ink:#a3c1ac;--completion-fill:#263b30;--completion-rule:#526e5d}.lesson-completion-badge{z-index:-1;width:40px;height:50px;color:var(--completion-ink);opacity:.56;pointer-events:none;position:absolute;top:50%;right:8px;transform:rotate(340deg)translateY(-50%)}.lesson-completion-badge svg{width:100%;height:100%;display:block}.completion-ribbon{fill:var(--completion-rule);stroke:currentColor;stroke-width:1px;stroke-linejoin:round}.completion-medal{fill:var(--completion-fill);stroke:currentColor;stroke-width:1px;stroke-linejoin:round}.completion-medal-ring{stroke:currentColor;stroke-width:.9px}.completion-laurel{fill:none;stroke:currentColor;stroke-width:.65px;stroke-linecap:round;stroke-linejoin:round}.completion-medal-star{fill:none;stroke:currentColor;stroke-width:1.1px;stroke-linejoin:round}.sidebar-reveal[data-open=true] .sidebar-body{overflow:visible}.grand-staff-system{margin-bottom:24px;position:relative}.grand-staff-system:before{content:"";border:solid var(--staff);pointer-events:none;border-width:1px 0 1px 2px;border-radius:8px 0 0 8px;width:6px;position:absolute;top:60px;bottom:50px;left:0}.grand-staff-hand{color:var(--muted);margin-left:8px;font-size:12px;display:block}.grand-staff .staff-host{min-width:0}.source-score img{background:#fff;width:100%;height:auto;margin-top:16px;display:block}.source-score .detail-trigger{justify-content:flex-start;gap:4px;width:100%;font-size:12px;font-weight:400}.source-score .detail-chevron{margin-left:0}.lesson-block>p{margin:0;padding:16px}.falling-notes{pointer-events:none;z-index:2;width:100%;height:100%;position:fixed;inset:0}.wrap{z-index:1;position:relative}:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--type-caption:12px;--type-control:14px;--type-body:16px;--type-heading:24px;--type-display:48px;--control-height-sm:32px;--control-height-md:40px;--control-height-lg:48px;--control-padding-sm:12px;--control-padding-md:16px;--control-padding-lg:20px;--control-font-sm:12px;--control-font-md:14px;--control-font-lg:16px;--control-icon-sm:16px;--control-icon-md:18px;--control-icon-lg:20px;--control-gap-sm:6px;--control-gap-md:8px;--control-gap-lg:10px;--radius-control:0;--border-control:1px;--focus-width:2px;--focus-offset:3px}.btn{--control-height:var(--control-height-md);--control-padding:var(--control-padding-md);--control-font:var(--control-font-md);--control-icon:var(--control-icon-md);--control-gap:var(--control-gap-md);appearance:none;box-sizing:border-box;min-height:var(--control-height);padding:0 var(--control-padding);justify-content:center;align-items:center;gap:var(--control-gap);border:var(--border-control) solid var(--line);border-radius:var(--radius-control);background:var(--bg2);color:var(--text);font-size:var(--control-font);white-space:nowrap;cursor:pointer;flex-shrink:0;font-weight:500;line-height:1;text-decoration:none;display:inline-flex}.btn[data-size=sm]{--control-height:var(--control-height-sm);--control-padding:var(--control-padding-sm);--control-font:var(--control-font-sm);--control-icon:var(--control-icon-sm);--control-gap:var(--control-gap-sm)}.btn[data-size=lg]{--control-height:var(--control-height-lg);--control-padding:var(--control-padding-lg);--control-font:var(--control-font-lg);--control-icon:var(--control-icon-lg);--control-gap:var(--control-gap-lg)}.btn>.ui-icon{font-size:var(--control-icon)}.btn[data-icon-only]{width:var(--control-height);padding:0}.btn[data-variant=primary]{background:var(--cta-bg);color:var(--cta-fg);border-color:var(--cta-bg);font-weight:600}.btn[data-variant=ghost]{background:0 0}.btn[data-variant=danger]{color:var(--danger);border-color:var(--danger);background:0 0}.btn:hover:not(:disabled):not([aria-disabled=true]){border-color:var(--text)}.btn[data-variant=danger]:hover{border-color:var(--danger);background:var(--bg3)}.btn:active:not(:disabled):not([aria-disabled=true]){opacity:.8}.btn:focus-visible{outline:var(--focus-width) solid var(--text);outline-offset:var(--focus-offset)}.btn:disabled,.btn[aria-disabled=true]{opacity:.4;cursor:not-allowed}body{font-size:var(--type-body)}.hero h1{font-size:var(--type-display)}.section-heading h2{font-size:var(--type-heading)}.curriculum-row{padding-inline:var(--space-5)}.curriculum-title strong{font-size:var(--type-body)}.curriculum-title small,.lesson-label small{font-size:var(--type-caption)}.lesson-label strong{font-size:var(--type-control)}.top-actions{gap:var(--space-2)}@media (width<=720px){:root{--type-display:32px}.curriculum-row{padding-inline:var(--space-4)}.curriculum-title strong{font-size:var(--type-control)}}