html,body,#root{min-height:100%}:root{--ink:#1f2937;--slate:#33415c;--gold:#b9962f;--gold-soft:#e8d9a8;--kraft:#d8d2c0;--paper:#faf8f2;--paper2:#f3efe4;--blue:#2e9bd6;--green:#6bbf59;--red:#d9534f}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Noto Serif SC,Songti SC,serif}.appShell{max-width:560px;min-height:100vh;margin:0 auto;padding:20px 18px 48px}h1,h2,h3{color:var(--slate);font-weight:600}.btn{border:1.5px solid var(--slate);color:var(--slate);cursor:pointer;background:0 0;border-radius:10px;margin:4px;padding:10px 22px;font-family:inherit;font-size:16px;transition:all .15s;display:inline-block}.btn:hover{background:var(--paper2)}.btn:disabled{opacity:.45;cursor:default}.btn.primary{background:var(--slate);color:#fff}.btn.primary:hover{background:#25304a}.btn.big{width:100%;margin:10px 0;padding:14px 34px;font-size:18px;display:block}.btn.ghost{border-color:var(--kraft)}.btn.small{padding:6px 12px;font-size:13px}.backLink{color:var(--slate);cursor:pointer;background:0 0;border:none;margin-bottom:6px;padding:6px 0;font-family:inherit;font-size:14px}.homePage{text-align:center;padding-top:24px}.hero{border:1px solid var(--kraft);border-radius:14px;width:100%;box-shadow:0 4px 18px #33415c1f}.streakLine{color:var(--gold);margin-top:14px;font-size:14px}.coverBtn{cursor:pointer;text-align:center;background:0 0;border:none;width:100%;margin-bottom:18px;padding:0;display:block}.coverFrame{aspect-ratio:1;width:min(100%,62vh);display:inline-block;position:relative}.hero.cover{object-fit:cover;transform-origin:45% 20.5%;will-change:transform;width:100%;height:100%;transition:transform 1.05s cubic-bezier(.55,.12,.35,1);display:block}.homePage.zooming .hero.cover{transform:scale(3.6)}.homePage.zooming .coverBtn{pointer-events:none;cursor:default}.conchRipple{aspect-ratio:1;pointer-events:none;border:2px solid #c2783ed9;border-radius:50%;width:15%;animation:1.9s ease-out infinite conchRipple;position:absolute;top:20.5%;left:45%;transform:translate(-50%,-50%)}@keyframes conchRipple{0%{opacity:.9;transform:translate(-50%,-50%)scale(.55)}70%{opacity:.25;transform:translate(-50%,-50%)scale(1.1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.25)}}.coverHint{color:var(--ink,#33415c);border:1px solid var(--kraft);letter-spacing:1px;white-space:nowrap;pointer-events:none;background:#faf6eceb;border-radius:999px;padding:7px 16px;font-size:14px;animation:2.4s ease-in-out infinite hintFloat;position:absolute;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 2px 10px #33415c26}@keyframes hintFloat{0%,to{transform:translate(-50%)translateY(0)}50%{transform:translate(-50%)translateY(-4px)}}.zoomFade{opacity:0;pointer-events:none;z-index:60;background:#f6f1e4;transition:opacity .45s .55s;position:fixed;inset:0}.homePage.zooming .zoomFade{opacity:1}.homePage.zooming .conchRipple,.homePage.zooming .coverHint{opacity:0;transition:opacity .25s;animation:none}.homePage.zooming .btn,.homePage.zooming .streakLine{opacity:0;transition:opacity .3s}.unitBlock{margin-bottom:26px}.unitCover{border:1px solid var(--kraft);border-radius:10px;width:100%;margin-bottom:12px}.unitBlock h3{border-bottom:1px solid var(--kraft);margin:6px 0 10px;padding-bottom:6px;font-size:17px}.lessonGrid{flex-direction:column;gap:8px;display:flex}.lessonNode{border:1px solid var(--kraft);cursor:pointer;text-align:left;background:#fff;border-radius:10px;align-items:center;gap:12px;padding:10px 14px;font-family:inherit;font-size:15px;transition:all .15s;display:flex}.lessonNode:hover:not(.locked){border-color:var(--gold)}.lessonNode.locked{opacity:.4;cursor:default}.lessonNode.done{background:var(--paper2);border-color:var(--gold-soft)}.lessonNum{border:1.5px solid var(--slate);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:14px;display:flex}.lessonNode.done .lessonNum{background:var(--gold-soft);border-color:var(--gold)}.learnPage h2{margin:4px 0}.goal{color:#6b7280;margin-top:4px;font-size:14px}.learnCard{border:1px solid var(--kraft);background:#fff;border-radius:12px;margin:14px 0;padding:16px 18px}.learnCard h3{margin:0 0 8px;font-size:16px}.learnBody p{margin:8px 0;font-size:15px;line-height:1.7}.learnBody .tip{color:#6b7280;font-size:13px}.intervalRow{border-top:1px dashed var(--kraft);flex-wrap:wrap;align-items:center;gap:10px;padding:8px 0;display:flex}.intervalName{min-width:64px;font-weight:600}.intervalDesc{color:#6b7280;flex:1;min-width:120px;font-size:13px}.instGrid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.instCard{border:1px solid var(--kraft);text-align:center;border-radius:10px;padding:10px}.instCard img{border-radius:8px;width:100%}.instName{margin:6px 0 2px;font-weight:600}.instDesc{color:#6b7280;margin-bottom:8px;font-size:12px;line-height:1.5}.quizTop{color:#6b7280;justify-content:space-between;font-size:14px;display:flex}.progressBar{background:var(--paper2);border-radius:3px;height:5px;margin:8px 0 18px;overflow:hidden}.progressBar>div{background:var(--gold);height:100%;transition:width .3s}.prompt{margin:8px 0 14px;font-size:20px}.staffBox{border:1px solid var(--kraft);background:#fff;border-radius:10px;justify-content:center;margin:10px 0;padding:10px;display:flex}.staffWrap svg{display:block}.options{grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;display:grid}.options.wide{grid-template-columns:1fr}.option{border:1.5px solid var(--kraft);cursor:pointer;background:#fff;border-radius:10px;padding:14px 10px;font-family:inherit;font-size:16px;transition:all .15s}.option:hover:not(:disabled){border-color:var(--slate)}.option.correct{border-color:var(--green);color:#2c662d;background:#eef7ec}.option.wrong{border-color:var(--red);color:#8a2724;background:#fbecec}.feedback{border-radius:10px;margin-top:14px;padding:12px 14px;font-size:15px}.feedback.ok{color:#2c662d;background:#eef7ec}.feedback.no{color:#8a2724;background:#fbecec}.feedback .piano{margin-top:10px}.singBox{text-align:center}.singPanel{border:1px solid var(--kraft);border-radius:12px;margin:12px 0;padding:18px}.singTarget{color:var(--slate);font-size:22px;font-weight:600}.singDot{color:#6b7280;margin:10px 0;font-size:14px}.singDot.listening{color:var(--blue)}.singDot.done{color:var(--green)}.singHeard{color:#6b7280;font-size:14px}.donePage{text-align:center;padding-top:40px}.scoreLine{color:var(--slate);margin:10px 0;font-size:40px;font-weight:700}.doneBtns{flex-direction:column;align-items:center;gap:6px;margin-top:22px;display:flex}.doneBtns .btn{width:100%;max-width:300px}.piano{-webkit-user-select:none;user-select:none;width:100%;padding-top:0;position:relative}.pianoWhites{gap:2px;display:flex}.pianoWhite{border:1px solid var(--slate);background:#fffdf7;border-radius:0 0 6px 6px;flex:1;height:108px;position:relative}.pianoWhite.tap{cursor:pointer}.pianoWhite.tap:active{background:var(--paper2)}.pianoWhite.hl{border-color:var(--gold);background:#b9962f52}.pianoBlack{background:var(--ink);z-index:2;border-radius:0 0 4px 4px;width:8%;height:64px;position:absolute;top:0}.pianoBlack.tap{cursor:pointer}.pianoBlack.hl{background:var(--gold)}.pianoKeyLabel{text-align:center;color:var(--slate);pointer-events:none;font-size:12px;line-height:1.25;position:absolute;bottom:5px;left:0;right:0}.pianoKeyLabel small{color:#8a94a6;font-size:10px;display:block}.pianoMark{background:var(--slate);color:#fff;z-index:3;pointer-events:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;font-size:12px;display:flex;position:absolute;top:4px;left:50%;transform:translate(-50%)}.pianoMark.dark{top:38px}