:root{--color-bg: #0a0a12;--color-sky-top: #0a0a12;--color-sky-mid: #1a1a3e;--color-sky-low: #4a2c2a;--color-horizon: #8b4513;--color-glass: rgba(255, 255, 255, .08);--color-glass-border: rgba(255, 255, 255, .12);--color-text: #ffffff;--color-text-muted: rgba(255, 255, 255, .6);--color-accent: #ff6b35;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-phone: 44px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-size-xs: 11px;--font-size-sm: 13px;--font-size-md: 15px;--font-size-lg: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);--z-background: 0;--z-media: 10;--z-spotlight: 50;--z-lyrics: 60;--z-player: 70;--z-toast: 80;--z-notch: 90}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#0d0d15,#1a1a2e)}.year-header{position:absolute;top:60px;left:0;right:0;text-align:center;z-index:var(--z-lyrics);pointer-events:none}.year-title{font-size:48px;font-weight:700;letter-spacing:-1px;background:linear-gradient(90deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.3) 20%,var(--album-color, #ff6b35) 35%,rgba(255,255,255,.3) 50%,var(--album-color, #ff6b35) 65%,rgba(255,255,255,.3) 80%,rgba(255,255,255,.3) 100%);background-size:200% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0;line-height:1.1;animation:waveGradient 12s ease-in-out infinite}@keyframes waveGradient{0%{background-position:100% 0}50%{background-position:0% 0}to{background-position:100% 0}}.year-subtitle{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:4px;font-weight:500;letter-spacing:1px;text-transform:uppercase;opacity:.8}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--color-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1000;transition:opacity .5s ease,visibility .5s ease}.loading-overlay.hidden{opacity:0;visibility:hidden;pointer-events:none}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:var(--space-md)}.loading-text{font-size:var(--font-size-sm);color:var(--color-text-muted);letter-spacing:1px;text-transform:uppercase}@keyframes spin{to{transform:rotate(360deg)}}.phone-frame{position:relative;width:100%;max-width:390px;height:100%;max-height:min(844px,92vh);aspect-ratio:9 / 19.5;background:#000;border-radius:var(--radius-phone);box-shadow:0 0 0 3px #1a1a1a,0 0 0 6px #2a2a2a,0 25px 50px -12px #00000080,0 0 100px #0000004d;overflow:hidden;border:2px solid #333}.phone-content{position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--radius-phone) - 4px)}.floating-media{position:absolute;z-index:var(--z-media);border-radius:var(--radius-md);overflow:hidden;transition:transform var(--transition-slow),opacity var(--transition-slow),left .1s linear,top .1s linear;pointer-events:auto;cursor:pointer;box-shadow:0 4px 15px #0003}.floating-media:hover{z-index:calc(var(--z-media) + 5)}.floating-media.spotlight{z-index:var(--z-spotlight);box-shadow:0 0 40px var(--spotlight-color),0 0 80px #00000080;border:4px solid var(--spotlight-color);pointer-events:none}.floating-media.gesturing{transition:none!important}.phone-notch{position:absolute;top:8px;left:50%;transform:translate(-50%);width:120px;height:32px;background:#000;border-radius:20px;z-index:var(--z-notch);box-shadow:inset 0 0 6px #000c,0 2px 8px #0000004d}.phone-notch:before{content:"";position:absolute;top:50%;left:12px;transform:translateY(-50%);width:8px;height:8px;background:#1a1a1a;border-radius:50%;box-shadow:inset 0 0 2px #ffffff1a}.sky-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--z-background)}.media-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--z-media);pointer-events:auto;touch-action:none}@media(max-width:430px)and (max-height:932px){.phone-frame{max-width:100%;max-height:100%;border-radius:0;box-shadow:none;border:none}.phone-content{border-radius:0}.phone-notch{display:none}}@media(max-width:932px)and (orientation:landscape){.phone-frame:after{content:"Please rotate to portrait mode";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#000000e6;color:#fff;padding:var(--space-lg);border-radius:var(--radius-md);font-size:var(--font-size-md);z-index:1000;text-align:center}}.player-dock{position:absolute;bottom:0;left:0;right:0;z-index:var(--z-player);background:#0a0a12d9;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--color-glass-border);padding:var(--space-md);padding-bottom:calc(var(--space-md) + env(safe-area-inset-bottom,0px));transition:transform .3s ease}.player-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);position:relative;z-index:20}.player-toggle-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--color-glass);border:1px solid var(--color-glass-border);border-radius:50%;color:#fff;cursor:pointer;flex-shrink:0;transition:var(--transition-fast);z-index:25;pointer-events:auto}.player-toggle-btn:hover{background:#ffffff26}.toggle-caret{font-size:var(--font-size-md);transition:transform .3s ease}.player-expandable{overflow:hidden;max-height:400px;opacity:1;transition:max-height .4s cubic-bezier(.4,0,.2,1),opacity .3s ease,margin .3s ease;margin-top:var(--space-md)}.player-dock.minimized .player-expandable{max-height:0;opacity:0;margin-top:0}.player-dock.minimized .player-info{margin-bottom:0}.lyrics-panel.hidden{opacity:0;pointer-events:none;transform:translateY(20px)}.player-info{display:flex;align-items:center;gap:var(--space-md);flex:1;min-width:0}.player-cover{width:48px;height:48px;border-radius:var(--radius-sm);object-fit:cover;background:var(--color-glass);flex-shrink:0}.player-cover.placeholder{display:flex;align-items:center;justify-content:center;font-size:var(--font-size-xl)}.player-track-details{flex:1;min-width:0}.player-rank{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--color-accent);color:#fff;font-size:var(--font-size-xs);font-weight:700;border-radius:4px;margin-right:var(--space-xs);transition:background .4s ease}.player-title{font-size:var(--font-size-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-artist{font-size:var(--font-size-sm);color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-progress{margin-bottom:var(--space-md)}.progress-bar-container{position:relative;height:44px;display:flex;align-items:center;cursor:pointer;touch-action:none}.progress-bar-track{width:100%;height:4px;background:#fff3;border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--color-accent);border-radius:2px;transition:width .1s linear,background .4s ease}.progress-bar-thumb{position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 2px 8px #0000004d;transform:translate(-50%);pointer-events:none}.progress-times{display:flex;justify-content:space-between;margin-top:var(--space-xs);font-size:var(--font-size-xs);color:var(--color-text-muted)}.player-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.player-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:transparent;border:none;color:#fff;cursor:pointer;border-radius:50%;transition:var(--transition-fast);font-size:var(--font-size-lg)}.player-btn svg{width:24px;height:24px;display:block}.player-btn.primary svg{width:32px;height:32px}.player-btn:hover{background:var(--color-glass)}.player-btn:active{transform:scale(.95)}.player-btn.primary{width:56px;height:56px;background:var(--color-accent);font-size:var(--font-size-xl);transition:background .4s ease,transform .15s ease}.player-btn.primary:hover{filter:brightness(1.1)}.player-btn.skip{font-size:var(--font-size-xs);font-weight:600}.now-playing-toast{position:absolute;bottom:calc(100% + var(--space-md));left:var(--space-md);right:var(--space-md);display:flex;align-items:center;gap:var(--space-md);padding:var(--space-md);background:#14141ef2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--color-glass-border);border-radius:var(--radius-lg);transform:translateY(calc(100% + var(--space-xl)));opacity:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;z-index:var(--z-toast);pointer-events:none}.now-playing-toast.visible{transform:translateY(0);opacity:1;pointer-events:auto}.minimized-progress{position:absolute;top:0;left:0;right:0;height:3px;background:#ffffff1a;opacity:0;transition:opacity .3s ease;pointer-events:none}.player-dock.minimized .minimized-progress{opacity:1;transition-delay:.2s}.minimized-progress-fill{height:100%;background:var(--album-color, var(--color-accent));transition:width .1s linear,background .4s ease}.toast-cover{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--color-glass);flex-shrink:0;animation:spin-record 3s linear infinite;animation-play-state:paused}.now-playing-toast.visible .toast-cover{animation-play-state:running}@keyframes spin-record{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.toast-info{flex:1;min-width:0}.toast-rank{display:inline-flex;align-items:center;justify-content:center;padding:2px 8px;background:var(--color-accent);color:#fff;font-size:var(--font-size-xs);font-weight:700;border-radius:4px;margin-bottom:var(--space-xs);transition:background .4s ease}.toast-title{font-size:var(--font-size-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.toast-artist{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-xs)}.toast-thoughts{font-size:var(--font-size-sm);color:var(--color-text);font-style:italic;font-weight:500;line-height:1.4;opacity:.9}.visualizer-canvas{position:absolute;bottom:0;left:0;width:100%;height:100%;z-index:5;pointer-events:none}.lyrics-panel{position:absolute;bottom:220px;left:var(--space-md);right:var(--space-md);height:240px;z-index:var(--z-lyrics);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease,bottom .4s cubic-bezier(.2,.8,.2,1);mask-image:linear-gradient(180deg,transparent 0%,black 20%,black 80%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,black 20%,black 80%,transparent 100%)}.lyrics-panel.minimized-view{bottom:80px;opacity:1;transform:translateY(0)}.lyric-line{text-align:center;font-size:17px;font-weight:500;color:var(--color-text-muted);transition:all .4s cubic-bezier(.4,0,.2,1);white-space:normal;line-height:1.5;max-width:100%;padding:4px var(--space-sm);opacity:.5;transform:scale(.92) translateY(0)}.lyric-line.active{font-size:22px;font-weight:700;color:#fff;text-shadow:0 0 25px rgba(255,107,53,.6);opacity:1;transform:scale(1) translateY(0);animation:lyricPop .4s cubic-bezier(.34,1.56,.64,1)}@keyframes lyricPop{0%{transform:scale(.85) translateY(10px);opacity:.3}50%{transform:scale(1.05) translateY(-2px)}to{transform:scale(1) translateY(0);opacity:1}}.lyric-line.no-lyrics{font-style:italic;font-size:var(--font-size-sm)}.floating-media{position:absolute;border-radius:var(--radius-md);overflow:hidden;transition:opacity .4s ease,transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease;will-change:transform}.floating-media img,.floating-media video{width:100%;height:100%;object-fit:cover;display:block}.floating-media.spotlight{z-index:var(--z-spotlight)!important;opacity:1!important;box-shadow:0 0 0 4px var(--spotlight-color, var(--color-accent)),0 25px 50px #00000080,0 0 60px #ff6b354d}@media(prefers-reduced-motion:reduce){.toast-cover{animation:none}.floating-media{transition:opacity .15s ease}.now-playing-toast{transition:opacity .15s ease;transform:translateY(0)}}