body{padding:0 16px 64px}.wrap{max-width:1000px;margin:0 auto}.prose{max-width:66ch}.hero{gap:20px;padding-block:40px 28px;display:grid}.hero .lead{max-width:60ch;font-size:1.12rem}.back{font-family:var(--f-mono);font-size:.85rem;text-decoration:none}.notice{border:1px solid var(--amber);background:var(--surface);border-radius:10px;padding:12px 14px}.contents{border-top:1px solid var(--line);gap:16px;padding-top:24px;display:grid}.lesson-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.lesson-card{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;grid-template-columns:auto 1fr;gap:4px 14px;padding:16px 18px;text-decoration:none;display:grid}.lesson-card:hover{border-color:var(--accent)}.review-list{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.review-card{border:1px solid var(--line);background:var(--surface);border-radius:12px;flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;display:flex}.review-card.next{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.review-card h2{margin:0;font-size:1.1rem}.review-card p{margin:0}.review-card .btn{margin-top:auto;text-decoration:none}.reason{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:.75rem}.reason.weak,.reason.stale{color:var(--amber)}.review-card.next .reason{color:var(--accent)}.toc-review{margin-top:8px;font-weight:600;display:inline-block}.trainer{font-size:.9rem;font-weight:600;display:inline-block}.lesson-card .num{font-family:var(--f-mono);color:var(--accent);grid-row:span 3}.lesson-title{font-family:var(--f-display);font-size:1.25rem;font-weight:700}.lesson-summary{color:var(--muted)}.lesson-status{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);white-space:nowrap;vertical-align:.2em;margin-left:6px;font-size:.7rem;font-weight:400}.lesson-status.started{color:var(--amber)}.lesson-status.done{color:var(--accent)}.lesson-ids{font-family:var(--f-mono);color:var(--muted);font-size:.78rem}.steps-index{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:8px 0 0;padding:0;list-style:none;display:grid}.steps-index a{border:1px solid var(--line);color:var(--ink);background:var(--surface);border-radius:10px;align-items:baseline;gap:10px;height:100%;padding:12px 14px;font-size:.92rem;line-height:1.35;text-decoration:none;display:flex}.steps-index a:hover{border-color:var(--accent)}.steps-index b{font-family:var(--f-mono);color:var(--accent);font-weight:600}.step{border-top:1px solid var(--line);gap:18px;padding-block:44px 8px;scroll-margin-top:12px;display:grid}.step-head{gap:8px;display:grid}.step-head .num{font-family:var(--f-mono);color:var(--accent);letter-spacing:.06em;font-size:.8rem;font-weight:600}.text{gap:12px;display:grid}.caption{font-family:var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums;min-height:1.4em;font-size:.82rem}.formula{font-family:var(--f-mono);flex-wrap:wrap;align-items:center;gap:6px;font-size:1.05rem;display:flex}.formula span{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 10px}.formula .h{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.legend{color:var(--muted);flex-wrap:wrap;gap:14px;font-size:.85rem;display:flex}.swatch{vertical-align:-1px;border-radius:50%;width:12px;height:12px;margin-right:6px;display:inline-block}.swatch.home{background:var(--accent)}.swatch.homeMajor{background:var(--amber)}.swatch.plain{background:var(--dot);border:1px solid var(--line)}.pair{fill:none;stroke:var(--fret);stroke-width:1.5px;stroke-dasharray:4 4;transition:opacity .3s}.pair.odd{stroke:var(--amber)}.pair.on{stroke:var(--accent);stroke-dasharray:none;stroke-width:2.5px}.pair.odd.on{stroke:var(--amber)}.pair.faded{opacity:.25}.arc path{fill:none;stroke:var(--accent);stroke-width:2px}.arc text{fill:var(--accent);font-family:var(--f-mono);text-anchor:middle;font-size:13px;font-weight:600}.arc{transition:opacity .25s}.arc.dim{opacity:.15}.arc.half path{stroke:var(--amber)}.arc.half text{fill:var(--amber)}.formula .half{color:var(--amber);border-color:var(--amber)}.swatch.whole{background:var(--accent)}.swatch.half{background:var(--amber)}.band line{stroke:var(--amber);stroke-width:3px;stroke-linecap:round}.letters{font-family:var(--f-mono);grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none;display:grid}.letters li{border:1px solid var(--line);background:var(--bg);border-radius:8px;justify-items:center;gap:2px;min-height:3.6em;padding:8px 4px;display:grid}.letters b{color:var(--muted);font-size:.78rem}.letters span{font-size:.95rem;font-weight:600}.letters .twice{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}.letters .empty{border-style:dashed}.caption.warn{color:var(--ink);border-left:3px solid var(--amber);padding-left:8px}.note{border-left:3px solid var(--accent);padding-left:10px;font-size:.92rem}.homemap{gap:8px;display:grid}.homemap .finder>span{min-width:4.5em;font-family:var(--f-mono);align-self:center}.quiz{flex-wrap:wrap;align-items:center;gap:10px 16px;display:flex}.quiz .question{font-family:var(--f-display);font-size:1.15rem;font-weight:700}.caption.good{color:var(--accent);font-weight:600}.guideline{fill:none;stroke:var(--accent);stroke-width:3px;stroke-opacity:.45;stroke-linejoin:round;stroke-linecap:round}.olink line{stroke:var(--accent);stroke-width:2px}.olink text{fill:var(--accent);font-family:var(--f-mono);text-anchor:middle;paint-order:stroke;stroke:var(--wood);stroke-width:4px;font-size:12px;font-weight:600}.olink.b line{stroke:var(--amber)}.olink.b text{fill:var(--amber)}.olink.outer line{stroke:var(--fret);stroke-dasharray:4 4;stroke-width:1.5px}.olink.outer text{fill:var(--string);font-size:11px;font-weight:400}.beatgrid .lane{fill:var(--bg)}.beatgrid .now{fill:var(--accent);fill-opacity:.16}.beatgrid .cellline{stroke:var(--line);stroke-width:1px}.beatgrid .beatline{stroke:var(--muted);stroke-width:1.5px}.block rect{fill:var(--dot);stroke:var(--wood-edge);stroke-width:1px;transition:fill .12s}.block text{fill:var(--dot-ink);font-family:var(--f-mono);text-anchor:middle;dominant-baseline:central;pointer-events:none;font-size:15px;font-weight:600}.block.accent rect{fill:var(--amber);stroke:none}.block.accent text{fill:var(--amber-ink)}.block.rest rect{fill:#0000;stroke:var(--muted);stroke-dasharray:5 4}.block.rest text{fill:var(--muted)}.block.ghost rect{fill:#0000;stroke:var(--line)}.block.ghost text{fill:var(--muted);opacity:.5}.block.on:not(.rest):not(.ghost) rect{fill:var(--accent)}.block.on:not(.rest):not(.ghost) text{fill:var(--accent-ink)}.block.click{cursor:pointer;outline:none}.block.click:hover rect,.block.click:focus-visible rect{stroke:var(--accent);stroke-width:2px}.word{fill:var(--muted);font-family:var(--f-mono);text-anchor:middle;font-size:13px}.word.beat{fill:var(--ink);font-weight:600}.word.on{fill:var(--accent);font-weight:700}.swatch.note{background:var(--dot);border:1px solid var(--line);border-radius:3px}.swatch.rest{border:1px dashed var(--muted);border-radius:3px}.checklist{gap:6px;display:grid}.checklist ul{gap:2px;margin:0;padding-left:1.2em;font-size:.92rem;display:grid}.skip{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;display:grid}.skip div{border:1px solid var(--line);border-radius:10px;gap:4px;min-width:0;padding:14px;display:grid}.skip h3{text-decoration:line-through;-webkit-text-decoration-color:var(--amber);text-decoration-color:var(--amber);text-decoration-thickness:2px}.skip p{color:var(--muted);font-size:.9rem}.lesson-nav{border-top:1px solid var(--line);gap:16px;padding-top:24px;display:grid}.lesson-nav-links{grid-template-columns:1fr 1fr;gap:12px;display:grid}.lesson-nav-card{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;gap:4px;padding:16px 18px;text-decoration:none;display:grid}.lesson-nav-card:hover{border-color:var(--accent)}.lesson-nav-card.next{text-align:right;grid-column:2}@media (width<=520px){.lesson-nav-links{grid-template-columns:1fr}.lesson-nav-card.next{grid-column:1}}.foot{color:var(--muted);padding-block:40px 0;font-size:.85rem}.kink circle{fill:none;stroke:var(--amber);stroke-width:1.5px;stroke-dasharray:3 3}.kink line{stroke:var(--amber);stroke-width:2px}.swatch.kinkghost{border:1.5px dashed var(--amber)}.shared{fill:var(--amber);fill-opacity:.28;stroke:var(--amber);stroke-width:1.5px}.gaptag rect{fill:var(--wood-edge);stroke:var(--fret);stroke-opacity:.5;stroke-width:1px}.gaptag text{fill:var(--nut);font-family:var(--f-mono);dominant-baseline:middle;font-size:12px;font-weight:600}.legend .gaps{font-family:var(--f-mono);color:var(--accent)}.swatch.blue{background:var(--surface);border:1.5px dashed var(--accent)}.pitchcurve .semi line{stroke:var(--line);stroke-width:1px}.pitchcurve .semi.zero line{stroke:var(--muted)}.pitchcurve .semi text{fill:var(--muted);font-family:var(--f-mono);text-anchor:end;dominant-baseline:central;font-size:10px}.pitchcurve .target line{stroke:var(--amber);stroke-width:1.5px;stroke-dasharray:6 4}.pitchcurve .target text{fill:var(--amber);font-family:var(--f-mono);text-anchor:end;font-size:11px;font-weight:600}.pitchcurve .curve{fill:none;stroke:var(--accent);stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round}.pitchcurve .curve.ghost{stroke-opacity:.18}.pitchcurve .curve.draw{stroke-dasharray:1;stroke-dashoffset:1px;animation-name:curve-draw;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes curve-draw{to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.pitchcurve .curve.draw{stroke-dashoffset:0;animation:none}}.subquiz{border-top:1px solid var(--line);gap:8px;padding-top:10px;display:grid}.subquiz h3{font-size:1.05rem}.power-symbol{font-family:var(--f-display);color:var(--accent);margin:0;font-size:2rem;font-weight:700;line-height:1}.stopline{stroke:var(--fret);stroke-width:3px;stroke-linecap:round;opacity:.35}.stopline.on{stroke:var(--amber);opacity:1;stroke-width:5px}.mutex{fill:var(--amber);font-family:var(--f-mono);text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:var(--wood);stroke-width:4px;font-size:15px;font-weight:700}.barrebar{fill:var(--accent);fill-opacity:.35;stroke:var(--accent);stroke-width:1.5px}.barrebar.faint{fill-opacity:.08;stroke-opacity:.35;stroke-dasharray:4 3}.mutedline{stroke:var(--amber);stroke-width:2.5px;stroke-linecap:round}.chordpath{font-family:var(--f-mono);flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:.9rem;list-style:none;display:flex}.chordpath li{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 12px}.chordpath li.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.swatch.soft{background:var(--string);opacity:.75}.formula-row{font-family:var(--f-mono);flex-wrap:wrap;align-items:center;gap:6px;display:flex}.formula-row span{border:1px solid var(--line);background:var(--bg);border-radius:6px;padding:4px 10px}.swatch.q-major,.degrees .q-major{--q:var(--amber)}.swatch.q-minor,.degrees .q-minor{--q:var(--accent)}.swatch.q-dim,.degrees .q-dim{--q:var(--muted)}.swatch.q-major,.swatch.q-minor,.swatch.q-dim{background:var(--q)}.letters li.pick{border-color:var(--accent);background:var(--surface);box-shadow:inset 0 0 0 1px var(--accent)}.letters li.pick.root span{color:var(--accent)}.degrees{font-family:var(--f-mono);grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;display:grid}.degrees.answers{grid-template-columns:repeat(4,minmax(0,1fr));max-width:520px}.degrees button{border:1px solid var(--line);border-top:4px solid var(--q,var(--line));background:var(--bg);color:var(--ink);border-radius:8px;justify-items:center;gap:2px;min-width:0;padding:8px 4px;display:grid}.degrees button b{color:var(--muted);font-size:.85rem}.degrees button span{overflow-wrap:anywhere;font-size:.95rem;font-weight:600}.degrees button:hover{border-color:var(--muted);border-top-color:var(--q,var(--muted))}.degrees button[aria-pressed=true]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--q,var(--accent))}.degrees button.right{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.degrees button.right b{color:var(--accent)}.degrees button.relative,.degrees button.away{opacity:.6;border-style:dashed}.chordpath li.ask,.chordpath li.ghost{color:var(--muted);border-style:dashed}.numerals{border-collapse:separate;border-spacing:4px;font-family:var(--f-mono);margin-inline:auto;font-size:.9rem}.numerals th{color:var(--muted);text-align:right;white-space:nowrap;padding-right:6px;font-size:.78rem;font-weight:500}.numerals td{text-align:center;min-width:3.2em;color:var(--muted);padding:5px 8px}.numerals tr.on td{color:var(--ink);font-weight:600}.numerals tr.on.major th{color:var(--amber)}.numerals tr.on.minor th{color:var(--accent)}.numerals .symbols td{color:var(--ink);border:1px solid var(--line);border-bottom:3px solid var(--q,var(--line));background:var(--bg);border-radius:6px;font-weight:600}.numerals .symbols td.q-major{--q:var(--amber)}.numerals .symbols td.q-minor{--q:var(--accent)}.numerals .symbols td.q-dim{--q:var(--muted)}.numerals .symbols td.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}@media (width<=520px){.degrees{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=560px){.back,.trainer,.toc-review{align-items:center;min-height:40px;display:inline-flex}}