:root{--bg:#f6f6f3;--panel:#fff;--text:#1a1d21;--muted:#667085;--border:#e3e5e8;--accent:#3b82f6;--accent-text:#fff;--link:#2563eb;--accent-strong:#2563eb;--accent-soft:#eaf2ff;--accent-soft-border:#bfdbfe;--toggle-on-text:#1d4ed8;--danger:#dc2626;--mismatch:#dc26261f;--heard:#22c55e;--correct:#15803d;--mismatch-border:#dc262699;--roll-note:#94a3b8;--roll-black-key:#f1f5f9;--paper:#fff;--paper-text:#1a1d21;--paper-muted:#667085;--key-white:#fff;--key-white-border:#c9ccd1;--key-black:#1f2328;--key-label:#6b7280;--shadow:0 16px 40px #1018282e;--shadow-small:0 4px 16px #00000026;--scrim:#0000004d;--meter-track:#e5e7eb;--meter-sound:#9ca3af;--meter-level:#16a34a;--meter-cutoff:#1a1d21;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0e1014;--panel:#171a20;--text:#e7e9ec;--muted:#98a2b3;--border:#2a2f39;--link:#60a5fa;--accent-soft:#1e3a6e;--accent-soft-border:#3b82f6;--toggle-on-text:#bfdbfe;--danger:#ef4444;--roll-note:#64748b;--roll-black-key:#1f232b;--paper:#fdfcf8;--key-white:#e4e2dc;--key-white-border:#8b8f97;--key-black:#08090b;--shadow:0 16px 40px #00000080;--shadow-small:0 4px 16px #00000080;--scrim:#0000008c;--meter-track:#05070a;--meter-sound:#6b7484;--meter-level:#4ade80;--meter-cutoff:#f8fafc;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--bg:#0e1014;--panel:#171a20;--text:#e7e9ec;--muted:#98a2b3;--border:#2a2f39;--link:#60a5fa;--accent-soft:#1e3a6e;--accent-soft-border:#3b82f6;--toggle-on-text:#bfdbfe;--danger:#ef4444;--roll-note:#64748b;--roll-black-key:#1f232b;--paper:#fdfcf8;--key-white:#e4e2dc;--key-white-border:#8b8f97;--key-black:#08090b;--shadow:0 16px 40px #00000080;--shadow-small:0 4px 16px #00000080;--scrim:#0000008c;--meter-track:#05070a;--meter-sound:#6b7484;--meter-level:#4ade80;--meter-cutoff:#f8fafc;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}body{background:var(--bg);color:var(--text);margin:0;font:18px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--link)}img{max-width:100%;height:auto;display:block}h1,h2,h3{margin:0 0 16px;line-height:1.15}h1{letter-spacing:-.02em;font-size:clamp(36px,6vw,60px);font-weight:700}h2{letter-spacing:-.01em;font-size:clamp(26px,3.5vw,36px)}h3{font-size:20px}p{margin:0 0 16px}.wrap{max-width:1120px;margin:0 auto;padding:0 24px}.prose{max-width:64ch}.section{padding:96px 0 0}.muted{color:var(--muted)}.small{color:var(--muted);font-size:14px}.button{border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;height:48px;padding:0 22px;font-size:17px;font-weight:600;text-decoration:none;transition:background .12s;display:inline-flex}.button.primary{background:var(--accent-strong);color:#fff}.button.primary:hover{background:#1d4ed8}.button.secondary{border-color:var(--border);color:var(--text)}.button.secondary:hover{background:var(--accent-soft)}.button:active{transform:translateY(1px)}.button:focus-visible,.site-nav a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.buttons{flex-wrap:wrap;gap:12px;margin:28px 0 16px;display:flex}.site-header{z-index:10;background:color-mix(in srgb, var(--bg) 92%, transparent);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--border);position:sticky;top:0}.site-header .wrap{align-items:center;gap:24px;height:64px;display:flex}.wordmark{color:var(--text);letter-spacing:-.01em;align-items:center;gap:10px;font-size:18px;font-weight:700;text-decoration:none;display:flex}.wordmark img{border-radius:6px;width:28px;height:28px}.site-nav{align-items:center;gap:24px;margin-left:auto;display:flex}.site-nav a:not(.button){color:var(--text);border-bottom:2px solid #0000;padding:4px 0;font-size:16px;text-decoration:none}.site-nav a:not(.button):hover,.site-nav a[aria-current=page]{border-bottom-color:var(--accent)}.site-nav .button{height:40px;padding:0 16px;font-size:16px}.site-nav .short{display:none}.shot{border:1px solid var(--border);box-shadow:var(--shadow);background:var(--paper);border-radius:12px}.hero{padding:72px 0 0;position:relative;overflow:hidden}.hero:before{content:"";opacity:.6;background:repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 14px);height:57px;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.hero .wrap{grid-template-columns:5fr 7fr;align-items:center;gap:48px;display:grid;position:relative}.hero .strip-wrap{display:block}.eyebrow{color:var(--accent-strong);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;font-size:14px;font-weight:600}.lead{color:var(--muted);font-size:20px}.note-shot{position:relative}.note-shot .shot{border-left:4px solid var(--accent)}.note-shot:after{content:"";background:var(--accent);border-radius:50%;width:24px;height:24px;position:absolute;bottom:-10px;left:-10px}.strip{border:1px solid var(--key-white-border);border-radius:8px;height:72px;margin-top:64px;display:flex;position:relative;overflow:hidden}.strip span{background:var(--key-white);border-right:1px solid var(--key-white-border);flex:1}.strip span:last-of-type{border-right:none}.strip i{background:var(--key-black);border-radius:0 0 4px 4px;width:4%;height:60%;margin-left:-2%;position:absolute;top:0}@media (prefers-reduced-motion:no-preference){.strip .lit{animation:6s infinite lit}.strip .lit.right{animation-name:lit-right}}@keyframes lit{0%,12%{background:var(--heard)}18%,to{background:var(--key-white)}}@keyframes lit-right{0%,12%{background:var(--correct)}18%,to{background:var(--key-white)}}@media (prefers-reduced-motion:reduce){.strip .k3,.strip .k7{background:var(--heard)}.strip .k10{background:var(--correct)}details summary svg{transition:none}}.pillars{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:28px}.card p{color:var(--muted);margin:0}.icon{fill:none;width:28px;height:28px;stroke:var(--accent);stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}.split{grid-template-columns:1fr 1fr;align-items:center;gap:56px;display:grid}.split.mirror>:first-child{order:2}.stack{position:relative}.stack .under{width:60%;margin:-48px 0 0 auto;position:relative}.centre{text-align:center}.centre .prose{margin:0 auto}.chips{flex-wrap:wrap;justify-content:center;gap:12px;margin:24px 0;display:flex}.chip{background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-weight:600}.steps{counter-reset:step;grid-template-columns:repeat(3,1fr);gap:32px;margin:0 0 24px;padding:0;list-style:none;display:grid}.steps li{counter-increment:step}.steps li:before,.num{content:counter(step);background:var(--accent-soft);width:40px;height:40px;color:var(--link);border-radius:50%;place-items:center;margin-bottom:12px;font-weight:700;display:grid}.steps strong{margin-bottom:4px;display:block}.steps span{color:var(--muted)}.panel{background:var(--accent-soft);border:1px solid var(--accent-soft-border);text-align:center;border-radius:12px;padding:32px}.panel .buttons{justify-content:center;margin-bottom:0}.faq details{border-bottom:1px solid var(--border)}.faq details:first-of-type{border-top:1px solid var(--border)}.faq summary{cursor:pointer;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:18px;font-weight:600;list-style:none;display:flex}.faq summary::-webkit-details-marker{display:none}.faq summary svg{fill:none;width:22px;height:22px;stroke:var(--muted);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .16s}.faq details[open] summary svg{transform:rotate(180deg)}.faq details p{color:var(--muted);padding-bottom:12px}.site-footer{border-top:1px solid var(--border);color:var(--muted);margin-top:96px;padding:40px 0;font-size:15px}.site-footer .wrap{gap:16px;display:grid}.footer-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.footer-top nav{flex-wrap:wrap;gap:20px;display:flex}.footer-top nav a{color:var(--muted)}.site-footer p{margin:0}.guide{grid-template-columns:200px minmax(0,720px);gap:56px;padding-top:64px;display:grid}.toc{align-self:start;font-size:15px;position:sticky;top:96px}.toc ol{gap:10px;margin:0;padding:0;list-style:none;display:grid}.toc a{color:var(--muted);text-decoration:none}.toc a:hover{color:var(--text)}.guide section{padding-top:56px;scroll-margin-top:80px}.guide h2{align-items:center;gap:12px;font-size:28px;display:flex}.guide h2 .num{flex:none;width:32px;height:32px;margin:0;font-size:16px}.guide .shot{margin:20px 0}.legend-list{gap:8px;margin:16px 0;padding:0;list-style:none;display:grid}.legend-list li{align-items:center;gap:12px;display:flex}.sw{border-radius:4px;flex:none;width:16px;height:16px}.sw.music{background:var(--accent)}.sw.expected{box-shadow:inset 0 0 0 3px var(--accent);background:var(--key-white)}.sw.heard{background:var(--heard)}.sw.correct{background:var(--correct)}.keys-table{border-collapse:collapse;margin:16px 0}.keys-table td{border-bottom:1px solid var(--border);padding:8px 24px 8px 0}kbd{text-align:center;border:1px solid var(--border);background:var(--panel);border-bottom-width:2px;border-radius:6px;min-width:2em;padding:2px 8px;font:15px ui-monospace,SFMono-Regular,Menlo,monospace;display:inline-block}@media (width<=860px){.hero .wrap,.split,.pillars,.steps{grid-template-columns:1fr}.split.mirror>:first-child{order:0}.split{gap:28px}.guide{grid-template-columns:1fr}.toc{display:none}}@media (width<=640px){.wrap{padding:0 16px}.section{padding-top:64px}.hero{padding-top:40px}.site-nav a:not(.button),.site-nav .long{display:none}.site-nav .short{display:inline}.stack .under{width:100%;margin:16px 0 0}.strip{height:56px;margin-top:40px}}.privacy{padding-top:64px}.privacy h2{margin-top:40px;font-size:24px}.privacy li{margin-bottom:6px}