/* Now Playing section: one large Mac showing all three displays (menu bar, notch, desktop) at once.
   The Mac scene is drawn on a fixed 1260 x 818 canvas (460 x 700 on phones) and scaled to the device width (--np1-s, set by app.js).
   Motion tokens are taken from transitions-dev (_root.css) and restated here so the section stands alone. */

@property --np1-c { syntax: "<color>"; inherits: true; initial-value: #f2566e; }

.np1 {
  /* transitions-dev motion tokens */
  --np1-d-stagger: 40ms;
  --np1-d-quick: 150ms;
  --np1-d-fast: 250ms;
  --np1-d-medium: 350ms;
  --np1-d-slow: 400ms;
  --np1-d-vslow: 500ms;
  --np1-out: cubic-bezier(0.22, 1, 0.36, 1);
  --np1-io: ease-in-out;

  --np1-s: 0.8;
  --cw: 1260;
  --ch: 818;
  --np1-c: #f2566e;
  --pk-h: 56px;
  --tw: 172px;
  transition: --np1-c 1.2s var(--np1-io);

  /* Mac scene tokens, light */
  --mb-fg: rgba(0, 0, 0, 0.86);
  --mb-dim: rgba(0, 0, 0, 0.58);
  --mb-tint: rgba(255, 255, 255, 0.24);
  --np1-img-edge: rgba(0, 0, 0, 0.2);
  --np1-halo-o: 0.3;
  --np1-base-1: #e1e3e7;
  --np1-base-2: #b8bcc3;
  --np1-base-notch: #a5a9b0;
  --np1-dev-shadow: 0 50px 90px -34px rgba(20, 40, 32, 0.4), 0 18px 36px -18px rgba(20, 40, 32, 0.28);

  position: relative;
  padding: 80px 0;
  overflow-x: clip;
}
.np1[data-t="2"] { --np1-c: #d99a3e; --tw: 176px; --pk-h: 82px; }
.np1[data-t="3"] { --np1-c: #2f7bff; --tw: 140px; }

:root[data-theme="dark"] .np1 {
  --mb-fg: rgba(255, 255, 255, 0.94);
  --mb-dim: rgba(255, 255, 255, 0.64);
  --mb-tint: rgba(0, 0, 0, 0.42);
  --np1-img-edge: rgba(255, 255, 255, 0.14);
  --np1-halo-o: 0.4;
  --np1-base-1: #3b3e44;
  --np1-base-2: #202226;
  --np1-base-notch: #17181b;
  --np1-dev-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .np1 {
    --mb-fg: rgba(255, 255, 255, 0.94);
    --mb-dim: rgba(255, 255, 255, 0.64);
    --mb-tint: rgba(0, 0, 0, 0.42);
    --np1-img-edge: rgba(255, 255, 255, 0.14);
    --np1-halo-o: 0.4;
    --np1-base-1: #3b3e44;
    --np1-base-2: #202226;
    --np1-base-notch: #17181b;
    --np1-dev-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
  }
}

/* ---------- Heading block (same scale as the page's own section heads) ---------- */
.np1-head { text-align: center; max-width: 880px; margin: 0 auto clamp(28px, 4.5vh, 56px); }
.np1-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.np1-new {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 99px;
  color: var(--accent-ink);
  background: var(--sage-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent);
}
.np1-head h2 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
/* One line at every width: on phones the size follows the screen width. */
.np1-head h2 { white-space: nowrap; }
@media (max-width: 600px) { .np1-head h2 { font-size: min(30px, calc((100vw - 56px) / 12.6)); } }
.np1-head h2 em { font-style: normal; color: var(--accent-deep); }
.np1-head p { color: var(--ink2); font-size: 18px; margin: 16px auto 0; line-height: 1.55; max-width: 560px; text-wrap: balance; }

/* ---------- The Mac ---------- */
.np1-device { position: relative; max-width: 1024px; margin: 0 auto; }
/* On laptops the Mac is sized by the window height, so the whole section fits on one screen. */
@media (min-width: 601px) {
  .np1 { --np1-fit: calc(100svh - var(--np1-rest, 390px)); --np1-mac: min(1024px, max(480px, calc(var(--np1-fit) * 1.5))); }
  .np1-device { max-width: var(--np1-mac); }
  /* Captions stay close to the Mac's width, never so narrow that a caption needs a fourth line */
  .np1-caps { max-width: max(940px, var(--np1-mac)); gap: 32px; }
  .np1-cap p { font-size: 15.5px; }
  .np1-head h2 { font-size: clamp(30px, min(4.4vw, 6.2svh), 50px); }
}
.np1-halo {
  position: absolute;
  inset: 6% -3% -2%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--np1-c) 70%, transparent), transparent);
  filter: blur(34px);
  opacity: var(--np1-halo-o);
}
.np1-lid {
  position: relative;
  z-index: 1;
  padding: clamp(5px, 1.1%, 12px);
  border-radius: calc(var(--np1-s) * 26px);
  background: #0a0a0c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), var(--np1-dev-shadow);
}
.np1-screen {
  position: relative;
  width: 100%;
  aspect-ratio: var(--cw) / var(--ch);
  overflow: hidden;
  border-radius: calc(var(--np1-s) * 14px);
  background: #000;
  isolation: isolate;
}
.np1-canvas {
  position: absolute;
  left: 0; top: 0;
  width: calc(var(--cw) * 1px); height: calc(var(--ch) * 1px);
  transform-origin: 0 0;
  transform: scale(var(--np1-s));
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.np1-base {
  position: relative;
  z-index: 2;
  height: max(7px, calc(var(--np1-s) * 20px));
  width: calc(100% + 44px);
  margin: -1px -22px 0;
  border-radius: 0 0 18px 18px / 0 0 14px 14px;
  background: linear-gradient(var(--np1-base-1), var(--np1-base-2));
  box-shadow: 0 18px 30px -10px rgba(0, 0, 0, 0.3);
}
.np1-base::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: 17%; height: 52%;
  transform: translateX(-50%);
  border-radius: 0 0 10px 10px;
  background: var(--np1-base-notch);
}

/* ---------- Per-track switch: --on is 1 on the active track's elements, 0 on the rest ---------- */
.np1-k { --on: 0; }
.np1[data-t="1"] .np1-k[data-k="1"],
.np1[data-t="2"] .np1-k[data-k="2"],
.np1[data-t="3"] .np1-k[data-k="3"] { --on: 1; }

/* ---------- Desktop: the drifting artwork field ---------- */
.np1-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
  opacity: var(--on);
  /* Hidden tracks stop painting once their fade-out ends */
  visibility: hidden;
  transition: opacity 1.2s var(--np1-io), visibility 0s linear 1.2s;
  background: color-mix(in srgb, var(--c) calc(48% - 22% * var(--calm)), var(--soft));
}
.np1[data-t="1"] .np1-layer[data-k="1"],
.np1[data-t="2"] .np1-layer[data-k="2"],
.np1[data-t="3"] .np1-layer[data-k="3"] { visibility: visible; transition: opacity 1.2s var(--np1-io), visibility 0s; }
.np1-layer::before, .np1-layer::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.np1-layer::before {
  z-index: 3;
  background:
    radial-gradient(750px 650px at 96% 6%, color-mix(in srgb, var(--c) 70%, var(--deep)) 0%, transparent 70%),
    radial-gradient(630px 530px at 62% 108%, color-mix(in srgb, var(--c) 82%, var(--deep)) 0%, transparent 72%);
  opacity: calc(0.34 - 0.16 * var(--calm));
  mix-blend-mode: soft-light;
}
.np1-layer::after {
  z-index: 4;
  background:
    radial-gradient(830px 580px at 0% 100%, color-mix(in srgb, var(--soft) 70%, transparent), transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 55%);
}
.np1-blob {
  position: absolute;
  animation: np1-drift-a 44s var(--np1-io) infinite alternate;
  mix-blend-mode: overlay;
  opacity: calc(0.85 - 0.25 * var(--calm));
}
.np1-blob i {
  position: absolute; inset: 0; display: block;
  background: var(--art) center / cover no-repeat;
  filter: blur(38px) saturate(calc(1.34 - 0.5 * var(--calm))) brightness(calc(1.04 - 0.06 * var(--calm)));
}
.np1-blob.b1 { width: 817px; height: 817px; left: -200px; top: -216px; }
.np1-blob.b2 { width: 750px; height: 750px; right: -216px; bottom: -316px; animation-name: np1-drift-b; animation-duration: 56s; }
.np1-blob.b2 i { transform: rotate(180deg); }
.np1-blob.b3 { width: 583px; height: 583px; left: 250px; top: 133px; animation-name: np1-drift-c; animation-duration: 68s; opacity: calc(0.7 - 0.25 * var(--calm)); }
@keyframes np1-drift-a { to { transform: translate3d(125px, 75px, 0) scale(1.3) rotate(7deg); } }
@keyframes np1-drift-b { to { transform: translate3d(-140px, -50px, 0) scale(1.28) rotate(-8deg); } }
@keyframes np1-drift-c { to { transform: translate3d(-100px, 92px, 0) scale(1.25) rotate(10deg); } }
.np1-blob { transform: scale(1.05); }
.np1-blob.b2 { transform: scale(1.1); }
.np1-blob.b3 { transform: scale(0.95); }
/* Inactive layers do not paint or animate */
.np1[data-t="1"] .np1-layer:not([data-k="1"]) .np1-blob,
.np1[data-t="2"] .np1-layer:not([data-k="2"]) .np1-blob,
.np1[data-t="3"] .np1-layer:not([data-k="3"]) .np1-blob { animation-play-state: paused; }

:root[data-theme="dark"] .np1-layer { background: color-mix(in srgb, var(--deep) 55%, #050507); }
:root[data-theme="dark"] .np1-blob { mix-blend-mode: normal; opacity: 1; }
:root[data-theme="dark"] .np1-blob.b3 { opacity: 0.7; }
:root[data-theme="dark"] .np1-blob i { filter: blur(38px) saturate(calc(1.9 - 0.2 * var(--calm))) brightness(calc(0.62 - 0.12 * var(--calm))); }
:root[data-theme="dark"] .np1-layer::before { background: color-mix(in srgb, var(--c) 78%, var(--deep)); opacity: 0.4; mix-blend-mode: color; }
:root[data-theme="dark"] .np1-layer::after {
  background:
    radial-gradient(1080px 800px at 4% 106%, rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0) 74%),
    radial-gradient(750px 500px at 100% 0%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 70%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 40%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .np1-layer { background: color-mix(in srgb, var(--deep) 55%, #050507); }
  :root:not([data-theme="light"]) .np1-blob { mix-blend-mode: normal; opacity: 1; }
  :root:not([data-theme="light"]) .np1-blob.b3 { opacity: 0.7; }
  :root:not([data-theme="light"]) .np1-blob i { filter: blur(38px) saturate(calc(1.9 - 0.2 * var(--calm))) brightness(calc(0.62 - 0.12 * var(--calm))); }
  :root:not([data-theme="light"]) .np1-layer::before { background: color-mix(in srgb, var(--c) 78%, var(--deep)); opacity: 0.4; mix-blend-mode: color; }
  :root:not([data-theme="light"]) .np1-layer::after {
    background:
      radial-gradient(1080px 800px at 4% 106%, rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0) 74%),
      radial-gradient(750px 500px at 100% 0%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 70%),
      linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 40%);
  }
}

/* ---------- Poster type ---------- */
.np1-poster {
  position: absolute;
  left: 62px; bottom: 54px;
  width: 640px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  --ink: color-mix(in srgb, var(--deep) 76%, #000);
  --ink-dim: color-mix(in srgb, var(--deep) 80%, #000);
  --art-edge: rgba(0, 0, 0, 0.1);
  --art-glow: var(--deep);
}
:root[data-theme="dark"] .np1-poster {
  --ink: color-mix(in srgb, var(--soft) 82%, #fff);
  --ink-dim: color-mix(in srgb, var(--soft) 90%, transparent);
  --art-edge: rgba(255, 255, 255, 0.12);
  --art-glow: #000;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .np1-poster {
    --ink: color-mix(in srgb, var(--soft) 82%, #fff);
    --ink-dim: color-mix(in srgb, var(--soft) 90%, transparent);
    --art-edge: rgba(255, 255, 255, 0.12);
    --art-glow: #000;
  }
}

/* Entrance: texts reveal (blurred rise, 40ms stagger). Leaving is quicker (200ms) so two posters never overlap. */
.np1-u {
  --dur: calc(var(--on) * 500ms + (1 - var(--on)) * 200ms);
  opacity: var(--on);
  transform: translate3d(0, calc((1 - var(--on)) * 12px), 0);
  filter: blur(calc((1 - var(--on)) * 3px));
  transition:
    opacity var(--dur) var(--np1-io),
    transform var(--dur) var(--np1-out),
    filter var(--dur) var(--np1-io);
  transition-delay: calc(var(--on) * (260ms + var(--i, 0) * var(--np1-d-stagger)));
}
/* At rest the showing poster carries no filter at all: Safari draws a filtered element only inside
   its box, which can shave the tail off a descender. The blur still eases in and out between songs. */
.np1[data-t="1"] .np1-layer[data-k="1"] .np1-u,
.np1[data-t="2"] .np1-layer[data-k="2"] .np1-u,
.np1[data-t="3"] .np1-layer[data-k="3"] .np1-u { filter: none; }
.np1-art {
  display: block;
  width: 220px; height: 220px;
  object-fit: cover;
  border-radius: 12px;
  outline: 1px solid var(--art-edge);
  outline-offset: -1px;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--art-glow) 34%, transparent),
    0 5px 12px -4px color-mix(in srgb, var(--art-glow) 26%, transparent),
    0 22px 42px -12px color-mix(in srgb, var(--art-glow) 40%, transparent),
    0 46px 84px -28px color-mix(in srgb, var(--art-glow) 46%, transparent);
}
.np1-art.wide { width: 300px; height: 168px; }
.np1-src { margin: 36px 0 0; font-size: 17px; line-height: 1.2; font-weight: 650; color: var(--ink-dim); }
.np1-ttl {
  margin: 14px 0 0;
  /* Room below the last line for descenders: Safari trims a blurred element's ink to its box,
     which cut the tail off the "y" in Kyoto. The negative margin keeps the layout unchanged. */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
  font-size: var(--fs, 118px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif;
}
.np1-sub {
  margin: 22px 0 0;
  max-width: 520px;
  font-size: 26px;
  line-height: 1.16;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0.86;
  text-wrap: balance;
}
.np1-sub.np1-u { opacity: calc(var(--on) * 0.86); }
.np1-who { margin: 28px 0 0; display: flex; flex-direction: column; gap: 6px; }
.np1-artist { font-size: 24px; line-height: 1.15; font-weight: 650; letter-spacing: -0.014em; color: var(--ink); }
.np1-album { font-size: 18px; line-height: 1.2; font-weight: 500; color: var(--ink-dim); }
.np1-prog { margin-top: 26px; width: 360px; }
.np1-bar { position: relative; height: 4px; border-radius: 2px; overflow: hidden; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.np1-bar i { position: absolute; inset: 0; display: block; border-radius: 2px; background: var(--ink); transform: translate3d(calc((var(--p) - 1) * 100%), 0, 0); }
.np1-times { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; color: var(--ink-dim); }

/* ---------- Menu bar ---------- */
.np1-mb {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 31px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px 0 18px;
  color: var(--mb-fg);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  background: linear-gradient(var(--mb-tint), var(--mb-tint) 60%, transparent);
  text-shadow: 0 0 6px var(--mb-tint);
}
.np1-mb-l, .np1-mb-r { display: flex; align-items: center; height: 100%; }
.np1-mb-l { gap: 18px; }
.np1-mb-l b { font-weight: 700; }
.np1-apple { width: 13px; height: 16px; fill: currentColor; margin-right: 2px; }
.np1-mb-r { gap: 4px; }
.np1-mbitem { display: flex; align-items: center; gap: 7px; height: 23px; padding: 0 6px; margin-right: 6px; border-radius: 6px; }
.np1-chip {
  position: relative;
  flex: none;
  width: 17px; height: 17px;
  border-radius: 4px;
  overflow: hidden;
  transition: width var(--np1-d-medium) var(--np1-out);
}
.np1[data-t="2"] .np1-chip { width: 30px; }
.np1-chip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--on); transition: opacity var(--np1-d-medium) var(--np1-io); }
.np1-chip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0.5px var(--np1-img-edge); }
.np1-mbtext { position: relative; flex: none; height: 23px; width: var(--tw); overflow: hidden; transition: width var(--np1-d-medium) var(--np1-out); }
.np1-mbline {
  position: absolute; left: 0; top: 0;
  display: flex; align-items: center;
  height: 100%;
  white-space: nowrap;
  font-size: 12px;
  opacity: var(--on);
  transform: translate3d(0, calc((1 - var(--on)) * 4px), 0);
  filter: blur(calc((1 - var(--on)) * 2px));
  transition: opacity var(--np1-d-quick) var(--np1-io), transform var(--np1-d-quick) var(--np1-io), filter var(--np1-d-quick) var(--np1-io);
  transition-delay: calc(var(--on) * var(--np1-d-quick));
}
.np1-mbline .t { font-weight: 560; letter-spacing: -0.006em; }
.np1-mbline .a { margin-left: 6px; font-weight: 400; color: var(--mb-dim); }
.np1-mbline[data-k="2"] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(176px - 24px), transparent 176px);
          mask-image: linear-gradient(90deg, #000 calc(176px - 24px), transparent 176px);
}
.np1-mbic { display: inline-flex; align-items: center; justify-content: center; height: 23px; min-width: 22px; padding: 0 3px; }
.np1-mbic svg { width: 15px; height: 15px; fill: currentColor; }
.np1-clock { padding: 0 2px 0 6px; font-variant-numeric: tabular-nums; }
.np1-echo { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.np1-echo i { display: block; width: 2.2px; border-radius: 2px; background: currentColor; }
.np1-echo i:nth-child(1) { height: 7px; }
.np1-echo i:nth-child(2) { height: 12px; }
.np1-echo i:nth-child(3) { height: 9px; }

/* ---------- Notch island ---------- */
.np1-island {
  position: absolute;
  left: 50%; top: 0;
  width: 252px; height: 31px;
  transform: translateX(-50%);
  z-index: 9;
  background: #000;
  color: #fff;
  border-radius: 0 0 11px 11px;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  transition:
    width var(--np1-d-slow) var(--np1-out),
    height var(--np1-d-slow) var(--np1-out),
    border-radius var(--np1-d-slow) var(--np1-out),
    box-shadow var(--np1-d-slow) var(--np1-out);
}
.np1-island::before, .np1-island::after { content: ""; position: absolute; top: 0; width: 8px; height: 8px; pointer-events: none; }
.np1-island::before { left: -8px; background: radial-gradient(circle at 0 100%, transparent 7.5px, #000 8px); }
.np1-island::after { right: -8px; background: radial-gradient(circle at 100% 100%, transparent 7.5px, #000 8px); }
.np1[data-peek] .np1-island {
  width: 320px;
  height: calc(31px + var(--pk-h));
  border-radius: 0 0 22px 22px;
  box-shadow: 0 18px 38px -8px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.np1-island-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.np1-thumb { position: absolute; left: 12px; top: 4.5px; width: 22px; height: 22px; border-radius: 6px; overflow: hidden; background: #1c1c1e; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.1); }
.np1-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--on); transition: opacity var(--np1-d-medium) var(--np1-io); }
.np1-bars { position: absolute; right: 16px; top: 0; height: 31px; width: 16px; display: flex; align-items: center; justify-content: space-between; }
.np1-bars i {
  display: block; width: 3.5px; height: 14px; border-radius: 2px;
  background: var(--np1-c);
  transform-origin: 50% 50%;
  animation: np1-bar 1.1s var(--np1-io) infinite alternate;
}
.np1-bars i:nth-child(1) { animation-duration: 0.9s; animation-delay: -0.3s; }
.np1-bars i:nth-child(2) { animation-duration: 1.2s; animation-delay: -0.8s; }
.np1-bars i:nth-child(3) { animation-duration: 1s; animation-delay: -0.1s; }
@keyframes np1-bar { from { transform: scaleY(0.3); } to { transform: scaleY(0.95); } }

.np1-peek { position: absolute; left: 0; right: 0; top: 31px; display: grid; padding: 2px 20px 0; text-align: center; }
.np1-pk {
  grid-area: 1 / 1;
  --pv: 0;
  opacity: calc(var(--on) * var(--pv));
  transform: translate3d(0, calc((1 - var(--on) * var(--pv)) * -6px), 0);
  filter: blur(calc((1 - var(--on) * var(--pv)) * 4px));
  transition: opacity var(--np1-d-fast) var(--np1-io), transform var(--np1-d-fast) var(--np1-out), filter var(--np1-d-fast) var(--np1-io);
  transition-delay: calc(var(--on) * var(--pv) * 170ms);
}
.np1[data-peek] .np1-pk { --pv: 1; }
.np1-pk p { margin: 0; text-wrap: balance; overflow-wrap: break-word; }
.np1-pk .pt { font-size: 14.5px; line-height: 1.27; font-weight: 600; letter-spacing: -0.016em; }
.np1-pk .pa { margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: rgba(255, 255, 255, 0.64); }

/* ---------- Captions, in the same order as the subtitle ---------- */
.np1-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 1024px; margin: clamp(28px, 4.5vh, 64px) auto 0; text-align: center; }
.np1-cap h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink1); }
.np1-cap p { margin: 10px auto 0; max-width: 320px; font-size: 16px; line-height: 1.55; color: var(--ink2); text-wrap: balance; }

/* ---------- Menu bar player (the shipped glass panel), drops open once per loop ---------- */
.np1 {
  --pl-fg: rgba(0, 0, 0, 0.88);
  --pl-dim: rgba(0, 0, 0, 0.6);
  --pl-faint: rgba(0, 0, 0, 0.16);
  --pl-glass: rgba(250, 250, 252, 0.7);
  --pl-ring: rgba(0, 0, 0, 0.13);
  --pl-hilite: rgba(255, 255, 255, 0.7);
  --pl-edge-in: rgba(255, 255, 255, 0.38);
  --pl-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 22px rgba(0, 0, 0, 0.12), 0 28px 64px -14px rgba(0, 0, 0, 0.36);
  --pl-open: rgba(0, 0, 0, 0.16);
  --pl-wash: 26%;
  --pl-lift: 8%;
}
:root[data-theme="dark"] .np1 {
  --pl-fg: rgba(255, 255, 255, 0.95);
  --pl-dim: rgba(255, 255, 255, 0.68);
  --pl-faint: rgba(255, 255, 255, 0.2);
  --pl-glass: rgba(30, 30, 34, 0.7);
  --pl-ring: rgba(255, 255, 255, 0.15);
  --pl-hilite: rgba(255, 255, 255, 0.16);
  --pl-edge-in: rgba(255, 255, 255, 0.06);
  --pl-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.4), 0 28px 64px -14px rgba(0, 0, 0, 0.7);
  --pl-open: rgba(255, 255, 255, 0.22);
  --pl-wash: 58%;
  --pl-lift: 16%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .np1 {
    --pl-fg: rgba(255, 255, 255, 0.95);
    --pl-dim: rgba(255, 255, 255, 0.68);
    --pl-faint: rgba(255, 255, 255, 0.2);
    --pl-glass: rgba(30, 30, 34, 0.7);
    --pl-ring: rgba(255, 255, 255, 0.15);
    --pl-hilite: rgba(255, 255, 255, 0.16);
    --pl-edge-in: rgba(255, 255, 255, 0.06);
    --pl-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 22px rgba(0, 0, 0, 0.4), 0 28px 64px -14px rgba(0, 0, 0, 0.7);
    --pl-open: rgba(255, 255, 255, 0.22);
    --pl-wash: 58%;
    --pl-lift: 16%;
  }
}
.np1-mbitem { transition: background-color var(--np1-d-quick) var(--np1-io), opacity var(--np1-d-fast) var(--np1-io); }
.np1[data-player] .np1-mbitem { background: var(--pl-open); }
.np1-player {
  position: absolute;
  top: 35px; right: 182px; /* centred under the song in the menu bar */
  z-index: 10;
  width: 284px;
  padding: 11px 11px 8px;
  border-radius: 19px;
  overflow: hidden;
  color: var(--pl-fg);
  background: var(--pl-glass);
  -webkit-backdrop-filter: blur(48px) saturate(1.25);
          backdrop-filter: blur(48px) saturate(1.25);
  box-shadow: 0 0 0 0.5px var(--pl-ring), inset 0 0.5px 0 var(--pl-hilite), inset 0 0 0 0.5px var(--pl-edge-in), var(--pl-shadow);
  --pl-k: 1;
  transform-origin: 50% 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(calc(0.95 * var(--pl-k)));
  transition: opacity var(--np1-d-quick) var(--np1-io), transform var(--np1-d-quick) var(--np1-io), visibility 0s linear var(--np1-d-quick);
}
.np1[data-player] .np1-player {
  opacity: 1;
  visibility: visible;
  transform: scale(var(--pl-k));
  transition: opacity 200ms var(--np1-out), transform var(--np1-d-fast) var(--np1-out), visibility 0s;
}
.np1-pl-glow { position: absolute; left: -22%; top: -14%; width: 144%; height: 62%; pointer-events: none; }
.np1-pl-glow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.7); opacity: 0.34; }
.np1-pl-tint {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 52% at 50% 0%, color-mix(in srgb, var(--c) var(--pl-lift), transparent), transparent 80%),
    color-mix(in srgb, var(--c) var(--pl-wash), transparent);
}
:root[data-theme="dark"] .np1-pl-tint {
  background:
    radial-gradient(120% 52% at 50% 0%, color-mix(in srgb, var(--c) var(--pl-lift), transparent), transparent 80%),
    color-mix(in srgb, var(--deep) var(--pl-wash), transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .np1-pl-tint {
    background:
      radial-gradient(120% 52% at 50% 0%, color-mix(in srgb, var(--c) var(--pl-lift), transparent), transparent 80%),
      color-mix(in srgb, var(--deep) var(--pl-wash), transparent);
  }
}
.np1-player > :not(.np1-pl-glow):not(.np1-pl-tint) { position: relative; }
.np1-pl-art { width: 262px; height: 262px; border-radius: 9px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.12), 0 14px 30px -10px color-mix(in srgb, var(--c) 60%, transparent); }
.np1-pl-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.np1-pl-meta { margin: 12px 3px 0; }
.np1-pl-meta p { margin: 0; }
.np1-pl-app { font-size: 10.5px; font-weight: 600; line-height: 13px; color: var(--pl-dim); }
.np1-pl-title { margin-top: 2px !important; font-size: 16px; font-weight: 650; line-height: 1.22; letter-spacing: -0.02em; }
.np1-pl-artist { margin-top: 2px !important; font-size: 13px; line-height: 1.3; color: var(--pl-dim); }
.np1-pl-prog { margin: 12px 3px 0; }
.np1-pl-rail { position: relative; height: 4.5px; border-radius: 99px; overflow: hidden; background: var(--pl-faint); }
.np1-pl-rail i { position: absolute; inset: 0; display: block; border-radius: inherit; background: color-mix(in srgb, var(--c) 82%, var(--deep)); transform-origin: 0 50%; transform: scaleX(0.33); }
.np1[data-player] .np1-pl-rail i { animation: np1-pl-play 4s linear both; }
@keyframes np1-pl-play { to { transform: scaleX(0.35); } }
.np1-pl-times { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10.5px; line-height: 13px; font-weight: 500; color: var(--pl-dim); font-variant-numeric: tabular-nums; }
.np1-pl-ctrls { display: flex; align-items: center; justify-content: center; gap: 34px; margin: 8px 0 2px; }
.np1-pl-ctrls svg { display: block; fill: currentColor; }
.np1-pl-ctrls .r, .np1-pl-skip path { stroke: currentColor; stroke-linejoin: round; }
.np1-pl-skip { width: 28px; height: 28px; }
.np1-pl-play { width: 34px; height: 34px; }

/* ---------- Phones: a portrait screen drawn at a larger scale so the menu bar, notch and player read ---------- */
@media (max-width: 600px) {
  .np1 { --cw: 460; --ch: 700; --tw: 84px; }
  .np1[data-t] { --tw: 84px; }
  .np1-device { max-width: 420px; }
  .np1-halo { inset: 4% -6% -2%; }
  .np1-lid { padding: 0; border-radius: 22px; background: transparent; box-shadow: var(--np1-dev-shadow); }
  .np1-screen { border-radius: 22px; }
  .np1-base { display: none; }
  .np1-mb-l b, .np1-mb-l span, .np1-mbic, .np1-clock, .np1-mbline .a { display: none; }
  .np1-mb { padding: 0 8px 0 16px; }
  .np1-mbitem { gap: 6px; padding: 0 4px; margin-right: 0; }
  .np1[data-t="2"] .np1-chip { width: 17px; }
  .np1-mbline { -webkit-mask-image: linear-gradient(90deg, #000 64px, transparent 84px); mask-image: linear-gradient(90deg, #000 64px, transparent 84px); }
  .np1-mbline[data-k="2"] { -webkit-mask-image: linear-gradient(90deg, #000 64px, transparent 84px); mask-image: linear-gradient(90deg, #000 64px, transparent 84px); }
  .np1-island { width: 196px; }
  .np1-poster { left: 30px; bottom: 34px; width: 400px; }
  .np1-art { width: 150px; height: 150px; border-radius: 10px; }
  .np1-art.wide { width: 214px; height: 120px; }
  .np1-src { margin-top: 24px; font-size: 15px; }
  .np1-ttl { margin-top: 10px; font-size: calc(var(--fs, 118px) * 0.6); }
  .np1-sub { margin-top: 14px; font-size: 19px; max-width: 380px; }
  .np1-who { margin-top: 20px; }
  .np1-artist { font-size: 20px; }
  .np1-album { font-size: 15.5px; }
  .np1-prog { margin-top: 20px; width: 280px; }
  .np1-player { right: 8px; top: 34px; --pl-k: 0.86; transform-origin: 100% 0; }
  /* The dropped island covers the song on a narrow screen, so the song steps aside while it is down */
  .np1[data-peek] .np1-mbitem { opacity: 0; }
}

/* The caption for whatever is moving on the screen is lit; the other two step back. */
.np1-cap { transition: opacity var(--np1-d-medium) var(--np1-io); }
.np1[data-live] .np1-cap { opacity: 0.4; }
.np1[data-live="menubar"] .np1-cap[data-cap="menubar"],
.np1[data-live="notch"] .np1-cap[data-cap="notch"],
.np1[data-live="desktop"] .np1-cap[data-cap="desktop"] { opacity: 1; }

@media (max-width: 1120px) {
  .np1-caps { gap: 28px; }
  .np1-cap p { font-size: 15.5px; }
}
@media (max-width: 1000px) {
  .np1-caps { grid-template-columns: 1fr; gap: 30px; }
  .np1-cap p { font-size: 16px; }
}
@media (max-width: 760px) {
  .np1 { padding: 64px 0; }
  .np1-head p { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .np1 *, .np1 *::before, .np1 *::after { animation: none !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
  .np1-bars i { transform: scaleY(0.7); }
}