:root{--bg:#090b0e;--panel:#111419;--panel2:#181c22;--text:#f4f7fb;--muted:#969da8;--line:#272c34;--accent:#82f5a7;--accent2:#25c769;--player:92px;--side:238px}*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark}body{margin:0;background:radial-gradient(circle at 73% 8%,#173927 0,transparent 32rem),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}button,input{font:inherit}.app-shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:calc(100vh - var(--player));padding-bottom:var(--player)}.sidebar{position:fixed;inset:0 auto var(--player) 0;width:var(--side);padding:24px 16px;border-right:1px solid var(--line);background:rgba(10,12,15,.82);backdrop-filter:blur(24px);z-index:10}.brand{display:flex;align-items:center;gap:12px;margin:0 10px 32px;color:#fff;text-decoration:none;font-size:20px;font-weight:800;letter-spacing:-.5px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:linear-gradient(145deg,var(--accent),var(--accent2));color:#07140b;font-size:21px;box-shadow:0 10px 30px #25c76936}.sidebar nav{display:grid;gap:6px}.nav-item{display:flex;gap:14px;align-items:center;width:100%;border:0;border-radius:12px;padding:12px 14px;color:var(--muted);background:transparent;cursor:pointer;text-align:left;font-weight:650}.nav-item span{font-size:22px;width:24px}.nav-item:hover,.nav-item.active{color:#fff;background:#ffffff0d}.nav-item.active span{color:var(--accent)}.sidebar-note{position:absolute;bottom:24px;left:26px;right:26px;color:#6f7680;font-size:12px;line-height:1.6}main{grid-column:2;min-width:0}header{position:sticky;top:0;z-index:8;display:flex;align-items:center;gap:12px;padding:17px clamp(18px,4vw,52px);background:linear-gradient(#090b0ee8,#090b0eaa,transparent);backdrop-filter:blur(12px)}.search{display:flex;align-items:center;gap:10px;max-width:680px;width:100%;height:48px;padding-left:17px;border:1px solid #ffffff15;border-radius:16px;background:#181b20dd;box-shadow:0 8px 30px #0005}.search>span{font-size:25px;color:var(--muted);transform:rotate(-15deg)}.search input{width:100%;border:0;outline:0;background:transparent;color:#fff;font-size:15px}.search button{align-self:stretch;border:0;border-radius:0 15px 15px 0;padding:0 22px;background:var(--accent);color:#07140b;font-weight:800;cursor:pointer}.round-button{flex:0 0 auto;width:46px;height:46px;border:1px solid #ffffff18;border-radius:50%;background:#171a20;color:#fff;font-size:21px;cursor:pointer}.hero{display:flex;justify-content:space-between;align-items:center;gap:30px;margin:8px clamp(18px,4vw,52px) 52px;padding:clamp(30px,6vw,74px);min-height:330px;border:1px solid #ffffff16;border-radius:30px;background:linear-gradient(120deg,#18231dcc,#11151ccc);overflow:hidden;box-shadow:0 30px 80px #0008}.eyebrow{margin:0 0 10px;color:var(--accent);font-size:11px;font-weight:850;letter-spacing:.19em}.hero h1{margin:0;font-size:clamp(39px,6vw,76px);line-height:.99;letter-spacing:-.065em}.hero h1 span{color:var(--accent)}.hero p:last-child{max-width:430px;margin:24px 0 0;color:var(--muted);line-height:1.7}.hero-orb{flex:0 0 clamp(170px,25vw,300px);aspect-ratio:1;border-radius:50%;padding:18px;background:linear-gradient(145deg,#65f497,#0d7338);box-shadow:0 0 90px #44e88035;transform:rotate(8deg)}.vinyl{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:repeating-radial-gradient(circle,#0e1115 0 9px,#161a1f 10px 12px);box-shadow:inset 0 0 0 1px #ffffff20}.vinyl span{display:grid;place-items:center;width:35%;height:35%;border-radius:50%;background:var(--accent);color:#0a1610;font-size:42px;font-weight:900}.content{padding:0 clamp(18px,4vw,52px) 70px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.section-heading h2{margin:0;font-size:28px;letter-spacing:-.03em}.section-heading>p{color:var(--muted);font-size:13px}.status{padding:32px;border:1px dashed #ffffff18;border-radius:18px;color:var(--muted);text-align:center}.status:empty{display:none}.track-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.track-card{position:relative;padding:12px;border:1px solid transparent;border-radius:17px;background:#ffffff06;cursor:pointer;transition:.2s ease}.track-card:hover{background:#ffffff0d;border-color:#ffffff12;transform:translateY(-3px)}.track-card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:#15191f}.track-card .play-overlay{position:absolute;right:22px;top:calc(100% - 90px);display:grid;place-items:center;width:46px;height:46px;border:0;border-radius:50%;background:var(--accent);color:#07140b;box-shadow:0 10px 28px #0008;opacity:0;transform:translateY(6px);transition:.2s}.track-card:hover .play-overlay{opacity:1;transform:none}.track-card h3{margin:13px 2px 5px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-card p{margin:0 2px;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-card .duration-badge{position:absolute;top:calc(100% - 83px);left:19px;padding:3px 6px;border-radius:5px;background:#000b;font-size:11px}.queue-panel{position:fixed;z-index:40;top:0;right:0;bottom:var(--player);width:min(410px,92vw);padding:26px;background:#111419f7;border-left:1px solid var(--line);backdrop-filter:blur(30px);transform:translateX(105%);transition:.25s ease;overflow:auto}.queue-panel.open{transform:none}.queue-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.queue-head h2{margin:0}.queue-list{display:grid;gap:6px}.queue-item{display:grid;grid-template-columns:46px minmax(0,1fr) 30px;align-items:center;gap:10px;padding:8px;border-radius:11px}.queue-item.active{background:#ffffff0d}.queue-item img{width:46px;height:46px;border-radius:8px;object-fit:cover}.queue-item strong,.queue-item span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item strong{font-size:13px}.queue-item span{color:var(--muted);font-size:11px;margin-top:3px}.queue-item button{border:0;background:transparent;color:var(--muted);cursor:pointer}.ghost-button{width:100%;margin-top:20px;padding:11px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}.scrim{position:fixed;z-index:35;inset:0;background:#0009;opacity:0;pointer-events:none;transition:.2s}.scrim.open{opacity:1;pointer-events:auto}.player{position:fixed;z-index:50;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(240px,1fr) minmax(320px,1.5fr) minmax(130px,1fr);align-items:center;gap:24px;height:var(--player);padding:12px 22px max(12px,env(safe-area-inset-bottom));border-top:1px solid #ffffff18;background:#101318f5;backdrop-filter:blur(30px)}.now-playing{display:grid;grid-template-columns:58px minmax(0,1fr) 40px;align-items:center;gap:12px}.now-playing img{width:58px;height:58px;object-fit:cover;border-radius:10px}.now-playing strong,.now-playing span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing strong{font-size:14px}.now-playing span{margin-top:5px;color:var(--muted);font-size:12px}.transport{display:grid;gap:6px}.controls{display:flex;justify-content:center;align-items:center;gap:13px}.icon-button{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.icon-button.active{color:var(--accent)}.icon-button.large{color:#fff;font-size:17px}.play-button{display:grid;place-items:center;width:40px;height:40px;padding-left:3px;border:0;border-radius:50%;background:#fff;color:#07090b;cursor:pointer}.timeline{display:grid;grid-template-columns:40px minmax(100px,1fr) 40px;align-items:center;gap:8px;color:var(--muted);font-size:10px}.timeline span:last-child{text-align:right}input[type=range]{width:100%;height:4px;accent-color:var(--accent);cursor:pointer}.volume{display:flex;justify-content:flex-end;align-items:center;gap:8px}.volume input{max-width:110px}.toast{position:fixed;z-index:80;left:50%;bottom:calc(var(--player) + 20px);padding:11px 16px;border-radius:12px;background:#f5f7fa;color:#111;font-size:13px;font-weight:700;opacity:0;transform:translate(-50%,10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}.skeleton{height:250px;border-radius:17px;background:linear-gradient(100deg,#ffffff05 30%,#ffffff0d 45%,#ffffff05 60%);background-size:300% 100%;animation:shimmer 1.3s infinite}@keyframes shimmer{to{background-position:-150% 0}}@media(max-width:800px){:root{--player:150px}.app-shell{display:block}.sidebar{position:fixed;top:auto;right:0;bottom:0;width:auto;height:58px;padding:0 10px;border:0;border-top:1px solid var(--line);z-index:55}.brand,.sidebar-note{display:none}.sidebar nav{grid-template-columns:repeat(3,1fr);height:100%;gap:2px}.nav-item{justify-content:center;flex-direction:column;gap:0;padding:4px 14px;font-size:9px}.nav-item span{width:auto;font-size:20px}main{padding-bottom:58px}header{padding:10px 12px}.search{height:44px;border-radius:14px}.search button{padding:0 14px;border-radius:0 13px 13px 0}.hero{min-height:210px;margin:4px 12px 32px;padding:28px 24px;border-radius:22px}.hero h1{font-size:39px}.hero p:last-child{margin-top:16px;font-size:13px}.hero-orb{display:none}.content{padding:0 12px 42px}.track-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.track-card{padding:8px}.track-card .play-overlay{display:none}.track-card .duration-badge{top:calc(100% - 72px);left:13px}.player{bottom:58px;display:block;height:92px;padding:9px 12px}.now-playing{grid-template-columns:52px minmax(0,1fr) 36px}.now-playing img{width:52px;height:52px}.transport{position:absolute;inset:0 0 auto 0}.controls{position:absolute;right:52px;top:29px;justify-content:flex-end}.controls #shuffle,.controls #previous,.controls #repeat{display:none}.play-button{width:38px;height:38px}.timeline{position:absolute;left:0;right:0;top:0;display:block}.timeline span{display:none}.timeline input{display:block;margin:0;width:100%;height:3px}.volume{display:none}.queue-panel{bottom:150px}.toast{bottom:170px}}@media(max-width:380px){.search button{font-size:0;width:45px}.search button:after{content:'⌕';font-size:20px}.hero h1{font-size:34px}}