/* Vocals website, on the same design system as the app (docs/DESIGN.md):
   warm stone neutrals, one orange accent, Instrument Sans, pills and hairlines.
   Pages read like the studio's arrangement view: a bar ruler marks the top of each page,
   and media sits in clip-like frames. Track colours appear only on the music itself. */
:root {
  /* Dark-first: the app itself is dark. */
  --bg: #191410;
  --bg-2: #1e1a17;
  --surface: #24211e;
  --surface-2: #2c2824;
  --line: rgba(250, 249, 249, 0.1);
  --line-2: rgba(250, 249, 249, 0.17);
  --wave: #4a433e;
  --fg: #fafaf9;
  --muted: #d6d3d1;
  --faint: #a8a29e;
  --accent: #ff4b14;
  --accent-strong: #ff6738;
  --on-accent: #1c1917;
  --accent-text: #ff8561;
  --accent-glow: 0 0 0 1px rgba(255, 75, 20, 0.35), 0 10px 32px -8px rgba(255, 75, 20, 0.6);
  --inverse: #fafaf9;
  --on-inverse: #1c1917;
  /* A dark disc over a picture, the same in both themes. */
  --scrim: rgba(12, 10, 8, 0.6);
  --on-scrim: #fafaf9;
  --ok: #5fd17a;
  --no: #f87171;
  --part: #f2b84b;
  /* Track palette, as in the app (muted, one lightness). */
  --c-orange: #d99a7e;
  --c-pink: #db959c;
  --c-violet: #b39fd9;
  --c-indigo: #91aae1;
  --c-sky: #6eb6d5;
  --c-teal: #66bcb5;
  --c-green: #86ba8d;
  --c-amber: #c6a66b;
  /* Coproducer's page (site/src/pages/coproducer.mjs): neon on ink, the same in both themes. */
  --kp-orange: #ff4b14;
  --kp-pink: #ff2e93;
  --kp-amber: #ffb03a;
  --kp-ink: #0d0605;
  --kp-core: #ffe4cc;
  /* A piano keyboard's keys, the same in both themes. */
  --key-white: #fafaf9;
  --key-black: #1c1917;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dots: rgba(250, 249, 249, 0.16);
  --shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  --font-display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --wrap: 1180px;
  --radius: 20px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #fafaf9;
    --bg-2: #f5f5f4;
    --surface: #ffffff;
    --surface-2: #f5f5f4;
    --line: #e7e5e4;
    --line-2: #d6d3d1;
    --wave: #d6d3d1;
    --fg: #1c1917;
    --muted: #44403c;
    --faint: #6b6560;
    --accent-text: #c2410c;
    --accent-glow: 0 10px 28px -10px rgba(255, 75, 20, 0.55);
    --inverse: #1c1917;
    --on-inverse: #fafaf9;
    --ok: #15803d;
    --no: #b91c1c;
    --part: #a16207;
    --c-orange: #a8644a;
    --c-pink: #a85f68;
    --c-violet: #7a68a6;
    --c-indigo: #5b74a8;
    --c-sky: #387d9b;
    --c-teal: #2f837c;
    --c-green: #4f8458;
    --c-amber: #8c6d32;
    --noise: none;
    --dots: rgba(28, 25, 23, 0.14);
    --shadow: 0 30px 70px -24px rgba(28, 25, 23, 0.22);
    color-scheme: light;
  }
}
:root[data-theme='light'] {
  --bg: #fafaf9;
  --bg-2: #f5f5f4;
  --surface: #ffffff;
  --surface-2: #f5f5f4;
  --line: #e7e5e4;
  --line-2: #d6d3d1;
  --wave: #d6d3d1;
  --fg: #1c1917;
  --muted: #44403c;
  --faint: #6b6560;
  --accent-text: #c2410c;
  --accent-glow: 0 10px 28px -10px rgba(255, 75, 20, 0.55);
  --inverse: #1c1917;
  --on-inverse: #fafaf9;
  --ok: #15803d;
  --no: #b91c1c;
  --part: #a16207;
  --c-orange: #a8644a;
  --c-pink: #a85f68;
  --c-violet: #7a68a6;
  --c-indigo: #5b74a8;
  --c-sky: #387d9b;
  --c-teal: #2f837c;
  --c-green: #4f8458;
  --c-amber: #8c6d32;
  --noise: none;
  --dots: rgba(28, 25, 23, 0.14);
  --shadow: 0 30px 70px -24px rgba(28, 25, 23, 0.22);
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 84px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  z-index: 60;
  background: var(--bg);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 8px 14px;
  border-radius: 8px;
}
.skip:focus {
  left: 16px;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

/* Read by screen readers, not shown. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Type */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
  margin: 0;
}
h1 {
  font-size: clamp(2.75rem, 7vw, 5.5rem);
}
h2 {
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.03em;
}
h3 {
  font-size: 1.3rem;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
p {
  margin: 0;
}
.lede {
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 62ch;
}
.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.grad-text {
  color: var(--accent-text);
}
code,
kbd,
.mono {
  font-family: var(--font-mono);
  font-size: 0.86em;
}
:not(pre) > code {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.08em 0.4em;
  overflow-wrap: anywhere;
}

/* ---------- Header */
.site-header {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.logo-mark {
  flex: none;
}
.main-nav {
  display: flex;
  gap: 4px;
  margin-left: 12px;
}
.main-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 500;
  font-size: 14.5px;
  padding: 7px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.main-nav a:hover,
.main-nav a[aria-current='page'] {
  color: var(--fg);
  background: var(--surface-2);
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-link {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  color: var(--muted);
}
.icon-link:hover {
  color: var(--fg);
  background: var(--surface-2);
}
.mobile-nav {
  display: none;
  position: relative;
}
.mobile-nav summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
}
.mobile-nav summary::-webkit-details-marker {
  display: none;
}
.mobile-nav nav {
  position: absolute;
  right: 0;
  top: 48px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 8px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.mobile-nav nav a {
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 550;
}
.mobile-nav nav a:hover {
  background: var(--surface-2);
}
/* Six sections and the longest languages' labels need the room: below it, the menu. */
@media (max-width: 1220px) {
  .main-nav {
    display: none;
  }
  .mobile-nav {
    display: block;
  }
}
@media (max-width: 480px) {
  .header-row {
    gap: 12px;
  }
  .header-actions {
    gap: 6px;
  }
  .header-actions .btn span {
    display: none;
  }
  /* The main call to action keeps its words (an icon alone says nothing), so it drops its icon. */
  .header-actions .btn-secondary span {
    display: inline;
  }
  .header-actions .btn-secondary {
    padding: 0 13px;
    font-size: 14px;
  }
  .header-actions .btn-secondary .i {
    display: none;
  }
}
@media (max-width: 380px) {
  .header-actions .btn-secondary {
    padding: 0 10px;
    font-size: 13.5px;
  }
}

/* ---------- Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font: 600 16px/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.12s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.btn:active {
  transform: translateY(1px);
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--accent-glow);
}
.btn-primary:hover {
  background: var(--accent-strong);
}
.btn-ghost {
  border-color: var(--line-2);
  color: var(--fg);
  background: transparent;
}
.btn-ghost:hover {
  background: var(--surface-2);
}
.btn-sm {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14.5px;
}
.btn-lg {
  min-height: 56px;
  padding: 0 28px;
  font-size: 17px;
}
.btn-secondary {
  background: var(--inverse);
  color: var(--on-inverse);
}
.btn-secondary:hover {
  opacity: 0.88;
}
.btn .sub {
  font-weight: 450;
  font-size: 13px;
  opacity: 0.8;
}
.text-link {
  color: var(--accent-text);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Ruler (the bar numbers of the arrangement view) */
.ruler {
  display: flex;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
  height: 22px;
  overflow: hidden;
  user-select: none;
}
.ruler span {
  flex: 1 0 auto;
  min-width: 64px;
  padding: 4px 0 0 6px;
  border-left: 1px solid var(--line);
  background-image: linear-gradient(var(--line), var(--line));
  background-size: 1px 6px;
  background-repeat: repeat-x;
  background-position: 0 100%;
}

/* ---------- Sections */
.section {
  padding-block: clamp(64px, 9vw, 112px);
}
.section + .section {
  border-top: 1px solid var(--line);
}
.section-head {
  display: grid;
  gap: 14px;
  margin-bottom: 40px;
  max-width: 760px;
}
.section-head .lede {
  margin-top: 4px;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 5px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.c-orange {
  --tc: var(--c-orange);
}
.c-pink {
  --tc: var(--c-pink);
}
.c-violet {
  --tc: var(--c-violet);
}
.c-indigo {
  --tc: var(--c-indigo);
}
.c-sky {
  --tc: var(--c-sky);
}
.c-teal {
  --tc: var(--c-teal);
}
.c-green {
  --tc: var(--c-green);
}
.c-amber {
  --tc: var(--c-amber);
}

/* ---------- Hero */
.hero {
  padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 72px);
  position: relative;
}
.hero-glow {
  position: absolute;
  inset: -64px 0 auto auto;
  width: min(620px, 70vw);
  height: 520px;
  pointer-events: none;
  background-image: radial-gradient(var(--dots) 1.1px, transparent 1.4px);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 65%);
  mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 65%);
  z-index: -1;
}
.hero-glow::after {
  content: '';
  position: absolute;
  inset: 120px 20% -40px -40%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 75, 20, 0.12), transparent 70%);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.hero h1 {
  max-width: 14ch;
}
.hero .lede {
  margin-top: 22px;
}
.hero h1.hero-title {
  max-width: none;
}
/* Titles with a word that turns over keep that line whole, so on small screens their size follows
   the width: --chars is the longest unbroken line, in characters (at most ~0.55em each at this
   weight and tracking, in every language). */
h1.fit-title {
  font-size: min(clamp(2.75rem, 7vw, 5.5rem), calc((100vw - 32px) / (var(--chars, 17) * 0.55)));
}
.hero-line {
  display: block;
  white-space: nowrap;
}
.title-line {
  display: block;
}
.title-line.nowrap {
  white-space: nowrap;
}
/* The verb turns over in place; its slot eases to each word's width so “a song.” glides. */
.verbs {
  display: inline-grid;
  justify-items: start;
  color: var(--accent-text);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.verb {
  grid-area: 1 / 1;
  transition:
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease;
}
.verbs:not(.live) .verb:not(.is-on) {
  display: none;
}
.verbs.live .verb:not(.is-on) {
  opacity: 0;
  transform: translateY(0.32em);
  filter: blur(8px);
}
.verbs.live .verb.is-out {
  transform: translateY(-0.32em);
}

/* ---------- The home page's hero, after the launch pages people know: everything centred over a warm,
   grainy sky that runs up under the header, a prompt box to start from, and two covers leaning in
   from the sides (site/src/pages/index.mjs). */
:root {
  /* The sky: the accent with Coproducer's pink and amber, and a grain over it. */
  --sky-1: rgba(255, 75, 20, 0.5);
  --sky-2: rgba(255, 46, 147, 0.34);
  --sky-3: rgba(255, 176, 58, 0.36);
  --sky-grain: 0.22;
  --prompt-bg: rgba(25, 20, 16, 0.55);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --sky-1: rgba(255, 75, 20, 0.26);
    --sky-2: rgba(255, 46, 147, 0.16);
    --sky-3: rgba(255, 176, 58, 0.28);
    --sky-grain: 0.1;
    --prompt-bg: rgba(255, 255, 255, 0.72);
  }
}
:root[data-theme='light'] {
  --sky-1: rgba(255, 75, 20, 0.26);
  --sky-2: rgba(255, 46, 147, 0.16);
  --sky-3: rgba(255, 176, 58, 0.28);
  --sky-grain: 0.1;
  --prompt-bg: rgba(255, 255, 255, 0.72);
}
.home-hero {
  padding-top: clamp(56px, 9vw, 128px);
  isolation: isolate;
}
/* Under the header too: on the home page the header is clear until the page scrolls (js/site.js). */
.site-header:has(+ .page-home):not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.page-home {
  margin-top: -65px;
}
.page-home .home-hero {
  padding-top: calc(65px + clamp(56px, 9vw, 128px));
}
.hero-sky {
  position: absolute;
  inset: 0 0 auto;
  height: min(1080px, 100%);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.hero-sky::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(38% 42% at 68% 26%, var(--sky-2), transparent 70%),
    radial-gradient(46% 48% at 36% 34%, var(--sky-1), transparent 72%),
    radial-gradient(34% 40% at 12% 18%, var(--sky-3), transparent 70%),
    radial-gradient(30% 36% at 92% 52%, var(--sky-3), transparent 70%);
  filter: blur(24px);
  animation: sky-drift 22s ease-in-out infinite alternate;
}
.hero-sky::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--sky-grain);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@keyframes sky-drift {
  to {
    transform: translate3d(3%, 4%, 0) scale(1.06) rotate(2deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-sky::before {
    animation: none;
  }
}
.hero-top {
  position: relative;
}
.hero-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-center .rating {
  justify-content: center;
}
/* The title types prompts (js/site.js, which keeps it at the height of its tallest text so nothing
   below moves), narrow enough to stay clear of the covers. */
h1.typed-title {
  max-width: 11em;
  font-size: clamp(2.5rem, 6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: wrap;
  align-content: center;
}
.typed-text .hero-line {
  white-space: normal;
}
/* No width of its own, so it never wraps onto a line by itself. */
.typed-caret {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0.82em;
  vertical-align: -0.04em;
  opacity: 0;
}
.typed-caret::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0.06em;
  width: 0.06em;
  border-radius: 2px;
  background: var(--accent);
}
.typed-title .hero-line:last-child {
  display: inline;
}
.live .typed-caret {
  opacity: 1;
  animation: caret 1.05s steps(1) infinite;
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
.home-hero .lede {
  max-width: 40ch;
  margin-top: 26px;
  color: var(--fg);
  opacity: 0.86;
}
.hero-center .meta-row {
  justify-content: center;
  margin-top: 20px;
}

/* The prompt box: type an idea (or roll one), Create opens the app with it. */
.prompt-box {
  width: min(100%, 780px);
  margin-top: 40px;
  padding: 18px 16px 14px 22px;
  border-radius: 26px;
  border: 1px solid var(--line-2);
  background: var(--prompt-bg);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: var(--shadow);
  text-align: left;
  transition: border-color 0.15s ease;
}
.prompt-box:focus-within {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-2));
}
.prompt-box textarea {
  display: block;
  width: 100%;
  min-height: 3.2em;
  padding: 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--fg);
  font: 400 18px/1.5 var(--font-body);
}
.prompt-box textarea::placeholder {
  color: var(--faint);
  opacity: 1;
}
.prompt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.prompt-chip,
.prompt-dice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 999px;
  border: 0;
  background: var(--line);
  color: var(--fg);
  font: 500 15px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.prompt-chip {
  padding: 0 18px 0 16px;
  white-space: nowrap;
}
.prompt-dice {
  width: 44px;
  margin-left: auto;
}
.prompt-chip:hover,
.prompt-dice:hover {
  background: var(--line-2);
}
.prompt-dice .i {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.prompt-dice.rolled .i {
  transform: rotate(180deg);
}
.prompt-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px 0 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--kp-pink), var(--accent) 70%);
  color: var(--on-accent);
  font: 600 17px/1 var(--font-body);
  cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(255, 46, 147, 0.7);
  transition:
    transform 0.12s ease,
    filter 0.15s ease;
}
.prompt-go:hover {
  filter: brightness(1.08);
}
.prompt-go:active {
  transform: translateY(1px);
}
@media (max-width: 560px) {
  .prompt-box {
    padding: 14px 12px 12px 16px;
  }
  .prompt-chip span {
    display: none;
  }
  .prompt-chip {
    width: 44px;
    padding: 0;
  }
}

/* Two covers leaning in from the sides, a little out of focus until they're pointed at. */
.hero-card {
  position: absolute;
  top: 18%;
  z-index: 1;
  display: none;
  width: clamp(200px, 17vw, 260px);
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: #fafaf9;
  text-align: left;
  cursor: pointer;
  filter: blur(1.5px) saturate(0.9);
  opacity: 0.88;
  transition:
    filter 0.35s ease,
    opacity 0.35s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (min-width: 1180px) {
  .hero-card {
    display: block;
  }
}
.hero-card-left {
  left: calc(50% - 50vw - 3vw);
  transform: perspective(1000px) rotateY(16deg) rotateZ(-7deg);
}
.hero-card-right {
  right: calc(50% - 50vw - 3vw);
  top: 26%;
  transform: perspective(1000px) rotateY(-16deg) rotateZ(6deg);
}
.hero-card:hover,
.hero-card:focus-visible,
.hero-card[aria-pressed='true'] {
  filter: none;
  opacity: 1;
}
.hero-card-left:hover,
.hero-card-left[aria-pressed='true'] {
  transform: perspective(1000px) rotateY(8deg) rotateZ(-4deg) translateX(1vw);
}
.hero-card-right:hover,
.hero-card-right[aria-pressed='true'] {
  transform: perspective(1000px) rotateY(-8deg) rotateZ(3deg) translateX(-1vw);
}
.hero-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(12, 10, 8, 0.78));
}
.hero-card-play {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 42%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  border-radius: 50%;
  background: var(--scrim);
  color: var(--on-scrim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-card .i-pause,
.hero-card[aria-pressed='true'] .i-play {
  display: none;
}
.hero-card[aria-pressed='true'] .i-pause {
  display: block;
}
.hero-card-text {
  position: absolute;
  z-index: 1;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: grid;
  gap: 2px;
}
.hero-card-text b {
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.hero-card-text small {
  font-size: 13.5px;
  opacity: 0.8;
}
/* Under the centred hero the stream runs as a band of its own. */
.home-hero .song-stream {
  margin-top: clamp(16px, 4vw, 56px);
}

/* Words flow into Vocals and come out as a piano roll (songStream in site/src/motion.mjs). */
.song-stream {
  height: clamp(240px, 25vw, 520px);
  margin-block: 8px 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  user-select: none;
  pointer-events: none;
}
@media (min-width: 960px) {
  /* Scales with the width, like the stage, so the copy above always clears the loop and pill. */
  .song-stream {
    height: 25vw;
    margin-top: calc(24px - 8.9vw);
  }
  .home-hero .song-stream {
    margin-top: 24px;
  }
}
.song-stream svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ss-words {
  font: 400 17px var(--font-body);
  fill: var(--faint);
  white-space: pre;
}
.ss-key {
  fill: var(--fg);
  font-weight: 600;
}
.song-stream use,
.page-ribbon use {
  fill: none;
}
.ss-edge {
  stroke: var(--line);
  stroke-width: 76;
}
.ss-band {
  stroke: var(--surface);
  stroke-width: 74;
}
.ss-grid {
  stroke: var(--line);
  stroke-width: 70;
}
.ss-bar-line {
  stroke: var(--wave);
}
.ss-notes {
  stroke-width: 4.5;
}
.ss-pill rect:first-child {
  fill: var(--surface);
  stroke: var(--line);
  stroke-width: 1.5;
}
.ss-pill {
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}
.ss-bar {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(var(--h));
  animation: ss-level 1.1s ease-in-out calc(var(--i) * -137ms) infinite alternate;
}
.ss-bar:nth-child(3n) {
  animation-duration: 0.8s;
}
.ss-bar:nth-child(4n + 1) {
  animation-duration: 1.4s;
}
@keyframes ss-level {
  0% {
    transform: scaleY(0.18);
  }
  45% {
    transform: scaleY(0.95);
  }
  70% {
    transform: scaleY(0.4);
  }
  100% {
    transform: scaleY(0.7);
  }
}
.ss-halo {
  animation: ss-breathe 3.2s ease-in-out infinite alternate;
}
@keyframes ss-breathe {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 1;
  }
}
.ss-chip-in {
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}
.ss-chip.swap .ss-chip-in {
  opacity: 0;
  transform: translateY(8px);
}
.ss-chip rect {
  fill: var(--surface);
  stroke: var(--line);
}
.ss-dot {
  fill: var(--accent);
}
.ss-chip text {
  font: 500 14px var(--font-body);
  white-space: pre;
}
.ss-chip-label {
  fill: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ss-chip-value {
  fill: var(--fg);
}

/* The same piano roll, playing under the ruler at the top of each page (pageRibbon). */
.page-ribbon {
  height: clamp(96px, 9.72vw, 180px);
  margin-top: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  pointer-events: none;
}
.page-ribbon svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* One bar (128 units) every 2 s: the song stream's speed. */
.ss-flow {
  animation: ss-flow 2s linear infinite;
}
@keyframes ss-flow {
  from {
    stroke-dashoffset: calc(var(--b, 0) * 1px);
  }
  to {
    stroke-dashoffset: calc(var(--b, 0) * 1px - 128px);
  }
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
  align-items: center;
}
.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  color: var(--faint);
  font-size: 14px;
}
.meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.meta-row .i {
  color: var(--accent-text);
}
.page-hero {
  padding-block: clamp(48px, 7vw, 88px) clamp(32px, 5vw, 56px);
  position: relative;
}
.page-hero .lede {
  margin-top: 18px;
}

/* ---------- Clip frames around screenshots */
.clip {
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.clip-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.clip img {
  width: 100%;
  background: #191410;
}
figure {
  margin: 0;
}
figcaption {
  font-size: 14px;
  color: var(--faint);
  padding: 10px 14px 12px;
}

/* ---------- Grids and cards */
.grid {
  display: grid;
  gap: 20px;
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.card {
  background: var(--noise), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}
.card p {
  color: var(--muted);
  font-size: 15.5px;
}
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.feature-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  color: var(--muted);
  font-size: 15.5px;
}
.feature-list li .i {
  margin-top: 3px;
  color: var(--accent-text);
}
.feature-list b {
  color: var(--fg);
  font-weight: 650;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.split.reverse {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.split.reverse > :first-child {
  order: 2;
}
@media (max-width: 900px) {
  .split,
  .split.reverse {
    grid-template-columns: minmax(0, 1fr);
  }
  .split.reverse > :first-child {
    order: 0;
  }
}
.stack {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}
.stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  margin-top: 8px;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 2.6rem;
  line-height: 1;
}
.stat span {
  font-size: 14px;
  color: var(--faint);
}

/* ---------- Track player cards */
.tracks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.track {
  background: var(--noise), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  position: relative;
}
.track::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--tc, var(--accent));
}
.track-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}
.play-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  display: grid;
  place-items: center;
  background: var(--inverse);
  color: var(--on-inverse);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.play-btn:hover {
  transform: scale(1.05);
}
.play-btn .i-pause {
  display: none;
}
.track.playing .play-btn {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--accent-glow);
}
.track.playing .play-btn .i-play {
  display: none;
}
.track.playing .play-btn .i-pause {
  display: block;
}
.track-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-size: 1.15rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.track-meta {
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
}
.track-meta .genre {
  color: var(--muted);
  font-weight: 600;
}
.wave {
  width: 100%;
  height: 52px;
  display: block;
  cursor: pointer;
  touch-action: none;
}
.wave-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  min-width: 82px;
  text-align: right;
}
.track details {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.track summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.track summary::-webkit-details-marker {
  display: none;
}
.track summary::before {
  content: '+';
  font-family: var(--font-mono);
  color: var(--faint);
  width: 12px;
}
.track details[open] summary::before {
  content: '−';
}
.how {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  font-size: 14px;
  color: var(--muted);
}
.how .prompt {
  font-style: italic;
  color: var(--fg);
}
.how ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
}
.how .words {
  display: grid;
  gap: 10px;
  color: var(--fg);
}
.how .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  white-space: nowrap;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.filter {
  font: 600 14px/1 var(--font-body);
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.filter[aria-pressed='true'] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.filter .n {
  font-size: 12px;
  opacity: 0.7;
  margin-left: 4px;
}

/* ---------- Chat transcript */
.chat {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 15px;
}
.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  line-height: 1.45;
}
.msg.user {
  justify-self: end;
  background: var(--surface-2);
  border-radius: 18px 18px 4px 18px;
}
.msg.ai {
  justify-self: start;
  color: var(--muted);
}
.msg.done {
  justify-self: start;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
}
.msg.done .i {
  color: var(--ok);
}
.msg.via {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0;
}

/* ---------- Code */
pre {
  margin: 0;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--fg);
}
.code-block {
  position: relative;
  min-width: 0;
}
.code-block:has(.copy-btn) pre {
  padding-top: 44px;
}
.copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--muted);
  font: 600 12px var(--font-body);
  cursor: pointer;
}
.copy-btn:hover {
  color: var(--fg);
}
.tok-k {
  color: var(--accent-text);
}
.tok-s {
  color: var(--c-green);
}
.tok-n {
  color: var(--c-amber);
}
.tok-c {
  color: var(--faint);
}

/* ---------- Tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
tr:last-child > * {
  border-bottom: 0;
}
thead th {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--surface-2);
  white-space: nowrap;
}
tbody th {
  font-weight: 650;
  color: var(--fg);
  min-width: 170px;
}
td {
  color: var(--muted);
  min-width: 170px;
}
td.us,
th.us {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.mark {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}
.mark .i {
  flex: none;
  margin-top: 2px;
}
.mark.yes .i {
  color: var(--ok);
}
.mark.no .i {
  color: var(--no);
}
.mark.part .i {
  color: var(--part);
}
.matrix td {
  min-width: 150px;
}
.matrix td,
.matrix th {
  font-size: 14px;
}

/* ---------- Steps, callouts */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 14px;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.steps li::before {
  content: counter(step);
  font-weight: 700;
  font-size: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
}
.steps p {
  color: var(--muted);
  font-size: 15.5px;
}
.callout {
  border-radius: var(--radius);
  border: 1px solid var(--line-2);
  background: var(--noise), var(--surface);
  padding: 18px 20px;
  display: grid;
  gap: 8px;
}
.callout p {
  color: var(--muted);
  font-size: 15.5px;
}

/* ---------- FAQ */
.faq {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
  max-width: 860px;
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 1.05rem;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 16px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-family: var(--font-mono);
  color: var(--faint);
}
.faq details[open] summary::after {
  content: '−';
}
.faq details p {
  margin-top: 10px;
  color: var(--muted);
  max-width: 70ch;
}

/* ---------- Download */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.dl-card {
  background: var(--noise), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: grid;
  gap: 14px;
  align-content: start;
}
.dl-card h3 {
  font-size: 1.4rem;
}
.dl-card .btn {
  width: 100%;
}
.dl-alt {
  font-size: 14px;
  color: var(--faint);
}

/* ---------- Instruments */
.inst-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 16px;
}
.inst-group {
  background: var(--noise), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.inst-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.inst-group li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 15px;
}
.inst-group li span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--faint);
  text-align: right;
  padding-top: 3px;
}

/* ---------- Tool table on the MCP page */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.tool-group {
  background: var(--noise), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
  min-width: 0;
}
.tool-group p {
  color: var(--muted);
  font-size: 14.5px;
}
.tool-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tool-names code {
  font-size: 11.5px;
}

/* ---------- Compare overview cards */
.vs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
}
.vs-card {
  text-decoration: none;
  background: var(--noise), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: border-color 0.15s ease;
}
.vs-card:hover {
  border-color: var(--faint);
}
.vs-card p {
  color: var(--muted);
  font-size: 15.5px;
}
.verdict {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
}
.verdict .card h3 {
  font-size: 1.1rem;
}
.sources {
  font-size: 13.5px;
  color: var(--faint);
}
.sources ol {
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.sources a {
  overflow-wrap: anywhere;
}

/* ---------- Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-2);
  padding-block: 56px 32px;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.footer-grid > div {
  display: grid;
  gap: 8px;
  align-content: start;
}
.footer-grid a:not(.brand) {
  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
}
.footer-grid a:not(.brand):hover {
  color: var(--fg);
}
.footer-brand p {
  color: var(--faint);
  font-size: 14.5px;
  max-width: 36ch;
  margin-top: 6px;
}
.footer-h {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}
.footer-fine {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.footer-fine p {
  font-size: 13px;
  color: var(--faint);
  max-width: 90ch;
}
@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* ---------- Misc */
.center {
  text-align: center;
}
.mt-8 {
  margin-top: 8px;
}
.mt-16 {
  margin-top: 16px;
}
.mt-24 {
  margin-top: 24px;
}
.mt-40 {
  margin-top: 40px;
}
.muted {
  color: var(--muted);
}
.faint {
  color: var(--faint);
}
.small {
  font-size: 14px;
}
.prose {
  display: grid;
  gap: 14px;
  max-width: 70ch;
}
.prose p,
.prose li {
  color: var(--muted);
}
.prose h3 {
  margin-top: 10px;
}
.prose ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
}
.band {
  background: var(--bg-2);
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Royalty-free library pages: the landing page's wide search, its shortcuts and top picks; the
   browse page's filters; the song rows of both. */
.lib-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 820px;
  margin: 32px auto 0;
  padding: 6px 6px 6px 20px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--faint);
  box-shadow: var(--shadow);
}
.lib-bar:focus-within {
  border-color: var(--accent);
}
.lib-bar-input {
  flex: 1;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg);
  font: 500 17px/1.2 var(--font-body);
}
.lib-bar-input::-webkit-search-cancel-button {
  cursor: pointer;
}
.lib-bar .btn {
  flex: none;
}
.lib-bar.small-bar {
  max-width: none;
  margin: 0;
  padding: 0 16px;
  border-radius: 12px;
  box-shadow: none;
}
.lib-bar.small-bar .lib-bar-input {
  padding: 11px 0;
  font-size: 15px;
}
.lib-shortcuts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 820px;
  margin: 16px auto 0;
}
.lib-shortcut {
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.lib-shortcut:hover,
.lib-shortcut:focus-visible {
  color: var(--fg);
  background: var(--line-2);
}
.lib-hero-small {
  padding-block: clamp(28px, 4vw, 44px) 0;
}
.page-hero.lib-hero-small h1 {
  font-size: clamp(34px, 5vw, 56px);
}
.lib-hero-small .lede {
  margin-top: 10px;
}
.lib-hero-small a.tag {
  text-decoration: none;
}
.lib-narrow {
  max-width: 1040px;
}
.lib-picks {
  padding-top: 24px;
}
.lib-picks-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
}
.lib-picks-head h2 {
  font-size: clamp(22px, 2.6vw, 28px);
}
.lib-see-all {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}
.lib-wall-band {
  padding-block: 0 clamp(40px, 6vw, 72px);
}
.lib-wall-band .lib-wall {
  margin-top: 0;
}
.lib-toolbar {
  display: grid;
  gap: 12px;
}
.lib-dds {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.lib-dd {
  position: relative;
}
.lib-dd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 14px/1 var(--font-body);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.lib-dd-btn b {
  font-weight: 600;
  color: var(--accent-text);
}
.lib-dd-btn b:empty {
  display: none;
}
.lib-dd.set .lib-dd-btn {
  border-color: var(--accent);
}
.lib-dd.set .lib-dd-btn > span::after {
  content: ':';
}
.lib-dd-btn .i {
  color: var(--faint);
  transition: transform 0.15s;
}
.lib-dd-btn[aria-expanded='true'] .i {
  transform: rotate(180deg);
}
.lib-dd-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  display: grid;
  gap: 2px;
  min-width: 220px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.lib-dd-menu[hidden] {
  display: none;
}
.lib-dd-menu.wide {
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  width: max-content;
}
.lib-opt {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 500 14px/1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
}
.lib-opt span {
  font-size: 12px;
}
.lib-opt:hover,
.lib-opt:focus-visible {
  background: var(--surface-2);
  color: var(--fg);
}
.lib-opt[aria-pressed='true'] {
  background: var(--surface-2);
  color: var(--accent-text);
  font-weight: 600;
}
.lib-clear {
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 600 14px/1 var(--font-body);
  text-decoration: underline;
  cursor: pointer;
}
.lib-count {
  margin: 16px 0 0;
}
.lib-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.lib-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.2fr) minmax(100px, 1.4fr) 44px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.lib-row.playing {
  border-color: var(--accent);
}
.lib-play {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 0;
  background: var(--inverse);
  cursor: pointer;
  position: relative;
}
.lib-play::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 10px;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent var(--on-inverse);
}
.lib-row.playing .lib-play::before {
  left: 11px;
  top: 11px;
  width: 12px;
  height: 12px;
  border: 0;
  background: var(--on-inverse);
}
/* The song's cover, with its play button on it. */
.lib-cover {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--surface-2) center / cover no-repeat;
  display: grid;
  place-items: center;
}
.lib-cover .lib-play {
  width: 28px;
  height: 28px;
  background: var(--scrim);
}
.lib-cover .lib-play::before {
  left: 10px;
  top: 8px;
  border-width: 6px 0 6px 9px;
  border-color: transparent transparent transparent var(--on-scrim);
}
.lib-row.playing .lib-cover .lib-play::before {
  left: 9px;
  top: 9px;
  width: 10px;
  height: 10px;
  border: 0;
  background: var(--on-scrim);
}
.lib-row.no-audio .lib-play {
  opacity: 0.35;
  cursor: default;
}
.lib-row.no-audio .lib-title::after {
  content: 'Coming soon';
  font-size: 12px;
  color: var(--faint);
}
.lib-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lib-title > * {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lib-tags {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.lib-tags > * {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lib-tags b {
  font-weight: 600;
}
.lib-meta {
  color: var(--muted);
}
.lib-wave {
  width: 100%;
  height: 32px;
  display: block;
  cursor: pointer;
}
.lib-dl {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--muted);
}
.lib-dl:hover,
.lib-dl:focus-visible {
  color: var(--fg);
  background: var(--surface-2);
}
.lib-empty {
  padding: 24px 0;
}
@media (max-width: 760px) {
  .lib-row {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 0.8fr) 34px;
  }
  .lib-row .lib-meta,
  .lib-row .lib-wave {
    display: none;
  }
  .lib-bar {
    padding-left: 14px;
  }
  .lib-bar > .i {
    display: none;
  }
  .lib-dd {
    position: static;
  }
  .lib-dd-menu,
  .lib-dd-menu.wide {
    right: 0;
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The full showcase, as a popup on the home page. */
.showcase-dialog {
  width: min(1120px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: var(--bg);
  color: var(--fg);
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.showcase-dialog[open] {
  display: flex;
  flex-direction: column;
}
.showcase-dialog::backdrop {
  background: rgba(12, 10, 9, 0.66);
  backdrop-filter: blur(4px);
}
.showcase-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--line);
}
.showcase-head h2 {
  margin-bottom: 0;
}
.showcase-body {
  overflow-y: auto;
  padding: 20px 28px 32px;
  overscroll-behavior: contain;
}
.icon-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  flex: none;
}
.icon-close:hover {
  background: var(--surface-2);
}
html.dialog-open {
  overflow: hidden;
}
@media (max-width: 640px) {
  .showcase-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .showcase-head,
  .showcase-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* FAQ: native disclosure, answer text stays in the page for search and answer engines. */
.faq {
  max-width: 820px;
}
.faq h2 {
  margin-bottom: 20px;
}
.faq-item {
  border-top: 1px solid var(--line);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  font-size: 22px;
  color: var(--faint);
  flex: none;
}
.faq-item[open] summary::after {
  content: '−';
}
.faq-item summary h3 {
  margin: 0;
  font-size: 18px;
}
.faq-item p {
  margin: 0 0 18px;
  color: var(--muted);
  max-width: 70ch;
}
@media (max-width: 760px) {
  .header-web {
    display: none;
  }
}

/* Pricing cards */
.price-card {
  gap: 10px;
}
.price-big {
  margin: 0;
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.price-big small {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}
.price-card .feature-list {
  margin: 4px 0 8px;
}
/* Log in: a hairline pill beside the white one. */
.header-login {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}
.header-login:hover {
  background: var(--surface-2);
}
@media (max-width: 720px) {
  .header-login {
    display: none;
  }
}

/* Contact form */
.contact-form {
  display: grid;
  gap: 14px;
  max-width: 560px;
}
.contact-form label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  font: inherit;
  font-weight: 400;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: inherit;
}
.contact-form .hp {
  position: absolute;
  left: -9999px;
}
.contact-status {
  margin: 0;
  font-weight: 600;
}

/* ---------- Animated demos (js/demos.js): real screens, a camera, a cursor */
.demo-stage {
  position: relative;
  overflow: hidden;
  background: #191410;
}
.demo-cam {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.demo-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.demo-frame.on {
  opacity: 1;
}
.demo-frame.typing {
  z-index: 1;
}
.demo-ring {
  position: absolute;
  z-index: 2;
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px color-mix(in srgb, var(--accent) 28%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.demo-ring.on {
  opacity: 1;
}
.demo-cursor {
  position: absolute;
  z-index: 3;
  left: 92%;
  top: 95%;
  width: 26px;
  height: 26px;
  margin: -3px 0 0 -4px;
  opacity: 0;
  transition: left 0.75s cubic-bezier(0.45, 0, 0.25, 1), top 0.75s cubic-bezier(0.45, 0, 0.25, 1), opacity 0.3s ease, transform 0.15s ease;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
  pointer-events: none;
}
.demo-cursor.on {
  opacity: 1;
}
.demo-cursor.down {
  transform: scale(0.86);
}
.demo-ripple {
  position: absolute;
  left: 4px;
  top: 3px;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: demo-ripple 0.6s ease-out forwards;
}
@keyframes demo-ripple {
  from {
    transform: scale(0.2);
    opacity: 1;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}
.demo-caption {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 14px;
  max-width: calc(100% - 28px);
  transform: translate(-50%, 8px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(18, 15, 12, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #faf9f9;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.demo-caption.on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.demo-caption::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}
/* The step the demo is showing, lit up in the list next to it. */
.demo-steps li {
  transition: opacity 0.3s ease;
}
.motion .demo-section .demo-steps li:not(.on) {
  opacity: 0.55;
}
.demo-steps li.on::before {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
/* Under the hero: the three steps in a row, lit up as the demo below plays them. */
.hero-demo {
  display: grid;
  gap: 24px;
}
.hero-demo .steps {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 32px);
}
.hero-demo .steps h3 {
  font-size: 17px;
}
@media (max-width: 720px) {
  .hero-demo .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}
.producer-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .producer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.chips.asks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips.asks .chip {
  font-size: 13px;
  padding: 5px 12px;
  white-space: normal;
}
.dl-grid.one {
  max-width: 420px;
}
.dl-grid.two {
  max-width: 860px;
  margin-inline: auto;
}
@media (max-width: 640px) {
  .demo-caption {
    font-size: 12px;
    bottom: 8px;
  }
  .demo-cursor {
    width: 18px;
    height: 18px;
  }
  .demo-cursor svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------- The MCP session, typed out */
.term {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #120f0c;
  box-shadow: var(--shadow);
  overflow: hidden;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  color: #e7e5e4;
}
.term-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: #1e1a17;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.term-head span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #423a35;
}
.term-head b {
  margin-left: 8px;
  font: 600 12px var(--font-body);
  color: #a8a29e;
}
.term-body {
  display: grid;
  gap: 6px;
  align-content: start;
  height: 300px;
  padding: 14px 16px;
  overflow: hidden;
}
.term-line {
  white-space: pre-wrap;
  line-height: 1.45;
}
.term-line.prompt {
  color: #faf9f9;
  font-weight: 600;
}
.term-line.note {
  color: #a8a29e;
  font-style: italic;
}
.term-line.tool {
  color: #66bcb5;
}
.term-line.tool::before {
  content: '✓ ';
}
.term-line.tool.busy::before {
  content: '◌ ';
  color: #a8a29e;
}
.term-line.ai {
  color: #e7e5e4;
  margin-top: 6px;
}

/* ---------- The hero reel (site/src/reel.mjs, js/reel.js): the app's screens rebuilt as a short
   motion-design piece. Each element names its scenes in data-in; js/reel.js gives it .on while
   its scene plays and .past once it has gone. Without .live (no JavaScript, reduced motion) the
   stage holds one still frame: the finished song. */
.reel {
  --tc: var(--c-pink);
}
.reel-stage {
  /* The app's own colours, whatever the page's theme. */
  --c-orange: #d99a7e;
  --c-pink: #db959c;
  --c-violet: #b39fd9;
  --c-sky: #6eb6d5;
  --c-teal: #66bcb5;
  --ink: #faf9f9;
  --ink-2: rgba(250, 249, 249, 0.6);
  --edge: rgba(255, 255, 255, 0.09);
  --hot: #ff4b14;
  --spring: cubic-bezier(0.34, 1.5, 0.5, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  background: #120f0c;
  color: var(--ink);
  font-family: var(--font-display);
  perspective: 1400px;
  user-select: none;
}
@media (max-width: 640px) {
  .reel-stage {
    aspect-ratio: 4 / 3;
  }
}
.reel-stage.reset,
.reel-stage.reset * {
  transition: none !important;
  animation: none !important;
}
.reel-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1.4px);
  background-size: 2.2cqw 2.2cqw;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent);
  mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent);
}
/* The light moves with the story. */
.r-glow {
  position: absolute;
  width: 70cqw;
  height: 70cqw;
  left: 15cqw;
  top: -10cqh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 75, 20, 0.26), transparent);
  transition: transform 1.6s var(--ease);
  transform: translate(0, 0);
}
[data-scene='describe'] .r-glow,
[data-scene='create'] .r-glow {
  transform: translate(-6cqw, 8cqh);
}
[data-scene='build'] .r-glow {
  transform: translate(18cqw, -12cqh);
}
[data-scene='hear'] .r-glow {
  transform: translate(0, 20cqh);
}
[data-scene='edit'] .r-glow {
  transform: translate(26cqw, 6cqh);
}

/* The step it is on, top left. */
.r-kicker {
  position: absolute;
  z-index: 3;
  left: 4cqw;
  top: 5.5cqh;
  display: flex;
  align-items: center;
  gap: 0.8cqw;
  padding: 0.5cqw 1.3cqw 0.5cqw 0.5cqw;
  border-radius: 99px;
  border: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.05);
  font-size: 1.35cqw;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-2cqh);
  transition: opacity 0.35s ease, transform 0.6s var(--ease);
}
.r-kicker b {
  display: grid;
  place-items: center;
  width: 2cqw;
  height: 2cqw;
  border-radius: 50%;
  background: var(--hot);
  color: #1c1917;
}
.r-kicker.on,
.reel:not(.live) .r-kicker[data-in~='hear'] {
  opacity: 1;
  transform: none;
}
.r-kicker.past {
  transform: translateY(-2cqh);
}

/* Words that slide up out of a mask, one after another, and leave the same way. */
.r-head {
  position: absolute;
  z-index: 3;
  left: 4cqw;
  right: 4cqw;
  top: 12.5cqh;
  margin: 0;
  font-size: 4.4cqw;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.r-center {
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  font-size: 6.4cqw;
}
.r-end {
  font-size: 7.4cqw;
}
.rk {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.rk > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.75s var(--ease) calc(var(--i) * 70ms);
}
.rk .accent {
  color: #ff8561;
}
.rk-keep {
  white-space: nowrap;
}
/* Sound bars under the opening and closing words. */
.r-bars {
  position: absolute;
  left: 50%;
  top: 70cqh;
  display: flex;
  align-items: center;
  gap: 0.55cqw;
  height: 9cqh;
  transform: translateX(-50%);
}
.r-bars i {
  width: 0.55cqw;
  height: 100%;
  border-radius: 99px;
  background: var(--hot);
  transform: scaleY(0);
  transition: transform 0.5s var(--spring) calc(0.3s + var(--i) * 25ms);
}
.r-bars.on i {
  transform: scaleY(var(--h));
  animation: r-bar calc(0.5s + var(--h) * 0.4s) ease-in-out calc(0.9s + var(--i) * -0.07s) infinite alternate;
}
.r-bars.past i {
  transform: scaleY(0);
  transition-delay: 0s;
}
@keyframes r-bar {
  from {
    transform: scaleY(var(--h));
  }
  to {
    transform: scaleY(calc(var(--h) * 0.3));
  }
}
.on .rk > span,
.reel:not(.live) [data-in~='hear'] .rk > span {
  transform: none;
}
.past .rk > span {
  transform: translateY(-115%);
  transition-duration: 0.45s;
  transition-delay: calc(var(--i) * 25ms);
}

/* 1 · Describe it: the prompt box springs up, the sentence types itself, what Vocals hears flies out. */
.r-describe {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.r-card {
  position: absolute;
  left: 15cqw;
  width: 70cqw;
  top: 33cqh;
  padding: 2.4cqw 2.6cqw 1.8cqw;
  border-radius: 2cqw;
  background: linear-gradient(#25201c, #1b1714);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4cqw 8cqw -2cqw rgba(0, 0, 0, 0.75);
  opacity: 0;
  transform: translateY(14cqh) rotateX(30deg) scale(0.86);
  transform-origin: 50% 100%;
  transition: transform 0.9s var(--spring), opacity 0.4s ease, filter 0.5s ease;
}
.r-describe.on .r-card {
  opacity: 1;
  transform: none;
}
/* Through the button, into the song. */
.r-describe.past .r-card {
  opacity: 0;
  transform: scale(2.4);
  filter: blur(6px);
  transition:
    transform 0.55s ease-in,
    opacity 0.28s ease-in,
    filter 0.28s ease-in;
}
.r-prompt {
  margin: 0;
  min-height: 2.7em;
  font-family: var(--font-body);
  font-size: 2.7cqw;
  line-height: 1.32;
}
.r-caret {
  display: inline-block;
  width: 0.1em;
  height: 1.05em;
  margin-left: 0.06em;
  vertical-align: -0.16em;
  background: var(--hot);
  animation: r-blink 1s steps(1) infinite;
}
@keyframes r-blink {
  50% {
    opacity: 0;
  }
}
.r-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2cqw;
}
.r-mode {
  padding: 0.5cqw 1.3cqw;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.4cqw;
  font-weight: 600;
}
.r-go {
  display: inline-flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 1cqw 1.9cqw;
  border-radius: 99px;
  background: var(--hot);
  color: #1c1917;
  font-size: 1.6cqw;
  font-weight: 700;
  transition: transform 0.18s ease, box-shadow 0.3s ease;
}
.r-go svg {
  width: 1.5cqw;
  height: 1.5cqw;
}
[data-scene='create'] .r-go {
  transform: scale(0.93);
  box-shadow: 0 0 0 0.7cqw rgba(255, 75, 20, 0.3);
}
.r-chip {
  position: absolute;
  display: inline-flex;
  flex-direction: column;
  gap: 0.25cqw;
  padding: 0.9cqw 1.5cqw;
  border-radius: 1.2cqw;
  background: var(--ink);
  color: #1c1917;
  font-size: 2cqw;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 1.6cqw 3cqw -1cqw rgba(0, 0, 0, 0.7);
  opacity: 0;
  transform: translate(var(--dx), var(--dy)) scale(0.3);
  transition: transform 0.75s var(--spring), opacity 0.25s ease;
}
.r-chip small {
  font-size: 0.95cqw;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}
.r-chip-0 {
  left: 9cqw;
  top: 17cqh;
  --r: -8deg;
  --dx: 14cqw;
  --dy: 22cqh;
  background: var(--hot);
}
.r-chip-1 {
  right: 9cqw;
  top: 15cqh;
  --r: 7deg;
  --dx: -14cqw;
  --dy: 24cqh;
}
.r-chip-2 {
  right: 13cqw;
  top: 76cqh;
  --r: -5deg;
  --dx: -10cqw;
  --dy: -14cqh;
  background: var(--c-violet);
}
.r-describe.on .r-chip.on {
  opacity: 1;
  transform: rotate(var(--r));
}
.r-describe.past .r-chip {
  opacity: 0;
  transform: translateY(-8cqh) rotate(var(--r)) scale(0.7);
  transition-duration: 0.45s;
}

/* 2 · Hear it: the song assembles on a tilted board, settles flat and plays. */
.r-board {
  position: absolute;
  z-index: 2;
  left: 6cqw;
  right: 6cqw;
  top: 27cqh;
  bottom: 6cqh;
  display: flex;
  flex-direction: column;
  gap: 0.9cqh;
  padding: 1.4cqw;
  border-radius: 1.6cqw;
  background: #191512;
  border: 1px solid var(--edge);
  box-shadow: 0 5cqw 10cqw -3cqw rgba(0, 0, 0, 0.8);
  transform-origin: 50% 0;
  opacity: 0;
  transform: translateY(34cqh) rotateX(40deg) rotateZ(-6deg) scale(0.8);
  transition: transform 1.3s var(--ease), opacity 0.5s ease, filter 0.6s ease;
}
.r-board.on {
  opacity: 1;
  transform: translateY(-1cqh) rotateX(20deg) rotateZ(-3deg) scale(0.94);
}
[data-scene='hear'] .r-board.on,
.reel:not(.live) .r-board {
  opacity: 1;
  transform: none;
}
[data-scene='edit'] .r-board.on {
  transform: translateX(-15cqw) scale(0.74);
}
.r-board.past {
  opacity: 0;
  transform: translateY(-6cqh) scale(1.12);
  filter: blur(8px);
  transition-duration: 0.7s;
}
.r-ruler,
.r-lane {
  display: grid;
  grid-template-columns: 13cqw minmax(0, 1fr);
  gap: 1cqw;
}
.r-ruler {
  flex: 0 0 3.4cqh;
}
.r-lane {
  flex: 1;
  min-height: 0;
}
.r-sections {
  position: relative;
}
.r-sections span {
  position: absolute;
  top: 0;
  bottom: 0;
  padding-left: 0.4cqw;
  border-left: 1px solid var(--edge);
  font-size: 1cqw;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
}
.r-lane .r-name {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0 0.9cqw;
  border-radius: 0.8cqw;
  background: #221d19;
  border-left: 0.35cqw solid var(--c);
  font-size: 1.35cqw;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-3cqw);
  transition: opacity 0.4s ease, transform 0.6s var(--ease);
  transition-delay: calc(0.35s + var(--i) * 0.12s);
}
.r-meter {
  position: relative;
  overflow: hidden;
  margin-left: auto;
  flex: 0 0 0.45cqw;
  height: 55%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
}
.r-meter::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c);
  transform-origin: bottom;
  transform: scaleY(0.12);
}
.r-clips {
  position: relative;
}
.r-clip {
  position: absolute;
  top: 7%;
  bottom: 7%;
  overflow: hidden;
  border-radius: 0.55cqw;
  background: color-mix(in srgb, var(--c) 24%, #191512);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease), background 0.4s ease;
  transition-delay: calc(0.55s + var(--i) * 0.14s + var(--j) * 0.06s);
}
.r-clip b {
  position: absolute;
  left: 0.45cqw;
  top: 0.15cqw;
  font-size: 0.85cqw;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}
.r-clip i {
  position: absolute;
  height: 8%;
  min-height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--c) 80%, #fff);
}
.r-board.on .r-name,
.reel:not(.live) .r-name {
  opacity: 1;
  transform: none;
}
.r-board.on .r-clip,
.reel:not(.live) .r-clip {
  transform: none;
}
.r-playhead {
  position: absolute;
  top: 1.4cqw;
  bottom: 1.4cqw;
  left: 15.4cqw;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 1cqw rgba(255, 255, 255, 0.8);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.reel:not(.live) .r-playhead {
  opacity: 1;
  left: 46%;
}
[data-scene='hear'] .r-playhead,
[data-scene='edit'] .r-playhead {
  opacity: 1;
  animation: r-sweep 6s linear infinite;
}
@keyframes r-sweep {
  from {
    left: 15.4cqw;
  }
  to {
    left: calc(100% - 1.4cqw);
  }
}
[data-scene='hear'] .r-meter::after,
[data-scene='edit'] .r-meter::after {
  animation: r-level calc(0.34s + var(--i) * 0.06s) ease-in-out infinite alternate;
}
@keyframes r-level {
  from {
    transform: scaleY(0.25);
  }
  to {
    transform: scaleY(0.95);
  }
}

/* 3 · Make it yours: ask the Producer, and the drums answer. */
.r-chat {
  position: absolute;
  z-index: 3;
  right: 4cqw;
  top: 27cqh;
  width: 29cqw;
  display: flex;
  flex-direction: column;
  gap: 1.1cqw;
  padding: 1.4cqw;
  border-radius: 1.6cqw;
  background: #1f1a17;
  border: 1px solid var(--edge);
  box-shadow: 0 4cqw 8cqw -2cqw rgba(0, 0, 0, 0.8);
  opacity: 0;
  transform: translateX(14cqw) rotateY(-20deg);
  transition: transform 0.85s var(--spring), opacity 0.35s ease;
}
.r-chat.on {
  opacity: 1;
  transform: none;
}
.r-chat.past {
  opacity: 0;
  transform: translateX(10cqw);
}
.r-chat-head {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  font-size: 1.3cqw;
  font-weight: 600;
  color: var(--ink-2);
}
.r-chat-head svg {
  width: 1.4cqw;
  height: 1.4cqw;
  color: #ff8561;
}
.r-msg {
  max-width: 94%;
  padding: 0.9cqw 1.2cqw;
  border-radius: 1.2cqw;
  font-family: var(--font-body);
  font-size: 1.45cqw;
  line-height: 1.3;
}
.r-me {
  align-self: flex-end;
  min-width: 6cqw;
  min-height: calc(1.3em + 1.8cqw);
  background: var(--hot);
  color: #1c1917;
  font-weight: 600;
}
.r-ai {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--edge);
  opacity: 0;
  transform: translateY(1.5cqw) scale(0.9);
  transition: transform 0.5s var(--spring), opacity 0.3s ease;
}
.r-ai::before {
  content: '✓ ';
  color: #5fd17a;
  font-weight: 700;
}
.punch .r-ai {
  opacity: 1;
  transform: none;
}
.punch .r-drums .r-clip {
  background: color-mix(in srgb, var(--c) 48%, #191512);
  animation: r-punch 0.45s ease-out 4;
}
@keyframes r-punch {
  from {
    transform: scaleY(1.16);
    filter: brightness(1.9);
  }
  to {
    transform: none;
    filter: none;
  }
}

/* The cursor that types and clicks. */
.r-cursor {
  position: absolute;
  z-index: 6;
  left: 96%;
  top: 104%;
  width: 2.2cqw;
  height: 2.2cqw;
  margin: -0.3cqw 0 0 -0.4cqw;
  opacity: 0;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  transition:
    left 0.8s cubic-bezier(0.45, 0, 0.25, 1),
    top 0.8s cubic-bezier(0.45, 0, 0.25, 1),
    opacity 0.3s ease,
    transform 0.15s ease;
}
.r-cursor svg {
  width: 100%;
  height: 100%;
}
.r-cursor.on {
  opacity: 1;
}
.r-cursor.down {
  transform: scale(0.84);
}
.r-ripple {
  position: absolute;
  left: 0.4cqw;
  top: 0.3cqw;
  width: 5cqw;
  height: 5cqw;
  margin: -2.5cqw 0 0 -2.5cqw;
  border-radius: 50%;
  border: 2px solid #ff8561;
  animation: r-ripple 0.6s ease-out forwards;
}
@keyframes r-ripple {
  from {
    transform: scale(0.2);
    opacity: 1;
  }
  to {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Small screens: the stage is taller, so everything that reads gets bigger. */
@container (max-width: 520px) {
  .r-kicker {
    font-size: 2.6cqw;
    gap: 1.4cqw;
    padding: 0.8cqw 2.2cqw 0.8cqw 0.8cqw;
  }
  .r-kicker b {
    width: 3.6cqw;
    height: 3.6cqw;
  }
  .r-head {
    font-size: 6.2cqw;
    top: 13cqh;
  }
  .r-center {
    font-size: 8.4cqw;
    top: 50%;
  }
  .r-end {
    font-size: 9.6cqw;
  }
  .r-bars {
    gap: 1cqw;
    top: 72cqh;
  }
  .r-bars i {
    width: 1cqw;
  }
  .r-card {
    left: 5cqw;
    width: 90cqw;
    top: 34cqh;
    padding: 3.6cqw 3.6cqw 3cqw;
    border-radius: 3cqw;
  }
  .r-prompt {
    font-size: 4.2cqw;
  }
  .r-mode,
  .r-go {
    font-size: 2.8cqw;
  }
  .r-go svg {
    width: 2.8cqw;
    height: 2.8cqw;
  }
  .r-chip {
    font-size: 3.4cqw;
    border-radius: 2cqw;
    padding: 1.4cqw 2.4cqw;
  }
  .r-chip small {
    font-size: 1.8cqw;
  }
  .r-chip-0 {
    left: 5cqw;
    top: 18cqh;
  }
  .r-chip-1 {
    right: 4cqw;
    top: 14cqh;
  }
  .r-chip-2 {
    right: 6cqw;
    top: 80cqh;
  }
  .r-board {
    left: 4cqw;
    right: 4cqw;
    top: 30cqh;
    bottom: 5cqh;
  }
  .r-ruler,
  .r-lane {
    grid-template-columns: 19cqw minmax(0, 1fr);
  }
  .r-lane .r-name {
    font-size: 2.4cqw;
  }
  .r-sections span {
    font-size: 1.8cqw;
  }
  .r-clip b {
    display: none;
  }
  .r-playhead {
    left: 25.4cqw;
  }
  @keyframes r-sweep {
    from {
      left: 25.4cqw;
    }
    to {
      left: calc(100% - 1.4cqw);
    }
  }
  [data-scene='edit'] .r-board.on {
    transform: translateY(-3cqh) scale(0.94);
    filter: brightness(0.7);
  }
  .r-chat {
    left: 10cqw;
    right: 10cqw;
    top: auto;
    bottom: 8cqh;
    width: auto;
    gap: 2cqw;
    padding: 2.4cqw;
    transform: translateY(20cqh);
  }
  .r-chat-head {
    font-size: 2.4cqw;
  }
  .r-chat-head svg {
    width: 2.6cqw;
    height: 2.6cqw;
  }
  .r-msg {
    font-size: 3cqw;
    padding: 1.6cqw 2.2cqw;
  }
  .r-cursor {
    width: 4cqw;
    height: 4cqw;
  }
}

/* ---------- Photos of people making music (photo() in site/src/components.mjs) */
.photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--surface-2);
}
.photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A store's mark before its name (withBrands in site/src/layout.mjs). */
.store {
  white-space: nowrap;
}
.store svg {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-right: 0.16em;
  vertical-align: -0.04em;
}
/* Where it runs: the web and the Mac app (home page, #where). */
.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: -8px 0 28px;
}
.platform {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--noise), var(--surface);
  color: var(--fg);
}
.platform-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--accent-text);
}
.platform b {
  display: block;
  font-size: 16px;
}
.platform small {
  display: block;
  font-size: 14px;
  color: var(--muted);
}
@media (max-width: 520px) {
  .platform {
    flex: 1 1 100%;
  }
}
/* An inner page's opening words with a photo beside them; under them on narrow screens. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.hero-split .photo img {
  aspect-ratio: 3 / 2;
}
@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Learn as you go: the guided tour's piano-roll step, drawn (site/src/learn.mjs) */
.lv-stage {
  position: relative;
  aspect-ratio: 1;
  container-type: size;
  display: grid;
  grid-template-columns: 11% 1fr;
  background: #191512;
  overflow: hidden;
}
.lv-keys,
.lv-grid {
  display: grid;
  grid-template-rows: repeat(16, 1fr);
}
.lv-keys {
  background: #f5f5f4;
  border-right: 1px solid #d6d3d1;
}
.lv-key {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6%;
  border-bottom: 1px solid #d6d3d1;
  background: #f5f5f4;
  color: #44403c;
  font-size: 2.2cqw;
  font-weight: 600;
}
.lv-key.black {
  width: 62%;
  background: #1c1917;
  border-color: #1c1917;
}
.lv-grid {
  position: relative;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 25% 100%;
}
.lv-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lv-row.in {
  background: rgba(255, 255, 255, 0.07);
}
.lv-note {
  position: absolute;
  height: calc(100% / 16);
  border-radius: 3px;
  background: var(--c-sky, #6eb6d5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  transform-origin: left;
}
.motion .lv-note {
  animation: lv-note 7s calc(var(--i) * 0.7s) infinite both;
}
@keyframes lv-note {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  6%,
  80% {
    transform: none;
    opacity: 1;
  }
  92%,
  100% {
    transform: none;
    opacity: 0;
  }
}
.lv-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #fff;
  opacity: 0.7;
}
.motion .lv-playhead {
  animation: lv-sweep 7s linear infinite;
}
@keyframes lv-sweep {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
/* The tour's card, as the app shows it. */
.lv-pop {
  position: absolute;
  top: 4cqh;
  right: 4cqw;
  width: 62cqw;
  padding: 3cqw 3.4cqw;
  border-radius: 3cqw;
  background: #26211d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4cqw 9cqw -2cqw rgba(0, 0, 0, 0.8);
  color: rgba(250, 249, 249, 0.75);
  font-size: 2.4cqw;
  line-height: 1.42;
}
.lv-pop h3 {
  margin: 1.4cqw 0 1.2cqw;
  color: #faf9f9;
  font-size: 3.6cqw;
}
.lv-pop p {
  margin: 0 0 1.2cqw;
}
.lv-pop b {
  color: #faf9f9;
}
.lv-progress {
  font-size: 2.2cqw;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ff8561;
}
.lv-doit {
  display: inline-block;
  margin-top: 1cqw;
  padding: 1.2cqw 2.4cqw;
  border-radius: 99px;
  border: 1px solid rgba(255, 133, 97, 0.6);
  color: #ff8561;
  font-weight: 600;
  font-size: 2.4cqw;
}
@container (max-width: 420px) {
  .lv-pop {
    width: 78cqw;
    font-size: 3.4cqw;
  }
  .lv-pop h3 {
    font-size: 4.8cqw;
  }
  .lv-progress,
  .lv-doit {
    font-size: 3.2cqw;
  }
}

/* ---------- Ratings: five square star tiles, green to deep green, the last one filled in part
   (stars() in site/src/components.mjs). */
.stars {
  display: inline-flex;
  gap: 3px;
  flex: none;
}
.star {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background:
    linear-gradient(90deg, transparent var(--f), #d6d3d1 var(--f)),
    linear-gradient(135deg, #2fd67b, #00a861);
}
.star svg {
  width: 72%;
  height: 72%;
}
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 15px;
  color: var(--muted);
}
.rating-score {
  color: var(--fg);
}
.rating-score b {
  font-size: 17px;
}
.rating-count a {
  color: inherit;
}
/* Phones: "based on N reviews" crowds the hero. The stars and the score stay. */
@media (max-width: 720px) {
  .rating-count {
    display: none;
  }
}
/* ---------- Stories */
.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.quote {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--noise), var(--surface);
}
.quote blockquote {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}
.quote figcaption {
  display: grid;
  gap: 4px;
  padding: 0;
}
.quote figcaption span {
  color: var(--muted);
}
/* With a photo, the name and role sit beside it and the release link goes under both. */
.quote figcaption:has(.quote-photo) {
  grid-template-columns: 48px minmax(0, 1fr);
  column-gap: 12px;
}
.quote-photo {
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.quote figcaption .quote-initials {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-violet), var(--c-pink));
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}
.quote .stars .star {
  width: 20px;
  height: 20px;
}
.quote figcaption:has(.quote-photo) .text-link {
  grid-column: 1 / 3;
  margin-top: 6px;
}

/* ---------- Sections rise into place (only with motion: js/demos.js adds .motion) */
.motion .rise {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.motion .rise.in {
  opacity: 1;
  transform: none;
}
/* A card rises from further down, scaled a touch, after the cards beside it (--rise-at, set by
   js/demos.js). An animation, not a transition, so the card's own hover lift is left alone. */
.motion .rise-card:not(.in) {
  opacity: 0;
}
.motion .rise-card.in {
  animation: rise-card 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rise-at, 0ms) backwards;
}
@keyframes rise-card {
  from {
    opacity: 0;
    transform: translateY(48px) scale(0.97);
  }
}

/* ---------- Light/dark switch
   A pill with a knob that springs across; the knob's sun shrinks its rays and grows into a moon
   as a second circle bites into it. Stars come out on the track in the dark. site.js flips it
   and reveals the new theme in a circle from the switch. */
.theme-switch {
  --knob: 24px;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  flex: none;
  width: 54px;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--on-inverse);
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.theme-switch[hidden] {
  display: none;
}
.theme-switch:hover {
  border-color: var(--faint);
}
.theme-switch::before,
.theme-switch::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: var(--faint);
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.theme-switch::before {
  left: 10px;
  top: 8px;
  width: 3px;
  height: 3px;
}
.theme-switch::after {
  left: 17px;
  top: 17px;
  width: 2px;
  height: 2px;
}
.theme-switch[aria-checked='true']::before,
.theme-switch[aria-checked='true']::after {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s ease 0.2s, transform 0.4s var(--spring) 0.2s;
}
.theme-switch[aria-checked='true']::after {
  transition-delay: 0.3s;
}
.theme-switch-knob {
  display: grid;
  place-items: center;
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background: var(--inverse);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.5s var(--spring), background-color 0.3s ease;
}
.theme-switch:active .theme-switch-knob {
  transform: scale(0.9);
}
.theme-switch[aria-checked='true'] .theme-switch-knob {
  transform: translateX(var(--knob));
}
.theme-switch[aria-checked='true']:active .theme-switch-knob {
  transform: translateX(var(--knob)) scale(0.9);
}
.theme-switch svg {
  width: 16px;
  height: 16px;
  overflow: visible;
}
.theme-switch-core,
.theme-switch-rays,
.theme-switch-bite {
  transform-origin: 12px 12px;
  transition: transform 0.5s var(--spring), opacity 0.3s ease;
}
.theme-switch-bite {
  transform: translate(10px, -10px);
}
.theme-switch[aria-checked='true'] .theme-switch-core {
  transform: scale(1.8);
}
.theme-switch[aria-checked='true'] .theme-switch-rays {
  opacity: 0;
  transform: rotate(90deg) scale(0.4);
}
.theme-switch[aria-checked='true'] .theme-switch-bite {
  transform: none;
  transition-delay: 0.08s;
}
/* On phones the header has no room: the switch moves into the menu. */
.mobile-theme {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 10px 12px 4px;
  border-top: 1px solid var(--line);
  font-weight: 550;
}
@media (max-width: 480px) {
  .header-actions > .theme-switch {
    display: none;
  }
  .mobile-theme {
    display: flex;
  }
}
/* The new theme opens in a circle from the switch (site.js animates it); no cross-fade under it. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ---------- Languages */
.lang-menu {
  position: relative;
}
.lang-menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  font: 600 13px/1 var(--font-body);
}
.lang-menu summary::-webkit-details-marker {
  display: none;
}
.lang-menu summary:hover,
.lang-menu[open] summary {
  color: var(--fg);
  background: var(--surface-2);
}
.lang-menu nav {
  position: absolute;
  right: 0;
  top: 44px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.lang-menu nav a {
  text-decoration: none;
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 550;
}
.lang-menu nav a:hover {
  background: var(--surface-2);
}
.lang-menu nav a[aria-current] {
  color: var(--accent-text);
}
.footer-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 14px;
  font-size: 14px;
}
.footer-langs a[aria-current] {
  color: var(--fg);
  font-weight: 650;
}
.en-only {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--faint);
  vertical-align: 1px;
}
@media (max-width: 480px) {
  .lang-menu summary span {
    display: none;
  }
}
.footer-grid .footer-langs a {
  font-size: 14px;
}
/* Words that shouldn't split across lines ("Écoutez-le"). */
.nb {
  white-space: nowrap;
}

/* ---------- Feature cards: "See what Vocals can do" (site/src/features.mjs)
   Each card's picture is one moment of the app, drawn large. Sizes are in cqw (hundredths of the
   picture's width), so a moment reads the same in a 360 px card and in a page's hero. The light is
   the accent's glow, from a different corner on each card; track colours only on the music. */
.fcards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1020px) {
  .fcards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .fcards {
    grid-template-columns: minmax(0, 1fr);
  }
}
.fcard {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--noise), var(--surface);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    border-color 0.2s ease,
    box-shadow 0.25s ease;
}
.fcard:hover {
  transform: translateY(-3px);
  border-color: var(--line-2);
  box-shadow: var(--shadow);
}
.fcard:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius);
}
.fcard .fv {
  border-bottom: 1px solid var(--line);
}
.fcard-text {
  display: grid;
  gap: 8px;
  padding: 20px 22px 24px;
}
.fcard-text h3 {
  font-size: 1.28rem;
}
.fcard-text p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.5;
}

/* The picture. */
.fv {
  --gx: 85%;
  --gy: 0%;
  position: relative;
  aspect-ratio: 4 / 3;
  container-type: inline-size;
  overflow: hidden;
  background:
    radial-gradient(85% 75% at var(--gx) var(--gy), color-mix(in srgb, var(--accent) 24%, transparent), transparent 72%),
    var(--bg-2);
  color: var(--fg);
  line-height: 1.3;
}
.fv-in {
  position: absolute;
  inset: 0;
  padding: 7cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.6cqw;
  font-size: 3.6cqw;
}
.fv .i {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}
.fv-large {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
/* A panel of the app, inside the picture. */
.fvd-box,
.fvh-lane,
.fvs-mix,
.fvx-card,
.fvl-panel {
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: 0 3cqw 8cqw -3cqw rgba(0, 0, 0, 0.45);
}

/* 1 · Describe it: the prompt, with what Vocals reads in it picked out. */
.fv-describe {
  --gx: 100%;
  --gy: 0%;
}
.fvd-box {
  border-radius: 5cqw;
  padding: 6cqw 5.5cqw 4.4cqw;
}
.fvd-text {
  font-size: 6.1cqw;
  line-height: 1.72;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.fvd-text mark {
  position: relative;
  padding: 0.2cqw 1cqw;
  border-radius: 1.4cqw;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
  font-weight: 650;
  white-space: nowrap;
}
.fvd-text mark::before {
  content: attr(data-k);
  position: absolute;
  left: 1cqw;
  top: -2.6cqw;
  font-size: 2.4cqw;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.fvd-caret {
  display: inline-block;
  width: 0.5cqw;
  height: 6cqw;
  margin-left: 0.8cqw;
  vertical-align: -1cqw;
  background: var(--accent);
}
.fvd-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3.4cqw;
}
.fvd-mode {
  padding: 1.3cqw 3.4cqw;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  color: var(--muted);
  font-size: 3.3cqw;
  font-weight: 600;
}
.fvd-go {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 2.4cqw 4.4cqw;
  border-radius: 99px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 3.9cqw;
  font-weight: 700;
  box-shadow: var(--accent-glow);
}

/* 2 · Hum it: the Sing button, the voice, and the same phrase as notes. */
.fv-hum {
  --gx: 0%;
  --gy: 100%;
}
.fvh-top {
  display: flex;
  align-items: center;
  gap: 3cqw;
}
.fvh-btn {
  display: inline-flex;
  align-items: center;
  gap: 2cqw;
  padding: 2.6cqw 5cqw;
  border-radius: 99px;
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-size: 4.6cqw;
  font-weight: 700;
  box-shadow: 0 0 0 1.4cqw color-mix(in srgb, var(--accent) 16%, transparent);
}
.fvh-btn .i {
  color: var(--accent-text);
}
.fvh-time {
  font-family: var(--font-mono);
  font-size: 3.6cqw;
  color: var(--faint);
}
.fvh-lane {
  position: relative;
  height: 34cqw;
  border-radius: 3.4cqw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
.fvh-voice {
  display: flex;
  align-items: center;
  padding: 0 6cqw 0 3.4cqw;
}
.fvh-wave {
  width: 100%;
  height: 72%;
  fill: var(--tc);
}
.fvh-notes {
  position: relative;
  margin: 4cqw 3.4cqw 4cqw 6cqw;
  background-image: linear-gradient(var(--line) 1px, transparent 1px);
  background-size: 100% calc(100% / 7);
}
.fvh-note {
  position: absolute;
  height: calc(100% / 7);
  border-radius: 1cqw;
  background: var(--tc);
  transform-origin: left;
}
.fvh-turn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8cqw;
  height: 8cqw;
  margin: -4cqw 0 0 -4cqw;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--accent-text);
}
.fvh-lane::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-left: 1px dashed var(--line-2);
}
.fvh-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  font-size: 2.8cqw;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* 3 · Score a video: the scenes and their moods, and the song's sections changing on the cuts. */
.fv-video {
  --gx: 50%;
  --gy: 0%;
}
.fvv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  font-size: 3.4cqw;
}
.fvv-file {
  display: inline-flex;
  align-items: center;
  gap: 1.6cqw;
  font-weight: 650;
  color: var(--muted);
}
.fvv-tempo {
  padding: 1cqw 2.8cqw;
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 3cqw;
}
.fvv-body {
  position: relative;
  display: grid;
  gap: 2cqw;
}
.fvv-row {
  display: flex;
}
.fvv-row > * {
  margin: 0 0.6cqw;
  min-width: 0;
}
.fvv-strip {
  height: 28cqw;
}
.fvv-scene {
  position: relative;
  overflow: hidden;
  border-radius: 2cqw;
  border: 1px solid var(--line);
  background-color: var(--surface-2);
}
/* Four frames, sketched with the accent's light: dawn, the road, the city, dusk. */
.fvv-scene.s0 {
  background-image:
    linear-gradient(to top, color-mix(in srgb, var(--fg) 14%, transparent) 0 26%, transparent 26%),
    radial-gradient(circle at 50% 74%, color-mix(in srgb, var(--accent) 70%, transparent) 0 9%, transparent 9.5%),
    linear-gradient(to bottom, var(--surface-2) 10%, color-mix(in srgb, var(--accent) 22%, var(--surface-2)) 74%);
}
.fvv-scene.s1 {
  background-image:
    conic-gradient(from 160deg at 50% 52%, transparent 0deg, color-mix(in srgb, var(--fg) 26%, transparent) 0deg 40deg, transparent 40deg),
    linear-gradient(to top, color-mix(in srgb, var(--fg) 10%, transparent) 0 48%, transparent 48%),
    radial-gradient(circle at 70% 26%, color-mix(in srgb, var(--accent) 60%, transparent) 0 8%, transparent 8.5%),
    linear-gradient(to bottom, color-mix(in srgb, var(--accent) 16%, var(--surface-2)), var(--surface-2) 52%);
}
.fvv-scene.s2 {
  --b: color-mix(in srgb, var(--fg) 30%, var(--surface-2));
  background-image:
    linear-gradient(var(--b), var(--b)),
    linear-gradient(var(--b), var(--b)),
    linear-gradient(var(--b), var(--b)),
    linear-gradient(var(--b), var(--b)),
    linear-gradient(var(--b), var(--b)),
    radial-gradient(70% 60% at 55% 40%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
  background-size: 14% 46%, 12% 70%, 16% 56%, 10% 82%, 14% 40%, 100% 100%;
  background-position: 6% 100%, 26% 100%, 46% 100%, 68% 100%, 92% 100%, 0 0;
  background-repeat: no-repeat;
}
.fvv-scene.s3 {
  background-image:
    linear-gradient(to top, color-mix(in srgb, var(--fg) 8%, transparent) 0 30%, transparent 30%),
    radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--accent) 45%, transparent) 0 7%, transparent 7.5%),
    linear-gradient(to bottom, var(--bg), color-mix(in srgb, var(--accent) 10%, var(--surface-2)) 72%);
}
.fvv-mood {
  position: absolute;
  left: 1.4cqw;
  top: 1.4cqw;
  padding: 0.7cqw 1.7cqw;
  border-radius: 99px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-size: 2.6cqw;
  font-weight: 700;
  white-space: nowrap;
}
.fvv-bars {
  height: 2.6cqw;
  margin: 0 0.6cqw;
  background-image: linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: calc(100% / 16) 100%;
  border-bottom: 1px solid var(--line-2);
}
.fvv-sections {
  height: 12cqw;
}
.fvv-sec {
  display: flex;
  align-items: flex-start;
  padding: 1.4cqw 1.8cqw;
  border-radius: 1.6cqw;
  border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent);
  background:
    repeating-linear-gradient(90deg, var(--tc) 0 5%, transparent 5% 9%) 0 82% / 100% 22% no-repeat,
    color-mix(in srgb, var(--tc) 24%, var(--surface));
  font-size: 2.8cqw;
  font-weight: 700;
  overflow: hidden;
}
.fvv-sec span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fvv-cuts {
  position: absolute;
  inset: -1.4cqw 0;
  pointer-events: none;
}
.fvv-cuts > span {
  position: relative;
}
.fvv-cuts > span:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -0.9cqw;
  width: 0.6cqw;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 2cqw color-mix(in srgb, var(--accent) 70%, transparent);
  transform-origin: top;
}
.fvv-play {
  display: none;
}

/* 4 · Split & rebuild: one mix, four stems, three of them back as notes. */
.fv-split {
  --gx: 100%;
  --gy: 60%;
}
.fv-split .fv-in {
  padding: 5.5cqw 6cqw;
  gap: 1.8cqw;
}
.fvs-mix {
  display: grid;
  grid-template-columns: 15cqw minmax(0, 1fr);
  align-items: center;
  height: 12cqw;
  padding: 0 3cqw;
  border-radius: 2.4cqw;
}
.fvs-mix .fvs-wave {
  fill: var(--muted);
  height: 8cqw;
}
.fvs-name {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
  font-size: 2.7cqw;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}
.fvs-lane .fvs-name::before {
  content: '';
  flex: none;
  width: 1.8cqw;
  height: 1.8cqw;
  border-radius: 0.6cqw;
  background: var(--tc);
}
.fvs-cols,
.fvs-lane {
  display: grid;
  grid-template-columns: 15cqw minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 3cqw;
  padding: 0 3cqw;
}
.fvs-cols {
  font-size: 2.5cqw;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 1.4cqw;
}
.fvs-lanes {
  display: grid;
  gap: 1.2cqw;
}
.fvs-lane {
  align-items: center;
  height: 9cqw;
  border-radius: 2cqw;
  background: color-mix(in srgb, var(--tc) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent);
}
.fvs-wave {
  display: block;
  width: 100%;
  height: 6cqw;
  fill: var(--tc);
}
.fvs-in .fvs-wave {
  opacity: 0.6;
}
.fvs-out {
  position: relative;
  height: 6.4cqw;
}
.fvs-midi {
  background-image: linear-gradient(color-mix(in srgb, var(--tc) 22%, transparent) 1px, transparent 1px);
  background-size: 100% 25%;
}
.fvs-note {
  position: absolute;
  height: 25%;
  border-radius: 0.6cqw;
  background: var(--tc);
  transform-origin: left;
}

/* 5 · Open any part: big notes in the piano roll, one dragged up from where it was. */
.fv-studio {
  --gx: 0%;
  --gy: 0%;
}
.fv-studio .fv-in {
  padding: 0;
  gap: 0;
  justify-content: flex-start;
}
.fvr-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 10cqw;
  padding: 0 4cqw 0 3cqw;
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
}
.fvr-track {
  display: inline-flex;
  align-items: center;
  gap: 1.8cqw;
  font-size: 3.6cqw;
  font-weight: 700;
}
.fvr-track i {
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 0.8cqw;
  background: var(--c-violet);
}
.fvr-track.c-pink i {
  background: var(--c-pink);
}
.fvr-bars {
  display: flex;
  gap: 30cqw;
  font-family: var(--font-mono);
  font-size: 3cqw;
  color: var(--faint);
}
.fvr-body {
  flex: 1;
  display: grid;
  grid-template-columns: 12cqw minmax(0, 1fr);
}
.fvr-keys,
.fvr-grid {
  display: grid;
  grid-template-rows: repeat(10, minmax(0, 1fr));
}
.fvr-keys {
  background: var(--key-white);
  border-right: 1px solid var(--line-2);
}
.fvr-key {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1.2cqw;
  border-bottom: 1px solid color-mix(in srgb, var(--key-black) 14%, transparent);
  color: color-mix(in srgb, var(--key-black) 70%, transparent);
  font-size: 2.3cqw;
  font-weight: 700;
}
.fvr-key.black {
  width: 64%;
  background: var(--key-black);
  border-color: var(--key-black);
}
.fvr-grid {
  position: relative;
  background-image:
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:
    50% 100%,
    calc(100% / 7) 100%;
}
.fvr-row {
  border-bottom: 1px solid var(--line);
}
.fvr-row.black {
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.fvr-note,
.fvr-ghost {
  position: absolute;
  height: calc(100% / 10 - 0.8cqw);
  margin-top: 0.4cqw;
  border-radius: 1cqw;
}
.fvr-note {
  background: var(--tc);
}
.fvr-ghost {
  border: 0.45cqw dashed color-mix(in srgb, var(--tc) 80%, transparent);
}
.fvr-dragrow {
  position: absolute;
  inset: 0;
}
.fvr-drag {
  box-shadow:
    0 0 0 0.5cqw color-mix(in srgb, var(--fg) 85%, transparent),
    0 2.4cqw 5cqw -1cqw rgba(0, 0, 0, 0.55);
}
.fvr-tip {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, -1.6cqw);
  padding: 0.8cqw 2cqw;
  border-radius: 1.4cqw;
  background: var(--inverse);
  color: var(--on-inverse);
  font-family: var(--font-mono);
  font-size: 3cqw;
  font-weight: 700;
}
.fvr-cursor {
  position: absolute;
  left: 60%;
  top: 40%;
  width: 7cqw;
  height: 7cqw;
  fill: var(--key-white);
  stroke: var(--key-black);
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 1cqw 1.4cqw rgba(0, 0, 0, 0.45));
}

/* 6 · Share & remix: a published song, its numbers, and the button that copies it. */
.fv-share {
  --gx: 70%;
  --gy: 100%;
}
.fv-share .fv-in {
  padding: 9cqw 8cqw 7cqw;
}
.fvx-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3.4cqw;
  padding: 4.4cqw;
  border-radius: 4cqw;
}
.fvx-behind {
  position: absolute;
  z-index: 0;
  left: 14cqw;
  right: 14cqw;
  top: 4.4cqw;
  height: 30cqw;
  padding: 0;
  background: var(--surface-2);
  border-color: var(--line);
  box-shadow: none;
}
.fvx-head {
  display: grid;
  grid-template-columns: 13cqw minmax(0, 1fr);
  gap: 3cqw;
  align-items: center;
}
.fvx-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 2.6cqw;
  background: linear-gradient(135deg, var(--tc), color-mix(in srgb, var(--tc) 35%, var(--bg)));
  color: var(--fg);
  font-size: 5cqw;
}
.fvx-who b {
  display: block;
  font-size: 4.6cqw;
  letter-spacing: -0.01em;
}
.fvx-who small {
  display: block;
  margin-top: 0.6cqw;
  font-size: 3.1cqw;
  color: var(--faint);
}
.fvx-wave {
  display: flex;
  height: 10cqw;
}
.fvx-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}
.fvx-played {
  fill: var(--tc);
}
.fvx-rest {
  fill: var(--wave);
}
.fvx-foot {
  display: flex;
  align-items: center;
  gap: 3.2cqw;
  font-size: 3.1cqw;
  font-weight: 600;
  color: var(--faint);
}
.fvx-foot > span {
  display: inline-flex;
  align-items: center;
  gap: 1cqw;
}
.fvx-foot .fvx-remix {
  margin-left: auto;
  gap: 1.4cqw;
  padding: 1.9cqw 3.6cqw;
  border-radius: 99px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 3.4cqw;
  font-weight: 700;
  box-shadow: var(--accent-glow);
}

/* Lyrics (the Sing page): the vocal line with a syllable under each note, and the words as text. */
.fv-lyrics {
  aspect-ratio: auto;
}
.fv-lyrics .fv-in {
  position: static;
  padding: 0 0 5cqw;
  gap: 0;
}
.fvl-roll {
  position: relative;
  height: 40cqw;
  margin: 5cqw;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size:
    100% 20%,
    50% 100%;
}
/* A note with its syllable on it, as the piano roll shows lyrics. */
.fvl-note {
  position: absolute;
  height: calc(20% - 0.8cqw);
  margin-top: 0.4cqw;
  display: flex;
  align-items: center;
  padding-left: 1.4cqw;
  border-right: 0.7cqw solid transparent;
  border-radius: 1.2cqw;
  background: var(--tc);
  background-clip: padding-box;
  transform-origin: left;
}
.fvl-note b {
  font-size: 3.6cqw;
  font-weight: 700;
  color: var(--surface);
  white-space: nowrap;
}
.fvl-panel {
  margin: 0 5cqw;
  padding: 3.4cqw 4cqw;
  border-radius: 3cqw;
  font-size: 4.2cqw;
  font-weight: 500;
}
.fvl-title {
  display: block;
  margin-bottom: 1.4cqw;
  font-size: 2.6cqw;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.fvl-panel p {
  color: var(--muted);
}
.fvl-panel p.on {
  color: var(--fg);
}
.fvl-panel .fvd-caret {
  height: 4.4cqw;
  vertical-align: -0.8cqw;
}

/* A little life when a picture comes on screen (.in, from js/demos.js) or is hovered, only for
   people who haven't asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .motion .fvd-caret {
    animation: fv-blink 1.1s steps(1) infinite;
  }
  .motion .in .fvd-text mark {
    animation: fv-mark 0.7s ease both;
  }
  .motion .in .fvd-text mark:nth-of-type(2) {
    animation-delay: 0.25s;
  }
  .motion .in .fvd-text mark:nth-of-type(3) {
    animation-delay: 0.5s;
  }
  .motion .in .fvh-note,
  .motion .in .fvl-note,
  .motion .in .fvs-note {
    animation: fv-grow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(0.5s + var(--i, var(--j, 0)) * 0.11s);
  }
  .motion .in .fvs-lane {
    animation: fv-slide 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(0.15s + var(--i) * 0.1s);
  }
  .motion .in .fvv-cuts > span::after {
    animation: fv-cut 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(0.4s + var(--i) * 0.2s);
  }
  .motion .in .fvr-dragrow {
    animation: fv-drag 1.1s 0.5s cubic-bezier(0.5, 0, 0.2, 1) both;
  }
  .motion .fcard:hover .fvr-dragrow {
    animation: fv-drag 1.4s cubic-bezier(0.5, 0, 0.2, 1) infinite alternate;
  }
  .motion .fcard:hover .fvh-btn {
    animation: fv-pulse 1.2s ease-in-out infinite;
  }
  .motion .fcard:hover .fvx-remix,
  .motion .fcard:hover .fvd-go {
    animation: fv-pulse-accent 1.2s ease-in-out infinite;
  }
  .motion .fvv-play {
    display: block;
    position: absolute;
    top: -1.4cqw;
    bottom: -1.4cqw;
    left: 0.6cqw;
    width: 0.4cqw;
    background: var(--fg);
    opacity: 0;
  }
  .motion .fcard:hover .fvv-play,
  .motion .feature-hero .in .fvv-play {
    animation: fv-play 6s linear infinite;
  }
}
@keyframes fv-blink {
  50% {
    opacity: 0;
  }
}
@keyframes fv-mark {
  from {
    background: transparent;
    color: inherit;
  }
}
@keyframes fv-grow {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
}
@keyframes fv-slide {
  from {
    transform: translateX(-6cqw);
    opacity: 0;
  }
}
@keyframes fv-cut {
  from {
    transform: scaleY(0);
  }
}
@keyframes fv-drag {
  from {
    transform: translateY(var(--from));
  }
}
@keyframes fv-pulse {
  50% {
    box-shadow: 0 0 0 2.6cqw color-mix(in srgb, var(--accent) 10%, transparent);
  }
}
@keyframes fv-pulse-accent {
  50% {
    box-shadow: 0 0 0 1.4cqw color-mix(in srgb, var(--accent) 22%, transparent);
  }
}
@keyframes fv-play {
  0% {
    left: 0.6cqw;
    opacity: 0.8;
  }
  96% {
    left: calc(100% - 0.6cqw);
    opacity: 0.8;
  }
  100% {
    left: calc(100% - 0.6cqw);
    opacity: 0;
  }
}

/* ---------- Feature pages (site/src/featurePage.mjs) */
.feature-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.feature-hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
}
@media (max-width: 900px) {
  .feature-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.walk {
  align-items: center;
}
/* The steps of a walkthrough without screens: numbered cards in a row. */
.step-cards {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  gap: 16px;
}
.step-cards li {
  counter-increment: step;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--noise), var(--surface);
}
.step-cards li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent-text);
}
.step-cards h3 {
  font-size: 1.12rem;
}
.step-cards p {
  color: var(--muted);
  font-size: 15px;
}

/* Questions in two columns: the title (and a way to ask a person) left, the answers right. */
.faq-cols {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-side {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 14px;
  justify-items: start;
}
.faq-side h2 {
  margin: 0;
}
.faq-cols .faq {
  max-width: none;
}
@media (max-width: 860px) {
  .faq-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .faq-side {
    position: static;
  }
}

/* The closing call to action: the headline again, the button, the accent's light from below. */
.end-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(80px, 11vw, 144px);
}
.end-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(55% 70% at 50% 100%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 72%);
}
.end-cta h2 {
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  max-width: 18ch;
  margin-inline: auto;
}
.end-cta h2.fit-title {
  max-width: none;
  font-size: min(clamp(2.4rem, 5.6vw, 4.6rem), calc((100vw - 32px) / (var(--chars, 17) * 0.55)));
}
.end-cta .lede {
  margin: 18px auto 0;
}
.end-cta .cta-row {
  justify-content: center;
}

/* Where it runs, on the home page: one line, the two places, and the MCP pointer. */
.where.section {
  padding-block: clamp(44px, 6vw, 72px);
}
.where-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.where-row h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}
.where .platforms {
  margin: 0;
}
a.platform {
  text-decoration: none;
  transition: border-color 0.15s ease;
}
a.platform:hover {
  border-color: var(--line-2);
}
.where-mcp {
  margin-top: 22px;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Coproducer (site/src/pages/coproducer.mjs): a model launch, always dark. */
/* The page keeps the dark theme whatever the switch says (the switch is hidden here), on a deeper ink. */
body:has(main.page-coproducer) {
  --bg: var(--kp-ink);
  --bg-2: #120a08;
  --surface: #150d0b;
  --surface-2: #1c1310;
  --line: rgba(255, 238, 230, 0.08);
  --line-2: rgba(255, 238, 230, 0.15);
  --wave: #4a3a36;
  --fg: #fafaf9;
  --muted: #d6d3d1;
  --faint: #a8a29e;
  --accent-text: #ff8561;
  --accent-glow: 0 0 0 1px rgba(255, 75, 20, 0.35), 0 10px 32px -8px rgba(255, 75, 20, 0.6);
  --inverse: #fafaf9;
  --on-inverse: #1c1917;
  --c-pink: #db959c;
  --noise: none;
  --dots: rgba(250, 249, 249, 0.12);
  --shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7);
  --kp-gridline: rgba(255, 238, 230, 0.045);
  --kp-edge: linear-gradient(140deg, rgba(255, 75, 20, 0.6), rgba(255, 46, 147, 0.28) 40%, rgba(255, 238, 230, 0.06) 72%);
  color-scheme: dark;
}
body:has(main.page-coproducer) .theme-switch,
body:has(main.page-coproducer) .mobile-theme {
  display: none !important;
}
.kp-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.kp-kicker > span:first-child:not(.kp-live) {
  color: var(--accent-text);
}
.kp-kicker > span:first-child:not(.kp-live)::after {
  content: ' //';
  color: var(--line-2);
}

/* The stage: a faint grid, the live field on the right, the name on the left, the readout below. */
.kp-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 128px) clamp(32px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
}
.kp-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(var(--kp-gridline) 1px, transparent 1px), linear-gradient(90deg, var(--kp-gridline) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 70% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(120% 90% at 70% 40%, #000 20%, transparent 75%);
}
.kp-field {
  position: absolute;
  z-index: -1;
  top: 0;
  right: -4%;
  width: min(66%, 1080px);
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 36%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent 4%, #000 36%, #000 90%, transparent);
}
.kp-field > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.kp-field .kp-poster {
  inset: 16% 4% 14% 22%;
  width: auto;
  height: auto;
  transition: opacity 0.8s;
}
/* The still poster: "v2" as stacked strokes of neon (what shows without WebGL). */
.kp-poster text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 440px;
  letter-spacing: -0.02em;
  text-anchor: middle;
  fill: none;
  stroke-linejoin: round;
}
.kp-poster .kp-word text:last-child {
  fill: var(--kp-ink);
}
.kp-field.is-live .kp-poster {
  opacity: 0;
}
.kp-canvas {
  opacity: 0;
  transition: opacity 1.2s;
}
.kp-field.is-live .kp-canvas {
  opacity: 1;
}
.kp-stage-copy > * {
  max-width: 600px;
}
.kp-status {
  color: var(--muted);
}
.kp-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kp-pink);
  box-shadow: 0 0 0 0 rgba(255, 46, 147, 0.6), 0 0 12px var(--kp-pink);
}
.kp-title {
  margin-top: 22px;
  font-size: clamp(3.2rem, 8.6vw, 7.4rem);
  line-height: 0.9;
  letter-spacing: -0.055em;
}
.kp-title span {
  display: block;
  padding-bottom: 0.06em;
  background: linear-gradient(100deg, var(--kp-orange) 10%, var(--kp-pink) 55%, var(--kp-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 28px rgba(255, 46, 147, 0.35));
}
.kp-stage .lede {
  margin-top: 26px;
}
.kp-credit {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.kp-specs {
  margin: clamp(56px, 8vw, 104px) 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-2);
}
.kp-specs > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 6px;
  padding: 22px 24px 4px 0;
}
.kp-specs > div + div {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.kp-specs dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, var(--fg), color-mix(in srgb, var(--fg) 45%, transparent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kp-specs dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
@media (max-width: 900px) {
  .kp-stage {
    display: flex;
    flex-direction: column;
  }
  .kp-field {
    position: relative;
    order: 2;
    right: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    margin-top: 32px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .kp-field .kp-poster {
    inset: 0;
  }
  .kp-stage > .wrap:last-child {
    order: 3;
  }
  .kp-specs {
    margin-top: 32px;
    grid-template-columns: minmax(0, 1fr);
  }
  .kp-specs > div,
  .kp-specs > div + div {
    padding: 16px 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Sections: glass cards with a lit edge, the take, the pipeline, the table. */
.kp-section + .kp-section {
  border-top: 1px solid var(--line);
}
.kp-head {
  gap: 18px;
}
.kp-cards,
.kp-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 16px;
}
.kp-notes {
  margin-top: 16px;
}
.kp-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--kp-edge) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 238, 230, 0.05);
  transition: box-shadow 0.3s, transform 0.3s;
}
.kp-card:hover {
  box-shadow: inset 0 1px 0 rgba(255, 238, 230, 0.05), 0 24px 70px -28px rgba(255, 46, 147, 0.45);
  transform: translateY(-2px);
}
.kp-card h3 {
  font-size: 1.25rem;
}
.kp-card p {
  color: var(--muted);
  font-size: 15.5px;
}
.kp-index,
.kp-step {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-text);
}
.kp-take {
  max-width: 760px;
}
.kp-take .track {
  border: 1px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--kp-edge) border-box;
  box-shadow: 0 30px 90px -40px rgba(255, 46, 147, 0.5);
}
/* The pipeline: five stations on one lit line, a pulse running through them. */
.kp-flow {
  --dot: 12px;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.kp-flow::before,
.kp-flow::after {
  content: '';
  position: absolute;
  top: calc(var(--dot) / 2);
  left: 0;
  height: 1px;
}
.kp-flow::before {
  right: 0;
  background: linear-gradient(90deg, var(--kp-orange), var(--kp-pink) 60%, var(--line-2));
  opacity: 0.6;
}
.kp-flow::after {
  width: 140px;
  height: 2px;
  margin-top: -0.5px;
  background: linear-gradient(90deg, transparent, var(--kp-core), transparent);
  filter: drop-shadow(0 0 6px var(--kp-pink));
  opacity: 0;
}
.kp-flow li {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: calc(var(--dot) + 22px);
}
.kp-node {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--kp-ink);
  border: 2px solid var(--kp-pink);
  box-shadow: 0 0 12px rgba(255, 46, 147, 0.6);
}
.kp-flow h3 {
  font-size: 1.12rem;
}
.kp-flow p {
  color: var(--muted);
  font-size: 15px;
}
@media (max-width: 900px) {
  .kp-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .kp-flow::before {
    top: 0;
    bottom: 0;
    left: calc(var(--dot) / 2);
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--kp-orange), var(--kp-pink) 60%, var(--line-2));
  }
  .kp-flow::after {
    display: none;
  }
  .kp-flow li {
    padding: 0 0 0 calc(var(--dot) + 22px);
  }
}
.kp-table {
  background: var(--surface);
}
.kp-table thead th.us {
  color: var(--kp-pink);
}
.kp-table td.us,
.kp-table th.us {
  background: linear-gradient(90deg, rgba(255, 75, 20, 0.1), rgba(255, 46, 147, 0.08));
}
.kp-table td.us {
  color: var(--fg);
}
@media (prefers-reduced-motion: no-preference) {
  .kp-live {
    animation: kp-ping 2s ease-out infinite;
  }
  .kp-flow::after {
    animation: kp-run 4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  }
  .kp-node {
    animation: kp-lit 4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 0.62s);
  }
}
@keyframes kp-ping {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 46, 147, 0.6), 0 0 12px var(--kp-pink);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(255, 46, 147, 0), 0 0 12px var(--kp-pink);
  }
}
@keyframes kp-run {
  0% {
    left: -140px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}
@keyframes kp-lit {
  0%,
  100% {
    background: var(--kp-ink);
    box-shadow: 0 0 12px rgba(255, 46, 147, 0.5);
  }
  12% {
    background: var(--kp-core);
    box-shadow: 0 0 22px var(--kp-pink), 0 0 4px var(--kp-core);
  }
  30% {
    background: var(--kp-ink);
  }
}

/* ---------- Product pages (site/src/productPage.mjs): /studio, /sing, /video, /split, /coproducer.
   After the launch pages people know: the promise centred with one white button, a large picture
   in a rounded frame, rows of words and moments with sides alternating, tiles, the questions, and
   the promise again. */
.pp-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(56px, 8vw, 112px) clamp(48px, 6vw, 88px);
}
.pp-glow {
  position: absolute;
  inset: 0 0 auto;
  height: min(720px, 100%);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(30% 40% at 75% 10%, color-mix(in srgb, var(--kp-pink) 9%, transparent), transparent 70%);
}
.pp-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pp-kicker {
  margin-bottom: 18px;
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.pp-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.8rem, 6.6vw, 5.8rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.pp-hero .lede {
  max-width: 46ch;
  margin-top: 24px;
}
.pp-cta {
  margin-top: 32px;
  min-width: 168px;
}
.pp-media {
  position: relative;
  margin-top: clamp(40px, 6vw, 72px);
  border-radius: clamp(18px, 2.4vw, 32px);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
/* A screenshot under a hero keeps the hero's frame and drops its own, including the title bar. */
.pp-media > .clip {
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.pp-media > .clip .clip-head,
.pp-panel > .clip .clip-head,
.learn-visual > .clip-head {
  display: none;
}
.pp-head {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.pp-head h2,
.pp-copy h2 {
  font-size: clamp(2.2rem, 4.4vw, 3.6rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.pp-head .lede {
  max-width: 52ch;
}

/* A row: the words, and the moment in a rounded panel; `flip` puts the moment first. */
.pp-row.section {
  padding-block: clamp(48px, 7vw, 96px);
}
.pp-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(32px, 6vw, 88px);
}
.pp-split.flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.pp-split.flip > .pp-copy {
  order: 2;
}
.pp-copy {
  display: grid;
  gap: 20px;
  justify-items: start;
}
.pp-copy h2 {
  max-width: 12ch;
}
.pp-copy > p {
  color: var(--muted);
  font-size: clamp(1.02rem, 1.4vw, 1.12rem);
  max-width: 42ch;
}
.pp-panel {
  position: relative;
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 70% at 70% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--surface);
  padding: clamp(16px, 2.6vw, 36px);
  min-height: 280px;
  display: grid;
  align-items: center;
}
/* A screenshot in a row is the picture itself: no card around it, no window around the picture.
   The corners are the screenshot's. The same for the home page's guided-tour drawing.
   The lyrics drawing on /sing is already a framed picture (.fv-large): the row's panel would be
   a second border around it. */
.pp-panel:has(> .clip),
.pp-panel:has(> .fv-lyrics) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  min-height: 0;
  overflow: visible;
}
.pp-panel > .clip,
.learn-visual {
  margin: 0;
  border: 0;
  border-radius: clamp(16px, 2vw, 28px);
  overflow: hidden;
  box-shadow: none;
  background: transparent;
}
@media (max-width: 860px) {
  .pp-split,
  .pp-split.flip {
    grid-template-columns: minmax(0, 1fr);
  }
  .pp-split.flip > .pp-copy {
    order: 0;
  }
}
.pp-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: var(--muted);
  font-size: 15.5px;
}
.pp-ticks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pp-ticks .i {
  flex: none;
  margin-top: 4px;
  color: var(--accent-text);
}

/* Tiles: three across, each a picture in a rounded box, a title and a line. */
.pp-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 960px) {
  .pp-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .pp-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}
.pp-tile {
  display: grid;
  align-content: start;
  gap: 8px;
}
.pp-tile-art {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 10px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
}
.pp-tile-art > img,
.pp-tile-art > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-tile h3 {
  font-size: 1.15rem;
}
.pp-tile p {
  color: var(--muted);
  font-size: 15px;
  max-width: 40ch;
}

/* Songs in a row that scrolls sideways, each cover playing in place. */
.pp-shelf {
  --edge: max(16px, calc((100vw - var(--wrap)) / 2 + 32px));
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--edge);
  padding: 4px var(--edge) 20px;
  scrollbar-width: none;
}
.pp-shelf::-webkit-scrollbar {
  display: none;
}
.pp-song {
  flex: none;
  width: clamp(156px, 17vw, 210px);
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
  scroll-snap-align: start;
}
.pp-song-cover {
  position: relative;
  display: block;
  aspect-ratio: 1;
  margin-bottom: 8px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
}
.pp-song-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-song:hover img {
  transform: scale(1.05);
}
.pp-song .hero-card-play {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  top: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pp-song:hover .hero-card-play,
.pp-song:focus-visible .hero-card-play,
.pp-song[aria-pressed='true'] .hero-card-play {
  opacity: 1;
}
.pp-song .i-pause,
.pp-song[aria-pressed='true'] .i-play {
  display: none;
}
.pp-song[aria-pressed='true'] .i-pause {
  display: block;
}
.pp-song b {
  font-size: 15px;
  letter-spacing: -0.01em;
}
.pp-song small {
  color: var(--faint);
  font-size: 13.5px;
}
/* A shelf that repeats (data-loop): the track is two identical sets. Without JavaScript the row
   still scrolls, through both copies. With it, site.js hides the overflow and moves the track. */
.pp-shelf-track,
.pp-shelf-set {
  display: flex;
  gap: 18px;
  flex: none;
}
.pp-shelf.is-looping {
  overflow: hidden;
  padding-inline: 0;
  scroll-snap-type: none;
  cursor: grab;
  user-select: none;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.pp-shelf.is-looping:active {
  cursor: grabbing;
}
.pp-shelf.is-looping .pp-song {
  cursor: pointer;
}

/* The promise again. */
.pp-end {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(88px, 12vw, 160px);
}
.pp-end .pp-glow {
  inset: auto 0 0;
  background: radial-gradient(50% 70% at 50% 100%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
}
.pp-end h2 {
  max-width: 20ch;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
  letter-spacing: -0.04em;
}

/* ---------- Product visuals (site/src/productVisuals.mjs): the app's moments, drawn. */
.vx-meter {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 56px;
}
.vx-meter i {
  flex: 1;
  height: calc(var(--v) * 100%);
  min-height: 3px;
  border-radius: 3px;
  background: currentColor;
  transform-origin: center;
}
.motion .rise.in .vx-meter i,
.motion .pp-media .vx-meter i {
  animation: vx-level 1.2s ease-in-out calc(var(--i) * -97ms) infinite alternate;
}
@keyframes vx-level {
  from {
    transform: scaleY(0.45);
  }
}
/* A phone-sized screen of the voice sheet. */
.vx-phone,
.vx-form,
.vx-verified {
  width: min(100%, 320px);
  margin-inline: auto;
  padding: 26px 22px;
  border-radius: 28px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  box-shadow: var(--shadow);
  text-align: center;
}
.vx-title {
  font-weight: 600;
  font-size: 15px;
}
.vx-time {
  margin: 14px 0 8px;
  font: 600 34px/1 var(--font-mono);
  letter-spacing: -0.02em;
}
.vx-phone .vx-meter {
  color: var(--accent);
  margin-block: 10px 22px;
}
.vx-rec {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.vx-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--ok) var(--fill, 100%), var(--line-2) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
}
@property --fill {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}
.motion .rise.in .vx-ring,
.motion .pp-media .vx-ring {
  animation: vx-fill 6s linear infinite;
}
@keyframes vx-fill {
  from {
    --fill: 0%;
  }
}
.vx-stop {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 6px color-mix(in srgb, #ef4444 18%, transparent);
}
.vx-stop::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin: 20px auto;
  border-radius: 4px;
  background: #fff;
}
.vx-note {
  margin-top: 14px;
  color: var(--faint);
  font-size: 13.5px;
}
.vx-form {
  display: grid;
  gap: 12px;
  text-align: left;
  width: min(100%, 360px);
}
.vx-chip {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 14px;
}
.vx-x {
  display: inline-grid;
  opacity: 0.7;
}
.vx-field {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 14.5px;
}
.vx-field b {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.vx-field p {
  color: var(--fg);
}
.vx-go {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--kp-pink), var(--accent) 70%);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 15px;
}
.vx-seal {
  width: 150px;
  height: 150px;
  margin: 4px auto 6px;
  display: block;
  color: var(--ok);
}
.vx-seal polygon {
  fill: none;
  stroke: currentColor;
  stroke-width: 7;
  stroke-linejoin: round;
}
.vx-seal rect {
  fill: currentColor;
}
.vx-seal path {
  stroke: currentColor;
}
.motion .rise.in .vx-seal,
.motion .pp-media .vx-seal {
  animation: vx-seal 1.1s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
@keyframes vx-seal {
  from {
    transform: scale(0.6) rotate(-20deg);
    opacity: 0;
  }
}
.vx-ok {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
/* The three screens of making a voice, side by side in the hero's frame. */
.pp-media-art {
  background:
    radial-gradient(60% 80% at 20% 10%, color-mix(in srgb, var(--kp-pink) 22%, transparent), transparent 70%),
    radial-gradient(60% 80% at 85% 90%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    var(--surface);
}
.vx-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(12px, 2.5vw, 36px);
  padding: clamp(24px, 4vw, 56px);
}
.vx-trio > :nth-child(2) {
  transform: translateY(-14px) scale(1.04);
}
@media (max-width: 760px) {
  .vx-trio {
    grid-template-columns: minmax(0, 1fr);
  }
  .vx-trio > :not(:nth-child(2)) {
    display: none;
  }
  .vx-trio > :nth-child(2) {
    transform: none;
  }
}
/* The home page's video card: the clip's real scenes in the tiles, the playhead sweeping over them
   while the card is on screen. */
.fvv-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: no-preference) {
  .motion .in .fv-video .fvv-play {
    animation: fv-play 8s linear infinite;
  }
}

/* The video page: the clip, and its score under it, the playhead following the picture. */
.sv-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.sv-score {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px clamp(12px, 2vw, 22px) clamp(14px, 2vw, 22px);
  background: var(--surface);
}
.sv-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
}
.sv-head > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.sv-row {
  display: flex;
  gap: 6px;
}
.sv-row > span {
  min-width: 0;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}
.sv-moods > span {
  background: var(--surface-2);
  color: var(--faint);
}
.sv-moods > span.on {
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-2));
  color: var(--fg);
}
.sv-secs > span {
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent);
  background:
    repeating-linear-gradient(90deg, var(--tc) 0 6px, transparent 6px 11px) 0 85% / 100% 8px no-repeat,
    color-mix(in srgb, var(--tc) 22%, var(--surface));
}
.sv-head-line {
  position: absolute;
  top: 40px;
  bottom: 10px;
  left: calc(clamp(12px, 2vw, 22px) + (100% - 2 * clamp(12px, 2vw, 22px)) * var(--at));
  width: 2px;
  border-radius: 2px;
  background: var(--fg);
  box-shadow: 0 0 10px color-mix(in srgb, var(--fg) 50%, transparent);
}

/* The scenes found: stills with the cuts between them. */
.ss-strip {
  display: flex;
  align-items: stretch;
  gap: 6px;
}
.ss-strip figure {
  flex: 1;
  margin: 0;
  display: grid;
  gap: 8px;
}
.ss-strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
}
.ss-strip figcaption {
  font: 600 12px var(--font-mono);
  color: var(--faint);
}
.ss-cut {
  flex: none;
  width: 3px;
  margin-bottom: 26px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);
}
.motion .rise.in .ss-strip figure {
  animation: fv-slide 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i) * 0.12s);
}

/* Each scene read: its mood and an energy meter. */
.sm > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.sm-scene {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.sm-scene img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.sm-mood {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 4px 10px;
  border-radius: 99px;
  background: var(--scrim);
  color: var(--on-scrim);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(6px);
}
.sm-energy {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  overflow: hidden;
}
.sm-energy i {
  display: block;
  height: 100%;
  width: calc(var(--e) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--kp-amber), var(--accent), var(--kp-pink));
  transform-origin: left;
}
.motion .rise.in .sm-energy i {
  animation: fv-grow 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.3s + var(--i) * 0.15s);
}

/* The ways out. */
.vxp > div {
  display: grid;
  gap: 14px;
}
.vxp-file {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}
.vxp-file img {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}
.vxp-file span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 99px;
  background: var(--scrim);
  color: var(--on-scrim);
  font-size: 13.5px;
  font-weight: 600;
}
.vxp-ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.vxp-way {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.vxp-way.on {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
}
.vxp-way b {
  font-size: 14px;
}
.vxp-way small {
  color: var(--faint);
  font-size: 12.5px;
}
.sv-secs > span.on {
  background:
    repeating-linear-gradient(90deg, var(--tc) 0 6px, transparent 6px 11px) 0 85% / 100% 8px no-repeat,
    color-mix(in srgb, var(--tc) 42%, var(--surface));
  color: var(--fg);
}
.sv-head .fvv-tempo {
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12.5px;
}

/* Split & rebuild, drawn: the mix, a lane per stem (audio, then notes), the song's shape, and the
   computer it never leaves. */
.pp-art {
  padding: clamp(20px, 4vw, 56px);
}
.sx > div {
  display: grid;
  gap: 12px;
}
.sx-mix,
.sx-lane {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.sx-lane {
  grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr);
}
.sx-mix > span,
.sx-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.sx-mix .vx-meter {
  height: 54px;
  color: var(--fg);
  opacity: 0.85;
}
.sx-audio,
.sx-notes,
.sx-kept {
  position: relative;
  height: 44px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tc) 18%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
  overflow: hidden;
}
.sx-audio .vx-meter {
  height: 100%;
  padding: 6px 8px;
  color: var(--tc);
}
.sx-kept {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.sx-notes i {
  position: absolute;
  height: 20%;
  border-radius: 3px;
  background: var(--tc);
  margin-top: 4px;
}
.motion .rise.in .sx-lane,
.motion .pp-media .sx-lane {
  animation: fv-slide 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.2s + var(--i) * 0.12s);
}
.motion .rise.in .sx-notes i,
.motion .pp-media .sx-notes i {
  animation: fv-grow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.8s + var(--j) * 0.08s);
  transform-origin: left;
}
/* In a tile: the separation alone (audio lanes), or the rebuild alone (notes). */
.pp-tile-art .sx,
.pp-tile-art .sxs {
  width: 100%;
  padding: 18px;
}
.pp-tile-art .sx-mix {
  display: none;
}
.sx-sep .sx-lane,
.sx-rebuilt .sx-lane {
  grid-template-columns: 64px minmax(0, 1fr);
}
.sx-sep .sx-notes,
.sx-sep .sx-kept,
.sx-rebuilt .sx-audio {
  display: none;
}
.sx-rebuilt .sx-lane:first-child .sx-kept {
  display: grid;
}
.sx-sep,
.sx-rebuilt {
  width: 100%;
}
.sxs > div {
  display: grid;
  gap: 18px;
}
.sxs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sxs-chips span {
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.sxs-chips small {
  color: var(--faint);
  font-size: 12px;
}
.sxs-chips b {
  font: 700 17px var(--font-mono);
}
.sxs-secs {
  display: flex;
  gap: 6px;
}
.sxs-secs span {
  min-width: 0;
  height: 56px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent);
  background:
    repeating-linear-gradient(90deg, var(--tc) 0 6px, transparent 6px 11px) 0 82% / 100% 8px no-repeat,
    color-mix(in srgb, var(--tc) 22%, var(--surface));
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.motion .rise.in .sxs-secs span {
  animation: fv-slide 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.2s + var(--i) * 0.1s);
}
.sxl > div {
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 36px);
  padding: 20px 0;
}
.sxl-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font: 600 13.5px var(--font-mono);
}
.sxl-device {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 22px 26px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, var(--surface));
  color: var(--ok);
}
.sxl-device em {
  font-style: normal;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--fg);
}
.sxl-out {
  display: grid;
  gap: 6px;
}
.sxl-out i {
  font-style: normal;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  background: color-mix(in srgb, var(--tc) 22%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent);
}
@media (max-width: 560px) {
  .sxl > div {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
}

/* ---------- Coproducer, after a model launch page: the live field fills a wide frame under the
   promise, and what it does sits on six neon tiles that move. */
.kp-hero h1 {
  max-width: 14ch;
}
.kp-hero .kp-status {
  margin-bottom: 18px;
  justify-content: center;
}
.kp-frame {
  aspect-ratio: 21 / 9;
  background: var(--kp-ink);
  border-color: rgba(255, 238, 230, 0.08);
}
.kp-frame .kp-grid {
  z-index: 0;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 20%, transparent 80%);
  mask-image: radial-gradient(80% 80% at 50% 50%, #000 20%, transparent 80%);
}
.kp-frame .kp-field {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
.kp-frame .kp-field .kp-poster {
  inset: 8% 18%;
}
.kp-frame-name {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 2.4vw, 32px);
  bottom: clamp(14px, 2vw, 26px);
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: -0.01em;
  color: rgba(255, 238, 230, 0.9);
}
.kp-frame-name span {
  color: var(--kp-amber);
}
@media (max-width: 700px) {
  .kp-frame {
    aspect-ratio: 4 / 3;
  }
}
.kp-hero .kp-specs {
  margin-top: clamp(32px, 5vw, 56px);
}
.kp-head .kp-kicker {
  justify-content: center;
}

/* The six tiles: each picture on ink with the neon's light. */
.pp-neon .pp-tile-art {
  background:
    radial-gradient(70% 90% at 15% 0%, rgba(255, 46, 147, 0.55), transparent 65%),
    radial-gradient(80% 90% at 100% 100%, rgba(255, 75, 20, 0.6), transparent 65%),
    radial-gradient(60% 60% at 70% 20%, rgba(255, 176, 58, 0.35), transparent 70%),
    var(--kp-ink);
  border-color: rgba(255, 238, 230, 0.1);
}
.pp-neon .pp-tile:nth-child(2n) .pp-tile-art {
  background:
    radial-gradient(70% 90% at 90% 0%, rgba(255, 176, 58, 0.5), transparent 65%),
    radial-gradient(80% 90% at 0% 100%, rgba(255, 46, 147, 0.55), transparent 65%),
    var(--kp-ink);
}
.kpt {
  width: 78%;
  color: #fff;
}
.kpt .vx-meter {
  color: #fff;
}
.kpt-wave {
  height: 90px;
  filter: drop-shadow(0 0 12px rgba(255, 228, 204, 0.6));
}
.kpt-words {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(13, 6, 5, 0.55);
  backdrop-filter: blur(6px);
  font-size: 15px;
}
.kpt-words b {
  font: 600 11px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--kp-amber);
}
.kpt-notes {
  display: grid;
  gap: 8px;
}
.kpt-notes > div {
  display: grid;
  grid-template-columns: 52px 1fr 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
}
.kpt-mini {
  height: 22px;
  gap: 2px;
  opacity: 0.85;
}
.kpt-notes em {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background: rgba(13, 6, 5, 0.45);
}
.kpt-notes em i {
  position: absolute;
  height: 22%;
  border-radius: 2px;
  background: var(--kp-core);
  margin-top: 3px;
}
.kpt-takes {
  position: relative;
  height: 130px;
}
.kpt-take {
  position: absolute;
  inset: 0 12% 30% 0;
  display: grid;
  gap: 10px;
  align-content: center;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(13, 6, 5, 0.6);
  border: 1px solid rgba(255, 238, 230, 0.14);
  font-size: 13px;
}
.kpt-take.t2 {
  inset: 30% 0 0 12%;
  background: rgba(13, 6, 5, 0.82);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.6);
}
.kpt-switch {
  display: grid;
  justify-items: center;
  gap: 14px;
}
.kpt-pill {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 220px);
  padding: 6px;
  border-radius: 999px;
  background: rgba(13, 6, 5, 0.7);
  font: 700 22px var(--font-mono);
}
.kpt-pill span {
  position: relative;
  z-index: 1;
  padding: 10px 0;
  text-align: center;
}
.kpt-pill i {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: calc(50% - 6px);
  border-radius: 999px;
  background: rgba(255, 238, 230, 0.92);
  mix-blend-mode: difference;
}
.kpt-switch small {
  font-weight: 600;
  font-size: 13px;
  opacity: 0.9;
}
.kpt-style {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.kpt-style span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(13, 6, 5, 0.6);
  font-size: 13.5px;
  font-weight: 600;
}
.kpt-style .ok .i {
  color: var(--ok);
}
.kpt-style .no {
  text-decoration: line-through;
  opacity: 0.75;
}
.kpt-style .no .i {
  color: #f87171;
}
@media (prefers-reduced-motion: no-preference) {
  .motion .rise.in .kpt-words > * {
    animation: kpt-type 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(0.2s + var(--i) * 0.35s);
  }
  .motion .rise.in .kpt-notes em i {
    animation: fv-grow 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: 0.6s;
    transform-origin: left;
  }
  .motion .rise.in .kpt-take.t2 {
    animation: kpt-take 4s cubic-bezier(0.5, 0, 0.2, 1) infinite;
  }
  .motion .rise.in .kpt-pill i {
    animation: kpt-switch 3.2s cubic-bezier(0.6, 0, 0.2, 1) infinite;
  }
  .motion .rise.in .kpt-style span {
    animation: kpt-type 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: calc(0.2s + var(--i) * 0.4s);
  }
  .motion .rise.in .kpt-wave i {
    animation: vx-level 0.9s ease-in-out calc(var(--i) * -61ms) infinite alternate;
  }
}
@keyframes kpt-type {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
  }
}
@keyframes kpt-take {
  0%,
  35% {
    transform: translate(14%, 30%);
    opacity: 0;
  }
  55%,
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes kpt-switch {
  0%,
  40% {
    left: 6px;
  }
  50%,
  90% {
    left: 50%;
  }
  100% {
    left: 6px;
  }
}
.kp-listen .kp-take {
  max-width: 560px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr);
}

/* The Sing page's hero: someone singing into their phone, the recording screen floating over it. */
.sg-hero {
  position: relative;
}
.sg-hero video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #120c0a;
}
.sg-float {
  position: absolute;
  right: clamp(16px, 4vw, 56px);
  top: 50%;
  width: min(30%, 280px);
  transform: translateY(-50%);
}
.sg-float .vx-phone {
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 20px 16px;
}
.sg-float .vx-time {
  font-size: 28px;
}
.sg-float .vx-meter {
  height: 42px;
}
@media (max-width: 700px) {
  .sg-float {
    display: none;
  }
}

/* A track with a cover: the picture under its play button, darkened so the icon reads. */
.play-btn.has-cover {
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  color: #fff;
  box-shadow: inset 0 0 0 100px rgba(12, 10, 8, 0.32);
}
.play-btn.has-cover:hover {
  box-shadow: inset 0 0 0 100px rgba(12, 10, 8, 0.15);
}
.pp-more {
  margin-top: -8px;
  text-align: center;
}

/* Inner pages' heroes (pricing, library, compare, contact, credits, legal), in the product pages'
   way: centred, the accent's light from above, the tag as a small kicker. */
.page-hero {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding-block: clamp(56px, 8vw, 112px) clamp(32px, 5vw, 64px);
}
.page-hero > .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.page-hero h1.fit-title {
  max-width: none;
}
.page-hero .lede {
  margin-inline: auto;
  max-width: 52ch;
}
.page-hero .tag {
  border: 0;
  background: none;
  padding: 0;
  font: 600 13px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.page-hero .tag::before {
  display: none;
}
.page-hero .stat-row,
.page-hero .cta-row,
.page-hero .chips {
  justify-content: center;
}
.page-hero > .hero-glow {
  inset: 0 0 auto;
  width: 100%;
  height: min(640px, 100%);
  background:
    radial-gradient(40% 60% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(30% 40% at 75% 10%, color-mix(in srgb, var(--kp-pink) 9%, transparent), transparent 70%);
  -webkit-mask-image: none;
  mask-image: none;
}
.page-hero > .hero-glow::after {
  display: none;
}

/* Library wall: the songs' covers in two rows drifting opposite ways; it stops under the pointer. */
.lib-wall {
  display: grid;
  gap: 14px;
  margin-top: clamp(40px, 6vw, 72px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lib-wall-track {
  display: flex;
  gap: 14px;
  width: max-content;
}
.lib-wall-song {
  position: relative;
  flex: none;
  width: clamp(110px, 11vw, 150px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
}
.lib-wall-song img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.lib-wall-song:hover img {
  transform: scale(1.06);
}
.lib-wall-song .hero-card-play {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  top: 50%;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lib-wall-song:hover .hero-card-play,
.lib-wall-song:focus-visible .hero-card-play,
.lib-wall-song[aria-pressed='true'] .hero-card-play {
  opacity: 1;
}
.lib-wall-song .i-pause,
.lib-wall-song[aria-pressed='true'] .i-play {
  display: none;
}
.lib-wall-song[aria-pressed='true'] .i-pause {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .lib-wall-track {
    animation: lib-drift 90s linear infinite;
  }
  .lib-wall-row.back .lib-wall-track {
    animation-direction: reverse;
  }
  .lib-wall:hover .lib-wall-track,
  .lib-wall:focus-within .lib-wall-track {
    animation-play-state: paused;
  }
}
@keyframes lib-drift {
  to {
    transform: translateX(calc(-50% - 7px));
  }
}

/* The home page's reel in the product pages' frame: rounded, no label bar (the steps say it). */
.hero-demo .reel {
  border-radius: clamp(18px, 2.4vw, 32px);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-demo .reel > .clip-head {
  display: none;
}