:root{--bg: #f7f5f0;--surface: #ffffff;--ink: #1d1b18;--muted: #6d675e;--line: #e2ddd3;--accent: #b4541a;--accent-ink: #ffffff;--accent-soft: #f6e6d8;--good: #2e7d4f;--good-soft: #dff1e5;--bad: #b3372f;--bad-soft: #f8dedb;--key-white: #fffdf8;--key-black: #24211d;font-family:Iowan Old Style,Palatino Linotype,Palatino,Georgia,serif;color:var(--ink);background:var(--bg)}@media (prefers-color-scheme: dark){:root{--bg: #171512;--surface: #211e1a;--ink: #efe9df;--muted: #a09889;--line: #37322b;--accent: #e08a4a;--accent-ink: #1a1410;--accent-soft: #3a2a1d;--good: #6cc48d;--good-soft: #1e3527;--bad: #ec7f76;--bad-soft: #40211f;--key-white: #e9e3d8;--key-black: #0e0d0b}}*{box-sizing:border-box}body{margin:0;background:var(--bg)}h1,h2,h3,p{margin:0}h1{font-size:2rem;font-weight:600;letter-spacing:-.01em;text-wrap:balance}h2{font-size:1.25rem;font-weight:600}h3{font-size:1.05rem;font-weight:600}a{color:var(--accent)}button,select,input,label,kbd,.top,.eyebrow,.stats,.meta,.pill,.context,.foot,.back,.name,.yours{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif}button,select{font-size:.9rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:.5rem .85rem;cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}button.big{font-size:1.1rem;padding:.8rem 2.2rem}button.quiet{background:none;color:var(--muted)}button.link{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;font-size:inherit}kbd{font-size:.7rem;opacity:.6;border:1px solid currentColor;border-radius:4px;padding:0 .3rem;margin-left:.35rem}label{font-size:.85rem;color:var(--muted)}.toggle{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer}.top{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.75rem 1.5rem;border-bottom:1px solid var(--line);background:var(--surface)}.top .brand{font-family:inherit;font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:.02em}.top nav{display:flex;gap:.25rem}.top nav a{padding:.35rem .75rem;border-radius:6px;text-decoration:none;color:var(--muted);font-size:.9rem}.top nav a.on{color:var(--ink);background:var(--bg)}.spacer{flex:1}.midi{font-size:.8rem;color:var(--muted)}.midi:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.4rem;background:var(--muted)}.midi.on:before{background:var(--good)}.page{max-width:1120px;margin:0 auto;padding:2.5rem 1.5rem 4rem}.page.narrow{max-width:820px}.lede{color:var(--muted);font-size:1.05rem;line-height:1.55;margin-top:.6rem;max-width:62ch}.foot{color:var(--muted);font-size:.85rem;margin-top:2.5rem}.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2rem;margin-top:2.5rem;align-items:start}.track .why{color:var(--muted);font-size:.92rem;line-height:1.5;margin:.4rem 0 1rem;min-height:4.2em}.track ol{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}.card{background:var(--surface);border:1px solid var(--line);border-radius:12px}.level{display:flex;gap:.85rem;width:100%;text-align:left;padding:.8rem .9rem;align-items:flex-start}.level .num{flex:none;width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--muted);font-size:.8rem;font-weight:600}.level.mastered .num{background:var(--good-soft);color:var(--good)}.level .body{display:grid;gap:.2rem;flex:1;min-width:0}.level .title{font-family:Iowan Old Style,Palatino,Georgia,serif;font-size:1.02rem;font-weight:600}.level .blurb{color:var(--muted);font-size:.82rem;line-height:1.4}.bar{height:4px;background:var(--bg);border-radius:2px;margin-top:.4rem;overflow:hidden}.bar span{display:block;height:100%;background:var(--accent)}.mastered .bar span{background:var(--good)}.back{font-size:.85rem;text-decoration:none;color:var(--muted)}.level-head{display:flex;justify-content:space-between;gap:1.5rem;align-items:flex-end;margin:1rem 0 1.5rem;flex-wrap:wrap}.eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.3rem}.stats{display:flex;gap:1.5rem}.stats div{display:grid;text-align:right}.stats strong{font-size:1.5rem;font-variant-numeric:tabular-nums}.stats span{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.banner{background:var(--good-soft);color:var(--good);border-radius:10px;padding:.7rem 1rem;margin-bottom:1rem;font-size:.95rem}.banner a{color:inherit;font-weight:600}.start,.drill{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:2rem}.start{text-align:center;display:grid;gap:1.5rem;justify-items:center}.start p{color:var(--muted);line-height:1.55;max-width:52ch}.drill{display:grid;gap:1.5rem}.context{font-size:.95rem;color:var(--muted);display:flex;align-items:center;gap:.75rem;min-height:1.6rem}.context strong{color:var(--ink)}.pill{font-size:.75rem;background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:.15rem .6rem}.controls,.choices{display:flex;gap:.5rem;flex-wrap:wrap}.choice{font-family:Iowan Old Style,Palatino,Georgia,serif;font-size:1.15rem;min-width:3.6rem;padding:.7rem 1rem}.choice.degree{min-width:3.2rem;font-size:1.3rem}.choice.good{background:var(--good-soft);border-color:var(--good);color:var(--good);opacity:1}.choice.bad{background:var(--bad-soft);border-color:var(--bad);color:var(--bad);opacity:1}.choice.dim{opacity:.4}.feedback{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:2.4rem;flex-wrap:wrap}.good-text{color:var(--good)}.bad-text{color:var(--bad)}.slots{display:flex;gap:.6rem;flex-wrap:wrap}.slot{border:2px solid var(--line);border-radius:12px;background:var(--bg);display:grid;place-items:center;align-content:center;gap:.15rem;transition:transform .12s,border-color .12s}.slot.chord{flex:1 1 6.5rem;min-height:6rem;padding:.5rem}.slot.note{width:3.4rem;height:3.4rem;border-radius:50%;font-size:1.25rem}.slot.active{border-color:var(--accent);border-style:dashed}.slot.playing{transform:translateY(-4px);border-color:var(--accent);background:var(--accent-soft)}.slot.ok{border-color:var(--good);background:var(--good-soft)}.slot.miss{border-color:var(--bad);background:var(--bad-soft)}.slot.shake{animation:shake .25s}.slot .roman{font-family:Iowan Old Style,Palatino,Georgia,serif;font-size:1.5rem}.slot .name{font-size:.85rem;color:var(--muted)}.slot .yours{font-size:.72rem;color:var(--bad)}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.keyboard{position:relative;display:flex;height:130px;-webkit-user-select:none;user-select:none;touch-action:none}.key{padding:0;border-radius:0 0 5px 5px;border:1px solid #8d867a}.key.white{background:var(--key-white);height:100%;display:flex;align-items:flex-end;justify-content:center;color:#8d867a}.key.white span{font:.6rem ui-sans-serif,system-ui,sans-serif;padding-bottom:4px}.key.black{position:absolute;top:0;height:62%;background:var(--key-black);border-color:#000;z-index:1}.key.tonic{box-shadow:inset 0 -10px 0 var(--accent)}.key.down{background:var(--accent)}.key.good{background:var(--good)}.key.bad{background:var(--bad)}.filters{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin:2rem 0 1.25rem}.tabs{display:flex;gap:.3rem;flex-wrap:wrap;margin-right:auto}.tabs button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1rem}.entry{padding:1.1rem 1.2rem;display:grid;gap:.85rem;align-content:start}.entry header{display:flex;align-items:baseline;gap:.6rem}.entry header button{margin-left:auto;padding:.3rem .8rem}.entry .meta{font-size:.78rem;color:var(--muted)}.entry p{color:var(--muted);font-size:.9rem;line-height:1.45}.chords{display:flex;gap:.35rem;flex-wrap:wrap}.chip{border:1px solid var(--line);border-radius:8px;padding:.3rem .55rem;display:grid;justify-items:center;min-width:3rem;background:var(--bg)}.chip .roman{font-size:1rem}.chip .name{font-size:.72rem;color:var(--muted)}.chip.playing{border-color:var(--accent);background:var(--accent-soft)}.chip.found{border-color:var(--good);background:var(--good-soft)}@media (max-width: 600px){.page{padding:1.5rem 1rem 3rem}.start,.drill{padding:1.25rem}.keyboard{height:100px}.cards{grid-template-columns:1fr}}