@font-face{font-family:'Material Symbols Rounded';font-style:normal;font-weight:400;font-display:block;src:url(/fonts/material-symbols-rounded.woff2) format('woff2')}.material-symbols-rounded{font-family:'Material Symbols Rounded';font-size:24px;display:inline-block;line-height:1;font-weight:400;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;-webkit-font-smoothing:antialiased}:root{--bg-app:#e7f4ff;--shell-bar:#06111f;--accent:#005BFF;--accent-strong:#0047C7;--ink:#06111f;--text-muted:rgba(6,17,31,0.72);--text-faint:rgba(6,17,31,0.44);--font-display:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Plus Jakarta Sans',sans-serif;--font-body:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter','Plus Jakarta Sans',sans-serif;--accent-white:#00D66B;--accent-black:#00D66B;--piano-height:25vh;--black-key-height:60%;--piano-visibility:1}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none}body,html{width:100%;height:100%;overflow:hidden;background:var(--bg-app);font-family:var(--font-body);touch-action:none;color:var(--ink)}#app{height:100%;display:flex;flex-direction:column;background:var(--bg-app);position:relative;opacity:0;transition:opacity .5s ease-in-out}#app.fade-in{opacity:1}.learn-topbar{flex:0 0 64px;height:64px;display:flex;align-items:center;gap:12px;padding:0 clamp(18px,3vw,42px);background:#fff;border-bottom:2px solid rgba(6,17,31,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 10px 26px rgba(6,17,31,.08);position:relative;z-index:55}.learn-back-btn{flex:0 0 auto;width:auto;height:auto;gap:6px;padding:8px 12px;border-radius:10px;border:none;background:0 0;color:rgba(6,17,31,.62);font-size:13px;font-weight:700;white-space:nowrap;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;transition:transform 150ms cubic-bezier(.32,.72,0,1)}.learn-back-btn:hover{background:rgba(6,17,31,.05);color:#06111f}.learn-back-btn:active{background:rgba(6,17,31,.09)}.learn-back-btn .material-symbols-rounded{font-size:20px;color:inherit}.learn-icon-btn{width:40px;height:40px;padding:0;border-radius:12px;border:1px solid rgba(6,17,31,.14);background:rgba(6,17,31,.04)}.learn-icon-btn:hover{background:rgba(6,17,31,.08)}.learn-title{flex:1 1 auto;font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:-.01em;color:var(--text-main,#06111f);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.practice-hud{flex:0 0 auto;display:flex;align-items:center;gap:10px}.practice-hud[hidden]{display:none}.practice-stat{display:flex;flex-direction:column;align-items:center;line-height:1.15;min-width:44px}.practice-stat-label{font-family:var(--font-display);font-size:8.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.5)}.practice-stat-val{font-family:var(--font-display);font-size:14px;font-weight:900;color:#fff}.practice-progress-track{width:64px;height:8px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;display:none}.practice-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#00d66b,#00ffb0);transition:width 160ms ease}.practice-icon-btn{flex:0 0 auto;width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:#071929;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 3px 0 #020812}.practice-icon-btn:active{transform:translateY(2px);box-shadow:none}.practice-icon-btn.active{background:var(--accent);border-color:var(--accent)}.practice-icon-btn .material-symbols-rounded{font-size:18px}.practice-icon-btn-exit{background:#3a0d12}.practice-icon-btn-exit:hover{background:#5a1219}.practice-text-btn{flex:0 0 auto;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:rgba(245,248,252,.88);font-family:var(--font-display);font-weight:800;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 #020812,inset 0 1px 0 rgba(255,255,255,.08);transition:transform 120ms cubic-bezier(.32,.72,0,1),background 160ms,box-shadow 120ms,color 160ms}.practice-text-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.practice-text-btn.active{background:linear-gradient(135deg,rgba(0,145,255,.94),rgba(120,190,255,.85))!important;border-color:rgba(157,205,255,.75)!important;color:#06111f!important;box-shadow:0 3px 0 #00358f,0 8px 16px rgba(0,91,255,.28)!important}@media (min-width:560px){.practice-progress-track{display:block}}.learn-controls{flex:0 0 auto;display:flex;flex-direction:column;padding:14px;background:var(--bg-app);border-bottom:2px solid rgba(6,17,31,.14);max-height:52vh}.learn-controls-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto}.learn-tabs{display:flex;flex-wrap:wrap;gap:8px}.learn-tab{flex:1 1 0;min-height:40px;padding:0 12px;border:1px solid #06111f;border-radius:14px;background:#fff;color:#06111f;font-family:var(--font-display);font-weight:900;font-size:12px;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.94),inset 0 -3px 0 rgba(6,17,31,.08),0 3px 0 rgba(6,17,31,.18),0 8px 14px rgba(6,17,31,.1)}.learn-tab.active{background:var(--accent);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -4px 0 rgba(0,38,132,.34),0 3px 0 #00358f,0 8px 14px rgba(0,91,255,.16)}.learn-root-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.learn-root-btn{min-width:38px;min-height:36px;padding:0 4px;border:1px solid #06111f;border-radius:11px;background:#fff;color:#06111f;font-family:var(--font-display);font-weight:800;font-size:12px;cursor:pointer;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.94),inset 0 -2px 0 rgba(6,17,31,.08),0 2px 0 rgba(6,17,31,.18),0 5px 10px rgba(6,17,31,.08)}.learn-root-btn.active{background:var(--accent);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,38,132,.34),0 2px 0 #00358f,0 6px 12px rgba(0,91,255,.16)}.learn-type-picker{display:flex;flex-direction:column;gap:8px}.learn-type-filter{width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(6,17,31,.18);background:#fff;color:var(--ink);font-family:var(--font-body);font-size:12.5px;font-weight:600}.learn-type-filter::placeholder{color:var(--text-faint)}.learn-type-cat-chips{display:flex;flex-wrap:wrap;gap:6px}.learn-type-cat-chip{padding:0 13px;min-height:32px;border:1px solid #06111f;border-radius:999px;background:#fff;color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.94),inset 0 -2px 0 rgba(6,17,31,.08),0 2px 0 rgba(6,17,31,.18),0 4px 8px rgba(6,17,31,.08)}.learn-type-cat-chip.active{background:var(--accent);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,38,132,.34),0 2px 0 #00358f,0 5px 10px rgba(0,91,255,.16)}.is-searching .learn-type-cat-chips{display:none}.learn-type-card{border:1.5px solid rgba(6,17,31,.14);border-radius:16px;background:rgba(255,255,255,.55);padding:12px;margin-top:8px}.learn-type-category{font-family:var(--font-display);font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:4px 0 6px}.learn-type-category:first-child{margin-top:0}.is-searching .learn-type-category{margin-top:14px}.is-searching .learn-type-category:first-child{margin-top:0}.learn-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;margin-bottom:2px}.learn-type-category[hidden],.learn-type-grid[hidden]{display:none}.learn-type-btn{border:1px solid rgba(6,17,31,.5);padding:7px 12px;border-radius:11px;background:#fff;color:#06111f;font-family:var(--font-body);font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap;box-shadow:0 2px 0 rgba(6,17,31,.12)}.learn-type-btn.active{background:var(--accent);color:#fff;border-color:#06111f;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,38,132,.34),0 2px 0 #00358f}.learn-type-btn[hidden]{display:none}.learn-playback-row{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1.5px solid rgba(6,17,31,.12)}.learn-play-btn,.learn-stop-btn{border:none;padding:12px 22px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;transition:transform 150ms cubic-bezier(.32,.72,0,1),background 280ms cubic-bezier(.32,.72,0,1)}.learn-play-btn{background:var(--accent);color:#fff;box-shadow:0 4px 0 #00358f,0 10px 18px rgba(0,91,255,.22)}.learn-play-btn:active{transform:translateY(2px) scale(.98);background:var(--accent-strong);box-shadow:0 2px 0 #00358f,0 6px 12px rgba(0,91,255,.18)}.learn-play-btn:disabled{opacity:.45;cursor:default;box-shadow:none}.learn-stop-btn{background:#06111f;color:#fff;box-shadow:0 4px 0 #020812,0 10px 18px rgba(6,17,31,.18)}.learn-stop-btn:active{transform:translateY(2px) scale(.98);box-shadow:0 2px 0 #020812,0 6px 12px rgba(6,17,31,.14)}.learn-practice-btn{display:inline-flex;align-items:center;gap:6px;border:none;padding:12px 20px;border-radius:999px;font-family:var(--font-display);font-weight:800;font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;color:#06111f;background:linear-gradient(180deg,#ffe27a,#f5b301);box-shadow:0 4px 0 #a56f00,0 10px 18px rgba(245,179,1,.28);transition:transform 150ms cubic-bezier(.32,.72,0,1)}.learn-practice-btn .material-symbols-rounded{font-size:18px}.learn-practice-btn:active{transform:translateY(2px) scale(.98);box-shadow:0 2px 0 #a56f00,0 6px 12px rgba(245,179,1,.22)}.learn-practice-btn:disabled{opacity:.45;cursor:default;box-shadow:none}.learn-tempo{display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:11.5px;color:var(--text-muted);font-weight:700}.learn-tempo input[type=range]{accent-color:var(--accent);width:110px}.learn-tempo span#learnTempoVal{color:var(--ink);min-width:56px;font-weight:800}.learn-chord-mode-toggle{display:flex;gap:6px}.learn-chord-mode-toggle button{border:1px solid #06111f;background:#fff;color:#06111f;font-family:var(--font-display);font-weight:800;font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;padding:8px 12px;border-radius:11px;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.94),inset 0 -2px 0 rgba(6,17,31,.08),0 2px 0 rgba(6,17,31,.18)}.learn-chord-mode-toggle button.active{background:var(--accent);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,38,132,.34),0 2px 0 #00358f}.learn-chord-mode-toggle[hidden]{display:none}.learn-label-mode-picker{display:flex;flex-direction:column;gap:6px}.learn-label-mode-buttons{display:flex;flex-wrap:wrap;gap:6px}.learn-label-mode-btn{min-height:36px;padding:0 12px;border:1px solid #06111f;border-radius:11px;background:#fff;color:#06111f;font-family:var(--font-display);font-weight:800;font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.94),inset 0 -2px 0 rgba(6,17,31,.08),0 2px 0 rgba(6,17,31,.18)}.learn-label-mode-btn.active{background:var(--accent);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,38,132,.34),0 2px 0 #00358f}.learn-mini-label{font-family:var(--font-display);font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}.learn-inversion-picker{display:flex;flex-direction:column;gap:6px}.learn-inversion-picker[hidden]{display:none}.learn-inversion-buttons{display:flex;flex-wrap:wrap;gap:6px}.learn-inversion-btn{min-height:36px;padding:0 12px;border:1px solid #06111f;border-radius:11px;background:#fff;color:#06111f;font-family:var(--font-display);font-weight:800;font-size:11.5px;letter-spacing:.02em;text-transform:uppercase;cursor:pointer;white-space:nowrap;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.94),inset 0 -2px 0 rgba(6,17,31,.08),0 2px 0 rgba(6,17,31,.18)}.learn-inversion-btn.active{background:var(--accent);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,38,132,.34),0 2px 0 #00358f}.learn-inversion-btn:disabled{opacity:.35;cursor:default;box-shadow:none}.learn-slash-picker{display:flex;flex-direction:column;gap:8px}.learn-slash-picker[hidden]{display:none}.learn-slash-row{display:flex;align-items:center;gap:10px}.learn-slash-bass-picker{display:flex;flex-wrap:wrap;gap:6px}.learn-slash-bass-picker[hidden]{display:none}.toggle-switch{display:flex;align-items:center;gap:10px}.toggle-track{width:44px;height:24px;background:#fff;border:1px solid #06111f;border-radius:30px;cursor:pointer;position:relative;transition:.22s;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.94),inset 0 -2px 0 rgba(6,17,31,.08),0 2px 0 rgba(6,17,31,.18)}.toggle-track.active{background:var(--accent);box-shadow:inset 0 2px 0 rgba(255,255,255,.18),inset 0 -3px 0 rgba(0,38,132,.34),0 2px 0 #00358f}.toggle-thumb{width:18px;height:18px;background:#06111f;border-radius:50%;position:absolute;top:2px;left:2px;transition:.22s}.toggle-track.active .toggle-thumb{left:22px;background:#fff}.learn-chord-label{font-family:var(--font-display);font-weight:900;font-size:15px;color:var(--ink);background:#fff;border:1px solid #06111f;border-radius:11px;padding:8px 14px;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.94),inset 0 -2px 0 rgba(6,17,31,.08),0 2px 0 rgba(6,17,31,.18);white-space:nowrap}.learn-chord-label[hidden]{display:none}.stage{position:relative;flex:1 1 auto;overflow:hidden;background:#000;min-height:0;contain:layout paint size}canvas{will-change:transform;transform:translateZ(0);position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20}#learnFallCanvas{z-index:20}#pianoWrap{height:var(--piano-height);width:100%;position:relative;display:flex;background:#000;overflow:hidden;flex-shrink:0;transition:height .16s ease;contain:layout paint;transform:translateZ(0);-webkit-transform:translateZ(0);touch-action:none}#pianoViewport{position:relative;height:100%;width:100%;overflow:hidden;background:0 0}#piano{position:absolute;height:100%;left:0;top:0;display:flex;background:linear-gradient(180deg,#fff 0,#f7f8fa 52%,#e9ecef 100%);opacity:var(--piano-visibility, 1);will-change:transform;transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.white{position:absolute;height:100%;background:#fff;border:none!important;border-radius:0 0 2px 2px;z-index:1;flex-shrink:0;contain:layout paint style}.white.active{background:var(--accent-white)!important}.key-label{position:absolute;bottom:6%;left:0;right:0;text-align:center;font-family:Quicksand,sans-serif;font-weight:700;color:rgba(0,0,0,.55);pointer-events:none;z-index:3;line-height:1.1;white-space:nowrap;overflow:hidden;font-size:10px}.white.active .key-label{color:rgba(20,24,30,.7)}.white.practice-target .key-label{color:rgba(20,24,30,.75)}#app[data-label-mode=qwerty] .black-label,#app[data-label-mode=qwerty] .key-label{font-family:Quicksand,sans-serif;letter-spacing:0}#pianoSeparatorLayer{position:absolute;left:0;top:0;height:100%;pointer-events:none;z-index:2;contain:layout paint style;image-rendering:pixelated}.black{position:absolute;height:var(--black-key-height,60%);background:#1a1a1a;border:none!important;border-radius:0 0 2px 2px;z-index:5;box-shadow:2px 3px 6px rgba(0,0,0,.4);flex-shrink:0;contain:layout style}.black.active{background:var(--accent-black)!important}.black-label{position:absolute;bottom:7%;left:0;right:0;text-align:center;font-family:Quicksand,sans-serif;font-weight:700;color:rgba(255,255,255,.55);pointer-events:none;z-index:6;line-height:1.1;white-space:nowrap;overflow:hidden;font-size:9px}.black.active .black-label{color:rgba(255,255,255,.85)}.black.practice-target .black-label{color:rgba(20,24,30,.75)}#app>.stage{flex:1 1 auto;min-height:0}#app>#pianoWrap{flex:0 0 auto;height:var(--piano-height)}@media (max-width:640px){.learn-tempo input[type=range]{width:80px}}@media (max-width:640px) and (orientation:portrait){:root{--piano-height:20vh}}@media (max-width:640px) and (orientation:portrait){.learn-topbar{gap:12px;padding:0 18px}.learn-topbar.is-practice{gap:6px;padding:0 10px}.learn-topbar.is-practice .learn-back-label{display:none}.learn-topbar.is-practice .learn-back-btn{padding:8px}.practice-hud{gap:5px}.practice-stat{min-width:32px}.practice-stat-label{font-size:7.5px}.practice-stat-val{font-size:12.5px}.practice-icon-btn{width:32px;height:32px;border-radius:10px}.practice-icon-btn .material-symbols-rounded{font-size:16px}.practice-text-btn{height:32px;padding:0 9px;font-size:10.5px}}@media (min-width:1280px) and (min-height:600px){#app{display:grid;grid-template-columns:420px 1fr;grid-template-rows:64px 1fr auto;grid-template-areas:"topbar topbar" "controls stage" "controls piano";height:100%}.learn-topbar{grid-area:topbar}.learn-controls{grid-area:controls;max-height:none;border-bottom:none;border-right:2px solid rgba(6,17,31,.14);padding:18px}.stage{grid-area:stage}#pianoWrap{grid-area:piano}.learn-root-picker{grid-template-columns:repeat(4,1fr)}.learn-type-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}#app.practice-mode .learn-controls{display:flex!important}.key-label{font-size:14px}.black-label{font-size:12px}}@media (min-width:1700px) and (min-height:700px){#app{grid-template-columns:460px 1fr}.learn-type-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}.key-label{font-size:16px}.black-label{font-size:13.5px}}#app.practice-mode .learn-controls{display:none}#piano .black.practice-target,#piano .white.practice-target{background:#f5b301!important;animation:practiceTargetPulse 1.1s ease-in-out infinite}@keyframes practiceTargetPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18)}}#piano .white.practice-correct{background:#00d66b!important}#piano .black.practice-correct{background:#00d66b!important}#piano .black.practice-wrong,#piano .white.practice-wrong{background:#dc2626!important}.practice-toast-wrap{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;max-width:320px;width:90%}.practice-toast{pointer-events:auto;padding:12px 16px;border-radius:14px;background:#06111f;color:#fff;font-size:12.5px;font-weight:700;text-align:center;box-shadow:0 8px 24px rgba(6,17,31,.28);opacity:0;transform:translateY(-8px);transition:opacity .22s,transform .22s}.practice-toast.show{opacity:1;transform:translateY(0)}.practice-complete-overlay{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,17,31,.72)}.practice-complete-overlay[hidden]{display:none}.practice-complete-card{width:100%;max-width:320px;background:#fff;border:2px solid #06111f;border-radius:22px;padding:26px 24px;display:flex;flex-direction:column;gap:14px;text-align:center;box-shadow:inset 0 3px 0 rgba(255,255,255,.6),0 6px 0 rgba(6,17,31,.12),0 18px 34px rgba(6,17,31,.22)}.practice-complete-title{font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--ink)}.practice-complete-stats{font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--text-muted)}.practice-complete-actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}.practice-complete-btn{border:none;padding:13px;border-radius:14px;font-family:var(--font-display);font-weight:800;font-size:13.5px;cursor:pointer;background:#fff;color:var(--ink);border:1.5px solid rgba(6,17,31,.16)}.practice-complete-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 4px 0 #00358f}.practice-complete-btn-primary:active{transform:translateY(2px);box-shadow:none}