:root{--navy:#1d2a4d;--navy-2:#2b3c6b;--gold:#d4a017;--gold-soft:#f3e2b3;--teal:#2e8b7a;--bg:#faf6ec;--card:#fff;--ink:#1d2433;--muted:#667085;--line:#e9e1cf;--ok:#2e8b57;--bad:#c0392b;--shadow:0 1px 2px #1d2a4d0f, 0 6px 18px #1d2a4d14;--radius:16px;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;--sans:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--nav-h:64px;--maxw:760px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-size:16px}:root[data-theme=dark]{--bg:#10151f;--card:#1a2232;--ink:#edf0f6;--muted:#a2abbd;--line:#2a3448;--gold-soft:#4a3d17;--shadow:0 1px 2px #0000004d, 0 6px 18px #00000059;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}:root[data-text=large]{font-size:19px}:root[data-text=presenter]{--maxw:1180px;font-size:23px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;line-height:1.5}h1,h2,h3,h4{font-family:var(--serif);letter-spacing:-.01em;margin:0 0 .5em;line-height:1.2}h1{font-size:1.75rem}h2{font-size:1.35rem}h3{font-size:1.1rem}p{margin:0 0 .75em}:where(a){color:var(--navy-2)}:where(:root[data-theme=dark]) a{color:#9fb4ff}button{font:inherit;color:inherit}img{max-width:100%;display:block}.app{min-height:100vh;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 16px)}.topbar{z-index:20;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--navy);color:#fff;align-items:center;gap:12px;display:flex;position:sticky;top:0}.topbar .brand{font-family:var(--serif);color:#fff;align-items:center;gap:8px;font-size:1.15rem;font-weight:700;text-decoration:none;display:flex}.topbar .brand img{width:28px;height:28px}.topbar .spacer{flex:1}.icon-btn{color:inherit;cursor:pointer;background:0 0;border:0;border-radius:10px;padding:8px;font-size:1.2rem;line-height:1}.icon-btn:hover{background:#ffffff1f}.page{max-width:var(--maxw);margin:0 auto;padding:16px}.bottomnav{z-index:30;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--card);border-top:1px solid var(--line);display:flex;position:fixed;bottom:0;left:0;right:0}.bottomnav a{color:var(--muted);flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2px;font-size:.75rem;font-weight:600;text-decoration:none;display:flex}.bottomnav a .ico{font-size:1.35rem;line-height:1}.bottomnav a.active{color:var(--navy-2)}:root[data-theme=dark] .bottomnav a.active{color:var(--gold)}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);margin-bottom:14px;padding:16px}.card.flush{padding:0;overflow:hidden}.muted{color:var(--muted)}.small{font-size:.85rem}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.stack{flex-direction:column;gap:10px;display:flex}.grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.grid3{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;display:grid}.center{text-align:center}.sr-only{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.btn{border:1px solid var(--line);background:var(--card);min-height:46px;color:var(--ink);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:10px 18px;font-weight:600;text-decoration:none;transition:transform 60ms,background .2s;display:inline-flex}.btn:active{transform:scale(.98)}.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}.btn.gold{background:var(--gold);color:#1d1600;border-color:var(--gold)}.btn.ghost{background:0 0}.btn.block{width:100%}.btn.big{border-radius:14px;min-height:58px;font-size:1.08rem}.btn.small{min-height:36px;padding:6px 12px;font-size:.9rem}.btn:disabled{opacity:.5;cursor:default}:root[data-theme=dark] .btn.primary{background:#3a5199;border-color:#3a5199}.chip{border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--ink);border-radius:999px;align-items:center;gap:6px;padding:6px 12px;font-size:.85rem;font-weight:600;display:inline-flex}.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}:root[data-theme=dark] .chip.on{background:var(--gold);color:#1d1600;border-color:var(--gold)}.badge{color:#fff;border-radius:999px;align-items:center;gap:4px;padding:2px 9px;font-size:.75rem;font-weight:700;display:inline-flex}.level-pill{background:var(--gold-soft);color:var(--ink);border-radius:999px;padding:2px 8px;font-size:.72rem;font-weight:700;display:inline-block}.hero{background:var(--navy);color:#fff;box-shadow:var(--shadow);border-radius:20px;margin-bottom:16px;position:relative;overflow:hidden}.hero img{aspect-ratio:3/1.45;object-fit:cover;opacity:.92;width:100%}.hero .hero-text{padding:14px 16px 16px}.hero h1{color:#fff;margin-bottom:4px}.stat{text-align:center;flex:1;padding:10px}.stat b{font-size:1.5rem;font-family:var(--serif);display:block}.lesson-card{color:inherit;border-bottom:1px solid var(--line);align-items:center;gap:12px;padding:12px 14px;text-decoration:none;display:flex}.lesson-card:last-child{border-bottom:0}.lesson-card .ico{border-radius:12px;flex:none;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.3rem;display:flex}.lesson-card .body{flex:1;min-width:0}.lesson-card .title{font-weight:700}.lesson-card .sum{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;overflow:hidden}.lesson-card .check{font-size:1.1rem}.lesson-card.current{background:var(--gold-soft)}.strand-tile{color:#fff;min-height:120px;box-shadow:var(--shadow);border-radius:16px;align-items:flex-end;text-decoration:none;display:flex;position:relative;overflow:hidden}.strand-tile img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.strand-tile .shade{position:absolute;inset:0}.strand-tile .lbl{font-weight:700;font-family:var(--serif);text-shadow:0 1px 3px #0006;padding:10px 12px;font-size:1.05rem;position:relative}.strand-tile .lbl small{font-family:var(--sans);opacity:.9;font-size:.75rem;font-weight:500;display:block}.player-head{align-items:center;gap:10px;margin-bottom:10px;display:flex}.progress{background:var(--line);border-radius:999px;flex:1;height:6px;overflow:hidden}.progress>div{background:var(--gold);height:100%;transition:width .3s}.timer{font-variant-numeric:tabular-nums;color:var(--muted);text-align:right;min-width:46px;font-size:.9rem;font-weight:700}.timer.over{color:var(--bad)}.step{animation:.28s rise}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.step-kind{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px;font-size:.72rem;font-weight:800}.player-nav{left:0;right:0;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));z-index:25;background:linear-gradient(to top, var(--bg) 70%, transparent);padding:14px 16px 10px;position:fixed}.player-nav .inner{max-width:var(--maxw);gap:10px;margin:0 auto;display:flex}.player-nav .btn{flex:1}.player-pad{height:96px}.leader{border-left:4px solid var(--gold);background:var(--gold-soft);border-radius:10px;margin-top:10px;padding:10px 12px;font-size:.92rem}.md p:last-child{margin-bottom:0}.md ul{margin:0 0 .75em;padding-left:1.2em}.md li{margin:.2em 0}.lesson-intro img{aspect-ratio:3/1.6;object-fit:cover;width:100%}.objectives li{margin:4px 0}.choices{gap:10px;margin-top:12px;display:grid}.choice{text-align:left;border:2px solid var(--line);background:var(--card);cursor:pointer;border-radius:12px;min-height:52px;padding:14px 16px;font-weight:600}.choice:hover{border-color:var(--navy-2)}.choice.right{border-color:var(--ok);background:color-mix(in srgb, var(--ok) 12%, var(--card))}.choice.wrong{border-color:var(--bad);background:color-mix(in srgb, var(--bad) 10%, var(--card))}.choice:disabled{cursor:default}.feedback{background:var(--bg);border:1px solid var(--line);border-radius:12px;margin-top:12px;padding:12px 14px}.feedback.ok{border-color:var(--ok)}.feedback.bad{border-color:var(--bad)}.score{font-variant-numeric:tabular-nums;font-weight:800}.notation{border:1px solid var(--line);color:#1d2433;background:#fffdf8;border-radius:12px;padding:6px 4px;overflow:hidden}:root[data-theme=dark] .notation{background:#f4efe2}.notation svg{max-width:100%;height:auto}.notation .abcjs-highlight,.notation .hl{fill:#d4380d;stroke:#d4380d}.notation-controls{flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;display:flex}select,input[type=range],input[type=text],input[type=search],input[type=number]{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;min-height:40px;padding:8px 10px}input[type=range]{accent-color:var(--navy-2);padding:0}label.field{color:var(--muted);flex-direction:column;gap:4px;font-size:.85rem;font-weight:600;display:flex}.visual{margin:12px 0 4px}.visual svg{width:100%;height:auto;display:block}.visual figcaption{color:var(--muted);text-align:center;margin-top:6px;font-size:.85rem}.kbd-key{cursor:pointer;transition:fill .12s}.kbd-white{fill:#fff;stroke:#333;stroke-width:1px}.kbd-black{fill:#222}.kbd-white.on{fill:var(--gold)}.kbd-black.on{fill:#b8860b}.kbd-white.press{fill:#ffe9a8}.kbd-black.press{fill:#6b5a1d}.ladder-rung{cursor:pointer;transition:transform .2s,fill .2s}.pulse{animation:.35s pulse}@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.12)}to{transform:scale(1)}}.big-number{font-family:var(--serif);font-size:3rem;font-weight:700;line-height:1}.breath-ring{transition:r .2s linear}.tool-tile{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);color:inherit;border-radius:16px;flex-direction:column;gap:6px;padding:16px;text-decoration:none;display:flex}.tool-tile .ico{font-size:1.8rem}.tool-tile b{font-family:var(--serif);font-size:1.05rem}.tuner-needle{transform-origin:150px 150px;transition:transform .12s linear}.pitch-grid{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.pitch-grid .btn{min-height:54px;padding:4px}.segmented{border:1px solid var(--line);border-radius:12px;display:inline-flex;overflow:hidden}.segmented button{background:var(--card);cursor:pointer;border:0;padding:8px 14px;font-weight:700}.segmented button.on{background:var(--navy);color:#fff}.tabs{gap:8px;margin-bottom:14px;display:flex;overflow-x:auto}.empty{text-align:center;color:var(--muted);padding:28px 12px}.kv{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:10px;padding:10px 0;display:flex}.kv:last-child{border-bottom:0}.toggle{background:var(--line);cursor:pointer;border:0;border-radius:999px;flex:none;width:48px;height:28px;position:relative}.toggle:after{content:"";background:#fff;border-radius:50%;width:22px;height:22px;transition:left .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000040}.toggle.on{background:var(--teal)}.toggle.on:after{left:23px}.done-hero{text-align:center;padding:18px 8px}.done-hero .big{font-size:3.2rem}.unit-head{justify-content:space-between;align-items:baseline;padding:12px 14px 4px;display:flex}.level-head{align-items:center;gap:10px;margin:22px 0 8px;display:flex}.level-head .bar{background:var(--line);border-radius:999px;flex:1;height:6px;overflow:hidden}.level-head .bar>div{background:var(--teal);height:100%}@media (width>=720px){.page{padding:24px}.hero img{aspect-ratio:3/1.1}h1{font-size:2rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.continue-btn{text-align:left;flex-direction:column;align-items:flex-start;gap:2px;padding:14px 18px;display:flex}.continue-btn .k{text-transform:uppercase;letter-spacing:.08em;opacity:.8;font-size:.78rem;font-weight:700}.continue-btn .t{font-size:1.12rem;font-weight:700}@media (width>=980px){.teach-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:28px;display:grid}.teach-grid .visual{margin-top:0}:root[data-text=presenter] .player-pad{height:110px}}.modal-backdrop{z-index:60;background:#0a0e1999;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.modal{text-align:center;width:100%;max-width:420px;margin:0}.modal .row{justify-content:center}.qr{background:#fff;border-radius:12px;width:min(300px,80vw);margin:0 auto 10px;padding:10px}.qr svg{width:100%;height:auto;display:block}.notation path.shape-head{fill:#1d2433;stroke:#1d2433;stroke-width:.6px}.notation path.shape-head.hollow{fill:none;stroke-width:1.4px}.notation path.abcjs-notehead.hl+path.shape-head{fill:#d4380d;stroke:#d4380d}.notation path.abcjs-notehead.hl+path.shape-head.hollow{fill:none}