@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{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 .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}
.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))} }