.learning-grid{grid-template-columns:minmax(0,1.4fr) minmax(270px,.85fr);gap:20px;display:grid}.learning-panel{background:#fffefa;border:1px solid #e4dff0;border-radius:22px;min-width:0;padding:clamp(18px,3vw,28px);box-shadow:0 20px 50px -40px #352c69}.learning-panel h2{letter-spacing:-.045em;color:#2b254b;margin:0 0 12px;font-size:clamp(21px,2.4vw,29px)}.learning-panel p{color:#676178;line-height:1.7}.learning-controls{flex-wrap:wrap;align-items:end;gap:13px;margin:0 0 22px;display:flex}.learning-controls label{color:#534972;flex:160px;gap:6px;min-width:130px;font-size:13px;font-weight:750;display:grid}.learning-controls select,.learning-controls input{color:#2b254b;min-height:46px;font:inherit;background:#fff;border:1px solid #d8d0e6;border-radius:11px;max-width:100%;padding:10px 12px;font-weight:500}.learning-controls :is(select,input):focus-visible{outline-offset:2px;outline:3px solid #c7beff}.learning-actions{flex-wrap:wrap;gap:10px;margin:16px 0;display:flex}.learning-actions button,.learning-actions a{color:#4f437f;min-height:46px;font:inherit;cursor:pointer;background:#fff;border:1px solid #d9d2e8;border-radius:11px;justify-content:center;align-items:center;padding:11px 16px;font-size:13px;font-weight:750;text-decoration:none;display:inline-flex}.learning-actions .action-primary{color:#fff;background:#5d50c0;border-color:#5d50c0}.learning-actions button:focus-visible,.learning-actions a:focus-visible{outline-offset:3px;outline:3px solid #b9acfc}.learning-actions button:hover:not(:disabled){background:#f0edff}.learning-actions .action-primary:hover:not(:disabled){background:#4c3db6}.learning-actions button:disabled{opacity:.5;cursor:not-allowed}.learning-status{color:#6a608b;min-height:24px;font-size:13px}.scale-degree-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;margin:19px 0;display:grid}.scale-degree{text-align:center;background:#f1eefc;border:1px solid #e4ddf9;border-radius:13px;padding:14px 6px}.scale-degree strong{color:#4d40ad;font-size:clamp(15px,2vw,22px);display:block}.scale-degree small{color:#766e90;font-size:10px;display:block}.scale-degree:first-child{background:#e0d9ff;border-color:#bbb1f6}.scale-keys-scroll{scrollbar-color:#998ed9 transparent;width:100%;min-width:0;max-width:100%;padding:7px 2px 14px;overflow-x:auto}.scale-keybed{touch-action:pan-x;width:510px;max-width:none;height:182px;position:relative}.scale-piano-key{cursor:pointer;font:inherit;transition:background .14s,transform .14s;position:absolute;top:0}.scale-piano-key.white{z-index:1;color:#625a81;background:linear-gradient(#fff,#f4f1f9);border:1px solid #c8c4d4;border-bottom:5px solid #c5bdcf;border-radius:0 0 6px 6px;width:34px;height:175px}.scale-piano-key.black{z-index:2;color:#fff;background:linear-gradient(#39344d,#211d30);border:1px solid #161321;border-bottom-width:4px;border-radius:0 0 5px 5px;width:21px;height:109px}.scale-piano-key.in-scale.white{background:linear-gradient(#e3ddff,#c3b9ff)}.scale-piano-key.in-scale.black{background:linear-gradient(#8172e1,#463a9a)}.scale-piano-key.tonic.white{background:linear-gradient(#bbf4e3,#7ad6c0)}.scale-piano-key.tonic.black{background:linear-gradient(#5abf9f,#327d72)}.scale-piano-key.is-flashing{filter:brightness(1.12);transform:translateY(3px)}.scale-piano-key span{text-align:center;font-size:10px;font-weight:750;position:absolute;bottom:9px;left:0;right:0}.chord-degree-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0;padding:0;list-style:none;display:grid}.chord-degree-list li{background:#f9f7ff;border:1px solid #ebe6f6;border-radius:12px;justify-content:space-between;align-items:center;gap:10px;padding:13px;display:flex}.chord-degree-list li strong{color:#5143a6}.chord-degree-list li small{color:#776e8d;font-size:11px;display:block}.chord-degree-list li button{cursor:pointer;color:#5143a6;background:#fff;border:1px solid #d6cfec;border-radius:9px;min-width:42px;min-height:44px}.progression-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:15px 0;display:grid}.progression-step{background:#f7f5ff;border:1px solid #e0daf3;border-radius:16px;min-width:0;padding:18px 12px;transition:background .16s,border-color .16s,transform .16s}.progression-step.is-current{background:#e8e3ff;border-color:#8676d8;transform:translateY(-2px);box-shadow:0 7px 20px -14px #473cb5}.progression-step .step-roman{color:#79708d;font-size:12px;font-weight:750}.progression-step strong{color:#4c3da5;letter-spacing:-.04em;font-size:clamp(20px,2.7vw,29px);display:block}.progression-step p{min-height:36px;margin:6px 0 12px;font-size:12px}.progression-step select{color:#40345b;background:#fff;border:1px solid #d4cde4;border-radius:10px;width:100%;max-width:100%;min-height:42px;padding:7px 3px;font-size:12px}.progression-step button{cursor:pointer;color:#4b3f94;background:#fff;border:1px solid #d9d1ea;border-radius:9px;min-height:44px;margin-top:10px;padding:9px 12px;font-weight:750}.learning-tempo{color:#554a74;flex-wrap:wrap;align-items:center;gap:12px;margin:10px 0 16px;font-size:14px;display:flex}.learning-tempo input[type=range]{accent-color:#6657cb;flex:170px}.learning-tempo output{color:#493aab;font-variant-numeric:tabular-nums;font-size:22px;font-weight:800}.learning-tempo label{align-items:center;gap:8px;display:flex}.metronome-widget{color:#faf9ff;background:linear-gradient(135deg,#2a2544,#37305a);border-radius:20px;padding:clamp(18px,3vw,27px);box-shadow:0 22px 42px -35px #1a103e}.metronome-widget .learning-controls label{color:#d9d2fa}.metronome-widget .learning-controls :is(select,input){color:#322a4f;background:#edeaf8;border-color:#635a82}.metronome-heading{justify-content:space-between;align-items:start;gap:15px;display:flex}.metronome-heading h2{color:#fff;margin:0;font-size:clamp(21px,3vw,30px)}.metronome-heading p{color:#d0c6e7;margin:5px 0;font-size:13px}.metronome-bpm{font-variant-numeric:tabular-nums;color:#d4c7ff;font-size:35px;font-weight:850}.metronome-bpm small{color:#c4b9db;text-align:center;font-size:11px;font-weight:700;display:block}.metro-leds{justify-content:center;gap:16px;margin:19px 0;display:flex}.metro-led{background:#5a5179;border:2px solid #776c9b;border-radius:50%;width:22px;height:22px;transition:background 70ms,box-shadow 70ms}.metro-led.active{background:#a896ff;box-shadow:0 0 0 6px #a896ff22}.metro-led.active:first-child{background:#85e2ca;box-shadow:0 0 0 6px #85e2ca22}.metronome-widget .learning-actions button{color:#fff;background:#413965;border-color:#7669a1}.metronome-widget .learning-actions .action-primary{color:#241c4f;background:#a89afb;border-color:#a89afb}.metronome-widget .learning-status{color:#e5dff8}@media (width<=980px){.learning-grid{grid-template-columns:minmax(0,1fr)}.progression-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=610px){.scale-degree-row{gap:4px}.scale-degree{padding:10px 3px}.scale-degree small{font-size:9px}.chord-degree-list{grid-template-columns:1fr}.progression-grid{gap:9px}.progression-step{padding:13px 10px}.learning-panel{padding:18px}.metronome-heading{align-items:center}}@media (prefers-reduced-motion:reduce){.scale-piano-key,.progression-step,.metro-led{transition:none!important}.progression-step.is-current{transform:none}}.learning-grid>*,.scale-keys-scroll,.learning-panel{min-width:0}.scale-keys-scroll{overscroll-behavior-inline:contain;overflow:auto hidden}.practice-guide{background:linear-gradient(120deg,#faf7ff,#f4f4fd 70%,#f0faf8)}.practice-heading{flex-wrap:wrap;justify-content:space-between;align-items:start;gap:16px;display:flex}.practice-heading h2{margin:7px 0;font-size:clamp(21px,2.7vw,31px)}.practice-caption{max-width:740px;margin:0 0 12px;font-size:13px}.practice-edit{color:#5647b6;white-space:nowrap;font-size:13px;font-weight:750}.practice-bars{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0;display:grid}.practice-bar{text-align:left;color:#3c3166;cursor:pointer;background:#fff;border:1px solid #dfd8eb;border-radius:15px;gap:5px;min-width:0;min-height:103px;padding:13px;transition:border-color .15s,transform .15s;display:grid}.practice-bar small{color:#777189;font-size:11px;font-weight:750}.practice-bar strong{font-size:24px}.practice-bar span{color:#766e87;overflow-wrap:anywhere;font-size:12px}.practice-bar.is-current{background:#eeeaff;border:2px solid #6858c9;transform:translateY(-2px)}.practice-bar.is-matched strong:after{content:" ✓";color:#208d69;font-size:17px}.practice-current{color:#443b82;font-size:15px;font-weight:750}.practice-actions button{flex:0 auto}@media (width<=640px){.practice-bars{grid-template-columns:repeat(2,minmax(0,1fr))}.practice-bar{padding:10px}.practice-bar strong{font-size:20px}.practice-actions button{flex:43%}}@media (prefers-reduced-motion:reduce){.practice-bar{transition:none}.practice-bar.is-current{transform:none}}.piano-key.practice-target.white{background:linear-gradient(#ddfaf0,#8be7c7)!important;border-color:#68c7a8!important}.piano-key.practice-target.black{background:linear-gradient(100deg,#2ab792,#136958)!important}.piano-key.practice-target.pressed.white{background:#b4a5ff!important}.piano-key.practice-target.pressed.black{background:#8b75ed!important}.practice-bars.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}@media (width<=640px){.practice-bars.is-three{grid-template-columns:repeat(2,minmax(0,1fr))}}.practice-report[hidden]{display:none!important}.practice-report{background:#fff;border:1px solid #dad3f0;border-radius:17px;margin-top:21px;padding:clamp(15px,2.5vw,23px);scroll-margin-top:90px;box-shadow:0 10px 26px -23px #33277b}.practice-report-heading{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.practice-report-heading h3{color:#332b63;margin:5px 0;font-size:clamp(20px,2.4vw,27px)}.practice-report-heading output{font-variant-numeric:tabular-nums;color:#4d3fbe;font-size:clamp(24px,3.5vw,38px);font-weight:850}.practice-report-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0;padding:0;list-style:none;display:grid}.practice-result-card{background:#fff8f4;border:1px solid #efded1;border-radius:12px;align-content:start;gap:6px;min-width:0;padding:13px;display:grid}.practice-result-card[data-status=matched]{background:#ebfbf5;border-color:#a7dfc9}.practice-result-card[data-status=not-reached]{background:#f4f3f8;border-color:#e1dfea}.practice-result-card small{color:#74667a;letter-spacing:.035em;font-size:10px;font-weight:800}.practice-result-card strong{color:#372d67;font-size:clamp(18px,2.6vw,24px)}.practice-result-card span{color:#635d76;overflow-wrap:anywhere;font-size:12px;line-height:1.5}.practice-copy-fallback{color:#392f6b;background:#fff;border:1px solid #b4ace5;border-radius:10px;width:100%;min-height:110px;margin-top:8px;padding:10px;font-size:12px;display:block}.practice-copy-fallback[hidden]{display:none}@media (width<=850px){.practice-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=420px){.practice-report-grid{gap:7px}.practice-result-card{padding:10px}}.practice-transport{flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0 19px;display:flex}.practice-pulse{background:#eeeafb;border:1px solid #d3caf0;border-radius:13px;align-items:center;gap:13px;min-width:210px;padding:10px 13px;display:flex}.practice-count-number{color:#5644ae;font-variant-numeric:tabular-nums;text-align:center;flex:none;min-width:63px;font-size:26px;font-weight:900;line-height:1.1;display:block}.practice-pulse-middle{gap:8px;min-width:0;display:grid}.practice-pulse-caption{color:#5b4b8d;overflow-wrap:anywhere;font-size:11px;font-weight:700;line-height:1.35}.practice-beat-dots{gap:7px;display:flex}.practice-beat-dot{background:#c7bce4;border-radius:100%;width:13px;height:13px;transition:background-color .12s,transform .12s;box-shadow:inset 0 1px 2px #7e69a122}.practice-beat-dot.is-current{background:#6652d1;transform:scale(1.13);box-shadow:0 0 0 3px #6652d122}.practice-pulse[data-phase=countin]{background:#fff4e2;border-color:#f5cf91}.practice-pulse[data-phase=countin] .practice-count-number,.practice-pulse[data-phase=countin] .practice-beat-dot.is-current{color:#b7631b;background:#e99d48}.practice-pulse[data-phase=countin] .practice-count-number{background:0 0}.practice-pulse[data-phase=finished]{background:#e8faf3;border-color:#99d8c4}.practice-pulse[data-phase=finished] .practice-count-number{color:#167d60}.practice-click-label{color:#564b7b;align-items:center;gap:8px;font-size:13px;font-weight:750;display:flex}.practice-click-label input{accent-color:#6756c7;width:18px;height:18px}.practice-click-label small{color:#716b86;font-size:11px;font-weight:500}.practice-cancel{color:#a13b32;cursor:pointer;background:#fbeae6;border:1px solid #edc9c0;border-radius:10px;min-height:42px;padding:11px 14px}.practice-cancel[hidden],.vp-practice-hud[hidden]{display:none!important}.vp-practice-hud{z-index:12;background:linear-gradient(115deg,#423864,#333455);border:1px solid #7469a0;border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:11px;margin:16px 0 12px;padding:12px;display:flex;position:sticky;top:8px;box-shadow:0 9px 22px -11px #17102b}.vp-practice-hud-chord{gap:3px;min-width:116px;display:grid}.vp-practice-hud-chord span{letter-spacing:.09em;color:#c4c0ed;font-size:10px;font-weight:800}.vp-practice-hud-chord strong{color:#fff;font-size:16px;line-height:1.3}.vp-practice-hud .practice-pulse{background:#312c4d;border-color:#796da4;min-width:150px;padding:7px 11px}.vp-practice-hud .practice-count-number{color:#e2d5ff;min-width:58px;font-size:25px}.vp-practice-hud .practice-pulse-caption{color:#dfd6ff}.vp-practice-hud .practice-beat-dot{background:#756991}.vp-practice-hud .practice-beat-dot.is-current{background:#b9a7ff}.vp-practice-hud .practice-pulse[data-phase=countin]{background:#514129;border-color:#b08046}.vp-practice-hud .practice-pulse[data-phase=countin] .practice-count-number{color:#ffe2b1}.vp-practice-hud .practice-pulse[data-phase=countin] .practice-beat-dot.is-current{background:#e9a552}.vp-practice-hud .practice-pulse[data-phase=finished] .practice-count-number{color:#92e6c4}.vp-practice-hud-actions{gap:7px;display:flex}.vp-practice-hud-actions button{color:#fff;cursor:pointer;background:#5d4c8b;border:1px solid #aa96e0;border-radius:9px;min-height:43px;padding:9px 12px;font-size:12px;font-weight:750}.vp-practice-hud-actions button[hidden]{display:none!important}.vp-practice-hud-actions #vp-practice-stop-take{background:#b44550;border-color:#d76c76}@media (width<=620px){.practice-transport{align-items:stretch}.practice-transport .practice-pulse{flex:190px}.practice-click-label{width:100%}.vp-practice-hud{gap:8px;margin:10px 0;padding:10px;top:4px}.vp-practice-hud-chord{flex:115px}.vp-practice-hud .practice-pulse{flex:135px;min-width:0}.vp-practice-hud-actions{flex:100%}.vp-practice-hud-actions button{width:100%;min-height:44px}}@media (prefers-reduced-motion:reduce){.practice-beat-dot{transition:none;transform:none!important}}.piano-touch-toolbar{color:#e3ddff;flex-wrap:wrap;align-items:center;gap:9px;margin:12px 0 4px;display:flex}.piano-touch-toolbar strong{letter-spacing:.03em;font-size:12px}.piano-touch-toolbar .vp-touch-mode{color:#eeeaff;cursor:pointer;background:#51496d;border:1px solid #69618f;border-radius:10px;min-height:42px;padding:9px 13px;font-size:12px;font-weight:750}.piano-touch-toolbar .vp-touch-mode.is-selected{color:#2d254a;background:#a694ff;border-color:#c0b1ff}.piano-touch-toolbar span{color:#d3cceb;flex:220px;font-size:11px;line-height:1.5}.piano-scroller[data-touch-mode=glide] .piano-keybed,.piano-scroller[data-touch-mode=glide] .piano-key{touch-action:none!important}@media (width<=540px){.piano-touch-toolbar{gap:7px}.piano-touch-toolbar strong{width:100%}.piano-touch-toolbar span{flex-basis:100%}}