.position-diagram{display:none}.keyboard-head,.keyboard-help{display:none}.compact-piano{width:100%;margin:1rem 0!important;overflow:visible;border:4px solid #35245b;border-top-width:12px;background:#35245b;touch-action:manipulation}.compact-piano #piano{width:100%!important;height:150px}.compact-piano .white-key{height:145px}.compact-piano .black-key{height:92px}.compact-piano .key{touch-action:manipulation}.compact-piano .key span{font-size:.65rem;bottom:8px;line-height:1.1}.compact-piano .start-note:after{content:"";position:absolute;left:35%;right:35%;bottom:40%;height:8px;border-radius:50%;background:#9864e8;pointer-events:none}.compact-piano .white-key.on,.compact-piano .white-key.guide,.compact-piano .white-key.correct{background:#c2a4f5}.compact-piano .black-key.on,.compact-piano .black-key.guide,.compact-piano .black-key.correct{background:#8953cf}.paper-card{overflow:visible}.score-scroll{margin-top:12px}.module-star{font-size:1.8rem;color:#7350af;margin-left:auto}.module-star.earned{color:#6645b8;animation:earned-glow 2.8s ease-in-out infinite}.module-status{margin-left:0}body .module{background:#f0e8ff!important;border-color:#c2a5ef!important}body .module.current{background:#dcefff!important;border-color:#98c5f2!important;box-shadow:none!important}body .module.done{background:#bcdaf6!important;border-color:#7eaadb!important}body .module.done .module-ring span,body .challenge-node.done{background:#8d6cc5!important;color:white!important;border-color:#ab8bdf!important}body .feedback.success{background:#eee3ff;color:#50307a;border-color:#b697e7}.card-stages .passed{background:#e7d9ff;color:#51337c}@keyframes earned-glow{50%{filter:drop-shadow(0 0 6px #fff);opacity:.65}}@media(prefers-reduced-motion:reduce){.module-star.earned{animation:none}}
.intro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}#home aside{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}#home .companion{display:flex;flex-direction:column;align-items:center}.menu-trigger{background:#dfcdff;color:#392156;border:0;border-radius:12px;font-size:1.6rem;min-width:44px;min-height:44px}#appMenu{position:fixed;inset:0 auto 0 0;margin:0;border-radius:0 20px 20px 0;height:100dvh;max-height:100dvh;overflow:auto;width:min(92vw,440px);max-width:none;text-align:left;padding:24px;background:#f3eaff;color:#35214e}#appMenu nav{display:grid;gap:8px}#appMenu nav button,#appMenu nav a{font:inherit;text-align:left;background:#e0cef7;color:#35214e;border:0;border-radius:10px;padding:12px;min-height:44px;text-decoration:none}#appMenu nav a:focus-visible{outline:3px solid #452786;outline-offset:2px}#appMenu details{padding:16px 0;border-top:1px solid #baa0d7}#appMenu summary{cursor:pointer;font-weight:700;font-size:1rem}#appMenu p{color:#493459;font-size:1rem}.teacher-photo{width:100%;height:auto;border-radius:14px;margin-top:16px}.demo-notes{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0;color:#5c3690}.demo-notes span{padding:6px;border-radius:6px}.demo-lit{background:#bd9ee9}.sound-constellation{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;padding:30px 0}.sound-constellation button{font-size:2rem;border:0;background:none;color:#ceb9ff;transform:translateY(calc(mod(var(--star),3)*-12px));animation:earned-glow 3s ease-in-out infinite}.topbar{gap:12px}.brand{min-width:0}@media(max-width:500px){.brand{font-size:18px}.brand small{font-size:7px}.brandmark{display:none}.version-switch button{padding:9px}.topbar{padding:14px}#home .hero{padding-top:24px}}
.planet-background{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;mix-blend-mode:screen}.child .planet-background{display:none}.planet-background img{position:absolute;object-fit:contain;opacity:.32;animation:planet-drift 45s ease-in-out infinite alternate}.planet-jupiter{width:min(60vw,750px);height:auto;right:-14vw;top:4vh}.planet-saturn{width:min(65vw,800px);height:auto;left:-15vw;bottom:0;animation-delay:-20s!important}@keyframes planet-drift{to{transform:translateY(2vh) rotate(3deg)}}@media(max-width:600px){.planet-jupiter{width:100vw;right:-38vw;top:9vh}.planet-saturn{width:110vw;left:-35vw;bottom:8vh}}@media(prefers-reduced-motion:reduce){.planet-background img{animation:none}}
.card-instrument{display:block!important;width:100%;margin:12px 0 4px;color:#342047}.card-keyboard-label{font-size:1rem!important;font-weight:700;margin:8px 0!important;color:#503277!important}.card-keyboard{display:block!important;position:relative;height:154px;width:100%;box-sizing:border-box;border:4px solid #39234f;border-top:12px solid #39234f;border-radius:8px;background:#39234f;isolation:isolate;touch-action:manipulation}.card-key{position:absolute;top:0;box-sizing:border-box;padding:0;border-radius:0 0 4px 4px;touch-action:manipulation;user-select:none;-webkit-user-select:none}.card-white{height:136px;z-index:1;background:linear-gradient(#fff,#f9f7fd);border:1px solid #b5abc5;box-shadow:inset 0 -4px #dfd8e9}.card-black{height:85px;z-index:2;background:linear-gradient(#3e354d,#16101f);border:1px solid #130c1a;box-shadow:inset 0 -4px #51475c}.card-key span{position:absolute;bottom:7px;left:0;right:0;font:600 .65rem/1.15 Arial,sans-serif;color:#4e386a;pointer-events:none}.card-black span{color:white}.card-start:after{content:"";position:absolute;bottom:35%;left:30%;width:40%;height:8px;border-radius:50%;background:#a072e2;pointer-events:none}.card-white.on,.card-white.guide,.card-white.correct{background:#d1afff;box-shadow:inset 0 -4px #ab80d6}.card-black.on,.card-black.guide,.card-black.correct{background:#9059cf;box-shadow:inset 0 -4px #643698}.card-key.wrong{background:#f0cbe1}.card-key:focus-visible{outline:3px solid #ac85e6;outline-offset:-3px}.card-register{font-size:.875rem!important;line-height:1.5!important;color:#5b4379!important;margin:10px 0!important}
.card-finger{position:absolute;bottom:38%;left:0;right:0;text-align:center;font:700 14px/1 Arial,sans-serif;color:#63389b;pointer-events:none}.card-black .card-finger{color:#fff}.card-start:after{display:none}.card-start{outline:3px solid #aa80e0;outline-offset:-3px}.card-key span{font-size:9px;overflow-wrap:anywhere}.card-keyboard{margin-bottom:12px}
body:not(.child) .module-heading h3{color:#292047}body:not(.child) .module-heading p{color:#493f60}body:not(.child) .module-status{color:#542c85;font-weight:700}

/* Flash cards: original position image in the card, full 88-key piano directly below. */
.flash-active .position-diagram{display:block}
.flash-active .card-instrument{display:none!important}
.flash-active .keyboard-head{display:flex;margin-top:6px;padding-top:0}
.flash-active .piano-scroll{margin-top:6px!important;margin-bottom:8px}
.flash-active .paper-card{margin-bottom:8px}
.flash-active .lesson-layout{padding-bottom:0}
.flash-active .position-diagram{width:375px;max-width:100%;flex-shrink:0}
.flash-active .position-diagram svg{width:100%;height:auto;max-height:none}
.flash-controls-panel{padding:16px;margin:8px 0;background:#fff;color:#282036;border-radius:12px}
.flash-controls-panel .card-help{margin-top:0}
.flash-active .exercise-card{padding-bottom:8px}
.flash-active .paper-card{margin-bottom:0}
.flash-active #piano{height:158px}
@media(max-width:900px){.flash-active #flashScore{position:sticky;top:calc(env(safe-area-inset-top) + 4px);z-index:10;width:100%;max-width:100%;background:#fff;color:#111;border:1px solid #c5c0ce;border-radius:12px;padding:8px 6px 10px;margin:4px 0 8px;box-shadow:0 6px 18px #0b103044}.flash-active #flashScore svg{height:155px!important}}
.flash-active .white-key{height:150px}
.flash-active .black-key{height:96px}
/* Keep the exercise keyboard at a finger-sized key width on narrow screens.
   The same 88 keys remain available by horizontal scrolling. */
.piano-scroll.compact-piano{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-color:#ad91d6 #35245b}
.piano-scroll.compact-piano #piano{width:2496px!important;min-width:2496px}
.piano-scroll.compact-piano .key{touch-action:pan-x}
/* Text outside the white cards stays light over the dark purple page. */
#compactHelp{color:#f6f1ff!important;font-size:1rem!important;line-height:1.55!important}
body.child #heroText{color:#f6f1ff}
/* Exercise controls move into this white panel; keep their text dark there. */
.flash-controls-panel .card-help,body:not(.child) .flash-controls-panel .card-help,
body:not(.child) .flash-controls-panel .card-controls label{color:#29213f!important}
.flash-controls-panel .card-count,body:not(.child) .flash-controls-panel .card-count{color:#42216f!important}
.piano-scroll .key.start-note{outline:2px solid #9864e8;outline-offset:-3px}
.piano-scroll .key.start-note:after{content:attr(data-start-finger);position:absolute;left:0;right:0;bottom:35%;height:auto;width:auto;text-align:center;background:transparent;color:#563382;font:700 15px Arial,sans-serif;pointer-events:none}
.piano-scroll .black-key.start-note:after{color:#fff}
.piano-scroll .white-key.played-note{background:#c2a4f5}
.piano-scroll .black-key.played-note{background:#8953cf}

/* Key Cards: real-time played-note indication only; no look-ahead */
#noteDisplay .note-token.note-executed{background:#ffe477!important;color:#271448!important;box-shadow:0 0 0 3px #b96e21,0 0 13px #ffce5980;transform:scale(1.035);transition:background-color .1s ease;}
.sequence-count{min-height:38px;padding:7px 0;font-weight:700;font-size:14px;color:var(--accent);display:block;}
body.child .sequence-count{color:#6123c3;}