@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2)format("woff2-variations");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-cyrillic-wght-normal-DqGufNeO.woff2)format("woff2-variations");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-ext-wght-normal-DlzME5K_.woff2)format("woff2-variations");unicode-range:U+1F??}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-greek-wght-normal-CkhJZR-_.woff2)format("woff2-variations");unicode-range:U+370-377,U+37A-37F,U+384-38A,U+38C,U+38E-3A1,U+3A3-3FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-vietnamese-wght-normal-CBcvBZtf.woff2)format("woff2-variations");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-ext-wght-normal-DO1Apj_S.woff2)format("woff2-variations");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/assets/inter-latin-wght-normal-Dx4kXJAl.woff2)format("woff2-variations");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--bg:#0b0b0d;--surface:#141417;--surface-2:#1c1c21;--line:#26262c;--line-strong:#3f3f46;--text:#f4f4f5;--soft:#d4d4d8;--dim:#a1a1aa;--faint:#8b8b94;--accent:#1ed6a2;--accent-ink:#06291f;--danger:#ff8a8a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font:15px/1.45 Inter Variable,ui-sans-serif,system-ui,sans-serif}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.page{flex-direction:column;gap:24px;width:100%;min-height:100vh;margin:0 auto;padding:20px clamp(16px,3vw,56px) 48px;display:flex}.top{flex-wrap:wrap;align-items:center;gap:24px;display:flex}.brand{letter-spacing:-.02em;align-items:center;gap:10px;font-size:18px;font-weight:700;display:flex}.mark{background:var(--accent);width:32px;height:32px;color:var(--accent-ink);border-radius:10px;justify-content:center;align-items:center;display:inline-flex}.tabs{background:var(--surface);border-radius:999px;gap:4px;max-width:100%;padding:4px;display:flex;overflow-x:auto}.tabs button{min-height:36px;color:var(--dim);white-space:nowrap;background:0 0;border:0;border-radius:999px;padding:0 16px;font-size:14px;font-weight:500}.tabs button:hover{color:var(--text)}.tabs button[aria-selected=true]{background:var(--line);color:var(--text);font-weight:600}.who{align-items:center;gap:12px;margin-left:auto;display:flex}.avatar{background:var(--line);object-fit:cover;border-radius:999px;justify-content:center;align-items:center;width:32px;height:32px;font-size:13px;font-weight:600;display:inline-flex}.main{flex-direction:column;gap:16px;display:flex}.pill{border:1px solid var(--line);min-height:36px;color:var(--text);white-space:nowrap;background:0 0;border-radius:999px;padding:0 14px;font-size:14px;font-weight:600}.pill:hover:not(:disabled){border-color:var(--line-strong)}.pill.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.pill.danger{color:var(--danger)}.pill.ghost{color:var(--dim);border-color:#0000}.pill.ghost:hover{color:var(--text)}.pill.lang{border-color:var(--line);font-size:13px}.icon-btn{width:44px;height:44px;color:var(--dim);background:0 0;border:0;border-radius:999px;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.icon-btn:hover:not(:disabled){color:var(--text);background:var(--surface-2)}.icon-btn.small{width:36px;height:36px}.icon-btn.ring{border:1px solid var(--line);width:40px;height:40px}.icon-btn.done{color:var(--accent);border-color:var(--accent)}.icon-btn.on{color:var(--accent)}.badge{background:var(--accent);min-width:14px;height:14px;color:var(--accent-ink);border-radius:999px;font-size:10px;font-weight:700;line-height:14px;position:absolute;top:9px;right:7px}.player{grid-template-columns:clamp(300px,30vw,640px) minmax(0,1fr);align-items:start;gap:clamp(28px,4vw,72px);display:grid}.queue-col{display:contents}.side>.search{order:1}.queue-area{order:2}.suggest-area{order:3}.recent-area{order:4}@media (width>=861px){.page{height:100dvh;min-height:0;padding-bottom:0}.main{flex:1;min-height:0;overflow-y:auto}.main:has(>.player){overflow:hidden}.player{flex:1;align-items:stretch;height:100%;min-height:0}.now-col,.side{scrollbar-width:thin;scrollbar-color:var(--line) transparent;min-height:0;padding-bottom:32px;overflow-y:auto}.now-col .art-hero{width:min(100%,max(220px,100dvh - 500px));margin-inline:auto}}.now-col{flex-direction:column;gap:12px;display:flex;position:sticky;top:20px}.side{flex-direction:column;gap:28px;min-width:0;display:flex}@media (width>=1440px){.side{grid-template:"search queue""suggest queue"1fr/minmax(0,1fr) minmax(0,1fr);align-items:start;gap:28px clamp(28px,3vw,56px);display:grid}.side>.search{grid-area:search}.side>.queue-col{flex-direction:column;grid-area:queue;gap:28px;min-width:0;display:flex}.side>.suggest-area{grid-area:suggest}}@media (width<=860px){.player{grid-template-columns:minmax(0,1fr)}.now-col{max-width:560px;position:static}}.now{flex-direction:column;gap:20px;display:flex}.art{background:var(--surface-2);color:var(--line-strong);flex:none;justify-content:center;align-items:center;display:flex;overflow:hidden}.art img{object-fit:cover;width:100%;height:100%;display:block}.art-hero{aspect-ratio:1;border-radius:20px;width:100%}.art-md{border-radius:8px;width:48px;height:48px}.art-sm{border-radius:6px;width:40px;height:40px}.title{letter-spacing:-.02em;overflow-wrap:anywhere;margin:0;font-size:24px;font-weight:700}.sub{color:var(--dim);margin:0;font-size:13px}.now .sub{font-size:15px}.progress{flex-direction:column;gap:6px;display:flex}.time{color:var(--dim);font-variant-numeric:tabular-nums;justify-content:space-between;font-size:12px;display:flex}.track-line{background:var(--line);border-radius:999px;height:4px;margin:12px 0}.transport{grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;display:grid}.transport-side{align-items:center;gap:16px;display:flex}.transport-side.start{justify-content:flex-end}.play{background:var(--accent);width:64px;height:64px;color:var(--accent-ink);border:0;border-radius:999px;justify-content:center;align-items:center;transition:transform .1s;display:inline-flex}.play:hover{transform:scale(1.04)}.play:active{transform:scale(.97)}.now-foot{border-top:1px solid var(--surface-2);justify-content:space-between;align-items:center;gap:12px;padding-top:16px;display:flex}.autoplay-note{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.fine{color:var(--faint);margin:0;font-size:12px}.slider{appearance:none;cursor:pointer;--fill:0%;--tone:var(--dim);background:0 0;flex:1;width:100%;height:28px;margin:0}.slider.bright{--tone:var(--text)}.slider::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--tone) var(--fill), var(--line) var(--fill));border-radius:999px;height:4px}.slider::-moz-range-track{background:linear-gradient(to right, var(--tone) var(--fill), var(--line) var(--fill));border-radius:999px;height:4px}.slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--text);opacity:0;border:0;border-radius:999px;width:12px;height:12px;margin-top:-4px;transition:opacity .1s}.slider::-moz-range-thumb{background:var(--text);opacity:0;border:0;border-radius:999px;width:12px;height:12px}.slider:hover::-webkit-slider-thumb{opacity:1}.slider:focus-visible::-webkit-slider-thumb{opacity:1}.slider.bright::-webkit-slider-thumb{opacity:1}.slider:hover::-moz-range-thumb{opacity:1}.slider:focus-visible::-moz-range-thumb{opacity:1}.slider.bright::-moz-range-thumb{opacity:1}.slider:hover{--tone:var(--accent)}.slider:focus-visible{outline-offset:4px}.switch{min-height:44px;color:var(--soft);cursor:pointer;align-items:center;gap:10px;font-size:14px;display:inline-flex;position:relative}.switch input{opacity:0;cursor:pointer;width:36px;height:20px;margin:0;position:absolute}.knob{background:var(--line);border-radius:999px;width:36px;height:20px;transition:background .15s;position:relative}.knob:after{content:"";background:var(--dim);border-radius:999px;width:14px;height:14px;transition:transform .15s,background .15s;position:absolute;top:3px;left:3px}.switch input:checked+.knob{background:var(--accent)}.switch input:checked+.knob:after{background:var(--accent-ink);transform:translate(16px)}.switch input:focus-visible+.knob{outline:2px solid var(--accent);outline-offset:2px}.search{flex-direction:column;gap:12px;display:flex}.search-box{background:var(--surface);border:1px solid var(--line);min-height:52px;color:var(--dim);border-radius:999px;align-items:center;gap:12px;padding:0 6px 0 18px;display:flex}.search-box:focus-within{border-color:var(--line-strong)}.search-box input{min-width:0;min-height:48px;color:var(--text);background:0 0;border:0;outline:none;flex:1;font-size:16px}.search-box input::placeholder{color:var(--faint)}.hint{color:var(--faint);margin:0 0 0 18px;font-size:13px}.label{color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px 10px;font-size:12px;font-weight:600}.label-row{justify-content:space-between;align-items:center;display:flex}.label-row .label{margin-bottom:0}.label-row{margin-bottom:8px}.rows{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.song{border-radius:12px;align-items:center;gap:14px;padding:6px 10px;display:flex}.song:hover,.song:focus-within{background:var(--surface)}.song.dragging{opacity:.4}.meta{flex:1;min-width:0}.meta .name{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.queue-row .meta .name{font-weight:500}.meta .sub{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.plays{color:var(--faint);white-space:nowrap;font-size:13px}.len{color:var(--dim);font-variant-numeric:tabular-nums;text-align:right;min-width:36px;font-size:13px}.grip{color:var(--line-strong);cursor:grab;display:flex}.reorder{display:flex}.grip:empty{width:16px}.auto-row{opacity:.75}.tag{border:1px solid var(--line);color:var(--dim);border-radius:999px;flex:none;padding:2px 10px;font-size:12px;font-weight:600}@media (hover:hover){.queue-row .reorder{opacity:0}.queue-row:hover .reorder,.queue-row:focus-within .reorder{opacity:1}}@media (width<=560px){.page{gap:20px;padding:16px 16px 40px}.top{gap:12px}.tabs{order:3;width:100%}.tabs button{flex:1;padding:0 10px}.player{gap:28px}.now-col{max-width:none}.now .art-hero{border-radius:14px;width:96px}.now{grid-template-columns:96px 1fr;align-items:center;gap:18px 14px;display:grid}.now>:not(.art-hero):not(:nth-child(2)){grid-column:1/-1}.title{font-size:20px}.plays,.grip{display:none}.song{gap:12px;padding:6px 4px}}.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;flex-direction:column;gap:16px;padding:20px;display:flex}.card .title{font-size:20px}.dim{color:var(--dim);margin:0;font-size:13px}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.grow{flex:200px;min-width:0}.btn{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;min-height:40px;padding:0 16px;font-size:14px;font-weight:600}.btn:hover:not(:disabled){border-color:var(--line-strong)}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.btn.danger{color:var(--danger)}.btn.small{min-width:36px;min-height:36px;color:var(--dim);background:0 0;border-color:#0000;padding:0 10px;font-weight:500}.btn.small:hover:not(:disabled){color:var(--text);background:var(--surface-2)}.field{background:var(--bg);border:1px solid var(--line);border-radius:12px;width:100%;min-height:44px;padding:0 16px}.list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.item{border-top:1px solid var(--line);align-items:center;gap:8px;padding:8px 0;display:flex}.item:first-child{border-top:0}.item .name{overflow-wrap:anywhere;flex:1;min-width:0}.num{color:var(--faint);font-variant-numeric:tabular-nums;text-align:right;min-width:1.6em;font-size:13px}.notice{border:1px solid var(--line);background:var(--surface);color:var(--soft);border-radius:12px;margin:0;padding:12px 16px;font-size:14px}.error{color:var(--danger);margin:0;font-size:14px}label.stack{flex-direction:column;gap:6px;font-size:14px;font-weight:600;display:flex}.linkish{color:var(--dim);background:0 0;border:0;min-height:44px;padding:8px;text-decoration:underline}.card .search .hint{margin-left:18px}.play.busy{position:relative}.play.busy:after{content:"";border:2px solid #0000;border-top-color:var(--accent);border-radius:999px;animation:.9s linear infinite spin;position:absolute;inset:-5px}.progress.loading .track-line{animation:1.2s ease-in-out infinite pulse}.progress.loading .slider::-webkit-slider-runnable-track{animation:1.2s ease-in-out infinite pulse}.progress.loading .slider::-moz-range-track{animation:1.2s ease-in-out infinite pulse}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.play.busy:after{border-color:var(--accent);animation:none}.progress.loading .track-line{animation:none}.progress.loading .slider::-webkit-slider-runnable-track{animation:none}.progress.loading .slider::-moz-range-track{animation:none}}.rows.stale{opacity:.45;transition:opacity .15s}.skeleton{background:var(--surface-2);animation:1.2s ease-in-out infinite pulse}.skeleton.line{border-radius:999px;width:40%;height:14px}.skeleton.line.wide{width:70%;height:22px}.skeleton.search-line{border-radius:999px;height:52px}@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}@media (width<=560px){.now-col .art-hero.skeleton{border-radius:14px;width:96px}}.btn.small.done{color:var(--accent)}
