/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5
 * genre: modern-minimal · macrostructure: Catalogue · theme: AudioJS cool ink/paper · enrichment: blueprint dot grid
 * contrast: pass (46–50) · nav: N9 edge-minimal · footer: Ft2 inline rule · slop: pass (51–55)
 * honest: pass (56) · chrome: pass (57) · tokens: pass (58) · responsive: pass (59) · icons: pass (60)
 * mobile: pass (36, 59, 61–69)
 */

*, *::before, *::after { box-sizing: border-box; }

* {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin;
}

*::-webkit-scrollbar { width: var(--space-sm); height: var(--space-sm); }
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-corner { background: transparent; }

html,
body {
  margin: 0;
  overflow-x: clip;
}

html {
  scrollbar-gutter: stable;
  background: var(--color-paper);
  background-image: conic-gradient(from 270deg at var(--rule-heavy) var(--rule-heavy), var(--color-grid) 90deg, transparent 0);
  background-size: var(--space-md) var(--space-md);
  /* Columns align with the centered content edge; rows shift up one dot height
     so each dot row sits tangent above every 16px-aligned rect edge */
  background-position: 50% calc(-1 * var(--rule-heavy));
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body { min-width: 0; }

/* document cap: the standard's bold head rule, out of flow to keep the grid */
body::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: var(--space-2xs);
  background: var(--color-ink);
}
html.modal-open { overflow: hidden; }

button,
input,
select,
textarea { font: inherit; }

button,
summary { cursor: pointer; }

a {
  color: var(--color-ink);
  /* underlines carry the same translucency in every context, solid on hover */
  text-decoration-color: color-mix(in oklab, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
}

a:hover { text-decoration-color: currentColor; }

button:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: var(--rule-heavy) solid var(--color-focus);
  outline-offset: var(--space-2xs);
}

[hidden] { display: none !important; }

.skip-link {
  padding: var(--space-sm) var(--space-md);
  position: fixed;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: var(--z-toast);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-180%);
}

.skip-link:focus { transform: none; }

.corner-action {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-md) var(--page-gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.detail-actions .brand,
.corner-action .brand {
  width: 3rem;
  height: 3rem;
  display: inline-grid;
  place-items: center;
  color: var(--color-ink);
}

.corner-action .brand svg,
.detail-actions .brand svg {
  width: 2.25rem;
  height: 2.25rem;
}

.corner-action .brand:active,
.detail-actions .brand:active { transform: translateY(1px); }

.corner-action .icon-button,
.detail-actions .icon-button {
  border-color: transparent;
  background: transparent;
}

.corner-action nav {
  margin-inline-start: auto;
  display: flex;
  gap: var(--space-lg);
}

.corner-action nav a {
  color: var(--color-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.corner-links {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.version-link {
  min-height: 2.75rem;
  padding-inline: var(--space-xs);
  display: inline-flex;
  align-items: center;
  color: var(--color-muted);
  font-family: var(--font-code);
  font-size: var(--text-xs);
  text-decoration: none;
}


.icon-button {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
  color: var(--color-ink);
}

.icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-button:active { transform: translateY(1px); }
.icon-button:disabled,
.icon-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.icon-button[aria-busy="true"] { cursor: progress; }
.icon-button.is-error { border-color: var(--color-error); color: var(--color-error); }
.icon-button[data-state="copied"] { border-color: var(--color-success); color: var(--color-success); }

main {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.hero {
  padding-block: var(--space-4xl) var(--space-2xl);
  position: relative;
}

.hero-spec {
  align-self: stretch;
  display: flex;
  align-items: stretch;
  background: var(--color-white);
  color: var(--color-muted);
  font-family: var(--font-code);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.hero-spec > * {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--space-md);
  border-inline-end: var(--rule-hair) solid var(--color-rule);
}

.hero-spec > :last-child { border-inline-end: 0; }

.hero-spec a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.hero h1 {
  max-width: 20ch;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-display);
  letter-spacing: -0.045em;
  line-height: 0.98;
  overflow-wrap: anywhere;
}

.hero h1 strong,
.hero h1 span { display: block; }
.hero h1 strong { font-weight: 700; }

.hero h1 span {
  margin-block-start: var(--space-2xs);
  font-size: var(--text-display-sub);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hero-lede {
  max-width: 42rem;
  margin: var(--space-xl) 0 0;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 2rem;
}

/* Fluid display sizes hit their caps here; lock line boxes to the 16px grid */
@media (min-width: 75rem) {
  .hero h1 strong { line-height: 4rem; }
  .hero h1 span { margin-block-start: var(--space-xs); line-height: 3.5rem; }
}

.hero-lede strong {
  color: var(--color-ink);
  font-weight: 500;
}

/* icon-only engine selector, inline in the lede after "Any JS engine:" */
.hero-stack {
  margin-inline-start: var(--space-2xs);
  display: inline-flex;
  gap: var(--space-2xs);
  vertical-align: bottom;
}

.hero-stack button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
}

.hero-stack button[aria-pressed="true"] { background: var(--color-white); }

.hero-stack img {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

.hero-stack button[aria-pressed="true"] img { filter: none; }

.wpt-badge { display: inline-flex; }
.wpt-badge img { height: 1.25rem; display: block; }

.install-row {
  margin-block-start: var(--space-xl);
  position: relative;
  display: flex;
  align-items: stretch;
}

.install-command {
  width: fit-content;
  margin: 0;
  border-inline-end: 0;
  padding: calc(var(--space-sm) - var(--rule-hair)) var(--space-md);
  line-height: 1.5rem;
  border: var(--rule-hair) solid var(--color-rule-dark);
  background: var(--color-ink);
  color: var(--color-paper);
  font-family: var(--font-code);
  font-size: var(--text-sm);
}

.install-command code { font: inherit; }

@media (max-width: 64rem) {
  .install-row { flex-wrap: wrap; }

  .hero-spec {
    padding-block: var(--space-sm);
    white-space: normal;
  }
}

.hero-code {
  max-width: 48rem;
  margin-block-start: var(--space-2xl);
  position: relative;
  /* stays above the grid-stopper line that crosses behind its lower half */
  z-index: var(--z-base);
  border: var(--rule-hair) solid var(--color-rule-dark);
  background: var(--color-ink-2);
  color: var(--color-paper);
}

.hero-code .copy-icon {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-end: var(--space-xs);
  z-index: var(--z-raised);
}

pre {
  margin: 0;
  overflow: auto;
  font-family: var(--font-code);
  font-size: var(--text-sm);
  line-height: 1.65;
  tab-size: 2;
}

.hero-code pre {
  padding: calc(var(--space-xl) - var(--rule-hair)) var(--space-xl);
  line-height: 1.5rem;
}
pre code { font: inherit; }

.copy-icon {
  border: 0;
  background: none;
  color: var(--color-paper);
}

.copy-icon path,
.dialog-close path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.copy-icon .check-glyph { display: none; }
.copy-icon[data-state="copied"] .copy-glyph { display: none; }
.copy-icon[data-state="copied"] .check-glyph { display: block; }

/* The blueprint dots end where the white field begins, across the code
   block's lower part. The field runs white through the examples; questions
   return to paper. --grid-stop is snapped to the 16px dot lattice by site.js
   so the edge always lands on a grid row, whatever the content height. */
.examples {
  padding-block: var(--space-md) var(--space-4xl);
  position: relative;
  background: var(--color-white);
  box-shadow: 0 0 0 100vmax var(--color-white);
  clip-path: inset(calc(-1 * var(--grid-stop, 8rem)) -100vmax 0);
}

.section-heading {
  margin-block-end: var(--space-xl);
  display: grid;
  gap: var(--space-sm);
}

.section-heading h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: -0.035em;
  line-height: 3rem;
}

.section-heading p {
  max-width: var(--copy-max);
  margin: 0;
  color: var(--color-muted);
  line-height: 1.5rem;
}

.example-filters {
  margin-block-start: var(--space-xs);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.example-filters button {
  padding: var(--space-3xs) var(--space-sm);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.example-filters button[aria-pressed="true"] {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
}

.example-filters .filter-count {
  margin-inline-start: var(--space-2xs);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

.example-filters button[aria-pressed="true"] .filter-count { color: var(--color-muted-on-ink); }

.example-filters button:active { transform: translateY(1px); }



.example-groups {
  display: grid;
  gap: var(--space-xl);
}

.example-group h3 {
  margin: 0;
  padding-block: calc(var(--space-md) - var(--rule-hair));
  line-height: 2rem;
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-raised);
  border-block-end: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--text-lg);
  letter-spacing: -0.025em;
}

.example-grid {
  display: grid;
}

.example-entry {
  width: 100%;
  min-width: 0;
  padding: var(--space-sm) 0 calc(var(--space-sm) - var(--rule-hair));
  line-height: 1.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: var(--space-md);
  row-gap: var(--space-2xs);
  align-items: center;
  align-content: start;
  border: 0;
  border-block-end: var(--rule-hair) solid var(--color-rule);
  background: transparent;
  color: var(--color-ink);
  text-align: start;
  text-decoration: none;
}

.example-number {
  grid-area: 1 / 1;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.example-heading {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
}

.example-heading strong { font-size: var(--text-base); }

.example-tag {
  grid-column: 2;
  justify-self: start;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-xs);
  border: var(--rule-hair) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: var(--text-xs);
  line-height: 1.5;
  white-space: nowrap;
}

.example-arrow {
  width: 1.5rem;
  height: 1.5rem;
  grid-area: 1 / 3;
  align-self: center;
  justify-self: end;
  fill: none;
  stroke: var(--color-muted);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.example-description {
  grid-column: 2;
  min-width: 0;
  min-height: 3rem;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.example-entry:active { transform: translateY(1px); }
.example-entry:disabled,
.example-entry[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.example-entry[aria-busy="true"] { cursor: progress; }
.example-entry.is-error { color: var(--color-error); }
.example-entry[data-state="success"]::after { content: "✓"; color: var(--color-success); }

/* questions sit on plain paper: dot rows drift against the 64px separators */
.faq {
  padding-block: var(--space-2xl) var(--space-4xl);
  background: var(--color-paper);
  box-shadow: 0 0 0 100vmax var(--color-paper);
  clip-path: inset(0 -100vmax);
}

.faq .section-heading { margin-block: 0 var(--space-xl); }
.faq-list { border-block-start: var(--rule-heavy) solid var(--color-ink); }

.faq details { border-block-end: var(--rule-hair) solid var(--color-rule); }

.faq summary {
  min-height: calc(4rem - var(--rule-hair));
}

/* the list's heavy top rule is absorbed by the first row, so every divider
   below lands on the 16px dot grid */
.faq-list > details:first-child summary {
  min-height: calc(4rem - var(--rule-hair) - var(--rule-heavy));
}

.faq summary {
  padding-block: var(--space-md);
  line-height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  color: var(--color-ink);
  font-weight: 700;
  list-style: none;
  white-space: nowrap;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: none;
  background:
    linear-gradient(currentColor, currentColor) center / 100% var(--rule-hair) no-repeat,
    linear-gradient(currentColor, currentColor) center / var(--rule-hair) 100% no-repeat;
  color: var(--color-muted);
  transition: transform var(--dur-short) var(--ease-out);
}

.faq details[open] summary::after { transform: rotate(45deg); }

.faq-list { interpolate-size: allow-keywords; }

.faq details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size var(--dur-short) var(--ease-out), content-visibility var(--dur-short) allow-discrete;
}

.faq details[open]::details-content { block-size: auto; }

.faq details > div {
  max-width: 62rem;
  padding-block: 0 var(--space-xl);
}

.faq p { max-width: 68ch; margin: 0; }

.faq pre {
  max-width: 48rem;
  margin-block-start: var(--space-md);
  padding: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-dark);
  background: var(--color-ink-2);
  color: var(--color-paper);
}

.table-scroll {
  max-width: 100%;
  overflow: auto;
  border: var(--rule-hair) solid var(--color-rule);
}

table {
  width: 100%;
  min-width: 62rem;
  border-collapse: collapse;
  color: var(--color-body);
  font-size: var(--text-sm);
}

caption {
  padding: var(--space-sm) 0;
  caption-side: bottom;
  color: var(--color-muted);
  font-size: var(--text-xs);
  text-align: start;
}

th,
td {
  padding: var(--space-sm);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  text-align: start;
  vertical-align: top;
}

tbody tr:last-child th,
tbody tr:last-child td { border-block-end: 0; }

thead th {
  background: var(--color-paper-2);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 700;
}

table.bench {
  min-width: 0;
  width: auto;
  margin-block-start: var(--space-md);
}

table.bench td { font-variant-numeric: tabular-nums; }

tbody th { color: var(--color-ink); white-space: nowrap; }

.field-strips {
  display: block;
  width: 100%;
  height: 8rem;
  position: absolute;
  inset-inline-start: 0;
  z-index: -1;
  pointer-events: none;
}

.footer-strips {
  display: block;
  width: 100%;
  height: 8rem;
  background: var(--color-paper);
}

.site-footer {
  padding-block: var(--space-xl);
  background: var(--color-ink);
  color: var(--color-muted-on-ink);
  font-size: var(--text-sm);
}

.site-footer > p,
.site-footer .footer-inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.site-footer a { color: var(--color-paper); }

.site-footer p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.footer-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-lg) var(--space-xl);
}

.footer-seal {
  flex: none;
  color: var(--color-paper);
}

.footer-seal svg {
  width: 2rem;
  height: 2rem;
  display: block;
}

.footer-specs {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
}

.footer-side {
  margin-inline-start: auto;
  display: grid;
  gap: var(--space-2xs);
  justify-items: end;
  text-align: end;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-paper);
  font-weight: 500;
  text-decoration: none;
}

.footer-brand svg {
  width: 1.5rem;
  height: 1.5rem;
}

.site-footer .wpt-badge img { height: 1.25rem; display: block; }

.example-dialog {
  width: 100%;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(var(--space-md), env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right)) max(var(--space-2xs), env(safe-area-inset-bottom)) max(var(--space-md), env(safe-area-inset-left));
  position: fixed;
  inset: 0;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: var(--color-muted) transparent;
  scrollbar-width: auto;
  border: 0;
  background: transparent;
  color: var(--color-body);
}

/* shorter dialogs center vertically; taller ones scroll from the top */
.example-dialog[open] {
  display: flex;
  flex-direction: column;
}

.example-dialog::-webkit-scrollbar-thumb {
  border: var(--space-2xs) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-muted);
  background-clip: padding-box;
}

.example-dialog::backdrop { background: var(--color-backdrop); }
.example-dialog[open] .dialog-shell { animation: dialog-in var(--dur-short) var(--ease-out); }

@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: none; }
}

.dialog-shell {
  width: min(100%, var(--page-max));
  min-width: 0;
  margin: auto;
  overflow: clip;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-ink);
}

.dialog-head {
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule-dark);
}

.dialog-head h2 {
  margin: var(--space-xs) 0 0;
  color: var(--color-paper);
  font-size: clamp(var(--text-lg), 6vw, var(--text-2xl));
  letter-spacing: -0.035em;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.dialog-head p {
  max-width: 54rem;
  margin: var(--space-sm) 0 0;
  color: var(--color-muted-on-ink);
}

.dialog-close {
  align-self: start;
  border-color: transparent;
  background: transparent;
  color: var(--color-paper);
}

.dialog-close svg {
  width: 1.5rem;
  height: 1.5rem;
}

.detail-crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-family: var(--font-code);
  font-size: var(--text-xs);
}

.detail-crumbs a {
  color: inherit;
  text-decoration: none;
}

.detail-crumbs a:hover { text-decoration: underline; }

.dialog-body {
  min-width: 0;
  display: grid;
  align-items: stretch;
}

/* the source scrolls inside the modal instead of stretching it */
.example-dialog .code-output {
  max-height: min(60dvh, 32rem);
  overflow-y: auto;
}

.demo-panel,
.dialog-code {
  min-width: 0;
  background: var(--color-ink);
  color: var(--color-paper);
}

.demo-panel {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.demo-stage {
  padding: var(--space-md);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-raised);
  display: grid;
  background: var(--color-ink);
}

.demo-canvas-wrap { height: 8rem; }
.demo-canvas { width: 100%; height: 8rem; display: block; }

.demo-spectrogram-wrap {
  height: 7rem;
  margin-block-start: var(--space-sm);
  position: relative;
}

.demo-spectrogram { width: 100%; height: 7rem; display: block; }

.demo-spectrogram-wrap select {
  width: auto;
  field-sizing: content;
  padding-block: var(--space-3xs);
  padding-inline: var(--space-2xs);
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-end: var(--space-2xs);
  border: 0;
  background: transparent;
  color: var(--color-muted-on-ink);
  font-family: var(--font-code);
  font-size: var(--text-xs);
}

.demo-meter {
  margin-block-start: var(--space-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  color: var(--color-accent);
  font-family: var(--font-code);
  font-size: var(--text-xs);
}

.demo-meter-track { height: var(--space-xs); background: var(--color-rule-dark); }
.demo-meter-fill { width: 100%; height: 100%; background: var(--color-accent); transform: scaleX(0); transform-origin: left center; }

.demo-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-block-start: var(--rule-hair) solid var(--color-rule-dark);
}

.demo-controls {
  padding: var(--space-md);
  display: grid;
  gap: var(--space-md);
}

.demo-fields { display: grid; gap: var(--space-sm); }
.demo-extras { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.demo-extras:empty { display: none; }

.demo-runbar {
  margin-block-start: auto;
  padding: var(--space-md);
  position: sticky;
  inset-block-end: 0;
  z-index: var(--z-raised);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-dark);
  background: var(--color-ink);
}

.control-field {
  min-width: 0;
  display: grid;
  gap: var(--space-3xs);
  color: var(--color-paper-2);
  font-size: var(--text-xs);
  font-weight: 700;
}

.control-field > span {
  min-height: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
}

.demo-form select,
.demo-form input:not([type="range"]):not([type="file"]) {
  width: 100%;
  min-height: 2.75rem;
  padding-inline: var(--space-sm);
  border: var(--rule-hair) solid var(--color-rule-dark);
  border-radius: var(--radius-xs);
  outline: var(--rule-heavy) solid transparent;
  outline-offset: var(--space-3xs);
  background: var(--color-ink-2);
  color: var(--color-paper);
}

.demo-form input[type="range"] { width: 100%; min-height: 2.25rem; accent-color: var(--color-accent); }

/* Volume as a rising wedge: the filled share of the triangle is the level */
.demo-runbar input[type="range"] {
  width: 6rem;
  height: 1.25rem;
  min-height: 0;
  flex: none;
  appearance: none;
  background: linear-gradient(to right, var(--color-accent) var(--fill, 25%), var(--color-ink-3) 0);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  cursor: pointer;
}

.demo-runbar input[type="range"]::-webkit-slider-thumb { width: 1px; height: 1.25rem; appearance: none; background: transparent; }
.demo-runbar input[type="range"]::-moz-range-thumb { width: 1px; height: 1.25rem; border: 0; background: transparent; }

/* clip-path swallows outlines; focus shows on the unfilled part instead */
.demo-runbar input[type="range"]:focus-visible {
  outline: none;
  background: linear-gradient(to right, var(--color-accent) var(--fill, 25%), var(--color-focus) 0);
}

.demo-action,
.file-label {
  min-height: 2.75rem;
  padding-inline: var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--rule-hair) solid var(--color-paper);
  border-radius: var(--radius-xs);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.demo-action[data-state="running"] { background: var(--color-ink); color: var(--color-paper); }
.demo-action[aria-busy="true"] { cursor: progress; }
.demo-action:disabled { opacity: 0.5; cursor: not-allowed; }
.demo-action.is-error { border-color: var(--color-error); color: var(--color-error); }
.demo-action[data-state="success"] { border-color: var(--color-success); }
.demo-action:active { transform: translateY(1px); }

.file-label { position: relative; }
.file-label input { width: 1px; height: 1px; position: absolute; overflow: hidden; clip-path: inset(50%); }

.demo-run svg { width: 1.25rem; height: 1.25rem; display: none; }

.demo-run.is-iconic {
  width: 2.75rem;
  min-width: 2.75rem;
  padding-inline: 0;
  position: relative;
}

.demo-run.is-iconic span { width: 1px; height: 1px; position: absolute; overflow: hidden; clip-path: inset(50%); }
.demo-run.is-iconic .play-glyph { display: block; }
.demo-run.is-iconic[data-state="running"] .play-glyph { display: none; }
.demo-run.is-iconic[data-state="running"] .pause-glyph { display: block; }

.demo-help { min-width: 0; min-height: 1.5rem; margin: 0; flex: 1; color: var(--color-muted-on-ink); font-size: var(--text-xs); }
.demo-results {
  padding: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-dark);
}
.demo-results:empty { display: none; }
.demo-results audio { width: min(100%, 28rem); min-height: 2.75rem; }

.dialog-code { border-block-start: var(--rule-hair) solid var(--color-rule-dark); }
.code-output { padding: var(--space-md); overflow-x: auto; overflow-y: visible; }

.code-tabs {
  padding: var(--space-md) var(--space-md) 0;
  display: flex;
  gap: var(--space-xs);
}

.code-tab {
  min-height: 2rem;
  padding-inline: var(--space-md);
  border: var(--rule-hair) solid var(--color-rule-dark);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-muted-on-ink);
  font-family: var(--font-code);
  font-size: var(--text-xs);
}

.code-tab[aria-pressed="true"] {
  border-color: var(--color-paper);
  background: var(--color-paper);
  color: var(--color-ink);
}

.code-tab:active { transform: translateY(1px); }

.code-pane { padding: var(--space-md); }

.cli-command {
  position: relative;
  border: var(--rule-hair) solid var(--color-rule-dark);
  background: var(--color-ink-2);
}

.cli-command pre { padding: var(--space-md); padding-inline-end: 3.75rem; }

.cli-command .copy-icon {
  position: absolute;
  inset-block-start: var(--space-2xs);
  inset-inline-end: var(--space-2xs);
}

.cli-options {
  margin: var(--space-md) 0 0;
  display: grid;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}

.cli-options > div { display: grid; gap: var(--space-3xs); }
.cli-options dt { font-family: var(--font-code); font-size: var(--text-xs); color: var(--color-paper); }
.cli-options dd { margin: 0; color: var(--color-muted-on-ink); }

::highlight(comment) { color: var(--syntax-comment); }
::highlight(keyword) { color: var(--syntax-keyword); }
::highlight(operator) { color: var(--syntax-operator); }
::highlight(string) { color: var(--syntax-string); }
::highlight(constant) { color: var(--syntax-constant); }
::highlight(function) { color: var(--syntax-function); }
::highlight(type) { color: var(--syntax-type); }
::highlight(variable) { color: var(--syntax-variable); }
::highlight(property) { color: var(--syntax-property); }
::highlight(tag) { color: var(--syntax-tag); }
::highlight(selector) { color: var(--syntax-selector); }
::highlight(inserted) { color: var(--syntax-inserted); }
::highlight(deleted) { color: var(--syntax-deleted); }

.detail-actions {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-md) var(--page-gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.detail-actions > a:first-child {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  white-space: nowrap;
}

.example-detail {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-3xl) var(--page-gutter) var(--space-4xl);
}

.detail-head { max-width: 54rem; }
.detail-head h1 { margin: var(--space-sm) 0 0; color: var(--color-ink); font-size: var(--text-display-s); letter-spacing: -0.045em; line-height: 1; }
.detail-head > p:last-child { max-width: 54ch; margin: var(--space-lg) 0 0; font-size: var(--text-md); }

.detail-facts {
  margin: var(--space-2xl) 0 0;
  display: grid;
  border-block-start: var(--rule-heavy) solid var(--color-ink);
}

.detail-facts > div { padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); }
.detail-facts dt { color: var(--color-muted); font-family: var(--font-code); font-size: var(--text-xs); }
.detail-facts dd { margin: var(--space-xs) 0 0; color: var(--color-ink); }

.warning,
.notice { margin-block-start: var(--space-lg); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); }
.warning { border-color: var(--color-warning); }
.warning strong,
.notice strong { color: var(--color-ink); }

.detail-grid {
  min-width: 0;
  margin-block-start: var(--space-2xl);
  display: grid;
}

.detail-seo {
  max-width: 68ch;
  margin: var(--space-2xl) 0 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.route-fallback,
.guide-content,
.catalog-main,
.example-main {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding: var(--space-3xl) var(--page-gutter);
}

.guide-section { padding-block: var(--space-xl); border-block-end: var(--rule-hair) solid var(--color-rule); }
.guide-section pre { margin-block: var(--space-lg); padding: var(--space-md); background: var(--color-ink); color: var(--color-paper); }

@media (hover: hover) and (pointer: fine) {
  .icon-button,
  .example-entry,
  .demo-action,
  .file-label {
    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  }
  .icon-button:hover { background: var(--color-paper-2); }
  .copy-icon:hover,
  .dialog-close:hover { background: var(--color-ink-3); }
  .hero-stack button { transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
  .hero-stack button:not([aria-pressed="true"]):hover { background: var(--color-paper-2); color: var(--color-ink); }
  .hero-stack button img { transition: filter var(--dur-short) var(--ease-out); }
  .hero-stack button:hover img { filter: none; }
  .example-filters button { transition: background-color var(--dur-short) var(--ease-out); }
  .example-filters button:not([aria-pressed="true"]):hover { background: var(--color-paper-2); }
  .wpt-badge { transition: opacity var(--dur-short) var(--ease-out); }
  .wpt-badge:hover { opacity: 0.85; }
  .corner-action nav a { transition: color var(--dur-short) var(--ease-out); }
  .corner-action nav a:hover { color: var(--color-ink); }
  .code-tab { transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
  .code-tab:not([aria-pressed="true"]):hover { background: var(--color-ink-3); color: var(--color-paper); }
  .corner-action .brand,
  .detail-actions .brand { transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
  .corner-action .brand:hover,
  .detail-actions .brand:hover { color: var(--color-ink-3); }
  .example-arrow { transition: opacity var(--dur-short) var(--ease-out), stroke var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
  .example-entry:hover .example-arrow { opacity: 1; stroke: var(--color-ink); transform: translate(2px, -2px); }
  .demo-action:hover,
  .file-label:hover { transform: translateY(-1px); }
}

@media (min-width: 40rem) {
  .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .detail-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detail-facts > div { padding-inline: var(--space-md); border-inline-end: var(--rule-hair) solid var(--color-rule); }
  .detail-facts > div:first-child { padding-inline-start: 0; }
  .detail-facts > div:last-child { padding-inline-end: 0; border-inline-end: 0; }
  .demo-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .dialog-body,
  .detail-grid { grid-template-columns: minmax(22rem, 1fr) minmax(0, 1fr); align-items: stretch; background: var(--color-ink); }
  .dialog-code {
    border-block-start: 0;
    border-inline-start: var(--rule-hair) solid var(--color-rule-dark);
  }
  /* The whole demo column pins while the source column scrolls; long control
     stacks scroll inside the panel and the runbar keeps its own bottom pin,
     so the play control is visible before, during, and after the pin */
  .demo-panel {
    min-height: 0;
    max-height: 100dvh;
    position: sticky;
    inset-block-start: 0;
    align-self: start;
  }
  .example-dialog .demo-panel { max-height: calc(100dvh - var(--space-xl)); }
  .demo-stage { position: static; }
  .demo-form { min-height: 0; }
  .demo-controls { min-height: 0; overflow-y: auto; }
}

@media (max-height: 40rem) {
  .demo-stage { padding: var(--space-sm); }
  .demo-canvas-wrap,
  .demo-canvas { height: 5rem; }
  .demo-spectrogram-wrap,
  .demo-spectrogram { height: 4rem; }
}

@media (pointer: coarse) {
  .icon-button,
  .example-entry,
  .demo-action,
  .file-label,
  .faq summary { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 150ms !important;
  }
  .example-dialog[open] .dialog-shell { animation-name: dialog-fade; }
  @keyframes dialog-fade { from { opacity: 0; } to { opacity: 1; } }
}

@media (prefers-contrast: more) {
  :root { --rule-hair: 2px; }
}