:root{--bg:#0a0a0f;--bg-elev:#14141c;--bg-elev-2:#1c1c26;--surface:#ffffff0d;--surface-hover:#ffffff17;--text:#f4f4f6;--text-dim:#a5a5b3;--text-faint:#6c6c7a;--accent:#7c5cff;--accent-2:#ff4d8d;--accent-grad:linear-gradient(135deg, #7c5cff, #ff4d8d);--border:#ffffff14;--player-h:88px;--mobilenav-h:62px;--radius:14px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}:root[data-theme=light]{--bg:#f5f5f7;--bg-elev:#fff;--bg-elev-2:#ececf1;--surface:#0000000b;--surface-hover:#00000014;--text:#16161c;--text-dim:#55555f;--text-faint:#8a8a96;--border:#0000001a;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=light] ::-webkit-scrollbar-thumb{background:#0000002e}:root[data-theme=light] .cover--placeholder{background:linear-gradient(135deg,#e6e6ec,#d6d6de)}:root[data-theme=light] .progress__track{background:#0000001f}:root[data-theme=light] .skeleton{background:linear-gradient(90deg,#e6e6ec 25%,#f0f0f4 37%,#e6e6ec 63%) 0 0/400% 100%}:root[data-theme=light] .mobilenav{background:#ffffffe6}body{transition:background-color .25s,color .25s}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;overscroll-behavior:none}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:inherit}h1,h2,h3,p{margin:0}img{display:block}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:10px}::-webkit-scrollbar-track{background:0 0}.shell{grid-template:"sidebar content"1fr"player player"/248px 1fr;height:100dvh;display:grid;overflow:hidden}.sidebar{grid-area:sidebar}.content{padding:24px 28px calc(var(--player-h) + 32px);scroll-behavior:smooth;grid-area:content;overflow-y:auto}.shell:not(.shell--player) .content{padding-bottom:40px}.playerbar{grid-area:player}.sidebar{background:var(--bg-elev);border-right:1px solid var(--border);flex-direction:column;gap:26px;padding:22px 16px;display:flex}.sidebar__brand{align-items:center;gap:12px;padding:4px 8px;font-size:15px;font-weight:800;line-height:1.15;display:flex}.sidebar__logo{background:var(--accent-grad);color:#fff;border-radius:12px;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid}.sidebar__nav{flex-direction:column;gap:4px;display:flex}.sidebar__link{color:var(--text-dim);border-radius:10px;align-items:center;gap:14px;padding:11px 14px;font-size:15px;font-weight:600;transition:background .15s,color .15s;display:flex}.sidebar__link:hover{color:var(--text);background:var(--surface)}.sidebar__link.active{color:var(--text);background:var(--surface-hover)}.sidebar__footer{color:var(--text-faint);margin-top:auto;padding:0 10px;font-size:12px;line-height:1.6}.theme-toggle{border:1px solid var(--border);background:var(--surface);width:40px;height:40px;color:var(--text-dim);border-radius:10px;place-items:center;transition:background .15s,color .15s,transform .12s;display:inline-grid}.theme-toggle:hover{background:var(--surface-hover);color:var(--text)}.theme-toggle:active{transform:scale(.92)}.theme-toggle--labelled{margin-bottom:14px}.theme-toggle--fab{display:none}.page{max-width:1200px;margin:0 auto;animation:.25s fade}@keyframes fade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.home__hero{margin:6px 0 22px}.home__hero h1{letter-spacing:-.02em;font-size:30px;font-weight:800}.home__hero p{color:var(--text-dim);margin-top:6px}.row{margin-bottom:30px}.row__head{justify-content:space-between;align-items:baseline;margin-bottom:14px;display:flex}.row__title{letter-spacing:-.01em;font-size:20px;font-weight:700}.row__scroller{scroll-snap-type:x proximity;scrollbar-width:thin;grid-auto-columns:168px;grid-auto-flow:column;gap:16px;padding-bottom:6px;display:grid;overflow-x:auto}.row__scroller>*{scroll-snap-align:start}.card{background:var(--surface);border-radius:var(--radius);cursor:pointer;padding:12px;transition:background .18s,transform .18s}.card:hover{background:var(--surface-hover)}.card:hover .card__play{opacity:1;transform:translateY(0)}.card__art{margin-bottom:12px;position:relative}.card__title{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.card__subtitle{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;margin-top:3px;font-size:12.5px;overflow:hidden}.card__play{background:var(--accent);color:#fff;opacity:0;border:none;border-radius:50%;place-items:center;width:44px;height:44px;transition:opacity .18s,transform .18s,background .18s;display:grid;position:absolute;bottom:8px;right:8px;transform:translateY(8px);box-shadow:0 8px 20px #7c5cff73}.card__play:hover{background:var(--accent-2)}.cover{aspect-ratio:1;object-fit:cover;background:var(--bg-elev-2);border-radius:10px;width:100%;display:block}.cover--round{border-radius:50%}.cover--placeholder{color:var(--text-faint);background:linear-gradient(135deg,#22222e,#171720);place-items:center;display:grid}.quickpicks{margin-bottom:32px}.quickpicks__grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;display:grid}.quickpick{background:var(--surface);color:var(--text);text-align:left;border:none;border-radius:10px;align-items:center;gap:12px;height:62px;padding:0;transition:background .15s;display:flex;overflow:hidden}.quickpick:hover{background:var(--surface-hover)}.quickpick__art{object-fit:cover;flex-shrink:0;width:62px;height:62px}.quickpick__title{white-space:nowrap;text-overflow:ellipsis;padding-right:12px;font-size:14px;font-weight:600;overflow:hidden}.songrow{cursor:pointer;border-radius:10px;align-items:center;gap:12px;padding:8px 10px;transition:background .15s;display:flex}.songrow:hover{background:var(--surface)}.songrow--active{background:var(--surface-hover)}.songrow--active .songrow__name{color:var(--accent)}.songrow__index{flex-shrink:0;width:44px;height:44px;position:relative}.songrow__num{color:var(--text-faint);place-items:center;font-size:14px;display:grid;position:absolute;inset:0}.songrow:hover .songrow__num{opacity:0}.songrow__art{width:44px;height:44px;position:relative}.songrow__art .cover{width:44px;height:44px}.songrow__play{color:#fff;opacity:0;background:#00000080;border:none;border-radius:8px;place-items:center;width:44px;height:44px;margin:auto;transition:opacity .15s;display:grid;position:absolute;inset:0}.songrow:hover .songrow__play,.songrow--active .songrow__play{opacity:1}.songrow__meta{flex:1;min-width:0}.songrow__name{white-space:nowrap;text-overflow:ellipsis;font-size:14.5px;font-weight:600;overflow:hidden}.songrow__artist{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:12.5px;overflow:hidden}.songrow__like{color:var(--text-faint);opacity:0;background:0 0;border:none;padding:6px;transition:opacity .15s,color .15s}.songrow:hover .songrow__like{opacity:1}.songrow__like.is-liked{opacity:1;color:var(--accent-2)}.songrow__duration{color:var(--text-faint);font-variant-numeric:tabular-nums;text-align:right;width:42px;font-size:13px}.tabs{flex-wrap:wrap;gap:8px;margin:4px 0 20px;display:flex}.tab{background:var(--surface);color:var(--text-dim);border:none;border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;transition:background .15s,color .15s}.tab:hover{color:var(--text)}.tab--active{background:var(--text);color:#0a0a0f}.search__bar{background:var(--bg-elev-2);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;align-items:center;gap:12px;margin-bottom:18px;padding:12px 20px;display:flex}.search__bar input{color:var(--text);background:0 0;border:none;outline:none;flex:1;font-size:15.5px}.search__hint,.empty-state{text-align:center;color:var(--text-dim);flex-direction:column;align-items:center;gap:14px;padding:60px 20px;display:flex}.empty-state--big{padding:80px 20px}.search__songs{margin-bottom:26px}.detail__head{align-items:flex-end;gap:26px;margin-bottom:26px;display:flex}.detail__cover{flex-shrink:0;width:210px}.detail__cover .cover{box-shadow:0 16px 40px #00000080}.detail__head--artist{align-items:center}.detail__type{text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-size:12px;font-weight:700}.detail__title{letter-spacing:-.02em;margin:8px 0;font-size:clamp(28px,5vw,52px);font-weight:800;line-height:1.05}.detail__subtitle{color:var(--text-dim)}.detail__meta{color:var(--text-dim);margin-top:6px;font-size:13.5px}.detail__actions{gap:12px;margin-top:20px;display:flex}.detail__songs{margin-bottom:26px}.btn-primary,.btn-secondary{border:none;border-radius:999px;align-items:center;gap:8px;padding:12px 24px;font-size:14.5px;font-weight:700;display:inline-flex}.btn-primary{background:var(--accent-grad);color:#fff;box-shadow:0 8px 22px #7c5cff66}.btn-secondary{background:var(--surface);color:var(--text)}.btn-secondary:hover{background:var(--surface-hover)}.btn-ghost{border:1px solid var(--border);color:var(--text-dim);background:0 0;border-radius:999px;padding:8px 16px;font-size:13px}.library__clear{margin-bottom:16px}.library__head h1,.home__hero h1{letter-spacing:-.02em}.library__head{margin-bottom:18px}.library__head h1{font-size:30px;font-weight:800}.playerbar{height:var(--player-h);background:var(--bg-elev);border-top:1px solid var(--border);align-items:center;gap:16px;padding:0 18px;display:none}.shell--player .playerbar{display:flex}.playerbar__meta{cursor:pointer;align-items:center;gap:12px;width:30%;min-width:180px;display:flex}.playerbar__meta .cover{width:56px;height:56px}.playerbar__text{min-width:0}.playerbar__title{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.playerbar__artist{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;overflow:hidden}.playerbar__like{flex-shrink:0}.playerbar__like.is-liked{color:var(--accent-2)}.playerbar__center{flex-direction:column;flex:1;align-items:center;gap:6px;max-width:620px;margin:0 auto;display:flex}.playerbar__controls{align-items:center;gap:14px;display:flex}.playerbar__extra{justify-content:flex-end;align-items:center;gap:10px;width:30%;min-width:160px;display:flex}.iconbtn{color:var(--text-dim);background:0 0;border:none;border-radius:8px;place-items:center;padding:6px;transition:color .15s,background .15s;display:grid}.iconbtn:hover{color:var(--text)}.iconbtn.is-on{color:var(--accent)}.playbtn{background:var(--text);color:#0a0a0f;border:none;border-radius:50%;place-items:center;width:44px;height:44px;transition:transform .12s;display:grid}.playbtn:hover{transform:scale(1.06)}.playbtn--lg{background:var(--accent-grad);color:#fff;width:68px;height:68px}.volume{width:100px;accent-color:var(--accent)}.progress{align-items:center;gap:10px;width:100%;display:flex}.progress__time{color:var(--text-faint);font-variant-numeric:tabular-nums;text-align:center;min-width:34px;font-size:11.5px}.progress__track{background:#ffffff24;border-radius:999px;flex:1;height:6px;position:relative}.progress__fill{background:var(--text);pointer-events:none;border-radius:999px;height:100%;position:absolute;top:0;left:0}.progress__track:hover .progress__fill{background:var(--accent)}.progress__input{opacity:0;cursor:pointer;width:100%;height:calc(100% + 12px);margin:0;position:absolute;inset:-6px 0}.spinner{border:2px solid #ffffff59;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}.spinner--lg{border-width:3px;width:26px;height:26px}@keyframes spin{to{transform:rotate(360deg)}}.miniplayer-wrap{display:none}.miniplayer{background:var(--bg-elev-2);border:1px solid var(--border);border-radius:12px;align-items:center;gap:12px;margin:0 10px;padding:8px 12px;display:flex;box-shadow:0 8px 24px #0006}.miniplayer .cover{width:44px;height:44px}.miniplayer__text{flex:1;min-width:0}.miniplayer__title{white-space:nowrap;text-overflow:ellipsis;font-size:13.5px;font-weight:600;overflow:hidden}.miniplayer__artist{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.miniplayer__play{background:var(--text);color:#0a0a0f;border:none;border-radius:50%;flex-shrink:0;place-items:center;width:40px;height:40px;display:grid}.mobilenav{display:none}.nowplaying{z-index:60;animation:.32s cubic-bezier(.22,1,.36,1) sheet-up;position:fixed;inset:0;overflow:hidden}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:none}}.nowplaying__bg{z-index:0;filter:blur(60px)brightness(.5);background-position:50%;background-size:cover;position:absolute;inset:-40px;transform:scale(1.2)}.nowplaying__inner{z-index:1;height:100%;padding:calc(16px + var(--safe-top)) 22px calc(26px + var(--safe-bottom));background:linear-gradient(#0a0a0f8c,#0a0a0feb);flex-direction:column;max-width:460px;margin:0 auto;display:flex;position:relative}.nowplaying__head{justify-content:space-between;align-items:center;display:flex}.nowplaying__label{letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);font-size:12px;font-weight:700}.nowplaying__art{flex:1;place-items:center;min-height:0;padding:26px 0;display:grid}.nowplaying__art .cover{width:min(76vw,360px);height:min(76vw,360px);box-shadow:0 24px 60px #0000008c}.nowplaying__info{justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px;display:flex}.nowplaying__title{letter-spacing:-.01em;font-size:24px;font-weight:800}.nowplaying__artist{color:var(--text-dim);margin-top:4px}.nowplaying__like.is-liked{color:var(--accent-2)}.nowplaying__controls{justify-content:space-between;align-items:center;margin:18px 0;display:flex}.nowplaying__quality{color:var(--text-dim);justify-content:space-between;align-items:center;font-size:13px;display:flex}.quality-pills{gap:8px;display:flex}.pill{border:1px solid var(--border);color:var(--text-dim);background:0 0;border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600}.pill--active{background:var(--text);color:#0a0a0f;border-color:var(--text)}.queue__backdrop{z-index:55;background:#00000080;position:fixed;inset:0}.queue{z-index:56;background:var(--bg-elev);border-left:1px solid var(--border);width:380px;max-width:90vw;padding-bottom:var(--safe-bottom);flex-direction:column;animation:.25s slide-in;display:flex;position:fixed;top:0;bottom:0;right:0}@keyframes slide-in{0%{transform:translate(100%)}to{transform:none}}.queue__head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:18px 20px;display:flex}.queue__head h2{font-size:18px}.queue__body{flex:1;padding:14px 14px 24px;overflow-y:auto}.queue__section{margin-bottom:20px}.queue__label{color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;padding:0 6px 10px;font-size:12px;font-weight:700}.queue__empty{color:var(--text-faint);padding:6px;font-size:13px}.queue__item{border-radius:10px;align-items:center;gap:12px;padding:8px 6px;display:flex}.queue__item:hover{background:var(--surface)}.queue__item--active .queue__name{color:var(--accent)}.queue__click{cursor:pointer;flex:1;align-items:center;gap:12px;min-width:0;display:flex}.queue__item .cover{width:42px;height:42px}.queue__meta{min-width:0}.queue__name{white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.queue__artist{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.skeleton{background:linear-gradient(90deg,#1a1a24 25%,#23232f 37%,#1a1a24 63%) 0 0/400% 100%;border-radius:8px;animation:1.4s infinite shimmer}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.skeleton-card .cover{margin-bottom:12px}.skeleton-line{height:12px;margin-top:8px}.skeleton-line--short{width:60%}@media (width<=860px){.shell{grid-template:"content"1fr"nav"/1fr}.sidebar,.playerbar,.shell--player .playerbar{display:none}.theme-toggle--fab{top:calc(8px + var(--safe-top));z-index:42;background:var(--bg-elev);display:inline-grid;position:fixed;right:12px;box-shadow:0 4px 14px #00000047}.content{padding:calc(18px + var(--safe-top)) 16px 20px}.shell--player .content{padding-bottom:20px}.mobilenav{height:calc(var(--mobilenav-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border);z-index:40;background:#0f0f16eb;grid-area:nav;justify-content:space-around;align-items:center;display:flex}.mobilenav__link{color:var(--text-faint);flex-direction:column;flex:1;align-items:center;gap:3px;padding:8px 0;font-size:10.5px;font-weight:600;display:flex}.mobilenav__link.active{color:var(--text)}.miniplayer-wrap{left:0;right:0;bottom:calc(var(--mobilenav-h) + var(--safe-bottom));z-index:41;display:block;position:fixed}.shell:not(.shell--player) .miniplayer-wrap{display:none}.row__scroller{grid-auto-columns:150px;gap:12px}.quickpicks__grid{grid-template-columns:1fr 1fr}.detail__head{flex-direction:column;align-items:flex-start;gap:16px}.detail__head--artist{text-align:center;align-items:center}.detail__cover{width:168px}.home__hero h1{font-size:24px}.content,.shell--player .content{padding-bottom:calc(var(--mobilenav-h) + var(--safe-bottom) + 76px)}.queue{width:100%;max-width:100%}}@media (width<=520px){.quickpicks__grid{grid-template-columns:1fr}.row__scroller{grid-auto-columns:140px}}