:root{--black:#000;--white:#fff;--gray-50:#fafafa;--gray-100:#f5f5f5;--gray-200:#e5e5e5;--gray-300:#d4d4d4;--gray-400:#a3a3a3;--gray-500:#737373;--gray-600:#525252;--gray-700:#404040;--gray-800:#262626;--gray-850:#1a1a1a;--gray-900:#171717;--gray-950:#0a0a0a;--brand-primary:#00b4d8;--brand-secondary:#b5179e;--brand-cta:#ff6b35;--density-scale:1;--base-font-size:clamp(15px,0.9rem + 0.5vw,18px);--accent:var(--brand-primary);--accent-hover:color-mix(in srgb,var(--accent) 82%,#fff);--accent-muted:color-mix(in srgb,var(--accent) 65%,#000);--accent-contrast:#fff;--secondary:var(--brand-secondary);--secondary-hover:color-mix(in srgb,var(--secondary) 82%,#fff);--secondary-muted:color-mix(in srgb,var(--secondary) 60%,#000);--secondary-contrast:#fff;--cta:var(--brand-cta);--cta-hover:color-mix(in srgb,var(--cta) 82%,#fff);--cta-contrast:#fff;--brand-gradient:linear-gradient(135deg,var(--accent) 0%,var(--secondary) 100%);--brand-gradient-soft:linear-gradient(135deg,color-mix(in srgb,var(--accent) 35%,transparent),color-mix(in srgb,var(--secondary) 35%,transparent));--brand-gradient-strong:linear-gradient(135deg,color-mix(in srgb,var(--accent) 60%,transparent),color-mix(in srgb,var(--secondary) 60%,transparent));--brand-highlight:linear-gradient(120deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--secondary) 24%,transparent));--brand-overlay-soft:radial-gradient(circle at 35% 20%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);--brand-overlay-secondary:radial-gradient(circle at 70% 40%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 72%);--brand-overlay-cta:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--cta) 18%,transparent),transparent 68%);--brand-border:color-mix(in srgb,var(--accent) 42%,transparent);--brand-border-strong:color-mix(in srgb,var(--secondary) 52%,transparent);--brand-ring:color-mix(in srgb,var(--secondary) 58%,transparent);--brand-shadow-soft:0 12px 32px color-mix(in srgb,var(--accent) 20%,transparent);--brand-shadow-strong:0 18px 48px color-mix(in srgb,color-mix(in srgb,var(--accent) 55%,var(--secondary) 45%) 26%,transparent);--brand-shadow-secondary:0 18px 44px color-mix(in srgb,var(--secondary) 24%,transparent);--brand-shadow-cta:0 18px 44px color-mix(in srgb,var(--cta) 22%,transparent);--brand-shadow-hover:0 24px 56px color-mix(in srgb,color-mix(in srgb,var(--accent) 52%,var(--secondary) 48%) 26%,transparent);--brand-shadow-hover-secondary:0 24px 56px color-mix(in srgb,var(--secondary) 30%,transparent);--brand-primary-50:color-mix(in srgb,var(--accent) 12%,#fff);--brand-primary-100:color-mix(in srgb,var(--accent) 18%,#fff);--brand-primary-200:color-mix(in srgb,var(--accent) 26%,#fff);--brand-primary-300:color-mix(in srgb,var(--accent) 36%,#fff);--brand-primary-400:color-mix(in srgb,var(--accent) 48%,#fff);--brand-primary-500:var(--accent);--brand-primary-600:color-mix(in srgb,var(--accent) 82%,#000);--brand-primary-700:color-mix(in srgb,var(--accent) 72%,#000);--brand-primary-800:color-mix(in srgb,var(--accent) 62%,#000);--brand-primary-900:color-mix(in srgb,var(--accent) 52%,#000);--brand-primary-950:color-mix(in srgb,var(--accent) 44%,#000);--brand-secondary-50:color-mix(in srgb,var(--secondary) 12%,#fff);--brand-secondary-100:color-mix(in srgb,var(--secondary) 18%,#fff);--brand-secondary-200:color-mix(in srgb,var(--secondary) 26%,#fff);--brand-secondary-300:color-mix(in srgb,var(--secondary) 36%,#fff);--brand-secondary-400:color-mix(in srgb,var(--secondary) 48%,#fff);--brand-secondary-500:var(--secondary);--brand-secondary-600:color-mix(in srgb,var(--secondary) 82%,#000);--brand-secondary-700:color-mix(in srgb,var(--secondary) 72%,#000);--brand-secondary-800:color-mix(in srgb,var(--secondary) 62%,#000);--brand-secondary-900:color-mix(in srgb,var(--secondary) 52%,#000);--brand-secondary-950:color-mix(in srgb,var(--secondary) 44%,#000);--brand-cta-50:color-mix(in srgb,var(--cta) 12%,#fff);--brand-cta-100:color-mix(in srgb,var(--cta) 18%,#fff);--brand-cta-200:color-mix(in srgb,var(--cta) 26%,#fff);--brand-cta-300:color-mix(in srgb,var(--cta) 36%,#fff);--brand-cta-400:color-mix(in srgb,var(--cta) 48%,#fff);--brand-cta-500:var(--cta);--brand-cta-600:color-mix(in srgb,var(--cta) 82%,#000);--brand-cta-700:color-mix(in srgb,var(--cta) 72%,#000);--brand-cta-800:color-mix(in srgb,var(--cta) 62%,#000);--brand-cta-900:color-mix(in srgb,var(--cta) 52%,#000);--brand-cta-950:color-mix(in srgb,var(--cta) 44%,#000);--type-music:var(--accent);--type-podcast:color-mix(in srgb,var(--secondary) 70%,var(--accent) 30%);--type-screen:color-mix(in srgb,var(--accent) 70%,#fff 30%);--type-book:color-mix(in srgb,var(--secondary) 65%,#fff 35%);--type-default:var(--secondary);--success:#22c55e;--warning:#ffa620;--danger:#d92d20;--surface-page:#0e0f1a;--surface-page-rgb:14 15 26;--surface-page-gradient:radial-gradient(circle at 20% -10%,rgba(0,180,216,.2),transparent 55%),radial-gradient(circle at 85% 0%,rgba(181,23,158,.18),transparent 65%),#0e0f1a;--surface-card:#121427;--surface-card-rgb:18 20 39;--surface-raised:#181a31;--surface-raised-rgb:24 26 49;--surface-subtle:rgba(247,250,255,.04);--surface-overlay:rgba(11,13,25,.72);--surface-overlay-rgb:11 13 25;--surface-border:rgba(247,250,255,.08);--surface-border-strong:rgba(247,250,255,.16);--surface-border-rgb:247 250 255;--surface:var(--surface-card);--border:var(--surface-border);--border-strong:var(--surface-border-strong);--font-family-sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif;--font-size-base:calc(clamp(0.94rem, 0.85rem + 0.4vw, 1.05rem) * var(--density-scale));--font-size-sm:calc(clamp(0.82rem, 0.76rem + 0.3vw, 0.95rem) * var(--density-scale));--font-size-lg:calc(clamp(1.1rem, 0.95rem + 0.8vw, 1.45rem) * var(--density-scale));--font-size-xl:calc(clamp(1.6rem, 1.2rem + 1.8vw, 2.8rem) * var(--density-scale));--font-size-display:calc(clamp(2.4rem, 1.8rem + 3vw, 3.8rem) * var(--density-scale));--text-primary:#f7faff;--text-secondary:#e2e8f0;--text-tertiary:color-mix(in srgb,var(--text-secondary) 55%,transparent);--line-height-tight:1.1;--line-height-snug:1.25;--line-height-relaxed:1.6;--tappable-min-size:44px;--bp-mobile:768px;--bp-tablet:1024px;--bp-desktop:1280px;--space-1:calc(0.25rem * var(--density-scale));--space-2:calc(0.5rem * var(--density-scale));--space-3:calc(0.75rem * var(--density-scale));--space-4:calc(1rem * var(--density-scale));--space-6:calc(1.5rem * var(--density-scale));--space-8:calc(2rem * var(--density-scale));--space-10:calc(2.5rem * var(--density-scale));--space-12:calc(3rem * var(--density-scale));--radius-xs:calc(0.375rem * var(--density-scale));--radius-sm:calc(0.5rem * var(--density-scale));--radius-md:calc(0.75rem * var(--density-scale));--radius-lg:calc(1rem * var(--density-scale));--radius-xl:calc(1.25rem * var(--density-scale));--radius-2xl:calc(1.5rem * var(--density-scale));--radius-full:9999px;--shadow-0:none;--shadow-1:0 8px 20px rgba(8,10,20,.28);--shadow-2:0 12px 32px rgba(8,10,20,.34);--shadow-3:0 18px 40px rgba(8,10,20,.42);--shadow-4:0 24px 60px rgba(8,10,20,.5)}*,:after,:before{margin:0;padding:0;box-sizing:border-box}html{font-size:calc(var(--base-font-size) * var(--density-scale));scroll-behavior:smooth}html.density-compact{--density-scale:0.92}body{font-family:var(--font-family-sans);background:var(--surface-page-gradient);color:var(--text-primary);line-height:var(--line-height-relaxed);-webkit-font-smoothing:antialiased;font-size:var(--font-size-base);min-height:100vh}html.rm-reduce *,html.rm-reduce :after,html.rm-reduce :before{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}html:not(.dark){--surface-page:#f7faff;--surface-page-rgb:247 250 255;--surface-page-gradient:radial-gradient(circle at 20% -10%,rgba(0,180,216,.12),transparent 55%),radial-gradient(circle at 80% 0%,rgba(181,23,158,.12),transparent 60%),#f7faff;--surface-card:#fff;--surface-card-rgb:255 255 255;--surface-raised:#e6ecf5;--surface-raised-rgb:230 236 245;--surface-subtle:rgba(14,15,26,.08);--surface-overlay:hsla(0,0%,100%,.9);--surface-overlay-rgb:255 255 255;--surface-border:rgba(14,15,26,.12);--surface-border-strong:rgba(14,15,26,.2);--surface-border-rgb:14 15 26;--text-primary:#0e0f1a;--text-secondary:color-mix(in srgb,#0e0f1a 72%,transparent);--text-tertiary:color-mix(in srgb,#0e0f1a 55%,transparent);--brand-shadow-soft:0 12px 32px rgba(14,15,26,.12);--brand-shadow-strong:0 18px 48px rgba(0,180,216,.16);--brand-shadow-secondary:0 18px 44px rgba(181,23,158,.18);--brand-shadow-hover:0 24px 56px rgba(14,15,26,.18);--brand-shadow-hover-secondary:0 24px 56px color-mix(in srgb,var(--secondary) 24%,transparent);--brand-overlay-soft:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%);--brand-overlay-secondary:radial-gradient(circle at 70% 40%,color-mix(in srgb,var(--secondary) 20%,transparent),transparent 72%)}h1,h2,h3{font-weight:600;line-height:var(--line-height-tight);letter-spacing:-.015em;color:var(--text-primary)}h1{font-size:var(--font-size-xl)}h2{font-size:clamp(1.4rem,1.05rem + 1.2vw,2.2rem)}h3{font-size:clamp(1.2rem,1rem + .6vw,1.6rem)}button,input,label,p,select,small,textarea{font-size:var(--font-size-base)}small{font-size:var(--font-size-sm)}.create-btn,.credits-btn,.landing-btn-primary,.landing-btn-secondary,.landing-playlist-preview,.mobile-nav-item,.nav-link,button,input[type=button],input[type=submit]{min-height:var(--tappable-min-size)}::-moz-selection{background:rgba(79,70,229,.35);color:var(--white)}::selection{background:rgba(79,70,229,.35);color:var(--white)}@media (max-width:768px){body{text-rendering:optimizeLegibility}.create-btn,.credits-btn,.nav-link{font-size:var(--font-size-sm)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.skip-link{position:absolute;top:-40px;left:16px;padding:.5rem 1rem;background:var(--white);color:var(--black);border-radius:var(--radius-sm);box-shadow:0 6px 18px rgba(0,0,0,.2);font-weight:600;z-index:1000;transition:top .2s ease}.skip-link:focus{top:16px}.surface-card{background:var(--surface-card);box-shadow:var(--shadow-1)}.surface-card,.surface-raised{border:1px solid var(--surface-border);border-radius:var(--radius-xl)}.surface-raised{background:var(--surface-raised);box-shadow:var(--shadow-2)}.surface-subtle{background:var(--surface-subtle);border:1px solid var(--surface-border);border-radius:var(--radius-xl)}.backdrop-sheet{background:var(--surface-overlay);border:1px solid var(--surface-border-strong);border-radius:var(--radius-xl);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.glass-panel{background:hsla(0,0%,100%,.04);border:1px solid hsla(0,0%,100%,.08);border-radius:var(--radius-2xl);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-2)}.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:var(--radius-full);border:1px solid hsla(0,0%,100%,.16);background:hsla(0,0%,100%,.08);color:var(--text-secondary);font-size:.75rem;font-weight:500;letter-spacing:.02em}.chip.is-strong{background:hsla(0,0%,100%,.12);color:var(--white)}.card-interactive{position:relative;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.card-interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-3);border-color:hsla(0,0%,100%,.16)}.card-interactive:focus-visible{outline:none;box-shadow:var(--shadow-3),0 0 0 2px rgba(129,140,248,.45)}.skeleton{position:relative;overflow:hidden;background:rgba(241,245,249,.06)}.skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.18),transparent);animation:skeleton-shimmer 1.6s ease-in-out infinite}.badge-soft{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .5rem;border-radius:var(--radius-full);background:hsla(0,0%,100%,.08);border:1px solid hsla(0,0%,100%,.12);font-size:.75rem;letter-spacing:.02em;text-transform:uppercase}.focus-ring{position:relative}.focus-ring:focus-visible{outline:2px solid rgba(129,140,248,.55);outline-offset:3px}.radius-xs{border-radius:var(--radius-xs)}.radius-sm{border-radius:var(--radius-sm)}.radius-md{border-radius:var(--radius-md)}.radius-lg{border-radius:var(--radius-lg)}.radius-xl{border-radius:var(--radius-xl)}.radius-2xl{border-radius:var(--radius-2xl)}.radius-full{border-radius:var(--radius-full)}.bg-surface-page{background-color:var(--surface-page)}.bg-surface-card{background-color:var(--surface-card)}.bg-surface-raised{background-color:var(--surface-raised)}.bg-surface-overlay{background-color:var(--surface-overlay)}.bg-surface-gradient{background:var(--surface-page-gradient)}.border-surface{border-color:var(--surface-border)}.border-surface-strong{border-color:var(--surface-border-strong)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.elevation-0{box-shadow:var(--shadow-0)}.elevation-1{box-shadow:var(--shadow-1)}.elevation-2{box-shadow:var(--shadow-2)}.elevation-3{box-shadow:var(--shadow-3)}.elevation-4{box-shadow:var(--shadow-4)}.grid-gap-sm{gap:var(--space-3)}.grid-gap-md{gap:var(--space-4)}.grid-gap-lg{gap:var(--space-6)}.shadow-border{box-shadow:inset 0 0 0 1px hsla(0,0%,100%,.08)}@media (prefers-reduced-motion:reduce){.card-interactive,.card-interactive:hover{transform:none;transition:none}.skeleton:after{animation-duration:.001ms!important}}@keyframes skeleton-shimmer{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}