/* Mystiko site. The orb canvas is fixed above the page; it sits in the hero, then docks into the top
   bar as you scroll (site.js). Below the hero the page is three chapters, each with its own tone.
   Light ground + dark metal orb by default, dark ground + white orb under prefers-color-scheme: dark
   (the same pair the core page uses — site.js picks the matching orb theme). */

:root {
  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --gutter: 16px;
}
/* the day palette: the hero, the contact chapter, and the page whenever one of those is on screen.
   Declared on [data-tone="day"] too, so a day chapter never inherits a night one's colours from the body. */
:root, [data-tone="day"] {
  --bg-1: #ece6d9; --bg-2: #cec4ac; --bg-3: #9c9179;
  --page: #e4dccb;
  --ink: #1b150d;
  --ink-2: rgba(27, 21, 13, 0.62);
  --ink-3: rgba(27, 21, 13, 0.4);
  --line: rgba(27, 21, 13, 0.14);
  --fill: rgba(27, 21, 13, 0.05);
  --accent: #23803b;            /* the orb's seam green, darkened to read as text on the bone ground */
  --amber: #b86a0c;             /* the slime's colour, same treatment */
  --glass: rgba(236, 230, 217, 0.78);
  --btn-ink: #f4efe4;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root, [data-tone="day"] {
    --bg-1: #1e1309; --bg-2: #0d0804; --bg-3: #060402;
    --page: #0b0704;
    --ink: #eee7dc;
    --ink-2: rgba(238, 231, 220, 0.64);
    --ink-3: rgba(238, 231, 220, 0.4);
    --line: rgba(238, 231, 220, 0.13);
    --fill: rgba(238, 231, 220, 0.05);
    --accent: #4cd964;
    --amber: #ffb347;
    --glass: rgba(14, 9, 5, 0.74);
    --btn-ink: #0d0804;
    color-scheme: dark;
  }
}
@media (min-width: 720px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%;
  background: var(--page);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- the orb layer ---------- */
#backdrop, #glow, #orb, #veil { position: fixed; pointer-events: none; }
body::before {                   /* the same warm radial ground as the core page, fixed behind the orb */
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 90% 80% at 50% 48%, var(--bg-1) 0%, var(--bg-2) 58%, var(--bg-3) 100%);
}
#backdrop, #glow { left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
#backdrop { background: radial-gradient(circle at 50% 46%, rgba(60, 40, 24, 0.35), rgba(10, 7, 4, 0) 60%); }
#glow { opacity: 0; mix-blend-mode: screen; }
/* above the page and the bar: it only ever sits where nothing else is — the middle of the hero, or
   docked into the bar beside the wordmark once you scroll (site.js moves it with a transform) */
#orb { inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease;
  z-index: 25; transform-origin: 50% 50%; will-change: transform; }
#orb.ready { opacity: 1; }
#veil { inset: 0; background: var(--page); opacity: 0; }
.dock { display: inline-block; width: 26px; height: 26px; margin-right: 12px; vertical-align: middle; }

/* ---------- top bar ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 14px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.bar.solid {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--line);
}
.mark {
  display: inline-flex; align-items: center;
  font: 500 15px/1 var(--serif); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; transition: color 0.3s ease;
}
.bar:not(.solid) .mark { color: transparent; }
.bar nav { display: flex; gap: 4px; }
.bar nav a {
  font-size: 13px; letter-spacing: 0.04em; color: var(--ink-2); text-decoration: none;
  padding: 8px 10px; border-radius: 999px; transition: color 0.2s ease, background-color 0.2s ease;
}
.bar nav a:hover, .bar nav a.here { color: var(--ink); background: var(--fill); }

/* ---------- hero ---------- */
main { position: relative; z-index: 1; }
.hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; }
#touch {                          /* sized and placed over the sphere by site.js; the only no-scroll zone */
  position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%);
  touch-action: none; cursor: crosshair;
}
.hero-text {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 20px));
  text-align: center;
}
.hero h1 {
  margin: 0; font: 400 clamp(30px, 8.5vw, 52px)/1 var(--serif);
  letter-spacing: 0.34em; text-transform: uppercase;
  margin-right: -0.34em;          /* letter-spacing trails the last letter; pull it back so the word centres */
}
.lede { margin: 12px auto 0; max-width: 30ch; font: italic 400 18px/1.4 var(--serif); color: var(--ink-2); }
.cta { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
#hint {
  position: absolute; left: 0; right: 0; margin: 0; text-align: center; pointer-events: none;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3);
  transition: opacity 0.8s ease;
}
#hint.gone { opacity: 0 !important; }

/* wide screens: the orb holds the middle, the words sit bottom-left like a caption */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .hero-text { right: auto; max-width: 360px; text-align: left; bottom: 56px; }
  .hero h1 { margin-right: 0; font-size: 46px; }
  .lede { margin-left: 0; }
  .cta { justify-content: flex-start; }
}
@media (max-height: 640px) and (max-width: 899px) { .lede { display: none; } }
/* once the player bar is up it does the Play button's job — on a phone, clear the way for it */
@media (max-width: 899px), (max-aspect-ratio: 5/4) {
  body.has-player .cta, body.has-player #hint { display: none; }
  body.has-player .hero-text { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 96px); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font: 500 14px/1 var(--sans); letter-spacing: 0.02em; text-decoration: none; cursor: pointer;
  color: var(--ink); background: transparent; border: 1px solid var(--line);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn:hover { border-color: var(--ink-3); background: var(--fill); }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--ink); color: var(--btn-ink); border-color: var(--ink); }
.btn.primary:hover { background: var(--ink); opacity: 0.88; }
.btn.small { height: 40px; padding: 0 16px; font-size: 13px; }
.btn:focus-visible, .track:focus-visible, .p-btn:focus-visible, .bar a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.ico { display: block; width: 12px; height: 12px; fill: currentColor; flex: none; }

/* ---------- chapters ---------- */
/* Tones: each chapter is its own world. A section carries its tone's colours for its own text; the
   body takes the tone of whichever chapter is mid-screen (site.js), which recolours the ground, the
   bar and the player behind it — so the whole page shifts as you cross from one to the next. */
[data-tone="night"] {                       /* Listen: warm dark, like the room the music is for */
  --page: #120b06; --ink: #f3e9da; --ink-2: rgba(243, 233, 218, 0.66); --ink-3: rgba(243, 233, 218, 0.42);
  --line: rgba(243, 233, 218, 0.12); --fill: rgba(243, 233, 218, 0.06); --accent: #ffb347;
  --glass: rgba(22, 13, 7, 0.72); --btn-ink: #140c06; color-scheme: dark;
}
[data-tone="space"] {                       /* Build: deep space blue */
  --page: #060a15; --ink: #e7edf7; --ink-2: rgba(231, 237, 247, 0.66); --ink-3: rgba(231, 237, 247, 0.42);
  --line: rgba(231, 237, 247, 0.12); --fill: rgba(231, 237, 247, 0.06); --accent: #7cc4ff;
  --glass: rgba(8, 12, 26, 0.72); --btn-ink: #060a15; color-scheme: dark;
}
body, #veil, .bar.solid, .player { transition: background-color 0.9s ease, color 0.9s ease, border-color 0.9s ease; }
body[data-tone] { background: var(--page); color: var(--ink); }

/* Full-bleed: each chapter paints its own world edge to edge, and fades in over the bottom of the
   one before it (its top 150px blend from clear), so text never sits on another chapter's colour. Content stays within 1080px. */
.chapter {
  --inset: max(var(--gutter), calc((100% - 1080px) / 2 + var(--gutter)));
  position: relative; padding: 112px var(--inset) 64px; scroll-margin-top: 20px;
  color: var(--ink);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--page) 0%, transparent), var(--page) 150px);
}
.ch-head { margin-bottom: 32px; }
.ch-num { margin: 0 0 6px; font: 500 12px/1 var(--sans); letter-spacing: 0.24em; color: var(--accent); }
.ch-head h2 { margin: 0; font: 400 clamp(44px, 9vw, 72px)/0.98 var(--serif); letter-spacing: -0.01em; }
.ch-line { margin: 12px 0 0; font: italic 400 clamp(17px, 2vw, 19px)/1.4 var(--serif); color: var(--ink-2); max-width: 36ch; }
.eyebrow { margin: 0 0 12px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }

/* things rise into place as they reach the screen */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { transform: none; transition: opacity 0.4s ease; } }

/* ---------- Listen: the featured track ---------- */
/* The featured box is the playing track's world: its two hues as drifting pools of light at its own
   pace, pumping on the kick (--pump, from site.js). The colours are registered so a new track's
   world fades in rather than snapping. */
@property --c0 { syntax: '<color>'; inherits: true; initial-value: #1a1008; }
@property --c1 { syntax: '<color>'; inherits: true; initial-value: #c9832e; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #6a3a8a; }
.feature {
  position: relative; overflow: hidden; border-radius: 20px; min-height: 236px;
  display: flex; align-items: flex-end;
  background: var(--c0); border: 1px solid var(--line);
  transition: --c0 1.4s ease, --c1 1.4s ease, --c2 1.4s ease;
}
.f-world { position: absolute; inset: 0; transform: scale(calc(1 + var(--pump, 0) * 0.05)); }
.f-world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 5, 3, 0.62), rgba(8, 5, 3, 0) 75%); }
.blob { position: absolute; width: 85%; aspect-ratio: 1; border-radius: 50%; opacity: 0.85; }
.blob.a { left: calc(var(--fx, 60%) - 37%); top: calc(var(--fy, 30%) - 60%);
  background: radial-gradient(circle, var(--c1), transparent 64%); animation: drift-a var(--spd, 11s) ease-in-out infinite alternate; }
.blob.b { right: calc(var(--fx, 60%) - 50%); bottom: -55%;
  background: radial-gradient(circle, var(--c2), transparent 64%); animation: drift-b calc(var(--spd, 11s) * 1.3) ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate(22%, 16%) scale(1.18); } }
@keyframes drift-b { to { transform: translate(-18%, -14%) scale(0.88); } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } .f-world { transform: none; } }
.spectrum { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.feature-body { position: relative; padding: 22px 22px 20px; width: 100%; }
.f-title { margin: 0 0 16px; font: 400 clamp(32px, 6vw, 52px)/1.02 var(--serif); overflow-wrap: anywhere; }
.f-row { display: flex; gap: 10px; }
.f-bar { margin-top: 18px; height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; }
.f-fill { height: 100%; width: 0; background: var(--accent); }
.feature.live .eyebrow { color: var(--c1); }
.feature .f-fill { background: var(--c1); }

/* ---------- Listen: the strip ---------- */
.strip-wrap { margin-top: 44px; }
.strip {
  list-style: none; margin: 0 calc(-1 * var(--inset)); padding: 4px var(--inset) 12px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 148px; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--inset);
}
.strip::-webkit-scrollbar { display: none; }
.chip { scroll-snap-align: start; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.cover {
  display: grid; place-items: end start; aspect-ratio: 1; border-radius: 14px; padding: 10px; margin-bottom: 10px;
  position: relative; overflow: hidden; background: var(--cover); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
  transition: transform 0.25s ease;
}
.chip:hover .cover { transform: translateY(-3px); }
.cover .ico { width: 30px; height: 30px; padding: 9px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; opacity: 0; transition: opacity 0.2s ease; }
.chip:hover .cover .ico, .chip.on .cover .ico { opacity: 1; }
.chip-title { display: block; font: 400 16px/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.on .chip-title { color: var(--accent); }

/* ---------- Listen: everything, folded away ---------- */
.all { margin-top: 36px; border-top: 1px solid var(--line); }
.all summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px; font: 400 19px/1.2 var(--serif); color: var(--ink);
}
.all summary::-webkit-details-marker { display: none; }
.chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform 0.3s ease; }
.all[open] .chev { transform: rotate(180deg); }
.all[open] .tracks { animation: unfold 0.5s ease; }
@keyframes unfold { from { opacity: 0; transform: translateY(-8px); } }

.tracks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; column-gap: 40px; }
@media (min-width: 720px) { .tracks { grid-template-columns: 1fr 1fr; } }
.tracks li { border-bottom: 1px solid var(--line); }
.track {
  width: 100%; display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 8px;
  min-height: 50px; padding: 6px 4px; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--ink); font: inherit; border-radius: 6px; transition: background-color 0.15s ease;
}
.track:hover { background: var(--fill); }
.t-num { font: 13px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.t-title { font: 400 17px/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-state { justify-self: end; width: 16px; height: 14px; display: flex; align-items: flex-end; gap: 2px; color: var(--ink-3); }
.t-state .ico { width: 11px; height: 11px; opacity: 0; transition: opacity 0.15s ease; }
.track:hover .t-state .ico { opacity: 1; }
.t-state i { display: none; width: 3px; background: currentColor; border-radius: 1px; height: 30%; }
.track.on .t-num, .track.on .t-title, .track.on .t-state { color: var(--accent); }
.track.on .t-state .ico { display: none; }
.track.on .t-state i { display: block; }
.track.on.playing .t-state i { animation: eq 0.9s ease-in-out infinite; }
.track.on.playing .t-state i:nth-child(3) { animation-delay: -0.3s; }
.track.on.playing .t-state i:nth-child(4) { animation-delay: -0.6s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) { .track.on.playing .t-state i { animation: none; height: 70%; } }

.promo { margin: 28px 0 8px; max-width: 420px; }
.promo label { display: block; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.promo-row { display: flex; gap: 8px; }
.promo input {
  flex: 1; min-width: 0; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--fill); color: var(--ink); font: 15px var(--sans); outline: none;
}
.promo input::placeholder { color: var(--ink-3); }
.promo-msg { margin: 8px 0 0; min-height: 20px; font-size: 13px; color: var(--ink-2); }
.promo-msg.ok { color: var(--accent); }

/* ---------- Build: the deck ---------- */
.deck {
  margin: 0 calc(-1 * var(--inset)); padding: 4px var(--inset) 14px;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 300px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: var(--inset);
}
.deck::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .deck { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 4px 0 14px; } }
.card {
  scroll-snap-align: start; position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  aspect-ratio: 4 / 5; padding: 0; border-radius: 18px; overflow: hidden; cursor: pointer; text-align: left;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); background: #0b1120; color: #fff; font: inherit;
  box-shadow: 0 20px 44px -26px color-mix(in srgb, var(--c) 70%, #000);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover { transform: translateY(-4px); }
.card[aria-selected="true"] { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 24px 56px -24px color-mix(in srgb, var(--c) 80%, #000); }
.card-art { position: absolute; inset: 0; }
.card-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.card:hover .card-art img { transform: scale(1.04); }
.card-art img.art-kick { object-position: 20% 30%; transform: scale(1.5); transform-origin: 20% 30%; }
.card:hover .card-art img.art-kick { transform: scale(1.56); }
.card-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(4, 6, 14, 0.92) 0%, rgba(4, 6, 14, 0.2) 55%, transparent 80%); }
.art-os { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 18%, transparent), transparent 60%), #05080f; }
.os-ring { position: absolute; left: 50%; top: 40%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #3a3f48, #07090d 62%); box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 60px -20px #000; }
.os-ring::after { content: ''; position: absolute; left: -3%; right: -3%; top: 52%; height: 3%; border-radius: 50%;
  background: var(--c); filter: blur(1px); box-shadow: 0 0 14px var(--c), 0 0 34px var(--c); }
.os-dot { display: none; }
.card-text { position: relative; padding: 18px; display: grid; gap: 4px; }
.c-kicker { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); }
.c-title { font: 400 23px/1.08 var(--serif); }

/* ---------- Build: the opened project ---------- */
.panels { margin-top: 28px; }
.piece { display: grid; gap: 22px; animation: unfold 0.5s ease; }
.piece[hidden] { display: none; }
@media (min-width: 900px) { .piece { grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; } }
.demo {
  position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: #03050b;
}
.demo img, .demo video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.demo video { object-fit: contain; background: #000; }
.demo-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px;
  color: var(--ink-3); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.demo-empty .ring { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); box-shadow: inset 0 -10px 24px rgba(76, 217, 100, 0.14); }
.demo-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; cursor: pointer;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 50%); }
.demo-play span { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(244, 239, 228, 0.94); color: #0b0c10; transition: transform 0.2s ease; }
.demo-play:hover span { transform: scale(1.06); }
.demo-play .ico { width: 18px; height: 18px; margin-left: 3px; }
.piece-text h3 { margin: 0 0 10px; font: 400 27px/1.12 var(--serif); }
.piece-text p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.up { margin-top: 20px; }

/* ---------- Say hello ---------- */
#contact { padding-bottom: 24px; }
.mail {
  display: inline-block; font: 400 clamp(28px, 6vw, 44px)/1.1 var(--serif); color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--line); transition: border-color 0.2s ease, color 0.2s ease; overflow-wrap: anywhere;
}
.mail:hover { color: var(--accent); border-bottom-color: var(--accent); }
.about { margin: 32px 0 0; max-width: 42ch; font: 400 18px/1.55 var(--serif); color: var(--ink-2); }
.foot { max-width: 1080px; margin: 0 auto; padding: 72px var(--gutter) calc(120px + env(safe-area-inset-bottom));
  font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; }

/* ---------- player ---------- */
.player {
  position: fixed; z-index: 30; left: 50%; transform: translate(-50%, 0);
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(calc(100% - 24px), 520px);
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px;
  padding: 8px 8px 12px; border-radius: 18px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--line); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.45);
  animation: rise 0.35s cubic-bezier(.2, .8, .2, 1);
}
.player[hidden] { display: none; }
@keyframes rise { from { transform: translate(-50%, 20px); opacity: 0; } }
.p-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: transparent; color: var(--ink);
}
.p-btn:hover { background: var(--fill); }
#pToggle { background: var(--ink); color: var(--btn-ink); }
.p-meta { min-width: 0; display: flex; flex-direction: column; padding-left: 6px; }
.p-title { font: 400 18px/1.2 var(--serif); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-by { font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); }
.p-bar { position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--line); overflow: hidden; }
.p-fill { height: 100%; width: 0; background: var(--accent); }