.loading-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0a0a0cf7;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:10000;opacity:1;pointer-events:auto;transition:opacity .5s ease-out}.loading-overlay.hidden{opacity:0;pointer-events:none}.loading-overlay__content{display:flex;flex-direction:column;align-items:center;gap:28px}.loading-overlay__spinner{width:100px;height:100px;border-radius:50%;position:relative;background:conic-gradient(from 0deg,transparent 0deg 45deg,#fbbf24 60deg,#f97316 150deg,#ea580c 240deg,transparent 285deg 360deg);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));animation:loading-spin 1s linear infinite}.loading-overlay__spinner:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:3px solid rgba(255,255,255,.1);box-sizing:border-box}.loading-overlay__text{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;font-weight:400;letter-spacing:2px;color:#ffffffb3;animation:loading-text-breathe 2.5s ease-in-out infinite}.loading-overlay__glow{position:absolute;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(249,115,22,.18) 0%,rgba(245,158,11,.1) 40%,transparent 70%);filter:blur(70px);animation:loading-pulse 2.5s ease-in-out infinite}@keyframes loading-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loading-pulse{0%,to{opacity:.4;transform:scale(1)}50%{opacity:.85;transform:scale(1.15)}}@keyframes loading-text-breathe{0%,to{opacity:.5}50%{opacity:1}}.global-offline-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--color-bg-primary, #0a0a0f);z-index:99999}.offline-banner-content{text-align:center;padding:2rem;max-width:400px}.offline-icon{font-size:4rem;margin-bottom:1rem;animation:offline-float 2s ease-in-out infinite}@keyframes offline-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.offline-banner-content h2{color:var(--color-text-primary, #fff);margin:0 0 .5rem;font-size:1.5rem;font-weight:600}.offline-banner-content p{color:var(--color-text-secondary, #888);margin:0 0 .5rem;font-size:1rem}.offline-hint{font-size:.875rem!important;opacity:.7;margin-top:1rem!important}.offline-pulse{width:12px;height:12px;background:#eab30899;border-radius:50%;margin:1.5rem auto 0;animation:offline-pulse-anim 1.5s ease-in-out infinite}@keyframes offline-pulse-anim{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.3);opacity:1}}.auth-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.auth-modal{box-sizing:border-box;background:#1a1a1a;border-radius:20px;padding:3rem 2.5rem;max-width:440px;width:90%;position:relative;box-shadow:0 20px 60px #00000080;animation:slideUp .3s cubic-bezier(.25,.8,.25,1);border:1px solid rgba(255,255,255,.1)}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.auth-modal-close{position:absolute;top:1rem;right:1rem;background:transparent;border:none;font-size:2rem;color:#999;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease;line-height:1}.auth-modal-close:hover{color:#fff}.auth-modal-title{font-family:var(--font-title, "Geist", sans-serif);font-size:2rem;font-weight:600;color:#fff;margin:0 0 2rem;text-align:center}.auth-modal-form{display:flex;flex-direction:column;gap:1rem}.auth-modal-label{font-family:var(--font-title, "Geist", sans-serif);font-size:.9rem;font-weight:500;color:#e5e5e5;margin-bottom:.25rem}.auth-modal-input{width:100%;padding:.875rem 1rem;font-size:1rem;border:2px solid #333;border-radius:12px;font-family:var(--font-title, "Geist", sans-serif);transition:all .2s ease;box-sizing:border-box;background:#2a2a2a;color:#fff}.auth-modal-input:focus{outline:none;border-color:#ffb93c;box-shadow:0 0 0 3px #ffb93c26}.auth-modal-input:disabled{background:#1f1f1f;cursor:not-allowed;opacity:.6}.auth-modal-input::placeholder{color:#777}.auth-modal-turnstile-wrapper{display:flex;justify-content:center}.auth-modal-turnstile{width:100%;min-height:0}.auth-modal-error{background:#fee;color:#c33;padding:.75rem 1rem;border-radius:8px;font-size:.9rem;font-family:var(--font-title, "Geist", sans-serif);margin-top:1rem}.auth-modal-button{width:100%;padding:1rem;font-size:1rem;font-weight:600;font-family:var(--font-title, "Geist", sans-serif);border:none;border-radius:12px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.auth-modal-button-primary{background:linear-gradient(135deg,#ffb93c,#ff8c42);color:#000;box-shadow:0 4px 12px #ffb93c4d}.auth-modal-button-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ffb93c66}.auth-modal-button-primary:active:not(:disabled){transform:translateY(0)}.auth-modal-button-primary:disabled{opacity:.6;cursor:not-allowed;transform:none}.auth-modal-button-google{background:#2a2a2a;color:#fff;border:2px solid #3a3a3a}.auth-modal-button-google:hover:not(:disabled){background:#333;border-color:#4a4a4a}.auth-modal-button-google:disabled{opacity:.6;cursor:not-allowed}.auth-modal-button-magic{background:#232323;color:#d6d6d6;border:1px solid #3a3a3a;padding:.8rem 1rem;font-weight:500;font-size:.95rem}.auth-modal-button-magic:hover:not(:disabled){background:#323232;border-color:#666;color:#fff;transform:translateY(-1px);box-shadow:0 0 0 3px #ffffff14}.auth-modal-button-magic:active:not(:disabled){background:#262626}.auth-modal-button-magic:disabled{opacity:.6;cursor:not-allowed}.auth-modal-magic-toggle{background:#1f1f1f;border:2px solid #353535;color:#d0d0d0;font-weight:600;margin-top:0;transition:background .2s ease,border-color .2s ease,color .2s ease}.auth-modal-magic-toggle:hover:not(:disabled){background:#292929;border-color:#4a4a4a;color:#fff}.auth-modal-magic-toggle:disabled{opacity:.6;cursor:not-allowed}.auth-modal-google-icon{width:20px;height:20px}.auth-modal-divider{display:flex;align-items:center;text-align:center;margin:1.5rem 0;color:#777;font-size:.9rem;font-family:var(--font-title, "Geist", sans-serif)}.auth-modal-divider:before,.auth-modal-divider:after{content:"";flex:1;border-bottom:1px solid #333}.auth-modal-divider span{padding:0 1rem}.auth-modal-legal{margin:1.75rem 0 0;color:#999;font-size:.8rem;line-height:1.4;text-align:center}.auth-modal-legal a{color:#cfcfcf}.auth-modal-legal a:hover{color:#fff}.auth-modal-success{text-align:center;padding:1rem 0}.auth-modal-success-compact{padding-bottom:.5rem}.auth-modal-success-icon{width:64px;height:64px;background:linear-gradient(135deg,#4ade80,#22c55e);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;margin:0 auto 1.5rem;animation:scaleIn .4s cubic-bezier(.25,.8,.25,1)}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}.auth-modal-success h3{font-family:var(--font-title, "Geist", sans-serif);font-size:1.5rem;font-weight:600;color:#fff;margin:0 0 .5rem}.auth-modal-success p{font-family:var(--font-title, "Geist", sans-serif);font-size:1rem;color:#ccc;margin:.5rem 0}.auth-modal-success-subtitle{font-size:.9rem!important;color:#999!important}.auth-modal-input-code{text-align:center;letter-spacing:.25em;font-size:1.1rem}.auth-modal-inline-actions{display:flex;justify-content:space-between;gap:1rem}.auth-modal-text-button{background:transparent;border:none;padding:0;color:#bdbdbd;font-size:.9rem;font-family:var(--font-title, "Geist", sans-serif);cursor:pointer}.auth-modal-text-button:hover:not(:disabled){color:#fff}.auth-modal-text-button:disabled{opacity:.6;cursor:not-allowed}.auth-modal-done-button{margin-top:2rem;padding:1rem 2rem;background:#333;color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;font-family:var(--font-title, "Geist", sans-serif);cursor:pointer;transition:all .2s ease}.auth-modal-done-button:hover{background:#444;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}@media(max-width:768px){.auth-modal{padding:2rem 1.5rem;max-width:90%}.auth-modal-title{font-size:1.5rem;margin-bottom:1.5rem}.auth-modal-input{font-size:16px}}.app-auth-screen{min-height:100vh;width:100%;box-sizing:border-box;padding:24px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0f1115,#171a20)}.ios-app-shell .app-auth-screen{min-height:100dvh;padding:calc(env(safe-area-inset-top,0px) + 24px) max(24px,calc(env(safe-area-inset-right,0px) + 24px)) calc(env(safe-area-inset-bottom,0px) + 24px);padding-left:max(24px,calc(env(safe-area-inset-left,0px) + 24px))}.app-auth-shell{position:relative;width:min(440px,100%);box-sizing:border-box;margin:0 auto;display:flex;flex-direction:column;align-items:center}.app-auth-header{position:absolute;left:50%;bottom:calc(100% + 18px);transform:translate(-50%);width:100%;color:#fff;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.app-auth-logo{width:clamp(80px,20vw,108px);height:clamp(80px,20vw,108px);display:block}.app-auth-brand{margin:0;font-family:Audiowide,sans-serif;font-size:clamp(1.8rem,6vw,2.5rem);letter-spacing:.04em;color:#fff7e8}.app-auth-shell .auth-modal{width:100%;max-width:100%;margin:0 auto}@media(max-width:640px){.app-auth-screen{padding:18px}.ios-app-shell .app-auth-screen{padding:calc(env(safe-area-inset-top,0px) + 18px) max(18px,calc(env(safe-area-inset-right,0px) + 18px)) calc(env(safe-area-inset-bottom,0px) + 18px);padding-left:max(18px,calc(env(safe-area-inset-left,0px) + 18px))}.app-auth-header{bottom:calc(100% + 14px)}.app-auth-shell .auth-modal{width:100%;padding:2.4rem 1.3rem}}@font-face{font-family:Geist;font-style:normal;font-weight:200 700;font-display:swap;src:url(/fonts/web/geist-latin-ext.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:Geist;font-style:normal;font-weight:200 700;font-display:swap;src:url(/fonts/web/geist-latin.woff2) format("woff2");unicode-range:U+0000-00FF,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:Audiowide;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/web/audiowide-latin-ext.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:Audiowide;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/web/audiowide-latin.woff2) format("woff2");unicode-range:U+0000-00FF,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:EB Garamond;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/web/eb-garamond-latin-ext.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:EB Garamond;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/web/eb-garamond-latin.woff2) format("woff2");unicode-range:U+0000-00FF,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}:root{--color-bg-primary: #0f0f0f;--color-bg-secondary: #1a1a1a;--color-bg-tertiary: #252525;--color-bg-elevated: #2a2a2a;--color-text-primary: #e5e5e5;--color-text-secondary: #b0b0b0;--color-text-tertiary: #808080;--color-border-primary: #333333;--color-border-secondary: #404040;--color-accent-primary: #d66025;--color-accent-hover: #fb923c;--color-black: #0f0f0f;--color-white: #e5e5e5;--color-gray-50: #252525;--color-gray-100: #2a2a2a;--color-gray-200: #333333;--color-gray-500: #808080;--color-gray-600: #b0b0b0;--color-overlay: rgba(0, 0, 0, .7);--spacing-xs: 4px;--spacing-sm: 6px;--spacing-md: 8px;--spacing-lg: 12px;--spacing-xl: 16px;--spacing-2xl: 20px;--spacing-3xl: 24px;--spacing-4xl: 32px;--spacing-5xl: 48px;--spacing-6xl: 64px;--font-size-xs: 12px;--font-size-sm: 13px;--font-size-base: 14px;--font-size-md: 16px;--font-size-lg: 18px;--font-size-xl: 20px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--border-width-thin: 1px;--border-width-thick: 2px;--border-width-thickest: 3px;--z-index-dropdown: 100;--z-index-modal-overlay: 1000;--transition-fast: .2s;--transition-base: .3s;--song-list-bg: #14141400;--song-list-border-color: #232323;--song-card-hover-bg: #1e1e1ea5}:root{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji";color-scheme:dark;--exercise-font-title: "Geist", sans-serif;--exercise-font-serif: "EB Garamond", serif}.cool-modern-title{font-family:var(--exercise-font-serif, "EB Garamond", serif);font-weight:500;letter-spacing:-.02em;background:var( --cool-modern-title-background, linear-gradient(to bottom, #ffffff 30%, #a8a8a8 100%) );background-size:var(--cool-modern-title-background-size, 100% 1.3em);background-repeat:var(--cool-modern-title-background-repeat, repeat-y);background-position:var(--cool-modern-title-background-position, 0 0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1.3;padding-bottom:.2em}html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden;background-color:var(--color-bg-primary);color:var(--color-text-primary);-webkit-text-size-adjust:100%}body{min-height:100%;position:fixed;top:0;right:0;bottom:0;left:0}#root{min-height:100vh}html.ios-app-shell,html.ios-app-shell body,html.ios-app-shell #root{min-height:100dvh;background-color:var(--color-bg-primary)}@media(max-width:768px){*{-ms-overflow-style:none;scrollbar-width:none}*::-webkit-scrollbar{display:none}}