@font-face{font-family:DM Sans;font-style:normal;font-weight:100 1000;font-display:swap;src:url(../media/c3cb240f9c892514-s.3z_x6eowsw16y.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:DM Sans;font-style:normal;font-weight:100 1000;font-display:swap;src:url(../media/5c285b27cdda1fe8-s.p.2_mbdogr7ni8i.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:DM Sans Fallback;src:local(Arial);ascent-override:94.9%;descent-override:29.66%;line-gap-override:0.0%;size-adjust:104.53%}.dm_sans_efc253b3-module__w1i8Da__className{font-family:DM Sans,DM Sans Fallback;font-style:normal}.dm_sans_efc253b3-module__w1i8Da__variable{--font-dm-sans:"DM Sans", "DM Sans Fallback"}
@font-face{font-family:Fredoka;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(../media/b6df7c92285ebcd2-s.0y4xxz2y19qqs.woff2)format("woff2");unicode-range:U+307-308,U+590-5FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(../media/eeba9b1ad34c1404-s.0yczt4r3j28ff.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:300;font-stretch:100%;font-display:swap;src:url(../media/5d52bd6c4cb3f315-s.p.0ez3bnoxb63ra.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(../media/b6df7c92285ebcd2-s.0y4xxz2y19qqs.woff2)format("woff2");unicode-range:U+307-308,U+590-5FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(../media/eeba9b1ad34c1404-s.0yczt4r3j28ff.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(../media/5d52bd6c4cb3f315-s.p.0ez3bnoxb63ra.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(../media/b6df7c92285ebcd2-s.0y4xxz2y19qqs.woff2)format("woff2");unicode-range:U+307-308,U+590-5FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(../media/eeba9b1ad34c1404-s.0yczt4r3j28ff.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(../media/5d52bd6c4cb3f315-s.p.0ez3bnoxb63ra.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(../media/b6df7c92285ebcd2-s.0y4xxz2y19qqs.woff2)format("woff2");unicode-range:U+307-308,U+590-5FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(../media/eeba9b1ad34c1404-s.0yczt4r3j28ff.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(../media/5d52bd6c4cb3f315-s.p.0ez3bnoxb63ra.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../media/b6df7c92285ebcd2-s.0y4xxz2y19qqs.woff2)format("woff2");unicode-range:U+307-308,U+590-5FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../media/eeba9b1ad34c1404-s.0yczt4r3j28ff.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fredoka;font-style:normal;font-weight:700;font-stretch:100%;font-display:swap;src:url(../media/5d52bd6c4cb3f315-s.p.0ez3bnoxb63ra.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Fredoka Fallback;src:local(Arial);ascent-override:95.64%;descent-override:23.17%;line-gap-override:0.0%;size-adjust:101.84%}.fredoka_39970801-module__Xu-yAW__className{font-family:Fredoka,Fredoka Fallback;font-style:normal}.fredoka_39970801-module__Xu-yAW__variable{--font-fredoka:"Fredoka", "Fredoka Fallback"}
@font-face{font-family:Space Mono;font-style:italic;font-weight:400;font-display:swap;src:url(../media/417912ede2e82152-s.1umk1654cmfxm.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Mono;font-style:italic;font-weight:400;font-display:swap;src:url(../media/51f2519120a6b711-s.038kgsu-hd-vh.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Mono;font-style:italic;font-weight:400;font-display:swap;src:url(../media/1ae2575eb5be4118-s.p.29un6u1l3mwyp.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Mono;font-style:italic;font-weight:700;font-display:swap;src:url(../media/2c4e8b1b42841af7-s.2p_e9n24plgne.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Mono;font-style:italic;font-weight:700;font-display:swap;src:url(../media/7663dec790de7af8-s.2b96g58xb1jk9.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Mono;font-style:italic;font-weight:700;font-display:swap;src:url(../media/17b0f6a4f906cc39-s.p.3nfl-v4jxqll_.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../media/4ba802ed8e67eac5-s.0fuxtgzazslqx.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../media/d7a0600e467cf0bd-s.451yigaaz_4mg.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../media/dc0d9adbac686440-s.p.3cik_s2si-ft-.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Mono;font-style:normal;font-weight:700;font-display:swap;src:url(../media/b8f2b92a9960dd69-s.0we3rzhp_h228.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Mono;font-style:normal;font-weight:700;font-display:swap;src:url(../media/28e60ca39c9ae554-s.44izq0ia6orkf.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Mono;font-style:normal;font-weight:700;font-display:swap;src:url(../media/8d05cfa5faa8406c-s.p.1s123piy9_v1m.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Mono Fallback;src:local(Arial);ascent-override:81.58%;descent-override:26.3%;line-gap-override:0.0%;size-adjust:137.28%}.space_mono_6a25eb65-module__c96b4W__className{font-family:Space Mono,Space Mono Fallback}.space_mono_6a25eb65-module__c96b4W__variable{--font-space-mono:"Space Mono", "Space Mono Fallback"}
:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--font-display:var(--font-fredoka), "Nunito", sans-serif;--font-body:var(--font-dm-sans), -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:var(--font-space-mono), "Consolas", monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--transition-fast:.15s cubic-bezier(.34, 1.56, .64, 1);--transition-base:.25s cubic-bezier(.34, 1.56, .64, 1);--transition-smooth:.3s ease-out;--score-band-tint:color-mix(in srgb, var(--accent-primary) 12%, transparent)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:500;overflow:hidden}body:before{content:"";background-image:linear-gradient(color-mix(in srgb, var(--accent-primary) 3%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 3%, transparent) 1px, transparent 1px);pointer-events:none;z-index:0;background-size:40px 40px;width:100%;height:100%;position:fixed;top:0;left:0}.app-header{padding:16px 24px;padding-top:calc(16px + env(safe-area-inset-top,0px));background:linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-primary) 100%);border-bottom:1px solid var(--border-subtle);z-index:100;flex-shrink:0;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.app-header .app-logo{font-family:var(--font-display);color:var(--text-primary);align-items:center;gap:8px;margin:0;font-size:1.75rem;font-weight:600;display:flex}.app-header .app-logo a{color:var(--text-primary);text-decoration:none}.app-header .app-logo a:hover{color:var(--accent-primary)}.header-actions{align-items:center;gap:16px;display:flex}.header-nav{align-items:center;gap:var(--space-sm);display:flex}.header-nav-link{padding:var(--space-sm) var(--space-lg);box-sizing:border-box;min-width:90px;height:40px;color:var(--accent-primary);font-family:var(--font-display);border-radius:var(--radius-full);border:2px solid var(--accent-primary);background:var(--accent-subtle);transition:all var(--transition-base);cursor:pointer;justify-content:center;align-items:center;font-size:.9375rem;font-weight:600;text-decoration:none;display:inline-flex}.header-nav-link:hover{color:var(--on-accent);background:var(--accent-primary);box-shadow:var(--shadow-glow);transform:scale(1.05)}.file-upload{background:color-mix(in srgb, var(--accent-primary) 12%, transparent);border:2px dashed var(--accent-primary);cursor:pointer;border-radius:16px;justify-content:center;align-items:center;padding:8px 24px;transition:all .25s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden}.file-upload:hover{background:color-mix(in srgb, var(--accent-primary) 30%, transparent);box-shadow:0 0 30px color-mix(in srgb, var(--accent-primary) 30%, transparent);border-style:solid;transform:scale(1.02)}.file-upload:active{transform:scale(.98)}.file-upload--button{background:0 0;border:none;border-radius:0;padding:0;overflow:visible}.file-upload--button:hover{box-shadow:none;background:0 0;border-style:none;transform:none}.file-upload--button:active{transform:none}.file-upload--button .file-upload-content{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;gap:0}.file-upload-content{color:var(--accent-primary);font-family:var(--font-display);align-items:center;gap:8px;font-size:.9375rem;font-weight:600;display:flex}.file-upload-icon{font-size:1.25rem}a.file-upload{text-decoration:none}.section-head{margin-bottom:var(--space-2xl)}.section-overline,.hero-overline{font-family:var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--accent-secondary);margin-bottom:var(--space-md);font-size:.8125rem;font-weight:700;display:block}.section-head h1,.section-head h2{font-family:var(--font-display);color:var(--text-primary);margin:0 0 var(--space-sm) 0;letter-spacing:-.01em;font-size:clamp(1.75rem,3vw,2.25rem);font-weight:700;line-height:1.3}.mono-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--text-muted);font-size:.6875rem;font-weight:700}.app-footer{background:var(--bg-surface);border-top:1px solid var(--border-subtle);text-align:center;flex-shrink:0;padding:16px 24px}.footer-links{flex-wrap:wrap;justify-content:center;gap:24px;margin-bottom:8px;display:flex}.footer-links a{color:var(--text-secondary);font-size:.8125rem;font-weight:500;text-decoration:none;transition:color .15s}.footer-links a:hover{color:var(--accent-primary)}.footer-links a.active{color:var(--text-primary)}.footer-divider{color:var(--text-muted);margin:0 var(--space-xs)}.footer-copyright{color:var(--text-muted);margin:0;font-size:.75rem}.app{flex-direction:column;height:100dvh;max-height:100dvh;display:flex;position:relative}.error-message{padding:var(--space-sm) var(--space-lg);background:var(--accent-red-glow);border-left:4px solid var(--accent-red);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--accent-red);font-size:.875rem;font-weight:500}.info-panel{padding:var(--space-sm) var(--space-lg);background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);z-index:1;flex-shrink:0}.info-panel h2{margin:0 0 var(--space-xs) 0;font-family:var(--font-display);color:var(--text-primary);font-size:1.125rem;font-weight:600}.info-stats{gap:var(--space-lg);color:var(--text-secondary);font-size:.8125rem;font-weight:500;display:flex}.info-stats span{align-items:center;gap:var(--space-xs);display:flex}.attribution{margin-top:var(--space-xs);color:var(--text-secondary);font-size:.75rem}.attribution a{color:var(--accent-primary);transition:color var(--transition-fast);text-decoration:none}.attribution a:hover{color:var(--accent-primary-light);text-decoration:underline}.main-content{background:radial-gradient(ellipse at center 70%, var(--bg-elevated) 0%, var(--bg-primary) 70%);flex:1;min-height:0;position:relative}.visualizer{cursor:pointer;width:100%;max-width:100%;height:100%}.visualizer canvas{width:100%;max-width:100%;height:100%;display:block}.piano-keyboard{display:block}.controls{padding:var(--space-md) var(--space-lg);background:linear-gradient(0deg, var(--bg-elevated) 0%, var(--bg-primary) 100%);border-top:1px solid var(--border-subtle);z-index:1;flex-shrink:0;position:relative}.controls-main{align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.controls-cluster{align-items:center;gap:var(--space-md);flex-shrink:0;display:flex}.skip-button{border-radius:var(--radius-full);border:2px solid var(--border-color);background:var(--bg-surface);width:44px;height:44px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0;justify-content:center;align-items:center;display:flex}.skip-button:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.05)}.skip-button:active{transform:scale(.95)}.play-button{border-radius:var(--radius-full);background:linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-primary-dark) 100%);width:60px;height:60px;color:var(--on-accent);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-glow);border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:1.5rem;display:flex}.play-button:hover{box-shadow:var(--shadow-glow-strong);transform:scale(1.08)}.play-button:active{transform:scale(.95)}.time-display{font-family:var(--font-mono);color:var(--text-primary);background:var(--bg-surface);min-width:110px;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);text-align:center;flex-shrink:0;font-size:.9375rem;font-weight:700}.time-separator{color:var(--accent-primary);margin:0 2px}.seek-bar-wrapper{flex:1;align-items:center;min-width:100px;display:flex;position:relative}.seek-bar{--progress:0%;appearance:none;background:linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) var(--progress), var(--border-color) var(--progress), var(--border-color) 100%);border-radius:var(--radius-full);cursor:pointer;width:100%;height:8px;transition:height var(--transition-smooth)}.seek-bar:hover{height:12px}.seek-bar::-webkit-slider-runnable-track{border-radius:var(--radius-full);background:linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) var(--progress), var(--border-color) var(--progress), var(--border-color) 100%);height:100%}.seek-bar::-webkit-slider-thumb{-webkit-appearance:none;border-radius:var(--radius-full);background:var(--accent-primary);cursor:pointer;border:3px solid var(--bg-primary);width:20px;height:20px;box-shadow:var(--shadow-glow);transition:all var(--transition-fast);margin-top:-6px}.seek-bar::-webkit-slider-thumb:hover{box-shadow:var(--shadow-glow-strong);transform:scale(1.2)}.seek-bar::-moz-range-track{border-radius:var(--radius-full);background:var(--border-color);height:8px}.seek-bar::-moz-range-progress{border-radius:var(--radius-full);background:var(--accent-primary);height:8px}.seek-bar::-moz-range-thumb{border-radius:var(--radius-full);background:var(--accent-primary);cursor:pointer;border:3px solid var(--bg-primary);width:20px;height:20px;box-shadow:var(--shadow-glow)}.seek-bar-loop-range{background:var(--accent-primary);opacity:.35;border-radius:var(--radius-full);pointer-events:none;height:8px;transition:height var(--transition-smooth);position:absolute;top:50%;transform:translateY(-50%)}.seek-bar-wrapper:hover .seek-bar-loop-range{height:12px}.seek-bar-tooltip{background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-mono);white-space:nowrap;pointer-events:none;z-index:5;padding:2px 8px;font-size:.75rem;font-weight:700;position:absolute;bottom:calc(100% + 8px);transform:translate(-50%)}@media (hover:none) and (pointer:coarse){.seek-bar-tooltip{display:none}}.volume-control{align-items:center;gap:var(--space-xs);flex-shrink:0;display:flex}.mute-button{border-radius:var(--radius-md);border:2px solid var(--border-color);background:var(--bg-surface);width:44px;height:44px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0;justify-content:center;align-items:center;display:flex}.mute-button:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.05)}.mute-button:active{transform:scale(.95)}.volume-slider{--progress:100%;appearance:none;background:linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) var(--progress), var(--border-color) var(--progress), var(--border-color) 100%);border-radius:var(--radius-full);cursor:pointer;width:80px;height:6px}.volume-slider::-webkit-slider-runnable-track{border-radius:var(--radius-full);background:linear-gradient(to right, var(--accent-primary) 0%, var(--accent-primary) var(--progress), var(--border-color) var(--progress), var(--border-color) 100%);height:100%}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;border-radius:var(--radius-full);background:var(--accent-primary);cursor:pointer;border:2px solid var(--bg-primary);width:14px;height:14px;margin-top:-4px}.volume-slider::-moz-range-track{border-radius:var(--radius-full);background:var(--border-color);height:6px}.volume-slider::-moz-range-progress{border-radius:var(--radius-full);background:var(--accent-primary);height:6px}.volume-slider::-moz-range-thumb{border-radius:var(--radius-full);background:var(--accent-primary);cursor:pointer;border:2px solid var(--bg-primary);width:14px;height:14px}.rate-select{padding:var(--space-sm) var(--space-md);background:var(--bg-surface);border:2px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);font-family:var(--font-mono);cursor:pointer;transition:all var(--transition-base);flex-shrink:0;font-size:.875rem;font-weight:700}.rate-select:hover{border-color:var(--accent-primary);background:var(--accent-subtle)}.rate-select:focus{border-color:var(--accent-primary);box-shadow:var(--shadow-glow);outline:none}.loop-button,.loop-settings-button{border-radius:var(--radius-md);border:2px solid var(--border-color);background:var(--bg-surface);width:48px;height:48px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);justify-content:center;align-items:center;font-size:1.125rem;display:flex}.loop-button:hover,.loop-settings-button:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.05)}.loop-button:active,.loop-settings-button:active{transform:scale(.95)}.loop-button.active{background:var(--accent-glow);border-color:var(--accent-primary);color:var(--accent-primary);box-shadow:var(--shadow-glow)}.loop-settings{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--border-subtle);gap:var(--space-sm);flex-direction:column;display:flex}.loop-setting{align-items:center;gap:var(--space-sm);display:flex}.loop-setting label{min-width:80px;color:var(--text-secondary);font-family:var(--font-display);font-size:.875rem;font-weight:600}.loop-setting input[type=range]{appearance:none;background:var(--border-color);border-radius:var(--radius-full);flex:1;height:6px}.loop-setting input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border-radius:var(--radius-full);background:var(--accent-primary);cursor:pointer;border:2px solid var(--bg-primary);width:16px;height:16px}.loop-setting span{min-width:50px;font-family:var(--font-mono);color:var(--text-muted);font-size:.8125rem;font-weight:700}.loop-setting button{padding:var(--space-xs) var(--space-md);background:var(--bg-surface);border:2px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-family:var(--font-display);cursor:pointer;transition:all var(--transition-base);font-size:.8125rem;font-weight:600}.loop-setting button:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.welcome-message{color:var(--text-secondary);text-align:center;padding:var(--space-2xl);background:radial-gradient(ellipse at center, var(--bg-elevated) 0%, var(--bg-primary) 70%);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.welcome-message p{margin:var(--space-sm) 0;font-family:var(--font-display);font-size:1.125rem;font-weight:500}.welcome-message .hint{color:var(--text-muted);font-size:.9375rem}.welcome-message a{color:var(--accent-primary);transition:color var(--transition-fast);font-weight:600;text-decoration:none}.welcome-message a:hover{color:var(--accent-primary-light);text-decoration:underline}.minimize-button{border-radius:var(--radius-md);border:2px solid var(--border-color);background:var(--bg-surface);width:48px;height:48px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);justify-content:center;align-items:center;font-size:1.125rem;display:flex}.minimize-button:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.05)}.floating-controls{top:var(--space-md);right:var(--space-md);gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:color-mix(in srgb, var(--bg-surface) 95%, transparent);border-radius:var(--radius-lg);border:1px solid var(--border-color);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:100;display:flex;position:fixed}.floating-button{border-radius:var(--radius-full);border:2px solid var(--border-color);background:var(--bg-surface);width:52px;height:52px;color:var(--text-primary);cursor:pointer;transition:all var(--transition-base);justify-content:center;align-items:center;font-size:1.25rem;display:flex}.floating-button:hover{border-color:var(--accent-primary);color:var(--accent-primary);box-shadow:var(--shadow-glow);transform:scale(1.08)}.floating-button:active{transform:scale(.95)}.settings-button{border-radius:var(--radius-md);border:2px solid var(--border-color);background:var(--bg-surface);width:48px;height:48px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0;justify-content:center;align-items:center;font-size:1.25rem;display:flex}.settings-button:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.05)}.keyboard-octave-indicator{background:color-mix(in srgb, var(--bg-surface) 70%, transparent);border:1px solid color-mix(in srgb, var(--warning) 40%, transparent);color:var(--warning);font-size:14px;font-weight:600;font-family:var(--font-body);pointer-events:none;z-index:10;border-radius:8px;align-items:center;gap:10px;padding:6px 14px;display:flex;position:absolute;bottom:16px;right:16px}.keyboard-octave-indicator .active-notes{color:var(--success);letter-spacing:1px;font-size:16px;font-weight:700}.keyboard-octave-indicator .octave-hint{color:color-mix(in srgb, var(--text-secondary) 60%, transparent);margin-left:8px;font-size:12px;font-weight:400}.mode-button,.score-button{border-radius:var(--radius-md);border:2px solid var(--border-color);background:var(--bg-surface);width:48px;height:48px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);flex-shrink:0;justify-content:center;align-items:center;font-size:1.25rem;display:flex;position:relative}.mode-button:hover,.score-button:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.05)}.mode-button.active{border-color:var(--warning);color:var(--warning);background:color-mix(in srgb, var(--warning) 10%, var(--bg-surface))}.mode-button:disabled,.score-button:disabled{opacity:.35;cursor:not-allowed}.mode-button:disabled:hover,.score-button:disabled:hover{border-color:var(--border-color);color:var(--text-secondary);transform:none}.mode-button-wrapper{position:relative}.score-button.active{border-color:var(--accent-primary);color:var(--accent-primary);background:color-mix(in srgb, var(--accent-primary) 10%, var(--bg-surface))}.score-button:disabled{opacity:.35;cursor:not-allowed}.score-layout{background:var(--piano-background);flex-direction:column;display:flex;position:absolute;inset:0}.score-view{background:var(--bg-elevated);min-height:0;color:var(--text-primary);padding:var(--space-xl) 0 var(--space-md);flex:auto;overflow:hidden auto}.score-view--message{justify-content:center;align-items:center;gap:var(--space-md);color:var(--text-secondary);flex-direction:column;display:flex}.score-view-loading{text-align:center;color:var(--text-secondary);padding:var(--space-xl)}.score-view-exit{padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--border-color);background:var(--bg-surface);color:var(--text-primary);cursor:pointer;transition:all var(--transition-base)}.score-view-exit:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.score-canvas{position:relative}.score-measure-band,.score-playhead{pointer-events:none;position:absolute;top:0;left:0}.score-measure-band{background:var(--score-band-tint);border-radius:var(--radius-sm)}.score-playhead{background:var(--accent-primary);will-change:transform;width:2px}.score-page+.score-page{margin-top:var(--space-lg);border-top:1px solid var(--border-subtle)}.score-view svg{width:100%;height:auto;display:block}.score-view .score-note--active,.score-view .score-note--active *{fill:var(--accent-primary)}.score-mode .overlay-info{background:color-mix(in srgb, var(--bg-elevated) 55%, transparent)}.score-mode .end-screen{background:var(--bg-elevated)}.score-layout .visualizer{height:auto;aspect-ratio:var(--keyboard-aspect);max-height:var(--keyboard-max-height);flex:none}@media (hover:none) and (pointer:coarse){.mode-button-wrapper{display:none}}.midi-indicator{background:var(--success);width:8px;height:8px;box-shadow:0 0 4px var(--success);border-radius:50%;position:absolute;top:4px;right:4px}.practice-popover{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);width:280px;box-shadow:var(--shadow-lg), var(--shadow-glow);z-index:200;animation:.2s cubic-bezier(.34,1.56,.64,1) popoverSlideIn;position:absolute;top:calc(100% + 8px);right:0}@keyframes popoverSlideIn{0%{opacity:0;transform:translateY(-8px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.practice-popover-header{padding:var(--space-md);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.practice-popover-title{font-family:var(--font-display);color:var(--text-primary);font-size:.9375rem;font-weight:600}.practice-popover-close{width:28px;height:28px;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.practice-popover-close:hover{background:var(--bg-surface);color:var(--text-primary)}.practice-popover-body{padding:var(--space-md);gap:var(--space-md);flex-direction:column;display:flex}.practice-popover-description{color:var(--text-secondary);margin:0;font-size:.8125rem;line-height:1.5}.practice-popover-options{gap:var(--space-sm);flex-direction:column;display:flex}.practice-popover-option{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--bg-surface);border-radius:var(--radius-md);color:var(--text-primary);font-size:.8125rem;display:flex}.practice-popover-option svg{color:var(--text-muted);flex-shrink:0}.practice-popover-detected{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:color-mix(in srgb, var(--success) 10%, transparent);border:1px solid color-mix(in srgb, var(--success) 30%, transparent);border-radius:var(--radius-md);color:var(--success);font-size:.8125rem;font-weight:500;display:flex}.practice-popover-detected-indicator{background:var(--success);width:8px;height:8px;box-shadow:0 0 6px var(--success);border-radius:50%;flex-shrink:0}.practice-popover-start{width:100%;padding:var(--space-sm) var(--space-md);background:var(--accent-primary);border-radius:var(--radius-md);color:var(--on-accent);font-family:var(--font-display);cursor:pointer;transition:all var(--transition-base);border:none;font-size:.875rem;font-weight:600}.practice-popover-start:hover{background:var(--accent-primary-dark);box-shadow:var(--shadow-glow);transform:scale(1.02)}.settings-overlay{background:var(--modal-backdrop);z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);width:90%;max-width:440px;max-height:80vh;box-shadow:var(--shadow-lg), var(--shadow-glow);animation:.3s cubic-bezier(.34,1.56,.64,1) slideUp;overflow-y:auto}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)scale(.95)}to{opacity:1;transform:translateY(0)scale(1)}}.settings-header{padding:var(--space-lg);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.settings-header h2{font-family:var(--font-display);color:var(--text-primary);margin:0;font-size:1.375rem;font-weight:600}.settings-close{background:var(--bg-surface);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;font-size:1.5rem;display:flex}.settings-close:hover{background:var(--accent-glow);color:var(--accent-primary);transform:scale(1.05)}.settings-content{padding:var(--space-lg)}.settings-section{margin-bottom:var(--space-lg)}.settings-section:last-child{margin-bottom:0}.settings-section h3{margin:0 0 var(--space-md) 0;font-family:var(--font-display);color:var(--accent-primary);text-transform:uppercase;letter-spacing:.1em;font-size:.8125rem;font-weight:700}.settings-row{margin-bottom:var(--space-sm);align-items:center;display:flex}.settings-row:last-child{margin-bottom:0}.settings-row label{align-items:center;gap:var(--space-sm);cursor:pointer;color:var(--text-primary);font-size:.9375rem;font-weight:500;display:flex}.settings-row input[type=checkbox]{cursor:pointer;width:20px;height:20px;accent-color:var(--accent-primary);border-radius:var(--radius-sm)}.settings-loop-range{margin-top:var(--space-md);padding:var(--space-md);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.settings-loop-range .settings-row{align-items:stretch;gap:var(--space-xs);flex-direction:column}.settings-loop-range .settings-row label{font-family:var(--font-display);color:var(--text-secondary);font-size:.875rem;font-weight:600}.settings-loop-range input[type=range]{appearance:none;background:var(--border-color);border-radius:var(--radius-full);width:100%;height:6px}.settings-loop-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border-radius:var(--radius-full);background:var(--accent-primary);cursor:pointer;border:2px solid var(--bg-secondary);width:18px;height:18px}.settings-speed{margin-top:var(--space-sm)}.settings-speed .settings-row{align-items:stretch;gap:var(--space-sm);flex-direction:column}.settings-speed .settings-row label{color:var(--text-primary);font-size:.9375rem}.settings-speed input[type=range]{appearance:none;background:var(--border-color);border-radius:var(--radius-full);width:100%;height:8px}.settings-speed input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border-radius:var(--radius-full);background:var(--accent-primary);cursor:pointer;border:2px solid var(--bg-secondary);width:20px;height:20px;box-shadow:var(--shadow-glow)}.speed-presets{gap:var(--space-sm);margin-top:var(--space-md);flex-wrap:wrap;display:flex}.speed-preset{padding:var(--space-sm) var(--space-md);background:var(--bg-surface);border:2px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-secondary);font-family:var(--font-mono);cursor:pointer;transition:all var(--transition-base);font-size:.875rem;font-weight:700}.speed-preset:hover{border-color:var(--accent-primary);color:var(--accent-primary);transform:scale(1.05)}.speed-preset.active{background:var(--accent-glow);border-color:var(--accent-primary);color:var(--accent-primary);box-shadow:var(--shadow-glow)}.overlay-buttons{top:6px;right:var(--space-sm);gap:var(--space-sm);z-index:60;display:flex;position:absolute}.help-button,.fullscreen-button{border-radius:var(--radius-full);border:1px solid var(--overlay-border);background:var(--overlay-bg);width:48px;height:48px;color:var(--overlay-text);font-family:var(--font-display);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:all var(--transition-base);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);justify-content:center;align-items:center;font-size:1.25rem;font-weight:700;display:flex}.help-button:hover,.fullscreen-button:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:var(--accent-glow);box-shadow:var(--shadow-glow);transform:scale(1.08)}.help-overlay{background:var(--modal-backdrop);z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:center;align-items:center;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.help-panel{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);width:90%;max-width:440px;box-shadow:var(--shadow-lg), var(--shadow-glow);animation:.3s cubic-bezier(.34,1.56,.64,1) slideUp}.help-header{padding:var(--space-md);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.help-header h2{font-family:var(--font-display);color:var(--text-primary);margin:0;font-size:1.125rem;font-weight:600}.help-close{background:var(--bg-surface);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-md);transition:all var(--transition-fast);border:none;justify-content:center;align-items:center;font-size:1.5rem;display:flex}.help-close:hover{background:var(--accent-glow);color:var(--accent-primary);transform:scale(1.05)}.help-content{padding:var(--space-sm) var(--space-md)}.help-row{border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;padding:6px 0;display:flex}.help-row:last-child{border-bottom:none}.help-row span{color:var(--text-secondary);font-size:.875rem;font-weight:500}kbd{background:var(--bg-surface);border:2px solid var(--border-color);border-radius:var(--radius-sm);min-width:28px;font-family:var(--font-mono);color:var(--accent-primary);box-shadow:0 2px 0 var(--border-color);justify-content:center;align-items:center;margin-right:3px;padding:2px 6px;font-size:.75rem;font-weight:700;display:inline-flex}.help-footer{padding:var(--space-md) var(--space-lg);border-top:1px solid var(--border-subtle);text-align:center;color:var(--text-muted);font-size:.875rem;font-weight:500}.end-screen{background:var(--modal-backdrop);z-index:100;justify-content:center;align-items:center;animation:.3s ease-out fadeIn;display:flex;position:absolute;inset:0}.end-screen-content{text-align:center;padding:var(--space-xl)}.end-screen-title{font-family:var(--font-display);color:var(--text-primary);margin:0 0 var(--space-xl) 0;font-size:1.5rem;font-weight:600}.end-screen-actions{gap:var(--space-md);flex-flow:wrap;justify-content:center;display:flex}.end-screen-btn{justify-content:center;align-items:center;gap:var(--space-sm);width:140px;height:100px;padding:var(--space-md);background:var(--bg-elevated);border:2px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-secondary);font-family:var(--font-display);cursor:pointer;transition:all var(--transition-base);flex-direction:column;font-size:.875rem;font-weight:600;text-decoration:none;display:flex}.end-screen-btn:hover{background:var(--bg-surface);border-color:var(--accent-primary);color:var(--text-primary);box-shadow:0 8px 24px color-mix(in srgb, var(--text-primary) 12%, transparent), 0 0 20px var(--accent-glow);transform:translateY(-4px)}.end-screen-btn-primary{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--on-accent)}.end-screen-btn-primary:hover{background:var(--accent-primary-dark);border-color:var(--accent-primary-dark);color:var(--on-accent)}.end-screen-icon{font-size:1.75rem}@media (max-width:480px){.end-screen-actions{flex-direction:column;align-items:center}.end-screen-btn{gap:var(--space-md);flex-direction:row;width:180px;height:80px}.end-screen-icon{font-size:1.5rem}}.overlay-readout{top:6px;left:var(--space-sm);z-index:60;flex-direction:column;align-items:flex-start;gap:6px;display:flex;position:absolute}.overlay-info{padding:var(--space-xs) var(--space-sm);background:var(--overlay-bg);border-radius:var(--radius-md);border:1px solid var(--overlay-border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:60;flex-direction:column;gap:2px;display:flex}.pedal-indicator{margin-left:var(--space-sm);gap:8px;display:flex}.pedal-chip{--pedal-intensity:0;border:1px solid var(--overlay-border);background:color-mix(in srgb, var(--piano-background) 30%, transparent);width:54px;height:28px;color:var(--overlay-text);border-radius:8px;justify-content:center;align-items:center;font-size:11px;font-weight:600;display:flex}.pedal-chip--on{border-color:var(--accent-primary);background-image:linear-gradient(var(--pedal-fill), var(--pedal-fill));--pedal-fill:color-mix(in srgb, var(--accent-primary) calc(50% + var(--pedal-intensity) * 40%), transparent);color:var(--on-accent)}.overlay-info-item{font-family:var(--font-mono);color:var(--overlay-text);font-size:.875rem;font-weight:600}.overlay-info-muted{color:var(--accent-red)}.overlay-info-loop{color:var(--accent-primary)}.language-switcher{gap:var(--space-xs);display:flex}.language-switcher a{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);color:var(--text-muted);transition:all var(--transition-fast);font-size:.875rem;font-weight:600;text-decoration:none}.language-switcher a:hover{color:var(--accent-primary)}.language-switcher a.active{background:var(--accent-subtle);color:var(--accent-primary)}@media (max-width:768px){.app-header{padding:8px 16px}.app-header .app-logo{font-size:1.125rem}.header-nav{gap:var(--space-xs)}.header-nav-link{padding:var(--space-xs) var(--space-md);min-width:70px;height:32px;font-size:.8125rem}.file-upload{width:100%}.app-footer{padding:8px 16px}.footer-links{gap:8px 16px}.footer-links a{font-size:.75rem}.controls{padding:var(--space-sm) var(--space-md)}.controls-main{gap:var(--space-sm);flex-wrap:wrap;justify-content:space-between}.controls-cluster{gap:var(--space-sm)}.play-button{width:52px;height:52px;font-size:1.25rem}.skip-button,.mute-button,.loop-button{width:40px;height:40px}.time-display{min-width:auto;padding:var(--space-xs) var(--space-sm);font-size:.8125rem}.rate-select{padding:var(--space-xs) var(--space-sm);font-size:.8125rem}.settings-button{width:40px;height:40px;font-size:1rem}.volume-slider{width:60px}.seek-bar-wrapper{width:100%;min-width:unset;margin-top:var(--space-xs);flex:none;order:10}.info-panel{padding:var(--space-sm) var(--space-md)}.info-stats{gap:var(--space-md);flex-wrap:wrap}}@media (max-width:400px){.footer-links{gap:6px 12px}.footer-links a{font-size:.6875rem}.controls-cluster{gap:var(--space-xs)}.play-button{width:44px;height:44px}.skip-button,.mute-button,.loop-button,.settings-button{width:36px;height:36px}.volume-slider{width:44px}.time-display{padding:var(--space-xs);font-size:.75rem}}::selection{background:var(--accent-primary);color:var(--on-accent)}:focus{outline:none}:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-surface);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.legal-page{overflow-y:auto}.legal-page .app-header{position:sticky;top:0}.legal-content{max-width:800px;padding:var(--space-2xl) var(--space-lg);color:var(--text-primary);flex:1;margin:0 auto;line-height:1.7}.legal-content h1{font-family:var(--font-display);margin:0 0 var(--space-sm) 0;color:var(--text-primary);font-size:2rem;font-weight:700}.legal-content .last-updated{color:var(--text-muted);margin:0 0 var(--space-2xl) 0;font-size:.875rem}.legal-content .intro{color:var(--text-secondary);margin-bottom:var(--space-xl);font-size:1rem}.legal-content section{margin-bottom:var(--space-xl)}.legal-content h2{font-family:var(--font-display);margin:0 0 var(--space-md) 0;color:var(--accent-primary);font-size:1.25rem;font-weight:600}.legal-content h3{font-family:var(--font-display);margin:var(--space-md) 0 var(--space-sm) 0;color:var(--text-primary);font-size:1rem;font-weight:600}.legal-content p{margin:0 0 var(--space-md) 0;color:var(--text-secondary)}.legal-content ul{margin:0 0 var(--space-md) 0;padding-left:var(--space-lg);color:var(--text-secondary)}.legal-content li{margin-bottom:var(--space-sm)}.contact-page .twitter-link{margin-top:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:var(--accent-subtle);border:2px solid var(--accent-primary);border-radius:var(--radius-lg);color:var(--accent-primary);font-family:var(--font-display);transition:all var(--transition-base);font-size:1rem;font-weight:600;text-decoration:none;display:inline-block}.contact-page .twitter-link:hover{background:var(--accent-glow);box-shadow:var(--shadow-glow);transform:scale(1.02)}@media (max-width:768px){.legal-content{padding:var(--space-lg) var(--space-md)}.legal-content h1{font-size:1.5rem}.legal-content h2{font-size:1.125rem}}.songs-page{overflow-y:auto}.songs-page .app-header{position:sticky;top:0}.songs-content{width:100%;max-width:1200px;padding:var(--space-2xl) var(--space-lg);box-sizing:border-box;flex:1;margin:0 auto}.songs-description{color:var(--text-secondary);max-width:40em;margin:0;font-size:1rem;line-height:1.7}.songs-toolbar{align-items:center;gap:var(--space-md);margin-bottom:var(--space-md);flex-wrap:wrap;display:flex}.view-mode-toggle{gap:var(--space-xs);background:var(--bg-surface);border-radius:var(--radius-full);border:1px solid var(--border-subtle);flex-shrink:0;width:fit-content;padding:4px;display:flex}.view-mode-btn{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;background:0 0;border:none;font-size:.9rem;font-weight:600;display:inline-flex}.view-mode-btn:hover{color:var(--text-primary)}.view-mode-btn.active{background:var(--accent-primary);color:var(--on-accent);box-shadow:0 1px 3px color-mix(in srgb, var(--text-primary) 12%, transparent)}.view-mode-count{font-family:var(--font-mono);border-radius:var(--radius-full);background:var(--bg-elevated);color:var(--text-muted);padding:1px 7px;font-size:.6875rem}.view-mode-btn.active .view-mode-count{background:color-mix(in srgb, var(--text-primary) 20%, transparent);color:var(--on-accent)}.search-box{flex:1;align-items:center;min-width:240px;display:flex;position:relative}.search-icon{left:var(--space-md);width:20px;height:20px;color:var(--text-muted);pointer-events:none;position:absolute}.search-input{padding:var(--space-sm) var(--space-md) var(--space-sm) calc(var(--space-md) + 28px);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-full);height:44px;color:var(--text-primary);transition:border-color var(--transition-base), background var(--transition-base);box-sizing:border-box;flex:1;font-size:.9375rem}.search-input:hover{border-color:var(--border-color)}.search-input:focus{border-color:var(--accent-primary);outline:none}.search-input::placeholder{color:var(--text-muted)}.search-clear{right:var(--space-sm);width:28px;height:28px;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-base);background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex;position:absolute}.search-clear:hover{background:var(--bg-hover);color:var(--text-primary)}.search-clear svg{width:16px;height:16px}.songs-filters{align-items:center;gap:var(--space-sm) var(--space-xl);padding-bottom:var(--space-lg);margin-bottom:var(--space-xl);border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;display:flex}.filter-group{align-items:center;gap:var(--space-xs);flex-wrap:wrap;display:flex}.filter-group-label{margin-right:var(--space-xs)}.composer-select-mobile{display:none}.composer-select{padding:var(--space-sm) var(--space-md);padding-right:var(--space-xl);background:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-primary);cursor:pointer;appearance:none;background-image:var(--select-chevron);background-position:right 12px center;background-repeat:no-repeat;min-width:140px;font-size:.875rem;font-weight:500}.composer-select:focus{border-color:var(--accent-primary);outline:none}.filter-btn{padding:var(--space-xs) var(--space-md);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-base);font-size:.8125rem;font-weight:500}.filter-btn:hover{border-color:var(--text-muted);color:var(--text-primary)}.filter-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--on-accent)}.filter-btn-beginner.active{background:var(--difficulty-beginner);border-color:var(--difficulty-beginner)}.filter-btn-intermediate.active{background:var(--difficulty-intermediate);border-color:var(--difficulty-intermediate)}.filter-btn-advanced.active{background:var(--difficulty-advanced);border-color:var(--difficulty-advanced)}.songs-count{font-family:var(--font-mono);color:var(--text-muted);margin-left:auto;font-size:.8125rem}.songs-layout{gap:var(--space-xl);display:flex}.composer-nav{width:200px;height:fit-content;max-height:calc(100vh - 128px);padding-right:var(--space-sm);flex-shrink:0;position:sticky;top:96px;overflow-y:auto}.composer-nav-title{margin-bottom:var(--space-md);padding-left:calc(var(--space-md) + 2px)}.composer-nav-list{border-left:1px solid var(--border-subtle);flex-direction:column;gap:1px;margin:0;padding:0;list-style:none;display:flex}.composer-nav-item{justify-content:space-between;align-items:center;gap:var(--space-sm);width:100%;padding:6px var(--space-sm) 6px var(--space-md);color:var(--text-secondary);cursor:pointer;text-align:left;transition:color var(--transition-base), border-color var(--transition-base);background:0 0;border:none;border-left:2px solid #0000;margin-left:-1px;font-size:.875rem;display:flex}.composer-nav-item:hover{color:var(--text-primary)}.composer-nav-item.active{border-left-color:var(--accent-primary);color:var(--accent-primary-light)}.composer-nav-name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.composer-nav-count{font-family:var(--font-mono);color:var(--text-muted);font-size:.6875rem}.composer-nav-item.active .composer-nav-count{color:var(--accent-primary-light)}.songs-main{flex:1;min-width:0}.no-results{text-align:center;padding:var(--space-2xl);color:var(--text-muted)}.composer-song-count{font-family:var(--font-mono);color:var(--text-muted);margin-left:auto;font-size:.8125rem}.category-count{margin-left:var(--space-sm);font-family:var(--font-mono);color:var(--text-muted);font-size:.75rem;font-weight:400}.songs-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.songs-list{flex-direction:column;display:flex}.song-row{align-items:center;gap:var(--space-sm);padding:10px var(--space-md);margin:0 calc(-1 * var(--space-md));border-radius:var(--radius-md);transition:background var(--transition-fast);display:flex;overflow:hidden}.song-row-main{align-items:center;gap:var(--space-md);min-width:0;color:inherit;flex:1;text-decoration:none;display:flex}.song-row+.song-row{box-shadow:0 -1px 0 var(--border-subtle)}.song-row:hover{background:var(--bg-surface);box-shadow:none}.song-row:hover+.song-row{box-shadow:none}.song-row-title{min-width:0;color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;flex:1;font-size:.9375rem;font-weight:500;overflow:hidden}.song-row-opus{font-family:var(--font-mono);color:var(--text-muted);flex-shrink:0;font-size:.75rem}.song-row-meta{align-items:center;gap:var(--space-sm);flex-shrink:0;display:flex}.song-row-difficulty{border-radius:var(--radius-sm);padding:2px 6px;font-size:.6875rem;font-weight:600}.song-row-duration{font-family:var(--font-mono);color:var(--text-muted);text-align:right;min-width:36px;font-size:.75rem}.songs-grouped{gap:var(--space-2xl);flex-direction:column;display:flex}.composer-section{scroll-margin-top:96px}.composer-header{align-items:baseline;gap:var(--space-md);margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--border-color);display:flex}.composer-name{font-family:var(--font-display);letter-spacing:-.01em;color:var(--text-primary);margin:0;font-size:1.375rem;font-weight:700}.composer-years{font-family:var(--font-mono);color:var(--text-muted);font-size:.8125rem}.category-section{margin-bottom:var(--space-xl)}.category-section:last-child{margin-bottom:0}.category-name{font-family:var(--font-display);color:var(--accent-primary-light);margin:0 0 var(--space-xs) 0;font-size:1rem;font-weight:600}.category-description{color:var(--text-muted);margin:0 0 var(--space-sm) 0;font-size:.8125rem;line-height:1.6}.song-card{background:var(--bg-elevated);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-base);text-decoration:none;display:block}.song-card:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-glow);transform:translateY(-4px)}.song-card-content{gap:var(--space-sm);flex-direction:column;display:flex}.song-title{font-family:var(--font-display);color:var(--text-primary);margin:0;font-size:1.125rem;font-weight:600}.song-composer{color:var(--text-secondary);margin:0;font-size:.875rem}.song-opus{color:var(--text-muted);margin:0;font-size:.75rem}.song-meta{align-items:center;gap:var(--space-md);margin-top:var(--space-sm);display:flex}.difficulty{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-size:.75rem;font-weight:600}.difficulty-beginner{background:color-mix(in srgb, var(--success) 15%, transparent);color:var(--success)}.difficulty-intermediate{background:color-mix(in srgb, var(--accent-primary) 15%, transparent);color:var(--accent-primary)}.difficulty-advanced{background:var(--difficulty-advanced-subtle);color:var(--difficulty-advanced)}.duration{color:var(--text-muted);font-family:var(--font-mono);font-size:.8125rem}.song-detail-page{overflow:hidden auto}.song-detail-page .app-header{position:sticky;top:0}.song-detail-content{box-sizing:border-box;width:100%;max-width:1120px;padding:var(--space-2xl) var(--space-lg);flex:1;margin:0 auto}.back-link{align-items:center;gap:var(--space-xs);color:var(--text-muted);margin-bottom:var(--space-xl);transition:color var(--transition-fast);font-size:.875rem;font-weight:500;text-decoration:none;display:inline-flex}.back-link:hover{color:var(--accent-primary-light)}.song-detail-composer{color:var(--text-secondary);margin:0;font-size:1.0625rem}.song-detail-year{font-family:var(--font-mono);color:var(--text-muted);font-size:.875rem}.song-info-grid{gap:var(--space-md) var(--space-2xl);margin-bottom:var(--space-xl);padding:var(--space-lg) 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;display:flex}.song-info-item{gap:var(--space-xs);flex-direction:column;display:flex}.song-info-value{color:var(--text-primary);font-size:.9375rem;font-weight:500}.song-source-link{color:var(--accent-primary);font-weight:500;text-decoration:none;transition:color .2s,opacity .2s}.song-source-link:hover{color:var(--accent-secondary);text-decoration:underline}.song-description{margin-bottom:var(--space-xl)}.song-description h2{margin:0 0 var(--space-sm) 0}.song-description p{color:var(--text-secondary);max-width:100%;margin:0;line-height:1.8}.song-description p.song-category-description{margin-top:var(--space-sm);color:var(--text-muted);font-size:.875rem}.composer-link,.composer-name-link{color:inherit;transition:color var(--transition-fast);text-decoration:none}.composer-link:hover,.composer-name-link:hover{color:var(--accent-primary-light);text-decoration:underline}.composer-bio{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--border-color)}.composer-bio h2{margin:0 0 var(--space-sm) 0}.composer-bio-name{margin:0 0 var(--space-sm) 0;color:var(--text-primary);font-size:1.125rem}.composer-bio p{color:var(--text-secondary);max-width:100%;margin:0 0 var(--space-md) 0;line-height:1.8}.composer-bio .composer-link{color:var(--accent-primary);font-size:.9375rem;font-weight:500}.composer-bio-text{margin-bottom:var(--space-xl)}.composer-bio-text p{color:var(--text-secondary);max-width:100%;margin:0;line-height:1.8}.composer-works-title{margin:var(--space-2xl) 0 var(--space-lg) 0;padding-top:var(--space-xl);border-top:1px solid var(--border-subtle);font-size:1.375rem}.composers-list-content{box-sizing:border-box;width:100%;max-width:1120px;padding:var(--space-2xl) var(--space-lg);flex:1;margin:0 auto}.composers-list-description{color:var(--text-secondary);margin:0}.composers-grid{gap:var(--space-md);margin-top:var(--space-xl);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));display:grid}.composer-card{gap:var(--space-xs);padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);border:1px solid var(--border-subtle);color:inherit;transition:border-color var(--transition-fast), background var(--transition-fast);flex-direction:column;text-decoration:none;display:flex}.composer-card:hover{border-color:var(--accent-primary);background:var(--bg-surface)}.composer-card-name{color:var(--text-primary);font-weight:600}.composer-card-years{font-family:var(--font-mono);color:var(--text-muted);font-size:.8125rem}.composer-card-count{color:var(--accent-primary-light);font-size:.75rem}.song-loading{padding:var(--space-xl);text-align:center;color:var(--text-secondary);font-size:1rem}.song-player-container{margin-top:var(--space-xl);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:0 24px 64px color-mix(in srgb, var(--text-primary) 12%, transparent);box-sizing:border-box;max-width:100%;overflow:hidden}.song-player-wrapper{max-width:100%;height:500px;position:relative}.app.player-maximized,.song-player-container.player-maximized{width:100%;height:100dvh;max-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);box-sizing:border-box;background:var(--bg-primary);z-index:10000;border:none;border-radius:0;flex-direction:column;margin:0;display:flex;position:fixed;inset:0}.song-player-container.player-maximized .song-player-wrapper{flex:1;height:auto;min-height:0}.song-player-container.player-maximized>.controls,.song-player-container.player-maximized>.practice-bar{display:none}.sheet-music-section{margin-top:var(--space-2xl);padding-top:var(--space-xl);border-top:1px solid var(--border-color)}.sheet-music-header{margin-bottom:var(--space-md);justify-content:space-between;align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.sheet-music-header h2{font-family:var(--font-display);color:var(--text-primary);margin:0;font-size:1.25rem;font-weight:600}.sheet-music-actions{gap:var(--space-sm);flex-wrap:wrap;display:flex}.sheet-music-toggle,.sheet-music-download{padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;font-size:.875rem;font-weight:500;text-decoration:none}.sheet-music-toggle{color:var(--accent-primary);border:1px solid var(--accent-primary);background:0 0}.sheet-music-toggle:hover,.sheet-music-toggle:focus,.sheet-music-toggle:focus-visible{outline:none;transform:scale(1.05)}.sheet-music-download{color:var(--accent-primary);border:1px solid var(--accent-primary);background:0 0}.sheet-music-download:hover,.sheet-music-download:focus,.sheet-music-download:focus-visible{background:var(--accent-primary);color:var(--on-accent);outline:none;transform:scale(1.05)}.sheet-music-viewer{margin-top:var(--space-md);border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--bg-surface);overflow:hidden}.pdf-iframe{border:none;width:100%;height:600px}.sheet-music-credit{margin-top:var(--space-sm);color:var(--text-muted);font-size:.8125rem}.sheet-music-credit a{color:var(--accent-primary);text-decoration:none}.sheet-music-credit a:hover{text-decoration:underline}.related-songs{margin-top:var(--space-2xl)}.related-songs h2{font-family:var(--font-display);letter-spacing:-.01em;color:var(--text-primary);margin:0 0 var(--space-md) 0;padding-bottom:var(--space-md);border-bottom:1px solid var(--border-color);font-size:1.25rem;font-weight:700}.related-songs-list{flex-direction:column;display:flex}@media (max-width:1024px){.composer-nav{display:none}.composer-select-mobile{width:100%;display:block}.composer-select{width:100%}.songs-layout{flex-direction:column}}@media (max-width:768px){.songs-content{padding:var(--space-lg) var(--space-md)}.songs-grid{grid-template-columns:1fr}.songs-filters{gap:var(--space-sm) var(--space-lg)}.songs-count{width:100%;margin-left:0}.song-row{padding:var(--space-sm);margin:0 calc(-1 * var(--space-sm));gap:var(--space-sm)}.song-row-title{white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.8125rem;line-height:1.3;display:-webkit-box}.song-row-meta{gap:var(--space-xs)}.song-row-difficulty{padding:1px 4px;font-size:.625rem}.song-row-opus,.song-row-duration{display:none}.composer-header{gap:var(--space-xs) var(--space-md);flex-wrap:wrap}.composer-name{width:100%}.composer-song-count{margin-left:0}.song-detail-content{padding:var(--space-lg) var(--space-md)}.song-detail-content .section-head h1{font-size:1.375rem}.song-info-grid{gap:var(--space-md) var(--space-xl)}.song-player-wrapper{height:400px}.view-mode-btn{padding:var(--space-sm) var(--space-md);font-size:.8rem}}@media (max-width:480px){.songs-content{padding:var(--space-md) var(--space-sm)}}.sheet-overlay-trigger{bottom:var(--space-lg);right:var(--space-lg);border-radius:var(--radius-full);border:1px solid var(--overlay-border);background:var(--overlay-bg);width:56px;height:56px;color:var(--overlay-text);cursor:pointer;transition:all var(--transition-base);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:60;justify-content:center;align-items:center;display:none;position:fixed}@media (min-width:601px){.sheet-overlay-trigger{display:flex}}.sheet-overlay-trigger:hover{border-color:var(--accent-primary);color:var(--accent-primary);background:var(--accent-glow);box-shadow:var(--shadow-glow);transform:scale(1.08)}.sheet-overlay{background:var(--overlay-bg);border:1px solid var(--overlay-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:60;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);flex-direction:column;display:none;position:fixed;overflow:hidden}@media (min-width:601px){.sheet-overlay.visible{display:flex}}.sheet-overlay-header{padding:var(--space-xs) var(--space-sm);background:var(--overlay-bg);border-bottom:1px solid var(--overlay-border);border-radius:var(--radius-md) var(--radius-md) 0 0;-webkit-user-select:none;user-select:none;touch-action:none;z-index:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);justify-content:space-between;align-items:center;display:flex;position:relative}.sheet-overlay-header span{font-family:var(--font-mono);color:var(--overlay-text);font-size:.875rem;font-weight:600}.sheet-overlay-close{width:24px;height:24px;color:var(--overlay-text);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;font-size:1.125rem;line-height:1;display:flex}.sheet-overlay-close:hover{background:var(--accent-red-glow);color:var(--accent-red)}.sheet-overlay-content{border-radius:0 0 var(--radius-md) var(--radius-md);background:var(--bg-surface);flex:1;min-height:0;margin-bottom:-56px;padding-bottom:56px;overflow:hidden}.sheet-overlay-iframe{border:none;width:100%;height:calc(100% + 56px)}.resize-handle{z-index:10;width:16px;height:16px;position:absolute}.resize-handle-nw{cursor:nw-resize;top:-4px;left:-4px}.resize-handle-ne{cursor:ne-resize;top:-4px;right:-4px}.resize-handle-sw{cursor:sw-resize;bottom:-4px;left:-4px}.resize-handle-se{cursor:se-resize;bottom:-4px;right:-4px}.resize-handle:after{content:"";background:var(--accent-primary);opacity:0;width:8px;height:8px;transition:opacity var(--transition-fast);border-radius:2px;position:absolute}.resize-handle-nw:after{top:4px;left:4px}.resize-handle-ne:after{top:4px;right:4px}.resize-handle-sw:after{bottom:4px;left:4px}.resize-handle-se:after{bottom:4px;right:4px}.sheet-overlay:hover .resize-handle:after{opacity:.6}.resize-handle:hover:after{opacity:1}.ad-container{margin:var(--space-xl) auto;text-align:center;max-width:728px}.ad-container .adsbygoogle{min-height:90px;display:block}.landing-ad{padding:0 var(--space-lg)}.songs-page-ad{margin-top:var(--space-lg);padding:0 var(--space-lg);margin-bottom:0}.song-detail-ad{margin-top:var(--space-lg);margin-bottom:0}@media (max-width:768px){.ad-container{max-width:100%;padding:0 var(--space-md)}.landing-ad,.songs-page-ad{padding:0 var(--space-md)}}.not-found-page{background:var(--bg-primary);flex-direction:column;min-height:100vh;display:flex}.not-found-page>.app-header{flex-shrink:0}.not-found-page>.app-footer{flex-shrink:0;margin-top:auto}.not-found-content{padding:var(--space-2xl);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.not-found-title{font-family:var(--font-display);color:var(--accent-primary);text-shadow:0 0 60px var(--accent-glow);margin:0;font-size:8rem;font-weight:700;line-height:1}.not-found-message{font-family:var(--font-display);color:var(--text-secondary);margin:var(--space-lg) 0 var(--space-xl) 0;font-size:1.5rem;font-weight:500}.not-found-link{padding:var(--space-md) var(--space-xl);background:var(--accent-primary);color:var(--on-accent);font-family:var(--font-display);border-radius:var(--radius-full);transition:all var(--transition-base);justify-content:center;align-items:center;font-size:1rem;font-weight:600;text-decoration:none;display:inline-flex}.not-found-link:hover{background:var(--accent-primary-light);box-shadow:var(--shadow-glow-strong);transform:scale(1.05)}@media (max-width:768px){.not-found-title{font-size:5rem}.not-found-message{font-size:1.125rem}.not-found-content{padding:var(--space-xl)}}.x-share-button{align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background:var(--text-primary);color:var(--on-accent);border:1px solid var(--border-color);border-radius:var(--radius-full);font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast);font-size:.875rem;font-weight:600;display:inline-flex}.x-share-button:hover{background:var(--text-secondary);border-color:var(--border-color);transform:scale(1.02)}.x-share-button:active{transform:scale(.98)}.x-share-button svg{flex-shrink:0}.share-section{padding:var(--space-xl) var(--space-lg);margin-top:var(--space-xl);border-top:1px solid var(--border-subtle);justify-content:center;display:flex}.song-share-section{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--border-subtle);justify-content:center;display:flex}.record-button{border-radius:var(--radius-full);border:1px solid var(--overlay-border);background:var(--overlay-bg);width:48px;height:48px;color:var(--overlay-text);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-xs);transition:all var(--transition-base);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);touch-action:manipulation;-webkit-tap-highlight-color:transparent;display:flex}.record-button:hover{border-color:var(--accent-red);color:var(--accent-red);background:var(--accent-red-glow);box-shadow:0 0 20px var(--accent-red-glow);transform:scale(1.08)}.record-button-active{width:auto;min-width:80px;padding:0 var(--space-md);background:var(--accent-red-glow);border-color:var(--accent-red)}.record-button-active:hover{background:color-mix(in srgb, var(--accent-red) 35%, transparent)}.record-button-processing{pointer-events:none;opacity:.7}.record-indicator{border-radius:var(--radius-full);background:var(--accent-red);width:14px;height:14px}.record-indicator-pulse{border-radius:var(--radius-full);background:var(--accent-red);width:12px;height:12px;animation:1s ease-in-out infinite record-pulse}@keyframes record-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.record-time{font-family:var(--font-mono);color:var(--accent-red);font-size:.8125rem;font-weight:700}.record-button-spinner{border:2px solid var(--overlay-text);border-radius:var(--radius-full);border-top-color:#0000;width:16px;height:16px;animation:.8s linear infinite spinner}.page-loading-spinner{border:3px solid var(--border-color);border-top-color:var(--accent-primary);border-radius:var(--radius-full);width:2.5rem;height:2.5rem;animation:.8s linear infinite spinner}@keyframes spinner{to{transform:rotate(360deg)}}.end-screen-video-section{margin-bottom:var(--space-xl);text-align:center}.end-screen-btn-video{background:linear-gradient(135deg, var(--accent-red) 0%, var(--accent-red-dark) 100%);border-color:var(--accent-red);color:var(--on-accent);gap:var(--space-sm);width:auto;min-width:200px;height:56px;padding:0 var(--space-lg);flex-direction:row}.end-screen-btn-video:hover{background:linear-gradient(135deg, var(--accent-red-dark) 0%, var(--accent-red) 100%);border-color:var(--accent-red-dark);color:var(--on-accent);box-shadow:0 8px 24px color-mix(in srgb, var(--accent-red) 40%, transparent), 0 0 30px var(--accent-red-glow)}.end-screen-btn-video .end-screen-icon{align-items:center;font-size:1.25rem;display:flex}.end-screen-hint{margin:var(--space-sm) 0 0 0;color:var(--text-muted);font-size:.8125rem}.cookie-consent-banner{z-index:9999;background:var(--bg-elevated);border-top:1px solid var(--border-color);padding:var(--space-md) var(--space-lg);justify-content:center;align-items:center;gap:var(--space-md);box-shadow:0 -4px 20px color-mix(in srgb, var(--text-primary) 12%, transparent);display:flex;position:fixed;bottom:0;left:0;right:0}.cookie-consent-message{color:var(--text-secondary);max-width:600px;margin:0;font-size:.875rem;line-height:1.5}.cookie-consent-actions{align-items:center;gap:var(--space-md);flex-shrink:0;display:flex}.cookie-consent-link{color:var(--accent-primary-light);white-space:nowrap;font-size:.875rem;text-decoration:none}.cookie-consent-link:hover{text-decoration:underline}.cookie-consent-accept{background:var(--accent-primary);color:var(--on-accent);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;border:none;font-size:.875rem;font-weight:600;transition:background .15s}.cookie-consent-accept:hover{background:var(--accent-primary-dark)}@media (max-width:640px){.cookie-consent-banner{padding:var(--space-md);gap:var(--space-sm);flex-direction:column}.cookie-consent-message{text-align:center}}.song-row-composer{max-width:12em;color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;flex-shrink:0;font-size:.8125rem;overflow:hidden}.song-row-score{font-family:var(--font-mono);opacity:.75;border-left:1px solid;margin-left:5px;padding-left:5px;font-size:.625rem}.favorite-btn{align-items:center;gap:var(--space-xs);color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition-fast), background var(--transition-fast);background:0 0;border:none;flex-shrink:0;display:inline-flex}.favorite-btn svg{width:16px;height:16px}.favorite-btn:hover{color:var(--accent-primary-light);background:var(--bg-elevated)}.favorite-btn.is-favorite{color:var(--warning)}.favorite-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.favorite-btn-row{padding:6px}.favorite-btn-detail{padding:var(--space-sm) var(--space-md);border:1px solid var(--border-color);border-radius:var(--radius-full);font-size:.875rem;font-weight:500}.favorite-btn-detail svg{width:18px;height:18px}.song-detail-actions{align-items:center;gap:var(--space-sm);margin-top:var(--space-md);display:flex}.browse-links{align-items:center;gap:var(--space-sm);margin-bottom:var(--space-lg);flex-wrap:wrap;display:flex}.browse-links-label{margin-right:var(--space-xs)}.browse-link{align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-md);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-full);color:var(--text-secondary);transition:border-color var(--transition-fast), color var(--transition-fast);font-size:.8125rem;font-weight:500;text-decoration:none;display:inline-flex}.browse-link:hover{border-color:var(--text-muted);color:var(--text-primary)}.browse-link-count{font-family:var(--font-mono);color:var(--text-muted);font-size:.6875rem}.browse-link-beginner{border-color:color-mix(in srgb, var(--difficulty-beginner) 35%, transparent)}.browse-link-intermediate{border-color:color-mix(in srgb, var(--difficulty-intermediate) 35%, transparent)}.browse-link-advanced{border-color:color-mix(in srgb, var(--difficulty-advanced) 35%, transparent)}.browse-link.active{background:var(--bg-elevated);color:var(--text-primary);border-color:var(--accent-primary)}.browse-filters{margin-bottom:var(--space-lg)}@media (max-width:768px){.app-header{row-gap:var(--space-xs);flex-wrap:wrap}.header-nav{flex-wrap:wrap;flex:1;justify-content:flex-end}.header-nav-link{min-width:0;padding:var(--space-xs) var(--space-sm);white-space:nowrap}}.song-info-value.difficulty{width:fit-content;text-decoration:none}.song-info-value.difficulty:hover{filter:brightness(1.2)}.song-category-link{margin-top:var(--space-sm);color:var(--accent-primary-light);font-size:.875rem;display:inline-block}.category-name-link{color:inherit;text-decoration:none}.category-name-link:hover{color:var(--accent-primary-light)}@media (max-width:768px){.song-row-composer{display:none}.browse-links{gap:var(--space-xs)}}:focus-visible{outline:3px solid var(--accent-primary);outline-offset:3px}.page-breadcrumbs{margin-bottom:1.5rem;font-size:.85rem}.page-breadcrumbs ol{flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none;display:flex}.page-breadcrumbs li+li:before{content:"/";margin-right:.5rem}.page-breadcrumbs a{color:inherit;text-underline-offset:.2em}
.practice-btn{justify-content:center;align-items:center;gap:var(--space-xs);border:1px solid var(--border-color);border-radius:var(--radius-full);background:var(--bg-elevated);color:var(--text-primary);font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap;padding:8px 16px;font-size:.875rem;font-weight:500;text-decoration:none;display:inline-flex}.practice-btn:hover:not(:disabled){border-color:var(--accent-primary);transform:translateY(-1px)}.practice-btn:disabled{opacity:.5;cursor:not-allowed}.practice-btn-primary{background:var(--accent-primary);border-color:var(--accent-primary);color:var(--on-accent)}.practice-btn-primary:hover:not(:disabled){background:var(--accent-primary-light);box-shadow:var(--shadow-glow)}.practice-btn-ghost{color:var(--text-secondary);background:0 0;padding:6px 12px}.practice-btn-ghost.is-active{color:var(--accent-primary);border-color:var(--accent-primary);background:var(--accent-subtle)}.practice-btn-danger{color:var(--accent-red);border-color:color-mix(in srgb, var(--accent-red) 40%, transparent);background:0 0}.practice-btn-danger:hover:not(:disabled){border-color:var(--accent-red);background:var(--accent-red-glow)}.practice-empty,.practice-field-hint,.practice-field-note{color:var(--text-muted);margin:var(--space-xs) 0 0;font-size:.8125rem;line-height:1.6}.practice-error{color:var(--accent-red);margin:var(--space-sm) 0 0;font-size:.8125rem}.practice-notice{color:var(--success);margin:var(--space-sm) 0 0;font-size:.8125rem}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.practice-chips{gap:var(--space-xs);margin-top:var(--space-xs);flex-wrap:wrap;padding:0;list-style:none;display:flex}.practice-chip{border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast);background:0 0;padding:5px 12px;font-size:.75rem}button.practice-chip:hover{border-color:var(--accent-primary);color:var(--text-primary)}.practice-chip.is-selected{background:var(--accent-subtle);border-color:var(--accent-primary);color:var(--accent-primary-light)}.practice-chips-static .practice-chip{cursor:default;padding:3px 9px;font-size:.6875rem}.practice-chip-listen-only.is-selected{background:color-mix(in srgb, var(--text-muted) 18%, transparent);border-color:var(--text-muted);color:var(--text-secondary)}.practice-rating{gap:var(--space-xs);margin-top:var(--space-xs);display:flex}.practice-rating-btn{border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;transition:all var(--transition-fast);background:0 0;flex:1;padding:10px 8px;font-size:.8125rem}.practice-rating-btn:hover{border-color:var(--accent-primary)}.practice-rating-1.is-selected{background:color-mix(in srgb, var(--accent-red) 15%, transparent);border-color:var(--accent-red);color:var(--accent-red)}.practice-rating-2.is-selected{background:var(--accent-subtle);border-color:var(--accent-primary);color:var(--accent-primary-light)}.practice-rating-3.is-selected{background:color-mix(in srgb, var(--success) 15%, transparent);border-color:var(--success);color:var(--success)}.practice-proficiency{border-radius:var(--radius-full);border:1px solid var(--border-color);color:var(--text-secondary);padding:2px 10px;font-size:.6875rem;font-weight:600;display:inline-block}.practice-proficiency-practicing{border-color:var(--accent-primary);color:var(--accent-primary-light);background:var(--accent-subtle)}.practice-proficiency-playable{border-color:var(--success);color:var(--success);background:color-mix(in srgb, var(--success) 12%, transparent)}.practice-proficiency-mastered{border-color:var(--accent-secondary);color:var(--accent-secondary);background:var(--accent-secondary-glow)}.practice-bar{align-items:center;gap:var(--space-md);margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-surface);flex-wrap:wrap;display:flex}.practice-bar-timer{align-items:center;gap:var(--space-sm);display:flex}.practice-bar-dot{border-radius:var(--radius-full);background:var(--text-muted);flex-shrink:0;width:8px;height:8px}.practice-bar-dot.is-live{background:var(--accent-red);animation:2s ease-in-out infinite practice-pulse}@keyframes practice-pulse{0%,to{opacity:1}50%{opacity:.35}}@media (prefers-reduced-motion:reduce){.practice-bar-dot.is-live{animation:none}}.practice-bar-time{font-family:var(--font-mono);color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:1.125rem}.practice-bar-state,.practice-bar-hint{color:var(--text-muted);font-size:.75rem}.practice-bar-meta{flex:1;min-width:0}.practice-bar-today{color:var(--text-secondary);font-size:.8125rem;text-decoration:none}.practice-bar-today:hover{color:var(--accent-primary-light)}.practice-bar-saved{color:var(--success);font-size:.8125rem}.practice-bar-actions{margin-left:auto}.practice-endcard{margin:0 0 var(--space-md);padding:var(--space-md);border-radius:var(--radius-md);background:color-mix(in srgb, var(--bg-surface) 55%, transparent);border:1px solid var(--overlay-border);text-align:center}.practice-endcard-title{margin:0 0 var(--space-xs);color:var(--text-primary);font-size:.9375rem}.practice-endcard-elapsed,.practice-endcard-today{margin:0 0 var(--space-sm);color:var(--text-secondary);font-size:.8125rem}.practice-sheet-overlay{z-index:1000;padding:var(--space-md);background:var(--modal-backdrop);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.practice-sheet{border:1px solid var(--border-color);border-radius:var(--radius-lg);background:var(--bg-elevated);width:min(520px,100%);max-height:min(88vh,780px);box-shadow:var(--shadow-lg);flex-direction:column;display:flex}.practice-sheet-header{padding:var(--space-md);border-bottom:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.practice-sheet-header h2{font-size:1rem;font-family:var(--font-display);margin:0}.practice-sheet-close{color:var(--text-muted);cursor:pointer;padding:0 var(--space-xs);background:0 0;border:none;font-size:1.5rem;line-height:1}.practice-sheet-close:hover{color:var(--text-primary)}.practice-sheet-body{padding:var(--space-md);flex:1;overflow-y:auto}.practice-sheet-target{margin:0 0 var(--space-md);flex-direction:column;gap:2px;display:flex}.practice-sheet-actions{align-items:center;gap:var(--space-sm);padding:var(--space-md);border-top:1px solid var(--border-subtle);flex-wrap:wrap;display:flex}.practice-sheet-spacer{flex:1}.practice-field{margin-bottom:var(--space-md)}.practice-field>.mono-label,.practice-field>label.mono-label{margin-bottom:var(--space-xs);display:block}.practice-field-row{align-items:center;gap:var(--space-sm);display:flex}.practice-field-unit{color:var(--text-secondary);font-size:.8125rem}.practice-field input[type=number],.practice-field input[type=text],.practice-field input[type=search],.practice-field input[type=date],.practice-field select,.practice-field textarea,.practice-target-picker input,.practice-target-picker select{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-primary);font-family:var(--font-body);width:100%;max-width:100%;padding:8px 12px;font-size:.875rem}.practice-field input[type=number]{max-width:110px}.practice-field textarea{resize:vertical}.practice-checkbox{align-items:center;gap:var(--space-sm);color:var(--text-secondary);cursor:pointer;font-size:.875rem;display:flex}.practice-tabs{gap:var(--space-xs);margin-bottom:var(--space-sm);display:flex}.practice-tab{border:1px solid var(--border-color);border-radius:var(--radius-full);color:var(--text-secondary);font-family:var(--font-body);cursor:pointer;background:0 0;padding:6px 14px;font-size:.8125rem}.practice-tab.is-active{background:var(--accent-subtle);border-color:var(--accent-primary);color:var(--accent-primary-light)}.practice-target-selected{justify-content:space-between;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border:1px solid var(--accent-primary);border-radius:var(--radius-md);background:var(--accent-subtle);font-size:.875rem;display:flex}.practice-target-results{margin:var(--space-sm) 0 0;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);max-height:220px;padding:0;list-style:none;overflow-y:auto}.practice-target-results button{width:100%;padding:var(--space-sm) var(--space-md);color:var(--text-primary);text-align:left;cursor:pointer;font-family:var(--font-body);background:0 0;border:none;flex-direction:column;gap:2px;display:flex}.practice-target-results button:hover{background:var(--accent-subtle)}.practice-target-title{font-size:.875rem}.practice-target-composer{color:var(--text-muted);font-size:.75rem}.practice-page-shell{overflow-y:auto}.practice-page-shell .app-header{z-index:10;position:sticky;top:0}.practice-page{max-width:900px;padding:var(--space-lg) var(--space-md) var(--space-2xl);gap:var(--space-lg);flex-direction:column;margin:0 auto;display:flex}.practice-page-header h1{margin:0 0 var(--space-xs);font-family:var(--font-display);font-size:1.75rem}.practice-page-description{color:var(--text-secondary);margin:0;font-size:.875rem;line-height:1.7}.practice-section-header{justify-content:space-between;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);flex-wrap:wrap;display:flex}.practice-section-header h2,.practice-section-header h3{margin:0}.practice-section-actions{gap:var(--space-sm);display:flex}.practice-overview,.practice-goal-panel,.practice-calendar,.practice-repertoire,.practice-stopwatch,.practice-records,.practice-settings,.practice-data,.practice-review,.song-practice-summary{padding:var(--space-md);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-surface)}.practice-week{padding:var(--space-lg);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);background:var(--bg-surface)}.practice-week-header{justify-content:space-between;align-items:baseline;gap:var(--space-sm);display:flex}.practice-week-header h2{margin:0}.practice-week-goal{color:var(--text-muted);font-size:.6875rem}.practice-week-count{align-items:baseline;gap:var(--space-xs);margin:var(--space-sm) 0 var(--space-md);color:var(--text-secondary);font-size:.8125rem;display:flex}.practice-week-count strong{font-family:var(--font-display);color:var(--text-primary);font-size:2.75rem;line-height:1}.practice-week-strip{grid-template-columns:repeat(7,1fr);gap:6px;margin:0;padding:0;list-style:none;display:grid}.practice-week-day{flex-direction:column;align-items:center;gap:6px;display:flex}.practice-week-weekday{color:var(--text-muted);font-size:.625rem}.practice-week-box{aspect-ratio:1;border-radius:var(--radius-sm);background:var(--border-subtle);width:100%;color:var(--text-muted);place-items:center;font-size:.8125rem;display:grid}.practice-week-box.is-practiced{background:var(--accent-primary);color:var(--on-accent)}.practice-week-box.is-today{background:var(--accent-subtle);border:1px solid var(--accent-primary);color:var(--accent-primary-light)}.practice-week-box.is-future{border:1px dashed var(--border-subtle);background:0 0}.practice-week-note{margin:var(--space-md) 0 0;color:var(--text-secondary);flex-direction:column;gap:2px;font-size:.75rem;line-height:1.7;display:flex}.practice-week-total{margin:var(--space-md) 0 0;padding-top:var(--space-md);border-top:1px solid var(--border-subtle);color:var(--text-muted);flex-direction:column;gap:2px;font-size:.75rem;display:flex}.practice-week-total strong{color:var(--text-secondary);font-size:.875rem;font-weight:500}.practice-manage>summary{padding:var(--space-md);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);background:var(--bg-surface);color:var(--text-secondary);cursor:pointer;font-size:.875rem;list-style:none}.practice-manage>summary::-webkit-details-marker{display:none}.practice-manage>summary:before{content:"▸ ";color:var(--text-muted)}.practice-manage[open]>summary:before{content:"▾ "}.practice-manage>summary:hover{border-color:var(--accent-primary);color:var(--text-primary)}.practice-manage-body{gap:var(--space-lg);margin-top:var(--space-md);flex-direction:column;display:flex}.practice-overview-main{gap:var(--space-md);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));display:grid}.practice-overview-stat{flex-direction:column;gap:2px;display:flex}.practice-overview-stat strong{font-family:var(--font-display);color:var(--text-primary);font-size:1.375rem}.practice-overview-stat.is-primary strong{color:var(--accent-primary-light);font-size:1.75rem}.practice-overview-note{color:var(--text-muted);font-size:.75rem}.practice-overview-goals{align-items:center;gap:var(--space-md);margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--border-subtle);flex-wrap:wrap;display:flex}.practice-progress-item{align-items:center;gap:var(--space-xs);flex-direction:column;display:flex}.practice-progress-name{color:var(--text-muted);font-size:.6875rem}.practice-progress{--practice-progress:0%;border-radius:var(--radius-full);background:conic-gradient(var(--accent-primary) var(--practice-progress), var(--border-subtle) var(--practice-progress));place-items:center;width:56px;height:56px;display:grid}.practice-progress-value{border-radius:var(--radius-full);background:var(--bg-surface);width:44px;height:44px;font-family:var(--font-mono);color:var(--text-secondary);place-items:center;font-size:.75rem;display:grid}.practice-goal-done{color:var(--success);margin:0;font-size:.8125rem}.practice-overview-totals{gap:var(--space-lg);margin:var(--space-md) 0 0;padding-top:var(--space-md);border-top:1px solid var(--border-subtle);display:flex}.practice-overview-totals div{flex-direction:column;gap:2px;display:flex}.practice-overview-totals dd{color:var(--text-primary);margin:0;font-size:.9375rem}.practice-goal-list{color:var(--text-secondary);margin:0;padding-left:1.2em;font-size:.875rem;line-height:1.8}.practice-calendar-scroll{padding-bottom:var(--space-xs);overflow-x:auto}.practice-calendar-grid{--practice-cell:16px;grid-template-columns:auto repeat(var(--practice-calendar-weeks,26), var(--practice-cell));grid-template-rows:auto auto;align-items:start;gap:3px;width:max-content;display:grid}.practice-calendar-corner{grid-row:1}.practice-calendar-month{color:var(--text-muted);white-space:nowrap;grid-row:1;font-size:.625rem}.practice-calendar-weekdays,.practice-calendar-week{grid-row:2;grid-template-rows:repeat(7, var(--practice-cell));gap:3px;display:grid}.practice-calendar-weekdays{padding-right:4px}.practice-calendar-weekday{color:var(--text-muted);place-items:center;font-size:.5625rem;line-height:1;display:grid}.practice-calendar-cell{width:var(--practice-cell);height:var(--practice-cell);background:var(--border-subtle);cursor:pointer;border:none;border-radius:3px;padding:0}.practice-calendar-cell.is-future{cursor:default;background:0 0}.practice-calendar-swatch{background:var(--border-subtle);border-radius:3px;width:12px;height:12px}.practice-calendar-cell.level-1,.practice-calendar-swatch.level-1{background:color-mix(in srgb, var(--accent-primary) 35%, transparent)}.practice-calendar-cell.level-2,.practice-calendar-swatch.level-2{background:color-mix(in srgb, var(--accent-primary) 55%, transparent)}.practice-calendar-cell.level-3,.practice-calendar-swatch.level-3{background:color-mix(in srgb, var(--accent-primary) 78%, transparent)}.practice-calendar-cell.level-4,.practice-calendar-swatch.level-4{background:var(--accent-primary)}.practice-calendar-cell.is-today{box-shadow:inset 0 0 0 2px var(--accent-secondary)}.practice-calendar-cell.is-selected{box-shadow:inset 0 0 0 2px var(--text-primary)}.practice-calendar-legend{margin-top:var(--space-sm);color:var(--text-muted);align-items:center;gap:4px;font-size:.6875rem;display:flex}.practice-session-list{gap:var(--space-md);flex-direction:column;display:flex}.practice-day-group ul{margin:0;padding:0;list-style:none}.practice-day-header{padding-bottom:var(--space-xs);border-bottom:1px solid var(--border-subtle);margin-bottom:var(--space-sm);justify-content:space-between;align-items:baseline;display:flex}.practice-day-header h3{font-size:.875rem;font-family:var(--font-display);margin:0}.practice-day-total{color:var(--accent-primary-light);font-size:.8125rem;font-family:var(--font-mono)}.practice-session-item{gap:var(--space-xs) var(--space-sm);padding:var(--space-sm) 0;border-bottom:1px solid var(--border-subtle);grid-template-columns:1fr auto;display:grid}.practice-session-item:last-child{border-bottom:none}.practice-session-main{align-items:baseline;gap:var(--space-sm);flex-wrap:wrap;display:flex}.practice-session-time{font-family:var(--font-mono);color:var(--text-muted);font-size:.75rem}.practice-session-target{color:var(--text-primary);font-size:.875rem}.practice-session-duration{color:var(--text-secondary);font-size:.8125rem;font-family:var(--font-mono)}.practice-session-detail{align-items:center;gap:var(--space-xs);flex-wrap:wrap;grid-column:1;display:flex}.practice-session-edit{grid-area:1/2/span 2;align-self:start}.practice-session-tag{border-radius:var(--radius-full);border:1px solid var(--border-color);color:var(--text-muted);padding:2px 8px;font-size:.625rem}.practice-session-tag.is-warning{border-color:var(--accent-red);color:var(--accent-red)}.practice-session-memo{width:100%;margin:var(--space-xs) 0 0;color:var(--text-secondary);font-size:.75rem;line-height:1.6}.practice-repertoire-progress{justify-content:space-between;align-items:baseline;gap:var(--space-sm);margin:0 0 var(--space-md);color:var(--accent-primary-light);flex-wrap:wrap;font-size:.875rem;display:flex}.practice-repertoire-draghint{color:var(--text-muted);font-size:.6875rem}.practice-repertoire-add{margin-bottom:var(--space-lg);padding:var(--space-md);border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-elevated)}.practice-repertoire-columns{gap:var(--space-md);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.practice-repertoire-column{padding:var(--space-md);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-elevated)}.practice-repertoire-column.is-practicing{border-color:var(--accent-primary)}.practice-repertoire-column.is-done{border-color:color-mix(in srgb, var(--success) 40%, transparent)}.practice-repertoire-column.is-drop-target{border-style:dashed;border-color:var(--accent-secondary);background:var(--accent-subtle)}.practice-repertoire-column-header{justify-content:space-between;align-items:baseline;gap:var(--space-sm);margin-bottom:var(--space-sm);padding-bottom:var(--space-xs);border-bottom:1px solid var(--border-subtle);display:flex}.practice-repertoire-column-header h3{font-family:var(--font-display);margin:0;font-size:.9375rem}.practice-repertoire-count{font-family:var(--font-mono);color:var(--text-muted);font-size:.75rem}.practice-repertoire-list,.practice-stale-list{margin:0;padding:0;list-style:none}.practice-repertoire-item{padding:var(--space-sm);margin-bottom:var(--space-xs);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:grab}.practice-repertoire-item:last-child{margin-bottom:0}.practice-repertoire-item:active{cursor:grabbing}.practice-repertoire-item.is-dragging{opacity:.4;border-style:dashed}.practice-repertoire-grip{color:var(--text-muted);cursor:grab;-webkit-user-select:none;user-select:none;font-size:.875rem;line-height:1}.practice-completion{align-items:center;gap:var(--space-sm);margin:var(--space-xs) 0;display:flex}.practice-completion input[type=range]{border-radius:var(--radius-full);background:var(--border-subtle);appearance:none;cursor:pointer;border:none;flex:1;min-width:0;height:6px;padding:0}.practice-completion input[type=range]::-webkit-slider-thumb{appearance:none;border-radius:var(--radius-full);background:var(--accent-primary);border:2px solid var(--bg-surface);cursor:grab;width:14px;height:14px}.practice-completion input[type=range]::-moz-range-thumb{border:2px solid var(--bg-surface);border-radius:var(--radius-full);background:var(--accent-primary);cursor:grab;width:14px;height:14px}.practice-completion-value{text-align:right;min-width:3.2em;font-family:var(--font-mono);color:var(--text-secondary);font-size:.75rem}.practice-repertoire-note{margin:var(--space-xs) 0 0;color:var(--text-secondary);font-size:.6875rem;line-height:1.6}.practice-repertoire-edit{margin-top:var(--space-xs);padding:2px 10px;font-size:.6875rem}.practice-repertoire-actions{align-items:center;gap:var(--space-xs);margin-top:var(--space-sm);flex-wrap:wrap;display:flex}.practice-repertoire-actions a{text-decoration:none}.practice-duration-choices{margin-top:var(--space-sm)}.practice-record-details summary{cursor:pointer;padding-block:var(--space-sm);color:var(--text-secondary)}.practice-record-details[open] summary{margin-bottom:var(--space-sm)}.practice-repertoire-status select{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-elevated);max-width:100%;min-height:36px;color:var(--text-primary);font:inherit;padding:4px 8px;font-size:.8125rem}.practice-save-notice{padding:var(--space-sm) var(--space-md);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);background:var(--bg-elevated)}.practice-repertoire-editor{gap:var(--space-sm);margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--border-subtle);flex-direction:column;display:flex}.practice-repertoire-editor label{align-items:center;gap:var(--space-xs);display:flex}.practice-repertoire-note-field{align-items:stretch}.practice-repertoire-editor select,.practice-repertoire-editor input{border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-elevated);min-width:0;color:var(--text-primary);font-family:var(--font-body);flex:1;padding:4px 8px;font-size:.75rem}.practice-repertoire-main{align-items:center;gap:var(--space-sm);flex-wrap:wrap;display:flex}.practice-repertoire-title{align-items:center;gap:var(--space-xs);color:var(--text-primary);flex-wrap:wrap;font-size:.9375rem;text-decoration:none;display:inline-flex}a.practice-repertoire-title:hover{color:var(--accent-primary-light)}.practice-repertoire-meta{gap:var(--space-sm);color:var(--text-muted);flex-wrap:wrap;margin-top:2px;font-size:.6875rem;display:flex}.practice-repertoire-target{color:var(--accent-secondary)}.song-practice-status{margin-top:0}.practice-stale{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--border-subtle)}.practice-stale-list li{justify-content:space-between;gap:var(--space-sm);padding:4px 0;font-size:.8125rem;display:flex}.practice-stale-list a{color:var(--text-secondary);text-decoration:none}.practice-stale-list a:hover{color:var(--accent-primary-light)}.practice-stale-days{color:var(--text-muted);font-size:.75rem}.practice-stopwatch-body{align-items:center;gap:var(--space-md);margin-top:var(--space-sm);flex-wrap:wrap;display:flex}.practice-stopwatch-time{font-family:var(--font-mono);color:var(--text-primary);font-variant-numeric:tabular-nums;font-size:2rem}.practice-stopwatch-state{color:var(--text-muted);font-size:.75rem}.practice-stopwatch-actions{gap:var(--space-sm);flex-wrap:wrap;margin-left:auto;display:flex}.practice-review{border-color:var(--accent-primary);background:linear-gradient(180deg, var(--accent-subtle), var(--bg-surface))}.practice-review-period{color:var(--text-muted);margin:0;font-size:.75rem}.practice-review-headline{margin:var(--space-xs) 0;font-family:var(--font-display);color:var(--text-primary);font-size:1.125rem}.practice-review-delta{margin:0 0 var(--space-md);color:var(--accent-primary-light);font-size:.875rem}.practice-review-block ul{margin:var(--space-xs) 0 var(--space-md);color:var(--text-secondary);padding:0;font-size:.8125rem;list-style:none}.practice-review-block li{justify-content:space-between;gap:var(--space-sm);padding:3px 0;display:flex}.practice-review-duration{font-family:var(--font-mono);color:var(--text-muted)}.practice-data-actions{gap:var(--space-sm);margin-top:var(--space-sm);flex-wrap:wrap;display:flex}.practice-import-preview{margin-top:var(--space-md);padding:var(--space-md);border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-elevated);font-size:.875rem}.practice-import-preview p{margin:0 0 var(--space-xs);color:var(--text-secondary)}.song-practice-summary{margin:var(--space-lg) 0}.song-practice-header{justify-content:space-between;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);display:flex}.song-practice-header h2{margin:0}.practice-stat-grid{gap:var(--space-md);margin:0 0 var(--space-md);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));display:grid}.practice-stat dt{margin-bottom:2px}.practice-stat dd{color:var(--text-primary);margin:0;font-size:1rem}.practice-trend{margin-bottom:var(--space-md)}.practice-trend-dots{margin:var(--space-xs) 0 0;gap:4px;padding:0;list-style:none;display:flex}.practice-trend-dot{border-radius:var(--radius-full);width:10px;height:10px}.practice-trend-1{background:var(--accent-red)}.practice-trend-2{background:var(--accent-primary)}.practice-trend-3{background:var(--success)}.practice-recent-list{margin:var(--space-xs) 0 var(--space-md);padding:0;list-style:none}.practice-recent-item{align-items:center;gap:var(--space-sm);color:var(--text-secondary);flex-wrap:wrap;padding:4px 0;font-size:.8125rem;display:flex}.practice-recent-date{font-family:var(--font-mono);color:var(--text-muted);min-width:4.5em}.today-practice-card{width:calc(100% - 2 * var(--space-lg));max-width:1120px;margin:var(--space-lg) auto 0;padding:var(--space-md) var(--space-lg);justify-content:space-between;align-items:center;gap:var(--space-md);border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-surface);display:flex}.today-practice-summary,.today-practice-actions{align-items:center;gap:var(--space-md);flex-wrap:wrap;display:flex}.today-practice-summary h2{color:var(--text-secondary);margin:0;font-size:.9375rem;font-weight:600}.today-practice-status{color:var(--text-primary);margin:0;font-size:.9375rem}.today-practice-log-link{color:var(--text-secondary);text-underline-offset:3px;font-size:.875rem}.today-practice-log-link:hover{color:var(--accent-primary)}@media (max-width:600px){.today-practice-card{width:calc(100% - 2 * var(--space-md));margin-top:var(--space-md);padding:var(--space-md);align-items:flex-start;gap:var(--space-sm);flex-direction:column}}@media (max-width:860px){.practice-repertoire-columns{grid-template-columns:1fr}}@media (max-width:600px){.practice-week{padding:var(--space-md)}.practice-week-count strong{font-size:2.25rem}.practice-bar{gap:var(--space-sm)}.practice-bar-actions{width:100%;margin-left:0}.practice-bar-actions .practice-btn{width:100%}.practice-overview-stat.is-primary strong{font-size:1.5rem}.practice-stopwatch-actions{width:100%;margin-left:0}.practice-session-item{grid-template-columns:1fr}.practice-session-edit{grid-area:auto/1;justify-self:start}.practice-sheet{max-height:92vh}}.header-nav-link.is-current{background:var(--accent-primary);color:var(--on-accent);border-color:var(--accent-primary)}.header-nav-link.header-nav-action{color:var(--text-secondary);border-color:var(--border-color);background:0 0}.header-nav-link.header-nav-action:hover{color:var(--accent-primary);border-color:var(--accent-primary)}.practice-storage-banner{border:1px solid var(--accent-red);border-radius:var(--radius-sm);color:var(--accent-red);margin:0 0 var(--space-md);padding:var(--space-sm) var(--space-md);font-size:.8125rem;line-height:1.6}