@font-face{font-family:Lesson;src:url('FrexSansGB-Regular.woff2')}@font-face{font-family:Lesson;src:url('FrexSansGB-Bold.woff2');font-weight:700}@font-face{font-family:Hand;src:url('SmileySans-Oblique.ttf.woff2')}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f2e9;color:#3f3932;font-family:Lesson,'PingFang SC',sans-serif;line-height:1.7}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #4b735e;outline-offset:4px}button{touch-action:manipulation}::selection{background:#e8cf99;color:#322d27}a{color:inherit}button{border:0;color:inherit}svg{display:block}.topbar{max-width:1500px;margin:auto;padding:23px 42px 17px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd4c3}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:17px;font-weight:700}.brand svg{width:24px;fill:none;stroke:#56765e;stroke-width:1.8}.brand span{font-size:12px;font-weight:400;color:#776e60;padding-left:12px;border-left:1px solid #cfc5b3}.quiet{background:transparent;padding:8px 14px;min-height:44px;font-size:13px;border:1px solid #bfb39f;border-radius:9px}.quiet:hover{background:#ebe5d8}main{max-width:1500px;margin:auto;padding:29px 42px 175px}.lesson-title{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.lesson-title h1{font:54px/1.08 Hand,serif;margin:0 0 12px;letter-spacing:-.02em;color:#314f41}.lesson-title p{margin:0;color:#6f675b;font-size:13px}.lesson-title p span{margin-left:20px;font-size:12px}.page-label{font-size:15px;text-align:right}.page-label span{display:block;color:#776e60;font-size:12px;margin-top:3px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:30px;align-items:start}.main-column{min-width:0}.tabs{display:flex;gap:24px;border-bottom:1px solid #d8cfbf;margin-bottom:17px}.tabs button{background:none;padding:12px 2px 13px;min-height:48px;font-size:15px;color:#756d60;position:relative}.tabs button[aria-selected=true]{color:#355b45;font-weight:700}.tabs button[aria-selected=true]:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:3px;background:#68816a;border-radius:2px}.score-tools{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:8px 0 14px;font-size:12px;color:#6b6357}.score-tools p{margin:0}.toggle{display:flex;gap:7px;align-items:center;white-space:nowrap}input[type=checkbox]{accent-color:#51765b;width:16px;height:16px}.score-paper{padding:24px 20px 28px;border:1px solid #d6cbbb;border-radius:12px;background:#fffefa;box-shadow:0 8px 24px #52442b0a}.score-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-color:#c5bba9 #f4efe6;scrollbar-width:thin}.score-scroll>svg{width:100%;height:auto;min-width:720px;color:#352f29}.score-scroll .notehead,.score-scroll .verse,.score-scroll .rest{cursor:pointer}.score-scroll .note.active,.score-scroll .note.chosen{fill:#a8442f;color:#a8442f;stroke:#a8442f}.score-scroll .note.active .notehead{filter:drop-shadow(0 0 5px #dfb989)}.score-scroll .note:hover{fill:#4e735a;color:#4e735a}.score-caption{font-size:11px;line-height:1.8;color:#7c7163;margin:12px 0}.notebook{margin-top:59px;border:1px solid #d2c6b2;border-radius:12px;background:#efe8d8;padding:23px 22px;position:sticky;top:18px}.notebook-top{display:flex;align-items:center;gap:12px}.notebook h2{font-size:14px;font-weight:400;margin:0;color:#6d604e}.little-book svg{width:35px;height:32px;fill:none;stroke:#687b5e;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.chosen-word{font-size:30px;line-height:1.3;font-weight:700;margin:22px 0 7px;overflow-wrap:anywhere;color:#355844}.meaning{font-size:13px;color:#675e50;margin:0 0 16px}.listen-word{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:9px 16px;background:#fffdf7;border:1px solid #b8aa91;border-radius:9px;font-size:13px}.listen-word svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.sentence-note{border-top:1px solid #cfc2ac;margin-top:24px;padding-top:20px}.sentence-note h3{font-size:14px;margin:0 0 12px}.sentence-note p{font-size:13px;line-height:1.9;margin:0 0 12px}.sentence-note .teacher-tip{font-size:12px;color:#706351}.text-button{background:transparent;color:#9a402b;text-decoration:underline;text-underline-offset:5px;font-size:13px;min-height:44px;padding:7px 0}.sample-note{border-top:1px solid #cfc2ac;margin-top:17px;padding-top:17px;font-size:11px;color:#786b58}.sample-note summary{cursor:pointer;padding:5px 0}.sample-note p{line-height:1.9}.lyrics-intro h2{font-size:23px;margin:25px 0 8px}.lyrics-intro p{font-size:13px;color:#716757;margin:0 0 25px}.lyric-line{padding:20px 0 24px;border-bottom:1px solid #d8cfbf}.lyric-line header{display:flex;align-items:center;justify-content:space-between;gap:15px}.lyric-line h3{font-size:13px;font-weight:400;color:#786c59;margin:0}.phrase-play{width:44px;height:44px;border:1px solid #b7c5af;border-radius:50%;background:#e8eee1;color:#47634c}.phrase-play svg{width:16px;height:16px;margin:auto;fill:currentColor}.word-list{display:flex;gap:2px;flex-wrap:wrap;margin-top:8px}.word{background:transparent;padding:7px 8px;min-height:44px;font-size:23px;line-height:1.5;border-radius:7px}.word:hover,.word.selected{background:#e6e9d8;color:#355b45}.word.active{background:#f0dbc1;color:#93432e}.line-translation{font-size:13px;color:#786b5b;margin:9px 8px 0}.story{max-width:760px;padding:22px 6px;font-size:16px;line-height:2}.story h2{font-size:29px;margin:0 0 20px;line-height:1.5}.story h3{font-size:18px;margin:28px 0 10px}.story p{margin:0 0 18px}.story .lead{font-size:19px;color:#435b48}.story em{font-style:normal;background:#ece8c9;padding:0 3px}.discussion{padding:20px 24px;background:#e8edde;border-radius:10px;margin:28px 0}.discussion h3{margin:0 0 10px}.discussion p{font-size:21px;line-height:1.8;margin-bottom:9px}.discussion small{font-size:12px;color:#5c6b55}.story details{font-size:14px;border-top:1px solid #d8cfbf;padding-top:16px}.story details summary{cursor:pointer}.player{position:fixed;bottom:0;left:0;right:0;background:#fffdf7;border-top:1px solid #d3c9b6;z-index:10;box-shadow:0 -6px 24px #40352205}.player-inner{max-width:1500px;margin:auto;display:flex;gap:24px;align-items:center;padding:18px 42px 20px}.modes{display:flex;gap:4px;background:#eeeadd;padding:4px;border-radius:11px;flex-shrink:0}.modes button{background:transparent;min-width:76px;padding:7px 9px;border-radius:8px;font-size:14px;line-height:1.5}.modes small{display:block;font-size:10px;color:#756b59}.modes button[aria-pressed=true]{background:#4f6e55;color:#fffdf5}.modes button[aria-pressed=true] small{color:#e4e9dd}.transport{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.icon-button{background:transparent;width:36px;height:44px;flex-shrink:0;padding:9px}.icon-button svg{width:18px;height:18px;stroke:#6d6355;stroke-width:1.5;fill:none}.play{width:54px;height:54px;border-radius:50%;background:#a44832;color:#fffaf1;display:grid;place-items:center;flex-shrink:0}.play:hover{background:#8c3524}.play svg{width:24px;height:24px;fill:currentColor}.timeline{flex:1;min-width:0}.timeline>div{display:flex;justify-content:space-between;gap:12px;font-size:11px;color:#756b5e;align-items:center}#status{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#clock{font-variant-numeric:tabular-nums;white-space:nowrap}#seek{width:100%;accent-color:#607c60;height:18px;margin:7px 0 0}.player-options{display:flex;flex-direction:column;gap:5px;flex-shrink:0;font-size:11px;color:#716653}.player-options label{display:flex;align-items:center;gap:6px}.speed-label select{border:1px solid #cbbfa9;border-radius:5px;background:#fffdf7;padding:3px;color:#5e5547;font-size:11px}.present .notebook{display:none}.present .workspace{grid-template-columns:1fr}.present .score-scroll>svg{max-height:66vh;min-width:720px}.present .topbar{padding-block:10px}.present .lesson-title{margin-bottom:10px}.present .lesson-title h1{font-size:36px}.present main{padding-top:16px}.present .score-paper{padding-block:10px}[hidden]{display:none!important}@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 230px;gap:20px}main{padding-inline:28px}.topbar{padding-inline:28px}.player-inner{padding-inline:25px;gap:14px}.modes button{min-width:65px}.player-options{display:none}.score-tools{flex-wrap:wrap}.notebook{padding:19px 17px}}@media(max-width:760px){.topbar{padding:12px 18px}.brand{font-size:15px}.brand span{display:none}.quiet{font-size:12px}main{padding:23px 17px 192px}.lesson-title h1{font-size:45px}.lesson-title p{font-size:11px}.lesson-title p span{display:block;margin:3px 0 0;font-size:10px}.page-label{font-size:13px}.page-label span{font-size:10px}.lesson-title{margin-bottom:17px}.workspace{display:block}.tabs{gap:22px}.tabs button{font-size:14px}.score-tools{font-size:11px;gap:6px}.score-paper{padding:15px 10px}.score-scroll>svg{min-width:760px}.notebook{position:static;margin-top:24px;display:grid;grid-template-columns:1fr auto;gap:0 15px}.notebook-top{grid-column:1/-1}.chosen-word{margin:12px 0 5px;font-size:27px}.meaning{grid-column:1;max-width:250px;margin-bottom:0}.listen-word{grid-column:2;grid-row:2/4;align-self:center}.sentence-note,.sample-note{grid-column:1/-1}.sentence-note{margin-top:19px;padding-top:15px}.sample-note{margin-top:10px}.player-inner{padding:10px 15px max(14px,env(safe-area-inset-bottom));flex-wrap:wrap;gap:9px}.modes{width:100%;justify-content:center}.modes button{flex:1;padding:5px 8px}.modes small{display:inline;margin-left:5px;font-size:10px}.transport{flex-basis:100%;gap:8px}.play{width:45px;height:45px}.icon-button{width:30px}.timeline>div{font-size:10px}.word{font-size:21px;padding:7px 6px}.story{font-size:15px;padding:15px 2px}.story h2{font-size:25px}.story .lead{font-size:17px}.discussion{padding:17px}.discussion p{font-size:18px}.present .score-scroll>svg{max-height:none}.present main{padding-inline:12px}.present .lesson-title p{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Page structure follows the printed score; visual theme stays unchanged. */
.score-paper{padding:0}.score-scroll .a4-sheet{width:100%;min-width:760px;aspect-ratio:210 / 297;padding:28px 22px;background:#fffefa}.score-scroll .a4-sheet>svg{display:block;width:100%;height:auto;min-width:0;max-height:none}.score-scroll [data-part="piano"],.score-scroll [data-part="piano"] *{pointer-events:none;cursor:default}.score-scroll [data-part="vocal"] .notehead,.score-scroll [data-part="vocal"] .verse,.score-scroll [data-part="vocal"].rest{cursor:pointer}.page-nav{display:flex;align-items:center;gap:10px;white-space:nowrap}.page-nav button{min-height:36px;padding:5px 9px;background:transparent;border:1px solid #cfc5b3;border-radius:6px;font-size:11px}.page-nav button:disabled{cursor:default;opacity:.48}.page-nav span{font-variant-numeric:tabular-nums;font-size:11px}.page-label strong{font-weight:400}.audio-choice{display:grid;gap:7px;flex-shrink:0}.version-choice{display:flex;align-items:center;gap:9px;font-size:11px;color:#716653}.version-choice select{flex:1;min-height:32px;padding:4px 8px;border:1px solid #cbbfa9;border-radius:6px;background:#fffdf7;color:#50483d;font-size:12px}.version-choice select:disabled{opacity:.7}.phrase-play{width:auto;min-width:90px;border-radius:8px;padding:7px 12px;font-size:12px;white-space:nowrap}.phrase-play:disabled{cursor:default;opacity:.6}#sentence-english{font-size:15px;line-height:1.8;color:#435b48;margin-bottom:12px}.text-button:disabled{cursor:default;text-decoration:none;color:#786b58;opacity:1}.present .score-scroll .a4-sheet>svg{min-width:0;max-height:none}@media(max-width:760px){.audio-choice{width:100%}.modes{width:100%}.version-choice select{min-height:36px}.score-scroll .a4-sheet{padding:24px 18px}main{padding-bottom:235px}.page-nav{gap:8px}.page-nav button{min-height:44px}.player-inner{gap:8px}.phrase-play{min-width:86px}}

.page-nav select{min-height:36px;border:1px solid #cfc5b3;border-radius:6px;background:#fffdf7;color:#50483d;padding:5px 7px;font:12px Lesson,sans-serif}.cross-page-note{font-size:11px;line-height:1.8;color:#786b58;margin:8px 8px 0}.tabs{scroll-margin-top:14px}@media(max-width:760px){.page-nav select{min-height:44px}.page-nav{flex-wrap:wrap}}

/* Equal reading selectors; show exactly one level of detail. */
.notebook{display:block}.notebook [hidden]{display:none!important}.notebook-top{margin-bottom:16px}.reading-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:20px;padding:4px;background:#eee8dc;border:1px solid #d5c9b5;border-radius:10px}.reading-switch button{min-width:0;min-height:44px;padding:8px 4px;border-radius:6px;background:transparent;font-size:13px;font-weight:700;color:#625644}.reading-switch button[aria-pressed="true"]{background:#fffdf7;color:#355b45;box-shadow:0 1px 3px #52442b18}.reading-switch button:hover{background:#e0e8da;color:#355b45}.reading-detail{margin-bottom:20px}.reading-detail .chosen-word{margin:0 0 12px}.reading-detail .meaning{color:#625644;max-width:none;margin:0;font-size:14px}.reading-detail #sentence-english{font-size:20px;line-height:1.65;margin:0 0 16px;color:#314f41;overflow-wrap:anywhere}.reading-play{display:block;width:100%;min-height:44px;padding:10px 16px;border:1px solid #51765b;border-radius:8px;background:#51765b;color:#fffdf7;font-size:14px;font-weight:700}.reading-play:hover{background:#3e6048}.reading-play:disabled{cursor:default;opacity:.55}@media(max-width:760px){.notebook{display:block}.reading-switch{max-width:none}.reading-detail #sentence-english{font-size:22px}}

/* Real-time audio transposition: retain controls at phone/tablet widths. */
.player-options{display:flex;flex-direction:row;flex-wrap:wrap;max-width:280px;gap:8px 14px;align-items:center}
.transpose-label{display:flex;align-items:center;gap:6px;white-space:nowrap}
#transpose{min-height:36px;padding:4px 6px;border:1px solid #cbbfa9;border-radius:6px;background:#fffdf7;color:#50483d;font:inherit}
#transpose:focus-visible{outline:2px solid #435b48;outline-offset:3px}
#transpose:disabled{opacity:.65}
#transpose-note{flex-basis:100%;font-size:11px;color:#50483d;order:3;line-height:1.5}
@media(max-width:1100px){.player-inner{flex-wrap:wrap}.player-options{max-width:none;width:100%;justify-content:center}main{padding-bottom:285px}}
@media(max-width:760px){.player-options{gap:4px 12px;font-size:12px}.player-options label{min-height:44px}#transpose,#speed{min-height:44px}.player-options small{text-align:center}main{padding-bottom:340px}}

.brand strong{font-weight:500}.brand .brand-heart{display:inline;border:0;padding:0;color:#a9442f;font-size:.85em;margin-left:3px}.brand svg{width:30px;height:30px;flex:none}.classroom-return{font-size:13px;color:inherit;text-decoration:none;margin-left:auto;margin-right:18px}.protected-score{position:relative;width:100%}.protected-score>img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}.protected-hit{position:absolute;padding:0;border:0;background:transparent;min-width:0;min-height:0;cursor:pointer}.note.chosen .protected-hit{background:#d8b94b33}.note.active .protected-hit{background:#66915f55}.protected-hit:focus-visible{outline:2px solid #49775c}.access-banner{padding:12px;background:#f5efce;border-radius:8px}.access-banner a{color:inherit;text-decoration:underline;margin-left:10px}
.site-nav{max-width:1500px;margin:auto;padding:0 24px;display:flex;flex-wrap:wrap;gap:0 24px}.site-nav a{display:inline-flex;align-items:center;min-height:44px;color:inherit;font-size:13px;text-decoration:none}.site-nav a[aria-current]{text-decoration:underline;text-underline-offset:5px}.present .site-nav{display:none}@media(max-width:600px){.site-nav{padding:0 16px;gap:0 18px}.site-nav a{font-size:12px}}