@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/files/vazirmatn-Dxxo8j6PP2D_kU2muijlGMWWIGroe7ll.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EEFF}
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/files/vazirmatn-Dxxo8j6PP2D_kU2muijlE8WWIGroe7ll.woff2) format('woff2');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:'Vazirmatn';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/files/vazirmatn-Dxxo8j6PP2D_kU2muijlHcWWIGroew.woff2) format('woff2');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}
/* ═══ tokens ═══════════════════════════════════════════════════════════
   One ground, two inks, one hairline, one wash. Colour is NOT a token you
   pick: --h/--s are written by the playing track's artwork, and every
   coloured thing (flood, lit waveform, halo) derives from them.          */
@property --h { syntax:'<number>'; inherits:true; initial-value:300; }
@property --s { syntax:'<number>'; inherits:true; initial-value:14; }
:root{
  --ground:#1C1620;
  --ink:#EEE7F1;
  --muted:#B6ACBF;
  --line:rgba(238,231,241,.10);
  --wash:rgba(238,231,241,.06);

  --flood-lo:hsl(var(--h) calc(var(--s) * .95%) 14.5%);        /* player ground */
  --flood-hi:hsl(var(--h) calc(var(--s) * 1.3%) 34% / .66);    /* halo behind the art */
  --wave:hsl(var(--h) calc(var(--s) * 1.2%) 76%);              /* the lit (played) part of any waveform */
  --wave-veil:hsl(var(--h) calc(var(--s) * 1%) 60% / .16);
  --tape:rgba(238,231,241,.26);                                /* a waveform not yet played */
  --tape-past:rgba(238,231,241,.13);

  --f-meta:12px; --f-body:15px; --f-title:22px; --f-lyric:22px; --f-disp:30px; --f-sun:30px;
  --ez:cubic-bezier(.32,.72,0,1);            /* everything that settles */
  --press:cubic-bezier(.34,1.4,.64,1);       /* the one tactile spring */
  --flood-t:1.4s;
  --rail:232px; --queue:352px; --top:60px; --dock:64px;
  --safe:env(safe-area-inset-bottom,0px);
  --font:'Vazirmatn', system-ui, sans-serif;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --ground:#F4EEF3; --ink:#2A2030; --muted:#675C6F;
  --line:rgba(42,32,48,.11); --wash:rgba(42,32,48,.06);
  --flood-lo:hsl(var(--h) calc(var(--s) * .5%) 92%);
  --flood-hi:hsl(var(--h) calc(var(--s) * 1%) 78% / .6);
  --wave:hsl(var(--h) calc(var(--s) * 1%) 26%);                /* dark enough to be text (row.now) on every hue */
  --wave-veil:hsl(var(--h) calc(var(--s) * 1%) 40% / .14);
  --tape:rgba(42,32,48,.24); --tape-past:rgba(42,32,48,.12);
  color-scheme:light;
}
@media (min-width:861px){ :root{ --f-disp:46px; --f-lyric:30px; --f-sun:60px; --dock:76px } }

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font:400 var(--f-body)/1.7 var(--font);
  -webkit-font-smoothing:antialiased;font-feature-settings:"tnum";
  transition:--h var(--flood-t) var(--ez),--s var(--flood-t) var(--ez)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
svg{display:block}
h1,h2,p,ol,ul,dl,dd{margin:0;padding:0}
ol,ul{list-style:none}
.bidi{unicode-bidi:plaintext;text-align:right}   /* Latin titles keep the right edge and truncate at their own end */
.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px;border-radius:999px}
.kicker{font-size:var(--f-meta);font-weight:500;color:var(--muted);line-height:1.4}

/* ═══ shared components ════════════════════════════════════════════════ */

/* circular artwork: disc + two hairline rings + halo in the track's colour */
.art{position:relative;width:var(--art,320px);aspect-ratio:1;border-radius:50%;flex:0 0 auto;transition:transform 1.2s var(--ez)}
.art::before,.art::after{content:"";position:absolute;border-radius:50%;border:1px solid var(--line);pointer-events:none}
.art::before{inset:calc(var(--art,320px) * -.05)}
.art::after{inset:calc(var(--art,320px) * -.106);opacity:.6}
.art .disc{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--wash);
  box-shadow:0 30px 90px -20px hsl(var(--h) calc(var(--s)*1%) 30% / .7)}
.art .disc img,.art .disc svg,.th img,.th svg{width:100%;height:100%;object-fit:cover;display:block}
body.paused .art.breathes{transform:scale(.955)}
.th{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:0 0 auto;background:var(--wash)}

/* buttons: round icon, ink play disc, pill */
.round{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:var(--muted);
  transition:color .3s var(--ez),background .3s var(--ez)}
.round:hover{color:var(--ink);background:var(--wash)}
.round svg{width:22px;height:22px}
.round.on{color:var(--wave)}
.play{width:var(--pd,68px);height:var(--pd,68px);border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--ink);color:var(--ground);transition:transform .5s var(--press)}
.play:active{transform:scale(.94)}
.play svg{width:calc(var(--pd,68px) * .38);height:calc(var(--pd,68px) * .38)}
.play .i-play{margin-left:8%}                       /* optical centring — physical on purpose (see rtl-persian.md) */
.pill{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;min-height:44px;padding-inline:16px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);font-size:var(--f-body);white-space:nowrap;transition:background .3s var(--ez),color .3s var(--ez)}
.pill:hover{color:var(--ink)}
.pill[aria-pressed="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.pill .n{font-size:var(--f-meta)}
.link{display:inline-flex;align-items:center;min-height:44px;color:inherit;border-radius:999px}
.link:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* transport: an instrument, so LTR; play is centred whatever sits beside it */
.transport{direction:ltr;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}
.transport .tl{display:flex;justify-content:flex-end;gap:6px}
.transport .tr{display:flex;justify-content:flex-start;gap:6px}

/* queue row — the one list row in the app */
.row{width:100%;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;
  min-height:62px;padding-block:8px;text-align:start;cursor:pointer}
.row.more4{grid-template-columns:44px minmax(0,1fr) auto 44px}
.row .t{display:block;font-size:var(--f-body);line-height:1.4;color:var(--ink)}
.row .a{display:block;font-size:var(--f-meta);line-height:1.4;color:var(--muted)}
.row .d{font-size:var(--f-meta);color:var(--muted)}
.row:hover .th{box-shadow:0 0 0 2px var(--line)}
.row.now .t{color:var(--wave)}
.row.now .th{box-shadow:0 0 0 2px var(--ground),0 0 0 3px var(--wave)}
.rows > li + li{border-top:1px solid var(--line)}

/* ═══ shell: rail (desktop) · top bar (phone) · dock ═══════════════════ */
.app{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);min-height:100dvh}
.rail{position:sticky;top:0;height:100dvh;z-index:7;display:flex;flex-direction:column;gap:6px;
  padding:28px 18px 24px;border-inline-end:1px solid var(--line);background:var(--ground)}
.brand{display:flex;align-items:center;gap:10px;padding-inline:12px;height:44px;margin-bottom:28px;font-weight:500}
.brand svg{width:26px;height:26px}
.nav{display:flex;flex-direction:column;gap:4px}
.nav a{display:flex;align-items:center;gap:14px;height:46px;padding-inline:14px;border-radius:999px;color:var(--muted);
  transition:background .4s var(--ez),color .4s var(--ez)}
.nav a svg{width:20px;height:20px;flex:0 0 auto}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{background:var(--wash);color:var(--ink)}
.rail-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-inline:6px}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--wash);color:var(--ink);font-size:var(--f-meta);font-weight:500}
.main{min-width:0}
.topbar{display:none}

.view{display:none;min-width:0}
body[data-view="home"] .v-home,body[data-view="artist"] .v-artist,body[data-view="lyrics"] .v-lyrics,body[data-view="album"] .v-album,body[data-view="lib"] .v-lib,body[data-view="prof"] .v-prof,body[data-view="ask"] .v-ask{display:block}

/* the dock — the same now-playing bar wherever the full player isn't on screen */
.dock{position:fixed;z-index:6;inset-inline:0;bottom:0;height:calc(var(--dock) + var(--safe));padding:0 12px var(--safe) 8px;
  display:flex;align-items:center;gap:10px;background:var(--flood-lo);border-top:1px solid var(--line);
  transform:translateY(110%);visibility:hidden;transition:transform .5s var(--ez),visibility 0s linear .5s}
.dock.on{transform:none;visibility:visible;transition:transform .5s var(--ez),visibility 0s}
body.dock-on .main{padding-bottom:calc(var(--dock) + var(--safe))}
.dock .who{display:flex;align-items:center;gap:12px;flex:1;min-width:0;min-height:44px;text-align:start}
.dock .th{width:40px;height:40px}
.dock .txt{min-width:0;line-height:1.4}
.dock .t{display:block;font-size:var(--f-body)}
.dock .a{display:block;font-size:var(--f-meta);color:var(--muted)}
.dock .play{--pd:44px}
.dock .dtr{display:flex;align-items:center;gap:4px;direction:ltr;flex:0 0 auto}
.dock .prog{position:absolute;top:-1px;inset-inline:0;height:2px;direction:ltr;pointer-events:none}
.dock .prog i{position:absolute;inset-block:0;left:0;width:0;background:var(--wave)}
.dock .wv,.dock .dt,.dock .dprev,.dock .dnext{display:none}

/* ═══ HOME: the sun on the horizon ══════════════════════════════════════
   The first screen is one landscape. Sky = the flood with the art's glow.
   The session's waveforms, laid end to end, are the horizon (full-bleed).
   The artwork is the sun: it rises out of the horizon exactly at the playhead,
   its lower fifth below the line. The earth under the line carries the time,
   the title and the transport — on flat flood, so its text never sits on glow. */
.first{position:relative;isolation:isolate;display:flex;flex-direction:column;
  --D:clamp(250px,44dvh,420px);                      /* sun diameter */
  --hy:max(calc(var(--D) * .906 + 72px),52dvh);      /* the horizon line, from the top of this screen */
  --amp:130px;                                       /* tallest possible hill */
  --below:88px;                                      /* ribbon depth under the line: the clock, then the song marks */
  --glow:calc(var(--D) * 1.15);                      /* the glow ends before the queue and the rail (measured: see notes) */
  --hill:color-mix(in srgb,var(--ink) 21%,var(--flood-lo));        /* hills are solid: silhouettes against the glow */
  --hill-past:color-mix(in srgb,var(--ink) 11%,var(--flood-lo));
  background:linear-gradient(var(--flood-lo) 0,var(--flood-lo) 78%,var(--ground) 100%)}
.sky{position:relative;flex:0 0 auto;height:var(--hy);overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(circle var(--glow) at 50% calc(var(--hy) - var(--D) * .3),var(--flood-hi),transparent) no-repeat}
.sun{--art:var(--D);position:absolute;left:50%;top:calc(var(--hy) - var(--D) * .8);translate:-50% 0}   /* physical left: a centring, not a side */
.ribbon{position:absolute;z-index:1;left:0;right:0;top:calc(var(--hy) - var(--amp) - 12px);height:calc(var(--amp) + 12px + var(--below));
  direction:ltr;overflow:hidden;contain:paint;cursor:pointer;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)}
.ribbon > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.seg{fill:var(--hill);transition:fill .6s var(--ez)}
.seg.past{fill:var(--hill-past)}
.seg.played{fill:var(--wave)}
.seg.ghost{fill:none;stroke:var(--tape);stroke-width:1;stroke-dasharray:2 4}
.reflect{opacity:.3}
.lane{position:absolute;left:0;top:calc(var(--amp) + 12px + 38px);height:48px;will-change:transform}
.mark{position:absolute;top:0;height:44px;display:flex;flex-direction:row-reverse;align-items:center;gap:8px;padding:0 10px 0 0;
  max-width:190px;direction:rtl;color:var(--ink);font-size:var(--f-meta);line-height:1.3;transform:translateX(-13px)}
.mark .th{width:26px;height:26px;box-shadow:0 0 0 3px var(--flood-lo)}
.mark span{min-width:0}
.mark.is-now{font-weight:500}
.mark.ghost{color:var(--muted)}
.mark.ghost .th{opacity:.5}
/* the playhead: a stroke from the line up to the crest of the hill it is standing on, through the sun's axis */
.ph{position:absolute;left:50%;bottom:var(--below);width:1px;height:var(--crest,24px);margin-left:-.5px;background:var(--ink);pointer-events:none}
.ph::before{content:"";position:absolute;top:-3.5px;left:-3px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.clock{position:absolute;z-index:2;top:calc(var(--amp) + 12px + 7px);left:50%;translate:-50% 0;display:flex;gap:14px;padding-inline:12px;border-radius:999px;
  background:var(--flood-lo);font-size:var(--f-meta);line-height:26px;color:var(--ink);pointer-events:none;white-space:nowrap}
.clock b{font-weight:500}
.clock span{min-width:36px}
.clock span:first-child{text-align:right}
.earth{position:relative;flex:1 0 auto;display:flex;flex-direction:column;align-items:center;padding:calc(var(--below) + 2px) 16px 28px}
.np{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:min(100%,960px);min-width:0}
.np .savelib{margin-top:12px}.np .savelib[hidden],.np .savelib .y,.np .savelib.on .n{display:none}.np .savelib.on .y{display:inline}
.np .ttl{margin:2px 0 0;font-size:var(--f-sun);line-height:1.35;font-weight:300;max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;unicode-bidi:plaintext}
.np .lat{font-size:var(--f-meta);color:var(--muted);line-height:1.4;direction:ltr;unicode-bidi:isolate;max-width:100%}
.np .lat:empty{display:none}
.np .by{font-size:var(--f-body);color:var(--ink);padding-inline:10px;margin-block:-2px -6px}
.np .facts{font-size:var(--f-meta);color:var(--muted)}
.v-home .transport{margin-top:16px;width:min(100%,540px)}
.queue{min-width:0;padding:8px 16px 0}
.queue header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}

/* ═══ HOME, second layer: the same vocabulary, quieter ═══════════════════ */
.layer2{padding:0 16px}
.l2{padding-top:44px}
.l2h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.l2h h2{font-size:var(--f-title);font-weight:300;line-height:1.4}
/* «پس از این»: the horizon carries on past the end of the queue as ghosts */
.band{display:flex;flex-direction:column}
.bi{display:flex;align-items:center;gap:8px;min-width:0;border-top:1px solid var(--line)}
.bi .bw{flex:1;min-width:0;display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;text-align:start}
.bi svg{width:96px;height:40px;overflow:visible;direction:ltr}
.bi .gp{fill:var(--wash);stroke:var(--tape);stroke-width:1;stroke-dasharray:2 3}
.bi .bw:hover .gp{fill:var(--tape-past)}
.bi .tp{fill:var(--tape)}
.bi .t{display:block;font-size:var(--f-body);line-height:1.4}
.bi .a{display:block;font-size:var(--f-meta);line-height:1.4;color:var(--muted)}
.bi .d{font-size:var(--f-meta);color:var(--muted)}
.bi .add svg{width:22px;height:22px}
.bi.tail{display:none}
/* radio: every station is its own waveform in its own hue */
.stations{display:grid;grid-template-columns:minmax(0,1fr);column-gap:40px}
.stations li{border-top:1px solid var(--line)}
.st{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:14px;min-height:68px;width:100%;text-align:start}
.st svg{width:96px;height:40px;overflow:visible;direction:ltr}
.st .sw{fill:hsl(var(--ch) 42% 64% / .9)}
.st .sb{stroke:hsl(var(--ch) 30% 64% / .45);stroke-width:1}
:root[data-theme="light"] .st .sw{fill:hsl(var(--ch) 40% 42% / .85)}
:root[data-theme="light"] .st .sb{stroke:hsl(var(--ch) 30% 40% / .4)}
.st b{display:block;font-weight:400;font-size:var(--f-body);line-height:1.4}
.st small{display:block;font-size:var(--f-meta);color:var(--muted);line-height:1.4}
.st:hover .sw{fill:hsl(var(--ch) 46% 70%)}
:root[data-theme="light"] .st:hover .sw{fill:hsl(var(--ch) 44% 34%)}

@media (max-width:860px){
  .first{--D:min(56vw,220px);--hy:calc(var(--D) * .906 + 24px);--amp:84px;--below:84px;--glow:min(300px,80vw);
    background:linear-gradient(var(--flood-lo) 0,var(--flood-lo) 82%,var(--ground) 100%)}
  .earth{padding:calc(var(--below) + 2px) 12px 8px}
  .v-home .transport{margin-top:10px;gap:4px}
  .v-home .transport .tl,.v-home .transport .tr{gap:2px}
  .v-home .play{--pd:64px}
}
@media (min-width:861px){
  /* the first screen runs under the rail: the horizon is the full viewport, the rail sits in its sky */
  .first{min-height:100dvh;margin-inline-start:calc(-1 * var(--rail))}
  body[data-view="home"] .rail{background:transparent;border-color:transparent;transition:background .4s var(--ez),border-color .4s var(--ez)}
  body[data-view="home"].past-first .rail{background:var(--ground);border-color:var(--line)}
  .layer2{padding:8px 48px 0}
  .l2{padding-top:64px}
  /* the band: a horizontal continuation of the horizon, each song as wide as it is long */
  .band{flex-direction:row;direction:ltr;align-items:stretch}
  .bi{position:relative;flex:var(--g,300) 1 150px;flex-direction:column;align-items:stretch;gap:0;border-top:0;padding-inline-end:4px}   /* as wide as it is long */
  .bi .bw{display:flex;flex-direction:column;align-items:stretch;gap:0;direction:rtl}
  .bi svg{width:100%;height:84px;order:-1;border-bottom:1px solid var(--line)}
  .bi .tx{padding:10px 0 0;padding-inline-end:48px;min-width:0}
  .bi .d{display:none}
  .bi .add{position:absolute;bottom:0;left:0}
  .bi.tail{display:flex;flex:0 0 200px}
  .bi.tail svg{-webkit-mask-image:linear-gradient(to right,transparent,#000 70%);mask-image:linear-gradient(to right,transparent,#000 70%)}
  .bi.tail .tx{padding-inline-end:12px}
  .bi.tail::after{content:"";position:absolute;top:0;right:0;height:84px;border-right:1px dashed var(--muted);opacity:.6}
  .stations{grid-template-columns:repeat(3,minmax(0,1fr))}
  .st{grid-template-columns:120px minmax(0,1fr);min-height:76px}
  .st svg{width:120px;height:44px}
}
@media (min-width:1181px){
  /* queue in the sky, across from the rail: the horizon runs under both */
  .queue{position:absolute;z-index:2;top:28px;inset-inline-end:40px;width:var(--queue);padding:0;
    height:calc(var(--hy) - var(--amp) - 12px - 36px);display:flex;flex-direction:column}
  .queue .rows{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent)}
  .queue .rows::-webkit-scrollbar{display:none}
}


/* ═══ ARTIST: the ring is the body of work ═════════════════════════════ */
.v-artist .flood,.v-album .flood{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(80% 60% at 70% 0%,var(--flood-hi),transparent 70%)}
.v-artist .page,.v-album .page{position:relative;z-index:1;padding:0 20px 40px}
.hero{display:grid;justify-items:center;text-align:center;gap:6px}
.hero .who{display:grid;justify-items:center;gap:4px;min-width:0}
.halo{position:relative;width:min(248px,66vw);aspect-ratio:1;overflow:visible}
.halo svg{width:100%;height:100%;overflow:visible}
.halo .bar{stroke-linecap:round;transition:opacity .5s var(--ez),stroke .5s var(--ez)}
.halo.dim .bar{opacity:.28}
.halo.dim .bar.hi{opacity:1}
.halo .bar.done{stroke:var(--wave)!important;opacity:1}
.v-artist .kicker,.v-album .kicker{margin-top:10px}
.v-artist h1,.v-album h1{font-weight:300;font-size:var(--f-disp);line-height:1.2}
.latin{font-size:var(--f-meta);color:var(--muted);direction:ltr;unicode-bidi:isolate}
.facts{font-size:var(--f-meta);color:var(--muted)}
.facts span+span::before{content:'';display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;vertical-align:middle;margin-inline:10px;opacity:.7}
.acts{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px}
.acts .go{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding-inline:26px 22px;border-radius:999px;
  background:var(--ink);color:var(--ground);font-weight:500;transition:transform .5s var(--press)}
.acts .go:active{transform:scale(.96)}
.acts .go svg{width:18px;height:18px}
.acts .round{border:1px solid var(--line)}
.v-artist section,.v-album section{padding-top:28px}
.v-artist h2,.v-album h2{font-size:var(--f-title);font-weight:300;display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.v-artist h2 small,.v-album h2 small{font-size:var(--f-meta);color:var(--muted);font-weight:400}
.modes{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px;padding-bottom:4px}
.modes::-webkit-scrollbar{display:none}
.note{font-size:var(--f-meta);color:var(--muted);margin-block:6px}
.works .row{border-bottom:1px solid var(--line);min-height:64px}
.works .row .t.untitled{color:var(--muted)}
.works bdi{unicode-bidi:isolate}
.showall{margin-top:14px}
.showall[hidden]{display:none}
.albums{display:grid;grid-auto-flow:column;grid-auto-columns:128px;gap:18px;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
.albums::-webkit-scrollbar{display:none}
.alb{display:grid;gap:8px;text-align:center;min-width:0;align-content:start}
.alb .disc{width:128px;height:128px;border-radius:50%;overflow:hidden;position:relative;background:var(--wash)}
.alb .disc img,.alb .disc svg{width:100%;height:100%;object-fit:cover;display:block}
.alb .disc::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.alb .an{font-size:var(--f-body);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;unicode-bidi:plaintext}
.alb .ac{font-size:var(--f-meta);color:var(--muted)}
.alb[aria-pressed="true"] .disc{box-shadow:0 0 0 2px var(--ground),0 0 0 3px var(--ink)}
#alb-all{display:none}
.images{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 20px;font-size:var(--f-title);font-weight:300;line-height:1.9}
.images i{font-style:normal;color:var(--muted);font-size:var(--f-body)}
.meters{display:grid;gap:12px;margin-top:20px}
.meter{display:grid;grid-template-columns:88px minmax(0,1fr) 40px;align-items:center;gap:12px;font-size:var(--f-meta);color:var(--muted)}
.meter .trk{height:2px;background:var(--line);border-radius:999px;position:relative}
.meter .trk i{position:absolute;inset-block:0;inset-inline-start:0;background:var(--muted);border-radius:999px}
.meter .v{text-align:end}
.src{font-size:var(--f-meta);color:var(--muted);margin-top:14px}
.bio{max-width:62ch;line-height:2}
.bio.clamp{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.textbtn{min-height:44px;color:var(--muted)}
.textbtn:hover{color:var(--ink)}
dl.facts2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 20px;margin-top:18px}
dl.facts2 dt{color:var(--muted);font-size:var(--f-meta);padding-top:3px}
.ext{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.rel{display:grid;grid-auto-flow:column;grid-auto-columns:96px;gap:18px;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}
.rel::-webkit-scrollbar{display:none}
.rel figure{margin:0;display:grid;gap:8px;text-align:center;font-size:var(--f-meta);color:var(--muted);align-content:start}
.rel img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--wash)}
.rel .nm{font-size:var(--f-body);color:var(--ink);line-height:1.4}

/* ═══ LYRICS: the song's waveform stood upright ════════════════════════ */
.v-lyrics{position:fixed;inset:0;z-index:10;background:var(--flood-lo);overflow:hidden}
body[data-view="lyrics"]{overflow:hidden}
.aura{position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.2;          /* the art's glow, kept below the text it sits behind (measured: see notes) */
  background:radial-gradient(60vmax 60vmax at 85% 0%,var(--flood-hi),transparent 70%)}
@media (min-width:861px){ .aura{opacity:.55;background:radial-gradient(30vmax 30vmax at 85% 29%,var(--flood-hi),transparent 60%)} }   /* centred on the art */
.scr{position:relative;z-index:1;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr)}
.lyr{position:relative;min-height:0;min-width:0;margin-inline:16px}
.scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 84%,transparent 100%)}
.scroll::-webkit-scrollbar{display:none}
.tlin{position:relative;width:100%}
.rib{position:absolute;inset-block-start:0;inset-inline-start:0;overflow:visible}
.rib .fut{fill:none;stroke:var(--tape);stroke-width:1.4}
.rib .past{fill:none;stroke:var(--wave);stroke-width:1.8}
.rib .band{fill:var(--wave-veil)}
.rib .anc{fill:var(--tape);transition:fill .4s}
.rib .anc.on{fill:var(--wave)}
.rib .head{fill:var(--wave)}
.rib .headh{fill:var(--wave-veil)}
.rib-hit{position:absolute;inset-block-start:0;inset-inline-start:0;cursor:pointer}
.ln{position:absolute;inset-inline-end:0;display:block;text-align:start;cursor:pointer;font-size:var(--f-lyric);line-height:1.75;
  font-weight:300;color:var(--muted);padding-block:5px;transition:color .5s var(--ez)}
.ln .w{transition:color .25s}
.ln.cur .w.lit{color:var(--ink)}
.ln .rx{display:block;font-size:var(--f-meta);font-weight:400;color:var(--muted);margin-block-start:2px;text-align:end}
.ln:hover{color:var(--ink)}
.gap{position:absolute;inset-inline-end:0;font-size:var(--f-meta);font-weight:500;color:var(--muted);display:flex;align-items:center;gap:10px;pointer-events:none}
.gap::after{content:'';flex:1;height:1px;background:var(--line)}
.stamp{position:absolute;font-size:var(--f-meta);font-weight:500;color:var(--ink);line-height:20px;padding-inline:7px;border-radius:999px;
  background:var(--flood-lo);transform:translate(50%,-50%);pointer-events:none;white-space:nowrap}
.back{position:absolute;inset-block-end:18px;inset-inline-start:50%;translate:50% 0;z-index:3;min-height:44px;padding-inline:18px;border-radius:999px;
  background:var(--ink);color:var(--ground);font-weight:500;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ez),visibility 0s .3s}
.back.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .3s var(--ez)}
.msg{position:absolute;inset-inline-end:0;color:var(--muted);max-width:30ch;line-height:2}
.msg b{display:block;font-weight:300;color:var(--ink);font-size:var(--f-title);line-height:1.7;margin-block-end:6px}
.msg .pill{margin-block-start:14px;color:var(--ink)}
.plain{position:absolute;inset-inline:0}
.plain p{font-weight:300;color:var(--muted)}
.plain .ln{position:static;cursor:default}
.plain .pnote{font-size:var(--f-meta);color:var(--muted);margin-block-end:22px;font-weight:500}
.m-top{display:flex;align-items:center;gap:10px;padding:max(8px,env(safe-area-inset-top)) 12px 4px}
.m-top .who{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.m-top .art{--art:40px}
.m-top .art::before,.m-top .art::after{display:none}
.m-top .tt{min-width:0;line-height:1.4}
.m-top .t{font-size:var(--f-body)}
.m-top .a{font-size:var(--f-meta);color:var(--muted);line-height:1.4}
.m-top .a .link{min-height:44px;margin-block:-12px 0;vertical-align:top}
.m-dock{padding:0 16px max(12px,var(--safe))}
.m-dock .transport{margin-top:0}
.m-dock .play{--pd:60px}
.seek{direction:ltr;position:relative;height:44px;cursor:pointer;touch-action:none}
.seek::before{content:'';position:absolute;inset-inline:0;top:21px;height:2px;border-radius:999px;background:var(--line)}
.seek i{position:absolute;left:0;top:21px;height:2px;border-radius:999px;background:var(--wave)}
.times{display:flex;justify-content:space-between;direction:ltr;font-size:var(--f-meta);color:var(--muted);margin-top:-8px}
.d-np,.d-q,.v-lyrics .closeD{display:none}

/* ═══ PHONE compositions (≤860) ════════════════════════════════════════ */
@media (max-width:860px){
  .app{display:block}
  .rail{display:none}
  .topbar{display:flex;align-items:center;gap:4px;height:var(--top);padding-inline:6px;position:sticky;top:0;z-index:5;background:var(--flood-lo)}
  body[data-view="artist"] .topbar,body[data-view="album"] .topbar{background:linear-gradient(var(--ground) 62%,transparent)}
  .topbar .mk{width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto}
  .topbar .mk svg{width:24px;height:24px}
  .topbar .backb{display:none}
  body[data-view="artist"] .topbar .mk,body[data-view="album"] .topbar .mk{display:none}
  body[data-view="artist"] .topbar .backb,body[data-view="album"] .topbar .backb{display:grid}
  .tabs{display:flex;gap:2px;margin-inline-start:2px;flex:1;min-width:0}
  .tabs a{height:44px;display:flex;align-items:center;padding-inline:11px;border-radius:999px;color:var(--muted);white-space:nowrap}
  .tabs a[aria-current="page"]{background:var(--wash);color:var(--ink)}

}

/* ═══ DESKTOP compositions (≥861) ══════════════════════════════════════ */
@media (min-width:861px){
  /* dock on desktop: art · title · the song's own waveform as the progress · transport · lyrics */
  .dock{inset-inline-start:var(--rail);padding:0 28px;gap:18px}
  .dock .who{flex:0 1 300px}
  .dock .th{width:48px;height:48px}
  .dock .prog{display:none}
  .dock .wv{display:block;flex:1;min-width:120px;height:44px;padding-block:4px;direction:ltr;cursor:pointer}
  .dock .wv svg{width:100%;height:100%;overflow:visible}
  .dock .dt{display:block;font-size:var(--f-meta);color:var(--muted);min-width:84px;text-align:center;direction:ltr}
  .dock .dprev,.dock .dnext{display:grid}

  .v-artist .page,.v-album .page{padding:56px 56px 56px;max-width:1240px}
  .hero{grid-template-columns:280px minmax(0,1fr);justify-items:start;text-align:start;align-items:center;column-gap:40px}
  .hero .who{justify-items:start}
  .halo{width:280px}
  .v-artist .kicker,.v-album .kicker{margin-top:0}
  .acts{justify-content:flex-start;margin-top:22px}
  .v-artist section,.v-album section{padding-top:40px}
  .albums{grid-auto-flow:row;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:0;row-gap:24px}
  .alb .disc{width:100%;height:auto;aspect-ratio:1}
  #alb-all{display:inline-flex;margin-top:24px}
  .rel{grid-auto-flow:row;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin:0;padding:0}
  .rel img{width:100%;height:auto;aspect-ratio:1}
  .modes{margin:0;padding:0;-webkit-mask-image:linear-gradient(to left,#000 88%,transparent);mask-image:linear-gradient(to left,#000 88%,transparent)}
  .albums:not(.all) .alb:nth-child(n+9){display:none}

  /* lyrics: now-playing ‖ timeline ‖ next */
  .scr{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(320px,26%) minmax(0,1fr) minmax(260px,21%);
    column-gap:clamp(24px,3vw,56px);padding-inline:clamp(28px,3vw,56px)}
  .m-top,.m-dock{display:none}
  .d-np,.d-q{display:flex}
  .v-lyrics .closeD{display:grid;position:fixed;inset-block-start:22px;inset-inline-end:28px;z-index:4}
  .lyr{margin:0}
  .d-np{flex-direction:column;justify-content:center;min-width:0;padding-block:32px}
  .d-np .art{--art:min(100%,280px);width:min(100%,280px);margin-inline:auto;margin-block-end:52px}
  .d-np .art::before{inset:-16px}
  .d-np .art::after{inset:-34px}
  .d-np .t{font-size:var(--f-title);font-weight:300;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .d-np .kicker{margin-block-end:6px}
  .d-np .meta{font-size:var(--f-meta);color:var(--muted);margin-block-start:6px;display:flex;gap:8px;flex-wrap:wrap}
  .d-np .seek{margin-block-start:20px}
  .d-np .transport{margin-block-start:8px}
  .d-np .play{--pd:60px}
  .d-np .tools{display:flex;justify-content:center;gap:8px;margin-block-start:18px}
  .d-q{flex-direction:column;justify-content:center;min-width:0;padding-block:32px}
}
@media (min-width:861px) and (max-width:1180px){
  :root{--rail:88px;--queue:300px}
  .brand span,.nav a span{display:none}
  .brand,.nav a{justify-content:center;padding-inline:0}
  .rail{padding-inline:14px}
  .rail-foot{flex-direction:column;gap:12px}
  .stations{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dock .who{flex-basis:220px}
}
@media (min-width:1200px){
  .hero{grid-template-columns:380px minmax(0,1fr);column-gap:48px}
  .halo{width:380px}
  .body{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:64px;align-items:start}
  .albums{grid-template-columns:repeat(3,minmax(0,1fr))}
  .albums:not(.all) .alb:nth-child(n+9){display:grid}
  .albums:not(.all) .alb:nth-child(n+10){display:none}
}
@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms!important} }

/* ═══════════════════════════════════════════════════════════════════════
   v3 — the doors: vibe words in the sky, cold start, browse, search, channel,
   one menu, undo. Appended after the v2 sheet; same tokens, same two radii.  */

.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ── vibe words: one line in the sky above the horizon ── */
.vibes{position:absolute;z-index:3;top:8px;inset-inline:0;display:flex;gap:6px;padding-inline:16px 12px;align-items:center}
.vscroll{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding-block:2px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 28px);mask-image:linear-gradient(to right,transparent 0,#000 28px)}
.vscroll::-webkit-scrollbar{display:none}
.vibes .all{flex:0 0 auto}
.vw{display:inline-flex;align-items:center;flex:0 0 auto;min-height:44px;padding-inline:16px;border-radius:999px;white-space:nowrap;
  background:var(--flood-lo);color:var(--ink);border:1px solid var(--line);font-size:var(--f-body);
  transition:background .3s var(--ez),color .3s var(--ez),border-color .3s var(--ez)}
.vw:hover{border-color:var(--muted)}
.vw[aria-current="true"]{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.vw.all{color:var(--muted)}
.vw.all:hover{color:var(--ink)}

/* ── RTL time on the horizon: the past lies to the right, the road ahead to the left ── */
.mark{flex-direction:row;padding:0;transform:translateX(calc(-100% + 13px))}
.mark span{padding-inline-end:6px}
.gl{position:absolute;top:0;height:22px;line-height:22px;padding-inline:9px;border-radius:999px;white-space:nowrap;
  font-size:var(--f-meta);font-weight:500;color:var(--ink);background:var(--flood-lo);transform:translateX(calc(-100% + 2px))}
.gl::after{content:"";position:absolute;inset-inline-start:0;top:22px;height:calc(var(--amp) - 14px);border-inline-start:1px dashed var(--muted);opacity:.55}
#glane{position:absolute;left:0;top:0;height:100%;will-change:transform;pointer-events:none}
#ahead{transition:transform .9s var(--ez),opacity .9s var(--ez)}
#ahead.rise{transform:translateY(60px);opacity:0;transition:none}
.sink{transition:transform .7s var(--ez),opacity .7s var(--ez)}
.sink.go{transform:translateY(90px);opacity:0}
.seg.cold{fill:var(--hill)}
.ribbon{cursor:grab}
.ribbon.drag{cursor:grabbing}

/* ── the earth: kicker changes with the state (پیشنهادِ الان · ادامه بده · در حال پخش) ── */
.np .kicker{min-height:17px}
.transport [data-act="prev"][hidden]{display:none}

/* ── queue: a row plays, ✕ removes (with undo), phone shows three then «همهٔ صف» ── */
.qli{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:4px}
.qli .rm{color:var(--muted)}
.qli .rm svg{width:18px;height:18px}
.qmore{margin-top:6px}
.queue header .kicker b{font-weight:500;color:var(--ink)}

/* ── toast with undo: the one feedback surface for every queue change ── */
.toast{position:fixed;z-index:30;inset-inline:12px;bottom:calc(14px + var(--safe));margin-inline:auto;max-width:520px;
  display:flex;align-items:center;gap:8px;min-height:52px;padding-block:4px;padding-inline:18px 6px;border-radius:999px;
  background:var(--ink);color:var(--ground);font-size:var(--f-body);line-height:1.45;
  transform:translateY(160%);visibility:hidden;transition:transform .45s var(--ez),visibility 0s linear .45s}
.toast.on{transform:none;visibility:visible;transition:transform .45s var(--ez),visibility 0s}
body.dock-on .toast{bottom:calc(var(--dock) + 12px + var(--safe))}
.toast .tmsg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:static;max-width:none;color:inherit;line-height:1.45}
.toast .undo{flex:0 0 auto;min-height:44px;padding-inline:16px;border-radius:999px;font-weight:500;color:var(--ground);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.toast .undo[hidden]{display:none}

/* ── one menu: ⋯ and the account. Phone: a sheet from the bottom; desktop: beside its button ── */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(10,6,12,.45);opacity:0;visibility:hidden;transition:opacity .3s var(--ez),visibility 0s linear .3s}
.scrim.on{opacity:1;visibility:visible;transition:opacity .3s var(--ez),visibility 0s}
.menu{position:fixed;z-index:41;inset-inline:0;bottom:0;max-height:86dvh;overflow-y:auto;padding:10px 12px calc(14px + var(--safe));
  background:var(--ground);border-top:1px solid var(--line);
  transform:translateY(105%);visibility:hidden;transition:transform .45s var(--ez),visibility 0s linear .45s}
.menu.on{transform:none;visibility:visible;transition:transform .45s var(--ez),visibility 0s}
.menu .mh{display:flex;align-items:center;gap:12px;padding:8px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.menu .mh .th{width:40px;height:40px}
.menu .mh .t{display:block;font-size:var(--f-body);line-height:1.4}
.menu .mh .a{display:block;font-size:var(--f-meta);color:var(--muted);line-height:1.4}
.mi{display:flex;align-items:center;gap:14px;width:100%;min-height:48px;padding-inline:10px;border-radius:999px;text-align:start;color:var(--ink)}
.mi:hover{background:var(--wash)}
.mi svg{width:20px;height:20px;flex:0 0 auto;color:var(--muted)}
.mi[aria-disabled="true"]{color:var(--muted)}
.menu .mk2{display:block;font-size:var(--f-meta);font-weight:500;color:var(--muted);padding:14px 10px 4px;border-top:1px solid var(--line);margin-top:6px}
@media (min-width:861px){
  .scrim{background:transparent}
  .menu{inset-inline:auto;bottom:auto;width:340px;max-height:min(80dvh,640px);border:1px solid var(--line);padding:8px;
    transform:translateY(8px);opacity:0;transition:transform .3s var(--ez),opacity .3s var(--ez),visibility 0s linear .3s;
    box-shadow:0 24px 60px -24px rgba(0,0,0,.55)}
  .menu.on{transform:none;opacity:1;transition:transform .3s var(--ez),opacity .3s var(--ez),visibility 0s}
}

/* ── account button (phone top bar, desktop rail foot) ── */
.acct{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.acct .avatar{width:32px;height:32px}
.nav a.off{display:flex;align-items:center;gap:14px;width:100%;height:46px;padding-inline:14px;border-radius:999px;color:var(--muted);text-align:start}
.nav .off svg{width:20px;height:20px;flex:0 0 auto}
.nav .off:hover{background:var(--wash)}
@media (min-width:861px) and (max-width:1180px){ .nav .off{justify-content:center;padding-inline:0} .nav .off span,.nav .navk span{display:none} .nav .navk{padding:10px 0 0} }
.rel > a{display:block;min-width:0}
.rel > a:hover .nm{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.nav .navk{display:block;font-size:var(--f-meta);font-weight:500;color:var(--muted);padding:18px 14px 4px;border-top:1px solid var(--line);margin-top:10px}

/* ═══ shared page frame for browse · search · channel ═══ */
body[data-view="browse"] .v-browse,body[data-view="search"] .v-search,body[data-view="ch"] .v-ch{display:block}
.pg{position:relative;z-index:1;padding:8px 16px 48px;max-width:1240px}
.pg h1{font-size:var(--f-disp);font-weight:300;line-height:1.3}
.pg .lede{font-size:var(--f-meta);color:var(--muted)}
.sech{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:32px;margin-bottom:6px}
.sech h2{font-size:var(--f-title);font-weight:300;line-height:1.4}

/* ── browse: every channel is its own horizon, in its own hue ── */
.jump{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:14px -16px 0;padding-inline:16px}
.jump::-webkit-scrollbar{display:none}
.chrows{display:grid;grid-template-columns:minmax(0,1fr);column-gap:36px}
.chli{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;column-gap:8px;border-top:1px solid var(--line)}
.chrow{display:grid;grid-template-rows:auto 34px;row-gap:4px;padding-block:10px 12px;min-width:0;min-height:44px}
.chrow .cn{display:flex;align-items:baseline;gap:10px;min-width:0}
.chrow b{font-weight:400;font-size:var(--f-body);line-height:1.4;white-space:nowrap}
.chrow small{font-size:var(--f-meta);color:var(--muted);line-height:1.4;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chrow svg{width:100%;height:34px;overflow:visible;direction:ltr}
.cw{fill:hsl(var(--ch) 42% 64% / .9)}
.cb{stroke:hsl(var(--ch) 30% 64% / .45);stroke-width:1}
:root[data-theme="light"] .cw{fill:hsl(var(--ch) 40% 42% / .85)}
:root[data-theme="light"] .cb{stroke:hsl(var(--ch) 30% 40% / .4)}
.chrow:hover .cw{fill:hsl(var(--ch) 46% 70%)}
:root[data-theme="light"] .chrow:hover .cw{fill:hsl(var(--ch) 44% 34%)}
.chrow:hover b{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.chli .round svg{width:18px;height:18px}
.chli .round .i-play{margin-left:2px}
.hubs{padding-top:36px;display:grid;gap:18px}
.hubs h3{font-size:var(--f-meta);font-weight:500;color:var(--muted);margin:0 0 2px}
.hubs p{display:flex;flex-wrap:wrap;gap:0 4px;margin:0}
.hubs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding-inline:8px;color:var(--muted);font-size:var(--f-body)}
.hubs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

/* ── channel page: the station IS its colour (per-item hue, allowed by the settled direction) ── */
.v-ch .chflood{position:absolute;inset:0 0 auto;height:520px;pointer-events:none;z-index:0;
  background:radial-gradient(70% 100% at 70% 0%,hsl(var(--ch) 40% 36% / .42),transparent 72%)}
:root[data-theme="light"] .v-ch .chflood{background:radial-gradient(70% 100% at 70% 0%,hsl(var(--ch) 50% 80% / .5),transparent 72%)}
.v-ch{position:relative}
.chead{display:grid;gap:4px;padding-top:12px}
.chwave{height:110px;margin-top:18px;direction:ltr}
.chwave svg{width:100%;height:100%;overflow:visible}
.chwave .cw{fill:hsl(var(--ch) 42% 64% / .9)}
.v-ch .acts{justify-content:flex-start;margin-top:18px;flex-wrap:wrap}
.v-ch .rows{margin-top:18px}
.v-ch .more{font-size:var(--f-meta);color:var(--muted);margin-top:12px}

/* ── search ── */
.sbar{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:6px;margin-inline:-16px;padding:10px 16px;background:var(--ground)}
.sbar .field{flex:1;display:flex;align-items:center;gap:10px;min-height:52px;padding-inline:18px 6px;border-radius:999px;border:1px solid var(--line);background:var(--wash)}
.sbar .field:focus-within{border-color:var(--muted)}
.sbar svg.mag{width:20px;height:20px;color:var(--muted);flex:0 0 auto}
.sbar input{flex:1;min-width:0;height:48px;border:0;background:none;color:var(--ink);font:400 var(--f-body)/1.4 var(--font);outline:none}
.sbar input::placeholder{color:var(--muted);opacity:1}
.sbar input::-webkit-search-cancel-button{display:none}
.sres .rows .row{grid-template-columns:44px minmax(0,1fr) auto}
.arow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:62px;padding-block:8px;text-align:start}
.arow .t{display:block;font-size:var(--f-body);line-height:1.4}
.arow .a{display:block;font-size:var(--f-meta);color:var(--muted);line-height:1.4}
.arow .go2{font-size:var(--f-meta);color:var(--muted)}
.empty{padding-top:40px;max-width:36ch;line-height:2;color:var(--muted)}
.empty b{display:block;font-weight:300;color:var(--ink);font-size:var(--f-title);line-height:1.6;margin-bottom:4px}
.empty .pill{margin-top:14px;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

@media (max-width:860px){
  /* the sky makes room for the vibe line above the sun */
  .first{--hy:calc(var(--D) * .906 + 24px + 56px)}
  .topbar .acct{margin-inline-start:auto}
  body:not([data-view="home"]) .topbar{background:var(--ground)}
  body[data-view="ch"] .topbar .mk{display:none}
  body[data-view="ch"] .topbar .backb{display:grid}
  .tabs a{padding-inline:10px}
  .sbar{top:var(--top)}
  .queue .rows > li:nth-child(n+4){display:none}
  .queue.all .rows > li:nth-child(n+4){display:list-item}
  .queue.all .rows > li.qli:nth-child(n+4){display:grid}
}
@media (min-width:861px){
  .vibes{top:28px;inset-inline-start:calc(var(--rail) + 24px);inset-inline-end:24px;padding-inline:0;justify-content:center}
  .vw{padding-inline:14px}
  .first{min-height:0}
  .earth{padding-bottom:14px}
  .layer2 .l2.after{padding-top:10px}
  .qmore{display:none}
  .pg{padding:48px 56px 64px}
  .sbar{margin-inline:-56px;padding:14px 56px}
  .jump{margin-inline:0;padding:0;flex-wrap:wrap}
  .chrows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chwave{height:140px}
  .sres{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);column-gap:56px;align-items:start}
  .sres > .full{grid-column:1 / -1}
}
@media (min-width:1181px){
  .vibes{inset-inline-end:calc(var(--queue) + 64px)}
  .chrows{grid-template-columns:repeat(3,minmax(0,1fr))}
  .queue .qcue{display:flex}
}
.qcue{display:none;justify-content:center}
.qcue .pill{min-height:44px}
@media (prefers-reduced-motion:reduce){ *{transition-duration:.01ms!important} }

/* ── «پس از این» in RTL time: the end of the queue at the right, the road running left ── */
.bgh{padding:16px 0 2px;list-style:none}
@media (min-width:861px){
  .band{direction:rtl}
  .bi .gk{order:-2;display:block;min-height:20px;margin-bottom:6px}
  .bi.tail::after{right:auto;left:0}
  .bi.tail svg{-webkit-mask-image:linear-gradient(to left,transparent,#000 70%);mask-image:linear-gradient(to left,transparent,#000 70%)}
  .bi.tail{padding-top:26px}
}
.clock{direction:rtl}                                  /* elapsed on the right (the past), remaining on the left (the road ahead) */
.clock span:first-child{text-align:left}

/* ═══════════════════════════════════════════════════════════════════════
   live — what the real catalogue needs on top of v3: a restricted/gate note under
   the title, loading and error states, the link back to the current site.
   Same tokens, same two radii, no new colours.                             */

/* restricted (geo / rights) and the guest gate: a quiet paragraph, not a box */
.rnote{max-width:40ch;margin-top:10px;font-size:var(--f-meta);line-height:1.9;color:var(--muted);text-align:center}
.rnote b{display:block;font-weight:500;color:var(--ink);font-size:var(--f-body);line-height:1.6}
.rnote .pill{margin-top:8px;color:var(--ink)}
.facts:empty{display:none}

/* the link back to the current site: rail foot (desktop) and the foot of home / browse */
.oldsite{display:flex;align-items:center;min-height:44px;padding-inline:12px;margin-top:6px;border-radius:999px;font-size:var(--f-meta);color:var(--muted)}
.oldsite:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media (min-width:861px) and (max-width:1180px){ .oldsite{justify-content:center;padding-inline:0;text-align:center;line-height:1.4} }
/* ── «فهرست»: the server's home document (one copy for people and crawlers), in the page's quiet voice ── */
.index{padding:44px 16px 8px;margin-top:24px;border-top:1px solid var(--line);display:grid;gap:18px;color:var(--muted)}
@media (min-width:861px){ .index{padding:48px 48px 8px} }
.index h1{font-size:var(--f-body);font-weight:500;color:var(--ink);line-height:1.6}
.index > p{font-size:var(--f-meta);line-height:1.9;max-width:62ch}
.index h2{font-size:var(--f-meta);font-weight:500;color:var(--muted);margin:10px 0 2px}
.index ul{list-style:none;display:flex;flex-wrap:wrap;gap:0 4px}
.index li{min-width:0;max-width:100%}
.index a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;max-width:100%;padding-inline:8px;color:var(--muted);font-size:var(--f-body);unicode-bidi:plaintext;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.index a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.index > p:last-child a{padding-inline:0;font-size:var(--f-meta)}
#hubs-home:empty{display:none}

/* ── the DJ concierge (#/ask) ── */
.v-ask .pg{padding-top:24px;display:flex;flex-direction:column;min-height:calc(100dvh - var(--top) - var(--dock) - 20px)}
.ask-log{flex:1;display:grid;align-content:start;gap:14px;margin-top:16px}
.ask-m{max-width:min(620px,92%);line-height:1.9;font-size:var(--f-body)}
.ask-m.me{justify-self:end;padding:10px 16px;border-radius:18px 18px 4px 18px;background:var(--wash);border:1px solid var(--line)}
.ask-m.ai{justify-self:start}
.ask-m.ai .rows{margin-top:10px}
.ask-note{font-size:var(--f-meta);color:var(--muted)}
.ask-status{font-size:var(--f-meta);color:var(--muted)}
.ask-status::after{content:"…";animation:askdot 1.2s steps(4) infinite}
@keyframes askdot{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}
.ask-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:14px 0 8px}
.ask-chips::-webkit-scrollbar{display:none}
.ask-chips .pill{flex:none}
.ask-in{position:sticky;bottom:calc(var(--dock) + var(--safe) + 8px);display:flex;gap:8px;padding:8px 0;background:var(--ground)}
.ask-in input{flex:1;min-width:0;min-height:50px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--wash);color:var(--ink);font:inherit;font-size:var(--f-body)}
.ask-in input:focus{outline:2px solid var(--ink);outline-offset:1px}
.ask-row .q{flex:none}
.topbar .askb{display:none}
@media (max-width:860px){ .topbar .askb{display:grid;margin-inline-start:auto} .topbar .askb + .acct{margin-inline-start:0} }
@media (prefers-reduced-motion:reduce){ .ask-status::after{animation:none} }

/* ── volume (desktop dock) ── */
.dock .vol{display:none}
@media (min-width:861px){
  .dock .vol:not([hidden]){display:flex;align-items:center;gap:2px;flex:none}
  .dock .vol input{width:92px;height:44px;margin:0;accent-color:var(--ink);cursor:pointer;direction:ltr}
}

/* ── profile ── */
.v-prof .pg{padding-top:28px}
.pf-head{display:flex;align-items:center;gap:18px}
.pf-head .avatar{width:72px;height:72px;font-size:28px;font-weight:300;flex:none}
.pf-head h1{margin:0}
.pf-stats{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:20px 0 0;padding:0}
.pf-stats b{display:block;font-size:var(--f-title);font-weight:300;line-height:1.3}
.pf-stats span{font-size:var(--f-meta);color:var(--muted)}
.pf-sec{margin-top:40px;padding-top:28px;border-top:1px solid var(--line);max-width:720px}
.pf-sec h2{margin:0 0 8px;font-size:var(--f-title);font-weight:300}
.pf-sec .acts{justify-content:flex-start;flex-wrap:wrap;margin-top:12px}
.pf-ref{display:flex;gap:8px;margin-top:12px}
.pf-ref input{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--wash);color:var(--ink);font:inherit;font-size:var(--f-meta)}
.pf-t{height:6px;border-radius:999px;background:var(--wash);overflow:hidden;margin:14px 0 6px}
.pf-t i{display:block;height:100%;border-radius:inherit;background:var(--ink)}
.pf-sw{display:flex;align-items:flex-start;gap:12px;min-height:44px;cursor:pointer}
.pf-sw input{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:28px;margin:2px 0 0;border-radius:999px;background:var(--wash);border:1px solid var(--line);position:relative;cursor:pointer;transition:background .2s}
.pf-sw input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:var(--muted);transition:inset-inline-start .2s var(--ez),background .2s}
.pf-sw input:checked{background:var(--ink)}
.pf-sw input:checked::after{inset-inline-start:21px;background:var(--ground)}
.pf-sw input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.pf-g{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr) auto;gap:6px 12px;align-items:center;margin-top:10px;font-size:var(--f-meta)}
.pf-g .pf-t{margin:0}
.pf-g .num{color:var(--muted)}
.pf-arch{font-size:var(--f-disp);font-weight:300;line-height:1.3;margin:18px 0 6px;text-wrap:balance}
.pf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.pf-chips span{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:var(--f-meta)}
.pf-dims{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px 24px;margin-top:10px}
.pf-dim .pf-t{margin:4px 0}
.pf-dh{display:flex;justify-content:space-between;font-size:var(--f-meta)}
.pf-dim small{font-size:11.5px;color:var(--muted)}
.pf-lbl{margin:26px 0 6px;font-size:var(--f-meta);color:var(--muted)}
@media (max-width:640px){ .pf-head .avatar{width:60px;height:60px;font-size:24px} .pf-g{grid-template-columns:minmax(0,7em) minmax(0,1fr) auto} }

/* ── error pages (#seo-ssr.hub.err): search and the ways back in, under the header ── */
.er-tools{display:grid;gap:14px;padding:6px 48px 0;max-width:780px}
.er-s{display:flex;gap:8px}
.er-s input{flex:1;min-width:0;min-height:48px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--wash);color:var(--ink);font:inherit;font-size:var(--f-body)}
.er-s input:focus{outline:2px solid var(--ink);outline-offset:1px}
.er-s button{flex:none;min-height:48px;padding:0 22px;border-radius:999px;border:0;background:var(--ink);color:var(--ground);font:inherit;font-weight:500;cursor:pointer}
.er-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.er-acts a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:var(--f-meta)}
.er-acts a:hover{border-color:var(--muted)}
@container (max-width: 640px){ .er-tools{padding:4px 16px 0} }

/* ── listen together: the room panel ── */
.party{position:fixed;z-index:9;inset-inline-end:16px;bottom:calc(16px + var(--safe));width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100dvh - 120px));display:flex;flex-direction:column;border-radius:22px;background:var(--ground);border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.7);overflow:hidden}
.party[hidden]{display:none}
body.dock-on .party{bottom:calc(var(--dock) + var(--safe) + 12px);max-height:min(620px,calc(100dvh - var(--dock) - 120px))}
.pt-head{display:flex;align-items:center;gap:10px;padding:14px 12px 10px 16px;padding-inline:16px 8px;border-bottom:1px solid var(--line)}
.pt-head .k{flex:1;min-width:0}
.pt-head b{display:block;font-weight:500;font-size:var(--f-body)}
.pt-head small{font-size:var(--f-meta);color:var(--muted)}
.pt-code{font-feature-settings:"tnum";letter-spacing:.18em;direction:ltr;unicode-bidi:isolate}
.pt-mem{display:flex;gap:6px;overflow-x:auto;padding:10px 16px;border-bottom:1px solid var(--line);scrollbar-width:none}
.pt-m{flex:none;display:flex;align-items:center;gap:6px;min-height:36px;padding:0 10px 0 4px;padding-inline:4px 10px;border-radius:999px;background:var(--wash);font-size:var(--f-meta)}
.pt-m i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:hsl(var(--h) 45% 42%);color:#fff;font-style:normal}
.pt-m.host{outline:1px solid var(--ink)}
.pt-m button{min-width:44px;min-height:36px;border:0;background:none;color:var(--muted);font:inherit;font-size:var(--f-meta);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pt-chat{flex:1;min-height:120px;overflow-y:auto;padding:10px 16px;display:grid;align-content:start;gap:6px;font-size:var(--f-meta);line-height:1.8}
.pt-l b{font-weight:500;margin-inline-end:6px}
.pt-l time{margin-inline-start:6px;color:var(--muted);font-feature-settings:"tnum"}
.pt-l.sys{color:var(--muted)}
.pt-l .em{font-size:18px;line-height:1}
.pt-sug{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--wash)}
.pt-sug span{flex:1;min-width:0}
.pt-react{display:flex;justify-content:space-between;gap:0;padding:6px 2px;border-top:1px solid var(--line)}
.pt-react button{flex:1;min-width:0;min-height:44px;border:0;border-radius:12px;background:none;font-size:20px;cursor:pointer}
.pt-react button:hover{background:var(--wash)}
.pt-in{display:flex;gap:8px;padding:8px 12px 12px}
.pt-in input{flex:1;min-width:0;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--wash);color:var(--ink);font:inherit}
.pt-in .go{flex:none}
.pt-find{padding:0 12px 10px;display:grid;gap:6px}
.pt-find[hidden]{display:none}
.pt-find button.r{display:flex;justify-content:space-between;gap:10px;min-height:44px;padding:0 12px;border-radius:12px;border:0;background:var(--wash);color:var(--ink);font:inherit;font-size:var(--f-meta);text-align:start;cursor:pointer}
.pt-find button.r span:last-child{color:var(--muted)}
.mfly.react .me{font-size:22px}
#partychip:not([hidden]) ~ .stemchip{translate:0 -56px}
@media (max-width:640px){ .party{inset-inline:8px;width:auto;bottom:calc(8px + var(--safe))} body.dock-on .party{bottom:calc(var(--dock) + var(--safe) + 8px)} }

/* ── the host is speaking: its words, as a caption ── */
.mfly.onair{animation:none;max-width:100%}
.mfly.onair .cap{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mfly.onair .me{color:var(--ink)}

/* ── moments on the lyrics seek bar, and the bubble when playback crosses one ── */
.v-lyrics .seek .mdots{position:absolute;inset:0;pointer-events:none}
.v-lyrics .seek .mdots i{position:absolute;top:19px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--ink);opacity:.55}
.mlane{position:fixed;z-index:8;inset-inline-start:16px;bottom:calc(16px + var(--safe));display:grid;gap:8px;max-width:min(320px,calc(100vw - 32px));pointer-events:none}
body.dock-on .mlane{bottom:calc(var(--dock) + var(--safe) + 16px)}
.mfly{display:flex;gap:10px;align-items:flex-start;padding:10px 14px;border-radius:16px;background:var(--ground);border:1px solid var(--line);box-shadow:0 14px 34px -18px rgba(0,0,0,.6);font-size:var(--f-meta);line-height:1.7;animation:mfly 4.2s ease both}
.mfly.short{animation-duration:2.6s}
.mfly .me{flex:none;display:grid;place-items:center;width:20px;height:1.7em;font-size:16px}
.mfly .me svg{width:18px;height:18px}
.mfly b{display:block;font-weight:500}
.mfly span{min-width:0;overflow-wrap:anywhere}
@keyframes mfly{0%{opacity:0;transform:translateY(8px)}8%,85%{opacity:1;transform:none}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){ .mfly{animation:none} }
/* ── the voice is out (karaoke) or alone (acapella): say so, one tap back ── */
.stemchip{position:fixed;z-index:8;inset-inline-end:16px;bottom:calc(16px + var(--safe));display:flex;align-items:center;gap:8px;min-height:44px;padding:0 8px 0 16px;padding-inline:16px 8px;border-radius:999px;background:var(--ink);color:var(--ground);font:inherit;font-size:var(--f-meta);border:0;cursor:pointer;box-shadow:0 14px 34px -18px rgba(0,0,0,.6)}
.stemchip[hidden]{display:none}
.stemchip svg{width:18px;height:18px}
body.dock-on .stemchip{bottom:calc(var(--dock) + var(--safe) + 16px)}
body[data-view="lyrics"] .stemchip,body[data-view="lyrics"] .mlane{bottom:calc(16px + var(--safe))}
@media (max-width:860px){ body[data-view="lyrics"] .stemchip,body[data-view="lyrics"] .mlane{bottom:calc(var(--mdock-h,128px) + 16px + var(--safe))} }
@media (max-width:640px){ .stemchip:not([hidden]) ~ .mlane{translate:0 -56px} }
/* ── reviews ── */
.rev-list{display:grid;gap:14px;margin:4px 0 12px;max-height:44vh;overflow-y:auto}
.rev b{display:block;font-weight:500;font-size:var(--f-meta)}
.rev p{margin:2px 0 0;line-height:1.9;overflow-wrap:anywhere}
.dlg textarea.fld{min-height:104px;padding-block:12px;resize:vertical;line-height:1.8}

/* ── dialog (sign-in, new playlist, rename) ── */
.dlg{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(10,6,12,.55);backdrop-filter:blur(6px)}
.dlg[hidden]{display:none}
.dlg-card{position:relative;width:min(420px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:28px 24px 22px;border-radius:22px;background:var(--ground);border:1px solid var(--line);box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.dlg-card h2{margin:0 0 6px;font-size:var(--f-title);font-weight:300}
.dlg-sub{margin:0 0 14px;font-size:var(--f-meta);color:var(--muted);line-height:1.9}
.dlg-sub:empty{display:none}
.dlg-x{position:absolute;inset-inline-end:10px;top:10px}
.dlg .fld{display:block;width:100%;min-height:48px;margin-top:10px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:var(--wash);color:var(--ink);font:inherit;font-size:var(--f-body)}
.dlg .fld:focus{outline:2px solid var(--ink);outline-offset:1px}
.dlg .fld[hidden]{display:none}
.dlg .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.dlg-err{min-height:1.6em;margin-top:10px;font-size:var(--f-meta);color:hsl(8 70% 66%)}
:root[data-theme="light"] .dlg-err{color:hsl(8 60% 42%)}
.dlg-go{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:6px;border-radius:999px;border:0;background:var(--ink);color:var(--ground);font:inherit;font-weight:500;cursor:pointer}
.dlg-go[disabled]{opacity:.6;cursor:progress}
.dlg-alt{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;margin-top:8px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink);font:inherit;cursor:pointer}
.dlg-alt svg{width:18px;height:18px}
.dlg-or{display:flex;align-items:center;gap:10px;margin:14px 0 2px;font-size:var(--f-meta);color:var(--muted)}
.dlg-or::before,.dlg-or::after{content:"";flex:1;height:1px;background:var(--line)}
.dlg-links{display:grid;justify-items:center;gap:2px;margin-top:10px;font-size:var(--f-meta);color:var(--muted);text-align:center}
.dlg-links button,.dlg-links a{display:inline-flex;align-items:center;min-height:44px;padding-inline:8px;background:none;border:0;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.dlg-links [hidden]{display:none}
.dlg-links button{min-width:44px;justify-content:center}
@media (max-width:640px){ .vbar{flex-wrap:wrap} .vbar>div{flex-basis:100%} .vbar .pill{margin-inline-start:auto} }
/* ── the verify reminder ── */
.vbar{position:fixed;z-index:7;inset-inline:12px;bottom:calc(12px + var(--safe));margin-inline:auto;max-width:640px;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:16px;background:var(--ground);border:1px solid var(--line);box-shadow:0 18px 40px -20px rgba(0,0,0,.6);font-size:var(--f-meta);line-height:1.8}
.vbar b{display:block;font-weight:500;font-size:var(--f-body)}
.vbar .pill{flex:none}
body.dock-on .vbar{bottom:calc(var(--dock) + var(--safe) + 12px)}
.vbar .round{flex:none;width:44px;height:44px}
.lib-col.pl{grid-template-columns:1fr;place-items:center;background:linear-gradient(150deg,hsl(var(--c) 42% 34%),hsl(var(--c) 30% 14%))}
:root[data-theme="light"] .lib-col.pl{background:linear-gradient(150deg,hsl(var(--c) 55% 80%),hsl(var(--c) 40% 62%))}
.lib-ini{font-size:clamp(44px,9vw,72px);font-weight:300;line-height:1;color:hsl(var(--c) 60% 88%)}
:root[data-theme="light"] .lib-ini{color:hsl(var(--c) 45% 22%)}
/* ── library ── */
.v-lib .pg{padding-top:28px}
.lib-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin-top:18px}
.lib-card{display:grid;gap:8px;text-align:start;background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer}
.lib-col{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--wash);border:1px solid var(--line)}
.lib-col img{width:100%;height:100%;object-fit:cover;display:block}
.lib-col .lib-heart{grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center;color:var(--ink)}
.lib-col .lib-heart svg{width:40%;height:40%}
.lib-col.new{border-style:dashed;display:grid;place-items:center;grid-template-columns:1fr}
.lib-col.new svg{width:34px;height:34px;color:var(--muted)}
.lib-card b{font-weight:400;font-size:var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-card small{font-size:var(--f-meta);color:var(--muted)}
.lib-card:hover .lib-col{border-color:var(--muted)}
.lib-sec{margin-top:36px}
.lib-sec h2{font-size:var(--f-title);font-weight:300;margin:0 0 8px}
.lib-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin-top:10px}
.lib-head .lib-col{width:132px}
.lib-head h1{margin:0}
.lib-head .acts{justify-content:flex-start;margin-top:10px;flex-wrap:wrap}
.lib-rows .row .rm svg{width:18px;height:18px}
.lib-gate{max-width:42ch}
@media (max-width:640px){ .lib-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .lib-head{grid-template-columns:1fr} .lib-head .lib-col{width:112px} }
/* ── category & list pages (#seo-ssr.hub): the channel page's language, rendered by the server ── */
#seo-ssr.hub{padding:0 0 40px;container-type:inline-size;color:var(--ink)}
body.dock-on #seo-ssr.hub{padding-bottom:calc(40px + var(--dock))}
.hub ul,.hub ol{list-style:none;margin:0;padding:0}
.hub a{color:inherit;text-decoration:none}
.hb-head{--c:0;position:relative;overflow:hidden;padding:56px 48px 34px;background:linear-gradient(180deg,hsl(var(--c) 45% 38% / .38),transparent 88%)}
:root[data-theme="light"] .hb-head{background:linear-gradient(180deg,hsl(var(--c) 55% 78% / .5),transparent 88%)}
.hb-wave{position:absolute;inset-inline:0;bottom:0;width:100%;height:120px;fill:hsl(var(--c) 50% 72% / .16);pointer-events:none}
:root[data-theme="light"] .hb-wave{fill:hsl(var(--c) 45% 40% / .12)}
.hb-who{position:relative;display:grid;gap:8px;max-width:780px}
.hb-k{font-size:var(--f-meta);color:var(--muted)}
.hb-who h1{margin:0;font-size:var(--f-disp);font-weight:300;line-height:1.25;text-wrap:balance}
.hb-who p{margin:0;font-size:var(--f-body);color:var(--muted);line-height:1.9;max-width:62ch}
.hb-acts{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.hb-go{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding-inline:24px 20px;border-radius:999px;background:var(--ink);color:var(--ground);font:inherit;font-weight:500;border:0;cursor:pointer;transition:transform .4s var(--press)}
.hb-go:active{transform:scale(.96)}
.hb-go svg{width:18px;height:18px}
.hb-round{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--ink);display:grid;place-items:center;cursor:pointer}
.hb-round svg{width:20px;height:20px}
.hb-count{font-size:var(--f-meta);color:var(--muted);margin-inline-start:4px}
.hb-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(var(--rows,40),auto);gap:0 32px;padding:18px 48px 0!important}   /* ranked: down the first column, then the second */
.hb-list li{display:grid;grid-template-columns:auto minmax(0,1.4fr) minmax(0,1fr) auto;gap:12px;align-items:center;min-height:62px;border-bottom:1px solid var(--line)}
.hb-play{position:relative;display:grid;grid-template-columns:24px 44px;gap:10px;align-items:center;background:none;border:0;padding:0;color:inherit;cursor:pointer;min-height:44px;font:inherit}
.hb-n{font-size:var(--f-meta);color:var(--muted);text-align:center}
.hb-play img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--wash)}
.hb-play::after{content:"";position:absolute;inset-inline-end:0;top:50%;translate:0 -50%;width:44px;height:44px;border-radius:10px;opacity:0;transition:opacity .2s;
  background:rgba(12,8,14,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5.5v13a1 1 0 0 0 1.5.86l11-6.5a1 1 0 0 0 0-1.72l-11-6.5A1 1 0 0 0 8 5.5Z'/%3E%3C/svg%3E") center/18px no-repeat}
.hb-play:hover::after,.hb-play:focus-visible::after,.hb-list li.now .hb-play::after{opacity:1}
.hb-tx{display:contents}
.hb-t{display:flex;align-items:center;min-height:44px;min-width:0;font-size:var(--f-body);unicode-bidi:plaintext}
.hb-t,.hb-by{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb-by{display:flex;align-items:center;min-height:44px;min-width:0;font-size:var(--f-meta);color:var(--muted)}
.hb-t:hover,.hb-by:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.hb-list li.now .hb-t{color:var(--wave)}
.hb-d{font-size:var(--f-meta);color:var(--muted);min-width:32px;text-align:end}
.hb-h{margin:44px 48px 12px;font-size:18px;font-weight:400}
.hb-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;padding:0 48px!important}
.hb-tile{--c:0;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border-radius:14px;border:1px solid var(--line);font-size:var(--f-body);
  background:linear-gradient(135deg,hsl(var(--c) 45% 34% / .24),transparent 70%),var(--wash)}
:root[data-theme="light"] .hb-tile{background:linear-gradient(135deg,hsl(var(--c) 55% 70% / .25),transparent 70%),var(--wash)}
.hb-tile i{width:10px;height:10px;border-radius:50%;background:hsl(var(--c) 55% 62%);flex:none}
.hb-tile small{display:block;font-size:11.5px;color:var(--muted)}
.hb-tile:hover{border-color:var(--muted)}
.hb-prose{margin:18px 48px 0;color:var(--muted);font-size:var(--f-body);line-height:1.9;max-width:68ch}
@container (max-width: 900px){ .hb-list{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none} }
@container (max-width: 640px){
  .hb-head{padding:30px 16px 26px}
  .hb-list{padding:10px 16px 0!important}
  .hb-list li{grid-template-columns:auto minmax(0,1fr) auto}
  .hb-by{display:none}
  .hb-t{flex-direction:column;align-items:flex-start;justify-content:center}
  .hb-t[data-by]::after{content:attr(data-by);font-size:var(--f-meta);color:var(--muted);line-height:1.5;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .hb-h{margin:32px 16px 10px}
  .hb-tiles{display:flex;overflow-x:auto;scrollbar-width:none;gap:8px;padding:0 16px!important}
  .hb-tiles::-webkit-scrollbar{display:none}
  .hb-tiles > li{flex:0 0 auto}
  .hb-prose{margin-inline:16px}
}
/* ── the home catalogue footer (#seo-ssr.hc): covers, icons and pictures — one document for people and crawlers ── */
#seo-ssr[hidden]{display:none}
#seo-ssr.hc{container-type:inline-size;padding:52px 44px 40px;border-top:1px solid var(--line);margin-top:24px;color:var(--ink);
  --hc-tile:var(--wash);--hc-faint:color-mix(in srgb,var(--muted) 75%,var(--ground));--tint-l:34%;--tint-a:.22;--glyph-l:80%}
:root[data-theme="light"] #seo-ssr.hc{--tint-l:60%;--tint-a:.18;--glyph-l:36%}
body.dock-on #seo-ssr.hc{padding-bottom:calc(40px + var(--dock))}
.hc ul,.hc ol{list-style:none;margin:0;padding:0}
.hc a{color:inherit;text-decoration:none}
.hc-sig{display:flex;gap:14px;align-items:center}
.hc-sig svg{width:42px;height:42px;flex:none;color:var(--ink)}
.hc-sig h1{margin:0;font-size:24px;font-weight:300;line-height:1.4;text-wrap:balance}
.hc-sig p{margin:2px 0 0;font-size:var(--f-meta);color:var(--muted);line-height:1.9}
.hc-blk{margin-top:40px}
.hc-bh{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.hc-bh h2{margin:0;font-size:18px;font-weight:400}
.hc-bh small{font-size:var(--f-meta);color:var(--hc-faint)}
.hc-gbig{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hc-gcard{display:grid;gap:10px}
.hc-mos{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--hc-tile)}
.hc-mos img{width:100%;height:100%;object-fit:cover;display:block}
.hc-mos::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,14,24,.72),transparent 55%);pointer-events:none}
.hc-mos b{position:absolute;inset-inline-start:14px;bottom:10px;z-index:1;color:#fff;font-weight:500;font-size:20px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hc-gcard small{font-size:var(--f-meta);color:var(--hc-faint)}
.hc-gcard:hover .hc-mos{box-shadow:0 0 0 2px var(--ink)}
.hc-gsm{margin-top:14px!important;display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.hc-gs{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;min-height:56px;padding:6px;border-radius:14px;background:var(--hc-tile);border:1px solid var(--line)}
.hc-gs img,.hc-gs i{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--hc-tile)}
.hc-gs span{font-size:var(--f-body);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-gs small{display:block;font-size:11.5px;color:var(--hc-faint)}
.hc-gs:hover{border-color:var(--muted)}
.hc-fam{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.hc-fm{--c:0;border-radius:18px;padding:16px 16px 12px;background:linear-gradient(160deg,hsl(var(--c) 50% var(--tint-l) / var(--tint-a)),transparent 65%),var(--hc-tile);border:1px solid var(--line)}
.hc-fm h3{margin:0 0 6px;font-size:var(--f-meta);font-weight:500;color:hsl(var(--c) 55% var(--glyph-l))}
.hc-fm ul{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
.hc-fm a{display:inline-flex;align-items:center;min-height:44px;line-height:1.2;font-weight:300}
.hc-fm a:hover{color:hsl(var(--c) 60% var(--glyph-l))}
.hc-menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.hc-mi{display:grid;justify-items:center;gap:8px;padding:14px 8px 12px;border-radius:16px;background:var(--hc-tile);border:1px solid var(--line);text-align:center;font-size:var(--f-meta)}
.hc-mi svg{width:28px;height:28px;color:var(--muted)}
.hc-mi:hover{border-color:var(--muted)} .hc-mi:hover svg{color:var(--ink)}
.hc-two{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:28px}
.hc-two > div,.hc-blk{min-width:0}   /* a sideways-scrolling row inside a grid track must not widen the track */
.hc-tl{padding-top:18px!important;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative}
.hc-tl::before{content:"";position:absolute;top:31px;inset-inline:6%;height:1px;background:var(--line)}
.hc-tl a{position:relative;display:grid;justify-items:center;gap:10px;min-height:64px;font-size:var(--f-meta);color:var(--muted)}
.hc-tl i{width:26px;height:26px;border-radius:50%;background:var(--ground);border:1px solid var(--line);display:grid;place-items:center}
.hc-tl i::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.hc-tl b{font-weight:500;font-size:20px;color:var(--ink);line-height:1}
.hc-tl a:hover i{border-color:var(--ink)} .hc-tl a:hover i::after{background:var(--ink)}
.hc-chart{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 20px}
.hc-song{display:grid;grid-template-columns:20px 44px minmax(0,1fr);gap:10px;align-items:center;min-height:56px;padding:5px 8px;border-radius:12px}
.hc-song:hover{background:var(--hc-tile)}
.hc-n{font-size:var(--f-meta);color:var(--hc-faint);text-align:center}
.hc-song img{width:44px;height:44px;border-radius:10px;object-fit:cover}
.hc-tx{min-width:0}
.hc-song b{display:block;font-weight:400;font-size:var(--f-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;unicode-bidi:plaintext}
.hc-song small{display:block;font-size:var(--f-meta);color:var(--hc-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-strip{padding-bottom:6px!important;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.hc-strip > li{flex:0 0 auto;scroll-snap-align:start}
.hc-person{display:grid;justify-items:center;gap:8px;width:96px;text-align:center;font-size:var(--f-meta);color:var(--muted)}
.hc-person img,.hc-person i{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line);background:var(--hc-tile)}
.hc-person span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-person:hover{color:var(--ink)}
.hc-disc{display:grid;gap:8px;width:132px;text-align:center}
.hc-disc img{width:132px;height:132px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line),0 12px 26px -16px rgba(0,0,0,.7);background:var(--hc-tile)}
.hc-disc b{font-weight:400;font-size:var(--f-meta);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;unicode-bidi:plaintext}
.hc-disc small{font-size:11.5px;color:var(--hc-faint)}
.hc-all{display:inline-flex;align-items:center;min-height:44px;margin-top:24px;padding-inline:18px;border-radius:999px;border:1px solid var(--line);font-size:var(--f-meta);color:var(--muted)}
@container (min-width: 1040px){ .hc-gbig{grid-template-columns:repeat(8,minmax(0,1fr));gap:12px} .hc-mos b{font-size:16px;inset-inline-start:10px;bottom:8px} }
@container (max-width: 900px){ .hc-gbig{grid-template-columns:repeat(2,minmax(0,1fr))} .hc-fam{grid-template-columns:repeat(2,minmax(0,1fr))} .hc-two{grid-template-columns:minmax(0,1fr)} .hc-chart{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container (max-width: 640px){
  #seo-ssr.hc{padding:36px 0 28px}
  .hc-sig,.hc-bh,.hc-all{margin-inline:16px}
  .hc-blk{margin-top:30px}
  .hc-gbig,.hc-gsm,.hc-menu,.hc-chart,.hc-strip,.hc-fam{display:flex;overflow-x:auto;scrollbar-width:none;padding-inline:16px!important;gap:10px;scroll-snap-type:x proximity}
  .hc-gbig::-webkit-scrollbar,.hc-gsm::-webkit-scrollbar,.hc-menu::-webkit-scrollbar,.hc-chart::-webkit-scrollbar,.hc-strip::-webkit-scrollbar,.hc-fam::-webkit-scrollbar{display:none}
  .hc-gbig > li,.hc-gsm > li,.hc-menu > li,.hc-chart > li{flex:0 0 auto;scroll-snap-align:start}
  .hc-gbig > li{width:150px} .hc-gsm > li{width:168px} .hc-menu > li{width:100px}
  .hc-mos b{font-size:17px}
  .hc-fm{flex:0 0 78%;scroll-snap-align:start}
  .hc-tl{margin-inline:8px}
  .hc-tl b{font-size:16px}
  .hc-chart{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);grid-auto-columns:80%}
  .hc-disc{width:108px} .hc-disc img{width:108px;height:108px}
  .hc-person{width:84px} .hc-person img,.hc-person i{width:72px;height:72px}
  .hc-mi{padding:12px 6px 10px}
}
.index[hidden]{display:none}
.index{padding-bottom:28px}
body.dock-on .index{padding-bottom:calc(28px + var(--dock))}
body[data-view="home"] .v-home .pfoot{display:none}
.index.doc{max-width:1180px}
.index.doc > h2:first-child{font-size:var(--f-body);font-weight:500;color:var(--ink);margin:0}
.index.doc > p{font-size:var(--f-body);line-height:2;max-width:68ch;color:var(--muted)}
.index.doc dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;font-size:var(--f-meta);max-width:560px}
.index.doc dt{color:var(--muted)}
.index.doc dd{color:var(--ink);margin:0}
.index.doc ul{display:block;columns:3 240px;column-gap:32px}
.index.doc li{break-inside:avoid;font-size:var(--f-meta);line-height:1.6}
.index.doc li a{padding-inline:0;white-space:normal;overflow:visible}
.index.doc .ssr-head-t{display:grid;gap:2px}
.index.doc .ssr-head-t h2{font-size:var(--f-body);font-weight:500;color:var(--ink);margin:0}
.index.doc .ssr-head-t p{font-size:var(--f-meta)}
.index.doc .ssr-head-t a,.index.doc .ssr-tax a{padding-inline:4px}
.index.doc > div:not(.ssr-head){font-size:var(--f-body);color:var(--ink);max-width:62ch}
/* long lists fold after twelve (every link stays in the document); «همه» opens the rest */
.index.doc ul.fold:not(.open) > li:nth-child(n+13),.index.doc ol.fold:not(.open) > li:nth-child(n+13){display:none}
.index.doc ol{display:block;columns:3 240px;column-gap:32px;list-style:none}
.v-album .by{font-size:var(--f-body);color:var(--muted)}
.v-album .by a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px}
.alb{color:inherit;text-decoration:none}
.index.doc .more{justify-self:start;margin-top:4px}
.pfoot:empty{border-top:0;padding-top:0;margin-top:0}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:40px 16px 28px;margin-top:24px;border-top:1px solid var(--line)}
@media (min-width:861px){ .pfoot{padding:44px 48px 36px} .v-browse .pfoot{padding-inline:56px} }
body.dock-on .pfoot{padding-bottom:calc(28px + var(--dock))}

/* the account avatar: an initial when signed in, a quiet person glyph when not */
.avatar svg{width:18px;height:18px;color:var(--muted)}

/* first paint, before the catalogue answers: the horizon is there, the words are not yet */
body.boot .np .ttl,body.boot .np .facts,body.boot #h-by,body.boot .queue,body.boot .transport,body.boot .layer2{visibility:hidden}
body.boot #h-disc{background:var(--wash)}
.sun .disc:empty{background:var(--wash)}

/* the page-level states (loading · empty · error) reuse v3's designed «empty» block */
.astate{padding-top:12px}
.stline{font-size:var(--f-meta);color:var(--muted);padding-block:18px}
.v-ch .rows:empty + .more:empty{display:none}

/* the ⋯ items that live in the current site are links; they look like the other items */
a.mi{text-decoration:none}

/* a row whose song has no stream yet */
.row.na .t{color:var(--muted)}

/* a one-word artist name («Ebi») is still a 44px target */
.link{min-width:44px}

/* ═══════════════════════════════════════════════════════════════════════
   polish (v2 pass) — colour, covers, absence, depth, states, details.
   Appended last; the v2/v3/live sheets above are carried verbatim.        */

/* ── the palette, as numbers that cross-fade (see applyColour / Hue in the JS) ──
   --h/--s   ground hue (area)        --ha/--sa  accent hue (intensity)
   --m 0…1   monochrome sleeve → «moonlight»: the brand plum night and a warm silver glow, never grey mud
   --am 0|1  no accent at all → the lit waveform is warm ivory
   --glare   a very light sleeve: the disc is toned down so it does not punch a hole in the sky */
@property --ha { syntax:'<number>'; inherits:true; initial-value:300; }
@property --sa { syntax:'<number>'; inherits:true; initial-value:14; }
@property --m { syntax:'<number>'; inherits:true; initial-value:1; }
@property --am { syntax:'<number>'; inherits:true; initial-value:1; }
@property --glare { syntax:'<number>'; inherits:true; initial-value:0; }
body{transition:--h var(--flood-t) var(--ez),--s var(--flood-t) var(--ez),--ha var(--flood-t) var(--ez),--sa var(--flood-t) var(--ez),
  --m var(--flood-t) var(--ez),--am var(--flood-t) var(--ez),--glare var(--flood-t) var(--ez)}
:root{
  --moon-lo:hsl(292 19% 12.5%);
  --flood-col:hsl(var(--h) calc(var(--s) * .95%) 14.5%);
  --flood-lo:color-mix(in oklab,var(--moon-lo) calc(var(--m) * 100%),var(--flood-col));
  --flood-hi:color-mix(in oklab,hsl(36 26% 72% / .3) calc(var(--m) * 100%),hsl(var(--h) calc(var(--s) * 1.3%) 34% / .66));
  --wave:color-mix(in oklab,hsl(36 38% 86%) calc(var(--am) * 100%),hsl(var(--ha) calc(var(--sa) * 1.2%) 76%));
  --wave-veil:color-mix(in oklab,hsl(36 30% 82% / .15) calc(var(--am) * 100%),hsl(var(--ha) calc(var(--sa) * 1%) 60% / .16));
  --wave-deep:color-mix(in oklab,var(--wave) 58%,var(--flood-lo));
  --ring-in:rgba(255,255,255,.08);
  --vign:rgba(8,4,10,calc(.2 + .24 * var(--glare)));
  --sk:color-mix(in oklab,var(--ink) 10%,transparent);
}
:root[data-theme="light"]{
  --moon-lo:hsl(28 20% 93%);
  --flood-col:hsl(var(--h) calc(var(--s) * .5%) 92%);
  --flood-hi:color-mix(in oklab,hsl(30 34% 80% / .6) calc(var(--m) * 100%),hsl(var(--h) calc(var(--s) * 1%) 78% / .6));
  --wave:color-mix(in oklab,hsl(300 24% 24%) calc(var(--am) * 100%),hsl(var(--ha) calc(var(--sa) * 1%) 26%));
  --wave-veil:color-mix(in oklab,hsl(300 20% 40% / .12) calc(var(--am) * 100%),hsl(var(--ha) calc(var(--sa) * 1%) 40% / .14));
  --ring-in:rgba(42,32,48,.08);
  --vign:rgba(42,32,48,calc(.05 + .1 * var(--glare)));
  --sk:color-mix(in oklab,var(--ink) 8%,transparent);
}

/* ── covers: a disc with an inner hairline and a soft edge falloff, so the circular cut reads as a lens, not an accident ── */
.art .disc{box-shadow:0 30px 90px -20px var(--flood-hi);background:color-mix(in oklab,var(--wave) 12%,var(--flood-lo))}
.art .disc::after,.halo .pic::after,.alb .disc::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 0 1px var(--ring-in),inset 0 0 calc(var(--art,236px) * .14) var(--vign)}
.art .disc img{position:absolute;inset:0}
:root:not([data-theme="light"]) .art .disc img:not(.lo){filter:brightness(calc(1 - .08 * var(--glare)))}
/* images arrive by fading in over their placeholder (the blurred 160px copy, or the palette-tinted wash) — never a pop */
.disc img,.th img,.halo .pic img{opacity:0;transition:opacity .6s var(--ez)}
.disc img.in,.th img.in,.halo .pic img.in{opacity:1}
.disc img.lo{filter:blur(14px) saturate(1.15);transform:scale(1.14)}
.th{outline:1px solid var(--ring-in);outline-offset:-1px}
.mark .th{outline:0}

/* ── designed absence: the song's own ring (or an artist's bars) in its golden-angle hue, in both themes ── */
.gen{width:100%;height:100%;display:block}
.gen .g0{fill:hsl(var(--gh) 22% 19%)}
.gen .g1{fill:hsl(var(--gh) 26% 25%)}
.gen .g2{fill:hsl(var(--gh) 34% 66% / .16);stroke:hsl(var(--gh) 40% 74% / .9);stroke-width:1;stroke-linejoin:round}
.gen .g3{fill:hsl(var(--gh) 34% 76% / .8)}
.gen .g4{stroke:hsl(var(--gh) 40% 74% / .85);stroke-width:1.25;stroke-linecap:round}
.gen .g5{fill:none;stroke:hsl(var(--gh) 30% 70% / .35);stroke-width:1}
:root[data-theme="light"] .gen .g0{fill:hsl(var(--gh) 30% 89%)}
:root[data-theme="light"] .gen .g1{fill:hsl(var(--gh) 30% 83%)}
:root[data-theme="light"] .gen .g2{fill:hsl(var(--gh) 36% 40% / .1);stroke:hsl(var(--gh) 36% 34% / .85)}
:root[data-theme="light"] .gen .g3{fill:hsl(var(--gh) 30% 34% / .7)}
:root[data-theme="light"] .gen .g4{stroke:hsl(var(--gh) 34% 36% / .8)}
:root[data-theme="light"] .gen .g5{stroke:hsl(var(--gh) 30% 40% / .3)}

/* ── the artist's portrait: an HTML image in the ring's centre (not an SVG <image>, see notes F10) ── */
.halo .pic{position:absolute;z-index:1;left:21.905%;top:21.905%;width:56.19%;height:56.19%;border-radius:50%;overflow:hidden;background:var(--wash);--art:236px}
.halo .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;display:block}
.alb .disc img{opacity:0;transition:opacity .6s var(--ez)}
.alb .disc img.in{opacity:1}

/* ── the horizon in depth: lit crest on the song playing, neighbours dimming with distance, haze at the feet ── */
.first{
  --hill:color-mix(in oklab,var(--ink) 18%,var(--flood-lo));
  --hill-top:color-mix(in oklab,var(--ink) 27%,var(--flood-lo));
  --hill-past:color-mix(in oklab,var(--ink) 10%,var(--flood-lo));
  --hill-past-top:color-mix(in oklab,var(--ink) 15%,var(--flood-lo));
  --hill-lit:color-mix(in oklab,var(--wave) 40%,var(--hill-top))}
:root[data-theme="light"] .first{
  --hill:color-mix(in oklab,var(--ink) 14%,var(--flood-lo));
  --hill-top:color-mix(in oklab,var(--ink) 24%,var(--flood-lo));
  --hill-past:color-mix(in oklab,var(--ink) 8%,var(--flood-lo));
  --hill-past-top:color-mix(in oklab,var(--ink) 12%,var(--flood-lo));
  --hill-lit:color-mix(in oklab,var(--wave) 34%,var(--hill-top))}
.seg{fill:url(#gHill);transition:opacity .6s var(--ez)}
.seg.past{fill:url(#gPast)}
.seg.cur{fill:url(#gCur)}
.seg.played{fill:url(#gPlayed)}
.seg.ghost{fill:color-mix(in oklab,var(--ink) 4%,transparent);stroke:var(--tape);stroke-width:1;stroke-dasharray:2 4}
.rim{fill:none;stroke:var(--wave);stroke-width:1.4;stroke-linejoin:round;opacity:.9}
.reflect{opacity:.75}
.ph::before{box-shadow:0 0 0 3px color-mix(in oklab,var(--wave) 30%,transparent)}
.ribbon:focus-visible{outline:none}
.ribbon:focus-visible .ph::before{box-shadow:0 0 0 3px var(--flood-lo),0 0 0 4.5px var(--ink)}

/* ── the states under the title: restricted (geo), guest limit, catalogue error — each with a way forward ── */
.flat{display:block;width:96px;height:20px;color:var(--muted)}
.flat .fg{stroke:currentColor;stroke-width:1.2;stroke-linecap:round;opacity:.75}
.flat .fb{stroke:currentColor;stroke-width:1.2}
.rnote{max-width:46ch;margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:2px}
.rnote .flat{margin-bottom:8px}
.rnote .rl{display:block}
.racts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}
.racts .pill{margin:0;color:var(--ink)}
.go{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding-inline:22px;border-radius:999px;
  background:var(--ink);color:var(--ground);font-weight:500;transition:transform .5s var(--press),box-shadow .3s var(--ez)}
.go svg{width:18px;height:18px}
.rnote[data-kind="known"]{margin-top:6px}
/* restricted and gate: the facts line gives way so the transport stays on the first screen */
body.noted .np .facts{display:none}
@media (min-width:861px){
  /* desktop: the note is two rows — the headline, then the sentence with its doors beside it — so ▶ stays on the first screen */
  .rnote{max-width:min(100%,900px);line-height:1.8}
  .rnote[data-kind="region"],.rnote[data-kind="gate"]{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:16px;row-gap:2px}
  .rnote[data-kind="region"] b,.rnote[data-kind="gate"] b{grid-column:1 / -1}
  .rnote[data-kind="region"] .flat{display:none}
  .rnote[data-kind="region"] .rl,.rnote[data-kind="gate"] .rl{max-width:62ch;text-align:start}
  .rnote[data-kind="region"] .racts,.rnote[data-kind="gate"] .racts{margin-top:0;flex-wrap:nowrap}
  body.noted .v-home .transport{margin-top:8px}
}
/* the catalogue did not answer: no dead controls, no «۰:۰۰», no orphan headings */
body.failed .v-home .transport,body.failed .clock,body.failed .queue,body.failed .lane,body.failed #glane,body.failed .ph,body.failed .layer2 .after{display:none}
body.failed .sun .disc{background:transparent;box-shadow:none;outline:1px dashed var(--line);outline-offset:-1px}

/* ── skeletons: the shape of what is coming, in the wash, with one slow sheen ── */
@keyframes sheen{from{background-position:130% 0}to{background-position:-30% 0}}
.skrow .th,.skt i,.skw,.vw.sk,.skh,.skring,body.boot #h-ttl,body.boot #h-by{
  background:linear-gradient(100deg,var(--wash) 30%,var(--sk) 50%,var(--wash) 70%) 0 0/300% 100%;animation:sheen 1.8s linear infinite}
.skrow{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:14px;min-height:62px;padding-block:8px}
.skrow + .skrow{border-top:1px solid var(--line)}
.skrow .th{outline:0}
.skt{display:grid;gap:8px;min-width:0}
.skt i{display:block;height:10px;width:58%;border-radius:999px}
.skt i + i{width:34%;height:8px}
.skt i + i + i{width:46%}
.skch{display:grid;grid-template-rows:auto 34px;row-gap:10px;padding-block:12px;border-top:1px solid var(--line)}
.skch .skt i{width:40%}
/* a channel row's skeleton is a low horizon, not a grey bar */
.skw{height:34px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34C20 34 22 20 40 20S62 30 80 28 104 12 122 12 146 26 166 25 190 16 208 16 232 28 252 27 280 18 300 22V34Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34C20 34 22 20 40 20S62 30 80 28 104 12 122 12 146 26 166 25 190 16 208 16 232 28 252 27 280 18 300 22V34Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.vw.sk{width:var(--w,96px);border-color:transparent;pointer-events:none}
.skh{height:14px;width:120px;border-radius:999px;margin:34px 0 10px}
.skhero{display:grid;justify-items:center;gap:22px;padding-block:8px 20px}
.skring{width:min(248px,66vw);aspect-ratio:1;border-radius:50%;
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 53%,#000 58%,transparent 59%,transparent 66%,#000 67%,#000 69%,transparent 70%);
  mask:radial-gradient(circle,transparent 52%,#000 53%,#000 58%,transparent 59%,transparent 66%,#000 67%,#000 69%,transparent 70%)}
.skhero .skt{justify-items:center;width:min(320px,80vw)}
@media (min-width:861px){ .skhero{grid-template-columns:280px minmax(0,1fr);justify-items:start;align-items:center;column-gap:40px} .skhero .skt{justify-items:start} }
/* home, first paint: the title and artist as bars, the queue as rows, the words as pills, a light travelling the horizon */
body.boot .np .ttl,body.boot #h-by{visibility:visible}
body.boot #h-ttl{display:block;width:min(11ch,68vw);height:calc(var(--f-sun) * .9);margin:10px auto 6px;border-radius:999px}
body.boot #h-ttl:not(:empty){width:auto;height:auto;margin:2px 0 0;border-radius:0;background:none;animation:none;display:-webkit-box}
body.boot #h-by{display:block;width:96px;height:14px;border-radius:999px;margin-top:10px}
body.boot .queue{visibility:visible}
body.boot .queue header,body.boot .qmore,body.boot .qcue,body.boot .clock,body.boot .ph{visibility:hidden}
@keyframes along{from{background-position:-40% 0}to{background-position:140% 0}}
body.boot .ribbon::after{content:"";position:absolute;inset-inline:0;bottom:var(--below);height:1px;
  background:linear-gradient(90deg,transparent,var(--ink),transparent) 0 0/34% 100% no-repeat;animation:along 2.6s var(--ez) infinite}
.vw[aria-busy="true"]{animation:busy .9s ease-in-out infinite alternate}
@keyframes busy{to{border-color:var(--muted)}}
@media (prefers-reduced-motion:reduce){
  .skrow .th,.skt i,.skw,.vw.sk,.skh,.skring,body.boot #h-ttl,body.boot #h-by,body.boot .ribbon::after,.vw[aria-busy="true"]{animation:none}
}

/* ── pressed · hover · focus, the same everywhere ── */
.round,.pill,.vw,.acct{transition:color .3s var(--ez),background .3s var(--ez),border-color .3s var(--ez),box-shadow .3s var(--ez),transform .5s var(--press)}
.round:active,.pill:active,.vw:active,.acct:active,.go:active,.play:active{transform:scale(.94)}
.row:active,.arow:active,.chrow:active,.bw:active{background:var(--wash)}
.mi:active{background:var(--line)}
.row,.arow,.chrow,.bw{border-radius:999px;transition:background .25s var(--ez)}
.row:focus-visible,.arow:focus-visible,.chrow:focus-visible,.bw:focus-visible,.mi:focus-visible{outline-offset:-2px}
@media (hover:hover){
  .play:hover,.go:hover{box-shadow:0 0 0 6px var(--wash)}
  .pill:hover{border-color:var(--muted)}
  /* a row says what a click does: the cover dims and shows ▶ (the song playing keeps its ring instead) */
  .row .th,.arow .th{position:relative}
  .row:not(.now) .th::after{content:"";position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .25s var(--ez);z-index:3;
    background:rgba(14,10,16,.52) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23EEE7F1' d='M8 5.2v13.6a.8.8 0 0 0 1.2.7l11-6.8a.8.8 0 0 0 0-1.4l-11-6.8A.8.8 0 0 0 8 5.2z'/%3E%3C/svg%3E") 55% 50%/18px no-repeat}
  .row:not(.now):hover .th::after,.row:not(.now):focus-visible .th::after{opacity:1}
  .arow:hover .go2{color:var(--ink)}
}

/* ── one optical size for the list icons (was 18 / 22 side by side) ── */
.qli .rm svg,.qli .add svg,.bi .add svg,.chli .round svg{width:20px;height:20px}
.row .d{min-width:3.4ch;text-align:end}
.arow .go2{display:grid;place-items:center;width:28px;color:var(--muted);transition:color .25s var(--ez)}
.arow .go2 svg{width:18px;height:18px}

/* ── the ⋯ menu: «don't play this artist» is quieter than the doors around it ── */
.mi.quiet{color:var(--muted)}

/* ── empty and error pages carry the same silence mark ── */
.empty .flat{margin-bottom:16px}
.empty .go{margin-top:14px}
.empty + .sech{padding-top:26px}

/* ── lyrics: the upright ribbon's playhead stays inside the phone's edge; states carry the silence mark ── */
.tlin{width:calc(100% - 12px);margin-inline-start:12px}
.msg .flat{margin-bottom:14px}
.msg .go{margin-block-start:14px}
.works .row{border-radius:0}

/* ── the channel's own horizon: lit at the crests, deeper at the feet (one gradient, the channel's hue) ── */
.v-ch{--ch-top:hsl(var(--ch) 48% 72%);--ch-base:hsl(var(--ch) 40% 44% / .5)}
:root[data-theme="light"] .v-ch{--ch-top:hsl(var(--ch) 42% 40%);--ch-base:hsl(var(--ch) 40% 60% / .45)}
.v-ch .chwave .cw{fill:url(#gCh)}
.chwave .cb{stroke:hsl(var(--ch) 30% 64% / .5)}

/* ── desktop toasts sit at the side, never on the centred transport ── */
@media (min-width:861px){ .toast{inset-inline:auto 32px;margin:0;width:min(460px,calc(100vw - var(--rail) - 64px))} }