@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Manrope:wght@400;500;600;650;700;750;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#263a30;background:#f5f7f3;font-synthesis:none;--ink:#263a30;--muted:#778078;--green:#326b47;--mint:#beeec3;--line:#e7ebe5}*{box-sizing:border-box}body{margin:0}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #5ba175;outline-offset:4px}button{color:inherit}button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.site-header{height:78px;max-width:1120px;padding:0 24px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e4e9e1}.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none;font-family:Manrope,sans-serif;font-size:32px;font-weight:800;letter-spacing:-1.7px}.brand-mark{display:grid;place-items:center;width:37px;height:40px;background:var(--mint);border-radius:12px;font-family:Georgia,serif;font-size:34px;letter-spacing:0;margin-right:10px}.brand-dot{color:#639e71}main{max-width:1120px;margin:20px auto 28px;padding:0 24px}.trainer{position:relative;border:1px solid #e1e7dc;border-radius:22px;background:#fff;box-shadow:0 8px 30px #2a452907;overflow:hidden}.trainer-toolbar{padding:22px 30px;display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line)}h2{font-size:20px;font-weight:650;margin:0}select{color:#53634f;border:1px solid #dfe6d9;background:#f8faf6;border-radius:9px;padding:12px 10px;font-size:16px;min-height:48px;max-width:210px}.session-row{padding:23px 30px 13px;display:flex;align-items:center;justify-content:space-between;font-size:16px;color:var(--muted)}.session-row>span b{font-weight:550;color:#3d5143;margin-left:0}.progress-track{margin:0 30px;height:8px;border-radius:5px;overflow:hidden;background:#edf0e9}#progress-fill{height:100%;width:0;background:#97d8a4;border-radius:5px;transition:width .25s}.score-area{padding:23px 30px 0}.score-meta{display:flex;align-items:center;justify-content:flex-end;font-size:10px;letter-spacing:1.8px;color:#8d998d;font-weight:650}.text-button{border:0;background:none;min-height:48px;padding:8px 4px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#50674f;font-size:16px;letter-spacing:0;font-weight:500}.text-button:hover{color:#284d33}.text-button:disabled{opacity:.45}#staff{display:block;width:100%;height:auto;aspect-ratio:720 / 220;overflow:visible}.staff-line{stroke:#788675;stroke-width:1.5;vector-effect:non-scaling-stroke}.note{fill:#293d30;stroke:#293d30;transition:fill .2s,stroke .2s}.note.pending{fill:#405440;stroke:#405440}.note.correct{fill:#6ca67b;stroke:#6ca67b}.note.wrong{fill:#cc6860;stroke:#cc6860}.active-column{fill:#f0f7ed}.note-check{fill:none;stroke:#70a97d;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}.feedback{display:flex;align-items:center;justify-content:center;gap:10px;font-size:16px;min-height:48px;color:#71816e;padding:0 15px;text-align:center}.feedback-icon{width:30px;height:30px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#f1f5ed;font-size:15px}.feedback.good{color:#38764b}.feedback.good .feedback-icon{background:#e1f3e4}.feedback.bad{color:#b8544d}.feedback.bad .feedback-icon{background:#fbece9}.keyboard-section{padding:12px 24px 24px}.keyboard-top{display:flex;align-items:center;justify-content:flex-end;margin-bottom:13px;color:#6f7b6c;font-size:13px}.piano-controls{display:flex;gap:10px}.icon-button{display:grid;place-items:center;width:48px;height:48px;background:#f5f7f2;border:1px solid #e8ece3;border-radius:8px}.icon-button[aria-pressed=false]{color:#aab1a5;background:#fff}.piano{position:relative;display:flex;height:250px;isolation:isolate;background:#25322b;border:5px solid #2d3931;border-top-width:8px;border-radius:11px;box-shadow:0 5px 0 #e8ece4;user-select:none;touch-action:none;gap:2px}.piano-key{border:0;touch-action:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;transition:background .08s,transform .08s;position:relative;outline-offset:-4px!important}.piano-key.white{flex:1 1 0;min-width:0;background:linear-gradient(#fff,#fff 85%,#f4f5ed);border-radius:0 0 5px 5px;padding:0 0 15px;box-shadow:inset 0 -5px 0 #e7eadd;color:#465343;z-index:1}.key-name{font-size:20px;font-weight:500}.key-shortcut{font-size:14px;color:#90988b;background:#f1f3ec;min-width:20px;padding:3px;border-radius:4px}.key-octave{font-size:12px;margin-left:2px;color:#a1aa9a}.piano-key.black{position:absolute;z-index:2;top:-2px;width:8%;height:61%;background:linear-gradient(90deg,#26312b,#354139 70%,#26312b);border:1px solid #202b24;border-radius:0 0 5px 5px;box-shadow:inset 0 -5px 0 #1c271f,0 3px 2px #20332825;color:#cbd7c9;padding-bottom:12px}.black .key-name{font-size:15px;color:#c6d0c1}.black .key-shortcut{font-size:12px;background:#455146;color:#c8d3c3}.piano-key.white.pressed{background:#dbeed0;transform:translateY(2px);box-shadow:inset 0 -3px 0 #b8d4b0}.piano-key.black.pressed{background:#567959;transform:translateY(2px)}.piano-key.hit{background:#bde8c3!important}.piano-key.miss{background:#f0c2b7!important}.piano.hide-labels .key-name,.piano.hide-labels .key-shortcut{visibility:hidden}.under-trainer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:18px 4px;font-size:12px;color:#87917f}.under-trainer .text-button{font-size:16px}.results{position:absolute;z-index:5;inset:0;background:#fffffff7;backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}.results[hidden]{display:none}.result-mark{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:#e4f4df;color:#57865a;font-size:34px;margin-bottom:22px}.results h2{font-family:Manrope,sans-serif;font-size:28px;letter-spacing:-1px;margin-top:14px}.result-stats{display:flex;justify-content:center;gap:42px;margin:20px 0 32px}.result-stats div{display:flex;flex-direction:column;gap:7px}.result-stats strong{font-size:27px;font-weight:600;color:#416849}.result-stats span{font-size:15px;color:var(--muted)}.primary-button{border:0;border-radius:10px;background:var(--ink);color:white;padding:14px 23px;display:flex;align-items:center;gap:30px;margin-bottom:14px;font-size:18px;min-height:52px}.primary-button:hover{background:#426a4b}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:700px){.site-header{height:64px;padding:0 16px}.brand{font-size:30px}.brand-mark{width:34px;height:37px;font-size:32px}main{margin:12px auto 20px;padding:0 8px}.trainer{border-radius:16px}.trainer-toolbar{padding:12px;flex-wrap:wrap;gap:8px}h2{font-size:18px}.level-label{margin-left:auto;min-width:0}select{font-size:16px;max-width:100%;padding:10px 5px;min-height:46px}.session-row{padding:14px 14px 10px;font-size:15px}.progress-track{margin:0 14px}.score-area{padding:6px 8px 0}.score-meta .text-button{font-size:16px}#staff{aspect-ratio:400 / 220;min-height:210px}.feedback{font-size:16px;min-height:44px;padding:0 10px}.keyboard-section{padding:6px 6px 16px}.keyboard-top{margin-bottom:10px}.piano{height:clamp(220px,32svh,280px);border-width:3px;border-top-width:7px;gap:1px}.piano-key.white{padding:0 0 16px}.key-name{font-size:clamp(15px,4.4vw,20px)}.key-shortcut{font-size:12px;min-width:19px}.black .key-name{font-size:clamp(10px,3vw,14px)}.black .key-shortcut{font-size:11px;min-width:17px}.key-octave{display:none}.under-trainer{padding:10px 4px}.under-trainer .text-button{font-size:16px;white-space:nowrap}.results{padding:22px 12px}.results h2{font-size:28px}.result-stats{gap:clamp(18px,5vw,28px)}.result-stats span{font-size:14px}}@media(pointer:coarse){.key-shortcut{display:none}.piano-key.white{padding-bottom:20px}.black .key-name{font-size:clamp(10px,3.4vw,16px)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}