@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-vietnamese-wdth-normal-rJmnGBSt.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-ext-wdth-normal-7khWdh9v.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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:Archivo Variable;font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(/assets/archivo-latin-wdth-normal-DY7AcnAa.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--black: #000;--white: #fff;--grey: #9b9b9b;--grey-2: #5c5c5c;--line: #232323;--raise: #121212;--danger: #fff;--font: "Archivo Variable", system-ui, sans-serif;--wide: 125%;--gutter: 16px;--dock-h: calc(56px + env(safe-area-inset-bottom)) ;--mini-h: 60px;color-scheme:dark}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--black);color:var(--white);font-family:var(--font);font-stretch:100%;font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none}body.locked{overflow:hidden}button,input,select{font:inherit;color:inherit}button{background:none;border:0;padding:0;cursor:pointer}button:disabled{cursor:default;opacity:.4}a{color:inherit}:focus-visible{outline:2px solid var(--white);outline-offset:2px}img{display:block}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;transition-duration:.001ms!important}}.display{font-stretch:var(--wide);font-weight:800;font-size:32px;line-height:1.05;letter-spacing:-.02em;margin:0}.display-xl{font-size:clamp(32px,9vw,56px);overflow-wrap:anywhere}.wordmark{font-stretch:var(--wide);font-weight:900;font-size:clamp(40px,12vw,56px);letter-spacing:-.04em;margin:0 0 40px}.section-title{font-size:13px;font-weight:600;color:var(--grey);margin:24px var(--gutter) 8px;letter-spacing:.01em}.hint{color:var(--grey);font-size:14px;margin:8px 0;max-width:60ch}.label{display:block;font-size:13px;color:var(--grey);margin-bottom:6px}.error{background:var(--white);color:var(--black);padding:8px 10px;font-size:14px;font-weight:500;margin:8px 0}.banner{color:var(--grey);font-size:14px}.empty{color:var(--grey);padding:32px var(--gutter);max-width:60ch}.empty .btn{margin-top:12px}.pad{padding:0 var(--gutter)}.shell{min-height:100dvh}.main{padding-bottom:calc(var(--dock-h) + var(--mini-h) + 24px);max-width:760px;margin:0 auto}.view{padding-top:calc(env(safe-area-inset-top) + 16px)}.view-head{display:flex;align-items:center;justify-content:space-between;padding:8px var(--gutter) 16px}.offline-bar{position:sticky;top:0;z-index:30;background:var(--white);color:var(--black);font-size:13px;font-weight:600;text-align:center;padding:calc(env(safe-area-inset-top) + 6px) var(--gutter) 6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid var(--white);border-radius:2px;font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}.btn:active:not(:disabled){background:var(--white);color:var(--black)}.btn-primary{background:var(--white);color:var(--black)}.btn-primary:active:not(:disabled){background:var(--grey);border-color:var(--grey)}.btn-ghost{border-color:var(--line);color:var(--grey)}.btn-small{min-height:36px;padding:0 12px;font-size:14px}.btn-block{width:100%}.icon-btn{width:44px;height:44px;display:inline-grid;place-items:center;flex:none;border-radius:2px}.icon-btn:active:not(:disabled){background:var(--raise)}.icon-btn-outline{border:1px solid var(--line)}.icon-btn-lg svg{width:30px;height:30px}.icon-btn.on{color:var(--white)}.icon-btn-spacer{width:44px}.back{margin:0 4px}.input{width:100%;min-height:44px;padding:0 12px;background:var(--raise);border:1px solid var(--line);border-radius:2px}.input:focus{border-color:var(--white);outline:none}.input::placeholder{color:var(--grey-2)}.input-lg{min-height:52px;font-size:18px}.input-row{display:flex;gap:8px;align-items:center;margin:8px 0}.input-row.pad{padding:0 var(--gutter) 12px}select.input{appearance:none;padding-right:28px}.switch{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--grey);cursor:pointer}.switch input{position:absolute;opacity:0;width:1px;height:1px}.switch-track{width:40px;height:24px;border:1px solid var(--grey-2);border-radius:12px;position:relative;flex:none;transition:background .15s}.switch-track:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--grey);transition:transform .15s,background .15s}.switch input:checked+.switch-track{background:var(--white);border-color:var(--white)}.switch input:checked+.switch-track:after{transform:translate(16px);background:var(--black)}.switch input:checked~span:last-child{color:var(--white)}.switch input:focus-visible+.switch-track{outline:2px solid var(--white);outline-offset:2px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}.chip{border:1px solid var(--grey-2);border-radius:2px;padding:10px 14px;font-size:15px;font-weight:500}.chip:active:not(:disabled){background:var(--white);color:var(--black);border-color:var(--white)}.cover{object-fit:cover;background:var(--raise);flex:none;border-radius:2px}.cover-empty{display:inline-block;background:repeating-linear-gradient(135deg,var(--raise) 0 6px,#1b1b1b 6px 12px)}.cover-liked{display:inline-grid;place-items:center;background:var(--white);color:var(--black)}.glyph{color:var(--white);flex:none}.glyph-failed{color:var(--grey)}.spin{transform-origin:6px 6px;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.plist{list-style:none;margin:0;padding:0}.plist-item{display:flex;align-items:center;gap:14px;width:100%;padding:8px var(--gutter);text-align:left}.plist-item:active{background:var(--raise)}.plist-text{display:flex;flex-direction:column;min-width:0;flex:1}.plist-name{font-weight:600;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.plist-sub{color:var(--grey);font-size:14px}.plist-offline{padding:0 4px}.hero{padding:8px var(--gutter) 20px;display:grid;gap:14px;justify-items:start}.hero-sub{margin:-6px 0 0;color:var(--grey);font-size:14px}.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.foot-actions{margin-top:32px}.rows{list-style:none;margin:0;padding:0}.row{display:flex;align-items:center}.row-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;padding:6px 0 6px var(--gutter);text-align:left;min-height:60px}.row-more{margin-right:4px;color:var(--grey)}.row-cover{position:relative;flex:none}.row-text{display:flex;flex-direction:column;min-width:0;flex:1}.row-title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-sub{color:var(--grey);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-note{color:var(--white);font-weight:600;margin-right:6px}.row-error{color:var(--grey);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-meta{display:flex;align-items:center;gap:10px;color:var(--grey);font-size:13px;font-variant-numeric:tabular-nums}.row-dim .row-title,.row-dim .row-cover{opacity:.4}.row-main:active{background:var(--raise)}.row-active{background:var(--white);color:var(--black)}.row-active .row-sub,.row-active .row-meta,.row-active .row-more,.row-active .row-note,.row-active .glyph{color:var(--black)}.row-active .row-main:active{background:var(--white)}.row-active .row-title{font-weight:700}.eq{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:10px;background:#0000008c}.eq i{width:4px;background:var(--white);animation:eq .9s ease-in-out infinite alternate}.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}@keyframes eq{0%{height:4px}to{height:20px}}.dock{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--black);border-top:1px solid var(--line)}.mini{position:relative;display:flex;align-items:center;gap:4px;height:var(--mini-h);padding:0 4px 0 var(--gutter);border-bottom:1px solid var(--line);max-width:760px;margin:0 auto}.mini-progress{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--white);transform-origin:left}.mini-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left;height:100%}.mini-text{display:flex;flex-direction:column;min-width:0}.mini-title{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-sub{color:var(--grey);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tabs{display:flex;max-width:760px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom)}.tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 0 6px;font-size:11px;font-weight:500;color:var(--grey-2);text-decoration:none}.tab svg{width:22px;height:22px}.tab-active{color:var(--white)}.badge{position:absolute;top:3px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--white);color:var(--black);font-size:11px;font-weight:700;line-height:18px;text-align:center}.np{position:fixed;inset:0;z-index:40;overflow-y:auto;background:var(--black);padding:calc(env(safe-area-inset-top) + 4px) var(--gutter) calc(env(safe-area-inset-bottom) + 24px);display:flex;flex-direction:column;animation:np-in .24s cubic-bezier(.2,.8,.2,1)}@keyframes np-in{0%{transform:translateY(24px);opacity:0}}.np>*{width:100%;max-width:520px;margin-left:auto;margin-right:auto}.np-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.np-context{font-size:13px;color:var(--grey);font-weight:600;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 8px}.np-art{aspect-ratio:1}.np-art img,.np-art-empty{width:100%;height:100%;object-fit:cover;border-radius:2px;display:block}.np-meta{display:flex;align-items:flex-start;gap:8px;margin-top:24px}.np-titles{flex:1;min-width:0}.np-title{margin:0;font-stretch:var(--wide);font-weight:800;letter-spacing:-.025em;font-size:clamp(26px,7.5vw,40px);line-height:1.02;overflow-wrap:anywhere}.np-artist{margin:6px 0 0;color:var(--grey);font-size:17px}.np-scrub{margin-top:20px}.np-scrub input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;cursor:pointer}.np-scrub input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(to right,var(--white) var(--p),var(--line) var(--p))}.np-scrub input[type=range]::-moz-range-track{height:3px;background:var(--line)}.np-scrub input[type=range]::-moz-range-progress{height:3px;background:var(--white)}.np-scrub input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5.5px;background:var(--white);border-radius:50%;border:0}.np-scrub input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--white);border-radius:50%;border:0}.np-times{display:flex;justify-content:space-between;color:var(--grey);font-size:12px;font-variant-numeric:tabular-nums}.np-controls{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.np-controls>.icon-btn:not(.on):not(.icon-btn-lg){color:var(--grey-2)}.play-big{width:72px;height:72px;border-radius:50%;background:var(--white);color:var(--black);display:grid;place-items:center}.play-big svg{width:30px;height:30px}.play-big:active{transform:scale(.96)}.repeat{position:relative}.repeat-one{position:absolute;top:7px;right:6px;font-size:9px;font-weight:800;background:var(--black);padding:0 2px}.spinner{width:26px;height:26px;border:3px solid var(--black);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}.np-wrong{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;min-height:44px;border:1px solid var(--line);border-radius:2px;font-size:14px;font-weight:600;color:var(--grey)}.np-wrong:active:not(:disabled){background:var(--white);color:var(--black)}.np-error{text-align:center}.np-queue ol{list-style:none;margin:0;padding:0}.np-queue .section-title{margin:28px 0 4px}.np-queue button{display:flex;flex-direction:column;width:100%;padding:8px 0;text-align:left}.np-q-title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np-q-sub{color:var(--grey);font-size:14px}.sheet-backdrop{position:fixed;inset:0;z-index:50;background:#000000b3;display:flex;align-items:flex-end;justify-content:center}.sheet{width:100%;max-width:560px;max-height:88dvh;overflow-y:auto;background:var(--raise);border-top:1px solid var(--line);padding:8px var(--gutter) calc(env(safe-area-inset-bottom) + 20px);animation:sheet-in .2s cubic-bezier(.2,.8,.2,1)}.sheet:focus{outline:none}@keyframes sheet-in{0%{transform:translateY(40px);opacity:0}}.sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--grey-2);margin:4px auto 12px}.sheet-title{font-stretch:var(--wide);font-weight:800;font-size:22px;letter-spacing:-.02em;margin:0 0 4px;line-height:1.1}.sheet-lead{color:var(--grey);margin:0 0 12px;font-size:14px}.sheet-lead strong{color:var(--white);font-weight:600;font-size:16px}.sheet-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}.menu{list-style:none;margin:0 calc(-1 * var(--gutter));padding:0}.menu button{width:100%;text-align:left;padding:14px var(--gutter);font-size:16px}.menu button:active{background:var(--black)}.menu-strong{font-weight:700}.menu-muted{color:var(--grey)}.cands{list-style:none;margin:8px 0 0;padding:0}.cand{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}.cand-current{opacity:.55}.cand-preview{position:relative;flex:none;width:64px;height:36px;background:var(--black)}.cand-preview img,.cand-thumb{width:64px;height:36px;object-fit:cover;flex:none}.cand-play{position:absolute;inset:0;display:grid;place-items:center;background:#00000073}.cand-play svg{width:18px;height:18px}.cand-text{display:flex;flex-direction:column;min-width:0;flex:1}.cand-title{font-size:14px;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.cand-sub{color:var(--grey);font-size:12px}.cand-diff{color:var(--white);font-weight:600}.cand-badge{font-size:12px;color:var(--grey)}.link-form{margin-top:16px}.group{padding:0 var(--gutter) 8px;border-top:1px solid var(--line);margin-top:8px}.group .section-title{margin:16px 0 8px}.group>.btn{margin-top:8px}.kv{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 0}.stats div{border-left:1px solid var(--line);padding-left:8px}.stats dt{color:var(--grey);font-size:12px}.stats dd{margin:0;font-stretch:var(--wide);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}.yt-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:16px 0 8px}.select-wrap{flex:1;min-width:160px}.login{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding:24px;max-width:420px;margin:0 auto}.login form{display:grid;gap:12px}#toast{position:fixed;left:50%;bottom:calc(var(--dock-h) + var(--mini-h) + 16px);z-index:60;transform:translate(-50%,12px);opacity:0;pointer-events:none;background:var(--white);color:var(--black);font-weight:600;font-size:14px;padding:10px 14px;border-radius:2px;max-width:calc(100% - 32px);transition:opacity .18s,transform .18s}#toast.show{opacity:1;transform:translate(-50%)}@media(min-width:720px){:root{--gutter: 24px}.display{font-size:40px}}.row-meta-end{padding-right:var(--gutter)}
