:root { --ink: #fff; --canvas: #000; --scrim: 0.30; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: dark; }
html, body {
  margin: 0; height: 100%; height: 100dvh; overflow: hidden;
  background: var(--canvas); color: var(--ink);
  font-family: 'Helvetica Neue', Arial, sans-serif;
  overscroll-behavior: none;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

#stage { position: fixed; inset: 0; }
#stage > * { position: absolute; inset: 0; width: 100%; height: 100%; }
#bg, #gl { opacity: 0; transition: opacity .5s; }
#bg { object-fit: cover; }
body.is-live #gl { opacity: 1; }
.scrim { background: #000; opacity: 0; transition: opacity .5s; }
body.is-live #bg { opacity: 1; }
body.is-live .scrim { opacity: var(--scrim); }
.grain {
  pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@font-face { font-family: 'CloisterBlack'; src: url('../assets/CloisterBlack.ttf'); }
#flat, .fallback {
  display: grid; place-items: center; font-family: 'CloisterBlack', serif;
  font-weight: 400; font-size: clamp(2rem, 11vw, 9rem);
}
.fallback { position: fixed; inset: 0; background: #000; }

.links {
  position: fixed; top: 16px; right: 16px; z-index: 1;
  display: flex; align-items: center; gap: 12px;
}

#player {
  --ink-warm: #f3e6d0;
  width: 760px; padding: 0 8px;
  color: var(--ink-warm); font-family: 'CloisterBlack', serif;
  text-shadow: 0 0 10px rgba(200,132,60,.45), 0 1px 2px rgba(0,0,0,.8);
  user-select: none;
  visibility: hidden;
}
#player.in-3d, body.flat #player { visibility: visible; }
body.flat #player { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; width: min(760px, calc(100vw - 32px)); }
#player .now { margin: 0 0 6px; text-align: center; font-size: 34px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#player .artist { opacity: .7; font-size: .7em; }
#player .artist:not(:empty)::before { content: '— '; }
#player .seek { display: flex; align-items: center; gap: 14px; }
#player .seek .rule { flex: 1; }
#player .t { font-size: 22px; min-width: 3.2ch; font-variant-numeric: tabular-nums; }
#player .t.dur { text-align: right; }
#player .ctl { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; }
#player .gap { width: 22px; }
#player #volume { width: 150px; }

#player button {
  width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer;
  color: rgba(243,230,208,.8); transition: color .2s, filter .2s, transform .2s;
  filter: drop-shadow(0 0 4px rgba(200,132,60,.4));
}
#player #play { width: 46px; height: 46px; }
#player button:hover, #player button:focus-visible {
  color: #fff; outline: none; transform: scale(1.1);
  filter: drop-shadow(0 0 8px rgba(255,200,140,.8));
}
#player button svg { width: 100%; height: 100%; fill: currentColor; }
#play.is-paused .i-pause, #play:not(.is-paused) .i-play { display: none; }
#player { position: relative; }
#songs svg { transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
#songs.is-open { color: #fff; filter: drop-shadow(0 0 8px rgba(255,200,140,.8)); }
#songs.is-open svg { transform: rotate(90deg); }

.tracks {
  --ease: cubic-bezier(.7, 0, .2, 1);
  position: absolute; left: 50%; top: calc(100% + 18px); translate: -50% 0;
  width: 560px; margin: 0; padding: 18px 0; list-style: none;
  background: linear-gradient(rgba(14,10,6,.86), rgba(6,4,2,.9));
  border-block: 1px solid rgba(243,230,208,.4);
  box-shadow: 0 0 40px rgba(200,132,60,.18), inset 0 0 30px rgba(0,0,0,.6);
  clip-path: inset(0 50% 100% 50%);
  opacity: 0;
  transition: clip-path .45s var(--ease) .15s, opacity .3s ease .25s;
}
.tracks.open {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transition: clip-path .6s var(--ease), opacity .2s ease;
}
.tracks::before, .tracks::after {
  content: ''; position: absolute; left: 50%; width: 9px; height: 9px;
  background: var(--ink-warm); rotate: 45deg; translate: -50% 0;
  box-shadow: 0 0 8px rgba(255,200,140,.8);
}
.tracks::before { top: -5px; }
.tracks::after { bottom: -5px; }

.tracks li {
  opacity: 0; translate: 0 -10px; filter: blur(6px);
  transition: opacity .2s ease, translate .2s ease, filter .2s ease;
}
.tracks.open li {
  opacity: 1; translate: 0 0; filter: blur(0);
  transition: opacity .45s ease, translate .45s var(--ease), filter .45s ease;
  transition-delay: calc(.25s + var(--i) * .08s);
}
#player .tracks button {
  all: unset; box-sizing: border-box; cursor: pointer; height: auto;
  display: grid; grid-template-columns: 3.2ch 1fr auto; align-items: baseline; gap: 14px;
  width: 100%; padding: 8px 28px; font-size: 26px; color: rgba(243,230,208,.75);
  transition: color .2s, background .3s, letter-spacing .3s;
}
.tracks .no { font-family: Georgia, 'Times New Roman', serif; font-size: .62em; letter-spacing: .08em; opacity: .6; text-align: right; }
.tracks .by { font-size: .6em; opacity: .6; white-space: nowrap; }
#player .tracks button:hover, #player .tracks button:focus-visible {
  transform: none; filter: none;
  color: #fff; letter-spacing: .02em;
  background: linear-gradient(90deg, transparent, rgba(200,132,60,.18), transparent);
}
#player .tracks button[aria-current] { color: #fff; }
#player .tracks button[aria-current] .no::before { content: '\2020 '; }

#mute svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#mute .spk { fill: currentColor; }
#mute.is-off .on, #mute:not(.is-off) .off { display: none; }

.rule {
  --v: 15%;
  --rule: rgba(255,255,255,.28);
  appearance: none; -webkit-appearance: none;
  height: 24px; margin: 0; background: transparent; cursor: pointer;
}
.rule::-webkit-slider-runnable-track {
  height: 24px;
  background:
    linear-gradient(#fff, #fff) 4px calc(50% - 2px) / calc(var(--v) - 4px) 1px no-repeat,
    linear-gradient(#fff, #fff) 4px calc(50% + 2px) / calc(var(--v) - 4px) 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 4px calc(50% - 2px) / calc(100% - 8px) 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 4px calc(50% + 2px) / calc(100% - 8px) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' fill-opacity='.6' d='M4 0l4 4-4 4-4-4z'/%3E%3C/svg%3E") left center / 8px 8px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' fill-opacity='.6' d='M4 0l4 4-4 4-4-4z'/%3E%3C/svg%3E") right center / 8px 8px no-repeat;
}
.rule::-moz-range-track {
  height: 24px;
  background:
    linear-gradient(var(--rule), var(--rule)) 4px calc(50% - 2px) / calc(100% - 8px) 1px no-repeat,
    linear-gradient(var(--rule), var(--rule)) 4px calc(50% + 2px) / calc(100% - 8px) 1px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' fill-opacity='.6' d='M4 0l4 4-4 4-4-4z'/%3E%3C/svg%3E") left center / 8px 8px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' fill-opacity='.6' d='M4 0l4 4-4 4-4-4z'/%3E%3C/svg%3E") right center / 8px 8px no-repeat;
}
.rule::-moz-range-progress {
  height: 5px; border-block: 1px solid #fff; background: transparent;
}
.rule::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 24px; border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'%3E%3Cpath fill='%23fff' d='M7 0l1.5 2v4H12l2 1-2 1H8.5v13L7 24l-1.5-3V8H2L0 7l2-1h3.5V2z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.35));
  transition: filter .2s, transform .2s;
}
.rule::-moz-range-thumb {
  width: 14px; height: 24px; border: 0; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 24'%3E%3Cpath fill='%23fff' d='M7 0l1.5 2v4H12l2 1-2 1H8.5v13L7 24l-1.5-3V8H2L0 7l2-1h3.5V2z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.35));
}
.rule:hover::-webkit-slider-thumb, .rule:focus-visible::-webkit-slider-thumb {
  filter: drop-shadow(0 0 6px rgba(255,255,255,.8)); transform: scale(1.15);
}
.rule:focus-visible { outline: none; }

.links a { display: block; width: 28px; height: 28px; color: rgba(255,255,255,.7); transition: color .2s; }
.links a:hover, .links a:focus-visible { color: #fff; outline: none; }
.links svg { width: 100%; height: 100%; fill: currentColor; }