.sidebar{width:var(--sidebar-width);height:100%;display:flex;flex-direction:column;background:var(--glass-bg-strong);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-right:1.5px solid var(--glass-border);box-shadow:var(--shadow-md);z-index:var(--z-sidebar);flex-shrink:0;padding:20px 12px;gap:8px;transition:width .22s ease;overflow:hidden;position:relative}.sidebar--collapsed{width:64px;padding-left:0;padding-right:0}.sidebar__toggle{position:absolute;bottom:12px;right:10px;width:28px;height:28px;border-radius:50%;border:1.5px solid var(--glass-border);background:var(--glass-bg-strong);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-secondary);transition:all var(--t-fast);flex-shrink:0}.sidebar__toggle:hover{background:#ffd60a26;color:var(--color-text);border-color:var(--color-primary)}.sidebar--collapsed .sidebar__toggle{right:50%;transform:translate(50%)}.sidebar__nav-label,.sidebar__logo-text,.sidebar__user-info{max-width:200px;overflow:hidden;white-space:nowrap;transition:max-width .22s ease,opacity .15s ease .05s}.sidebar--collapsed .sidebar__nav-label,.sidebar--collapsed .sidebar__logo-text,.sidebar--collapsed .sidebar__user-info{max-width:0;opacity:0;transition:max-width .22s ease,opacity .1s ease}.sidebar--collapsed .sidebar__nav-item{justify-content:center;padding:12px 0}.sidebar--collapsed .sidebar__nav-item:hover{transform:none}.sidebar--collapsed .sidebar__logo{justify-content:center;padding:8px 0 20px}.sidebar--collapsed .sidebar__user{justify-content:center;padding:10px 0;background:transparent}.sidebar--collapsed .sidebar__signout{justify-content:center;padding:10px 0}.sidebar__logo{display:flex;align-items:center;gap:10px;padding:8px 12px 20px;border-bottom:1px solid rgba(0,0,0,.06);margin-bottom:8px}.sidebar__logo-icon{font-size:28px;line-height:1;flex-shrink:0}.sidebar__logo-text{font-family:var(--font-display);font-size:20px;font-weight:800;background:linear-gradient(135deg,#1c1917,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sidebar__nav{display:flex;flex-direction:column;gap:4px;flex:1}.sidebar__nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);color:var(--color-text-secondary);text-decoration:none;font-size:14px;font-weight:500;transition:all var(--t-fast)}.sidebar__nav-item:hover{background:#ffd60a1f;color:var(--color-text);transform:translate(2px)}.sidebar__nav-item--active{background:linear-gradient(135deg,#ffd60a40,#ffc10726);color:var(--color-text);font-weight:700;box-shadow:inset 3px 0 0 var(--color-primary)}.sidebar__nav-item--active svg{color:var(--color-secondary)}.sidebar__footer{border-top:1px solid rgba(0,0,0,.06);padding-top:16px;padding-bottom:44px;display:flex;flex-direction:column;gap:10px}.sidebar__user{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);background:#ffffff80}.sidebar__avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden}.sidebar__avatar img{width:100%;height:100%;object-fit:cover}.sidebar__user-info{display:flex;flex-direction:column;overflow:hidden}.sidebar__user-name{font-size:13px;font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar__user-email{font-size:11px;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar__signout{width:100%;justify-content:flex-start;font-size:13px;color:var(--color-text-secondary);padding:10px 16px;border-radius:var(--radius-sm)}.sidebar__signout:hover{background:#f871711a;color:var(--color-red)}.sidebar__fullscreen-hint{margin:-2px 0 0;padding:8px 12px;border-radius:var(--radius-sm);background:#ffd60a26;color:var(--color-text-secondary);font-size:11px;line-height:1.4}.piano-keyboard__wrapper{overflow-x:auto;overflow-y:hidden;flex-shrink:0}.piano-keyboard__wrapper::-webkit-scrollbar{height:4px}.piano-keyboard__wrapper::-webkit-scrollbar-track{background:#1a1a1a}.piano-keyboard__wrapper::-webkit-scrollbar-thumb{background:#444;border-radius:2px}.piano-keyboard{position:relative;display:flex;height:var(--piano-height);background:linear-gradient(180deg,#2a2a2a,#1a1a1a);padding:12px 6px 0;border-top:3px solid #111;box-shadow:0 -12px 48px #0000004d;overflow:hidden}.piano-key--white{flex-shrink:0;height:100%;background:linear-gradient(180deg,#fafafa,#f2f2f2 55%,#e5e5e5);border:1px solid #C0C0C0;border-top:2px solid #B0B0B0;border-radius:0 0 9px 9px;margin:0 1px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:10px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);box-shadow:0 5px 8px #00000029,inset 0 1px #fffffff2,inset 0 -3px 6px #0000000f}.piano-key--white:hover{background:linear-gradient(180deg,#fff9e6,#fff4cc 55%,#ffe9a0)}.piano-key--white:active,.piano-key--white.piano-key--active{background:linear-gradient(180deg,#ffd60a,#ffc107 55%,#ffb300);transform:translateY(2px);box-shadow:0 2px 4px #0003,inset 0 2px 6px #0000001a}.piano-key--white.piano-key--next{background:linear-gradient(180deg,#ffd60a,#ffc107 60%,#ffb300)!important;box-shadow:0 0 24px #ffd60acc,0 5px 8px #00000029!important;animation:pulseGlow 1.4s ease-in-out infinite}.piano-key--white.piano-key--correct{background:linear-gradient(180deg,#4ade80,#22c55e 60%,#16a34a)!important;animation:keyCorrect .4s ease-out}.piano-key--white.piano-key--wrong{background:linear-gradient(180deg,#f87171,#ef4444 60%,#dc2626)!important;animation:keyWrong .35s ease-out}.piano-key--white.piano-key--upcoming{background:linear-gradient(180deg,#e0e7ff,#c7d2fe 60%,#a5b4fc)!important}.piano-key--black{background:linear-gradient(180deg,#383838,#222,#111);border:1px solid #000;border-radius:0 0 6px 6px;cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:6px;transition:background var(--t-fast),transform var(--t-fast);box-shadow:2px 6px 10px #0000008c,inset 0 1px #ffffff1f,inset 0 -3px 6px #00000059}.piano-key--black:hover{background:linear-gradient(180deg,#484848,#303030,#1a1a1a)}.piano-key--black:active,.piano-key--black.piano-key--active{background:linear-gradient(180deg,#ffd60a,#ffc107);transform:translateY(1px);box-shadow:0 2px 5px #00000073,0 0 14px #ffd60a99}.piano-key--black.piano-key--next{background:linear-gradient(180deg,#ffd60a,#ffc107)!important;box-shadow:0 0 22px #ffd60ae6,2px 6px 10px #00000080!important;animation:pulseGlow 1.4s ease-in-out infinite}.piano-key--black.piano-key--correct{background:linear-gradient(180deg,#4ade80,#22c55e)!important;animation:keyCorrect .4s ease-out}.piano-key--black.piano-key--wrong{background:linear-gradient(180deg,#f87171,#ef4444)!important;animation:keyWrong .35s ease-out}.piano-key--black.piano-key--upcoming{background:linear-gradient(180deg,#818cf8,#6366f1)!important}.piano-key--white.piano-key--scale{background:linear-gradient(180deg,#a7f3d0,#6ee7b7 60%,#34d399)!important;box-shadow:0 0 16px #34d39980,0 5px 8px #00000029!important}.piano-key--black.piano-key--scale{background:linear-gradient(180deg,#34d399,#059669)!important;box-shadow:0 0 14px #34d399b3,2px 6px 10px #00000080!important}.piano-key--white.piano-key--chord{background:linear-gradient(180deg,#fde68a,#fcd34d 60%,#f59e0b)!important;box-shadow:0 0 20px #fbbf24b3,0 5px 8px #00000029!important;animation:pulseGlow 1.2s ease-in-out infinite}.piano-key--black.piano-key--chord{background:linear-gradient(180deg,#f59e0b,#d97706)!important;box-shadow:0 0 18px #f59e0bd9,2px 6px 10px #00000080!important;animation:pulseGlow 1.2s ease-in-out infinite}.piano-key__finger{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;color:#1c1917;font-size:11px;font-weight:800;font-family:var(--font-display);box-shadow:0 2px 8px #00000040;margin-bottom:4px;flex-shrink:0}.piano-key__label{font-size:9px;color:#888;font-family:var(--font-body);font-weight:500;pointer-events:none}.piano-key__letter{font-size:10px;font-weight:800;font-family:var(--font-display);color:#1c1917;pointer-events:none;line-height:1}.piano-key--black .piano-key__letter{color:#fff}@keyframes pulseGlow{0%,to{box-shadow:0 0 18px #ffd60a99,0 5px 8px #00000029}50%{box-shadow:0 0 36px #ffd60af2,0 5px 8px #00000029}}@keyframes keyCorrect{0%{transform:translateY(0)}50%{transform:translateY(3px)}to{transform:translateY(0)}}@keyframes keyWrong{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.app-layout{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.app-layout__body{display:flex;flex:1;overflow:hidden}.app-layout__main{flex:1;display:flex;flex-direction:column;overflow:hidden}.app-layout__content{flex:1;overflow-y:auto;overflow-x:hidden;padding:28px 32px;scroll-behavior:smooth}.app-layout__piano{position:relative;flex-shrink:0;width:100%;z-index:var(--z-piano)}.piano-resize-handle{position:absolute;top:-13px;left:50%;transform:translate(-50%);width:56px;height:26px;background:linear-gradient(180deg,#3a3a3a,#222);border:1px solid #000;border-radius:var(--radius-full);box-shadow:0 2px 10px #00000059;display:flex;align-items:center;justify-content:center;cursor:ns-resize;touch-action:none;z-index:1}.piano-resize-handle:hover,.piano-resize-handle:focus-visible{background:linear-gradient(180deg,#4a4a4a,#2a2a2a);outline:none}.piano-resize-handle__grip{width:28px;height:4px;border-radius:var(--radius-full);background:#777;box-shadow:0 6px #777,0 -6px #777;pointer-events:none}.audio-error-banner{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:#f8717126;border-bottom:1.5px solid rgba(248,113,113,.4);color:#7f1d1d;font-size:13px;font-weight:500;z-index:var(--z-float)}.audio-error-banner__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.audio-error-banner__actions button{border:1.5px solid rgba(248,113,113,.5);background:#fff9;color:#7f1d1d;border-radius:var(--radius-full);padding:4px 14px;font-size:12px;font-weight:700;cursor:pointer}.audio-error-banner__actions button:hover{background:#ffffffe6}@media (max-height: 500px) and (orientation: landscape){.app-layout__content{padding:8px 12px}}@media (max-height: 500px) and (orientation: landscape){.app-layout__body .sidebar{width:52px;padding:4px 0;gap:4px}.app-layout__body .sidebar__logo{justify-content:center;padding:2px 0 6px}.app-layout__body .sidebar__logo-icon{font-size:20px}.app-layout__body .sidebar__nav{gap:0;overflow-y:auto;min-height:0}.app-layout__body .sidebar__nav-item{justify-content:center;padding:5px 0}.app-layout__body .sidebar__nav-label,.app-layout__body .sidebar__logo-text,.app-layout__body .sidebar__user-info{max-width:0;opacity:0}.app-layout__body .sidebar__user{display:none}.app-layout__body .sidebar__signout{justify-content:center;padding:5px 0;background:transparent}.app-layout__body .sidebar__footer{padding-top:4px;padding-bottom:4px;gap:4px}.app-layout__body .sidebar__fullscreen-hint,.app-layout__body .sidebar__toggle{display:none}}.auth-page{min-height:100vh;min-height:100dvh;position:relative;display:flex;align-items:center;justify-content:center;padding:60px 20px;overflow:hidden;background:radial-gradient(ellipse at 20% 30%,rgba(255,214,10,.25) 0%,transparent 55%),radial-gradient(ellipse at 80% 70%,rgba(251,146,60,.18) 0%,transparent 50%),linear-gradient(160deg,#fffde7,#fef9c3 35%,#fff3d6 65%,#fff7ed)}.auth-staff{position:absolute;left:-2%;right:-2%;z-index:0;pointer-events:none}.auth-staff--upper{top:7%}.auth-staff--lower{bottom:7%}.auth-staff__line{height:1.5px;margin-bottom:13px;background:linear-gradient(to right,transparent 0%,rgba(0,0,0,.09) 8%,rgba(0,0,0,.11) 50%,rgba(0,0,0,.09) 92%,transparent 100%)}.auth-staff__line:last-child{margin-bottom:0}.auth-note{position:absolute;z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.1))}.an-1{left:4%;top:7%;font-size:54px;color:#7c3aed;animation:nj2 2.4s ease-in-out infinite}.an-2{left:13%;top:19%;font-size:34px;color:#fb923c;animation:nj1 1.9s ease-in-out infinite .45s}.an-5{left:5%;top:54%;font-size:44px;color:#f472b6;animation:nj1 2.6s ease-in-out infinite .7s}.an-6{left:16%;top:70%;font-size:56px;color:#7c3aed;animation:nj3 2.2s ease-in-out infinite 1.7s}.an-11{left:8%;top:83%;font-size:32px;color:#fb923c;animation:nj2 2.8s ease-in-out infinite .8s}.an-3{left:84%;top:6%;font-size:62px;color:#7c3aed;animation:nj3 2.9s ease-in-out infinite .9s}.an-4{left:91%;top:22%;font-size:38px;color:#f472b6;animation:nj4 1.8s ease-in-out infinite 1.3s}.an-7{left:77%;top:57%;font-size:48px;color:#fb923c;animation:nj2 3.1s ease-in-out infinite .3s}.an-8{left:90%;top:73%;font-size:36px;color:#7c3aed;animation:nj4 2.3s ease-in-out infinite 1.1s}.an-12{left:80%;top:85%;font-size:42px;color:#f472b6;animation:nj1 2.7s ease-in-out infinite 1s}.an-9{left:47%;top:2%;font-size:66px;color:#fb923c;animation:nj3 2.5s ease-in-out infinite .5s}.an-10{left:43%;top:88%;font-size:52px;color:#7c3aed;animation:nj2 2.1s ease-in-out infinite 1.5s}@keyframes nj1{0%,to{transform:translateY(0) rotate(-6deg)}40%{transform:translateY(-28px) rotate(7deg) scale(1.1)}70%{transform:translateY(-10px) rotate(-2deg) scale(1.04)}}@keyframes nj2{0%,to{transform:translateY(0) rotate(8deg)}30%{transform:translateY(-38px) rotate(-14deg) scale(1.14)}65%{transform:translateY(-16px) rotate(4deg) scale(1.06)}}@keyframes nj3{0%,to{transform:translateY(0) scale(1) rotate(0)}35%{transform:translateY(-20px) scale(1.1) rotate(14deg)}68%{transform:translateY(-34px) scale(1.2) rotate(-6deg)}}@keyframes nj4{0%,to{transform:translateY(0) rotate(-14deg)}22%{transform:translateY(-46px) rotate(18deg) scale(1.22)}55%{transform:translateY(-18px) rotate(-8deg) scale(1.08)}80%{transform:translateY(-30px) rotate(5deg) scale(1.12)}}.auth-center{position:relative;z-index:10;width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;animation:authSlideUp .65s both}.auth-brand{display:flex;align-items:center;gap:8px;margin-bottom:20px}.auth-brand__icon{font-size:30px;line-height:1}.auth-brand__name{font-family:var(--font-display);font-size:20px;font-weight:800;color:#1c1917;letter-spacing:-.4px}.auth-headline{font-family:var(--font-display);font-size:42px;font-weight:900;text-align:center;color:#1c1917;line-height:1.08;letter-spacing:-1.5px;margin:0 0 14px;display:flex;flex-direction:column;gap:2px}.auth-headline__accent{color:var(--color-secondary)}.auth-sub{text-align:center;font-size:15px;color:#78716c;line-height:1.65;margin:0 0 28px;max-width:360px}.auth-card{width:100%;background:#ffffffe0;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.95);border-radius:var(--radius-xl);padding:36px;box-shadow:0 4px 6px #00000008,0 10px 30px #00000012,0 32px 64px #0000000f}.auth-card__cta{font-family:var(--font-display);font-size:15px;font-weight:700;color:#1c1917;text-align:center;margin:0 0 20px;letter-spacing:-.2px}.auth-socials{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}.auth-social-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 20px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:transform var(--t-normal),box-shadow var(--t-normal),background var(--t-normal);font-family:var(--font-body)}.auth-social-btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important}.auth-google{background:#fff;color:#1c1917;border:1.5px solid #E5E7EB;box-shadow:0 1px 3px #00000012}.auth-google:hover:not(:disabled){background:#f9fafb;border-color:#d1d5db;box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}.auth-apple{background:#111;color:#fff;box-shadow:0 1px 4px #0003}.auth-apple:hover:not(:disabled){background:#2a2a2a;transform:translateY(-1px);box-shadow:0 4px 14px #0000004d}.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:#c4bab4;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:#f0edeb}.auth-form{display:flex;flex-direction:column;gap:10px}.auth-input{width:100%;padding:13px 16px;border:1.5px solid #E8E4E0;border-radius:var(--radius-sm);font-size:14px;font-family:var(--font-body);color:#1c1917;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);background:#fafaf9;box-sizing:border-box}.auth-input:focus{border-color:var(--color-primary);background:#fff;box-shadow:0 0 0 3px #ffd60a33}.auth-input::placeholder{color:#c4bab4}.auth-submit-btn{width:100%;padding:14px;border:none;border-radius:var(--radius-sm);background:var(--color-primary);color:#1c1917;font-size:14px;font-weight:700;font-family:var(--font-body);cursor:pointer;transition:all var(--t-normal);display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 12px #ffd60a66;letter-spacing:-.1px}.auth-submit-btn:hover:not(:disabled){background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:0 4px 20px #ffd60a8c}.auth-submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.auth-spinner{display:inline-block;width:17px;height:17px;border:2px solid rgba(0,0,0,.14);border-top-color:#1c1917;border-radius:50%;animation:authSpin .7s linear infinite;flex-shrink:0}.auth-spinner--light{border-color:#fff3;border-top-color:#fff}.auth-sent{text-align:center;padding:8px 0}.auth-sent__icon{font-size:52px;display:block;margin-bottom:16px}.auth-sent h3{font-family:var(--font-display);font-size:21px;font-weight:800;color:#1c1917;margin:0 0 10px;letter-spacing:-.3px}.auth-sent p{color:#78716c;font-size:14px;line-height:1.65;margin:0 0 22px}.auth-back-btn{background:none;border:1.5px solid #E5E7EB;padding:10px 22px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;color:#78716c;font-family:var(--font-body);transition:all var(--t-fast)}.auth-back-btn:hover{border-color:#d1d5db;color:#1c1917}.auth-error{color:#dc2626;font-size:13px;margin-top:4px;padding:10px 14px;background:#fef2f2;border-radius:var(--radius-xs);border:1px solid #FEE2E2}.auth-terms{text-align:center;font-size:11px;color:#c4bab4;margin-top:20px;line-height:1.6}@keyframes authSlideUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes authSpin{to{transform:rotate(360deg)}}@media (max-width: 600px){.auth-page{padding:40px 16px}.auth-headline{font-size:32px;letter-spacing:-1px}.auth-sub{font-size:14px}.auth-card{padding:28px 24px}.an-2,.an-4,.an-6,.an-8,.an-11,.an-12{display:none}.an-1{font-size:38px}.an-3{font-size:44px}.an-5{font-size:32px}.an-7{font-size:34px}.an-9{font-size:48px}.an-10{font-size:36px}}.glass-card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1.5px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:24px;transition:transform var(--t-normal),box-shadow var(--t-normal)}.glass-card--accent{border-color:color-mix(in srgb,var(--accent-color, var(--color-primary)) 40%,white);box-shadow:0 8px 32px color-mix(in srgb,var(--accent-color, var(--color-primary)) 15%,transparent)}.glass-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.stat-card{display:flex;align-items:center;gap:16px;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1.5px solid var(--glass-border);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm);transition:transform var(--t-normal)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-card__icon{width:48px;height:48px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--stat-color, var(--color-primary)) 15%,white);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}.stat-card__body{display:flex;flex-direction:column}.stat-card__value{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--color-text);line-height:1}.stat-card__label{font-size:13px;font-weight:500;color:var(--color-text-secondary);margin-top:4px}.stat-card__sub{font-size:11px;color:var(--color-text-muted);margin-top:2px}.now-playing-card{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left;font:inherit;background:linear-gradient(135deg,#7c3aedd9,#6d28d9e6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1.5px solid rgba(167,139,250,.4);border-radius:var(--radius-lg);padding:18px 22px;cursor:pointer;box-shadow:0 8px 32px #7c3aed59,var(--shadow-md);transition:all var(--t-normal);color:#fff}.now-playing-card:hover{transform:translateY(-2px);box-shadow:0 12px 40px #7c3aed73}.now-playing-card__tag{display:inline-block;background:#fff3;border-radius:var(--radius-full);padding:3px 10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px}.now-playing-card__title{font-size:18px;font-weight:800;color:#fff;margin:0}.now-playing-card__sub{font-size:13px;color:#ffffffb3;margin-top:4px}.now-playing-card__play{width:48px;height:48px;border-radius:50%;background:#fff3;border:2px solid rgba(255,255,255,.4);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--t-fast);flex-shrink:0}.now-playing-card__play:hover{background:#ffffff59;transform:scale(1.1)}.floating-notes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.floating-note{position:absolute;bottom:10%;font-size:28px;opacity:0;animation-fill-mode:both;color:var(--color-primary);filter:drop-shadow(0 2px 6px rgba(255,214,10,.5));-webkit-user-select:none;user-select:none}.home-page{display:flex;flex-direction:column;gap:32px;max-width:1100px;margin:0 auto;animation:fadeIn .5s both}.home-hero{position:relative;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1.5px solid var(--glass-border);border-radius:var(--radius-xl);padding:48px;box-shadow:var(--shadow-lg);overflow:hidden;min-height:260px}.home-hero__content{position:relative;z-index:1;animation:slideInLeft .6s both}.home-hero__greeting{font-size:15px;color:var(--color-text-secondary);font-weight:500;margin-bottom:10px}.home-hero__title{font-size:48px;font-weight:900;line-height:1.05;margin-bottom:12px;background:linear-gradient(135deg,#1c1917,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.home-hero__sub{font-size:16px;color:var(--color-text-secondary);margin-bottom:28px}.home-hero__actions{display:flex;gap:12px;flex-wrap:wrap}.home-hero__cta{font-size:16px;padding:14px 28px;border-radius:var(--radius-md)}.home-hero__piano-art{position:relative;z-index:1;animation:bounceIn .8s both .3s}.piano-art{position:relative;width:200px;height:120px;background:linear-gradient(180deg,#2a2a2a,#1a1a1a);border-radius:12px 12px 0 0;padding:10px 8px 0;display:flex;gap:2px;box-shadow:0 8px 32px #0000004d;overflow:hidden}.piano-art__key--white{flex:1;background:linear-gradient(180deg,#fafafa,#e8e8e8);border-radius:0 0 6px 6px;box-shadow:0 2px 4px #00000026;animation:slideUp .4s both}.piano-art__key--black{position:absolute;width:10%;height:60%;top:10px;background:linear-gradient(180deg,#333,#111);border-radius:0 0 4px 4px;box-shadow:2px 4px 6px #00000080;animation:slideUp .4s both}.home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.home-continue{animation:slideUp .5s both .1s}.home-scales{display:flex;flex-direction:column;gap:24px}.home-section-header{display:flex;align-items:center;justify-content:space-between}.home-section-header h2{font-size:22px;font-weight:800}.home-scales__group{display:flex;flex-direction:column;gap:12px}.home-scales__level{font-size:14px;font-weight:600}.home-scales__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.scale-card{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1.5px solid var(--glass-border);border-radius:var(--radius-md);padding:18px 16px;cursor:pointer;text-align:left;transition:all var(--t-normal);overflow:hidden}.scale-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--scale-color) 40%,white)}.scale-card__accent{position:absolute;top:0;left:0;width:4px;height:100%;background:var(--scale-color);border-radius:4px 0 0 4px}.scale-card__body{padding-left:8px}.scale-card__name{font-size:15px;font-weight:700;color:var(--color-text);margin-bottom:2px}.scale-card__type{font-size:12px;color:var(--color-text-muted);text-transform:capitalize}.scale-card__progress{display:flex;align-items:center;gap:8px;padding-left:8px}.scale-card__progress-bar{flex:1;height:4px;background:#00000014;border-radius:2px;overflow:hidden}.scale-card__progress-fill{height:100%;background:var(--scale-color);border-radius:2px;transition:width .6s ease}.scale-card__pct{font-size:11px;font-weight:600;color:var(--color-text-secondary);min-width:28px}.scale-card__arrow{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--color-text-muted);transition:transform var(--t-fast)}.scale-card:hover .scale-card__arrow{transform:translateY(-50%) translate(3px)}@media (max-width: 900px){.home-stats{grid-template-columns:repeat(2,1fr)}.home-hero{grid-template-columns:1fr;padding:32px}.home-hero__piano-art{display:none}.home-hero__title{font-size:36px}}.songs-grid{display:flex;flex-direction:column;gap:10px}@media (min-width: 640px){.songs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}}.song-card{display:block;padding:18px 20px;border-radius:var(--radius-lg);text-decoration:none;color:inherit;transition:transform var(--t-fast),box-shadow var(--t-fast)}.song-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}@media (min-width: 640px){.song-card{padding:16px;aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end}.song-card__arrow,.song-card__desc,.song-card__scales{display:none}}.song-card__main{display:flex;align-items:center;gap:12px}@media (min-width: 640px){.song-card__main{flex-direction:column;align-items:flex-start;gap:6px;height:100%;justify-content:flex-end}}.song-card__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.song-card__title{font-size:16px;font-weight:800;line-height:1.2}@media (min-width: 640px){.song-card__title{font-size:14px}}.song-card__byline{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.song-card__composer,.song-card__dot{font-size:12px;color:var(--color-text-muted)}.song-card__desc{font-size:13px;color:var(--color-text-secondary);line-height:1.55;margin-top:2px}.song-card__scales{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.song-card__scale-chip{font-size:11px;font-weight:700;padding:2px 9px;border-radius:var(--radius-full);background:var(--color-secondary-light);color:var(--color-secondary);border:1px solid rgba(124,58,237,.18)}.song-card__arrow{color:var(--color-text-muted);flex-shrink:0;transition:color var(--t-fast),transform var(--t-fast)}.song-card:hover .song-card__arrow{color:var(--color-text);transform:translate(2px)}@media (min-width: 640px) and (max-height: 500px) and (orientation: landscape){.songs-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.song-card{aspect-ratio:auto;height:84px;padding:12px 14px}.song-card__title{font-size:13px}}.practice-page{display:grid;grid-template-columns:340px 1fr;gap:24px;max-width:1100px;margin:0 auto;animation:fadeIn .4s both}.practice-page__left{display:flex;flex-direction:column;gap:16px}.practice-scale-selector{position:relative}.practice-scale-current{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;cursor:pointer;border:none;text-align:left;transition:all var(--t-normal)}.practice-scale-current:hover{box-shadow:var(--shadow-md)}.practice-scale-current__name{display:block;font-size:17px;font-weight:700;color:var(--color-text)}.practice-scale-current__type{display:block;font-size:12px;color:var(--color-text-muted);text-transform:capitalize;margin-top:2px}.practice-scale-list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:10;padding:12px;max-height:360px;overflow-y:auto;animation:slideUp .2s both}.practice-scale-list__level{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--color-text-muted);padding:8px 8px 4px}.practice-scale-list__item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:none;background:transparent;border-radius:var(--radius-xs);cursor:pointer;font-size:14px;font-weight:500;color:var(--color-text);transition:background var(--t-fast);text-align:left}.practice-scale-list__item:hover{background:#0000000a}.practice-scale-list__item.active{background:#ffd60a26;font-weight:700}.practice-scale-list__dot{width:8px;height:8px;border-radius:50%;background:var(--dot-color);flex-shrink:0}.practice-info{padding:20px}.practice-info h3{font-size:16px;margin-bottom:8px}.practice-info__desc{font-size:13px;color:var(--color-text-secondary);line-height:1.6;margin-bottom:12px}.practice-info__tip{display:flex;gap:8px;font-size:13px;color:var(--color-text-secondary);background:#ffd60a1a;border:1px solid rgba(255,214,10,.3);border-radius:var(--radius-xs);padding:10px 12px;line-height:1.5}.practice-hints{padding:16px 18px}.practice-hints__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-muted);margin-bottom:10px}.practice-hints__list{list-style:none;display:flex;flex-direction:column;gap:8px}.practice-hints__list li{font-size:13px;color:var(--color-text-secondary);line-height:1.55;padding-left:14px;position:relative}.practice-hints__list li:before{content:"–";position:absolute;left:0;color:var(--color-primary);font-weight:700}.practice-controls{padding:20px;display:flex;flex-direction:column;gap:16px}.practice-controls__group{display:flex;flex-direction:column;gap:8px}.practice-controls__label{font-size:12px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px}.practice-hand-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.practice-hand-tab{padding:10px 8px;border-radius:var(--radius-xs);border:1.5px solid rgba(0,0,0,.08);background:#fff9;font-size:13px;font-weight:500;cursor:pointer;transition:all var(--t-fast);color:var(--color-text-secondary)}.practice-hand-tab:hover:not(:disabled){border-color:var(--color-primary)}.practice-hand-tab.active{background:linear-gradient(135deg,#ffd60a40,#ffc10726);border-color:var(--color-primary);color:var(--color-text);font-weight:700}.practice-hand-tab:disabled{opacity:.5;cursor:not-allowed}.practice-slider{width:100%;accent-color:var(--color-primary);height:4px;cursor:pointer}.practice-toggle{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--radius-xs);border:1.5px solid rgba(0,0,0,.08);background:#ffffff80;font-size:13px;font-weight:500;cursor:pointer;color:var(--color-text-secondary);transition:all var(--t-fast)}.practice-toggle.active{border-color:var(--color-secondary);background:var(--color-secondary-light);color:var(--color-secondary)}.practice-actions{display:flex;flex-direction:column;gap:10px}.practice-start{width:100%;justify-content:center;font-size:16px;padding:16px}.practice-showing-msg{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1.5px solid var(--glass-border);border-radius:var(--radius-sm);font-size:15px;font-weight:600;color:var(--color-secondary);animation:pulseGlow 1.5s ease-in-out infinite}.practice-listening-msg{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;background:#34d3991f;border:1.5px solid rgba(52,211,153,.3);border-radius:var(--radius-sm);font-size:15px;font-weight:600;color:#059669}.practice-listening-dot{width:10px;height:10px;border-radius:50%;background:#34d399;animation:heartbeat 1.2s ease-in-out infinite}.practice-listening-msg--free{background:#6366f11a;border:1.5px solid rgba(99,102,241,.25);color:#4f46e5}.practice-listening-dot--free{background:#818cf8}.free-run-complete{padding:10px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;color:#059669;background:#34d3991f;border:1.5px solid rgba(52,211,153,.3);text-align:center;animation:fadeIn .2s both}.practice-page__right{display:flex;flex-direction:column;gap:16px}.practice-inline-controls{display:flex;flex-direction:column}.practice-inline-controls__main{display:flex;align-items:flex-end;gap:16px;padding:16px 18px;flex-wrap:wrap;border-bottom:1px solid rgba(0,0,0,.06)}.practice-inline-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);display:block;margin-bottom:6px}.practice-inline-group{display:flex;flex-direction:column}.practice-inline-group--tempo{flex:1;min-width:140px;max-width:260px}.practice-inline-toggle{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-sm);border:1.5px solid rgba(0,0,0,.1);background:#ffffff80;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--t-fast);align-self:flex-end}.practice-inline-toggle:hover{background:#fffc;color:var(--color-text)}.practice-inline-toggle--on{background:linear-gradient(135deg,#ffd60a26,#ffd60a4d);border-color:var(--color-primary);color:var(--color-text)}.practice-inline-controls__actions{display:flex;align-items:center;gap:10px;padding:14px 18px;flex-wrap:wrap}.practice-start-sm{font-size:14px;padding:11px 22px}.practice-progress-bar{position:relative;height:52px;overflow:hidden;display:flex;align-items:center;padding:0 20px}.practice-progress-bar__fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,var(--color-mint),var(--color-blue));opacity:.25;border-radius:inherit;transition:width .3s ease}.practice-progress-bar__label{position:relative;font-size:14px;font-weight:600;color:var(--color-text)}.practice-complete{text-align:center;padding:32px 24px}.practice-complete__emoji{font-size:56px;margin-bottom:12px}.practice-complete h2{font-size:28px;font-weight:900;margin-bottom:8px}.practice-complete__score{font-family:var(--font-display);font-size:64px;font-weight:900;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:8px}.practice-complete p{color:var(--color-text-secondary)}.practice-notes-display{padding:20px}.practice-notes-display__title{font-size:14px;font-weight:700;margin-bottom:16px;color:var(--color-text-secondary)}.practice-notes-row{display:flex;flex-wrap:wrap;gap:8px}.practice-note-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;border-radius:var(--radius-sm);background:#ffffff80;border:1.5px solid rgba(0,0,0,.06);min-width:52px;transition:all var(--t-fast)}.practice-note-cell.active{background:color-mix(in srgb,var(--note-color) 20%,white);border-color:var(--note-color);transform:scale(1.12);box-shadow:0 0 16px color-mix(in srgb,var(--note-color) 40%,transparent)}.practice-note-cell.done{background:#4ade801f;border-color:#4ade8066;opacity:.7}.practice-note-cell__finger{font-size:18px;font-weight:900;font-family:var(--font-display);line-height:1}.practice-note-cell__name{font-size:11px;font-weight:600;color:var(--color-text-secondary)}.practice-notes-turn{display:flex;align-items:center;font-size:16px;color:var(--color-text-muted);padding:0 2px;align-self:center}.practice-feedback{padding:12px 20px;border-radius:var(--radius-sm);font-size:15px;font-weight:700;text-align:center;animation:bounceIn .2s both}.practice-feedback--correct{background:#4ade8033;color:#059669;border:1.5px solid rgba(74,222,128,.4)}.practice-feedback--wrong{background:#f8717126;color:#dc2626;border:1.5px solid rgba(248,113,113,.35);animation:shake .3s both}.practice-live-accuracy{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:14px;color:var(--color-text-secondary)}.practice-live-accuracy strong{font-size:20px;font-weight:800;color:var(--color-text)}@media (max-width: 900px){.practice-page{grid-template-columns:1fr}}.lesson-dots{display:flex;gap:4px;align-items:center}.lesson-dot{width:7px;height:7px;border-radius:50%;background:#0000001f;transition:background var(--t-fast)}.lesson-dot--done{background:var(--color-mint)}.lesson-nav{display:flex;gap:4px;background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1.5px solid var(--glass-border);border-radius:var(--radius-sm);padding:6px;flex-wrap:wrap}.lesson-nav__step{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--radius-xs);border:none;background:transparent;font-size:12px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--t-fast);flex:1;justify-content:center;white-space:nowrap}.lesson-nav__step:hover:not(.locked){background:#0000000d;color:var(--color-text)}.lesson-nav__step.active{background:#ffd60a33;color:var(--color-text);border:1px solid rgba(255,214,10,.4)}.lesson-nav__step.done{color:#059669}.lesson-nav__step.locked{opacity:.35;cursor:not-allowed}.lesson-nav__icon{display:flex;align-items:center}.lesson-content{display:flex;flex-direction:column;gap:16px}.lesson-section{padding:20px;border-radius:var(--radius-sm)}.lesson-section__title{font-size:16px;font-weight:700;margin-bottom:8px;color:var(--color-text)}.lesson-section__sub{font-size:13px;color:var(--color-text-secondary);line-height:1.6;margin-bottom:16px}.lesson-info-box{font-size:13px;color:var(--color-text-secondary);background:#ffd60a1a;border:1px solid rgba(255,214,10,.3);border-radius:var(--radius-xs);padding:10px 14px;margin-top:12px;line-height:1.6}.lesson-tips{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:12px}.lesson-tips li{display:flex;gap:8px;font-size:13px;color:var(--color-text-secondary);line-height:1.5}.lesson-tips li:before{content:"→";color:var(--color-primary);font-weight:700;flex-shrink:0}.lesson-complete-bar{padding:12px 0 4px;display:flex;justify-content:center}.lesson-complete-bar__done{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:#059669}.lesson-back-btn{background:none;border:none;font-size:13px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;padding:4px 0;text-align:left;transition:color var(--t-fast)}.lesson-back-btn:hover{color:var(--color-text)}.note-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.note-badge{min-width:44px;padding:10px 14px;border-radius:var(--radius-xs);background:#fff9;border:1.5px solid rgba(0,0,0,.08);font-size:16px;font-weight:700;text-align:center;color:var(--color-text);animation:fadeIn .3s both}.note-badge--root{background:color-mix(in srgb,var(--scale-color) 25%,white);border-color:var(--scale-color);color:color-mix(in srgb,var(--scale-color) 60%,black)}.pattern-row{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:12px}.pattern-note{font-size:15px;font-weight:700;color:var(--color-text);min-width:28px;text-align:center}.pattern-note--root{font-size:17px}.pattern-step{font-size:11px;font-weight:800;letter-spacing:.5px;padding:2px 6px;border-radius:4px;background:#0000000d}.fingering-block{padding:12px 0}.fingering-hand-label{font-size:12px;font-weight:700;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px}.fingering-row{display:flex;flex-wrap:wrap;gap:6px}.fingering-cell{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:38px}.fingering-cell__num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#1c1917}.fingering-cell__note{font-size:12px;font-weight:600;color:var(--color-text-secondary)}.chord-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.chord-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 10px;border-radius:var(--radius-sm);background:#ffffff8c;border:2px solid transparent;cursor:pointer;transition:all var(--t-fast);text-align:center}.chord-card:hover{background:#fffc;transform:translateY(-2px);box-shadow:var(--shadow-md)}.chord-card--active{border-color:var(--chord-color)!important;background:color-mix(in srgb,var(--chord-color) 15%,white)!important;box-shadow:0 0 16px color-mix(in srgb,var(--chord-color) 30%,transparent)!important}.chord-card__degree{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--chord-color)}.chord-card__name{font-size:13px;font-weight:700;color:var(--color-text);line-height:1.2}.chord-card__notes{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;margin-top:4px}.chord-card__note{font-size:10px;font-weight:600;color:var(--chord-color);background:color-mix(in srgb,var(--chord-color) 12%,transparent);border-radius:3px;padding:1px 4px}.chord-card__quality{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-muted);margin-top:2px}.progression-list{display:flex;flex-direction:column;gap:12px}.progression-card{display:flex;flex-direction:column;gap:10px;padding:16px 18px;background:#ffffff8c;border:1.5px solid rgba(0,0,0,.06);border-radius:var(--radius-sm);transition:all var(--t-fast)}.progression-card.playing{border-color:var(--color-primary);background:#ffd60a14}.progression-card.follow-me{border-color:#818cf8;background:#818cf812}.progression-card__top{display:flex;align-items:center;justify-content:space-between;gap:8px}.progression-card__name{font-size:13px;font-weight:600;color:var(--color-text-secondary)}.prog-round-badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;background:#818cf82e;color:#818cf8;white-space:nowrap}.prog-round-badge--unlimited{background:#ffd60a2e;color:#b45309}.progression-card__chords{display:flex;align-items:center;gap:4px;flex-wrap:wrap}.prog-chord{font-size:14px;font-weight:700;padding:4px 10px;border-radius:var(--radius-xs);background:#ffffffb3;border:1px solid rgba(0,0,0,.08);color:var(--color-text);transition:all var(--t-fast)}.prog-chord--active{background:var(--color-primary)!important;border-color:var(--color-primary)!important;color:#1c1917!important;box-shadow:0 0 12px #ffd60a80}.prog-chord--follow{background:#818cf8!important;border-color:#818cf8!important;color:#fff!important;box-shadow:0 0 12px #818cf880;animation:pulseGlow 1s ease-in-out infinite}.prog-chord--done{background:#4ade8026!important;border-color:#4ade80!important;color:#166534!important}.prog-arrow{font-size:11px;color:var(--color-text-muted)}.prog-follow-status{font-size:13px;color:var(--color-text-muted);padding:6px 10px;border-radius:var(--radius-xs);background:#ffffff80;border:1px solid rgba(0,0,0,.06);transition:all var(--t-fast)}.prog-follow-status--correct{background:#4ade8026;border-color:#4ade80;color:#166534;font-weight:600}.prog-follow-status--wrong{background:#f8717126;border-color:#f87171;color:#991b1b;font-weight:600}.progression-card__actions{display:flex;gap:8px;flex-wrap:wrap}.prog-action-btn{flex:1;min-width:80px;justify-content:center}.btn-sm{padding:8px 14px!important;font-size:13px!important}.prog-style-selector{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}.prog-style-label{font-size:12px;font-weight:600;color:var(--color-text-muted);white-space:nowrap}.prog-style-tabs{display:flex;gap:4px;background:#0000000d;border-radius:20px;padding:3px}.prog-style-tab{padding:4px 14px;border-radius:20px;border:none;background:transparent;font-size:13px;font-weight:600;color:var(--color-text-muted);cursor:pointer;transition:all var(--t-fast);white-space:nowrap}.prog-style-tab:hover{color:var(--color-text)}.prog-style-tab.active{background:var(--color-primary);color:#1c1917;box-shadow:0 1px 4px #ffd60a59}.prog-style-desc{font-size:12px;color:var(--color-text-muted);font-style:italic}.song-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.song-header__emoji{font-size:36px;flex-shrink:0}.song-header__title{font-size:18px;font-weight:800;color:var(--color-text);margin-bottom:4px}.song-header__meta{font-size:13px;color:var(--color-text-secondary)}.song-progression{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:12px 0;padding:10px 14px;background:#00000008;border-radius:var(--radius-xs)}.song-progression__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-muted);margin-right:4px}.song-prog-chord{font-size:13px;font-weight:700;color:var(--color-text);background:#ffd60a26;border:1px solid rgba(255,214,10,.3);border-radius:4px;padding:2px 8px}.song-melody{margin-top:12px}.song-melody__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-muted);margin-bottom:8px}.song-melody__notation{background:#00000008;border-radius:var(--radius-xs);padding:14px;font-size:12px;line-height:1.8;color:var(--color-text-secondary);white-space:pre-wrap;font-family:var(--font-body);border:1px solid rgba(0,0,0,.06)}.song-hints{list-style:none;display:flex;flex-direction:column;gap:10px}.song-hint{display:flex;gap:10px;font-size:14px;color:var(--color-text-secondary);line-height:1.6;padding:10px 14px;background:#ffd60a0f;border:1px solid rgba(255,214,10,.18);border-radius:var(--radius-xs)}.song-hint__icon{flex-shrink:0;font-size:15px;margin-top:1px}.scale-complete-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;border-radius:var(--radius-md);background:#4ade801f;border:1px solid rgba(74,222,128,.35);margin-bottom:8px;flex-wrap:wrap}.scale-complete-banner__text{display:flex;align-items:center;gap:10px;font-size:14px;color:#16a34a}.songs-page{max-width:1100px;margin:0 auto;animation:fadeIn .4s both}.songs-page__header{margin-bottom:32px}.songs-page__header h1{font-size:32px;font-weight:900;margin-bottom:8px}.songs-page__header p{color:var(--color-text-secondary);font-size:15px;margin-bottom:20px}.songs-page__filters{display:flex;gap:8px;flex-wrap:wrap}.songs-filter-btn{padding:8px 18px;border-radius:var(--radius-full);border:1.5px solid rgba(0,0,0,.1);background:#fff9;font-size:13px;font-weight:600;cursor:pointer;color:var(--color-text-secondary);transition:all var(--t-fast)}.songs-filter-btn:hover{border-color:var(--color-primary);color:var(--color-text)}.songs-filter-btn.active{background:linear-gradient(135deg,#ffd60a,#f5c800);border-color:transparent;color:var(--color-text);box-shadow:0 4px 12px #ffd60a66}.songs-loading{text-align:center;padding:60px 0;color:var(--color-text-muted);font-size:15px}.songs-error{text-align:center;padding:60px 24px;color:#ef4444;font-size:15px;background:#ef444414;border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md)}.play-song-page{display:flex;flex-direction:column;min-height:100%;gap:20px}.play-song-page__header{display:flex;align-items:center;gap:12px;padding:8px 16px;flex-shrink:0}.play-song-page__back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--color-text-secondary);text-decoration:none;transition:color var(--t-fast);flex-shrink:0}.play-song-page__back:hover{color:var(--color-text)}.play-song-page__title-group{flex:1}.play-song-page__title{font-size:15px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-song-page__composer,.play-song-page__header-meta{display:none}.play-song-page__meta-item{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--color-text-secondary);background:#fff9;padding:4px 10px;border-radius:var(--radius-full);border:1px solid var(--glass-border)}.play-song-page__body{display:flex;gap:20px;flex:1}.play-song-page__panel{display:none;width:220px;flex-shrink:0;flex-direction:column;gap:0;padding:0;overflow-y:auto;border-radius:var(--radius-lg)}@media (min-width: 960px){.play-song-page__panel{display:flex}}.play-song-page__panel--hidden{display:none!important}.panel-section__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.panel-section__head .panel-section__title{margin-bottom:0}.panel-collapse-btn{width:20px;height:20px;border-radius:50%;border:1px solid rgba(0,0,0,.1);background:#0000000d;color:var(--color-text-muted);font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--t-fast),color var(--t-fast)}.panel-collapse-btn:hover{background:#0000001a;color:var(--color-text)}.panel-reveal-btn{display:none;align-self:flex-start;flex-shrink:0;padding:5px 9px;border:1px solid rgba(0,0,0,.1);border-radius:var(--radius-full);background:#fff9;font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:background var(--t-fast),color var(--t-fast)}.panel-reveal-btn:hover{background:#ffffffe6;color:var(--color-text)}@media (min-width: 960px){.panel-reveal-btn{display:flex}}.panel-section{padding:16px 18px;border-bottom:1px solid rgba(0,0,0,.06)}.panel-section:last-child{border-bottom:none}.panel-section__title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:10px}.play-toggles{display:flex;flex-direction:column;gap:6px}.play-toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-sm);border:1.5px solid rgba(0,0,0,.1);background:#ffffff80;font-family:var(--font-body);font-size:13px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--t-fast);text-align:left}.play-toggle:hover{background:#fffc;color:var(--color-text)}.play-toggle--on{background:linear-gradient(135deg,#ffd60a22,#ffd60a44);border-color:#ffd60a;color:var(--color-text)}.mode-tabs{display:flex;gap:4px;background:#0000000d;border-radius:var(--radius-sm);padding:3px}.mode-tab{flex:1;padding:7px 8px;border-radius:11px;border:none;background:transparent;font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--t-fast)}.mode-tab--active{background:#fff;color:var(--color-text);box-shadow:var(--shadow-sm)}.panel-hint{margin-top:8px;font-size:11px;color:var(--color-text-muted);line-height:1.5}.play-controls{display:flex;flex-direction:column;gap:8px}.play-controls__btn{width:100%;padding:10px 14px;font-size:13px;justify-content:center}.btn-danger{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff;box-shadow:0 4px 16px #ef44444d;border:none}.btn-danger:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px #ef444466}.panel-desc{font-size:13px;color:var(--color-text-secondary);line-height:1.55;margin-bottom:10px}.scale-chips{display:flex;flex-wrap:wrap;gap:6px}.scale-chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-full);background:var(--color-secondary-light);color:var(--color-secondary);border:1px solid rgba(124,58,237,.2)}.play-song-page__timeline-area{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0}.timeline-header{display:flex;align-items:center;gap:12px;flex-shrink:0}.timeline-title{font-size:16px;font-weight:700}.timeline-count{font-size:12px;color:var(--color-text-muted)}.timeline-scale-chips{display:flex;flex-wrap:wrap;gap:5px;margin-left:4px}.timeline-selection-info{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:12px;font-weight:600;color:var(--color-secondary);background:var(--color-secondary-light);padding:4px 10px;border-radius:var(--radius-full)}.timeline-clear-btn{background:none;border:none;cursor:pointer;color:var(--color-secondary);font-size:12px;padding:0 2px;line-height:1}.timeline-hint{font-size:12px;color:var(--color-text-muted);flex-shrink:0}.timeline-row{display:flex;gap:12px;align-items:flex-start;flex-shrink:0}.timeline-scroll{flex:1;min-width:0}.duration-legend{display:flex;flex-direction:column;gap:7px}.duration-legend__title{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:2px}.duration-legend__row{display:flex;align-items:center;gap:8px}.duration-legend__block{height:18px;border-radius:5px;background:#00000024;flex-shrink:0}.duration-legend__label{font-size:11px;font-weight:600;color:var(--color-text-secondary);white-space:nowrap}.note-timeline{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px;-webkit-user-select:none;user-select:none;cursor:default}.note-block{flex-shrink:0;height:64px;border-radius:8px;opacity:.75;transition:opacity var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:center;overflow:hidden}.note-block__letter{font-size:11px;font-weight:800;font-family:var(--font-display);color:#000000a6;pointer-events:none;white-space:nowrap;line-height:1}.note-block:hover{opacity:.9;transform:scaleY(1.04)}.note-block--selected{opacity:1;border-color:#00000040;box-shadow:0 2px 12px #0000002e}.note-block--playing{opacity:1;transform:scaleY(1.12);box-shadow:0 4px 20px #0000004d;border-color:#ffffffe6;z-index:2;position:relative}.finger-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:auto;flex-shrink:0}.finger-legend__item{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-secondary);font-weight:500}.finger-legend__dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}.mobile-rotate-prompt{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;background:#ffffff80;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.mobile-rotate-prompt__card{display:flex;flex-direction:column;align-items:center;gap:16px;padding:32px 28px;border-radius:var(--radius-lg);max-width:280px;text-align:center}.mobile-rotate-prompt__icon{color:var(--color-primary-dark);animation:rotateHint 2s ease-in-out infinite}.mobile-rotate-prompt__text{font-size:15px;font-weight:600;color:var(--color-text-secondary);line-height:1.55}@keyframes rotateHint{0%,to{transform:rotate(0)}40%{transform:rotate(90deg)}60%{transform:rotate(90deg)}}.play-song-page__mobile-controls{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto}@media (max-height: 500px) and (orientation: landscape){.play-song-page{gap:6px}.play-song-page__header{padding:6px 12px}.play-song-page__title{font-size:13px}.play-song-page__back-label{display:none}.play-song-page__body{gap:8px}.play-song-page__timeline-area{gap:4px}.timeline-hint,.finger-legend{display:none}.note-block{height:48px}}.mobile-mode-tabs{display:flex;background:#00000012;border-radius:var(--radius-sm);padding:2px;gap:2px}.mobile-mode-tab{padding:5px 10px;border-radius:11px;border:none;background:transparent;font-family:var(--font-body);font-size:11px;font-weight:600;color:var(--color-text-secondary);cursor:pointer;transition:all var(--t-fast);white-space:nowrap}.mobile-mode-tab--active{background:#fff;color:var(--color-text);box-shadow:var(--shadow-sm)}.mobile-icon-btn{width:36px;height:36px;border-radius:var(--radius-xs);border:1.5px solid rgba(0,0,0,.1);background:#fff9;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-secondary);transition:all var(--t-fast);flex-shrink:0}.mobile-icon-btn:disabled{opacity:.35;cursor:not-allowed}.mobile-icon-btn:not(:disabled):hover{background:#ffffffe6;color:var(--color-text)}.mobile-icon-btn--primary{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#1c1917;border-color:transparent;box-shadow:0 2px 8px #ffd60a66}.mobile-icon-btn--danger{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff;border-color:transparent;box-shadow:0 2px 8px #ef44444d}.mobile-icon-btn--on{background:linear-gradient(135deg,#ffd60a22,#ffd60a44);border-color:var(--color-primary);color:var(--color-text)}.games-page{max-width:800px;margin:0 auto;animation:fadeIn .4s both}.games-page__header{margin-bottom:28px}.games-page__header h1{font-size:32px;font-weight:900;margin-bottom:8px}.games-page__header p{color:var(--color-text-secondary);font-size:15px}.games-tabs{display:flex;gap:10px;margin-bottom:24px}.games-tab{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-full);border:1.5px solid rgba(0,0,0,.1);background:#fff9;font-size:14px;font-weight:600;cursor:pointer;color:var(--color-text-secondary);transition:all var(--t-fast)}.games-tab.active{background:linear-gradient(135deg,#ffd60a,#f5c800);border-color:transparent;color:var(--color-text);box-shadow:0 4px 12px #ffd60a59}.game-panel{padding:32px;display:flex;flex-direction:column;gap:20px;animation:slideUp .3s both}.game-panel__header{display:flex;align-items:center;justify-content:space-between}.game-panel__header h3{display:flex;align-items:center;gap:8px;font-size:20px}.game-scores{display:flex;gap:16px;font-size:14px;color:var(--color-text-secondary)}.game-scores strong{color:var(--color-text)}.game-panel__desc{color:var(--color-text-secondary);font-size:15px}.game-hear-btn{align-self:center;font-size:16px;padding:14px 32px}.game-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.game-choice-btn{padding:20px;border-radius:var(--radius-md);border:2px solid rgba(0,0,0,.08);background:#fff9;font-size:22px;font-weight:800;font-family:var(--font-display);cursor:pointer;transition:all var(--t-fast);color:var(--color-text)}.game-choice-btn:hover{border-color:var(--color-primary);background:#ffd60a1a;transform:translateY(-2px)}.game-choice-btn.correct{background:#4ade8033;border-color:#4ade80;color:#059669}.game-choice-btn.show-correct{background:#4ade8026;border-color:#4ade80}.game-feedback{text-align:center;padding:14px;border-radius:var(--radius-sm);font-size:16px;font-weight:700;animation:bounceIn .25s both}.game-feedback--correct{background:#4ade8033;color:#059669}.game-feedback--wrong{background:#f8717126;color:#dc2626}.game-complete{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;text-align:center}.game-scale-progress{display:flex;flex-direction:column;gap:12px}.game-scale-bar{height:8px;background:#0000000f;border-radius:4px;overflow:hidden}.game-scale-bar__fill{height:100%;background:linear-gradient(90deg,var(--color-mint),var(--color-blue));border-radius:4px;transition:width .3s ease}.progress-page{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:36px;animation:fadeIn .4s both}.progress-page__header h1{font-size:32px;font-weight:900;margin-bottom:8px}.progress-page__header p{color:var(--color-text-secondary)}.progress-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.progress-section{display:flex;flex-direction:column;gap:16px}.progress-section h2{font-size:20px;font-weight:800}.progress-loading{color:var(--color-text-muted)}.progress-scales{display:flex;flex-direction:column;gap:8px}.progress-scale-row{display:grid;grid-template-columns:10px 200px 1fr 48px 90px 80px;align-items:center;gap:16px;padding:14px 20px;background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1.5px solid var(--glass-border);border-radius:var(--radius-sm);transition:box-shadow var(--t-normal)}.progress-scale-row:hover{box-shadow:var(--shadow-sm)}.progress-scale-row__dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.progress-scale-row__info{display:flex;align-items:center;gap:8px}.progress-scale-row__name{font-size:14px;font-weight:600}.progress-scale-row__bar{height:6px;background:#0000000f;border-radius:3px;overflow:hidden}.progress-scale-row__fill{height:100%;border-radius:3px;transition:width .6s ease;opacity:.85}.progress-scale-row__pct{font-size:13px;font-weight:700;text-align:right}.progress-scale-row__count{font-size:12px;color:var(--color-text-muted);text-align:center}.progress-scale-row__date{font-size:12px;color:var(--color-text-muted);text-align:right}.progress-sessions{display:flex;flex-direction:column;gap:8px}.session-row{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:16px;padding:14px 20px}.session-row__dot{width:10px;height:10px;border-radius:50%}.session-row__info{display:flex;flex-direction:column}.session-row__name{font-size:14px;font-weight:600}.session-row__hand{font-size:12px;color:var(--color-text-muted);text-transform:capitalize}.session-row__stats{display:flex;gap:12px;align-items:center}.session-row__accuracy{font-size:15px;font-weight:800;color:var(--color-text)}.session-row__duration{font-size:12px;color:var(--color-text-muted)}.session-row__date{font-size:12px;color:var(--color-text-muted);min-width:60px;text-align:right}.progress-empty{padding:32px;text-align:center;background:var(--glass-bg);border:1.5px solid var(--glass-border);border-radius:var(--radius-md);color:var(--color-text-muted)}@media (max-width: 900px){.progress-stats{grid-template-columns:repeat(2,1fr)}.progress-scale-row{grid-template-columns:10px 1fr auto}.progress-scale-row__bar,.progress-scale-row__count,.progress-scale-row__date{display:none}}.settings-page{max-width:700px;margin:0 auto;animation:fadeIn .4s both}.settings-page__header{margin-bottom:28px}.settings-page__header h1{font-size:32px;font-weight:900;margin-bottom:8px}.settings-page__header p{color:var(--color-text-secondary)}.settings-form{display:flex;flex-direction:column;gap:20px}.settings-section{padding:24px;display:flex;flex-direction:column;gap:20px}.settings-section__title{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:700;padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.06)}.settings-section__note{font-size:12px;color:var(--color-text-muted)}.settings-row{display:flex;flex-direction:column;gap:8px}.settings-row label{font-size:14px;font-weight:600;color:var(--color-text)}.settings-row--switch{flex-direction:row;align-items:center;justify-content:space-between}.settings-row__sub{font-size:12px;color:var(--color-text-muted);line-height:1.5}.settings-slider{width:100%;accent-color:var(--color-primary);cursor:pointer}.settings-slider:disabled{opacity:.5;cursor:not-allowed}.settings-switch{width:48px;height:26px;border-radius:13px;background:#0000001f;position:relative;cursor:pointer;transition:background var(--t-fast);flex-shrink:0}.settings-switch.on{background:var(--color-primary)}.settings-switch__thumb{width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #0003;transition:transform var(--t-fast)}.settings-switch.on .settings-switch__thumb{transform:translate(22px)}.settings-tabs{display:flex;gap:8px}.settings-tab{flex:1;padding:10px;border-radius:var(--radius-xs);border:1.5px solid rgba(0,0,0,.08);background:#fff9;font-size:13px;font-weight:600;cursor:pointer;color:var(--color-text-secondary);transition:all var(--t-fast)}.settings-tab.active{background:#ffd60a33;border-color:var(--color-primary);color:var(--color-text)}.settings-actions{display:flex;align-items:center;gap:16px}.settings-saved{font-size:14px;font-weight:600;color:#059669;animation:bounceIn .3s both}.settings-error{font-size:14px;font-weight:600;color:#ef4444}:root{--sidebar-width: 240px;--piano-height: 190px;--color-primary: #FFD60A;--color-primary-dark: #F5C800;--color-primary-light: #FFF9C4;--color-secondary: #7C3AED;--color-secondary-light: #EDE9FE;--color-orange: #FB923C;--color-blue: #38BDF8;--color-mint: #34D399;--color-pink: #F472B6;--color-red: #F87171;--color-green: #4ADE80;--color-text: #1C1917;--color-text-secondary: #78716C;--color-text-muted: #A8A29E;--glass-bg: rgba(255, 255, 255, .72);--glass-bg-strong: rgba(255, 255, 255, .9);--glass-border: rgba(255, 255, 255, .9);--shadow-xs: 0 1px 4px rgba(0, 0, 0, .04);--shadow-sm: 0 2px 10px rgba(0, 0, 0, .06);--shadow-md: 0 6px 24px rgba(0, 0, 0, .07);--shadow-lg: 0 12px 48px rgba(0, 0, 0, .09);--shadow-xl: 0 24px 80px rgba(0, 0, 0, .12);--shadow-glow: 0 0 32px rgba(255, 214, 10, .5);--shadow-glow-purple: 0 0 32px rgba(124, 58, 237, .35);--radius-xs: 8px;--radius-sm: 14px;--radius-md: 20px;--radius-lg: 28px;--radius-xl: 36px;--radius-full: 9999px;--font-display: "Poppins", sans-serif;--font-body: "Inter", sans-serif;--t-fast: .15s cubic-bezier(.4, 0, .2, 1);--t-normal: .25s cubic-bezier(.4, 0, .2, 1);--t-slow: .4s cubic-bezier(.4, 0, .2, 1);--t-spring: .35s cubic-bezier(.34, 1.56, .64, 1);--z-sidebar: 100;--z-piano: 50;--z-float: 200;--z-modal: 300}@media (min-width: 700px) and (pointer: coarse){:root{--piano-height: 260px}}@media (max-height: 500px) and (orientation: landscape){:root{--piano-height: 120px}}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}body{font-family:var(--font-body);color:var(--color-text);background:linear-gradient(135deg,#fefce8,#fef9c3 25%,#fff7ed 60%,#fef3c7);background-attachment:fixed;min-height:100vh;min-height:100dvh;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}#root{height:100vh;height:100dvh;overflow:hidden}.glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1.5px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.glass-strong{background:var(--glass-bg-strong);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1.5px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;color:var(--color-text);line-height:1.2}p{line-height:1.6}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;border:none;transition:all var(--t-fast);text-decoration:none;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#ffd60a,#f5c800);color:#1c1917;box-shadow:0 4px 20px #ffd60a66}.btn-primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 8px 28px #ffd60a80}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--color-text);border:1.5px solid var(--glass-border)}.btn-secondary:hover:not(:disabled){background:var(--glass-bg-strong);transform:translateY(-1px)}.btn-ghost{background:transparent;color:var(--color-text-secondary)}.btn-ghost:hover:not(:disabled){background:#0000000d;color:var(--color-text)}.input{width:100%;padding:14px 16px;border-radius:var(--radius-sm);border:1.5px solid rgba(255,255,255,.6);background:#fffc;font-family:var(--font-body);font-size:15px;color:var(--color-text);transition:all var(--t-fast);outline:none}.input:focus{border-color:var(--color-primary);background:#fffffff2;box-shadow:0 0 0 3px #ffd60a33}.input::placeholder{color:var(--color-text-muted)}.loading-screen{display:flex;align-items:center;justify-content:center;height:100vh;height:100dvh;font-family:var(--font-display);font-size:24px;color:var(--color-text-secondary)}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-primary-light);border-top-color:var(--color-primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#00000026;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#00000040}.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-full);font-size:12px;font-weight:600}.badge-beginner{background:#dcfce7;color:#15803d}.badge-intermediate{background:#fef9c3;color:#a16207}.badge-advanced{background:#ede9fe;color:#6d28d9}@keyframes floatNote1{0%{transform:translateY(0) rotate(-10deg) scale(1);opacity:0}10%{opacity:.6}90%{opacity:.4}to{transform:translateY(-120px) rotate(15deg) scale(1.2);opacity:0}}@keyframes floatNote2{0%{transform:translateY(0) rotate(5deg) scale(.9);opacity:0}15%{opacity:.5}85%{opacity:.3}to{transform:translateY(-100px) rotate(-20deg) scale(1.1);opacity:0}}@keyframes floatNote3{0%{transform:translateY(0) rotate(20deg) scale(1.1);opacity:0}20%{opacity:.7}80%{opacity:.35}to{transform:translateY(-140px) rotate(-5deg) scale(.9);opacity:0}}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px #ffd60a4d}50%{box-shadow:0 0 40px #ffd60ab3}}@keyframes bounceIn{0%{transform:scale(.85);opacity:0}60%{transform:scale(1.05);opacity:1}to{transform:scale(1)}}@keyframes slideUp{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-24px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes keyPress{0%{transform:translateY(0)}40%{transform:translateY(3px)}to{transform:translateY(0)}}@keyframes celebrate{0%{transform:scale(1) rotate(0)}25%{transform:scale(1.15) rotate(-3deg)}50%{transform:scale(1.1) rotate(3deg)}75%{transform:scale(1.15) rotate(-2deg)}to{transform:scale(1) rotate(0)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes fillBar{0%{width:0}to{width:var(--target-width)}}@keyframes heartbeat{0%,to{transform:scale(1)}14%{transform:scale(1.2)}28%{transform:scale(1)}42%{transform:scale(1.15)}70%{transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}.stagger-children>*:nth-child(1){animation-delay:0ms}.stagger-children>*:nth-child(2){animation-delay:80ms}.stagger-children>*:nth-child(3){animation-delay:.16s}.stagger-children>*:nth-child(4){animation-delay:.24s}.stagger-children>*:nth-child(5){animation-delay:.32s}.stagger-children>*:nth-child(6){animation-delay:.4s}.animate-slide-up{animation:slideUp var(--t-slow) both}.animate-fade-in{animation:fadeIn var(--t-normal) both}.animate-bounce-in{animation:bounceIn var(--t-spring) both}