:root{--paper:#f6f4ed;--paper2:#eeece4;--card:#fffefa;--ink:#243334;--sub:#758181;--line:#e5e7e0;--teal:#216b67;--teal2:#dbece6;--peach:#f4b189;--orange:#c47a49;--red:#b9635e;--shadow:0 14px 44px #24333412}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft Yahei",sans-serif}button{font:inherit;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #96bdb3;outline-offset:3px}button:disabled{cursor:default}p{line-height:1.65} .page{max-width:1260px;margin:auto;padding:23px 30px 55px}
.top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #dde1d9;padding-bottom:18px;gap:12px}.logo{display:flex;align-items:center;gap:11px;font-weight:820;letter-spacing:.06em;font-size:14px}.logo-mark{display:grid;place-items:center;background:var(--ink);color:#fff;width:40px;height:40px;border-radius:13px;font-family:Georgia,serif;font-size:24px;transform:rotate(-7deg)}.logo em{font-style:normal;display:block;color:var(--sub);font-size:10px;font-weight:600;letter-spacing:.22em;margin-top:2px}.topright{display:flex;gap:10px;align-items:center}.save-tag{font-size:12px;color:#71827c;background:#e9ede5;border-radius:100px;padding:8px 12px}.sound-btn{border:1px solid #d5ddd5;background:#fff;padding:9px 12px;border-radius:11px;font-size:12px;color:#426660}
.hero{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:27px 0 24px}.eyebrow{font-size:11px;color:#749087;letter-spacing:.19em;font-weight:800}.hero h1{font-size:clamp(30px,4vw,48px);line-height:1.15;letter-spacing:-.07em;margin:10px 0 10px;font-weight:800}.hero p{font-size:14px;color:#73817f;margin:0;max-width:580px}.hero-orbit{position:relative;width:144px;height:103px;flex-shrink:0}.orb{border:1px dashed #aec0b8;width:114px;height:92px;border-radius:100%;position:absolute;right:12px;top:4px;transform:rotate(-18deg)}.note-float{position:absolute;display:grid;place-items:center;background:#e6f0e8;box-shadow:0 9px 24px #a3c5b455;width:62px;height:62px;border-radius:19px;right:41px;top:18px;font-family:Georgia,serif;color:var(--teal);font-size:45px;transform:rotate(15deg);animation:float 3s ease-in-out infinite}.mini-star{position:absolute;right:16px;top:0;color:var(--orange);font-size:21px}.mini-star.two{top:80px;right:115px;font-size:15px}@keyframes float{50%{transform:rotate(8deg) translateY(-7px)}}
.tabs{display:inline-flex;background:#e9ebe5;padding:5px;border-radius:14px;margin-bottom:18px;gap:5px}.mode-btn{background:transparent;border:0;color:#75817c;padding:11px 18px;font-weight:750;font-size:13px;border-radius:10px}.mode-btn.active{background:#fff;color:var(--teal);box-shadow:0 3px 9px #28362d0b}
.layout{display:grid;grid-template-columns:290px minmax(0,1fr);align-items:start;gap:19px}.panel{background:var(--card);border:1px solid #e5e7df;border-radius:21px;box-shadow:0 6px 18px #14262205}.side{padding:21px 17px}.section-caption{font-size:11px;font-weight:800;letter-spacing:.16em;color:#87928d;margin:0 0 13px 5px}.side-intro{padding:5px 7px 15px}.side-intro h2{font-size:20px;line-height:1.3;letter-spacing:-.04em;margin:0 0 5px}.side-intro p{font-size:12px;color:#89938d;margin:0}
.stage-list{display:grid;gap:8px}.stage{width:100%;display:flex;align-items:center;gap:11px;text-align:left;padding:13px 10px;border:1px solid transparent;border-radius:13px;background:transparent;color:var(--ink);transition:background .15s}.stage:hover:not(:disabled){background:#f4f8f3}.stage.active{background:#e8f2ee;border-color:#c8ded5}.stage.locked{opacity:.50}.stage-icon{width:40px;height:40px;background:#eef0eb;border-radius:12px;flex-shrink:0;display:grid;place-items:center;font-size:15px;font-weight:800;color:#627a70}.stage.active .stage-icon{background:#246b67;color:#fff}.stage.done .stage-icon{background:#e8eddf;color:#55755f}.stage-text{flex:1;min-width:0}.stage-text b{display:block;font-size:13px;letter-spacing:-.02em;margin-bottom:2px}.stage-text small{display:block;color:#96a09a;font-size:11px}.stage-best{font-size:12px;color:#c58a54;font-weight:750}.side-end{border-top:1px solid var(--line);padding:18px 6px 2px;margin-top:16px}.side-end strong{font-size:13px}.side-end p{color:#8a978e;margin:6px 0 10px;font-size:12px}.small-btn{background:#fff;border:1px solid #dae0d7;border-radius:10px;padding:9px 11px;font-size:12px;font-weight:730;color:#50685e}.small-btn:hover{background:#f3f7f3}
.play{min-width:0}.stats{display:grid;grid-template-columns:1.35fr .8fr .8fr .8fr;gap:11px;margin-bottom:14px}.stat{background:#fffefa;border:1px solid #e6e9df;border-radius:15px;padding:13px 17px;min-width:0}.stat-label{font-size:11px;color:#89968d;margin-bottom:5px}.stat-val{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.04em}.stat-val small{font-size:13px;font-weight:500;color:#a8aea8}.stat.trackstat .stat-val{color:var(--teal)}
.scorecard{padding:21px 24px 18px;position:relative;overflow:hidden}.scoretop{display:flex;justify-content:space-between;align-items:start;gap:13px}.scoretop h2{margin:5px 0 5px;font-size:23px;letter-spacing:-.04em}.scoretop p{margin:0;font-size:12px;color:#8b9791}.small-tag{padding:8px 10px;background:#edf4ee;color:#4f7966;font-size:11px;font-weight:800;border-radius:20px;white-space:nowrap}.journey{margin:24px 3px 2px;position:relative;display:flex;justify-content:space-between;gap:7px;align-items:center}.journey:before{content:"";position:absolute;top:17px;left:4%;right:4%;border-top:3px dashed #dce4dc;z-index:0}.step{position:relative;z-index:1;background:#f3f5ee;border:2px solid #e2e9e0;border-radius:11px;width:35px;height:35px;display:grid;place-items:center;color:#a1b0a4;font-size:17px;font-weight:700;transition:background .2s,transform .2s}.step.done{background:#cee8dc;color:#1e7668;border-color:#add7c5}.step.current{background:#236b67;color:white;border-color:#236b67;transform:scale(1.13);box-shadow:0 6px 15px #236b6741}.journey-labels{display:flex;justify-content:space-between;margin:11px 0 0;font-size:11px;color:#91a096}
.sheetwrap{border-radius:17px;background:linear-gradient(155deg,#fbfbf7,#f5f7f1);border:1px solid #ecf0e8;margin-top:14px;position:relative;padding:18px 5px 4px;overflow:hidden}.sheet-corner{display:flex;align-items:center;justify-content:space-between;padding:0 17px 0 19px;font-size:11px;letter-spacing:.08em;color:#8a9b90;font-weight:700}.staff-svg{width:100%;max-width:690px;height:auto;display:block;margin:0 auto;min-height:205px}.sheet-caption{text-align:center;font-size:12px;color:#a0aaa0;margin:-6px 0 14px}.music-focus{font-size:12px;color:#42796e;background:#e5f0e6;border-radius:50px;padding:6px 12px;white-space:nowrap}
.feedback{margin:14px 0 9px;min-height:57px;border-radius:13px;background:#f0f4ef;display:flex;align-items:center;gap:11px;padding:12px 16px;color:#63776c;font-size:13px;line-height:1.5}.feedback.good{background:#e9f4e9;color:#286e53}.feedback.bad{background:#fcf0eb;color:#a75e4e}.feedback-icon{background:#e1ebe3;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:850;flex-shrink:0}.feedback.good .feedback-icon{background:#cce8d4}.feedback.bad .feedback-icon{background:#f2dcd3}.feedback strong{font-weight:800}
.tools{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}.toolset{display:flex;gap:9px;flex-wrap:wrap}.tool{background:#fff;border:1px solid #dce5dc;border-radius:11px;padding:10px 13px;font-size:12px;font-weight:700;color:#486f60}.tool:hover{background:#eff5ef}.tool:disabled{opacity:.5}.tool.secondary{color:#77827c}.tool-hint{font-size:12px;color:#9baa9d}.hint{display:none;margin:12px 0 0;padding:12px 15px;border-radius:12px;font-size:12px;line-height:1.8;color:#507663;background:#f1f7f1;border:1px solid #e2eee2}.hint.show{display:block}
.piano-panel{margin-top:14px;padding:19px 23px 22px}.piano-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}.piano-title h3{margin:0;font-size:17px;letter-spacing:-.02em}.piano-title p{color:#9aa49b;font-size:11px;margin:4px 0 0}.toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:#718378;user-select:none;cursor:pointer}.toggle input{accent-color:#26736a;width:16px;height:16px}
.piano-frame{background:#223635;border-radius:15px;padding:16px 12px 12px;box-shadow:inset 0 6px 8px #0002,0 9px 18px #1d3d3517;position:relative}.piano-inner{height:190px;position:relative;touch-action:manipulation;user-select:none}.white-row{display:flex;height:100%;position:relative;z-index:1}.key{border:0;display:flex;align-items:flex-end;justify-content:center;padding:0 0 13px;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .10s}.key.white{flex:1;min-width:0;background:linear-gradient(180deg,#fff,#f8f7f1 81%,#e9ece6);border:1px solid #b9c1ba;border-bottom:6px solid #bfc9c1;border-radius:0 0 7px 7px;box-shadow:inset -2px 0 #00000006}.key.white:hover,.key.white.down{background:#ddf0e5;border-bottom-color:#94bca7}.key.black{position:absolute;z-index:2;top:0;height:59%;width:4.6%;transform:translateX(-50%);color:#fff;background:linear-gradient(105deg,#334740 5%,#111f1d 70%);border:1px solid #0d1d19;border-bottom:5px solid #101d1b;border-radius:0 0 6px 6px;box-shadow:2px 4px 5px #0003;padding-bottom:9px}.key.black:hover,.key.black.down{background:#527f70}.key.wrong.white{background:#f6d2cd;border-bottom-color:#d9a4a1}.key.wrong.black{background:#a86e67}.key.suggest.white{background:#f8e6bc;border-bottom-color:#e5be70}.key.suggest.black{background:#d2a052}.key-name{font-size:11px;font-weight:800;color:#73817a;pointer-events:none}.key.black .key-name{color:#b2d1c6;font-size:10px}.key-name.hide{display:none}.piano-foot{font-size:11px;color:#98aca3;display:flex;align-items:center;justify-content:space-between;margin-top:9px;gap:10px}
.melody-options{display:none;margin-bottom:14px;gap:8px;flex-wrap:wrap}.melody-options.visible{display:flex}.song-opt{border:1px solid #d9e1d8;background:#fffefa;color:#6a7a71;padding:11px 15px;border-radius:12px;font-size:12px;font-weight:800}.song-opt.active{background:#226963;border-color:#226963;color:#fff}.side-small{font-size:12px;color:#89958f;line-height:1.65}.empty-note{background:#f4f5ef;border-radius:13px;padding:18px 14px;color:#77867c;font-size:13px;line-height:1.7}.overlay{display:none;position:absolute;inset:0;background:#fffcf3f5;backdrop-filter:blur(6px);z-index:8;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:20px 17px;gap:8px}.overlay.show{display:flex}.win-badge{font-size:13px;letter-spacing:.16em;color:#9c8b65;font-weight:850}.big-winner{font-size:42px;margin-bottom:1px}.overlay h3{margin:2px 0 0;font-size:clamp(25px,3vw,35px);letter-spacing:-.05em}.overlay p{font-size:13px;color:#7a897f;margin:4px 0}.actionbar{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:14px}.primary{background:#216b67;border:1px solid #216b67;color:#fff;padding:12px 18px;border-radius:12px;font-weight:800;font-size:13px}.primary:hover{background:#185751}.outline{background:#fff;border:1px solid #cadbd1;color:#4d7965;padding:12px 18px;border-radius:12px;font-size:13px;font-weight:800}.star-rate{color:#d39358;letter-spacing:.16em;font-size:24px}.footer{font-size:11px;color:#a7b0a7;text-align:center;margin:26px 0 0}
@media(max-width:980px){.page{padding:20px 17px}.layout{grid-template-columns:240px minmax(0,1fr)}.side{padding:17px 12px}.scorecard{padding:19px 17px}.piano-panel{padding:19px 15px}.hero-orbit{display:none}}
@media(max-width:700px){.page{padding:16px 11px 30px}.top{padding-bottom:13px}.topright .save-tag{display:none}.hero{padding:22px 2px 20px}.hero h1{font-size:31px}.hero p{font-size:12px}.tabs{width:100%;display:flex}.mode-btn{flex:1;padding:11px 8px;font-size:12px}.layout{grid-template-columns:minmax(0,1fr);gap:13px}.side{padding:14px;min-width:0;max-width:100%;overflow:hidden}.side-intro{padding-bottom:10px}.stage-list{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;width:100%;min-width:0}.stage{flex:0 0 164px;scroll-snap-align:start;padding:9px 8px}.stage-icon{height:34px;width:34px}.stage-text b{font-size:12px}.stage-text small{font-size:10px}.side-end{margin-top:10px;padding-top:11px}.side-end p{display:none}.stats{gap:7px;margin-bottom:10px}.stat{padding:10px 9px;border-radius:12px}.stat-label{font-size:10px}.stat-val{font-size:18px}.stat-val small{font-size:10px}.scorecard{padding:17px 12px 13px}.scoretop h2{font-size:18px}.scoretop p{font-size:11px}.small-tag{font-size:10px;padding:6px}.journey{margin-top:21px}.step{width:27px;height:27px;font-size:13px;border-radius:8px}.journey:before{top:13px}.journey-labels{font-size:10px}.sheetwrap{margin-top:13px;padding-top:13px}.sheet-corner{padding:0 7px}.staff-svg{min-height:155px}.sheet-caption{margin-top:-9px}.feedback{font-size:12px;padding:10px 11px}.tools{align-items:flex-start}.tool{font-size:11px;padding:9px 10px}.tool-hint{font-size:11px}.piano-panel{padding:17px 10px 12px}.piano-title h3{font-size:15px}.piano-title p{font-size:10px}.piano-frame{padding:11px 6px 10px}.piano-inner{height:158px}.key.white{border-radius:0 0 3px 3px}.key.black{border-radius:0 0 3px 3px}.key-name{font-size:9px}.key.black .key-name{font-size:8px;writing-mode:vertical-rl}.piano-foot{font-size:10px}.footer{margin-top:18px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* V3 | 50-level atlas, live tempo and musical sight-reading */
.chapter-picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.chapter-pill{border:1px solid #e0e5da;background:#f7f8f3;color:#60776c;border-radius:10px;font-size:10px;font-weight:700;padding:8px 9px;line-height:1.35}.chapter-pill.active{background:#236b67;border-color:#236b67;color:white}.chapter-info{display:flex;flex-direction:column;gap:5px;padding:10px 9px;margin-bottom:10px;border-bottom:1px solid #e6eae3;color:#2c7267;font-size:10px;font-weight:800;letter-spacing:.13em}.chapter-info small{font-weight:450;font-size:11px;letter-spacing:0;color:#93a098}.level-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.level-tile{text-align:left;border-radius:12px;border:1px solid #e8eae1;background:#fafbf7;padding:10px 9px;min-height:93px;display:flex;flex-direction:column;gap:4px;color:var(--ink);transition:background .2s}.level-tile:hover:not(:disabled){background:#edf4ef}.level-tile.active{border-color:#7bb3a0;background:#e7f3ed}.level-tile:disabled{opacity:.50}.lvl-no{font-size:10px;color:#6e9f90;font-weight:850;letter-spacing:.1em}.lvl-title{font-size:11px;font-weight:750;line-height:1.25}.level-tile small{font-size:10px;color:#bf9766;margin-top:auto}.timing-box{margin:17px 2px 0;padding:10px 12px 8px;border-radius:12px;border:1px solid #e4ebe4;background:#f7f9f4}.timing-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.timing-row strong{font-size:12px;font-variant-numeric:tabular-nums;color:#43796b}.speed-actions{display:flex;gap:6px;flex-wrap:wrap}.speed-actions .small-btn{padding:7px 9px;font-size:10px;background:white}.timer-rail{height:6px;background:#e8eee8;border-radius:9px;margin-top:10px;overflow:hidden}.timer-rail>div{height:100%;background:#3e9681;transition:width .05s linear;width:100%;border-radius:9px}.timer-rail>div.danger{background:#d37c6d}.timing-box.inactive .timer-rail{opacity:.3}.pause-overlay{background:#f6f6eff5;z-index:12}.step{min-width:0;flex:1;max-width:36px}.journey{gap:4px}.stat-val{font-variant-numeric:tabular-nums}.stat-val small{white-space:nowrap;font-size:10px}.sheetwrap{min-height:258px}.scorecard{overflow:visible}.sheetwrap{overflow:hidden}.timing-row .small-btn:disabled{opacity:.5}.key{cursor:pointer}
@media(min-width:701px){.chapter-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.chapter-picker .chapter-pill:last-child{grid-column:span 2}}
@media(max-width:700px){#stageList{display:block;overflow:visible;width:100%}.side{overflow:visible}.chapter-picker{flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;padding-bottom:5px}.chapter-pill{white-space:nowrap;flex:0 0 auto}.level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.level-tile{min-height:75px;padding:7px 5px}.lvl-title{font-size:10px}.lvl-no{font-size:9px}.chapter-info{margin-bottom:8px}.sheetwrap{min-height:211px}.timing-box{margin-top:10px}.timing-row strong{font-size:11px}.speed-actions .small-btn{padding:7px 7px;font-size:9px}.scoretop h2{font-size:19px}}
@media(max-width:405px){.level-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.lvl-title{font-size:9px}.level-tile{min-height:78px}.key-name{font-size:8px}}

/* V3.2 Audio: real acoustic piano samples with clickless envelopes */
.audio-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px 19px;padding:12px 13px;margin:0 0 13px;border-radius:12px;background:#eff4ee;border:1px solid #dbe8de}
.audio-controls .audio-item{display:flex;align-items:center;gap:9px;flex:1 1 200px;min-width:0}
.audio-controls label{font-size:12px;font-weight:700;color:#476c5d;white-space:nowrap}
.audio-controls input[type=range]{accent-color:#26736a;flex:1 1 auto;min-width:65px;cursor:pointer}
.audio-controls output{font-size:11px;color:#49695c;font-variant-numeric:tabular-nums;min-width:38px;text-align:right}
.sample-status{color:#aa7553;font-size:11px}.sample-status.ready{color:#21745e}.piano-credits{max-width:1000px;margin:18px auto;font-size:11px;color:#86958c}.piano-credits summary{cursor:pointer;outline-offset:3px}.piano-credits p{line-height:1.8}.piano-credits a{color:#327669}.piano-credits pre{max-height:280px;overflow:auto;white-space:pre-wrap;font-size:10px;line-height:1.45;background:#fff;padding:12px;border:1px solid #e0e7df;border-radius:10px}.audio-help{flex:1 1 100%;font-size:11px;color:#7e9184;line-height:1.4}
.key{touch-action:none; -webkit-user-select:none}
.key.pressed.white{background:#bbdec9;border-bottom-color:#74ae90}
.key.pressed.black{background:#3f8770}
@media(max-width:550px){.audio-controls{gap:11px;padding:12px}.audio-controls .audio-item{flex-basis:100%}.audio-help{font-size:10px}}

.piano-select{border:1px solid #d9e5dc;border-radius:9px;background:#fffdfa;color:#315f53;padding:8px 10px;font-size:12px;min-width:140px;max-width:205px;outline-offset:3px}
.audio-controls .audio-item:has(.piano-select){flex:1 1 220px}
.audio-controls .audio-item:has(#velocityRange){flex:1 1 190px}
@media(max-width:550px){.piano-select{width:100%;max-width:none}.audio-controls .audio-item{width:100%}}