@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Sora:wght@400;600;700&display=swap";:root{color-scheme:dark;font-family:Space Grotesk,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 12% 20%,#173426,#0c0f10 42%,#090909);min-height:100vh;color:#eff5f1}.app{--track-accent: #1ed760;min-height:100vh;display:grid;place-items:center;position:relative;padding:2rem;overflow:hidden}.loader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-content:center;gap:1rem;text-align:center;background:radial-gradient(circle at 50% 30%,#132a1f,#090909 68%)}.loader-stage{width:220px;height:180px;margin:0 auto;position:relative;perspective:900px;transform-style:preserve-3d}.loader-orbit{position:absolute;top:30px;right:30px;bottom:30px;left:30px;border-radius:50%;border:1px solid rgba(255,255,255,.25)}.orbit-1{transform:rotateX(70deg) rotateY(15deg) translateZ(10px);border-color:#1ed760a6;animation:depth-pulse 1.8s ease-in-out infinite}.orbit-2{transform:rotateX(-50deg) rotateY(20deg) translateZ(14px);border-color:#ffffff73;animation:depth-pulse 1.8s ease-in-out infinite .25s}.orbit-3{transform:rotateX(30deg) rotateY(-35deg) translateZ(6px);border-color:#5fffb473;animation:depth-pulse 1.8s ease-in-out infinite .45s}.loader-bars{position:absolute;left:50%;bottom:36px;transform:translate(-50%) rotateX(20deg) translateZ(24px);display:flex;gap:7px;align-items:end}.loader-bars span{width:12px;height:34px;border-radius:3px;background:linear-gradient(to top,#1b8c45,#96ffc3);box-shadow:0 8px 20px #1ed76033;animation:bar-beat .95s ease-in-out infinite}.loader-bars span:nth-child(2){animation-delay:.1s}.loader-bars span:nth-child(3){animation-delay:.2s}.loader-bars span:nth-child(4){animation-delay:.3s}.loader-bars span:nth-child(5){animation-delay:.4s}.loader-title{margin:0;font-family:Sora,sans-serif;font-size:clamp(2.2rem,10vw,4.6rem);letter-spacing:.08em}.loader-sub{margin:0;color:#eff5f1cc}@keyframes depth-pulse{0%,to{opacity:.45}50%{opacity:1}}@keyframes bar-beat{0%,to{transform:translateZ(0) scaleY(.6)}50%{transform:translateZ(20px) scaleY(1.3)}}.noise-layer{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;background:radial-gradient(circle at 80% 10%,color-mix(in oklab,var(--track-accent) 35%,transparent) 0%,transparent 44%),radial-gradient(circle at 15% 90%,rgba(255,255,255,.08) 0%,transparent 38%);filter:blur(26px);pointer-events:none}.player-shell{width:min(1100px,100%);position:relative;z-index:1;border:1px solid rgba(255,255,255,.12);background:linear-gradient(140deg,#1f2423e0,#0a0c0cf2);border-radius:28px;padding:1.5rem;box-shadow:0 36px 80px #00000080;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}.brand{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:.08em}.sub{margin:0;color:#eff5f1bf;font-size:.88rem}.player-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:1.2rem}.cover-card{border-radius:22px;background:linear-gradient(155deg,#151d19d9,#08090aeb);border:1px solid rgba(255,255,255,.12);padding:1.7rem;min-height:390px;position:relative;overflow:hidden;transform-style:preserve-3d;transition:transform .18s ease-out}.cover-photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.35}.cover-content{position:relative;z-index:2;width:min(78%,480px);transform:translateZ(30px)}.chip{display:inline-block;font-family:Sora,sans-serif;font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:#131513;background:var(--track-accent);padding:.45rem .66rem;border-radius:999px;margin-bottom:1.1rem}.cover-content h1{margin:0;font-size:clamp(2rem,5vw,4rem);line-height:.95;letter-spacing:-.02em}.cover-content p{margin:.9rem 0 0;color:#eff5f1cc}.meta-row{margin-top:1.1rem;display:flex;gap:.75rem}.meta-row span{border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.35rem .75rem;font-size:.82rem;color:#eff5f1db}.artist-card{margin-top:1.2rem;display:inline-flex;align-items:center;gap:.7rem;padding:.55rem .75rem;border-radius:14px;background:#0006;border:1px solid rgba(255,255,255,.14)}.artist-profile{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid color-mix(in oklab,var(--track-accent) 70%,#fff 30%)}.artist-card strong,.artist-card small{display:block}.artist-card small{color:#eff5f1bd;font-size:.78rem}.queue{border-radius:22px;background:#0e1110db;border:1px solid rgba(255,255,255,.1);padding:1rem;display:flex;flex-direction:column;min-height:390px}.queue-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.8rem}.queue-head h2{margin:0;font-size:1.08rem}.queue-head span{color:#eff5f1a6;font-size:.82rem}.queue-list{display:flex;flex-direction:column;gap:.5rem;overflow:auto;padding-right:.25rem}.queue-item{border:1px solid rgba(255,255,255,.08);background:#ffffff05;color:inherit;border-radius:14px;padding:.72rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.75rem;text-align:left;cursor:pointer}.queue-item:hover{border-color:color-mix(in oklab,var(--track-accent) 62%,#ffffff 38%);background:#ffffff0d}.queue-number{opacity:.55;font-size:.8rem}.queue-track{display:flex;flex-direction:column;gap:.15rem}.queue-track strong{font-size:.92rem}.queue-track small{opacity:.72}.queue-duration{font-size:.82rem;opacity:.75}.controls{margin-top:1.2rem;display:flex;gap:.7rem;justify-content:center}.icon-btn,.play-btn{border:1px solid rgba(255,255,255,.16);background:#ffffff0f;color:inherit;border-radius:999px;height:44px;cursor:pointer;font-family:inherit}.icon-btn{width:44px;font-size:1.1rem}.play-btn{min-width:180px;font-size:.95rem;font-weight:600;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;background:color-mix(in oklab,var(--track-accent) 70%,#0d110f 30%);color:#0f120f;border-color:transparent}.social-links{margin-top:1rem;display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem}.social-links a{border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.4rem .7rem;color:#eff5f1db;text-decoration:none;font-size:.78rem;display:inline-flex;gap:.35rem;align-items:center}@media(max-width:920px){.app{padding:1rem}.player-grid{grid-template-columns:1fr}.cover-card,.queue{min-height:auto}.cover-content{width:100%}}