:root,[data-theme=dark]{color-scheme:dark;--bg:#0d0d10;--ink:#f5f5f7;--mute:rgba(245,245,247,.6);--panel:rgba(32,32,38,.72);--side:rgba(22,22,27,.62);--line:rgba(255,255,255,.1);--fill:rgba(255,255,255,.06);--fill2:rgba(255,255,255,.12);--acc:#fa243c;--on:#fff;--glow:rgba(250,36,60,.22);--bgf:blur(60px) saturate(1.5) brightness(.5)}
[data-theme=ocean]{--acc:#0a84ff;--glow:rgba(10,132,255,.22);--bg:#0a0d14}
[data-theme=violet]{--acc:#bf5af2;--glow:rgba(191,90,242,.22);--bg:#100c16}
[data-theme=forest]{--acc:#30d158;--glow:rgba(48,209,88,.2);--bg:#0a120d;--on:#06210f}
[data-theme=light]{color-scheme:light;--bg:#f5f5f7;--ink:#1d1d1f;--mute:rgba(29,29,31,.6);--panel:rgba(255,255,255,.78);--side:rgba(255,255,255,.62);--line:rgba(0,0,0,.09);--fill:rgba(0,0,0,.045);--fill2:rgba(0,0,0,.09);--acc:#fa243c;--on:#fff;--glow:rgba(250,36,60,.12);--bgf:blur(60px) saturate(1.4) brightness(1.15)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 45% at 75% -5%,var(--glow),transparent)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:focus-visible,input:focus-visible,a:focus-visible,.tr:focus-visible,.qr:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.glass{background:var(--panel);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%)}
.dm{}
/* sidebar */
.side{position:fixed;left:0;top:0;bottom:0;width:250px;padding:22px 14px 100px;background:var(--side);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-right:1px solid var(--line);overflow-y:auto;z-index:20;display:flex;flex-direction:column;gap:4px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;padding:0 10px 18px;letter-spacing:-.01em}
.brand svg{color:var(--acc)}
.nav a,.nav-b{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;font-weight:600;font-size:.95rem;width:100%;text-align:start}
.nav a svg,.nav-b svg{color:var(--acc)}
.nav a:hover,.nav-b:hover{background:var(--fill)}
.nav a.act{background:var(--fill2)}
.sec{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);padding:18px 12px 6px}
.pls a{display:flex;align-items:center;gap:10px;padding:6px 12px;border-radius:10px;font-weight:500;font-size:.9rem}
.pls a:hover{background:var(--fill)}.pls a.act{background:var(--fill2)}
.pls img{width:28px;height:28px;border-radius:6px;object-fit:cover;background:var(--fill)}
.pls span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp{flex:1}
/* main */
.main{margin-left:250px;padding:30px 36px 130px;min-height:100vh}
.lt{margin:0;font-size:2.2rem;font-weight:800;letter-spacing:-.02em}
.lead{color:var(--mute);margin:6px 0 0;line-height:1.5}
.msg{padding:30px;text-align:center;color:var(--mute);line-height:1.6;word-break:break-word}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:26px 22px;margin-top:26px}
.card{display:block}
.art{aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--fill);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .25s}
.card:hover .art{transform:scale(1.025)}
.art img{width:100%;height:100%;object-fit:cover;display:block}
.card b{display:block;margin-top:10px;font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card small{color:var(--mute);font-size:.85rem}
.phead{display:flex;gap:28px;align-items:flex-end;margin-bottom:30px;flex-wrap:wrap}
.phead .pa{width:232px;aspect-ratio:1;border-radius:12px;object-fit:cover;box-shadow:0 16px 40px rgba(0,0,0,.45);background:var(--fill)}
.phead .pt{flex:1;min-width:240px}
.kick{font-size:.72rem;font-weight:700;letter-spacing:.08em;color:var(--mute)}
.phead h1{margin:4px 0 0;font-size:2.4rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.meta{color:var(--mute);font-size:.85rem;margin:8px 0 0}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pill{display:flex;align-items:center;gap:8px;padding:10px 26px;border-radius:10px;font-weight:700;background:var(--fill2);color:var(--acc)}
.pill.pri{background:var(--acc);color:var(--on)}
.pill:hover{filter:brightness(1.12)}
.th,.tr{display:grid;grid-template-columns:44px minmax(0,2fr) minmax(0,1.2fr) minmax(0,1.2fr) 80px 52px 34px 34px;gap:12px;align-items:center;padding:8px 12px}
.th{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--line);padding-bottom:10px}
.tr{border-radius:8px;cursor:pointer}
.tr:nth-child(even){background:var(--fill)}
.tr:hover{background:var(--fill2)}
.tr .n{display:grid;place-items:center;color:var(--mute);font-variant-numeric:tabular-nums;height:24px}
.tr .pi,.tr .eq{display:none}
.tr:hover .no{display:none}.tr:hover .pi{display:block;color:var(--ink)}
.tr.cur .no,.tr.cur:hover .pi{display:none}.tr.cur .eq{display:flex}
.tr.cur .ti b,.tr.cur .n{color:var(--acc)}
.eq{align-items:flex-end;gap:2px;height:14px}
.eq i{display:block;width:3px;height:100%;background:var(--acc);border-radius:2px;transform-origin:bottom;animation:eq .9s ease-in-out infinite alternate}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}
body.paused .eq i{animation-play-state:paused}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.ti{display:flex;align-items:center;gap:12px;min-width:0}
.ti img{width:40px;height:40px;border-radius:6px;object-fit:cover;background:var(--fill);flex:none}
.ti span{min-width:0}
.ti b{display:block;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ti small{display:none;color:var(--mute);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ar,.al{color:var(--mute);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q{font-size:.68rem;font-weight:700;color:var(--mute);border:1px solid var(--line);border-radius:5px;padding:2px 6px;justify-self:start;white-space:nowrap}
.du{color:var(--mute);font-size:.85rem;font-variant-numeric:tabular-nums;text-align:end}
.ib{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--mute);position:relative;transition:color .15s,background .15s}
.ib:hover{color:var(--ink)}
.ib.on{color:var(--acc)}
.ib.sm{width:34px;height:34px}.hb{opacity:0}.hb.on,.tr:hover .hb,.hb:focus-visible,.nmeta .hb,.bar .hb{opacity:1}.hb.on{color:var(--acc)}
.sbox{width:100%;max-width:560px;margin-top:18px;padding:12px 16px;border-radius:12px;border:1px solid var(--line);background:var(--fill);color:var(--ink);font:inherit;font-size:1rem}
.sbox::placeholder{color:var(--mute)}
/* range */
input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:9px;background:linear-gradient(90deg,var(--ink) var(--p,0%),var(--fill2) var(--p,0%));cursor:pointer;margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--ink)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--ink)}
/* bottom bar */
.bar{position:fixed;left:0;right:0;bottom:0;height:82px;z-index:40;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:16px;padding:0 20px;background:var(--panel);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-top:1px solid var(--line)}
.pop{display:flex;align-items:center;gap:12px;min-width:0;text-align:start}
.pop img{width:54px;height:54px;border-radius:8px;object-fit:cover;background:var(--fill);flex:none}
.pop span{min-width:0}
.pop b{display:block;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop small{display:block;color:var(--mute);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c{display:flex;flex-direction:column;gap:2px;min-width:0}
.ctl{display:flex;justify-content:center;align-items:center;gap:10px}
.ctl .ib{color:var(--ink)}.ctl .ib.on{color:var(--acc)}
.skr{display:flex;align-items:center;gap:10px}
.skr input{flex:1}
.skr span{font-size:.72rem;color:var(--mute);min-width:34px;text-align:center;font-variant-numeric:tabular-nums}
.r{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.r .vl{width:92px}
.qb{font-size:.68rem;font-weight:700;border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--mute);margin-right:6px;white-space:nowrap}
.prog{display:none}
/* tabs (mobile) */
.tabs{display:none}
/* now playing */
.np{position:fixed;inset:0;z-index:100;background:var(--bg);overflow-y:auto;transform:translateY(100%);visibility:hidden;transition:transform .45s cubic-bezier(.32,.72,0,1),visibility 0s .45s}
.np.open{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.32,.72,0,1)}
.npbg{position:fixed;inset:-10%;background-size:cover;background-position:center;filter:var(--bgf);transition:background-image .5s}
.npx{position:fixed;top:14px;left:18px;z-index:3;background:var(--fill2);backdrop-filter:blur(20px)}
.npg{position:relative;z-index:1;max-width:1100px;margin:0 auto;padding:70px 32px 36px;min-height:100vh;display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:center}
.ncov{width:100%;aspect-ratio:1;border-radius:14px;object-fit:cover;display:block;box-shadow:0 30px 70px rgba(0,0,0,.5);background:var(--fill);transition:transform .5s cubic-bezier(.32,.72,0,1)}
body.paused .ncov{transform:scale(.88)}
.nmeta{display:flex;align-items:center;gap:8px;margin-top:22px}
.nmeta>div:first-child{flex:1;min-width:0}
.nmeta h2{margin:0;font-size:1.35rem;font-weight:700;line-height:1.25}
.nmeta p{margin:2px 0 0;color:var(--mute);font-size:1.05rem}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:6px;background:var(--fill2)}
.chip.hi{background:var(--acc);color:var(--on)}
.npl .skr{margin-top:14px}.npl .skr input{height:6px}
.npl .ctl{margin:12px 0;gap:22px;justify-content:space-between}
.npl .vrow{display:flex;align-items:center;gap:10px;color:var(--mute)}
.npl .vrow input{flex:1}
.seg{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--fill);margin-bottom:14px;max-width:320px}
.seg button{flex:1;padding:8px;border-radius:9px;font-weight:600;color:var(--mute);font-size:.9rem}
.seg button[aria-selected=true]{background:var(--fill2);color:var(--ink)}
.pane{overflow-y:auto;height:min(62vh,600px);position:relative;-webkit-mask-image:linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(transparent,#000 6%,#000 94%,transparent);scrollbar-width:none}
.pane::-webkit-scrollbar{display:none}
.pane[hidden]{display:none}
#ly::before,#ly::after{content:"";display:block;height:140px}
.qh{color:var(--mute);font-size:.8rem;font-weight:600;padding:4px 8px 10px}
.qr{display:grid;grid-template-columns:44px minmax(0,1fr) auto 32px;gap:12px;align-items:center;padding:7px 8px;border-radius:10px;cursor:pointer}
.qr:hover{background:var(--fill)}.qr.cur{background:var(--fill2)}
.qr img{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--fill)}
.qr b{display:block;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr small{color:var(--mute);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr span{color:var(--mute);font-size:.82rem}
/* misc */
.menu{position:fixed;left:16px;bottom:96px;z-index:60;padding:8px;min-width:180px;border-radius:16px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.menu[hidden]{display:none}
.ti2{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:10px;font-weight:600;text-align:start}
.ti2:hover{background:var(--fill2)}.ti2.act{color:var(--acc)}
.ti2 i{width:22px;height:22px;border-radius:50%;display:block;border:1px solid var(--line)}
dialog{border:1px solid var(--line);border-radius:22px;padding:24px;width:min(460px,92vw);color:var(--ink);background:var(--bg)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dl{display:grid;grid-template-columns:110px 1fr;gap:10px 12px;margin:14px 0}
dt{color:var(--mute);font-size:.85rem}dd{margin:0;font-weight:600;word-break:break-word}
.toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);padding:12px 18px;border-radius:99px;font-weight:600;font-size:.9rem;opacity:0;pointer-events:none;transition:opacity .25s;z-index:120;border:1px solid var(--line)}
.toast.show{opacity:1}
@media(max-width:860px){
 .side{display:none}.dm{display:none!important}
 .main{margin-left:0;padding:22px 16px calc(150px + env(safe-area-inset-bottom))}
 .lt{font-size:1.9rem}
 .grid{grid-template-columns:repeat(2,1fr);gap:20px 14px}
 .phead{flex-direction:column;align-items:center;text-align:center;gap:18px}.phead .pa{width:min(70vw,260px)}.phead .pt{min-width:0;width:100%}.btns{justify-content:center}.pill{flex:1 1 auto;justify-content:center;padding:10px 16px}
 .th{display:none}
 .tr{grid-template-columns:30px minmax(0,1fr) 44px 34px;gap:10px}.tr .hb{display:none}
 .tr .ar,.tr .al,.tr .q{display:none}.ti small{display:block}
 .tabs{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--panel);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-top:1px solid var(--line)}
 .tabs a,.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.68rem;font-weight:600;color:var(--mute)}
 .tabs .act{color:var(--acc)}
 .bar{left:8px;right:8px;bottom:calc(66px + env(safe-area-inset-bottom));height:60px;border-radius:14px;border:1px solid var(--line);grid-template-columns:minmax(0,1fr) auto;padding:0 8px 0 8px;gap:8px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
 .bar:not(.on){display:none}
 .pop img{width:44px;height:44px}
 .prog{display:block;position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--fill2);border-radius:2px;overflow:hidden}
 .prog i{display:block;height:100%;width:0;background:var(--ink)}
 .menu{left:auto;right:12px;bottom:calc(72px + env(safe-area-inset-bottom))}
 .toast{bottom:150px}
 .npg{grid-template-columns:1fr;gap:20px;padding:64px 22px 40px;min-height:0}
 .ncov{max-width:min(82vw,380px);margin:0 auto}
 .pane{height:60vh}
 .seg{max-width:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* lyrics animation */
body{--lyfs:clamp(1.6rem,3vw,2.4rem)}
body[data-lys=s]{--lyfs:clamp(1.2rem,2.4vw,1.8rem)}
body[data-lys=l]{--lyfs:clamp(2rem,4vw,3rem)}
#ly p{margin:0;padding:12px 8px;font-size:var(--lyfs);font-weight:800;line-height:1.22;letter-spacing:-.015em;cursor:pointer;color:color-mix(in srgb,var(--ink) 42%,transparent);transform:scale(.9);transform-origin:left center;transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .5s,filter .5s,color .4s;filter:blur(calc(var(--d,0)*1px));opacity:calc(1 - var(--d,0)*.1)}
body.nblur #ly p{filter:none;opacity:1}
#ly p:hover{filter:none;opacity:.9}
#ly p.on{transform:scale(1);color:var(--ink);opacity:1;filter:none}
#ly p.on.k{background:linear-gradient(90deg,var(--ink) var(--f,0%),color-mix(in srgb,var(--ink) 42%,transparent) var(--f,0%));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#ly p .wd{transition:color .25s}
#ly p.on .wd{color:color-mix(in srgb,var(--ink) 42%,transparent)}#ly p.on .wd.w{color:var(--ink)}
#ly p.gap{display:flex;gap:8px;padding:18px 8px;filter:none}
#ly p.gap i{width:12px;height:12px;border-radius:50%;background:var(--ink);opacity:.3;transition:opacity .4s}
#ly p.gap.on i{animation:dot 1.4s ease-in-out infinite}#ly p.gap i:nth-child(2){animation-delay:.2s}#ly p.gap i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
#ly p.plain{font-size:1.1rem;font-weight:600;white-space:pre-wrap;cursor:auto;filter:none;opacity:.92;line-height:1.8;transform:none;color:var(--ink)}
.segrow{display:flex;align-items:center;gap:8px;margin-bottom:14px}.segrow .seg{margin:0;flex:1}
.lyh{display:none;align-items:center;gap:12px;margin-bottom:12px}
.lyh img{width:48px;height:48px;border-radius:8px;object-fit:cover;background:var(--fill)}
.lyh div{flex:1;min-width:0}.lyh b,.lyh small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lyh small{color:var(--mute)}
.np.lyf .npg{grid-template-columns:minmax(0,820px);justify-content:center;align-items:start}.np.lyf .npl{display:none}.np.lyf .lyh{display:flex}.np.lyf .pane{height:calc(100vh - 230px)}
/* menus */
.scrim{position:fixed;inset:0;z-index:125}
.cm{position:fixed;z-index:130;min-width:240px;max-width:min(320px,92vw);padding:6px;border-radius:14px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.45);max-height:70vh;overflow-y:auto}
.cm[hidden],.scrim[hidden]{display:none}
.cm button{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:9px;font-weight:500;font-size:.92rem;text-align:start}
.cm button:hover{background:var(--fill2)}.cm button.on{color:var(--acc)}
.cm button svg{color:var(--mute);flex:none}.cm button.on svg{color:var(--acc)}
.cm em{margin-inline-start:auto;font-style:normal;color:var(--mute);font-size:.8rem}
.cm hr{border:0;border-top:1px solid var(--line);margin:5px 4px}
.cmt{padding:8px 12px 6px;font-size:.78rem;font-weight:700;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* home / sections */
.sech{display:flex;align-items:center;gap:10px;margin:30px 0 12px}
.sech h2{margin:0;font-size:1.3rem;font-weight:800;letter-spacing:-.01em}
.sech a,.sech .ib{margin-inline-start:auto;color:var(--acc);font-weight:600;font-size:.9rem}.sech .ib{color:var(--mute)}.sech .ib+button{color:var(--acc);font-weight:600;font-size:.9rem}
.qg{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:2px 20px}
.qk{display:flex;align-items:center;gap:12px;padding:6px;border-radius:10px;cursor:pointer;text-align:start;min-width:0}
.qk:hover{background:var(--fill2)}.qk.cur b{color:var(--acc)}
.qk img{width:54px;height:54px;border-radius:8px;object-fit:cover;background:var(--fill);flex:none}
.qk>div{min-width:0;flex:1}.qk b{display:block;font-weight:600;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qk small{color:var(--mute);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.hr::-webkit-scrollbar{display:none}.hr .card{width:150px;flex:none;cursor:pointer}
.card.cur b{color:var(--acc)}
.grp{font-weight:800;font-size:1.05rem;padding:20px 12px 6px}
.dlp{height:3px;border-radius:3px;background:var(--fill2);overflow:hidden;margin-top:6px}.dlp i{display:block;height:100%;background:var(--acc);width:0}
.heartcover{display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),#000 220%);color:#fff;width:232px;aspect-ratio:1;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.45)}
.secr{display:flex;align-items:center;justify-content:space-between;padding-right:2px}
/* settings */
.sg{margin-top:26px}.sg h2{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:0 0 8px 4px}
.sc{border-radius:14px;background:var(--fill);overflow:hidden}
.sr{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line)}.sr:last-child{border:0}
.sr>div:first-child{flex:1;min-width:0}.sr b{display:block;font-weight:600}.sr small{color:var(--mute);font-size:.82rem}
.sw{width:50px;height:30px;border-radius:99px;background:var(--fill2);position:relative;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.sw.on{background:var(--acc)}.sw.on::after{transform:translateX(20px)}
.sg2{display:flex;gap:4px;padding:3px;border-radius:10px;background:var(--fill2)}
.sg2 button{padding:6px 12px;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--mute);white-space:nowrap}.sg2 button.on{background:var(--bg);color:var(--ink)}
select.sel{background:var(--fill2);color:var(--ink);border:0;border-radius:8px;padding:8px 10px;font:inherit}
.btn2{padding:8px 14px;border-radius:9px;background:var(--fill2);font-weight:600;font-size:.88rem}.btn2.red{color:var(--acc)}
.swatches{display:flex;gap:10px;flex-wrap:wrap}.swatches button{width:38px;height:38px;border-radius:50%;border:2px solid var(--line)}.swatches button.on{border-color:var(--ink)}
.kb{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;padding:14px 16px;font-size:.88rem;align-items:center}
.kb kbd{background:var(--fill2);padding:2px 8px;border-radius:6px;font-family:inherit;font-weight:600;font-size:.8rem;justify-self:start}
@media(max-width:860px){
 .cm{left:8px!important;right:8px!important;top:auto!important;bottom:calc(8px + env(safe-area-inset-bottom))!important;max-width:none}
 .qg{grid-template-columns:1fr}.sr{flex-wrap:wrap}.heartcover{width:min(70vw,260px)}.tabs a,.tabs button{font-size:.62rem}
}

/* RTL (Arabic) */
.ctl,.skr,.vrow,.sw,input[type=range]{direction:ltr}
[dir=rtl] .side{left:auto;right:0;border-right:0;border-left:1px solid var(--line)}
[dir=rtl] .main{margin-left:0;margin-right:250px}
[dir=rtl] .npx{left:auto;right:18px}
[dir=rtl] #ly p{transform-origin:right center}
[dir=rtl] .nav a svg,[dir=rtl] .nav-b svg{margin:0}
@media(max-width:860px){[dir=rtl] .main{margin-right:0}}

/* ===== KOOM additions ===== */
.shim{background:linear-gradient(90deg,var(--fill) 25%,var(--fill2) 50%,var(--fill) 75%);background-size:200% 100%;animation:shim 1.3s infinite;border-radius:8px}
.ln{height:14px}.art.shim{border-radius:10px}.phead .pa.shim{display:block}
@keyframes shim{to{background-position:-200% 0}}
.art.rnd{border-radius:50%}.card.k{cursor:pointer}.card.k:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:10px}
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:640px}
.ahero{position:relative;margin:-30px -36px 28px;padding:90px 36px 30px;min-height:300px;display:flex;align-items:flex-end;overflow:hidden}
.abg{position:absolute;inset:0;background-size:cover;background-position:center 25%;filter:saturate(1.1)}
.abg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),var(--bg))}
.at{position:relative}.at h1{margin:4px 0 0;font-size:clamp(2.2rem,6vw,4rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.sw2{position:relative;max-width:560px}.sug{position:absolute;left:0;right:0;top:100%;margin-top:6px;border-radius:12px;background:var(--panel);backdrop-filter:blur(30px);border:1px solid var(--line);z-index:30;overflow:hidden}
.sug button{display:block;width:100%;text-align:start;padding:11px 16px}.sug button:hover{background:var(--fill2)}
.stabs{display:flex;gap:8px;margin:18px 0 6px;overflow-x:auto;scrollbar-width:none}
.stabs button{padding:8px 16px;border-radius:99px;background:var(--fill);font-weight:600;font-size:.88rem;white-space:nowrap}.stabs button.on{background:var(--ink);color:var(--bg)}
.doc{max-width:720px;margin-top:20px;line-height:1.7}.doc h2{font-size:1.1rem;margin:26px 0 6px}.doc p{color:var(--mute);margin:0 0 8px}.doc a{color:var(--acc)}
.msg.err .pill{margin-inline:auto}.qmv{display:flex;margin-inline-start:auto}.qmv .ib{width:30px;height:30px;font-size:.7rem}
.nmw{display:flex;gap:8px;align-items:center}.nmi{margin:0;padding:8px 12px;max-width:200px}
.kfoot{margin-top:70px;padding-top:26px;border-top:1px solid var(--line);display:grid;gap:14px;color:var(--mute);font-size:.88rem}
.kfoot b{display:block;font-size:1.1rem;color:var(--ink);letter-spacing:.04em}.kfoot nav{display:flex;gap:18px;flex-wrap:wrap}.kfoot a:hover{color:var(--ink)}
.kfoot p{margin:0}.socs{display:flex;gap:8px;flex-wrap:wrap}.soc{width:34px;height:34px;border-radius:50%;background:var(--fill2);display:grid;place-items:center;font-size:.7rem;font-weight:800;color:var(--ink)}
#nbd{display:flex;gap:6px;flex-wrap:wrap;cursor:pointer;margin:2px 0 8px}
#wel{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;transition:opacity .6s,transform .6s;padding:24px}
#wel.out{opacity:0;transform:scale(1.04)}
.wbg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);opacity:.35;filter:blur(40px) saturate(1.4) brightness(.6);transform:scale(1.2)}
.wbg::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 70% 10%,var(--glow),transparent)}.wbg img{width:100%;height:100%;object-fit:cover;animation:fi 1.2s both}
@keyframes fi{from{opacity:0}}
.wc{position:relative;text-align:center;max-width:440px;width:100%;animation:up .9s both}@keyframes up{from{opacity:0;transform:translateY(18px)}}
.wl{font-size:clamp(3.5rem,14vw,6rem);font-weight:800;letter-spacing:.08em;line-height:1}.wt{color:var(--mute);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin:10px 0 44px}
.wc h1{font-size:1.5rem;margin:0 0 6px}.ws{color:var(--mute);margin:0 0 22px}.wh{font-size:clamp(2rem,8vw,3.2rem)!important}
#wn{width:100%;padding:15px 18px;border-radius:14px;border:1px solid var(--line);background:var(--fill);color:var(--ink);font:inherit;font-size:1.05rem;text-align:center;margin-bottom:14px}#wn.bad{border-color:var(--acc)}
#wgo{width:100%;justify-content:center;padding:14px}
@media(max-width:860px){.ahero{margin:-20px -16px 22px;padding:70px 16px 24px}.kfoot{margin-bottom:20px}.wbg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){.main{padding-bottom:calc(170px + env(safe-area-inset-bottom))}.kfoot{margin-top:50px}}
.sbox:focus-visible{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--glow)}

.grid>.card,.hr>.card{min-width:0}.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid .art{width:100%}.grid .art img{aspect-ratio:1;object-fit:cover}
@media(max-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px}}

.q:empty{visibility:hidden;border:0}

.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 26px}.chip{padding:10px 18px;border-radius:99px;background:var(--fill2);font-weight:600;border:1px solid transparent}.chip.on{background:var(--acc);color:#fff}
.skip{display:block;margin:14px auto 0;color:var(--mute)}
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0 6px}.bt{padding:34px 18px 16px;border-radius:14px;font-weight:800;font-size:1.15rem;color:#fff}
.t1{background:linear-gradient(135deg,#d6284a,#7a1330)}.t2{background:linear-gradient(135deg,#3b6fd8,#1c2f75)}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.mc{padding:22px 14px;border-radius:12px;background:hsl(var(--h) 38% 30%);color:#fff;font-weight:700}.mc:hover{filter:brightness(1.15)}
.mtop{display:none}
@media(max-width:860px){.mtop{display:flex;position:sticky;top:0;z-index:20;justify-content:space-between;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;margin:0 0 6px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(24px)}
.mtop b{font-size:1.25rem;letter-spacing:.1em}.mtop small{display:block;color:var(--mute);font-size:.7rem}.av{width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;display:grid;place-items:center;font-weight:700}}

#wg2{display:flex;width:100%;justify-content:center;padding:14px}

.dg{text-align:start;white-space:pre-wrap;background:var(--fill);border-radius:12px;padding:16px;font:.82rem/1.7 ui-monospace,monospace;margin:0 0 18px}

/* ===== KOOM polish ===== */
.card{transition:transform .25s cubic-bezier(.2,.7,.2,1)}.card.k:hover{transform:translateY(-4px)}
.card .art{overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:box-shadow .25s}.card.k:hover .art{box-shadow:0 14px 34px rgba(0,0,0,.5)}
.card .art img{transition:transform .5s}.card.k:hover .art img{transform:scale(1.05)}
.hr{scroll-snap-type:x proximity}.hr>.card{scroll-snap-align:start}
.pill.pri{box-shadow:0 6px 20px color-mix(in srgb,var(--acc) 38%,transparent)}
.qtop{display:flex;justify-content:space-between;align-items:center;margin:2px 0 10px}
.bt small{display:block;font-weight:500;opacity:.85;margin-top:4px;font-size:.8rem}
.pp{position:relative}.kbuf .pp svg{opacity:0}
.kbuf .pp::after{content:"";position:absolute;inset:22%;border:3px solid var(--acc);border-right-color:transparent;border-radius:50%;animation:kspin .8s linear infinite}
@keyframes kspin{to{transform:rotate(360deg)}}
.tabs{backdrop-filter:blur(26px) saturate(1.4)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== v3: lyrics, quality chip, dialogs, settings ===== */
#ly p{will-change:transform,opacity,filter;transition-delay:calc(var(--d,0)*24ms)}#ly p.on{transition-delay:0s;transform:scale(1.015)}
#ly p .wd{transition:color .35s ease,opacity .35s ease,text-shadow .35s ease}
#ly p.on .wd{opacity:.55}#ly p.on .wd.w{opacity:1;text-shadow:0 0 22px color-mix(in srgb,var(--ink) 28%,transparent)}
.vrow{display:flex;align-items:center;gap:12px}.vrow .vl{flex:1;min-width:70px}.vrow #nbd{margin:0;flex:none}
.qchip{display:inline-block;padding:6px 11px;border-radius:99px;background:var(--fill2);font-size:.72rem;font-weight:700;white-space:nowrap;letter-spacing:.01em}
.kdlg{position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);padding:20px;animation:fi .2s both}
.kbox{width:100%;max-width:380px;background:var(--panel);backdrop-filter:blur(30px);border:1px solid var(--line);border-radius:18px;padding:22px;animation:up .3s both}
.kbox h3{margin:0 0 14px;font-size:1.15rem}.kbox input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--fill);color:var(--ink);font:inherit;margin-bottom:16px}
.kbtn{display:flex;gap:10px;justify-content:flex-end}
.newpl .art{display:grid;place-items:center;background:var(--fill2)}.newpl .plus{font-size:3rem;font-weight:300;opacity:.6}
.sjump{display:flex;gap:8px;overflow-x:auto;margin:14px 0 6px;position:sticky;top:0;z-index:15;padding:8px 0;scrollbar-width:none;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px)}
.sjump button{padding:7px 14px;border-radius:99px;background:var(--fill);font-weight:600;font-size:.84rem;white-space:nowrap}.sjump button:hover{background:var(--fill2)}
.sg{scroll-margin-top:64px}
.rm *,.rm *::before,.rm *::after{animation:none!important;transition:none!important}
@media(max-width:860px){.sjump{top:calc(54px + env(safe-area-inset-top))}}
.nmw .nmi{max-width:104px;min-width:0}.nmw{flex:none}

/* ===== v4: Apple-style Now Playing ===== */
.npfrom,.npinfo,.nplyl,.npbot,.npdev,.vi2,.qmode{display:none}
.lymodes{display:flex;gap:8px;margin:-4px 0 12px;overflow-x:auto;scrollbar-width:none}
.lymodes button,.qmode .btn2{padding:6px 13px;border-radius:99px;background:var(--fill);font-weight:600;font-size:.82rem;white-space:nowrap}
.lymodes button.on{background:var(--ink);color:var(--bg)}.lymodes.busy::after{content:"…";opacity:.6;align-self:center}
.lymodes[hidden],.qmode[hidden]{display:none}
.qmode{display:flex;gap:8px;align-items:center;margin:-4px 0 12px;flex-wrap:wrap}.qmode .ib{width:40px;height:40px;background:var(--fill);border-radius:50%}.qmode .ib.on{background:var(--ink);color:var(--bg)}
#ly p .sub{display:block;font-size:.5em;font-weight:600;letter-spacing:0;line-height:1.35;margin-top:5px;opacity:.7}
#ly p.on .sub{opacity:.85}
@media(max-width:860px){
 .np:not(.lyf) .npg{display:block;padding:0;min-height:100vh}
 .np:not(.lyf) .npr{display:none}
 .npl{position:relative;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
 .nccov{position:relative;margin-bottom:-54px}
 .npl .ncov{max-width:none;width:100%;border-radius:0;box-shadow:none;margin:0;-webkit-mask-image:linear-gradient(#000 58%,transparent);mask-image:linear-gradient(#000 58%,transparent)}
 body.paused .ncov{transform:scale(.95)}
 .npfrom{display:block;position:absolute;top:0;left:0;right:0;z-index:4;text-align:center;padding:calc(8px + env(safe-area-inset-top)) 64px 0;font-size:.78rem;font-weight:700;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55);pointer-events:none}
 .npfrom .grab{display:block;width:42px;height:5px;border-radius:9px;background:rgba(255,255,255,.6);margin:0 auto 7px}
 .npx{top:calc(10px + env(safe-area-inset-top));left:14px;width:34px;height:34px}
 .npinfo{display:block;position:absolute;left:0;right:0;bottom:62px;text-align:center;font-size:.8rem;font-weight:600;line-height:1.4;color:rgba(255,255,255,.88);text-shadow:0 1px 8px rgba(0,0,0,.6);cursor:pointer;padding:0 20px}
 .nmeta{padding:0 22px;margin-top:0;position:relative;z-index:2}
 .nmeta h2{font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1.15}
 .nmeta p{font-size:1.15rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .nmeta .ib{width:46px;height:46px;border-radius:50%;background:var(--fill2);flex:none;backdrop-filter:blur(14px)}
 .nmeta #ndl{display:none}
 .nplyl{display:flex;align-items:center;gap:8px;width:calc(100% - 44px);margin:20px 22px 2px;font-size:1.22rem;font-weight:800;text-align:left;color:var(--ink)}
 .nplyl[hidden]{display:none}
 .nplyt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .nplyt .wd{opacity:.45;transition:opacity .3s}.nplyt .wd.w{opacity:1}.nplyt .gp{opacity:.5}
 .npl .skr{display:grid;grid-template-columns:1fr 1fr;padding:0 22px;gap:7px 0;margin-top:10px}
 .npl .skr .sk{grid-column:1/-1;grid-row:1;height:10px}
 .npl .skr .ct{grid-row:2;justify-self:start;font-size:.82rem;font-weight:600}.npl .skr .dur{grid-row:2;justify-self:end;font-size:.82rem;font-weight:600}
 .npl .ctl{padding:6px 44px;margin:14px 0 16px;justify-content:space-between}
 .npl .ctl .shf,.npl .ctl .rpt{display:none}
 .npl .ctl .pp{transform:scale(1.5)}
 .npl .vrow{padding:0 22px;margin:22px 0 8px;gap:12px;color:var(--mute)}
 .npl .vrow .vl{height:10px}.vrow #nbd{display:none}.vi2{display:grid}
 .npbot{display:flex;align-items:center;justify-content:space-between;padding:12px 34px 0}
 .npb{width:48px;height:48px}
 .pill2{display:flex;align-items:center;border-radius:99px;background:var(--fill2);height:52px;overflow:hidden;backdrop-filter:blur(14px)}
 .pill2 button{width:66px;height:52px;display:grid;place-items:center;color:var(--ink)}.pill2 i{width:1px;height:26px;background:var(--line)}
 .npdev{display:block;text-align:center;color:var(--mute);font-size:.82rem;font-weight:600;margin:12px 0 4px}
 .np.lyf .npr{display:block;padding:0}
 .np.lyf .pane{height:calc(100vh - 290px)}
}

/* ===== v5: marquee, player alignment, welcome 2.0 ===== */
.npl .nmeta>div{min-width:0;flex:1}.npl .nmeta h2,.npl .nmeta p{overflow:hidden;white-space:nowrap;text-overflow:clip}
.mqi{display:inline-block}.mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mq>.mqi{animation:mqm var(--mqt,6s) ease-in-out infinite alternate}
@keyframes mqm{0%,16%{transform:translateX(0)}84%,100%{transform:translateX(calc(var(--mqd,0px)*-1))}}
.nplyt{overflow:hidden;white-space:nowrap;text-overflow:clip!important}.nplyt .lyin{display:inline-block;position:relative;transition:transform .45s cubic-bezier(.3,.7,.3,1)}
#ly p{overflow-wrap:anywhere}
.tr{content-visibility:auto;contain-intrinsic-size:auto 56px}
.nccov::before{content:"";position:absolute;inset:0 0 auto 0;height:150px;background:linear-gradient(rgba(0,0,0,.55),transparent);z-index:2;pointer-events:none;display:none}
@media(max-width:860px){
 .nccov::before{display:block}
 .npl .ctl{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;align-items:center;padding:6px 18px}
 .npinfo{padding-top:26px;background:linear-gradient(transparent,rgba(0,0,0,.38) 60%);text-shadow:0 1px 10px rgba(0,0,0,.8)}
 .npfrom{text-shadow:0 1px 12px rgba(0,0,0,.8)}
 .npx{background:rgba(0,0,0,.35);backdrop-filter:blur(10px);z-index:5}
}
#wel{overflow:hidden}.wo{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.wo1{width:60vmax;height:60vmax;left:-20vmax;top:-18vmax;background:#ff2d55;animation:wfl 11s ease-in-out infinite alternate}
.wo2{width:55vmax;height:55vmax;right:-22vmax;bottom:-20vmax;background:#5b3df5;animation:wfl 13s ease-in-out infinite alternate-reverse}
@keyframes wfl{to{transform:translate(8vmax,6vmax) scale(1.15)}}
.wlogo{width:84px;height:84px;margin:0 auto 16px;display:block;filter:drop-shadow(0 12px 28px rgba(255,45,85,.4));animation:spi .8s cubic-bezier(.2,.9,.25,1.2) both}
@keyframes spi{from{opacity:0;transform:scale(.6)}}
.wl{font-size:clamp(2.4rem,11vw,3.6rem)!important;margin:0}.wt{margin:8px 0 22px!important}
.wdots{display:flex;gap:7px;justify-content:center;margin:0 0 22px}.wdots i{width:7px;height:7px;border-radius:99px;background:rgba(255,255,255,.28);transition:all .3s}.wdots i.on{width:22px;background:#fff}
.wc h1{font-size:1.45rem!important;letter-spacing:-.01em}
.wfield{position:relative;display:block;margin:6px 0 4px}
.wfield #wn{background:transparent;border:0;border-radius:0;text-align:center;font-size:1.7rem;font-weight:700;padding:12px 4px 14px;margin:0;color:var(--ink);outline:none;caret-color:#ff2d55}
.wfield #wn::placeholder{color:rgba(255,255,255,.32);font-weight:600}
.wfield .wline{display:block;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transition:all .3s}
.wfield:focus-within .wline{background:linear-gradient(90deg,transparent,#ff2d55,transparent);height:3px}
.whint{min-height:1.3em;margin:10px 0 22px;font-size:.84rem;color:rgba(255,255,255,.5);transition:color .2s}.whint.bad{color:#ff6b81;animation:wsh .35s}
@keyframes wsh{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.wbtn{width:100%;justify-content:center;padding:15px;font-size:1.02rem;transition:opacity .25s,transform .25s}.wbtn:disabled{opacity:.35;pointer-events:none;transform:scale(.98)}
.wok{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#ff4d6d,#c1123f);display:grid;place-items:center;margin:0 auto 22px;box-shadow:0 0 0 0 rgba(255,45,85,.5);animation:wring 1.3s ease-out .2s both,spi .6s cubic-bezier(.2,.9,.25,1.3) both}
@keyframes wring{to{box-shadow:0 0 0 40px rgba(255,45,85,0)}}
.chips{margin-bottom:8px}.chip{transition:transform .15s,background .2s}.chip:active{transform:scale(.94)}
.nplyt.sl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}

/* ===== v6: bullet-proof centred transport controls + queue drag ===== */
.npl .ctl{display:flex!important;justify-content:center!important;align-items:center;gap:30px;padding:6px 0!important}
.npl .ctl>.pv,.npl .ctl>.nx{width:72px!important;height:72px!important;flex:none;display:flex!important;align-items:center;justify-content:center;padding:0}
.npl .ctl>.pp{width:84px!important;height:84px!important;flex:none;display:flex!important;align-items:center;justify-content:center;padding:0;transform:none!important}
.npl .ctl>.pv svg,.npl .ctl>.nx svg{width:42px!important;height:42px!important;flex:none}
.npl .ctl>.pp svg{width:54px!important;height:54px!important;flex:none}
@media(max-width:860px){
 .npl .ctl{gap:40px}
 .npl .ctl>.pv,.npl .ctl>.nx{width:84px!important;height:84px!important}.npl .ctl>.pp{width:100px!important;height:100px!important}
 .npl .ctl>.pv svg,.npl .ctl>.nx svg{width:50px!important;height:50px!important}.npl .ctl>.pp svg{width:68px!important;height:68px!important}
}
.qr{grid-template-columns:44px minmax(0,1fr) 40px 34px!important;transition:transform .2s cubic-bezier(.2,.8,.2,1),background .15s}
.qgrip{width:40px;height:44px;display:grid;place-items:center;color:var(--mute);touch-action:none;cursor:grab;border-radius:8px;-webkit-user-select:none;user-select:none}
.qgrip:hover{color:var(--ink);background:var(--fill)}.qgrip:active{cursor:grabbing}
.qr.drag{position:relative;z-index:6;transition:none!important;background:var(--panel);box-shadow:0 14px 34px rgba(0,0,0,.5);border-radius:12px}
#qq.dragging{overflow-y:hidden;-webkit-mask-image:none;mask-image:none}#qq.dragging .qr{cursor:grabbing}

.qmode{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}.qmode>*{flex:none}
.qhint{color:var(--mute);font-size:.78rem;font-weight:600}
#lyt,#lya{text-overflow:clip!important}