@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeInRotate{0%{opacity:0;transform:scale(.8) rotateY(15deg)}to{opacity:1;transform:scale(1) rotateY(0deg)}}.animate-hero-greeting{animation:fadeInUp .6s ease-out .1s both}.animate-hero-card{animation:fadeInScale .7s ease-out .3s both}.animate-hero-track-info{animation:fadeInUp .6s ease-out .5s both}.animate-hero-metadata{animation:fadeInUp .6s ease-out .7s both}.animate-hero-actions{animation:fadeInUp .6s ease-out .8s both}.animate-hero-album-art{animation:fadeInRotate .8s ease-out .9s both}.hero-button{transition:transform .2s ease-out,background-color .2s ease-out,border-color .2s ease-out}.hero-button:hover{transform:scale(1.05)}.hero-button:active{transform:scale(.95)}.hero-album-art{transition:transform .4s ease-out}.hero-album-art:hover{transform:translateY(-4px) scale(1.02)}.hero-card-shadow{--hero-color:#8b5cf6;box-shadow:0 0 60px color-mix(in srgb,var(--hero-color) 15%,transparent),0 0 120px color-mix(in srgb,var(--hero-color) 6%,transparent)}.hero-bg-blur-layer-1{scale:1.25;filter:blur(48px);opacity:.25}.hero-bg-blur-layer-1,.hero-bg-blur-layer-2{--hero-bg-image:none;position:absolute;inset:0;background-image:var(--hero-bg-image);background-size:cover;background-position:50%;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.hero-bg-blur-layer-2{scale:1.1;filter:blur(16px);opacity:.15}.hero-gradient-background{--hero-color:#8b5cf6;position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,color-mix(in srgb,var(--hero-color) 12%,transparent) 0,color-mix(in srgb,var(--hero-color) 5%,transparent) 50%,transparent 80%),linear-gradient(135deg,color-mix(in srgb,var(--hero-color) 7%,transparent) 0,color-mix(in srgb,var(--hero-color) 4%,transparent) 40%,transparent 70%),linear-gradient(45deg,#000000 0,color-mix(in srgb,var(--hero-color) 2%,transparent) 100%)}.text-shadow-hero-title{text-shadow:0 4px 24px rgba(0,0,0,.8),0 2px 12px rgba(0,0,0,.6)}.text-shadow-hero-artist{text-shadow:0 4px 20px rgba(0,0,0,.8),0 2px 10px rgba(0,0,0,.6)}.text-shadow-hero-album{text-shadow:0 2px 12px rgba(0,0,0,.7)}.text-shadow-hero-metadata{text-shadow:0 2px 6px rgba(0,0,0,.6)}.shadow-album-art-dynamic{--hero-color:#8b5cf6;box-shadow:0 20px 40px rgba(0,0,0,.4),0 10px 20px rgba(0,0,0,.3),0 8px 24px -4px color-mix(in srgb,var(--hero-color) 25%,transparent),0 0 40px color-mix(in srgb,var(--hero-color) 12%,transparent);filter:saturate(1.1) contrast(1.05);image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.album-glow-overlay{--hero-color:#8b5cf6;position:absolute;inset:0;border-radius:1rem;opacity:0;transition:opacity .5s ease-out;background:radial-gradient(circle at center,color-mix(in srgb,var(--hero-color) 18%,transparent) 0,transparent 70%);filter:blur(8px)}.group:hover .album-glow-overlay{opacity:.3}.album-reflection{--hero-color:#8b5cf6;--hero-bg-image:none;bottom:-20rem;left:0;width:24rem;height:20rem;border-radius:1rem;opacity:.15;filter:blur(4px);background:linear-gradient(to bottom,transparent 0,color-mix(in srgb,var(--hero-color) 6%,transparent) 20%,color-mix(in srgb,var(--hero-color) 3%,transparent) 100%),var(--hero-bg-image);background-size:cover;background-position:50%;transform:scaleY(-.7) skewX(-2deg);mask-image:linear-gradient(180deg,transparent 0,black 40%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent 0,black 40%,transparent)}.album-reflection,.ambient-light{position:absolute;pointer-events:none}.ambient-light{--hero-color:#8b5cf6;inset:-3rem;border-radius:9999px;opacity:.2;filter:blur(48px);background:radial-gradient(circle,color-mix(in srgb,var(--hero-color) 18%,transparent) 0,transparent 70%)}.fallback-album-gradient{--hero-color:#8b5cf6;background:linear-gradient(135deg,var(--hero-color) 0,color-mix(in srgb,var(--hero-color) 80%,transparent) 50%,color-mix(in srgb,var(--hero-color) 40%,transparent) 100%);box-shadow:0 32px 64px -16px rgba(0,0,0,.6),0 16px 40px -8px rgba(0,0,0,.4),0 8px 24px -4px color-mix(in srgb,var(--hero-color) 25%,transparent),0 0 40px color-mix(in srgb,var(--hero-color) 12%,transparent)}.track-indicator-pill{height:6px;border-radius:9999px;transition:all .3s ease-out;background-color:rgba(255,255,255,.4)}.track-indicator-pill.active{width:24px;background-color:white}.track-indicator-pill:not(.active){width:6px}.track-indicator-pill:not(.active):hover{background-color:rgba(255,255,255,.6)}.animation-delay-50{animation-delay:50ms}.animation-delay-100{animation-delay:.1s}.animation-delay-200{animation-delay:.2s}@keyframes fade-in-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in-up{animation:fade-in-up .4s ease-out forwards}.hero-card-content{transition:opacity .3s ease-out,transform .3s ease-out;will-change:opacity,transform}.hero-card-enter{opacity:1;transform:scale(1)}.hero-card-exit{opacity:0;transform:scale(.95)}@media (prefers-reduced-motion:reduce){.animate-fade-in-up,.animate-hero-actions,.animate-hero-album-art,.animate-hero-card,.animate-hero-greeting,.animate-hero-metadata,.animate-hero-track-info{animation:none;opacity:1;transform:none}.hero-album-art:hover,.hero-button:active,.hero-button:hover{transform:none}.hero-card-content{transition:none}.hero-card-exit{opacity:1;transform:none}}.fluid-text-xs{font-size:clamp(.75rem,.7rem + .25vw,.875rem)}.fluid-text-sm{font-size:clamp(.875rem,.8rem + .375vw,1rem)}.fluid-text-base{font-size:clamp(1rem,.9rem + .5vw,1.125rem)}.fluid-text-lg{font-size:clamp(1.125rem,1rem + .625vw,1.25rem)}.fluid-text-xl{font-size:clamp(1.25rem,1.1rem + .75vw,1.5rem)}.fluid-text-2xl{font-size:clamp(1.5rem,1.3rem + 1vw,2rem)}.fluid-text-3xl{font-size:clamp(1.875rem,1.6rem + 1.375vw,2.5rem)}.fluid-text-4xl{font-size:clamp(2.25rem,1.9rem + 1.75vw,3rem)}.fluid-text-5xl{font-size:clamp(3rem,2.5rem + 2.5vw,4rem)}.space-fluid-xs{--space:clamp(0.25rem,0.2rem + 0.25vw,0.375rem)}.space-fluid-sm{--space:clamp(0.5rem,0.4rem + 0.5vw,0.75rem)}.space-fluid-md{--space:clamp(1rem,0.8rem + 1vw,1.5rem)}.space-fluid-lg{--space:clamp(1.5rem,1.2rem + 1.5vw,2.25rem)}.space-fluid-xl{--space:clamp(2rem,1.6rem + 2vw,3rem)}.space-fluid-2xl{--space:clamp(3rem,2.4rem + 3vw,4.5rem)}.p-fluid-2xl,.p-fluid-lg,.p-fluid-md,.p-fluid-sm,.p-fluid-xl,.p-fluid-xs{padding:var(--space)}.m-fluid-2xl,.m-fluid-lg,.m-fluid-md,.m-fluid-sm,.m-fluid-xl,.m-fluid-xs{margin:var(--space)}.touch-target{min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center}.touch-target-lg{min-height:56px;min-width:56px}.touch-target-xl{min-height:64px;min-width:64px}.touch-button-group{display:flex;gap:8px}.touch-button-group>*{flex:1;min-height:48px}.touch-feedback{position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation}.touch-feedback:before{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,.2);border-radius:50%;transform:translate(-50%,-50%);transition:width .3s ease,height .3s ease;pointer-events:none}.touch-feedback:active:before{width:200px;height:200px}.swipe-container{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}.swipe-container::-webkit-scrollbar{display:none}.swipe-item{flex-shrink:0;scroll-snap-align:start;scroll-snap-stop:always}.pull-to-refresh{position:relative;overflow:hidden}.pull-to-refresh-indicator{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#06b6d4);display:flex;align-items:center;justify-content:center;color:white;transition:transform .3s ease}.pull-to-refresh.pulling .pull-to-refresh-indicator{transform:translateX(-50%) translateY(80px)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.border-hairline{border-width:.5px}.shadow-hdpi{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}}@media (max-width:640px){[role=button],button,input[type=button]{min-height:48px;padding:12px 16px}input,select,textarea{font-size:16px;padding:12px 16px;border-radius:8px}.container{padding-left:16px;padding-right:16px}.mobile-stack{flex-direction:column;gap:16px}.mobile-hidden{display:none}.mobile-full-width{width:100%}.card{padding:16px;margin:8px 0}.mobile-nav{position:fixed;bottom:0;left:0;right:0;background:rgba(0,0,0,.95);backdrop-filter:blur(20px);border-top:1px solid rgba(255,255,255,.1);padding:8px 0 calc(8px + env(safe-area-inset-bottom))}}@media (min-width:641px) and (max-width:1024px){.tablet-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.tablet-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.tablet-sidebar{width:280px;transition:transform .3s ease}.tablet-touch-target{min-height:52px;padding:12px 20px}.container{padding-left:24px;padding-right:24px}}@media (min-width:1025px){.desktop-hover{transition:all .3s ease}.desktop-hover:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.15)}.desktop-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.desktop-grid-5{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}.desktop-sidebar{width:320px;position:sticky;top:0;height:100vh}}.safe-area-padding{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.safe-area-margin{margin:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.bottom-nav-safe{padding-bottom:calc(16px + env(safe-area-inset-bottom))}.header-safe{padding-top:calc(16px + env(safe-area-inset-top))}@media (orientation:portrait){.portrait-stack{flex-direction:column}.portrait-full-height{height:100vh;height:100dvh}}@media (orientation:landscape){.landscape-row{flex-direction:row}.landscape-compact{padding:8px 16px}.landscape-header{height:48px}}@media (hover:none){:focus{outline:3px solid #8b5cf6;outline-offset:2px}}@media (prefers-reduced-motion:reduce){.touch-feedback:before{transition:none}.swipe-container{scroll-behavior:auto}}@media (prefers-contrast:high){.touch-feedback:before{background:rgba(255,255,255,.5)}[role=button],button{border:2px solid}}.gpu-accelerated{transform:translateZ(0);will-change:transform;backface-visibility:hidden;perspective:1000px}.optimized-list{contain:layout style paint;will-change:scroll-position}.responsive-image{width:100%;height:auto;object-fit:cover;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}.mobile-only{display:block}.desktop-only,.tablet-only{display:none}@media (min-width:641px) and (max-width:1024px){.mobile-only{display:none}.tablet-only{display:block}}@media (min-width:1025px){.mobile-only,.tablet-only{display:none}.desktop-only{display:block}}.text-center-mobile{text-align:center}@media (min-width:641px){.text-center-mobile{text-align:left}}.flex-col-mobile{flex-direction:column}@media (min-width:641px){.flex-col-mobile{flex-direction:row}}