:root{--surface: #ffffff;--surface-2: #f5f5f7;--ink: #1d1d1f;--ink-2: #6e6e73;--line: #d2d2d7;--accent: #0066cc;--on-accent: #ffffff;--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}@media(prefers-color-scheme:dark){:root{--surface: #1c1c1e;--surface-2: #000000;--ink: #f5f5f7;--ink-2: #a1a1a6;--line: #3a3a3c;--accent: #2997ff;--on-accent: #000000}}*{box-sizing:border-box}html{font-size:100%;-webkit-text-size-adjust:100%}body{margin:0;background:var(--surface-2);color:var(--ink);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased}a{color:var(--accent)}:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}.skip{position:absolute;left:-999px;top:0;background:var(--surface);padding:.75rem 1rem;z-index:10}.skip:focus{left:1rem;top:1rem}.wrap{max-width:64rem;margin:0 auto;padding:0 1rem}@media(min-width:640px){.wrap{padding:0 1.5rem}}header.site{background:color-mix(in srgb,var(--surface-2) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:3.25rem}header.site a{text-decoration:none;color:var(--ink);font-weight:600}header.site nav a{font-weight:400;color:var(--ink-2);margin-left:1.25rem}header.site nav a:hover{color:var(--ink)}footer.site{border-top:1px solid var(--line);padding:1.5rem 0;margin-top:5rem;text-align:center;font-size:.8rem;color:var(--ink-2)}.hero{padding:3rem 0 1rem}.eyebrow{font-weight:600;color:var(--ink-2);margin:0}h1{font-size:clamp(2.6rem,9vw,5rem);line-height:1.04;letter-spacing:-.03em;margin:.4rem 0 0;max-width:14ch}.lede{font-size:clamp(1.15rem,3.4vw,1.6rem);color:var(--ink-2);max-width:36rem;margin:1.1rem 0 0}h2{font-size:clamp(1.8rem,5vw,2.6rem);letter-spacing:-.02em;line-height:1.1;margin:0 0 .75rem}h3{font-size:1.15rem;margin:0 0 .25rem}p{max-width:40rem;margin:0 0 1rem;font-size:1.0625rem}.card-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));margin-top:2rem}.card{display:block;background:var(--surface);border-radius:1.25rem;padding:1.5rem;text-decoration:none;color:var(--ink);transition:transform .25s ease,box-shadow .25s ease}.card:hover{transform:translateY(-3px);box-shadow:0 8px 28px #0000001f}.card .meta{color:var(--ink-2);font-size:.9rem;margin:0}.card.soon{opacity:.6;pointer-events:none}.pill{display:inline-block;font-size:.78rem;padding:.15rem .6rem;border-radius:99px;background:var(--surface-2);color:var(--ink-2);margin-right:.4rem}section.block{padding:3.5rem 0 .5rem;scroll-margin-top:4rem}.kicker{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.95rem;margin-bottom:.75rem}.panel{background:var(--surface);border-radius:1.25rem;padding:1.5rem;margin:1.25rem 0}.callout{border-left:4px solid var(--accent);background:var(--surface);border-radius:.5rem 1rem 1rem .5rem;padding:1rem 1.25rem;margin:1.25rem 0}.callout h3{margin-bottom:.3rem}.callout p{margin:0}.footnote{font-size:.9rem;color:var(--ink-2)}ol.steps{padding:0;margin:1.25rem 0;list-style:none;counter-reset:s;display:grid;gap:.75rem}ol.steps li{counter-increment:s;background:var(--surface);border-radius:1rem;padding:1rem 1.25rem 1rem 3.5rem;position:relative}ol.steps li:before{content:counter(s);position:absolute;left:1rem;top:1rem;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-weight:700;font-size:.9rem}ol.steps li p{margin:0}dl.parts{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));margin:1.25rem 0}dl.parts div{background:var(--surface);border-radius:1rem;padding:1rem 1.25rem}dl.parts dt{font-weight:700}dl.parts dd{margin:.2rem 0 0;color:var(--ink-2);font-size:.95rem}table{width:100%;border-collapse:collapse;background:var(--surface);border-radius:1rem;overflow:hidden;font-size:.95rem}th,td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--line)}th{color:var(--ink-2);font-weight:600}tr:last-child td{border-bottom:0}.table-wrap{overflow-x:auto;margin:1.25rem 0}ul.facts{list-style:none;padding:0;display:grid;gap:.75rem;margin:1.25rem 0}ul.facts li{background:var(--surface);border-radius:1rem;padding:1rem 1.25rem;font-size:1.05rem}button.btn{font:inherit;font-weight:600;background:var(--accent);color:var(--on-accent);border:0;border-radius:99px;padding:.65rem 1.25rem;min-height:44px;cursor:pointer}button.btn.ghost{background:var(--surface-2);color:var(--accent);padding:.4rem .9rem;min-height:36px;font-size:.9rem}button.btn:hover{filter:brightness(1.08)}.scale-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:.75rem;margin:1.25rem 0}.fing{background:var(--surface);border-radius:1.25rem;padding:1rem .75rem;text-align:center}.fing figure{margin:0}.fing .note{font-size:2rem;font-weight:700;letter-spacing:-.02em;line-height:1}.fing svg{width:100%;max-width:7rem;height:auto;margin:.5rem auto;display:block}.fing figcaption{font-size:.82rem;color:var(--ink-2)}.key-on{fill:var(--accent);stroke:var(--accent)}.key-off{fill:none;stroke:var(--ink-2)}.body-line{stroke:var(--line)}svg text{fill:var(--ink-2);font-family:var(--font)}.num-on{fill:var(--on-accent)}.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}.reveal.in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.card{transition:none}}.toc{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.5rem}.toc a{text-decoration:none;background:var(--surface);padding:.4rem .9rem;border-radius:99px;font-size:.9rem;color:var(--ink)}@media print{header.site,footer.site,button,.toc{display:none}body{background:#fff;color:#000}}html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}#read-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:20}.row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1rem}.seg{display:inline-flex;background:var(--surface);border-radius:99px;padding:3px;gap:2px;flex-wrap:wrap}.seg button{font:inherit;font-size:.9rem;border:0;background:transparent;color:var(--ink);padding:.45rem .95rem;min-height:40px;border-radius:99px;cursor:pointer}.seg button[aria-pressed=true]{background:var(--accent);color:var(--on-accent);font-weight:600}.seg.wide button{min-width:3rem}.stage{position:relative;overflow:hidden;margin:0 calc(50% - 50vw);padding:0 calc(50vw - 50%);background:#000;color:#f5f5f7}.stage .wrap{display:grid;gap:1rem;align-items:center;padding-top:3.5rem;padding-bottom:3rem}@media(min-width:760px){.stage .wrap{grid-template-columns:1.2fr .8fr}}.stage h1{max-width:12ch;background:linear-gradient(120deg,#fff 30%,#ffd98a 70%,#e8a93a);-webkit-background-clip:text;background-clip:text;color:transparent}.stage .lede,.stage .eyebrow{color:#a1a1a6}.stage .btn{margin-top:1.5rem;display:inline-block;text-decoration:none;padding:.8rem 1.6rem;border-radius:99px;background:#f5f5f7;color:#000;font-weight:600}.stage .btn.line{background:transparent;color:#2997ff;padding-left:.5rem}.sax-art{width:min(320px,70vw);justify-self:center;animation:float 7s ease-in-out infinite}@keyframes float{50%{transform:translateY(-10px) rotate(1.2deg)}}.art-key{animation:press 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes press{0%,70%,to{fill:#fff7e0;transform:scale(1)}80%{fill:#e8a93a;transform:scale(.82)}}@media(prefers-reduced-motion:reduce){.sax-art,.art-key{animation:none}}.tool-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin-top:1.5rem}.tool-tile{background:var(--surface);border-radius:1.5rem;padding:1.5rem;text-decoration:none;color:var(--ink);display:block;transition:transform .25s ease,box-shadow .25s ease}.tool-tile:hover{transform:translateY(-3px);box-shadow:0 10px 30px #0000001f}.tool-tile .ico{font-size:2rem;display:block;margin-bottom:.5rem}.tool-tile p{color:var(--ink-2);margin:.25rem 0 0;font-size:.95rem}.unit{margin-top:3.5rem}.unit h2{font-size:1.1rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:1rem}.lesson{position:relative}.lesson h3{font-size:1.35rem;letter-spacing:-.01em}.lesson.feature{background:linear-gradient(135deg,var(--accent),#5e5ce6);color:#fff}.lesson.feature .meta,.lesson.feature h3{color:#fff}.lesson.feature .pill{background:#fff3;color:#fff}.bar{height:5px;background:var(--surface-2);border-radius:9px;margin-top:1rem;overflow:hidden}.bar>span{display:block;height:100%;width:0;background:#30d158;transition:width .5s ease}.lesson.done .pill.prog{background:#30d158;color:#000}.pill.prog:empty{display:none}.staff-wrap{overflow-x:auto;background:var(--surface);border-radius:1.25rem;padding:.75rem 1rem;margin:1.25rem 0}.staff-wrap svg{display:block;margin:0 auto;max-width:none}.st-line{stroke:var(--ink);stroke-width:1.2}.st-stem,.st-flag{stroke:var(--ink);stroke-width:1.6;fill:none}.st-note{fill:var(--ink);stroke:var(--ink);stroke-width:1.6}.st-note.open{fill:var(--surface)}.st-note.hl{fill:var(--accent);stroke:var(--accent)}.st-clef,.st-acc{fill:var(--ink);font-family:Noto Music,Bravura,Apple Symbols,Segoe UI Symbol,serif}.st-label{fill:var(--ink-2);font-family:var(--font)}.rhythm-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin:1.25rem 0}.rhythm-grid .panel{margin:0;text-align:center;padding:1rem}.rhythm-grid p{margin:0 auto}.mini{overflow:hidden}.mini svg{width:100%;height:auto;max-width:140px}.card-grid.small{margin-top:1rem}.checklist{list-style:none;padding:0;display:grid;gap:.5rem;margin:1.25rem 0}.checklist label{display:flex;gap:.85rem;align-items:center;background:var(--surface);border-radius:1rem;padding:.9rem 1.1rem;cursor:pointer;min-height:52px}.checklist input{width:1.4rem;height:1.4rem;accent-color:#30d158;flex:none}.checklist input:checked+span{color:var(--ink-2);text-decoration:line-through}.faq{display:grid;gap:.5rem;margin:1.25rem 0}details{background:var(--surface);border-radius:1rem;padding:.25rem 1.25rem}summary{cursor:pointer;padding:.85rem 0;font-weight:600;min-height:44px}details p{color:var(--ink-2)}.converter .conv-out{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.25rem}.conv-out div{background:var(--surface-2);border-radius:1rem;padding:1rem}.conv-out strong{display:block;font-size:1.25rem;margin-top:.25rem}caption{text-align:left;padding:.75rem 1rem;color:var(--ink-2)}th[scope=row]{font-weight:700}.lesson-nav{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:4rem}.lesson-nav a{background:var(--surface);border-radius:1.25rem;padding:1.25rem;text-decoration:none;color:var(--ink)}.lesson-nav a small{color:var(--ink-2);display:block}.lesson-nav a:last-child{text-align:right}.tool{background:var(--surface);border-radius:1.75rem;padding:1.5rem;margin:1.5rem 0}.big-chart{display:grid;place-items:center;text-align:center}.big-chart .note{font-size:clamp(4rem,16vw,7rem);font-weight:800;letter-spacing:-.04em;line-height:1}.big-chart svg{width:100%;max-width:8rem;height:auto}.pulse{width:5rem;height:5rem;border-radius:50%;background:var(--accent);margin:1rem auto;transition:transform .08s ease}.pulse.on{transform:scale(1.25)}input[type=range]{width:100%;accent-color:var(--accent);height:44px}.bpm{font-size:clamp(3.5rem,14vw,6rem);font-weight:800;letter-spacing:-.04em;text-align:center;line-height:1}.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.75rem;margin-top:1rem}.opt{background:var(--surface-2);border-radius:1rem;padding:.75rem;border:3px solid transparent;cursor:pointer;font:inherit;color:inherit}.opt svg{width:100%;max-width:4.5rem;height:auto;margin:0 auto;display:block}.opt:hover{border-color:var(--line)}.opt.right{border-color:#30d158;background:color-mix(in srgb,#30d158 18%,var(--surface))}.opt.wrong{border-color:#ff453a}.score{font-weight:700;font-size:1.1rem}.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0}.chips button{font:inherit;background:var(--surface-2);color:var(--ink);border:2px solid transparent;padding:.5rem .8rem;border-radius:99px;min-height:44px;min-width:3.2rem;cursor:pointer;font-weight:600}.chips button[aria-pressed=true]{border-color:var(--accent);background:var(--surface);color:var(--accent)}.scale-strip.mini-strip{grid-template-columns:repeat(auto-fit,minmax(3rem,1fr));gap:.4rem}.step-dot{text-align:center;padding:.6rem .2rem;border-radius:.8rem;background:var(--surface-2);font-weight:700;transition:background .1s,color .1s,transform .1s}.step-dot.on{background:var(--accent);color:var(--on-accent);transform:scale(1.12)}.dots{display:grid;grid-template-columns:repeat(auto-fit,minmax(2.6rem,1fr));gap:.4rem;margin-top:1rem}.sound-art{width:min(420px,90vw);justify-self:center}.wbar{transform-box:fill-box;transform-origin:center;animation:eq 1.8s ease-in-out infinite}@keyframes eq{0%,to{transform:scaleY(.55)}50%{transform:scaleY(1.05)}}@media(prefers-reduced-motion:reduce){.wbar{animation:none}}.mod-card{position:relative;overflow:hidden;color:#fff;min-height:11rem;display:flex;flex-direction:column;justify-content:flex-end}.mod-card h3{font-size:1.6rem;letter-spacing:-.02em;color:#fff}.mod-card .meta{color:#ffffffd9}.mod-card .icon{position:absolute;right:1rem;top:.6rem;font-size:3.2rem;opacity:.95}.mod-card.soon{filter:grayscale(.7);opacity:.55}.mod-card .pill{background:#ffffff38;color:#fff}.module-hero{border-radius:1.75rem;padding:2.5rem 1.5rem;margin-top:1.5rem;color:#fff;position:relative;overflow:hidden}.module-hero h1{color:#fff;max-width:none}.module-hero .lede,.module-hero .eyebrow{color:#ffffffe0}.module-hero .icon{position:absolute;right:1.2rem;top:.5rem;font-size:clamp(4rem,14vw,8rem);opacity:.95}.cover-img{width:100%;max-height:18rem;object-fit:cover;border-radius:1.5rem;margin:1.5rem 0 0}.keys-wrap{overflow-x:auto;background:var(--surface);border-radius:1.25rem;padding:1rem;margin:1.25rem 0}.pk{display:block;margin:0 auto;width:100%;min-width:280px;max-width:760px;height:auto}.pk-white{fill:#fff;stroke:#8e8e93;stroke-width:1;cursor:pointer}.pk-white.on{fill:var(--accent);stroke:var(--accent)}.pk-black{fill:#1c1c1e;stroke:#000;cursor:pointer}.pk-black.on{fill:#5e5ce6;stroke:var(--accent)}.pk-label{fill:#3a3a3c;font-family:var(--font)}.pk-label.on{fill:#fff;font-weight:700}.pk [data-note]:hover{filter:brightness(.92)}.chord-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.75rem;margin:1.25rem 0}.chord svg{max-width:8rem}.chord figcaption{font-size:.85rem}.cd-line{stroke:var(--ink-2);stroke-width:1.2}.cd-nut{stroke:var(--ink)}.cd-mark{fill:var(--ink)}pre.tab{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:1.05rem;line-height:1.5;margin:0;padding:.5rem;color:var(--ink)}.media{margin:1.25rem 0;background:var(--surface);border-radius:1.25rem;padding:1rem}.media iframe{width:100%;aspect-ratio:16 / 10;border:0;border-radius:.75rem}.media audio,.media img{width:100%;border-radius:.75rem}.media figcaption{font-size:.85rem;color:var(--ink-2);margin-top:.5rem}.band-row{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}.draw-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0}canvas.draw{width:100%;touch-action:none;background:#fff;border-radius:1rem;border:1px solid var(--line);display:block}.swatch{width:2.75rem;height:2.75rem;border-radius:50%;border:3px solid transparent;cursor:pointer;padding:0}.swatch[aria-pressed=true]{border-color:var(--ink)}.circle-wrap{max-width:26rem;margin:0 auto}.circle-wrap svg{width:100%;height:auto}.cof-key{cursor:pointer}.cof-key circle{fill:var(--surface-2);stroke:var(--line);stroke-width:1.5}.cof-key.on circle{fill:var(--accent);stroke:var(--accent)}.cof-key text{fill:var(--ink);font-family:var(--font);font-weight:700}.cof-key.on text{fill:var(--on-accent)}.cof-key:focus-visible circle{stroke:var(--ink);stroke-width:3}.st-dot{fill:var(--ink)}.tempo{display:flex;align-items:center;gap:.6rem;font-size:.95rem;flex-wrap:wrap}.tempo input[type=range]{width:9rem}.check{display:flex;align-items:center;gap:.4rem;font-size:.95rem;min-height:44px}.check input{width:1.2rem;height:1.2rem;accent-color:var(--accent)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}table.grid{min-width:520px;text-align:center}table.grid th,table.grid td{padding:.35rem .2rem;border-bottom:1px solid var(--line)}table.grid th[scope=row]{text-align:left;white-space:nowrap;padding-right:.8rem}table.grid th.beat{color:var(--ink);font-weight:800}table.grid th.now{color:var(--accent)}.cell{width:2.4rem;height:2.4rem;border-radius:.6rem;border:2px solid var(--line);background:var(--surface-2);cursor:pointer}.cell[aria-pressed=true]{background:var(--accent);border-color:var(--accent)}.cell.now{outline:3px solid var(--ink);outline-offset:1px}.sticks{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.stick{display:grid;place-items:center;width:3rem;height:3.4rem;border-radius:.9rem;font-weight:800;font-size:1.3rem;transition:transform .08s}.stick.r{background:#0a84ff;color:#fff}.stick.l{background:#30d158;color:#000}.stick.grace{width:2rem;height:2.4rem;font-size:.95rem;opacity:.7;align-self:flex-end}.stick.now{transform:scale(1.22);box-shadow:0 0 0 3px var(--ink)}.chart{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.6rem;margin:1.25rem 0}.chart .bar{background:var(--surface);border-radius:1rem;padding:.8rem;text-align:center;border-left:4px solid var(--accent);position:relative}.chart .bar strong{display:block;font-size:2rem;letter-spacing:-.02em}.chart .num{position:absolute;left:.6rem;top:.4rem;font-size:.75rem;color:var(--ink-2)}.chart .slashes{color:var(--ink-2);letter-spacing:.15em}.sheet-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 .25rem}