@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}@property --accent{syntax:"<color>";inherits:true;initial-value:#1ed6a2}@property --stage{syntax:"<length-percentage>";inherits:true;initial-value:100%}@property --accent-ink{syntax:"<color>";inherits:true;initial-value:#06291f}:root{--accent:#1ed6a2;--accent-ink:#06291f;--bg:#07070a;--panel:#11111599;--panel-solid:#121216;--hover:#ffffff0e;--press:#ffffff17;--line:#ffffff14;--line-strong:#ffffff2b;--track:#ffffff24;--text:#f7f7f8;--soft:#dcdce1;--dim:#a9a9b4;--faint:#8f8f9a;--danger:#ff8f8f;--accent-soft:color-mix(in oklab, var(--accent) 16%, transparent);--accent-line:color-mix(in oklab, var(--accent) 42%, transparent);--accent-glow:color-mix(in oklab, var(--accent) 55%, transparent);--ease:cubic-bezier(.2, .8, .2, 1);--gutter:clamp(1rem, 2.4vw, 3.5rem);--panel-radius:1.75rem;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;transition:--accent 1.4s var(--ease), --accent-ink 1.4s var(--ease);font-size:15px}@media (width>=1920px) and (height>=980px){:root{font-size:16px}}@media (width>=2400px) and (height>=1250px){:root{font-size:18px}}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--text);font-feature-settings:"cv11", "ss01";-webkit-font-smoothing:antialiased;margin:0;font:1rem/1.5 Inter Variable,ui-sans-serif,system-ui,sans-serif}button,input,select{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.45}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}::selection{background:var(--accent-line)}[hidden]{display:none!important}.ambient{z-index:0;pointer-events:none;background:radial-gradient(70rem 45rem at 12% -10%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%), radial-gradient(60rem 50rem at 105% 110%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 70%), var(--bg);position:fixed;inset:0;overflow:hidden}.ambient img{object-fit:cover;filter:blur(110px)saturate(1.7);opacity:.55;width:140%;height:140%;transition:opacity 1.2s var(--ease);animation:fade-in 1.8s var(--ease) backwards, drift 70s ease-in-out infinite alternate;position:absolute;inset:-20%}.ambient[data-paused=true] img{opacity:.28;animation-play-state:running,paused}.ambient:after{content:"";background:linear-gradient(#07070a40,#07070a9e 55%,#07070adb),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");position:absolute;inset:0}@keyframes fade-in{0%{opacity:0}}@keyframes drift{0%{transform:scale(1)rotate(0)}to{transform:scale(1.18)rotate(10deg)}}.page{z-index:1;width:100%;min-height:100dvh;padding:round(1.25rem, 1px) var(--gutter) 3rem;flex-direction:column;gap:1.25rem;display:flex;position:relative}.top{flex-wrap:wrap;align-items:center;gap:1.5rem;display:flex}.brand{letter-spacing:-.03em;align-items:center;gap:.65rem;font-size:1.2rem;font-weight:800;display:flex}.mark{background:linear-gradient(140deg, color-mix(in oklab, var(--accent) 70%, white), var(--accent) 45%, color-mix(in oklab, var(--accent) 70%, black));width:2.25rem;height:2.25rem;color:var(--accent-ink);box-shadow:0 .6rem 1.6rem -.5rem var(--accent-glow), inset 0 1px 0 #ffffff59;border-radius:.8rem;justify-content:center;align-items:center;display:inline-flex}.tabs{background:var(--panel);border:1px solid var(--line);scrollbar-width:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:999px;gap:.2rem;max-width:100%;padding:.3rem;display:flex;overflow-x:auto}.tabs button{min-height:2.4rem;color:var(--dim);white-space:nowrap;background:0 0;border:0;border-radius:999px;padding:0 1.1rem;font-size:.93rem;font-weight:500;transition:color .2s,background .2s}.tabs button:hover{color:var(--text)}.tabs button[aria-selected=true]{color:var(--text);box-shadow:inset 0 0 0 1px var(--line), 0 .25rem 1rem -.4rem #0009;background:#ffffff1a;font-weight:600}.who{align-items:center;gap:.75rem;margin-left:auto;display:flex}.avatar{box-sizing:content-box;border:2px solid var(--bg);outline:2px solid var(--accent-line);outline-offset:0;background:var(--press);object-fit:cover;border-radius:999px;justify-content:center;align-items:center;width:round(2.1rem,2px);height:round(2.1rem,2px);font-size:.85rem;font-weight:700;display:inline-flex}.main{flex-direction:column;gap:1rem;display:flex}.pill{border:1px solid var(--line-strong);min-height:2.4rem;color:var(--text);white-space:nowrap;background:#ffffff08;border-radius:999px;justify-content:center;align-items:center;gap:.4rem;padding:0 1rem;font-size:.9rem;font-weight:600;transition:border-color .2s,background .2s,color .2s;display:inline-flex}.pill:hover:not(:disabled){background:var(--hover);border-color:#ffffff47}.pill.primary{background:var(--accent);color:var(--accent-ink);border-color:#0000}.pill.primary:hover:not(:disabled){background:color-mix(in oklab, var(--accent) 88%, white);border-color:#0000}.pill.danger{color:var(--danger)}.pill.danger:hover:not(:disabled){background:#ff8f8f1a;border-color:#ff8f8f59}.pill.ghost{color:var(--dim);background:0 0;border-color:#0000}.pill.ghost:hover:not(:disabled){color:var(--text);background:var(--hover);border-color:#0000}.lang-switch{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:999px;gap:.15rem;padding:.2rem;display:inline-flex}.lang-switch button{min-width:2.6rem;min-height:2.1rem;color:var(--dim);letter-spacing:.05em;background:0 0;border:0;border-radius:999px;padding:0 .55rem;font-size:.78rem;font-weight:700;transition:color .2s,background .2s}.lang-switch button:hover{color:var(--text)}.lang-switch button[aria-pressed=true]{color:var(--text);box-shadow:inset 0 0 0 1px var(--line);cursor:default;background:#ffffff1a}.pill.done{color:var(--accent);border-color:var(--accent-line)}.icon-btn{width:2.9rem;height:2.9rem;color:var(--dim);background:0 0;border:0;border-radius:999px;flex:none;justify-content:center;align-items:center;transition:color .2s,background .2s,transform .15s;display:inline-flex;position:relative}.icon-btn:hover:not(:disabled){color:var(--text);background:var(--hover)}.icon-btn:active:not(:disabled){transform:scale(.92)}.icon-btn svg{width:1.3rem;height:1.3rem}.icon-btn.small{width:2.4rem;height:2.4rem}.icon-btn.small svg{width:1.05rem;height:1.05rem}.icon-btn.ring{border:1px solid var(--line-strong);width:2.6rem;height:2.6rem}.icon-btn.ring svg{width:1.15rem;height:1.15rem}.icon-btn.done{color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}.icon-btn.on{color:var(--accent)}.icon-btn.on:after{content:"";background:var(--accent);border-radius:999px;width:.25rem;height:.25rem;margin-left:-.125rem;position:absolute;bottom:.3rem;left:50%}.badge{background:var(--accent);min-width:.9rem;height:.9rem;color:var(--accent-ink);border-radius:999px;font-size:.62rem;font-weight:800;line-height:.9rem;position:absolute;top:.55rem;right:.45rem}.player{grid-template-columns:clamp(18rem,30vw,42rem) minmax(0,1fr);align-items:start;gap:clamp(1.75rem,3.5vw,5rem);display:grid}.now-col{flex-direction:column;gap:.9rem;min-width:0;display:flex}.side{background:var(--panel);border:1px solid var(--line);border-radius:var(--panel-radius);flex-direction:column;gap:2rem;min-width:0;padding:1.25rem;display:flex;box-shadow:0 2rem 4rem -2rem #00000080}.discover-col,.queue-col{display:contents}.discover-col>.search{order:1}.queue-area{order:2}.suggest-area{order:3}.recent-area{order:4}.now-stage{--stage:100%;transition:--stage .45s var(--ease);flex-direction:column;display:flex}.now-extras{width:var(--stage);flex-direction:column;margin-inline:auto;display:flex}.reveal{opacity:0;transition:grid-template-rows .45s var(--ease), opacity .3s var(--ease);grid-template-rows:0fr;display:grid}.reveal[data-open=true]{opacity:1;grid-template-rows:1fr}.reveal>div{min-height:0;overflow:hidden}.reveal-body{padding-top:.9rem}.now{width:var(--stage);flex-direction:column;gap:1.25rem;margin-inline:auto;display:flex}.cover{aspect-ratio:1;width:100%;position:relative}.art{color:#ffffff40;background:linear-gradient(145deg,#ffffff17,#ffffff08);flex:none;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.art:after{content:"";border-radius:inherit;pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #ffffff12}.art img{object-fit:cover;width:100%;height:100%;display:block}.art img[src*="i.ytimg.com"]{transform:scale(1.34)}.art-hero{width:100%;height:100%;transition:transform .8s var(--ease), box-shadow .8s var(--ease);border-radius:1.5rem;box-shadow:0 1.25rem 2rem -1rem #000000a6}.art-hero>svg{width:26%;height:26%}.art-hero img{opacity:0;transition:opacity .7s var(--ease), filter .5s var(--ease);position:absolute;inset:0}.art-hero img.ready{opacity:1}.now[data-stage=paused] .art-hero img{filter:saturate(.5)brightness(.62)}.now{--title-size:clamp(1.45rem, 1rem + 1.1vw, 2.5rem)}.now .swap{min-height:calc(var(--title-size) * 2.24 + 1.05rem * 1.5 + .3rem)}.swap{animation:swap-in .5s var(--ease) backwards;flex-direction:column;gap:.3rem;display:flex}@keyframes swap-in{0%{opacity:0;transform:translateY(.5rem)}}.play-icon{width:1.75rem;height:1.75rem;display:block;position:relative}.play-icon svg{width:100%;height:100%;transition:opacity .2s var(--ease), transform .3s var(--ease);position:absolute;inset:0}.play-icon[data-paused=true] svg:last-child,.play-icon[data-paused=false] svg:first-child{opacity:0;transform:scale(.5)rotate(-30deg)}.play.small .play-icon{width:1.2rem;height:1.2rem}.art-md{border-radius:.6rem;width:3.2rem;height:3.2rem}.art-sm{border-radius:.5rem;width:2.75rem;height:2.75rem}.art-md svg,.art-sm svg{width:40%;height:40%}.now-text{flex-direction:column;gap:.3rem;min-width:0;display:flex}.eyebrow{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;align-items:center;gap:.55rem;margin:0 0 .15rem;font-size:.72rem;font-weight:700;display:flex}.eq{align-items:flex-end;gap:2px;height:.8rem;display:inline-flex}.eq i{transform-origin:bottom;background:currentColor;border-radius:2px;width:3px;height:100%;animation:1s ease-in-out infinite alternate eq}.eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}.eq i:nth-child(3){animation-duration:1.2s;animation-delay:-.6s}.eq i:nth-child(4){animation-duration:.85s;animation-delay:-.15s}.eq i{transition:transform .4s var(--ease)}.now:not([data-stage=playing]) .eq i{animation:none;transform:scaleY(.25)}.now[data-stage=loading] .eq i{animation:.5s ease-in-out infinite alternate eq}@keyframes eq{0%{transform:scaleY(.2)}50%{transform:scaleY(1)}to{transform:scaleY(.45)}}.title{font-size:var(--title-size,clamp(1.45rem, 1rem + 1.1vw, 2.5rem));letter-spacing:-.035em;overflow-wrap:anywhere;-webkit-line-clamp:2;text-wrap:balance;-webkit-box-orient:vertical;margin:0;font-weight:800;line-height:1.12;display:-webkit-box;overflow:hidden}.artist{color:var(--soft);white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1.05rem;font-weight:500;overflow:hidden}.now[data-stage=idle] .artist{white-space:normal;color:var(--dim)}.sub{color:var(--dim);margin:0;font-size:.85rem}.progress{flex-direction:column;gap:.2rem;display:flex}.time{color:var(--dim);font-variant-numeric:tabular-nums;justify-content:space-between;font-size:.78rem;display:flex}.track-line{background:var(--track);border-radius:999px;height:.3rem;margin:.8rem 0}.transport{grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;display:grid}.transport-side{align-items:center;gap:.75rem;display:flex}.transport-side.start{justify-content:flex-end}.play{background:var(--accent);width:4.6rem;height:4.6rem;color:var(--accent-ink);box-shadow:0 1rem 2.5rem -.75rem var(--accent-glow), inset 0 1px 0 #ffffff4d;transition:transform .2s var(--ease), box-shadow .3s;border:0;border-radius:999px;flex:none;justify-content:center;align-items:center;display:inline-flex;position:relative}.play:hover{box-shadow:0 1.2rem 3rem -.6rem var(--accent-glow), inset 0 1px 0 #ffffff4d;transform:scale(1.05)}.play:active{transform:scale(.95)}.play.small{width:2.9rem;height:2.9rem;box-shadow:0 .5rem 1.2rem -.4rem var(--accent-glow)}.play.busy:after{content:"";border:2px solid #0000;border-top-color:var(--accent);border-radius:999px;animation:.9s linear infinite spin;position:absolute;inset:-.35rem}.now-foot{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:.75rem;padding-top:1rem;display:flex}.autoplay-note{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:1rem;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem .5rem .5rem .9rem;display:flex}.autoplay-note .sub{color:var(--soft)}.listeners{color:var(--dim);align-items:center;gap:.45rem;margin:0;font-size:.8rem;display:flex}.live-dot{background:var(--accent);width:.45rem;height:.45rem;box-shadow:0 0 0 0 var(--accent-glow);animation:ping 2s var(--ease) infinite;border-radius:999px}@keyframes ping{70%,to{box-shadow:0 0 0 .45rem #0000}}.fine{color:var(--faint);margin:0;font-size:.8rem}.slider{appearance:none;box-sizing:border-box;cursor:pointer;--fill:0%;--h:.3rem;background:0 0;width:calc(100% + 1.4rem);height:1.75rem;margin:0 -.7rem;padding:0 .7rem}.slider::-webkit-slider-runnable-track{height:var(--h);background:linear-gradient(to right, var(--accent) var(--fill), var(--track) var(--fill));border-radius:999px;transition:height .15s}.slider::-moz-range-track{height:var(--h);background:linear-gradient(to right, var(--accent) var(--fill), var(--track) var(--fill));border-radius:999px}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:.9rem;height:.9rem;margin-top:calc((var(--h) - .9rem) / 2);box-shadow:0 0 0 .3rem var(--accent-soft), 0 .2rem .6rem #00000080;transition:transform .15s var(--ease);background:#fff;border:0;border-radius:999px;transform:scale(.6)}.slider::-moz-range-thumb{width:.9rem;height:.9rem;box-shadow:0 0 0 .3rem var(--accent-soft), 0 .2rem .6rem #00000080;background:#fff;border:0;border-radius:999px}.slider:hover,.slider:focus-visible{--h:.42rem}.slider:hover::-webkit-slider-thumb{transform:scale(1)}.slider:focus-visible::-webkit-slider-thumb{transform:scale(1)}.slider:active::-webkit-slider-thumb{transform:scale(1)}.slider:focus-visible{outline-offset:4px}.switch{min-height:2.9rem;color:var(--soft);cursor:pointer;align-items:center;gap:.65rem;font-size:.92rem;display:inline-flex;position:relative}.switch input{opacity:0;cursor:pointer;width:2.5rem;height:1.4rem;margin:0;position:absolute}.knob{background:var(--track);border-radius:999px;width:2.5rem;height:1.4rem;transition:background .2s;position:relative}.knob:after{content:"";background:var(--soft);width:1rem;height:1rem;transition:transform .25s var(--ease), background .2s;border-radius:999px;position:absolute;top:.2rem;left:.2rem;box-shadow:0 .1rem .3rem #0006}.switch input:checked+.knob{background:var(--accent)}.switch input:checked+.knob:after{background:var(--accent-ink);transform:translate(1.1rem)}.switch input:focus-visible+.knob{outline:2px solid var(--accent);outline-offset:2px}.search{flex-direction:column;gap:.9rem;display:flex}.search-box{border:1px solid var(--line-strong);min-height:3.5rem;color:var(--dim);background:#00000047;border-radius:999px;align-items:center;gap:.75rem;padding:0 .4rem 0 1.15rem;transition:border-color .2s,box-shadow .2s,background .2s;display:flex}.search-box:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 .3rem var(--accent-soft);color:var(--accent);background:#0006}.search-box>svg{flex:none;width:1.2rem;height:1.2rem}.search-box input{min-width:0;min-height:3.2rem;color:var(--text);background:0 0;border:0;outline:none;flex:1;font-size:1.05rem}.search-box input::placeholder{color:var(--faint)}.hint{color:var(--faint);margin:0 0 0 .75rem;font-size:.87rem}.label{color:var(--dim);text-transform:uppercase;letter-spacing:.14em;align-items:center;gap:.5rem;margin:0 0 .6rem .65rem;font-size:.72rem;font-weight:700;display:flex}.count{background:var(--accent-soft);min-width:1.5rem;color:var(--accent);letter-spacing:0;text-align:center;border-radius:999px;padding:.05rem .45rem;font-size:.72rem}.label-row{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.label-row .label{margin-bottom:0}.rows{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.song{border-radius:1rem;align-items:center;gap:.9rem;padding:.45rem .65rem;transition:background .2s;display:flex}.song:hover,.song:focus-within{background:var(--hover)}.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:.82rem}.len{color:var(--dim);font-variant-numeric:tabular-nums;text-align:right;min-width:2.4rem;font-size:.82rem}.song .icon-btn.ring:not(.done){transition:background .2s,color .2s,border-color .2s,transform .15s}.song:hover .icon-btn.ring:not(.done):not(:disabled){background:var(--accent);color:var(--accent-ink);border-color:#0000}.grip{width:1.6rem;color:var(--faint);cursor:grab;font-variant-numeric:tabular-nums;touch-action:none;flex:none;justify-content:center;align-self:stretch;align-items:center;font-size:.82rem;display:flex;position:relative}.queue-row{-webkit-user-select:none;user-select:none;transition:transform .22s var(--ease), background .2s, box-shadow .2s;position:relative}.queue-list.sorting .queue-row:not(.lifted){pointer-events:none}.queue-list.sorting,.queue-list.sorting *{cursor:grabbing}.queue-list.sorting .queue-row .reorder{opacity:0}.queue-row img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none;pointer-events:none}.queue-list.settling .queue-row{transition:none}.queue-row.lifted{z-index:3;box-shadow:0 1.1rem 2.6rem -.8rem #000000bf, 0 0 0 1px var(--accent-line);background:#26262ef5;transition:background .2s,box-shadow .2s}.queue-row.lifted .grip{color:var(--accent)}.queue-row.lifted .grip .pos{display:none}.queue-row.lifted .grip svg{color:var(--accent);display:block}.grip svg{color:var(--dim);display:none}.reorder{display:flex}.auto-row{opacity:.62;transition:opacity .2s,background .2s}.auto-row:hover{opacity:.9}.auto-row .len{margin-right:4.8rem}.auto-row .grip{cursor:default;color:var(--accent)}.auto-row .grip svg{color:inherit;display:block}.auto-row .swap{transition:color .2s, background .2s, transform .3s var(--ease)}.auto-row .swap:hover{color:var(--text);background:var(--hover);transform:rotate(90deg)}.who{vertical-align:bottom;align-items:center;gap:.3rem;max-width:100%;display:inline-flex}.who img,.who-initial{object-fit:cover;background:var(--press);border-radius:999px;flex:none;width:1rem;height:1rem}.who-initial{justify-content:center;align-items:center;font-size:.6rem;font-weight:700;display:inline-flex}.who-name{text-overflow:ellipsis;overflow:hidden}.autoplay-controls{flex-wrap:wrap;align-items:center;gap:.4rem .75rem;display:inline-flex}.segmented{border:1px solid var(--line-strong);border-radius:999px;padding:2px;display:inline-flex}.segmented button{min-height:1.9rem;color:var(--dim);background:0 0;border:0;border-radius:999px;align-items:center;gap:.3rem;padding:0 .7rem;font-size:.8rem;font-weight:600;transition:color .2s,background .2s;display:inline-flex}.segmented button:hover{color:var(--text)}.segmented button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}.segmented button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.auto-group{animation:fade-in .45s var(--ease) backwards;margin-top:.4rem}.auto-label{color:var(--accent);letter-spacing:.14em;text-transform:uppercase;align-items:center;gap:.75rem;margin:.4rem .65rem .35rem;font-size:.68rem;font-weight:700;display:flex}.auto-label:after{content:"";background:linear-gradient(to right, var(--accent-line), transparent);flex:1;height:1px}.tag{border:1px solid var(--accent-line);color:var(--accent);border-radius:999px;flex:none;padding:.15rem .65rem;font-size:.75rem;font-weight:600}.num{width:1.6rem;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right;flex:none;font-size:.85rem}@media (hover:none){.grip .pos{display:none}.grip svg{display:block}}@media (hover:hover){.queue-row{cursor:grab}.queue-row .reorder{opacity:0;transition:opacity .2s}.queue-row:hover .reorder,.queue-row:focus-within .reorder{opacity:1}.queue-row:hover .grip .pos{display:none}.queue-row:hover .grip svg{display:block}}.rows.stale{opacity:.4;transition:opacity .15s}.rows.refreshed{animation:fade-in .45s var(--ease) backwards}@media (width>=861px){.page{height:100dvh;min-height:0;padding-bottom:0}.main{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;flex:1;min-height:0;padding-bottom:1.5rem;overflow-y:auto}.main:has(>.player){margin-inline:-.75rem;padding:0 .75rem;overflow:hidden}.player{flex:1;align-items:stretch;height:100%;min-height:0}.now-col{scrollbar-width:none;justify-content:safe center;min-height:0;margin-inline:-.75rem;padding:1rem .75rem;overflow-y:auto}.now-stage{--stage:min(100%, max(15rem, calc(100dvh - 36rem)))}.now-stage:has(.reveal[data-open=true]){--stage:min(100%, max(15rem, calc(100dvh - 41.5rem)))}.side{scrollbar-width:none;min-height:0;margin-bottom:1.5rem;overflow-y:auto}.now-col::-webkit-scrollbar{display:none}.side::-webkit-scrollbar{display:none}.discover-col::-webkit-scrollbar{display:none}.queue-col::-webkit-scrollbar{display:none}}@media (width>=861px) and (height<=760px){:is(.now-stage,.now-stage:has(.reveal[data-open=true])){--stage:100%}.now{grid-template-columns:8rem minmax(0,1fr);align-items:center;gap:1.1rem;display:grid}.now>:not(.cover):not(.now-text){grid-column:1/-1}.art-hero{border-radius:1.1rem}.now{--title-size:1.4rem}}@media (width>=1440px){.side{box-shadow:none;background:0 0;border:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,1.4vw,2rem);padding:0;display:grid;overflow:hidden}.discover-col,.queue-col{background:var(--panel);border:1px solid var(--line);border-radius:var(--panel-radius);scrollbar-width:none;flex-direction:column;gap:2rem;min-width:0;min-height:0;padding:1.25rem;display:flex;overflow-y:auto;box-shadow:0 2rem 4rem -2rem #00000080}.queue-col:empty{display:none}.side:has(>.queue-col:empty){grid-template-columns:minmax(0,1fr)}}@media (width<=860px){.player{grid-template-columns:minmax(0,1fr);gap:1.5rem}.now-col{width:100%;max-width:46rem;margin-inline:auto}.now{grid-template-columns:13rem minmax(0,1fr);align-items:center;gap:1.1rem 1.5rem;display:grid}.now>.cover{grid-row:1/span 2}.now>.now-text{align-self:end}.now>.progress{align-self:start}.now>:not(.cover):not(.now-text):not(.progress){grid-column:1/-1}.side{width:100%;max-width:46rem;margin-inline:auto;padding:1rem}}@media (width<=560px){.page{gap:1rem;padding:.9rem .9rem 2.5rem}.page:has(.dock){padding-bottom:6.5rem}.top{gap:.75rem}.tabs{order:3;width:100%}.tabs button{flex:1;padding:0 .6rem}.now{grid-template-columns:6.5rem minmax(0,1fr);gap:1rem}.now>.cover{grid-row:auto}.now>.now-text{align-self:center}.now>.progress{grid-column:1/-1}.art-hero{border-radius:1rem;box-shadow:0 1rem 2rem -1rem #000c}.now{--title-size:1.3rem}.artist{font-size:.95rem}.side{border-radius:1.4rem;gap:1.6rem;padding:.6rem}.search-box{min-height:3.2rem}.plays,.queue-row .len,.auto-row .len{display:none}.grip{width:1.9rem;margin-left:-.35rem}.song{gap:.75rem;padding:.4rem .35rem}.label{margin-left:.35rem}}.dock{left:.6rem;right:.6rem;bottom:max(.6rem, env(safe-area-inset-bottom));z-index:5;border:1px solid var(--line-strong);-webkit-backdrop-filter:blur(24px)saturate(1.6);backdrop-filter:blur(24px)saturate(1.6);opacity:0;transition:transform .45s var(--ease), opacity .3s;background:#16161bc7;border-radius:1.25rem;align-items:center;gap:.75rem;padding:.55rem .55rem .55rem .6rem;display:flex;position:fixed;overflow:hidden;transform:translateY(calc(100% + 1.5rem));box-shadow:0 1.25rem 3rem -1rem #000c}.dock[data-shown=true]{opacity:1;transform:none}.dock-line{background:linear-gradient(to right, var(--accent) var(--fill), transparent var(--fill));height:2px;position:absolute;top:0;left:0;right:0}.dock .icon-btn{color:var(--soft)}@media (width>=861px){.dock{display:none}}.sheet{flex-direction:column;gap:1.5rem;width:100%;max-width:110rem;display:flex}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--panel-radius);flex-direction:column;gap:1.25rem;padding:1.25rem;display:flex;box-shadow:0 2rem 4rem -2rem #00000080}.panel.narrow{width:100%;max-width:40rem}.create{background:var(--panel);border:1px solid var(--line-strong);border-radius:999px;align-items:center;gap:.75rem;max-width:36rem;min-height:3.5rem;padding:0 .4rem 0 .5rem;transition:border-color .2s,box-shadow .2s;display:flex}.create:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 .3rem var(--accent-soft)}.create-icon{background:var(--accent-soft);width:2.5rem;height:2.5rem;color:var(--accent);border-radius:999px;flex:none;justify-content:center;align-items:center;display:inline-flex}.create input{background:0 0;border:0;outline:none;flex:1;min-width:0;min-height:3.2rem;font-size:1rem}.create input::placeholder{color:var(--faint)}.tiles{grid-template-columns:repeat(auto-fill,minmax(min(11rem,42vw),1fr));gap:clamp(.75rem,1.5vw,1.5rem);margin:0;padding:0;list-style:none;display:grid}.tile-card{text-align:left;width:100%;transition:background .25s, border-color .25s, transform .25s var(--ease);background:0 0;border:1px solid #0000;border-radius:1.25rem;flex-direction:column;gap:.2rem;padding:.7rem .7rem .9rem;display:flex}.tile-card:hover{background:var(--panel);border-color:var(--line);transform:translateY(-2px)}.tile-card .tile{margin-bottom:.6rem}.tile-card .name{white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.tile-card .sub{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.tile{aspect-ratio:1;color:#ffffffd9;background:radial-gradient(circle at 30% 20%, hsl(calc(var(--h) + 30) 85% 70% / .9), transparent 55%), linear-gradient(140deg, hsl(var(--h) 70% 48%), hsl(calc(var(--h) + 50) 65% 22%));width:100%;box-shadow:0 1.25rem 2.5rem -1.25rem hsl(var(--h) 70% 30% / .9), inset 0 0 0 1px #ffffff1a;border-radius:1rem;justify-content:center;align-items:center;display:flex}.tile svg{filter:drop-shadow(0 .25rem .5rem #0000004d);width:30%;height:30%}.back{align-self:flex-start;margin-left:-.5rem}.list-hero{flex-wrap:wrap;align-items:flex-end;gap:clamp(1.25rem,3vw,2.5rem);display:flex}.tile-hero{width:clamp(9rem,18vw,15rem)}.list-hero-text{flex-direction:column;flex:18rem;gap:.5rem;min-width:0;display:flex}.list-hero-text .title{font-size:clamp(1.8rem,1rem + 2.5vw,3.5rem)}.list-hero-text .row{margin-top:.5rem}.day{flex-direction:column;display:flex}.day .label{margin-left:.65rem}.history-rows{grid-template-columns:repeat(auto-fill,minmax(min(100%,30rem),1fr));gap:.2rem clamp(.75rem,1.5vw,1.5rem);display:grid}.history-rows .pill{opacity:.85;min-height:2.2rem;font-size:.82rem}@media (hover:hover){.history-rows .pill{opacity:0;transition:opacity .2s,background .2s,border-color .2s}.history-rows .song:hover .pill,.history-rows .song:focus-within .pill,.history-rows .pill.done,.history-rows .pill:disabled{opacity:1}}.row{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.btn{border:1px solid var(--line-strong);background:#ffffff0f;border-radius:999px;min-height:2.75rem;padding:0 1.25rem;font-size:.92rem;font-weight:600;transition:background .2s,border-color .2s}.btn:hover:not(:disabled){background:var(--press)}.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 .75rem 2rem -.75rem var(--accent-glow);border-color:#0000}.btn.primary:hover:not(:disabled){background:color-mix(in oklab, var(--accent) 88%, white)}.btn.danger{color:var(--danger)}.btn.done{color:var(--accent)}.btn.primary.done{color:var(--accent-ink)}.field{border:1px solid var(--line-strong);background:#0000004d;border-radius:.9rem;width:100%;min-height:3rem;padding:0 1rem}.notice{border:1px solid var(--line-strong);background:var(--panel);color:var(--soft);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:1rem;margin:0;padding:.8rem 1rem;font-size:.9rem}.error{color:var(--danger);margin:0;font-size:.9rem}label.stack{flex-direction:column;gap:.5rem;font-size:.92rem;font-weight:600;display:flex}.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:.4}}.skeleton{background:#ffffff12;animation:1.4s ease-in-out infinite pulse}.skeleton.line{border-radius:999px;width:40%;height:.9rem}.skeleton.line.wide{width:75%;height:1.6rem}.skeleton.search-line{border-radius:999px;flex:none;height:3.5rem}.skeleton-rows{flex-direction:column;flex:none;order:2;gap:.9rem;padding:.25rem .65rem;display:flex}.skeleton.label-line{width:6rem;height:.6rem;margin-bottom:.2rem}.skeleton-row{align-items:center;gap:.9rem;display:flex}.skeleton-row .art-md{border-radius:.6rem;flex:none}.skeleton-text{flex-direction:column;flex:1;gap:.45rem;display:flex}.skeleton-text .line{height:.8rem}.skeleton-text .line.short{width:30%;height:.65rem}.now-text:has(.skeleton){gap:.7rem}@media (prefers-reduced-motion:reduce){:root{transition:none}.ambient img,.eq i,.live-dot,.skeleton{animation:none}.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}.art-hero,.art-hero img,.dock,.play-icon svg,.reveal,.now-stage{transition:none}.swap{animation:none}}
