:root{--base: #111114;--base-1: #1a1a1f;--base-2: #222228;--base-3: #2e2e36;--border: #333340;--violet: #7F77DD;--violet-light: #CECBF6;--violet-deep: #534AB7;--violet-dim: rgba(127, 119, 221, .12);--violet-glow: rgba(127, 119, 221, .25);--text: #F0F0F5;--text-2: #9898aa;--text-3: #5e5e72;--spotify: #1DB954;--apple: #FC3C44;--youtube: #FF0000;--tidal: #00FFFF;--amazon: #00A8E1;--deezer: #A238FF;--soundcloud: #FF5500;--pandora: #3668FF;--font-ui: -apple-system, "Inter", sans-serif;--font-display: -apple-system, "Inter", sans-serif;--text-xs: 11px;--text-sm: 13px;--text-base: 15px;--text-md: 17px;--text-lg: 20px;--text-xl: 24px;--text-2xl: 30px;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--r-sm: 8px;--r-md: 12px;--r-lg: 16px;--r-xl: 20px;--r-pill: 100px;--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.16, 1, .3, 1);--dur-fast: .15s;--dur-base: .22s;--dur-slow: .38s}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--base);color:var(--text);font-family:var(--font-ui);font-size:var(--text-base);-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{display:flex;flex-direction:column;height:100dvh;max-width:430px;margin:0 auto;position:relative;overflow:hidden}.screen{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;padding-bottom:80px}.tab-bar{position:absolute;bottom:0;left:0;right:0;height:72px;background:#111114eb;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--border);display:flex;align-items:flex-start;padding-top:var(--sp-2);z-index:100}.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:var(--sp-2) 0;cursor:pointer;transition:opacity var(--dur-fast) var(--ease-out);-webkit-tap-highlight-color:transparent}.tab i{font-size:22px;color:var(--text-3);transition:color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-spring)}.tab span{font-size:var(--text-xs);font-weight:500;color:var(--text-3);letter-spacing:.01em;transition:color var(--dur-base) var(--ease-out)}.tab.active i{color:var(--violet);transform:scale(1.1)}.tab.active span{color:var(--violet)}.screen-header{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) var(--sp-5) var(--sp-4);position:sticky;top:0;background:#111114f2;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:50;border-bottom:1px solid transparent}.wordmark{font-size:var(--text-xl);font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,var(--violet-light),var(--violet));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}