.intro-music-hint{position:fixed;right:1rem;bottom:1rem;z-index:40;padding:.65rem 1rem;border:1px solid var(--rose);background:var(--charcoal);color:var(--cream);font:inherit;font-size:.85rem;letter-spacing:.04em;cursor:pointer}.intro-music-hint:hover{background:var(--rose);color:var(--charcoal);border-color:var(--rose)}.shell{min-height:100vh;display:flex;flex-direction:column}.site-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 1.5rem;border-bottom:1px solid var(--line);background:var(--cream);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;text-decoration:none;line-height:0;background:transparent}.brand-logo{display:block;width:auto;height:3.75rem;background:transparent}.site-nav{display:flex;gap:1.25rem;font-weight:500}.site-nav a{text-decoration:none;color:var(--charcoal);opacity:.85}.site-nav a:hover{color:var(--rose-deep);opacity:1}.site-main{flex:1;width:min(100% - 2rem,var(--max));margin:0 auto;padding:2rem 0 3rem}.site-footer{border-top:1px solid var(--line);padding:1.25rem 1.5rem;color:var(--mute);font-size:.9rem;background:color-mix(in srgb,var(--cream-deep) 70%,var(--cream))}.site-footer p{margin:0;text-align:center}@media(max-width:560px){.brand-logo{height:3.1rem}}.course-page,.module-page,.lesson-page,.test-page,.about-page{animation:page-in .45s ease both}.page-intro{margin-bottom:2rem;max-width:40rem}.eyebrow{margin:0 0 .35rem;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rose)}.page-intro h1,.module-page h1,.lesson-page h1,.test-page h1,.about-page h1{margin:0 0 .75rem;font-size:clamp(1.9rem,4vw,2.6rem)}.lede{color:var(--mute);margin:0}.module-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}.module-row{display:grid;grid-template-columns:3.5rem 1fr auto;gap:1rem;align-items:center;padding:1.1rem 1.2rem;border:1px solid var(--line);background:color-mix(in srgb,var(--cream) 70%,white);border-left:3px solid var(--rose)}.module-row.is-locked{opacity:.72;border-left-color:var(--sage)}.module-index{font-family:var(--font-display);font-size:1.5rem;color:var(--gold)}.module-body h2{margin:0 0 .25rem;font-size:1.35rem}.module-body p{margin:0;color:var(--mute);font-size:.98rem}.module-meta{margin-top:.35rem!important;font-size:.85rem!important;color:var(--ink)!important;opacity:.7}.lock-label{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.lesson-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;max-width:44rem}.lesson-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 1rem;padding:.95rem 1rem;border:1px solid var(--line);background:color-mix(in srgb,var(--cream) 65%,white)}.lesson-row-main{display:flex;flex-direction:column;gap:.2rem}.lesson-title{font-weight:600}.lesson-status{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sage)}.lesson-actions{display:flex;gap:.5rem;align-items:center}.crumb{margin:0 0 1rem;font-size:.9rem;color:var(--mute)}.crumb a{color:var(--mute);text-decoration:none}.crumb a:hover{color:var(--ink)}.lesson-chrome{display:flex;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:1.5rem;max-width:var(--lesson-max)}.lesson-chrome a{text-decoration:none;font-weight:600;color:var(--ink)}.lesson-chrome a:hover{color:var(--rose-deep)}.lesson-layout{display:grid;grid-template-columns:minmax(0,var(--lesson-max)) minmax(12rem,14rem);gap:2rem;align-items:start}.lesson-content{max-width:var(--lesson-max)}.lesson-content>p{margin:0 0 1rem;line-height:1.65;font-size:1.05rem}.lesson-content>p:first-of-type{font-size:1.08rem}.goal-box{padding:.9rem 1rem;background:color-mix(in srgb,var(--rose) 18%,var(--cream));border-left:3px solid var(--rose);margin:0 0 1.35rem;line-height:1.5}.goal-box strong{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-deep);margin-bottom:.25rem}.look-box{padding:1rem 1.1rem;border:1px solid var(--sage);margin:1.25rem 0 1.75rem;background:color-mix(in srgb,var(--sage) 8%,var(--cream));line-height:1.55}.demo-section-title{margin:1.25rem 0 .35rem;font-size:1.15rem;color:var(--rose-deep);letter-spacing:.04em}.learn-demo{margin:.5rem 0 1rem}.study-cta{margin-top:1.5rem;padding:1.25rem;background:var(--charcoal);color:var(--cream)}.study-cta p{color:color-mix(in srgb,var(--cream) 85%,white)}.study-cta .btn-primary{background:var(--rose);color:var(--charcoal)}.study-cta .btn-primary:hover{background:var(--gold)}.meta-line{margin:.85rem 0 0;font-size:.85rem;opacity:.8}.done-line{color:var(--gold)!important}.side-nav{position:sticky;top:5.5rem;border-left:1px solid var(--line);padding-left:1rem}.side-nav h2{margin:0 0 .75rem;font-size:1rem}.side-nav ol{margin:0;padding:0 0 0 1.1rem;display:flex;flex-direction:column;gap:.4rem;font-size:.92rem}.side-nav a{text-decoration:none;color:var(--mute)}.side-nav a:hover,.side-nav a.is-current{color:var(--ink)}.side-nav a.is-done:after{content:" ✓";color:var(--sage)}.test-page{max-width:42rem}.test-block{padding:1.25rem;background:var(--charcoal);color:var(--cream);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}.test-block .exercise-prompt{color:var(--cream)}.test-block .feedback{color:color-mix(in srgb,var(--cream) 80%,white)}.test-block .choice{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--charcoal-soft);color:var(--cream);border-color:#efebe933;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}.test-block .choice:hover:not(:disabled){border-color:var(--rose);transform:translate(4px)}.test-block .choice.is-correct{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 22%,var(--charcoal-soft));box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 50%,transparent);animation:pop-ok .55s cubic-bezier(.2,.9,.3,1.3) both}.test-block .choice.is-wrong{border-color:var(--rose);background:color-mix(in srgb,var(--rose) 18%,var(--charcoal-soft));opacity:1;animation:shake-bad .5s ease both}.test-block .btn-ghost{color:var(--cream);border-color:#efebe940}.test-block .btn-primary{background:var(--rose);color:var(--charcoal)}.test-block .btn-celebrate:not(:disabled){animation:celebrate-pulse 1.4s ease-in-out infinite}.exercise-block{margin-top:0;padding-top:0;border-top:none}.exercise-block h2{margin:0 0 1rem;font-size:1.4rem}.exercise{position:relative;margin-bottom:1.75rem;padding:1rem;border:1px solid rgba(239,235,233,.12);overflow:hidden}.exercise-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.exercise-prompt{margin:0;font-weight:600;flex:1}.answer-badge{flex-shrink:0;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem .55rem;border:1px solid rgba(239,235,233,.25)}.answer-badge.wait{color:color-mix(in srgb,var(--cream) 70%,white)}.answer-badge.ok{color:var(--charcoal);background:var(--gold);border-color:var(--gold);animation:badge-pop .4s ease both}.answer-badge.bad{color:var(--cream);background:var(--rose-deep);border-color:var(--rose);animation:badge-pop .4s ease both}.exercise.is-flash-ok{animation:flash-ok .7s ease}.exercise.is-flash-bad{animation:flash-bad .55s ease}.exercise-ok{border-color:color-mix(in srgb,var(--gold) 45%,transparent)}.exercise-bad{border-color:color-mix(in srgb,var(--rose) 45%,transparent)}.choices{display:flex;flex-direction:column;gap:.55rem}.choice{text-align:left;padding:.85rem 1rem;border:1px solid var(--line);background:color-mix(in srgb,var(--cream) 80%,white);font:inherit;cursor:pointer}.choice:hover:not(:disabled){border-color:var(--rose)}.choice.is-selected{border-color:var(--ink)}.choice.is-correct{border-color:var(--sage);background:color-mix(in srgb,var(--sage) 12%,white)}.choice.is-wrong{opacity:.55}.choice-mark{font-size:1.15rem;color:var(--gold);font-weight:700}.choice-mark.wrong{color:var(--rose)}.feedback{margin-top:.75rem;color:var(--mute);font-size:.95rem}.feedback-ok{border-left:3px solid var(--gold);padding-left:.75rem;animation:fade-up .35s ease both}.feedback-bad{border-left:3px solid var(--rose);padding-left:.75rem;animation:fade-up .35s ease both}.complete-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:1.5rem}.answer-burst{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0}.answer-burst-dot{position:absolute;left:50%;top:35%;width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:0;animation:burst .7s ease-out forwards}.answer-burst-dot.d0{--dx: -48px;--dy: -28px;background:var(--gold)}.answer-burst-dot.d1{--dx: 42px;--dy: -32px;background:var(--rose);animation-delay:.03s}.answer-burst-dot.d2{--dx: -30px;--dy: 36px;background:var(--cream);animation-delay:.05s}.answer-burst-dot.d3{--dx: 55px;--dy: 18px;background:var(--gold);animation-delay:.02s}.answer-burst-dot.d4{--dx: 0px;--dy: -46px;background:var(--rose);animation-delay:.04s}.answer-burst-dot.d5{--dx: -55px;--dy: 8px;background:var(--gold);animation-delay:.06s}.answer-burst-dot.d6{--dx: 28px;--dy: 40px;background:var(--cream);animation-delay:.07s}.answer-burst-dot.d7{--dx: -18px;--dy: -40px;background:var(--rose);animation-delay:.01s}.answer-burst-dot.d8{--dx: 60px;--dy: -8px;background:var(--gold);animation-delay:.08s}.answer-burst-dot.d9{--dx: -40px;--dy: -12px;background:var(--cream);animation-delay:.05s}@keyframes burst{0%{opacity:1;transform:translate(0) scale(.4)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}}@keyframes pop-ok{0%{transform:scale(.96)}55%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes shake-bad{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}@keyframes flash-ok{0%{box-shadow:inset 0 0 0 0 transparent}35%{box-shadow:inset 0 0 0 2px var(--gold),0 0 28px color-mix(in srgb,var(--gold) 35%,transparent)}to{box-shadow:inset 0 0 0 0 transparent}}@keyframes flash-bad{0%{box-shadow:inset 0 0 0 0 transparent}40%{box-shadow:inset 0 0 0 2px var(--rose),0 0 22px color-mix(in srgb,var(--rose) 30%,transparent)}to{box-shadow:inset 0 0 0 0 transparent}}@keyframes badge-pop{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fade-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes celebrate-pulse{0%,to{box-shadow:0 0 color-mix(in srgb,var(--gold) 40%,transparent)}50%{box-shadow:0 0 0 8px transparent}}@media(max-width:860px){.lesson-layout{grid-template-columns:1fr}.side-nav{position:static;border-left:none;border-top:1px solid var(--line);padding:1rem 0 0;order:-1}.module-row{grid-template-columns:2.5rem 1fr}.module-row .btn,.module-row .lock-label{grid-column:2;justify-self:start}}@keyframes page-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.home{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 11rem)}.hero{text-align:center;max-width:36rem;margin:0 auto;padding:2rem 1.25rem;border:1px solid var(--line);background:color-mix(in srgb,var(--cream) 55%,white);animation:rise .7s ease both}.hero-logo{width:min(9.5rem,40vw);height:auto;margin-bottom:1.1rem;animation:fade 1s ease both}.hero-kicker{margin:0 0 .5rem;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--rose)}.hero-title{margin:0 0 1rem;font-size:clamp(2.1rem,5vw,3rem)}.hero-lead{color:var(--mute);margin-bottom:1.75rem}.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}.piano-wrap{margin:1rem 0 1.25rem}.demo-caption{margin:0 0 .65rem;font-size:.92rem;color:var(--mute)}.demo-hint{margin:.45rem 0 0;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}.piano{position:relative;-webkit-user-select:none;user-select:none;max-width:32rem}.piano-whites{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}.pkey.white{height:7.5rem;border:1px solid var(--line);background:#f7f4ef;color:var(--charcoal);font:inherit;font-size:.85rem;font-weight:600;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.55rem;cursor:pointer;border-radius:0 0 3px 3px}.pkey.white.is-on{background:color-mix(in srgb,var(--rose) 35%,#f7f4ef);border-color:var(--rose);box-shadow:inset 0 -4px 0 var(--gold)}.pkey.white.is-dim{opacity:.45}.piano-blacks{position:absolute;left:0;right:0;top:0;height:4.4rem;pointer-events:none}.pkey.black{pointer-events:auto;position:absolute;top:0;width:calc(100% / 8 * .58);height:100%;border:none;background:var(--charcoal);cursor:pointer;border-radius:0 0 2px 2px;transform:translate(-50%)}.pkey.black.is-on{background:var(--gold)}.pkey.black.is-dim{opacity:.35}.pkey.black.b0{left:12.5%}.pkey.black.b1{left:25%}.pkey.black.b3{left:50%}.pkey.black.b4{left:62.5%}.pkey.black.b5{left:75%}.staff-live{margin-bottom:.75rem}.staff-live-svg{background:color-mix(in srgb,white 55%,var(--cream));border:1px solid var(--line);padding:.35rem .25rem}.staff-note-lit{filter:drop-shadow(0 0 4px color-mix(in srgb,var(--rose) 70%,transparent))}.demo-panel{margin:1rem 0 1.35rem;padding:1rem;border:1px solid var(--line);background:color-mix(in srgb,var(--cream) 70%,white)}.demo-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.demo-actions .btn{font-size:.9rem;padding:.55rem .9rem}.staff-svg{width:100%;max-width:26rem;height:auto;display:block}.beat-row{display:flex;gap:.55rem;align-items:center;margin:.75rem 0 .35rem}.beat-dot{width:1.35rem;height:1.35rem;border-radius:50%;border:2px solid var(--rose);background:transparent}.beat-dot.is-on{background:var(--rose);animation:beat-pulse .35s ease}.beat-dot.is-strong{border-color:var(--gold)}.beat-dot.is-strong.is-on{background:var(--gold)}.value-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}.value-chip{border:1px solid var(--line);padding:.55rem .7rem;background:#fff;font:inherit;cursor:pointer;min-width:4.5rem;text-align:center}.value-chip strong{display:block;font-family:var(--font-display);font-size:1.1rem}.value-chip span{font-size:.78rem;color:var(--mute)}.value-chip.is-on{border-color:var(--rose);background:color-mix(in srgb,var(--rose) 16%,white)}.bar-group{display:flex;gap:.35rem;padding:.5rem .6rem;border-right:2px solid var(--charcoal);margin-right:.25rem}.bar-group:last-child{border-right:none}@keyframes beat-pulse{0%{transform:scale(.85)}to{transform:scale(1)}}:root{--charcoal: #1a1a1a;--charcoal-soft: #2a2a2a;--cream: #efebe9;--cream-deep: #e4ddd6;--ink: #1a1a1a;--rose: #c49799;--rose-deep: #a8787c;--sage: #5e675e;--gold: #c9a96e;--paper: #efebe9;--mute: rgba(26, 26, 26, .62);--line: rgba(26, 26, 26, .14);--font-display: "Playfair Display", Georgia, serif;--font-body: "Source Sans 3", system-ui, sans-serif;--max: 72rem;--lesson-max: 48rem}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:var(--font-body);font-size:1.0625rem;line-height:1.55;color:var(--ink);background:linear-gradient(180deg,#e8e2da 0%,var(--cream) 28%,var(--cream) 100%)}#root{min-height:100vh}a{color:var(--rose-deep);text-decoration-thickness:1px;text-underline-offset:.18em}a:hover{color:var(--charcoal)}img{max-width:100%;height:auto}h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;letter-spacing:.01em}p{margin:0 0 1rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.25rem;border-radius:0;font-weight:600;text-decoration:none;border:1px solid transparent;font:inherit;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.btn-primary{background:var(--charcoal);color:var(--cream)}.btn-primary:hover{background:var(--rose);color:var(--charcoal)}.btn-primary:disabled{opacity:.45;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn-ghost:hover{border-color:var(--sage);color:var(--sage)}