@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/ba9851c3c22cd980-s.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/21350d82a1f187e9-s.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format("woff2");unicode-range:u+1f??}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format("woff2");unicode-range:u+0370-0377,u+037a-037f,u+0384-038a,u+038c,u+038e-03a1,u+03a3-03ff}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/8e9860b6e62d6359-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,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:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:__Inter_Fallback_f367f3;src:local("Arial");ascent-override:90.49%;descent-override:22.56%;line-gap-override:0.00%;size-adjust:107.06%}.__className_f367f3{font-family:__Inter_f367f3,__Inter_Fallback_f367f3;font-style:normal}:root{--bg-primary:#121212;--bg-secondary:#181818;--bg-elevated:#282828;--bg-highlight:#333;--spotify-green:#1db954;--spotify-green-light:#1ed760;--spotify-green-dark:#169c46;--text-primary:#fff;--text-secondary:#b3b3b3;--text-subdued:#6a6a6a;--accent-error:#f15e6c;--accent-success:#1db954;--accent-warning:#f59b23;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:24px;--radius-full:9999px;--transition-fast:150ms ease;--transition-normal:250ms ease;--transition-slow:400ms ease;--shadow-sm:0 2px 8px rgba(0,0,0,.3);--shadow-md:0 4px 16px rgba(0,0,0,.4);--shadow-lg:0 8px 32px rgba(0,0,0,.5);--safe-area-bottom:env(safe-area-inset-bottom,0px)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;letter-spacing:-.02em}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}@media (max-width:768px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.25rem}}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-md)}.page{min-height:100vh;padding-bottom:calc(80px + var(--safe-area-bottom))}.page-header{padding:var(--space-xl) 0 var(--space-lg);text-align:center}.page-header h1{margin-bottom:var(--space-sm);background:linear-gradient(135deg,var(--text-primary) 0,var(--spotify-green) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-header p{color:var(--text-secondary);font-size:1rem}.card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-lg);transition:background-color var(--transition-fast)}.card:hover{background:var(--bg-elevated)}.card-glass{background:rgba(40,40,40,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.1)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-md) var(--space-xl);font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);text-decoration:none;min-height:48px;min-width:48px}.btn-primary{background:var(--spotify-green);color:var(--bg-primary)}.btn-primary:hover{background:var(--spotify-green-light);transform:scale(1.04)}.btn-primary:active{transform:scale(.98)}.btn-secondary{background:var(--bg-elevated);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-highlight)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover{color:var(--text-primary);background:hsla(0,0%,100%,.1)}.btn-icon{padding:var(--space-md);border-radius:50%}.btn-lg{padding:var(--space-lg) var(--space-2xl);font-size:1.125rem}.btn-sm{padding:var(--space-sm) var(--space-md);font-size:.875rem;min-height:36px}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.select-wrapper{position:relative;display:inline-block}.select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-elevated);color:var(--text-primary);padding:var(--space-md) var(--space-2xl) var(--space-md) var(--space-md);font-size:1rem;font-weight:500;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);min-width:120px}.select:focus,.select:hover{border-color:var(--spotify-green)}.select:focus{outline:none;box-shadow:0 0 0 3px rgba(29,185,84,.3)}.select-wrapper:after{content:"▼";position:absolute;right:var(--space-md);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-secondary);font-size:.75rem}.controls-row{display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:center;align-items:center}.control-group{display:flex;flex-direction:column;gap:var(--space-xs)}.control-label{font-size:.75rem;font-weight:600;color:var(--text-subdued);text-transform:uppercase;letter-spacing:.1em}.reveal-box{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:var(--space-xl);text-align:center;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md);border:2px solid transparent;transition:all var(--transition-normal)}.reveal-box.revealed{border-color:var(--spotify-green);background:rgba(29,185,84,.1)}.reveal-notes{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center}.note-badge{background:var(--spotify-green);color:var(--bg-primary);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);font-size:1.25rem;font-weight:700;min-width:48px}.hidden-text{color:var(--text-subdued);font-size:1.125rem}.speed-buttons{display:flex;gap:var(--space-xs);background:var(--bg-elevated);padding:var(--space-xs);border-radius:var(--radius-full)}.speed-btn{padding:var(--space-sm) var(--space-md);background:transparent;color:var(--text-secondary);border:none;border-radius:var(--radius-full);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.speed-btn:hover{color:var(--text-primary)}.speed-btn.active{background:var(--spotify-green);color:var(--bg-primary)}.nav-bottom{position:fixed;bottom:0;left:0;right:0;background:hsla(0,0%,7%,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid hsla(0,0%,100%,.1);padding:var(--space-sm) var(--space-md);padding-bottom:calc(var(--space-sm) + var(--safe-area-bottom));z-index:1000}.nav-list{display:flex;justify-content:space-around;align-items:center;list-style:none;max-width:500px;margin:0 auto}.nav-item{flex:1 1}.nav-link{display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-sm);color:var(--text-subdued);text-decoration:none;font-size:.625rem;font-weight:500;transition:color var(--transition-fast)}.nav-link.active,.nav-link:hover{color:var(--text-primary)}.nav-link.active{color:var(--spotify-green)}.nav-icon{font-size:1.5rem}.piano-container{width:100%;overflow-x:auto;padding:var(--space-md) 0;-webkit-overflow-scrolling:touch}.piano-keyboard{min-width:-moz-fit-content;min-width:fit-content;margin:0 auto}.piano-key,.piano-keyboard{display:flex;position:relative}.piano-key{cursor:pointer;transition:all var(--transition-fast);align-items:flex-end;justify-content:center;padding-bottom:var(--space-sm);font-size:.75rem;font-weight:600;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.piano-key-white{width:44px;height:160px;background:linear-gradient(180deg,#f8f8f8 0,#fff);border:1px solid #ccc;border-radius:0 0 var(--radius-sm) var(--radius-sm);color:var(--bg-primary);z-index:1}.piano-key-white:hover{background:linear-gradient(180deg,#e8e8e8 0,#f0f0f0)}.piano-key-white.active,.piano-key-white:active{background:linear-gradient(to bottom,var(--spotify-green-light) 0,var(--spotify-green) 100%)}.piano-key-white.highlighted{background:linear-gradient(180deg,#c8f7d5 0,#a8e6bc)}.piano-key-black{position:absolute;width:28px;height:100px;background:linear-gradient(180deg,#333 0,#000);border-radius:0 0 var(--radius-sm) var(--radius-sm);color:var(--text-primary);z-index:2;margin-left:-14px}.piano-key-black:hover{background:linear-gradient(180deg,#444 0,#222)}.piano-key-black.active,.piano-key-black:active{background:linear-gradient(to bottom,var(--spotify-green) 0,var(--spotify-green-dark) 100%)}.piano-key-black.highlighted{background:linear-gradient(to bottom,var(--spotify-green-light) 0,var(--spotify-green) 100%)}@media (max-width:768px){.piano-key-white{width:36px;height:140px}.piano-key-black{width:24px;height:85px;margin-left:-12px}}.home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-gap:var(--space-lg);gap:var(--space-lg);padding:var(--space-lg) 0}.feature-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--space-xl);text-align:center;text-decoration:none;transition:all var(--transition-normal);border:1px solid transparent}.feature-card:hover{background:var(--bg-elevated);border-color:var(--spotify-green);transform:translateY(-4px)}.feature-icon{font-size:3rem;margin-bottom:var(--space-md);display:block}.feature-title{color:var(--text-primary);font-size:1.25rem;font-weight:700;margin-bottom:var(--space-sm)}.feature-desc{color:var(--text-secondary);font-size:.875rem}.interval-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));grid-gap:var(--space-sm);gap:var(--space-sm);margin-top:var(--space-lg)}.interval-btn{padding:var(--space-md);background:var(--bg-elevated);color:var(--text-primary);border:2px solid transparent;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.interval-btn:hover{background:var(--bg-highlight);border-color:var(--spotify-green)}.interval-btn.correct{background:rgba(29,185,84,.2);border-color:var(--spotify-green);color:var(--spotify-green)}.interval-btn.incorrect{background:rgba(241,94,108,.2);border-color:var(--accent-error);color:var(--accent-error)}.tabs{display:flex;gap:var(--space-xs);background:var(--bg-elevated);padding:var(--space-xs);border-radius:var(--radius-full);margin-bottom:var(--space-lg)}.tab-btn{flex:1 1;padding:var(--space-md) var(--space-lg);background:transparent;color:var(--text-secondary);border:none;border-radius:var(--radius-full);font-size:.875rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.tab-btn:hover{color:var(--text-primary)}.tab-btn.active{background:var(--spotify-green);color:var(--bg-primary)}.item-list{display:flex;flex-direction:column;gap:var(--space-sm)}.item-row{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:var(--bg-elevated);border-radius:var(--radius-md);transition:background-color var(--transition-fast)}.item-row:hover{background:var(--bg-highlight)}.item-name{font-weight:600}.item-notes{color:var(--text-subdued);font-size:.875rem}.loading-indicator{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);color:var(--text-secondary);padding:var(--space-xl)}.loading-spinner{width:24px;height:24px;border:3px solid var(--bg-highlight);border-top-color:var(--spotify-green);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.pulse{animation:pulse .6s ease-in-out}@media (max-width:480px){.container{padding:0 var(--space-sm)}.page-header{padding:var(--space-lg) 0 var(--space-md)}.card{padding:var(--space-md)}.btn{padding:var(--space-sm) var(--space-lg)}.controls-row{flex-direction:column}}.ezoic-ad-container{width:100%;display:flex;justify-content:center;align-items:center;background:transparent}.ezoic-ad{min-height:50px;transition:opacity var(--transition-normal)}.ezoic-top-banner{padding:var(--space-sm) var(--space-md);background:var(--bg-secondary);border-bottom:1px solid hsla(0,0%,100%,.05)}.ezoic-inline-ad{margin:var(--space-xl) 0}.ezoic-inline-ad,.ezoic-sidebar-ad{padding:var(--space-md);background:var(--bg-secondary);border-radius:var(--radius-lg)}.ezoic-sidebar-ad{position:-webkit-sticky;position:sticky;top:var(--space-lg)}@media (max-width:1024px){.ezoic-sidebar-ad{display:none}}@media (max-width:768px){.ezoic-top-banner{padding:var(--space-xs) var(--space-sm)}.ezoic-inline-ad{margin:var(--space-lg) 0;padding:var(--space-sm)}}