:root {
  --bg: #0A0A0B;
  --card: #121214;
  --line: #2C2C30;
  --text: #F5F5F7;
  --dim: #A1A1A6;
  --accent: #FA1581;
  --accent-hover: #EB1580;
  --accent-muted: #3A0E22;
  --on-accent: #000000;
  --disabled: #2C2C30;
  --on-disabled: #8E8E93;
  --code-bg: #161618;
  --badge-bg: #3A0E22;
  --badge-text: #FF7AB8;
  --focus: #F5F5F7;
  --success: #30D158;
  --danger: #FF453A;
  color-scheme: dark;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --type-display: 88px;
  --type-display-narrow: 36px;
  --type-display-fluid: 11vw;
  --type-title: 44px;
  --type-title-narrow: 32px;
  --type-headline: 20px;
  --type-body: 16px;
  --type-small: 14px;
  --type-caption: 12px;
  --lh-body: 1.55;
  --lh-tight: 1.15;
  --lh-display: 0.95;
  --weight-regular: 400;
  --weight-strong: 600;
  --weight-heavy: 800;
  --weight-light: 300;
  --tracking-display: -0.02em;
  --tracking-caps: 0.08em;
  --border: 1px;
  --focus-width: 2px;
  --focus-offset: 2px;
  --hover-ms: 160ms;
  --eq-ms: 1100ms;
  --lift: 3px;
  --glow-mix: 24%;
  --shadow-mix: 40%;
  --max-width: 1040px;
  --gutter: 24px;
  --gutter-narrow: 16px;
  --header-height: 68px;
  --card-min: 280px;
  --prose-max: 640px;
  --term-width: 160px;
  --mark-header: 34px;
  --mark-hero: 300px;
  --mark-hero-narrow: 132px;
  --mark-footer: 28px;
  --glow-size: 420px;
  --eq-height: 140px;
  --card-wave-height: 36px;
  --model-wave-height: 72px;
  --accent-bar: 3px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #FFFFFF;
    --card: #F5F5F7;
    --line: #C6C6C8;
    --text: #0A0A0B;
    --dim: #6E6E73;
    --accent: #B0155D;
    --accent-hover: #960F4E;
    --accent-muted: #FBE3EE;
    --on-accent: #FFFFFF;
    --disabled: #E5E5EA;
    --on-disabled: #6E6E73;
    --code-bg: #F2F2F7;
    --badge-bg: #FBE3EE;
    --badge-text: #960F4E;
    --focus: #0A0A0B;
    --success: #1E7B34;
    --danger: #D70015;
    color-scheme: light;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 0.2em; transition: color var(--hover-ms); }
a:hover { color: var(--text); }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
h1, h2, h3 { line-height: var(--lh-tight); font-weight: var(--weight-strong); }
h2 {
  display: flex; align-items: center; gap: var(--space-sm);
  font-size: var(--type-small); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--dim); margin: var(--space-xl) 0 var(--space-md);
}
h2::before { content: ""; width: var(--space-lg); height: var(--accent-bar); border-radius: var(--radius-pill); background: var(--accent); }
[hidden] { display: none !important; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.page { padding-bottom: var(--space-xxl); }

.skip {
  position: absolute; left: var(--space-sm); top: calc(-2 * var(--header-height));
  background: var(--card); color: var(--text); padding: var(--space-sm) var(--space-md);
  border: var(--border) solid var(--line); border-radius: var(--radius-md); z-index: 20;
}
.skip:focus { top: var(--space-sm); }

/* siteHeader */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: var(--border) solid var(--line);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md); min-height: var(--header-height);
}
.wordmark {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  color: var(--text); text-decoration: none; text-transform: uppercase; white-space: nowrap;
}
.wordmark:hover { color: var(--text); }
.wordmark .mark { width: var(--mark-header); height: var(--mark-header); transition: filter var(--hover-ms); }
.wordmark:hover .mark { filter: drop-shadow(0 0 var(--space-sm) color-mix(in srgb, var(--accent) var(--shadow-mix), transparent)); }
.wm-heavy { font-weight: var(--weight-heavy); }
.wm-light { font-weight: var(--weight-light); }
.site-header ul { list-style: none; display: flex; gap: var(--space-xs); margin: 0; padding: 0; }
.site-header nav a {
  display: block; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill);
  color: var(--dim); font-size: var(--type-small); font-weight: var(--weight-strong); text-decoration: none;
  transition: color var(--hover-ms), background-color var(--hover-ms);
}
.site-header nav a:hover { color: var(--text); background: color-mix(in srgb, var(--accent-muted) 60%, transparent); }
.site-header nav a[aria-current="page"] { color: var(--text); background: var(--accent-muted); }

/* hero */
.hero {
  position: relative; overflow: hidden; border-bottom: var(--border) solid var(--line);
  background: radial-gradient(circle var(--glow-size) at 80% 45%, color-mix(in srgb, var(--accent) var(--glow-mix), transparent), transparent);
}
.hero-inner {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-xl);
  padding-top: var(--space-xxl); padding-bottom: calc(var(--eq-height) + var(--space-lg));
}
.hero h1 {
  font-size: clamp(var(--type-display-narrow), var(--type-display-fluid), var(--type-display));
  line-height: var(--lh-display); letter-spacing: var(--tracking-display);
  text-transform: uppercase; margin: 0;
}
.hero h1 span { display: block; }
.tagline {
  font-size: var(--type-headline); color: var(--text); margin: var(--space-lg) 0 0;
  padding-left: var(--space-md); border-left: var(--accent-bar) solid var(--accent);
}
.hero-mark { width: var(--mark-hero); filter: drop-shadow(0 0 var(--space-xl) color-mix(in srgb, var(--accent) var(--shadow-mix), transparent)); }
.eq { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--eq-height); }
.wave-stop { stop-color: var(--accent); }
.wave-stop.edge { stop-opacity: 0; }

/* waves: bars shrink toward their centre line and back */
@keyframes eq { from { transform: scaleY(1); } to { transform: scaleY(0.25); } }
.wave { display: block; }
.wave rect {
  transform-box: fill-box; transform-origin: center;
  animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;
}
.eq { --wave-ms: var(--eq-ms); }
.eq rect { animation-name: eq; }
.wave rect:nth-of-type(7n+1) { animation-delay: calc(var(--wave-ms) * -0.00); animation-duration: calc(var(--wave-ms) * 0.70); }
.wave rect:nth-of-type(7n+2) { animation-delay: calc(var(--wave-ms) * -0.37); animation-duration: calc(var(--wave-ms) * 0.93); }
.wave rect:nth-of-type(7n+3) { animation-delay: calc(var(--wave-ms) * -0.74); animation-duration: calc(var(--wave-ms) * 1.16); }
.wave rect:nth-of-type(7n+4) { animation-delay: calc(var(--wave-ms) * -0.11); animation-duration: calc(var(--wave-ms) * 0.79); }
.wave rect:nth-of-type(7n+5) { animation-delay: calc(var(--wave-ms) * -0.48); animation-duration: calc(var(--wave-ms) * 1.02); }
.wave rect:nth-of-type(7n+6) { animation-delay: calc(var(--wave-ms) * -0.85); animation-duration: calc(var(--wave-ms) * 1.25); }
.wave rect:nth-of-type(7n+7) { animation-delay: calc(var(--wave-ms) * -0.22); animation-duration: calc(var(--wave-ms) * 0.88); }

/* modelCard */
.grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 100%), 1fr));
}
.card {
  position: relative; display: flex; flex-direction: column; gap: var(--space-sm);
  background: var(--card); border: var(--border) solid var(--line);
  border-radius: var(--radius-lg); padding: var(--space-lg);
  transition: border-color var(--hover-ms), transform var(--hover-ms), box-shadow var(--hover-ms);
}
.card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--accent-bar);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.card:hover, .card:focus-within {
  border-color: var(--accent); transform: translateY(calc(-1 * var(--lift)));
  box-shadow: 0 var(--space-md) var(--space-xl) calc(-1 * var(--space-md)) color-mix(in srgb, var(--accent) var(--shadow-mix), transparent);
}
.card-wave { --wave-ms: calc(var(--eq-ms) / 2); width: 100%; height: var(--card-wave-height); margin-bottom: var(--space-xs); }
.card-wave rect, .model-wave rect, .flat-wave rect { fill: var(--accent); }
.card:hover .card-wave rect { animation-name: eq; }
.card-head, .model-title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.card-name { font-size: var(--type-headline); margin: 0; }
.card-link { color: var(--text); text-decoration: none; }
.card-link:hover { color: var(--text); }
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); }
.card-link:focus-visible { outline: none; }
.card-link:focus-visible::after { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.card-summary {
  color: var(--dim); margin: 0; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.card-meta { color: var(--dim); font-family: var(--font-mono); font-size: var(--type-small); margin: 0; }
.card-foot {
  margin-top: auto; padding-top: var(--space-md); border-top: var(--border) solid var(--line);
  font-size: var(--type-small); font-weight: var(--weight-strong);
}
.card-hf { position: relative; z-index: 1; text-decoration: none; }
.card-hf::after { content: "\00a0\2197" / ""; }
.card-unreleased { color: var(--dim); }
.more { margin: var(--space-lg) 0 0; font-weight: var(--weight-strong); }
.more a { text-decoration: none; }
.more a::after { content: "\00a0\2192" / ""; }

.badge {
  background: var(--badge-bg); color: var(--badge-text); font-size: var(--type-caption);
  font-weight: var(--weight-strong); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-sm); line-height: var(--lh-tight);
}

/* pages */
.page-title {
  font-size: var(--type-title); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-display);
  margin: var(--space-xl) 0 var(--space-lg);
}
.prose, .lede { max-width: var(--prose-max); }
.prose { font-size: var(--type-headline); }
.empty { color: var(--dim); }

.back { margin: var(--space-xl) 0 0; font-size: var(--type-small); font-weight: var(--weight-strong); }
.back a { text-decoration: none; }
.back a::before { content: "\2190\00a0" / ""; }
.model-wave { --wave-ms: var(--eq-ms); width: 100%; height: var(--model-wave-height); margin: var(--space-lg) 0 var(--space-md); }
.model-wave rect { animation-name: eq; }
.model-header h1 {
  font-size: var(--type-title); font-weight: var(--weight-heavy); letter-spacing: var(--tracking-display); margin: 0;
}
.lede { font-size: var(--type-headline); color: var(--dim); margin: var(--space-sm) 0 0; }

.spec {
  display: grid; grid-template-columns: var(--term-width) 1fr;
  gap: var(--space-sm) var(--space-md); margin: var(--space-lg) 0; align-items: baseline;
  background: var(--card); border: var(--border) solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.spec dt { color: var(--dim); font-size: var(--type-caption); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.spec dd { margin: 0; }

.actions { margin: var(--space-lg) 0; }
.button {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg);
  font-weight: var(--weight-strong); text-decoration: none;
  transition: background-color var(--hover-ms), box-shadow var(--hover-ms);
}
.button:hover { background: var(--accent-hover); color: var(--on-accent); box-shadow: 0 0 var(--space-lg) color-mix(in srgb, var(--accent) var(--shadow-mix), transparent); }
.button[aria-disabled="true"] { background: var(--disabled); color: var(--on-disabled); cursor: default; box-shadow: none; }

.code {
  position: relative; background: var(--code-bg); border: var(--border) solid var(--line);
  border-radius: var(--radius-md);
}
.code pre {
  margin: 0; padding: var(--space-md); padding-right: calc(var(--space-md) * 6);
  overflow-x: auto; font-family: var(--font-mono); font-size: var(--type-small);
}
.code code::before { content: "$\00a0" / ""; color: var(--dim); }
.copy {
  position: absolute; top: var(--space-sm); right: var(--space-sm);
  font: inherit; font-size: var(--type-small); font-weight: var(--weight-strong); color: var(--text);
  background: var(--card); border: var(--border) solid var(--line);
  border-radius: var(--radius-pill); padding: var(--space-xs) var(--space-md); cursor: pointer;
  transition: border-color var(--hover-ms);
}
.copy:hover { border-color: var(--accent); }

/* ttsDemo, samplesList, performanceTable, licenseNotes (entries with a demo) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.demo { margin: var(--space-lg) 0; }
.demo-form {
  padding: var(--space-lg); background: var(--card);
  border: var(--border) solid var(--line); border-radius: var(--radius-lg);
}
.demo textarea {
  display: block; width: 100%; box-sizing: border-box; resize: vertical; min-height: calc(var(--type-body) * 5); field-sizing: content;
  font: inherit; font-size: var(--type-headline); line-height: var(--lh-body); color: var(--text);
  background: var(--code-bg); border: var(--border) solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-md);
}
.demo textarea:focus-visible { border-color: var(--accent); }
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-md); }
.demo .button { font: inherit; font-weight: var(--weight-strong); border: 0; cursor: pointer; min-width: calc(var(--space-xl) * 2.5); }
.demo .button:disabled { background: var(--disabled); color: var(--on-disabled); cursor: default; box-shadow: none; }
.demo-speed { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--type-small); color: var(--dim); }
.demo-speed input { accent-color: var(--accent); width: calc(var(--space-xl) * 3); }
.demo-speed output { font-family: var(--font-mono); color: var(--text); min-width: calc(var(--space-xl) + var(--space-sm)); }
.demo-status { margin: 0 0 0 auto; font-family: var(--font-mono); font-size: var(--type-small); color: var(--text); }
.demo[data-state="error"] .demo-status { color: var(--danger); }
.demo[data-state="empty"] .demo-status { color: var(--dim); }

.samples { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-sm); }
.samples li {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-md);
  padding: var(--space-sm) var(--space-md); background: var(--card);
  border: var(--border) solid var(--line); border-radius: var(--radius-md);
}
.samples p { margin: 0; }
.samples audio { height: calc(var(--space-xl) - var(--space-xs)); }

.table-wrap { overflow-x: auto; border: var(--border) solid var(--line); border-radius: var(--radius-md); }
.perf { border-collapse: collapse; width: 100%; font-size: var(--type-small); }
.perf th, .perf td { padding: var(--space-sm) var(--space-md); border-bottom: var(--border) solid var(--line); white-space: nowrap; text-align: left; }
.perf thead th { color: var(--dim); font-size: var(--type-caption); font-weight: var(--weight-strong); background: var(--card); white-space: normal; vertical-align: bottom; overflow-wrap: normal; word-break: normal; }
.perf th + th, .perf td { padding-left: var(--space-sm); }
.perf tbody th { font-weight: var(--weight-regular); }
.perf .num { text-align: right; font-variant-numeric: tabular-nums; }
.perf tr:last-child > * { border-bottom: 0; }
.perf .own > * { font-weight: var(--weight-strong); color: var(--text); background: var(--accent-muted); }
.note { font-size: var(--type-caption); color: var(--dim); max-width: var(--prose-max); margin: var(--space-sm) 0 0; }

.flat-wave { --wave-ms: var(--eq-ms); width: 100%; height: var(--model-wave-height); margin-top: var(--space-xl); }
.flat-wave rect { animation-name: eq; }

/* labHome, Coming soon: the hero alone (full bleed), centred in the viewport; the empty .page after it is hidden */
.soon {
  position: relative; min-height: calc(100vh - var(--space-xxl) * 2); min-height: calc(100svh - var(--space-xxl) * 2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: var(--space-xxl) 0 calc(var(--eq-height) + var(--space-xl));
  background: radial-gradient(circle var(--glow-size) at 50% 40%, color-mix(in srgb, var(--accent) var(--glow-mix), transparent), transparent);
}
.soon-mark { width: var(--mark-hero); filter: drop-shadow(0 0 var(--space-xl) color-mix(in srgb, var(--accent) var(--shadow-mix), transparent)); margin-bottom: var(--space-xl); }
.soon h1 {
  font-size: clamp(var(--type-display-narrow), var(--type-display-fluid), var(--type-display));
  line-height: var(--lh-display); letter-spacing: var(--tracking-display); text-transform: uppercase; margin: 0;
}
.soon .tagline { border-left: 0; padding-left: 0; color: var(--dim); }
.soon-eq { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: var(--eq-height); }
.soon + .page { display: none; }
body:has(.soon) .site-footer .wrap { justify-content: center; }

/* downloadsList */
.downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-md); }
.dl {
  padding: var(--space-lg); background: var(--card);
  border: var(--border) solid var(--line); border-radius: var(--radius-lg);
}
.dl-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.dl h3 { font-size: var(--type-headline); margin: 0; }
.dl p { margin: var(--space-sm) 0 0; }
.dl-install { color: var(--text); }
.dl-meta { color: var(--dim); font-size: var(--type-small); }
.dl-sha { font-size: var(--type-caption); color: var(--dim); }
.dl-sha span { text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-right: var(--space-xs); }
.dl-sha code { font-family: var(--font-mono); color: var(--text); overflow-wrap: anywhere; }

/* siteFooter */
.site-footer { position: relative; padding: var(--space-xl) 0; font-size: var(--type-caption); color: var(--dim); }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--border);
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.site-footer .wordmark { font-size: var(--type-small); }
.site-footer .mark { width: var(--mark-footer); height: var(--mark-footer); }
.site-footer p { margin: 0; }

@media (max-width: 639.98px) {
  .wrap { padding-left: var(--gutter-narrow); padding-right: var(--gutter-narrow); }
  .hero { background: radial-gradient(circle var(--glow-size) at 50% 20%, color-mix(in srgb, var(--accent) var(--glow-mix), transparent), transparent); }
  .hero-inner { grid-template-columns: 1fr; gap: var(--space-lg); padding-top: var(--space-xl); }
  .hero-art { order: -1; }
  .hero-mark, .soon-mark { width: var(--mark-hero-narrow); }
  .page-title, .model-header h1 { font-size: var(--type-title-narrow); }
  .grid { grid-template-columns: 1fr; }
  .spec { grid-template-columns: 1fr; gap: 0; }
  .spec dd { margin-bottom: var(--space-sm); }
  .demo-form { padding: var(--space-md); }
  .demo-status { margin-left: 0; flex-basis: 100%; }
  .samples li { grid-template-columns: 1fr; gap: var(--space-sm); }
  .samples audio { width: 100%; }
  .perf tbody th { white-space: normal; min-width: calc(var(--space-xl) * 3); }
}
@media (max-width: 479.98px) {
  .site-header .wm { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation: none !important; }
  .card:hover, .card:focus-within { transform: none; }
}