:root{--bg: #f6efe3;--bg-2: #efe5d4;--card: #fffaf2;--card-2: #f8efe1;--ink: #2b1f16;--ink-soft: #6b5a4c;--muted: #8a7867;--line: #e6d8c3;--line-strong: #cdb99d;--accent: #d9772b;--accent-ink: #ffffff;--accent-soft: rgba(217, 119, 43, .16);--good: #2f9a64;--good-soft: rgba(47, 154, 100, .14);--bad: #d14b3c;--bad-soft: rgba(209, 75, 60, .12);--third: #e0a526;--fifth: #3b7dd8;--info: #7a5fb0;--wood-1: #3f2518;--wood-2: #573321;--fret: #cfc5b6;--nut: #efe6d2;--string: #e3d6bf;--inlay: #efe2c8;--shadow: 0 1px 2px rgba(60, 35, 15, .06), 0 6px 24px rgba(60, 35, 15, .07);--radius: 18px;--font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--display: "Fraunces", Georgia, serif;color-scheme:light}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg: #15100c;--bg-2: #1b1510;--card: #211912;--card-2: #2a2018;--ink: #f4eadc;--ink-soft: #cdbca8;--muted: #a08e7a;--line: #3a2d22;--line-strong: #56442f;--accent: #f08c3c;--accent-soft: rgba(240, 140, 60, .18);--good: #3dbb7c;--bad: #ec6556;--wood-1: #2a170e;--wood-2: #3b2216;--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);color-scheme:dark}}:root[data-theme=dark]{--bg: #15100c;--bg-2: #1b1510;--card: #211912;--card-2: #2a2018;--ink: #f4eadc;--ink-soft: #cdbca8;--muted: #a08e7a;--line: #3a2d22;--line-strong: #56442f;--accent: #f08c3c;--accent-soft: rgba(240, 140, 60, .18);--good: #3dbb7c;--bad: #ec6556;--wood-1: #2a170e;--wood-2: #3b2216;--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 28px rgba(0, 0, 0, .35);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body{overflow-x:hidden}a{color:inherit}h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0 0 .4em}h1{font-size:clamp(1.7rem,3.2vw,2.5rem)}h2{font-size:1.35rem}h3{font-size:1.05rem;margin-top:1em}p{margin:0 0 .8em}button{font:inherit;color:inherit}.muted{color:var(--muted)}.small{font-size:.85rem}.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-size:.72rem;font-weight:700;color:var(--accent);margin:0 0 .35em}.lede{font-size:1.08rem;color:var(--ink-soft);max-width:62ch}.center{display:flex;justify-content:center}.mt{margin-top:1.2em}.error{color:var(--bad);margin-top:.8em}:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:24px;padding:24px 16px;border-right:1px solid var(--line);background:var(--bg-2)}.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.05;padding:0 8px}.brand em{font-style:italic;color:var(--accent);font-weight:600}.brand.small{font-size:1.05rem;white-space:nowrap}.logo{width:40px;height:40px;flex:none}.brand.small .logo{width:30px;height:30px}.side-nav{display:flex;flex-direction:column;gap:4px}.side-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;font-weight:600;color:var(--ink-soft);transition:background .15s,color .15s}.side-link:hover{background:var(--card);color:var(--ink)}.side-link.on{background:var(--card);color:var(--accent);box-shadow:var(--shadow)}.nav-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:12px}.side-level{display:flex;flex-direction:column;gap:4px;padding:14px;background:var(--card);border-radius:14px;border:1px solid var(--line)}.sound-toggle{justify-content:flex-start}.main{min-width:0;padding:32px clamp(16px,4vw,48px) 64px}.page{max-width:1100px;margin:0 auto}.topbar,.tabbar{display:none}@media (max-width: 900px){.app{grid-template-columns:1fr}.sidebar{display:none}.topbar{display:flex;position:sticky;top:0;z-index:20;align-items:center;justify-content:space-between;padding:10px 16px;padding-top:max(10px,env(safe-area-inset-top));background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topbar-stats{display:flex;gap:6px;align-items:center}.main{padding:20px 16px calc(96px + env(safe-area-inset-bottom))}.tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:color-mix(in srgb,var(--card) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}.tab{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;font-weight:600;text-decoration:none;color:var(--muted);padding:4px 0}.tab.on{color:var(--accent)}.app.immersive .tabbar{display:none}.app.immersive .main{padding-bottom:32px}.desktop-only{display:none!important}}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(16px,2.4vw,28px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;border:1.5px solid transparent;font-weight:650;text-decoration:none;cursor:pointer;transition:transform .08s,background .15s,box-shadow .15s,opacity .15s;white-space:nowrap;min-height:44px}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-lg{padding:14px 26px;font-size:1.05rem}.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 14px -4px var(--accent)}.btn-primary:hover:not(:disabled){filter:brightness(1.06)}.btn-secondary{background:var(--accent-soft);color:var(--accent)}.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}.btn-ghost:hover:not(:disabled){background:var(--card-2)}.btn.danger{color:var(--bad);border-color:var(--bad)}.icon-btn{width:40px;height:40px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);cursor:pointer;font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center}.row-wrap{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{padding:6px 12px;border-radius:999px;border:1.5px solid var(--line-strong);background:var(--card);font-weight:600;font-size:.9rem;cursor:pointer;min-width:40px}.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.chip.static{cursor:default}.segmented{display:inline-flex;flex-wrap:wrap;background:var(--card-2);border:1px solid var(--line);border-radius:12px;padding:3px;gap:2px}.segmented button{border:0;background:transparent;padding:7px 12px;border-radius:9px;font-weight:600;font-size:.88rem;cursor:pointer;color:var(--ink-soft)}.segmented button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 4px #0000001f}.select{padding:8px 12px;border-radius:10px;border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink);font:inherit;font-weight:600}.check{display:inline-flex;gap:6px;align-items:center;font-size:.9rem;cursor:pointer}.meter{height:8px;background:var(--line);border-radius:999px;overflow:hidden;flex:1}.meter>div{height:100%;background:linear-gradient(90deg,var(--accent),var(--third));border-radius:999px;transition:width .6s cubic-bezier(.2,.8,.2,1)}.meter.big{height:12px;margin:12px 0;max-width:520px}.stat-chip{white-space:nowrap;display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-weight:700;font-size:.88rem;font-variant-numeric:tabular-nums}.stat-chip.combo.hot{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.stat-chip em{font-style:normal;color:var(--accent)}.tag{display:inline-block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:700;font-size:.85rem;margin-bottom:12px}.badge-gold{background:linear-gradient(90deg,#f6c453,#e79a2c);color:#3a2408}.kbd{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:1px solid var(--line-strong);font-size:.75rem;color:var(--muted);margin-right:6px}.page-head{margin-bottom:28px}.section-title{margin:32px 0 6px}.section-sub{margin-bottom:14px}.hint{text-align:center;margin-top:10px;font-size:.9rem}.empty{padding:24px;text-align:center;color:var(--muted);border:2px dashed var(--line);border-radius:14px}.loading{padding:48px;text-align:center;color:var(--muted)}.fretboard{width:100%;margin:12px 0;user-select:none;-webkit-user-select:none;touch-action:manipulation}.fretboard svg{display:block;width:100%;height:auto;overflow:visible}.fretboard.is-vertical svg{margin:0 auto;width:auto;max-width:100%}.fb-fretnum{font-size:12px;fill:var(--muted);font-weight:600;font-family:var(--font)}.fb-fretnum.dot{fill:var(--ink-soft);font-weight:800}.fb-stringname{font-size:14px;font-weight:800;fill:var(--ink-soft);font-family:var(--font)}.fb-faint{font-size:11px;fill:#fff5e199;font-weight:600;font-family:var(--font);pointer-events:none}.fb-hit{fill:transparent;cursor:default}.fb-hit.on{cursor:pointer}.fb-hit.on:hover{fill:#ffdcaa1f}.fb-hit.tapped{fill:#ffdcaa47}.fb-marker{pointer-events:none}.fb-marker circle{stroke-width:2.5;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));animation:marker-in .22s cubic-bezier(.2,1.4,.4,1);transform-box:fill-box;transform-origin:center}.fb-marker text{font-family:var(--font);font-weight:800;fill:#fff}.tone-accent circle{fill:var(--accent);stroke:#ffe3c4}.tone-root circle,.tone-good circle{fill:var(--good);stroke:#d4f5e2}.tone-bad circle{fill:var(--bad);stroke:#ffd9d3}.tone-info circle{fill:#f3e6cf;stroke:#fff}.tone-info text{fill:#3a2616}.tone-third circle{fill:var(--third);stroke:#fff1cc}.tone-third text{fill:#3a2608}.tone-fifth circle{fill:var(--fifth);stroke:#d6e6ff}.tone-muted circle{fill:#8c7a68;stroke:#cbbca9}.tone-ghost circle{fill:#ffffff1f;stroke:#fff;stroke-dasharray:4 3}.fb-marker.pulse circle{animation:pulse 1.1s ease-in-out infinite}@keyframes marker-in{0%{transform:scale(.3);opacity:0}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}.play-btn{display:inline-flex;align-items:center;gap:10px;padding:9px 18px 9px 10px;border-radius:999px;border:1.5px solid var(--accent);background:var(--accent-soft);color:var(--ink);font-weight:650;cursor:pointer;margin:6px 8px 6px 0;transition:transform .08s}.play-btn:active{transform:scale(.98)}.play-btn.small{padding:6px 14px 6px 8px;font-size:.9rem}.play-icon{display:inline-flex;width:28px;height:28px;border-radius:999px;background:var(--accent);color:#fff;align-items:center;justify-content:center;font-size:.7rem;padding-left:2px}.play-btn.small .play-icon{width:24px;height:24px}.play-btn.on .play-icon{animation:pulse .6s ease-in-out infinite}.callout{display:flex;gap:12px;padding:14px 16px;border-radius:14px;background:var(--card-2);border:1px solid var(--line);margin:14px 0}.callout-key{background:var(--accent-soft);border-color:transparent}.callout-try{background:var(--good-soft);border-color:transparent}.callout-icon{font-size:1.2rem}.note-pills{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.note-pill{padding:5px 12px;border-radius:10px;background:var(--card-2);border:1px solid var(--line);font-weight:700;font-variant-numeric:tabular-nums}.note-pill.hi{background:var(--good);border-color:var(--good);color:#fff}.note-pill.miss{background:var(--bad-soft);border-color:transparent;color:var(--bad)}.formula{font-family:var(--display);font-size:1.5rem;letter-spacing:.08em;text-align:center;color:var(--accent);margin:12px 0}.tab-view{margin:14px 0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px}.tab-scroll{overflow-x:auto}.tab-scroll svg{display:block;width:100%;height:auto}.tab-name{font-size:11px;font-weight:800;fill:var(--muted);font-family:var(--font)}.tab-num{font-size:14px;font-weight:800;fill:var(--ink);font-family:var(--font)}.tab-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.9rem}.chord-diagram{margin:0;display:flex;flex-direction:column;align-items:center}.chord-diagram figcaption{font-family:var(--display);font-weight:700;font-size:1.3rem}.cd-play{border:0;background:none;cursor:pointer;padding:4px;border-radius:12px}.cd-play:hover{background:var(--card-2)}.cd-base{font-size:11px;font-weight:700;fill:var(--muted);font-family:var(--font)}.cd-string{font-size:10px;font-weight:700;fill:var(--muted);font-family:var(--font)}.cd-open{font-size:14px;fill:var(--ink)}.cd-finger{font-size:11px;font-weight:800;fill:#fff;font-family:var(--font)}.chord-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:12px 0}.progression{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0}.prog-chords{display:flex;flex-wrap:wrap;gap:6px}.prog-chip{min-width:44px;text-align:center;padding:8px 10px;border-radius:10px;border:1.5px solid var(--line-strong);font-weight:800;font-family:var(--display);transition:all .12s}.prog-chip.on{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}.interval-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}.interval-cell{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card-2);cursor:pointer}.interval-cell:hover{border-color:var(--accent)}.iv-short{font-weight:800;color:var(--accent)}.iv-name{font-weight:650;font-size:.92rem}.iv-song{font-size:.78rem;color:var(--muted)}.cof{display:block;margin:0 auto}.cof-dot{fill:var(--card);stroke:var(--line-strong);stroke-width:1.5;transition:fill .15s}.cof-key:hover .cof-dot{fill:var(--accent-soft)}.cof-key.on .cof-dot{fill:var(--accent);stroke:var(--accent)}.cof-major{font-family:var(--display);font-weight:700;font-size:17px;fill:var(--ink);pointer-events:none}.cof-key.on .cof-major{fill:#fff}.cof-minor{font-size:11px;font-weight:600;fill:var(--muted);pointer-events:none}.cof-center{font-family:var(--display);font-size:22px;font-weight:700;fill:var(--ink)}.cof-center-sub{font-size:10px;fill:var(--muted);font-weight:600}.cof-demo{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:20px;align-items:center}@media (max-width: 640px){.cof-demo{grid-template-columns:1fr}}.diatonic{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:8px 0 14px}.dia-cell{display:flex;flex-direction:column;align-items:center;padding:8px 2px;border-radius:10px;background:var(--card-2);border:1px solid var(--line)}.dia-cell.maj{background:var(--accent-soft);border-color:transparent}.dia-roman{font-size:.75rem;font-weight:700;color:var(--muted)}.dia-name{font-family:var(--display);font-weight:700;font-size:1.05rem}@media (max-width: 480px){.dia-name{font-size:.85rem}}ul.tight{margin:0 0 12px;padding-left:20px}ul.tight li{margin:2px 0}.metronome{display:flex;flex-direction:column;align-items:center;gap:14px}.metronome.compact{background:var(--card-2);border-radius:14px;padding:14px;margin:12px 0}.met-dots{display:flex;gap:10px}.met-dot{width:18px;height:18px;border-radius:999px;background:var(--line);transition:transform .06s,background .06s}.met-dot.accent{box-shadow:inset 0 0 0 2px var(--accent)}.met-dot.on{background:var(--accent);transform:scale(1.3)}.met-bpm{display:flex;align-items:center;gap:18px}.met-readout{display:flex;flex-direction:column;align-items:center;line-height:1}.met-num{font-family:var(--display);font-size:3.2rem;font-weight:700;font-variant-numeric:tabular-nums}.metronome.compact .met-num{font-size:2.2rem}.met-slider{width:min(420px,100%);accent-color:var(--accent)}.met-controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}.hero{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;background:radial-gradient(circle at 100% 0%,var(--accent-soft),transparent 55%),var(--card)}.hero h1{max-width:20ch}.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.hero-stats{display:flex;flex-direction:column;align-items:center;gap:16px}.ring{position:relative;width:132px;height:132px}.ring svg{width:100%;height:100%}.ring-label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}.ring-label strong{font-family:var(--display);font-size:1.8rem}.ring-label span{font-size:.75rem;color:var(--muted)}.stat-stack{display:flex;flex-direction:column;gap:6px}.stat{display:flex;align-items:center;gap:8px;font-size:.92rem}@media (max-width: 720px){.hero{grid-template-columns:1fr}.hero-stats{flex-direction:row;justify-content:flex-start}.ring{width:104px;height:104px}}.next-lesson{display:flex;align-items:center;gap:16px;text-decoration:none;transition:transform .12s,border-color .12s}.next-lesson:hover{transform:translateY(-2px);border-color:var(--accent)}.next-lesson-body{display:flex;flex-direction:column;gap:2px;flex:1}.next-lesson-body strong{font-family:var(--display);font-size:1.25rem}.next-meta{text-align:right;font-size:.85rem}.unit-icon{font-size:2rem;width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:16px;background:var(--card-2);border:1px solid var(--line)}.course-meter{display:flex;align-items:center;gap:12px;max-width:520px}.units{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,480px),1fr));gap:18px}.unit-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:10px}.unit-head>div{flex:1}.unit-head h2{margin-bottom:2px}.unit-count{font-weight:700;font-size:.85rem;padding:3px 10px;border-radius:999px;background:var(--card-2);color:var(--muted)}.unit-count.complete{background:var(--good);color:#fff}.lesson-path{list-style:none;margin:0;padding:0;position:relative}.lesson-path li{position:relative}.lesson-path li+li:before{content:"";position:absolute;left:25px;top:-10px;height:20px;border-left:2px dashed var(--line-strong)}.lesson-link{display:flex;align-items:center;gap:14px;padding:10px 8px;border-radius:14px;text-decoration:none;transition:background .12s}.lesson-link:hover{background:var(--card-2)}.lesson-dot{width:36px;height:36px;flex:none;border-radius:999px;border:2px solid var(--line-strong);background:var(--card);display:flex;align-items:center;justify-content:center;font-weight:800;margin-left:8px;font-size:.85rem;z-index:1}li.done .lesson-dot{background:var(--good);border-color:var(--good);color:#fff}li.next .lesson-dot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 5px var(--accent-soft)}li.next .lesson-link{background:var(--accent-soft)}.lesson-text{display:flex;flex-direction:column;flex:1;min-width:0}.lesson-text .muted{font-size:.88rem}.lesson-meta{font-size:.78rem;white-space:nowrap}@media (max-width: 520px){.lesson-meta{display:none}}.lesson-page{max-width:820px}.lesson-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}.back-link{text-decoration:none;font-weight:650;color:var(--muted);white-space:nowrap}.lesson-top .back-link{font-size:1.3rem;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px}.lesson-top .back-link:hover{background:var(--card-2)}.lesson-progress{flex:1;display:flex;gap:4px}.lesson-progress span{flex:1;height:8px;border-radius:999px;background:var(--line);transition:background .3s}.lesson-progress span.done{background:var(--good)}.lesson-progress span.cur{background:var(--accent)}.lesson-count{font-variant-numeric:tabular-nums;font-size:.85rem}.step-card{animation:slide-in .28s cubic-bezier(.2,.8,.2,1);min-height:300px}@keyframes slide-in{0%{opacity:0;transform:translate(16px)}}.prose{font-size:1.05rem}.prose h2{font-size:1.6rem}.prose h2.q{font-size:1.4rem}.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:18px}.lesson-nav .btn-primary{min-width:180px}@media (max-width: 900px){.lesson-nav{position:sticky;bottom:0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--bg) 30%)}.lesson-nav .btn-primary{flex:1}}.choice-list{display:grid;gap:10px;margin:16px 0}.choice{text-align:left;padding:14px 18px;border-radius:14px;border:2px solid var(--line);background:var(--card);font-weight:600;cursor:pointer;transition:border-color .12s,background .12s,transform .08s}.choice:hover:not(:disabled){border-color:var(--accent)}.choice:active:not(:disabled){transform:scale(.99)}.choice.good{border-color:var(--good);background:var(--good-soft)}.choice.bad{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}.choice:disabled{opacity:.5;cursor:default}.shake{animation:shake .35s}@keyframes shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.explain{padding:12px 16px;border-radius:12px;background:var(--good-soft);margin-top:12px}.explain.bad{background:var(--bad-soft)}.pop-in{animation:pop .25s cubic-bezier(.2,1.3,.4,1)}@keyframes pop{0%{opacity:0;transform:scale(.96)}}.lesson-done{position:relative;overflow:hidden}.stars{font-size:2.4rem;letter-spacing:6px;color:var(--line-strong)}.stars .on{color:#f2b33d;text-shadow:0 2px 8px rgba(242,179,61,.5)}.practice-links{display:flex;flex-direction:column;align-items:center;gap:8px;margin:18px 0}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}@keyframes fall{to{transform:translateY(620px) rotate(540deg);opacity:0}}.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}.game-card{display:flex;gap:14px;align-items:flex-start;text-decoration:none;transition:transform .12s,border-color .12s}.game-card:hover{transform:translateY(-2px);border-color:var(--accent)}.game-icon{font-size:1.8rem;width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--accent-soft)}.game-card-body{display:flex;flex-direction:column;gap:3px}.game-card-body strong{font-family:var(--display);font-size:1.2rem}.game-card-body .muted{font-size:.9rem}.game-card-stats{font-size:.8rem!important;margin-top:4px}.game-page{max-width:980px}.game-settings{margin-bottom:14px;background:var(--card-2);border:1px solid var(--line);border-radius:14px;padding:10px 16px}.game-settings summary{cursor:pointer;font-weight:700;color:var(--ink-soft)}.game-settings[open] summary{margin-bottom:8px}.settings-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:6px 0}.settings-label{width:90px;font-weight:700;font-size:.85rem;color:var(--muted)}.game-header{margin-bottom:12px}.game-header-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.game-title{font-size:1.6rem;margin:0;flex:1}.game-stats{display:flex;gap:6px}.game-progress{height:6px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:12px}.game-progress-fill{height:100%;background:var(--accent);transition:width .3s}.game-progress-fill.urgent{background:var(--bad)}.game-progress-label{font-size:.8rem;margin-top:4px}.prompt{text-align:center;padding:18px}.prompt-text{font-size:1.25rem;font-weight:600}.prompt-note{display:inline-block;font-family:var(--display);font-size:2rem;font-weight:700;color:var(--accent);margin:0 4px;vertical-align:-3px}.verdict{min-height:1.6em;font-weight:700;margin-top:4px}.verdict-good{color:var(--good)}.verdict-bad{color:var(--bad)}.answer-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:8px}.answer-grid.twelve{grid-template-columns:repeat(6,1fr)}.answer-grid.four{grid-template-columns:repeat(2,1fr)}.answer-grid.three{grid-template-columns:repeat(3,1fr)}.answer-grid.intervals{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}@media (max-width: 600px){.answer-grid,.answer-grid.twelve{grid-template-columns:repeat(4,1fr)}.answer-grid.four,.answer-grid.three{grid-template-columns:1fr}}.answer-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:10px 8px;border-radius:14px;border:2px solid var(--line);background:var(--card);font-weight:700;font-size:1.1rem;cursor:pointer;transition:border-color .12s,background .12s,transform .08s;box-shadow:0 2px 0 var(--line)}.answer-grid.four .answer-btn{flex-direction:row;justify-content:flex-start;font-size:1rem;text-align:left}.answer-btn span{font-size:.78rem;font-weight:500;color:var(--muted)}.answer-btn:hover{border-color:var(--accent)}.answer-btn:active{transform:translateY(2px);box-shadow:none}.answer-btn.good{background:var(--good);border-color:var(--good);color:#fff}.answer-btn.bad{background:var(--bad);border-color:var(--bad);color:#fff;animation:shake .35s}.answer-btn.reveal{border-color:var(--good);box-shadow:0 0 0 3px var(--good-soft)}.ear-prompt{display:flex;align-items:center;justify-content:center;gap:18px;text-align:left}.big-play{width:72px;height:72px;border-radius:999px;border:0;background:var(--accent);color:#fff;font-size:1.6rem;cursor:pointer;box-shadow:0 6px 20px -6px var(--accent);flex:none;padding-left:6px}.big-play:active{transform:scale(.96)}.after-answer{margin-top:14px}.legend{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-size:.85rem}.results{text-align:center;max-width:560px;margin:24px auto}.results-emoji{font-size:3rem;margin-bottom:4px}.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.results-grid>div{display:flex;flex-direction:column;background:var(--card-2);border-radius:12px;padding:10px 4px}.results-grid .big{font-family:var(--display);font-size:1.6rem;font-weight:700}.results-grid .muted{font-size:.75rem}@media (max-width: 480px){.results-grid{grid-template-columns:repeat(2,1fr)}}.results-misses{margin:10px 0}.results-misses .note-pills{justify-content:center}.results-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}.mic-gate{text-align:center;max-width:560px;margin:0 auto}.listen-meter{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:12px}.listen-heard{display:flex;align-items:baseline;gap:10px}.heard-note{font-family:var(--display);font-size:2.4rem;font-weight:700;min-width:2ch;text-align:center;transition:color .1s}.heard-note.on{color:var(--good)}.level-bar{width:min(320px,100%);height:6px;border-radius:999px;background:var(--line);overflow:hidden}.level-bar div{height:100%;background:var(--fifth);transition:width .08s}.hold-ring{width:min(320px,100%);height:6px;border-radius:999px;background:linear-gradient(90deg,var(--good) calc(var(--p) * 100%),var(--line) 0)}.tool-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;scrollbar-width:none}.tool-tab{white-space:nowrap;text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-weight:600;font-size:.9rem}.tool-tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.tool-title{margin-bottom:14px}.tool-controls{padding:14px 18px;margin-bottom:14px}.explorer-summary{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.explorer-summary h2{margin:0}.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}.chord-grid.wide{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}.chord-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px}.chord-tile .level{color:var(--third);font-size:.8rem}.chips.wrap{margin:10px 0}.tuner-card{text-align:center;max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}.tuner-dial{width:min(320px,100%)}.tuner-note{font-family:var(--display);font-size:3.4rem;font-weight:700;line-height:1}.tuner-note.in{color:var(--good)}.ref-tones{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:520px}.ref-tone{display:flex;flex-direction:column;align-items:center;padding:14px 8px;border-radius:14px;border:1.5px solid var(--line-strong);background:var(--card);cursor:pointer}.ref-tone strong{font-family:var(--display);font-size:1.6rem}.ref-tone.on{border-color:var(--accent);background:var(--accent-soft)}.circle-tool{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:24px;align-items:start}@media (max-width: 760px){.circle-tool{grid-template-columns:1fr}}.bars{position:relative;display:grid;grid-template-columns:repeat(14,1fr);gap:6px;height:160px;align-items:end}.bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px;font-size:.72rem}.bar{width:100%;max-width:34px;min-height:3px;border-radius:6px 6px 2px 2px;background:var(--line-strong);max-height:calc(100% - 22px)}.bar.goal{background:var(--accent)}.goal-line{display:none}.page>section.card{margin-bottom:18px}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}@media (max-width: 820px){.two-col{grid-template-columns:1fr}}.skill-bars{display:grid;gap:8px}.skill-bar{display:grid;grid-template-columns:36px 1fr 48px;align-items:center;gap:10px;font-weight:700;font-size:.9rem}.game-stat-list{list-style:none;padding:0;margin:0}.game-stat-list li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.92rem}.settings-card .settings-label{width:110px}