@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=DM+Serif+Display:ital@0;1&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#213c38;background:#f4f4ed;font-synthesis:none;--paper:#fbfaf6;--ink:#153f3d;--muted:#707a71;--line:#dadfd3;--green:#2a7464;--ui-border:#dce0d4}
*{box-sizing:border-box}body{margin:0}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #ca9855;outline-offset:5px}button{color:inherit}button:disabled{cursor:default}button,select{min-height:40px}button{border:0}a{color:inherit}button svg{width:20px;height:20px}button:hover{filter:brightness(.94)}[hidden]{display:none!important}.page-shell{max-width:1260px;margin:auto;padding:0 54px}.header{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ui-border)}.wordmark{text-decoration:none;display:flex;align-items:center;gap:11px;font-family:'DM Serif Display',Georgia,serif;font-size:31px;letter-spacing:-1px}.wordmark svg{height:30px;width:30px;color:var(--green)}.wordmark-dot{color:#bf8551}.header-actions{display:flex;gap:25px;align-items:center}.icon-button{background:transparent;display:flex;align-items:center;gap:9px;font-size:14px;padding:5px}.icon-button #sound-icon{font-size:24px;font-family:Georgia,serif}.help-button{width:32px;min-height:32px;border:1px solid #bec8bb;border-radius:50%;background:transparent;font-family:Georgia,serif;font-size:18px}.intro{display:flex;align-items:center;justify-content:space-between;padding:40px 0 33px;gap:20px}.eyebrow{font-size:12px;letter-spacing:2.3px;font-weight:650;color:#75806b;margin-bottom:10px}h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;font-size:45px;letter-spacing:-1.5px;line-height:1.1;margin:0 0 12px}.intro p{font-size:16px;color:#707a71;margin:0}.session-stats{display:flex;gap:30px;align-items:center;padding:10px 7px 0 0}.session-stats>div{display:flex;flex-direction:column;align-items:center;gap:5px}.stat-value{font-family:'DM Serif Display',Georgia,serif;font-size:35px;line-height:1.15;display:flex;align-items:center;gap:5px}.stat-label{font-size:12px;color:#798174}.stat-divider{height:40px;width:1px;background:var(--ui-border)}.small-spark{font-family:Georgia,serif;font-size:23px;color:#b58e51}.playground{background:var(--paper);border:1px solid #d9ded1;border-radius:15px;box-shadow:0 12px 32px #35463307;overflow:hidden}.score-toolbar{height:63px;display:flex;align-items:center;justify-content:space-between;padding:0 27px;border-bottom:1px solid #e9ebe3}.practice-tag{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.7px;font-weight:650}.live-dot{height:6px;width:6px;border-radius:50%;background:#65a084}.score-controls{display:flex;align-items:center;gap:18px}.pace-label{font-size:13px;color:#7a8276;display:flex;align-items:center;gap:8px}select{border:1px solid #dde2d6;border-radius:7px;background:#f2f4eb;color:#395946;padding:0 28px 0 12px;font-size:13px;min-height:32px;cursor:pointer}.pause-button{border:1px solid #dee2d7;display:grid;place-items:center;background:transparent;width:33px;min-height:32px;border-radius:7px}.score-wrap{position:relative;margin:0 26px;height:288px;display:flex;align-items:center;touch-action:pan-y}.score{width:100%;height:100%;overflow:visible;user-select:none}.clef-label{position:absolute;left:6px;font-size:10px;color:#a0a494;letter-spacing:1.9px;writing-mode:vertical-rl;transform:rotate(180deg);pointer-events:none}.treble-label{top:46px}.bass-label{top:178px}.staff-line{stroke:#b8bfae;stroke-width:1.1}.bar-line{stroke:#c7cdbe;stroke-width:1}.note{cursor:grab;touch-action:none;outline:none}.note:active{cursor:grabbing}.note.dragging{opacity:.2}.note-enter{animation:note-enter .65s ease-out}.note-gem{filter:drop-shadow(0 3px 3px #153f3d24)}.note-stem{stroke:#596859;stroke-width:1.65}.ledger-line{stroke:#9fa995;stroke-width:1.3}.note.returning{animation:note-return .6s ease}.score-bottom{display:flex;justify-content:space-between;align-items:center;padding:0 27px 18px;color:#909785;font-size:12px}.score-bottom>span{display:flex;gap:7px;align-items:center}.legend-gem{height:7px;width:7px;background:#70a18b;transform:rotate(45deg);border-radius:1px}.text-button{padding:2px 0;min-height:32px;background:transparent;font-size:13px;color:#6d7d6d}.text-button:hover{color:var(--ink)}#labels-state{color:#2c6252;border-bottom:1px dotted #829c8b;margin-left:3px}.piano-case{background:#193a35;padding:12px 15px 0;border-radius:8px 8px 0 0;position:relative;box-shadow:inset 0 2px 1px #547267}.piano-felt{height:26px;display:flex;justify-content:space-between;align-items:flex-start;padding:0 7px;color:#bbcabb;letter-spacing:2.5px;font-size:9px;font-weight:500}.piano-instruction{color:#7e998b;font-size:8px;letter-spacing:2px}.piano{height:185px;display:flex;position:relative;border-radius:0 0 5px 5px;isolation:isolate;box-shadow:0 -3px 0 #658579}.piano-key{border-radius:0 0 5px 5px;position:relative;padding:0;touch-action:none;user-select:none;-webkit-user-select:none;transition:background .12s,box-shadow .12s;flex-shrink:0}.white-key{background:linear-gradient(90deg,#f8f7f1 0%,#fffef9 45%,#f1f0e8 100%);height:100%;width:calc(100% / 21);border:1px solid #b5b7aa;border-top:0;box-shadow:inset 0 -6px 0 #e4e3d9,0 2px 2px #0003;z-index:1}.black-key{position:absolute;z-index:2;top:-1px;width:calc(100% / 21 * .61);height:61%;background:linear-gradient(90deg,#21332f,#35413b 40%,#1d2b27);border:1px solid #11201b;border-top:0;border-radius:0 0 4px 4px;box-shadow:inset 0 -6px 0 #12221b,inset 2px 0 2px #54705d66,2px 5px 3px #0005}.key-label{position:absolute;bottom:17px;left:0;width:100%;font-size:12px;font-weight:500;color:#7f897a;pointer-events:none}.black-key .key-label{color:#b4c3b6;bottom:14px;font-size:10px}.key-octave{font-size:9px;margin-left:1px;color:#9da491}.c-key .key-label{color:#356e57}.middle-c .key-label{color:#25674f}.middle-c:after{content:'';position:absolute;bottom:7px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#78a487;pointer-events:none}.piano-front{height:14px;background:linear-gradient(#294c40,#1b382f);margin:0 -15px;border-radius:0 0 8px 8px}.piano-key.hovered,.piano-key.playing{background:#ccdece;box-shadow:inset 0 -3px 0 #a5c1ac,0 1px 2px #0003}.black-key.hovered,.black-key.playing{background:#52846b;box-shadow:inset 0 -4px 0 #34654c}.piano-key.correct{background:#b9dec5}.piano-key.wrong{background:#efc2b9}.no-labels .key-label{opacity:0}.feedback-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:21px;min-height:36px}.feedback{font-size:14px;color:#748170;display:flex;align-items:center;gap:9px}.feedback-star{font-size:25px;line-height:1;color:#6e937d}.feedback.is-correct{color:#327255}.feedback.is-wrong{color:#bc6253}.restart-button{display:flex;align-items:center;gap:7px;white-space:nowrap}.restart-button>span{font-size:19px}footer{display:flex;justify-content:space-between;border-top:1px solid var(--ui-border);margin-top:34px;padding:19px 0 26px;color:#98a08f;font-size:11px;letter-spacing:.1px}footer span:first-child{color:#7c8b76}.help-panel{border:1px solid #dbe2d3;border-radius:10px;background:var(--paper);padding:20px 24px;margin-bottom:22px;font-size:14px;line-height:1.6}.help-panel p:last-child{margin-bottom:0}.pause-overlay{position:absolute;inset:0;background:#fbfaf6ef;z-index:3;display:flex;align-items:center;justify-content:center;gap:24px;flex-direction:column}.pause-overlay>span{font-family:'DM Serif Display',Georgia,serif;font-size:30px}.pause-overlay button{padding:12px 23px;background:#255d4e;color:#fff;border-radius:30px;font-size:14px}.effects{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}.drag-ghost{position:fixed;width:53px;height:53px;pointer-events:none;z-index:30;transform:translate(-50%,-50%);filter:drop-shadow(0 5px 5px #25493c35)}.demon{position:fixed;width:132px;height:132px;pointer-events:none;transform:translate(-50%,-85%);background-image:url('demons.png');background-size:200% 200%;border-radius:45%;mix-blend-mode:multiply;animation:imp-visit 1.65s ease-out forwards}.spark{position:fixed;width:7px;height:7px;background:var(--spark-color,#70aa88);transform:rotate(45deg);animation:spark-out .8s ease-out forwards}.match-pop{position:fixed;color:#397958;font-family:'DM Serif Display',Georgia,serif;font-size:22px;animation:match-pop 1s ease-out forwards}.paused .live-dot{background:#adb7a6}@keyframes note-enter{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}@keyframes note-return{0%,100%{translate:0 0}30%{translate:-6px 0}65%{translate:4px 0}}@keyframes imp-visit{0%{opacity:0;translate:0 16px;rotate:-10deg;scale:.6}20%{opacity:1;translate:0 0;rotate:7deg;scale:1.05}45%{rotate:-4deg;scale:1}70%{opacity:1}100%{opacity:0;translate:0 -26px;rotate:4deg}}@keyframes spark-out{to{translate:var(--dx) var(--dy);opacity:0;scale:.25;rotate:90deg}}@keyframes match-pop{0%{opacity:0;translate:0 5px}20%{opacity:1}100%{opacity:0;translate:0 -35px}}@media(min-width:1450px){.page-shell{padding-top:16px}.intro{padding-top:48px;padding-bottom:39px}.score-wrap{height:322px}.piano{height:204px}}@media(max-width:800px){.page-shell{padding:0 24px}.header{height:85px}.intro{padding:30px 0 27px}h1{font-size:37px}.session-stats{gap:18px}.stat-value{font-size:29px}.stat-label{font-size:11px}.score-wrap{margin:0 12px;height:256px}.clef-label{display:none}.piano-case{padding-left:8px;padding-right:8px}.piano-front{margin:0 -8px}.piano{height:168px}.key-label{font-size:10px}.score-toolbar{padding:0 18px}.score-bottom{padding-left:18px;padding-right:18px;font-size:11px}.piano-instruction{display:none}footer{margin-top:25px}}@media(max-width:560px){.page-shell{padding:0 14px}.header{height:76px}.wordmark{font-size:28px}.header-actions{gap:14px}.icon-button{font-size:12px}.intro{align-items:flex-start;gap:14px;flex-direction:column;padding:28px 4px 22px}h1{font-size:38px}.intro p{font-size:14px}.eyebrow{font-size:10px}.session-stats{align-self:stretch;justify-content:flex-start;gap:23px;padding:8px 0 0}.session-stats>div{flex-direction:row;gap:9px}.stat-value{font-size:25px}.stat-divider{height:21px}.small-spark{font-size:19px}.score-toolbar{height:57px;padding:0 14px}.practice-tag{font-size:10px;letter-spacing:1px}.score-controls{gap:9px}.pace-label{font-size:12px;gap:6px}select{font-size:12px;padding-left:8px;padding-right:5px}.score-wrap{height:268px;margin:0 9px}.score-bottom{align-items:center;padding:0 13px 12px;gap:8px}.score-bottom>span{max-width:205px;line-height:1.5}.legend-gem{flex-shrink:0}.score-bottom .text-button{font-size:11px;white-space:nowrap}.piano{height:150px}.piano-case{padding:9px 5px 0}.piano-felt{height:23px;font-size:8px}.piano-front{margin:0 -5px}.white-key{border-radius:0 0 3px 3px}.black-key{width:calc(100% / 21 * .65)}.key-label{font-size:9px;bottom:15px}.black-key .key-label{font-size:7px}.key-octave{font-size:7px}.feedback-row{align-items:flex-start;margin-top:18px}.feedback{font-size:12px;line-height:1.5;max-width:260px;gap:6px}.restart-button{font-size:11px;min-height:25px}.feedback-star{font-size:21px}footer{font-size:10px;line-height:1.7;gap:25px;margin-top:24px}footer span:last-child{text-align:right}.help-panel{font-size:13px;padding:16px}.demon{width:105px;height:105px}.pause-overlay>span{font-size:26px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.demon{animation:none;opacity:1}.note-enter{animation:none}}
.piano{--key-count:21}.white-key{width:calc(100% / var(--key-count))}.black-key{width:calc(100% / var(--key-count) * .61);left:calc((var(--key-index) + .695) / var(--key-count) * 100%)}
@media(max-width:560px){.piano{--key-count:15}.high-key{display:none}.score-wrap{height:238px}.key-label{font-size:11px}.black-key .key-label{font-size:8px}.key-octave{font-size:8px}.piano{height:155px}.piano{min-width:0}}
@font-face{font-family:Bravura;src:url('Bravura.woff2') format('woff2');font-display:block}
.note:focus-visible{outline:none}

.playground.has-selection .piano-instruction{display:inline;color:#d5eddd;letter-spacing:1.2px}
.section-counter{font-size:13px;color:#657861}
.note.completed{opacity:.23;pointer-events:none}
.note.upcoming{cursor:default}
.slot-marker{font-family:'DM Sans',sans-serif;font-size:15px;fill:#9ca694;pointer-events:none}
.slot-marker.current{fill:#326d55;font-weight:700}
.slot-marker.completed{fill:#4b8c69;font-size:18px}
.angel-reward{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(ellipse at center,#fbfaf6fa 15%,#fbfaf6e8 48%,#fbfaf600 85%);animation:angel-visit var(--reward-duration) ease-in-out forwards}
.angel-art{width:196px;height:196px;flex:none;background-image:url('angels.png');background-size:200% 200%;background-repeat:no-repeat;filter:drop-shadow(0 3px 5px #ba914724)}
.angel-caption{font-family:'DM Serif Display',Georgia,serif;font-size:25px;line-height:1.3;color:#946b31;margin-top:4px}
.paused .angel-reward{animation-play-state:paused}
@keyframes angel-visit{0%{opacity:0;transform:translateY(12px)}14%{opacity:1;transform:translateY(0)}82%{opacity:1;transform:translateY(-3px)}100%{opacity:0;transform:translateY(-14px)}}
@media(max-width:560px){.angel-art{width:162px;height:162px}.angel-caption{font-size:22px}.angel-reward{background:radial-gradient(ellipse at center,#fbfaf6fa 20%,#fbfaf6e8 60%,#fbfaf600 95%)}}
@media(prefers-reduced-motion:reduce){.angel-reward{animation:none!important;opacity:1;transform:none}}
/* Sheet practice uses attack groups, including both hands in the same column. */
.score-wrap{height:338px}.treble-label{top:94px}.bass-label{top:216px}
.chord-band{fill:transparent;stroke:transparent;pointer-events:none}
.note.selected .chord-band{fill:#dce9d33d;stroke:#aac2a37a;stroke-width:1}
.tone-found{opacity:.23}.accidental{fill:#4e6657}.bar-label{font:11px 'DM Sans',sans-serif;fill:#8c9784}
.song-details{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding:16px 27px 5px;font-size:12px;color:#728169}
.song-details a{text-underline-offset:3px;color:#436a55}.practice-note{flex-basis:100%;font-size:11px;color:#8a9381}
.keyboard-scroll{overflow-x:auto;overflow-y:hidden;scrollbar-color:#79927f #193a35;scrollbar-width:thin;padding-bottom:4px}
.song-mode .piano{min-width:1120px}.song-mode .high-key{display:block}
.octave-nav{display:flex;align-items:center;gap:8px;margin:0 5px 10px;color:#b4c6b6;font-size:11px}
.octave-nav button{min-height:28px;border:1px solid #557162;border-radius:6px;background:#294b3e;color:#e3ecdf;padding:3px 12px;font-size:11px}
.practice-tag select{max-width:240px}.song-mode .note{cursor:pointer}
.song-mode .note.completed .tone-found{opacity:1}
@media(max-width:560px){.score-wrap{height:284px}.song-details{padding:13px 14px 3px;font-size:11px}.practice-note{font-size:10px;line-height:1.5}.song-mode .piano{min-width:1050px}.practice-tag select{max-width:185px}.octave-nav{gap:5px}.octave-nav button{padding:3px 8px}.piano-instruction{font-size:7px;letter-spacing:.5px!important}.score-bottom>span{max-width:245px}.section-counter{font-size:11px}}
.bar-jump{display:flex;align-items:center;gap:7px}.bar-jump select{min-height:27px;padding:2px 6px;font-size:11px}.song-details{align-items:center}
@media(max-width:560px){.bar-jump{gap:4px}.bar-jump select{max-width:74px}.song-details{column-gap:12px;row-gap:10px}.song-details>a{font-size:11px}}
.midi-panel{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 20px;padding:16px 20px;border:1px solid #d9dfd1;border-radius:12px;background:#eef1e7}
.midi-copy{flex:1;min-width:200px}.midi-copy strong{font-size:13px;color:#365e4d}.midi-copy p{font-size:12px;line-height:1.5;color:#71816b;margin:4px 0 0;max-width:520px}
.midi-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.midi-actions select{max-width:240px;min-height:35px}.midi-actions button{background:#31644e;color:#fff;border:1px solid #31644e;border-radius:7px;padding:8px 14px;font-size:12px;min-height:35px}.midi-actions button:disabled{opacity:.55;cursor:default}.midi-panel.is-connected{border-color:#9bb59c}
.midi-hint{flex-basis:100%;margin:0;font-size:11px;line-height:1.5;color:#79856f}.midi-playing{font-size:11px;color:#3e7556}.midi-playing:empty{display:none}
.piano-key.midi-held{background:#c1decb;box-shadow:inset 0 -3px 0 #7aa98b,0 1px 2px #0003}.black-key.midi-held{background:#527e67;box-shadow:inset 0 -4px 0 #345d46}.piano-key.midi-held.wrong{background:#efc2b9}
@media(max-width:560px){.midi-panel{padding:14px;gap:12px;margin-bottom:16px}.midi-actions{width:100%}.midi-actions select{flex:1;min-width:0;max-width:100%}.midi-copy{min-width:0}.midi-actions button{white-space:nowrap}.midi-copy p{font-size:11px}}
.wrong-note-feedback{pointer-events:none;animation:wrong-score-fade 2.6s ease-out forwards}

.wrong-ledger{stroke:#bc746b;stroke-width:1.25}.wrong-stem{stroke:#b45750;stroke-width:1.5}.wrong-accidental{fill:#ab453f}
.wrong-note-gem{filter:drop-shadow(0 2px 3px #b04b4530)}.wrong-note-cross{fill:none;stroke:#b24e46;stroke-width:1.7;stroke-linecap:round}
.wrong-note-caption-bg{fill:#fff0e8;stroke:#e7c3b7;stroke-width:.8}.wrong-note-caption{fill:#a64942;font:600 11px 'DM Sans',sans-serif;letter-spacing:.3px}
@keyframes wrong-score-fade{0%{opacity:0}7%,76%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.wrong-note-feedback{animation:none!important}}