/* Dialect */

:root{
  --bg:       #08080a;
  --ink:      #cfcfd6;
  --ink-dim:  #7e7e88;
  --ink-faint:#4b4b54;
  --rule:     #1b1b21;
  --accent:   #6f7d8c;          /* set per track by JS */
  --player-h: 56px;
  --font-ui: "Helvetica Neue", Inter, system-ui, -apple-system, sans-serif;
  --font-lyric: "Iowan Old Style", Palatino, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box }

html{ background:var(--bg) }
body{
  margin:0; min-height:100svh;
  background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-size:15px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;   /* the grain layer is deliberately larger than the viewport */
}

/* ── background ──────────────────────────────────────────── */

#viz{ position:fixed; inset:0; width:100%; height:100%; z-index:0 }

.grain{
  position:fixed; inset:-60px; z-index:1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 900ms steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-14px,9px)}
  50%{transform:translate(11px,-12px)} 75%{transform:translate(-8px,-6px)}
  100%{transform:translate(0,0)}
}

/* ── shell ───────────────────────────────────────────────── */

.shell{
  position:relative; z-index:2;
  max-width:860px; margin:0 auto;
  padding:clamp(2rem,6vh,3.5rem) 1.5rem calc(var(--player-h) + 2.5rem);
}

.head{
  display:flex; align-items:baseline; gap:1rem;
  padding-bottom:1.1rem; margin-bottom:1.75rem;
  border-bottom:1px solid var(--rule);
}
.wordmark{
  margin:0;
  font-size:2.15rem; font-weight:250;
  letter-spacing:.4em; text-transform:uppercase;
  color:#e6e6ec;
  display:flex;
}
/* each letter drifts on its own clock — the title never quite settles */
.wordmark span{
  display:inline-block;
  animation:drift 11s cubic-bezier(.22,.61,.36,1) infinite;
  animation-delay:calc(var(--i) * -1.45s);
}
.wordmark span:nth-child(1){--i:0} .wordmark span:nth-child(2){--i:1}
.wordmark span:nth-child(3){--i:2} .wordmark span:nth-child(4){--i:3}
.wordmark span:nth-child(5){--i:4} .wordmark span:nth-child(6){--i:5}
.wordmark span:nth-child(7){--i:6}
@keyframes drift{
  0%,100%{ transform:translateY(0);      opacity:.86 }
  50%    { transform:translateY(-.13em); opacity:1 }
}
.head__meta{
  margin:0 0 0 auto;
  font-size:.68rem; letter-spacing:.12em;
  color:var(--ink-faint); white-space:nowrap;
}

/* ── panes ───────────────────────────────────────────────── */

.panes{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:2.75rem;
  align-items:start;
}

/* ── tracklist ───────────────────────────────────────────── */

.tracklist{ list-style:none; margin:0; padding:0 }

.track{
  display:grid;
  grid-template-columns:1.6rem 1fr auto;
  align-items:baseline; gap:.75rem;
  width:100%;
  padding:.42rem .5rem .42rem .6rem;
  background:none; border:0; border-radius:2px;
  color:var(--ink-dim);
  font-family:inherit; font-size:.94rem; text-align:left;
  cursor:pointer; position:relative;
  transition:color .2s, background-color .2s;
}
.track::before{
  content:""; position:absolute; left:0; top:20%; bottom:20%;
  width:1px; background:var(--accent);
  transform:scaleY(0); transition:transform .25s;
}
.track:hover{ color:var(--ink); background:rgba(255,255,255,.02) }
.track:focus-visible{ outline:1px solid var(--rule); outline-offset:-1px; color:var(--ink) }
.track.is-current{ color:#eaeaf0 }
.track.is-current::before{ transform:scaleY(1) }
.track.is-current .track__n{ color:var(--accent) }

.track__n,.track__dur{
  font-family:var(--font-mono); font-size:.68rem;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}

/* hairline of progress under the playing row */
.track__prog{
  grid-column:1 / -1; height:1px; margin-top:.4rem;
  background:var(--rule); opacity:0; transition:opacity .3s;
}
.track.is-current .track__prog{ opacity:1 }
.track__prog i{ display:block; height:100%; width:0%; background:var(--accent) }

/* ── lyrics ──────────────────────────────────────────────── */

.lyrics{
  font-family:var(--font-lyric);
  font-size:.98rem; line-height:1.75;
  color:#a9a9b3;
  max-height:min(62svh,600px); overflow-y:auto;
  padding-right:1rem;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 94%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 4%,#000 94%,transparent);
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
.lyrics:focus-visible{ outline:none }
.lyrics::-webkit-scrollbar{ width:2px }
.lyrics::-webkit-scrollbar-thumb{ background:var(--rule) }

.stanza{ margin:0 0 1.6em; white-space:pre-line }
.stanza:first-child{ margin-top:.4em }
.stanza:last-child{ margin-bottom:3em }

/* ── player ──────────────────────────────────────────────── */

.player{
  position:fixed; left:0; right:0; bottom:0; z-index:5;
  background:rgba(8,8,10,.92);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
}
.player__inner{
  max-width:860px; margin:0 auto;
  height:var(--player-h);
  padding:0 1.5rem;
  display:flex; align-items:center; gap:.9rem;
}

.btn{
  flex:none; display:grid; place-items:center;
  width:17px; height:17px;
  background:none; border:0; padding:0;
  color:var(--ink-dim); cursor:pointer;
  transition:color .2s;
}
.btn:hover{ color:var(--ink) }
.btn:focus-visible{ outline:1px solid var(--accent); outline-offset:4px }
.btn svg{ width:100%; height:100%; fill:none; stroke:currentColor;
          stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.btn--play{ width:22px; height:22px; color:var(--ink); margin:0 .1rem }
.btn--play svg{ fill:currentColor; stroke:none }
.btn--vol{ margin-left:.2rem }

.i-pause,.i-muted{ display:none }
body.is-playing .i-play{ display:none }
body.is-playing .i-pause{ display:block }
body.is-muted .i-loud{ display:none }
body.is-muted .i-muted{ display:block }

.now{
  flex:none; max-width:13rem; margin-left:.5rem;
  font-size:.8rem; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.t{
  flex:none; font-family:var(--font-mono); font-size:.66rem;
  color:var(--ink-faint); font-variant-numeric:tabular-nums;
}

.scrub{ flex:1; min-width:0; padding:.8rem 0; cursor:pointer; touch-action:none }
.scrub:focus-visible{ outline:none }
.scrub:focus-visible .scrub__track{ box-shadow:0 0 0 1px var(--accent) }
.scrub__track{ position:relative; height:2px; background:var(--rule); border-radius:2px }
.scrub__buf{ position:absolute; inset:0 auto 0 0; width:0%; background:#23232b; border-radius:2px }
.scrub__fill{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--accent); border-radius:2px }
.scrub__fill::after{
  content:""; position:absolute; right:-3px; top:50%;
  width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background:var(--accent);
  opacity:0; transition:opacity .18s;
}
.scrub:hover .scrub__fill::after,
.scrub.is-scrubbing .scrub__fill::after{ opacity:1 }

/* ── responsive ──────────────────────────────────────────── */

@media (max-width:760px){
  .panes{ grid-template-columns:1fr; gap:2.25rem }
  .lyrics{ max-height:none; -webkit-mask-image:none; mask-image:none; padding-right:0 }
  .now{ display:none }
  .player__inner{ gap:.75rem }
  .wordmark{ font-size:1.5rem; letter-spacing:.28em }
}

@media (prefers-reduced-motion:reduce){
  .grain,.wordmark span{ animation:none }
  *{ transition-duration:.01ms !important }
}