:root{--paper:#f7f8f4;--white:#fff;--ink:#292d33;--muted:#85878d;--line:#e8eae6;--purple:#7560d3;--purple-dark:#624abe;--lavender:#eeebfa;--lime:#e7f2b8;--font:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:14px;-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #aa96ed;outline-offset:4px}a{color:inherit;text-decoration:none}button{border:0}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.sidebar{position:fixed;inset:0 auto 0 0;width:216px;background:#fdfefb;border-right:1px solid var(--line);padding:36px 22px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:11px;margin-left:9px;font-size:25px;font-weight:750;letter-spacing:3px}.brand-icon{width:40px;height:44px;border-radius:13px;background:var(--purple);display:grid;place-items:center;color:white;transform:rotate(-5deg)}.brand-icon svg{width:25px;height:25px}.brand-sub{display:block;font-size:8px;font-weight:650;letter-spacing:2.5px;margin-top:2px;color:#929297}.sidebar-label{font-size:10px;letter-spacing:1.8px;color:#a3a4a5;margin:55px 14px 17px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;border-radius:10px;padding:14px;margin-bottom:8px;color:#7c7e84;background:none;font-weight:550;font-size:13px;white-space:nowrap}.nav-item.active{background:var(--lavender);color:var(--purple-dark)}.nav-item:hover{background:#f1f0f6}.nav-item svg{width:18px;height:18px}.nav-dot{width:5px;height:5px;border-radius:50%;background:currentColor;margin-left:auto}.sidebar-bottom{margin-top:auto;padding:60px 12px 0}.little-notes{font-family:Georgia,serif;font-size:26px;color:#bcb4da;letter-spacing:6px}.little-notes span{position:relative;top:-9px}.sidebar-bottom h3{font-size:14px;margin:17px 0 10px;font-weight:550}.sidebar-bottom p{font-size:11px;color:#96979a;line-height:1.9}.sidebar-foot{font-size:9px;border-top:1px solid var(--line);padding-top:20px;margin-top:30px;white-space:nowrap;color:#96979a;display:flex;align-items:center;gap:7px}.status-dot{width:5px;height:5px;border-radius:50%;background:#a1b78c}
.workspace{margin-left:216px}.topbar{height:78px;border-bottom:1px solid var(--line);padding:0 44px;display:flex;align-items:center;justify-content:space-between;background:#fcfdf9}.breadcrumb{font-size:11px;color:#9b9c9f}.breadcrumb span{margin:0 13px;color:#cbccc8}.breadcrumb strong{font-weight:500;color:#555960}.topbar-right{display:flex;align-items:center;gap:24px}.headphone-tip{display:flex;align-items:center;gap:8px;font-size:10px;color:#92949a}.headphone-tip svg{width:15px;height:15px}.profile{display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:#eae7f2;color:#8572b1;font-size:21px}main{padding:40px 44px 0;max-width:1480px;margin:auto}.page-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:9px;letter-spacing:2px;color:#919584;display:flex;align-items:center;gap:7px;font-weight:600}.eyebrow>span{width:5px;height:5px;background:#a5b98b;border-radius:50%}h1{font-size:34px;letter-spacing:1px;font-weight:650;margin:13px 0 12px}h1 em{font-style:normal;color:var(--purple)}.page-intro p{color:#93959a;font-size:12px;letter-spacing:.4px;margin:0}.intro-badge{display:flex;gap:8px;align-items:center;border:1px solid #e6e7df;border-radius:22px;padding:10px 14px;color:#898b81;font-size:10px}.intro-badge svg{width:15px;height:15px;color:#a1ac7e}h2,h3,p{margin-top:0}h2{font-size:19px;letter-spacing:.3px;font-weight:650}h3{font-size:14px}
.explore-grid{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:24px}.card{background:white;border:1px solid var(--line);border-radius:17px}.scale-card{padding:26px 28px 15px;min-width:0}.card-heading{display:flex;justify-content:space-between;align-items:center}.overline{font-size:8px;font-weight:650;letter-spacing:1.7px;color:#a2a3a8;margin-bottom:9px}.card-heading h2{margin:0}.tag{background:#f3f3f8;color:#88819f;font-size:9px;border-radius:6px;padding:7px 9px}.section-description{font-size:11px;color:#92949a;margin:13px 0 0}.scale-landscape{height:205px;margin-top:22px;position:relative;background:linear-gradient(180deg,#fbfcf9,#f5f7ee);border-radius:11px;overflow:hidden}.scale-gridlines{position:absolute;inset:35px 15px 25px;background:repeating-linear-gradient(0deg,transparent 0px,transparent 31px,#e9ede2 32px,#e9ede2 33px)}.landscape-label{font-size:8px;color:#9fa78d;position:absolute;left:12px;top:12px}.scale-path{position:absolute;width:100%;height:140px;top:37px;color:#c8cfb8;stroke-dasharray:3 5;stroke-width:1}.note-steps{position:absolute;inset:28px 0 31px;display:flex;align-items:flex-start;padding:0 6px}.note-step{position:relative;flex:1;min-width:0;display:flex;align-items:center;flex-direction:column;background:transparent;padding:0;top:calc((7 - var(--i)) * 15px)}.step-bubble{display:grid;place-items:center;width:39px;height:39px;position:relative;border-radius:50%;background:#fff;color:#777c6f;border:1px solid #dde3d4;box-shadow:0 3px 4px #333e1011;font-size:13px;transition:transform .16s,background .16s}.note-step.active .step-bubble{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 4px 12px #7660d343;transform:translateY(-3px)}.note-step:hover .step-bubble{transform:translateY(-4px)}.step-letter{font-size:9px;color:#9da591;margin-top:6px}.landscape-bottom{position:absolute;bottom:12px;left:15px;right:15px;font-size:8px;letter-spacing:1px;display:flex;justify-content:space-between;color:#a7ac9c}
.playback-bar{display:flex;align-items:center;justify-content:space-between;margin:19px 0 25px;gap:8px}.playback-buttons{display:flex;gap:8px}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;font-weight:550;font-size:11px;border-radius:8px;transition:transform .15s,background .15s}.button:hover{transform:translateY(-1px)}.button svg{width:15px;height:15px}.button.primary{background:var(--purple);color:white}.button.primary:hover{background:var(--purple-dark)}.button.secondary{background:#f6f5f9;color:#898393;border:1px solid #ece9f0}.button.dark{background:#30352c;color:white}.speed-control{font-size:10px;color:#a2a3a6;display:flex;align-items:center;gap:9px}select{background:transparent;color:#787983;border:0;font-size:10px;cursor:pointer;padding:5px 2px}.keyboard-label{display:flex;justify-content:space-between;font-size:10px;color:#80828a;margin-bottom:11px}.keyboard-hint{color:#b0b0b8;font-size:9px}.piano{position:relative;display:flex;height:133px;border:1px solid #dfe0e6;border-radius:8px;overflow:hidden;box-shadow:0 4px 0 #ededef;background:#f4f4f7;gap:2px;padding:0 1px 2px}.white-key{position:relative;flex:1;min-width:0;background:linear-gradient(#fff,#fff 80%,#fafafa);border:1px solid #e9e9ed;border-top:0;border-radius:0 0 6px 6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:9px;gap:3px;color:#92939b;transition:background .15s}.white-key span:first-child{font-size:12px;font-weight:550}.white-key .key-letter{font-size:8px;color:#a4a4ac}.white-key .key-shortcut{font-size:8px;color:#b7b7c0;margin-top:6px}.white-key.active{background:linear-gradient(#eee9ff,#e8e1fc);border-color:#c2b6e6;color:var(--purple-dark)}.white-key.active .key-letter,.white-key.active .key-shortcut{color:#a591cd}.black-key{position:absolute;width:7.7%;height:76px;top:0;z-index:2;background:linear-gradient(90deg,#34343f,#42424d 45%,#303039);border-radius:0 0 4px 4px;box-shadow:0 3px 3px #0002;transform:translateX(-50%);border:1px solid #292934}.black-key:active{background:#7560a8}.note-readout{margin:17px 0 13px;text-align:center;font-size:10px;color:#9b9aa6;min-height:16px}.note-readout strong{font-size:11px;color:var(--purple);margin-right:7px;font-weight:600}.readout-separator{color:#d7d2e0;margin:0 8px}.audio-settings{border-top:1px solid #f1f0f2;padding-top:13px;display:flex;justify-content:space-between;align-items:center;color:#a0a0a7;font-size:9px}.audio-settings label{display:flex;align-items:center;gap:8px}.audio-settings svg{width:14px;height:14px}.audio-settings input{width:64px;height:3px;accent-color:#a498ca;cursor:pointer}.audio-settings select{font-size:9px}.right-rail{display:flex;flex-direction:column;gap:20px}.daily-card{border-radius:17px;background:var(--lime);padding:24px}.daily-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#828d5b;margin-bottom:18px}.daily-top svg{width:18px;height:18px}.daily-card h2{font-size:21px;margin:0 0 9px;letter-spacing:.7px}.daily-card p{font-size:10px;color:#8b946f;line-height:1.8}.daily-ring{width:123px;height:123px;margin:21px auto;background:conic-gradient(#7f9060 var(--progress,0%),#d6e3a7 0);border-radius:50%;display:grid;place-items:center;transform:rotate(-0deg)}.daily-ring>div{width:111px;height:111px;border-radius:50%;background:var(--lime);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:7px}.daily-ring strong{font-size:33px;font-weight:550;letter-spacing:-1.5px}.daily-ring strong span{font-size:15px;color:#a1ad7e;font-weight:400;letter-spacing:0}.daily-ring div>span{font-size:9px;color:#8e986d}.daily-card .button{width:100%;padding:13px;font-size:11px}.daily-card .button svg{margin-left:auto}.daily-note{display:block;text-align:center;color:#99a478;font-size:8px;margin-top:12px}.tip-card{position:relative;border:1px solid var(--line);border-radius:15px;background:#fdfefa;padding:22px 20px}.tip-icon{position:absolute;right:17px;top:20px;color:#aca58c}.tip-icon svg{width:17px;height:17px}.tip-card .overline{font-size:9px;letter-spacing:1px;color:#a4a291}.tip-card h3{font-size:14px;margin:13px 0 11px}.tip-card p{font-size:10px;line-height:2;color:#96978f;margin-bottom:15px}.tip-card b{font-weight:500;color:#777a6d}.text-button{display:inline-flex;align-items:center;gap:6px;color:var(--purple);background:none;padding:0;font-size:10px;line-height:1.8;text-align:left}.text-button svg{width:13px;height:13px}.text-button:hover{color:#4e3a9e;text-decoration:underline}
.path-section{margin-top:31px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-header h2{font-size:16px;margin:0}.section-header>span{font-size:10px;color:#a1a29f}.learning-path{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.path-card{display:flex;align-items:center;gap:13px;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 17px;transition:transform .2s,box-shadow .2s}.path-card:hover{transform:translateY(-3px);box-shadow:0 5px 20px #33333308}.path-icon{width:42px;height:46px;display:grid;place-items:center;border-radius:10px;font-size:27px;flex-shrink:0;font-family:Georgia,serif}.mint{background:#eaf3ea;color:#83a38d}.peach{background:#fbefe6;color:#c4a087}.lilac{background:#efeafa;color:#a18ac4}.path-number{font-size:7px;font-weight:650;letter-spacing:1.5px;color:#b0b0b6}.path-card h3{font-size:12px;margin:6px 0}.path-card p{font-size:9px;margin:0;color:#a5a6aa;line-height:1.5}.path-card>svg{width:15px;height:15px;color:#b6b7b9;margin-left:auto}.theory{border:1px solid #e7e8e0;border-radius:10px;margin-top:22px;background:#f3f4ee;color:#92958a;font-size:10px}.theory summary{cursor:pointer;padding:15px 17px;list-style:none;display:flex;justify-content:space-between}.theory summary::-webkit-details-marker{display:none}.theory>div{border-top:1px solid #e4e7dc;padding:15px 17px;line-height:1.9}.theory b{color:#6f7760;font-weight:550}.theory p:last-of-type{margin-bottom:10px}footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:31px;padding:22px 0 25px;font-size:8px;letter-spacing:.3px;color:#afb1ab}.footer-dot{margin:0 9px}.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#35343d;color:white;padding:13px 20px;border-radius:9px;z-index:100;font-size:12px;box-shadow:0 7px 25px #0002;max-width:90vw;text-align:center}
.practice-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.practice-main{padding:30px}.practice-topline{display:flex;justify-content:space-between;align-items:center;color:#92919d;font-size:11px;margin-bottom:24px}.exercise-chip{background:var(--lavender);color:var(--purple);border-radius:20px;padding:6px 12px;font-size:10px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0 25px}.mode-option{background:#fafaf8;border:1px solid var(--line);border-radius:12px;text-align:left;padding:20px 15px;min-height:142px}.mode-option.selected{border-color:#ac9adf;background:#f5f1ff}.mode-option>span:first-child{display:block;color:var(--purple);font-size:24px;margin-bottom:12px}.mode-option b{display:block;font-size:13px;font-weight:550;margin-bottom:7px}.mode-option small{color:#94919f;font-size:10px;line-height:1.7}.field-label{display:block;font-size:11px;color:#82818a;margin-bottom:12px}.segmented{display:flex;background:#f3f3f1;border-radius:9px;padding:4px;margin-bottom:22px;gap:5px}.segmented button{padding:12px;flex:1;background:none;color:#91909a;border-radius:6px;font-size:11px}.segmented button.selected{background:white;box-shadow:0 2px 5px #00000008;color:var(--purple)}.practice-start{width:100%;padding:15px!important}.setup-note{font-size:11px;color:#92919c;line-height:1.9;margin-bottom:23px}.howto{padding:24px}.howto h3{margin-bottom:20px}.howto ol{list-style:none;counter-reset:steps;padding:0;margin:0}.howto li{counter-increment:steps;display:flex;gap:11px;color:#92929b;font-size:11px;line-height:1.8;margin-bottom:20px}.howto li:before{content:counter(steps);display:grid;place-items:center;width:23px;height:23px;flex-shrink:0;background:#f0edf8;color:var(--purple);border-radius:50%;font-size:10px}.howto p{border-top:1px solid var(--line);padding-top:17px;font-size:10px;color:#9998a1;line-height:1.8;margin-bottom:0}.quiz-progress{height:5px;background:#f0edf7;border-radius:5px;overflow:hidden;margin-bottom:28px}.quiz-progress span{display:block;height:100%;background:var(--purple);border-radius:5px;transition:width .3s}.quiz-center{text-align:center;padding:6px 0 20px}.quiz-center h2{font-size:23px;margin:20px 0 9px}.quiz-center p{font-size:12px;color:#94929f;line-height:1.8}.sound-orb{display:grid;place-items:center;background:var(--lavender);color:var(--purple);border:1px solid #e0d8f5;width:100px;height:100px;border-radius:50%;margin:auto}.sound-orb svg{width:37px;height:37px}.sound-orb.playing{animation:pulse 1.2s ease-in-out infinite}.listen-actions{display:flex;justify-content:center;gap:10px;margin:22px 0}.answer-label{font-size:10px;color:#a2a0ac;margin:16px 0 12px}.answers{display:grid;grid-template-columns:repeat(7,1fr);gap:9px}.answers.three{grid-template-columns:repeat(3,1fr)}.answer{padding:16px 5px;background:#faf9fc;border:1px solid #e9e5f1;border-radius:9px;min-height:66px;color:var(--purple);font-size:16px;font-weight:550}.answer small{display:block;font-size:9px;color:#aaa2bb;margin-top:5px}.answer:hover:not(:disabled){background:var(--lavender);border-color:#b9a5e8}.answer:disabled{opacity:.62}.answer.correct{background:#edf6e6;border-color:#b2cd9b;color:#64884a;opacity:1}.answer.wrong{background:#fcf0eb;border-color:#e1b5a5;color:#bf8d79;opacity:1}.feedback{border-radius:10px;padding:19px;margin-top:22px;background:#f7f4ed;color:#827a63;font-size:12px;line-height:1.9}.feedback.success{background:#edf5e7;color:#688553}.feedback strong{display:block;font-size:14px;margin-bottom:4px}.feedback .button{margin-top:12px}.quiz-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}.quiz-bottom .text-button{color:#9994a6}.session-score{font-size:11px;color:#96919f}.melody-slots{display:flex;justify-content:center;gap:8px;margin:15px 0}.melody-slot{display:grid;place-items:center;width:54px;height:48px;border:1px dashed #cbc0e0;background:#faf8fe;border-radius:8px;color:var(--purple);font-size:15px}.melody-tools{display:flex;justify-content:center;gap:18px;margin:14px 0 0}.melody-submit{display:flex;margin:18px auto 0}.result-card{text-align:center;padding:38px}.result-icon{font-size:45px;color:var(--purple);margin-bottom:17px}.result-number{font-size:65px;font-weight:550;letter-spacing:-4px;color:var(--purple);margin:25px 0 5px}.result-number span{font-size:24px;letter-spacing:0;color:#ada4bf}.result-card p{font-size:12px;color:#97919f;line-height:1.9}.result-actions{display:flex;justify-content:center;gap:10px;margin-top:25px}.result-errors{background:#f8f7fa;border-radius:12px;margin-top:25px;padding:20px;text-align:left}.result-errors h3{font-size:12px}.error-row{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eae7ef;padding:12px 0;gap:15px;font-size:11px;color:#948a9f}.error-row:first-of-type{border:0}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:25px}.stat-card{padding:25px}.stat-card>span{font-size:11px;color:#96939e}.stat-card strong{display:block;font-size:35px;font-weight:550;margin:14px 0 7px}.stat-card small{font-size:10px;color:#b0abb8}.record-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.record-panel{padding:26px}.record-panel h2{font-size:16px}.empty-state{padding:40px 15px;text-align:center;color:#a19ba9;font-size:12px;line-height:1.9}.empty-state svg{display:block;width:30px;height:30px;color:#c3b4dd;margin:0 auto 15px}.accuracy-row{display:grid;grid-template-columns:40px 1fr 66px;gap:12px;align-items:center;margin:20px 0;font-size:11px;color:#98909f}.accuracy-track{height:6px;background:#f0edf5;border-radius:5px;overflow:hidden}.accuracy-track span{display:block;height:100%;background:#b6a1dc;border-radius:5px}.accuracy-row span:last-child{text-align:right;font-size:10px}.history-row{padding:17px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.history-row b{font-size:12px;font-weight:500;display:block;margin-bottom:6px}.history-row small{font-size:10px;color:#a29aaa}.history-row strong{font-size:18px;color:var(--purple);font-weight:550}.privacy-note{font-size:10px;color:#9c97a2;line-height:1.8;margin:20px 0}.persistence-warning{color:#b58561!important}.reset-controls{margin-top:22px;display:flex;gap:15px;align-items:center;font-size:11px;color:#a48881}.reset-controls button{font-size:11px}.practice-note{background:#f3f4ed;border-radius:10px;padding:18px;font-size:11px;color:#969886;line-height:1.9;margin-top:18px}
@keyframes pulse{50%{box-shadow:0 0 0 14px #7560d30b;transform:scale(1.035)}}@media(min-width:1600px){main{padding-top:48px}.scale-landscape{height:235px}.note-steps{top:38px}.scale-path{height:160px}.note-step{top:calc((7 - var(--i)) * 18px)}.piano{height:155px}.black-key{height:88px}}
@media(max-width:1200px){.sidebar{width:185px;padding-left:15px;padding-right:15px}.workspace{margin-left:185px}main{padding-left:28px;padding-right:28px}.topbar{padding:0 28px}.explore-grid{grid-template-columns:minmax(0,1fr) 235px;gap:18px}.scale-card{padding:24px 22px 15px}.daily-card{padding:21px}.path-card{padding:17px 13px;gap:10px}.path-icon{width:33px;height:40px;font-size:24px}.path-card>svg{display:none}.practice-layout{grid-template-columns:minmax(0,1fr) 235px}.answers{gap:6px}}
@media(max-width:1000px){.sidebar{width:175px}.workspace{margin-left:175px}.explore-grid{grid-template-columns:minmax(0,1fr)}.right-rail{display:grid;grid-template-columns:1fr 1fr;gap:18px}.daily-card{position:relative;padding:22px}.daily-card h2{font-size:18px}.daily-top{margin-bottom:13px}.daily-ring{width:84px;height:84px;position:absolute;right:22px;top:36px;margin:0}.daily-ring>div{width:75px;height:75px}.daily-ring strong{font-size:24px}.daily-ring strong span{font-size:11px}.daily-ring div>span{font-size:8px}.daily-card p{max-width:57%;margin-bottom:20px}.daily-card .button{margin-top:4px}.tip-card{padding:22px}.intro-badge{display:none}.learning-path{gap:10px}.path-card{align-items:flex-start;flex-direction:column;gap:8px}.path-icon{height:30px;width:30px;font-size:22px}.headphone-tip{display:none}.practice-layout{grid-template-columns:1fr}.howto ol{display:flex;gap:20px}.howto li{flex:1;margin-bottom:0}.howto h3{margin-bottom:17px}.howto p{margin-top:18px}.record-grid{grid-template-columns:1fr}footer{font-size:8px}.step-bubble{width:42px;height:42px}}
@media(max-width:650px){.sidebar{position:sticky;top:0;height:65px;width:100%;flex-direction:row;padding:0 16px;border-right:0;border-bottom:1px solid var(--line);align-items:center;justify-content:space-between}.brand{font-size:18px;gap:7px;margin-left:0;letter-spacing:1px}.brand-icon{width:28px;height:31px;border-radius:9px}.brand-icon svg{width:19px;height:19px}.brand-sub{font-size:5px;letter-spacing:1px}.sidebar-label,.sidebar-bottom{display:none}.sidebar nav{display:flex;gap:4px}.nav-item{padding:10px 8px;margin:0;font-size:10px;width:auto;gap:5px}.nav-item svg{width:14px;height:14px}.nav-dot{display:none}.workspace{margin-left:0}.topbar{height:45px;padding:0 20px}.breadcrumb{font-size:9px}.profile{width:24px;height:24px;font-size:17px}main{padding:28px 17px 0}.page-intro{margin-bottom:24px}.eyebrow{font-size:7px;letter-spacing:1.5px}h1{font-size:29px;margin-top:11px}.page-intro p{font-size:10px}.scale-card{padding:21px 16px 14px}.card-heading h2{font-size:18px}.tag{font-size:8px;padding:6px}.section-description{font-size:10px;line-height:1.8}.scale-landscape{height:190px;margin-top:18px}.note-steps{top:28px;padding:0 3px}.note-step{top:calc((7 - var(--i)) * 14px)}.step-bubble{width:29px;height:29px;font-size:10px}.step-letter{font-size:8px}.scale-path{height:125px;top:33px}.playback-bar{margin-bottom:23px}.button{font-size:10px;padding:11px 13px}.speed-control{font-size:9px;gap:4px}.speed-control select{font-size:9px}.piano{height:125px}.black-key{height:71px}.white-key span:first-child{font-size:11px}.keyboard-hint{font-size:8px}.right-rail{grid-template-columns:1fr}.daily-card{padding:23px}.daily-card p{max-width:65%}.daily-ring{top:31px}.daily-top{max-width:65%}.daily-card .button{width:66%;margin-top:19px}.daily-note{text-align:left;padding-left:15px}.tip-card{padding:20px}.tip-card p{font-size:11px}.tip-card h3{font-size:15px}.learning-path{grid-template-columns:1fr}.path-card{flex-direction:row;align-items:center;gap:16px;padding:18px}.path-icon{width:42px;height:44px;font-size:27px}.path-card>svg{display:block}.path-card h3{font-size:13px}.path-card p{font-size:10px}.section-header h2{font-size:14px}.section-header>span{font-size:8px}.theory{font-size:10px}.theory summary{line-height:1.8;gap:10px}.theory summary span{flex-shrink:0}footer{flex-direction:column;gap:9px;font-size:8px;margin-top:23px;padding-top:18px}.practice-main{padding:23px 17px}.mode-grid{gap:8px}.mode-option{padding:16px 10px;min-height:150px}.mode-option b{font-size:11px}.mode-option small{font-size:9px}.segmented button{font-size:10px;padding:12px 8px}.howto ol{flex-direction:column;gap:15px}.quiz-center h2{font-size:19px}.quiz-center p{font-size:10px}.answers{grid-template-columns:repeat(4,1fr);gap:8px}.answer{padding:14px 5px;min-height:60px;font-size:14px}.answers.three .answer{font-size:14px}.listen-actions{gap:7px}.stats-grid{gap:9px}.stat-card{padding:19px 12px}.stat-card>span{font-size:10px}.stat-card strong{font-size:26px}.stat-card small{font-size:9px}.record-panel{padding:22px}.result-card{padding:27px 18px}.result-actions{flex-wrap:wrap}.quiz-topline{font-size:10px}.error-row{font-size:10px}}
.note-steps{top:20px}.section-description{font-size:12px;line-height:1.8}.page-intro p{font-size:13px}.button{font-size:12px}.tag{font-size:10px}.tip-card p{font-size:12px;line-height:1.9}.tip-card .text-button{font-size:11px}.daily-card p{font-size:11px}.daily-note{font-size:10px}.path-card p{font-size:11px}.path-card h3{font-size:14px}.path-number{font-size:8px}.keyboard-label{font-size:11px}.keyboard-hint{font-size:10px}.note-readout{font-size:11px;line-height:1.8}.theory{font-size:12px}.howto li{font-size:12px}.howto p{font-size:11px}.practice-note{font-size:12px}.mode-option small{font-size:11px}.setup-note{font-size:12px}.practice-topline{gap:10px}.daily-top{font-size:11px}.sidebar-foot{font-size:10px}footer{font-size:9px}
@media(max-width:650px){.page-intro p{font-size:11px}.button{font-size:11px}.section-description{font-size:11px}.note-steps{top:23px}.note-readout{font-size:10px}.tag{font-size:9px}.theory{font-size:11px}.mode-option small{font-size:10px}.practice-topline{flex-wrap:wrap}.mode-option{min-height:160px}.path-card p{font-size:11px}.keyboard-hint{font-size:9px}.quiz-center p{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}