/* web-audio-api: one sheet for the homepage and the example pages.
   Neutral paper and ink, Inter and JetBrains Mono, every colour from tokens.css. */

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

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

html {
  background: var(--color-paper);
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

body { min-width: 0; }
html.modal-open { overflow: hidden; }

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

button,
summary { cursor: pointer; }

/* a second tap is a second tap, not a zoom */
a,
button,
summary,
label,
input,
select { touch-action: manipulation; }

a {
  color: var(--color-ink);
  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; }

/* blueprint dots, confined to the two illustration panels */
.dots {
  background-image: radial-gradient(circle, var(--dot, var(--color-grid)) 1px, transparent 1.2px);
  background-size: var(--space-md) var(--space-md);
  background-position: center;
}

.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; }

/* header: seal and wordmark, section nav, version, GitHub */
/* the menu rides a band of white stripes dissolving into the paper: the footer's band, inverted */
.corner-action {
  position: relative;
  isolation: isolate;
}

.header-strips {
  background: linear-gradient(var(--color-white) 2px, transparent 2px);
  position: absolute;
  inset: calc(-1 * var(--space-xs)) 0 auto;
  z-index: -1;
  width: 100%;
  height: calc(100% + var(--space-md));
  display: block;
}

.header-inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--space-md) var(--page-gutter) var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.brand {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.brand svg {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

.brand:active { transform: translateY(1px); }

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

.corner-action nav a {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  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); }

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

main { width: 100%; }

main > *,
.examples > *,
.faq > * {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* the fields and the bands between them span the window */
.examples,
.faq {
  max-width: none;
  padding-inline: 0;
}

/* hero: 20 columns; intro 9, art 11, install 12, code 12 + graph 8 */
.hero {
  padding-block: var(--space-3xl) var(--space-2xl);
  display: grid;
  grid-template-columns: minmax(0, 9fr) minmax(0, 3fr) minmax(0, 8fr);
  row-gap: var(--space-xl);
  align-items: center;
}

.hero-intro {
  grid-column: 1;
  padding-inline-end: var(--space-xl);
}

/* the graph hero.js connects, over the dot grid */
.hero-art {
  grid-column: 2 / 4;
  grid-row: 1;
  align-self: stretch;
  position: relative;
  padding: var(--space-lg);
  display: grid;
  place-items: center;
  --graph-box: var(--color-raise);
  --graph-frame: color-mix(in oklab, var(--color-ink) 2%, transparent);
  --graph-sheen: 0.9;
  --graph-text: var(--color-body);
  --graph-sub: var(--color-muted);
}

/* the dot field carries on a few units behind the code below it, taking no room from the layout */
.hero-art::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(-1 * (var(--space-4xl) + var(--space-2xl)));
  z-index: -1;
  background-image: radial-gradient(circle, var(--dot, var(--color-grid)) 1px, transparent 1.2px);
  background-size: var(--space-md) var(--space-md);
  background-position: center;
}

.graph-scroll {
  width: 100%;
  max-width: 28rem;
}

.hero-art .graph {
  width: 100%;
  height: auto;
  display: block;
}

/* hero.js rendered, beside its code: envelopes over time, then its spectrum, each with its axis */
.hero-signal {
  --signal-pad: var(--space-lg);
  padding: var(--space-xl) var(--signal-pad) var(--space-sm);
  display: flex;
  flex-direction: column;
  border-inline-start: var(--rule-hair) solid var(--color-rule-dark);
  background-color: var(--color-ink);
}

.art-row {
  display: flex;
  justify-content: space-between;
  color: var(--color-muted-on-ink);
  font-family: var(--font-code);
  font-size: var(--text-xs);
  line-height: 1.5rem;
}

.art-end { margin-inline-start: auto; }

/* playback closes the panel under the code and its render, its rule running the panel's full width */
.hero-code > .demo-runbar {
  grid-column: 1 / -1;
  padding-block: var(--space-sm);
  padding-inline: var(--space-xl) var(--space-sm);
  justify-content: flex-start;
  border-block-start: var(--rule-hair) solid var(--color-rule-dark);
}

/* the first row labels the wave from inside it, so the wave starts at the panel's top edge */
.hero-signal > .art-row:first-child {
  margin-block-end: calc(-1 * var(--space-lg));
  position: relative;
  z-index: var(--z-base);
  pointer-events: none;
}

/* the panel is ruled in the cell the graph's dots keep, the tiling started at the content corner so the
   plots sit on whole cells whatever padding the panel carries */
.hero-signal,
.demo-panel {
  background-image:
    repeating-linear-gradient(to right, var(--color-plot-grid) 0 var(--rule-hair), transparent var(--rule-hair) var(--space-md)),
    repeating-linear-gradient(to bottom, var(--color-plot-grid) 0 var(--rule-hair), transparent var(--rule-hair) var(--space-md));
}

/* the two plots share whatever height the code beside them asks for */
.hero-signal .hero-wave,
.hero-signal .hero-spectrum { flex: 1; min-height: 0; }

.hero-wave,
.hero-spectrum {
  width: 100%;
  height: auto;
  display: block;
}

.hero-wave path,
.hero-spectrum path {
  fill: none;
  stroke: var(--color-paper);
  stroke-width: 2;
}

.hero-wave .wave-peak { stroke: color-mix(in oklab, var(--color-paper) 38%, transparent); }
.hero-spectrum { margin-block-start: var(--space-2xs); }

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

.hero h1 {
  max-width: 20ch;
  margin: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

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

.hero h1 span {
  /* the second phrase wraps rather than run off the column, and breaks evenly when it does */
  white-space: normal;
  text-wrap: balance;
  margin-block-start: var(--space-2xs);
  color: var(--color-muted);
  font-size: var(--text-display-sub);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

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

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

/* the jobs under the lede: an en dash at the paragraph's edge, the words hanging off it */
.hero-intro ul {
  max-width: 34rem;
  margin: var(--space-sm) 0 0;
  padding: 0 0 0 var(--space-xs);
  list-style: none;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.6;
}

.hero-intro li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
}

.hero-intro li::before { content: "\2013"; }

/* verified engines */
.hero-stack {
  margin-block-start: var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

/* every runtime in the table wears its own mark */
.runtime-mark {
  width: 1.25rem;
  height: 1.25rem;
  margin-inline-end: var(--space-xs);
  vertical-align: -0.3em;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

.hero-stack button {
  min-height: 2.75rem;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-body);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

.hero-stack > button:not(.is-secondary) { margin-inline-end: var(--space-xs); }

.runtime-secondary { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.hero-stack .is-secondary {
  min-width: 2rem;
  gap: 0;
  font-size: 0;
  justify-content: center;
}

.hero-stack img,
.runtime-mark {
  border-radius: var(--radius-xs);
}

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

/* every runtime says what is verified there: a tip under the mark on hover and focus, pinned by a click or
   tap, dismissed by Escape or a press elsewhere; a popover, so nothing clips it. Browsers without popovers
   keep the tip hidden. */
.hero-stack button { cursor: help; }

.runtime-tip { display: none; }

.runtime-tip:popover-open {
  display: block;
  position: absolute;
  inset: auto;
  max-width: min(22rem, 100% - 2rem);
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 0 8px 24px var(--color-shadow);
}

.hero-stack .is-compiler img { filter: none; }

.install-row {
  grid-column: 1 / 3;
  align-self: end;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-xs), 2vw, var(--space-lg));
  font-family: var(--font-code);
  font-size: var(--text-sm);
}

.install-command {
  min-height: 3.5rem;
  margin: 0;
  padding-inline: clamp(var(--space-xs), 3vw, var(--space-lg));
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-paper);
  white-space: nowrap;
}

.install-command .prompt { color: var(--color-muted-on-ink); }
.install-command code { font: inherit; }

.hero-spec {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: clamp(var(--space-sm), 2vw, var(--space-lg));
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  white-space: nowrap;
}

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

.hero-spec a:hover { color: var(--color-ink); }

/* A project test result, not a third-party certification mark. */
.hero-spec .wpt-seal {
  position: relative;
  display: inline-flex;
  gap: 0.25em;
  padding: 0.35em 0.6em;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-ink);
}
.wpt-seal strong { font-weight: 600; }
.package-size { position: relative; }
.wpt-tip,
.size-tip {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  z-index: var(--z-raised);
  width: 15rem;
  padding: var(--space-sm);
  border-radius: var(--radius-xs);
  background: var(--color-ink);
  color: var(--color-paper);
  line-height: 1.5;
  text-align: start;
  white-space: normal;
  display: none;
}
.size-tip {
  inset-block-start: auto;
  inset-block-end: 100%;
  width: min(15rem, 60vw);
  white-space: pre-line;
}
.wpt-seal:hover .wpt-tip,
.wpt-seal:focus .wpt-tip,
.package-size:hover .size-tip,
.package-size:focus-within .size-tip { display: block; }

.hero-code {
  grid-column: 1 / 4;
  margin-block-start: calc(-1 * var(--space-xs));
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  overflow: clip;
  border: var(--rule-hair) solid var(--color-rule-dark);
  border-radius: var(--radius-lg);
  background: var(--color-ink-2);
  color: var(--color-paper);
}

.hero-demo-note {
  grid-column: 3;
  align-self: end;
  justify-self: end;
  margin: 0;
  margin-inline-end: var(--space-md);
  color: var(--color-muted);
  font-size: var(--text-xs);
  max-width: 28rem;
  text-align: end;
}
.hero-engine {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-muted);
  font: 500 var(--text-xs) var(--font-body);
  cursor: pointer;
  vertical-align: bottom;
  white-space: nowrap;
}
.engine-track {
  position: relative;
  width: 3rem;
  height: 1.75rem;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
  box-shadow: inset 0 var(--rule-hair) var(--space-2xs) var(--color-shadow);
}
.hero-engine .engine-thumb {
  position: absolute;
  inset-block: var(--space-2xs);
  inset-inline-start: var(--space-2xs);
  width: calc(50% - var(--space-2xs));
  border-radius: inherit;
  background: var(--color-white);
  box-shadow: 0 var(--rule-hair) var(--space-2xs) var(--color-shadow);
}
.hero-engine[aria-checked="true"] .engine-thumb { transform: translateX(100%); }
.hero-engine[aria-checked="false"] > :first-child,
.hero-engine[aria-checked="true"] > :last-child { color: var(--color-ink); }
.hero-engine:hover .engine-track { border-color: var(--color-muted); }
.hero-engine:active .engine-thumb { background: var(--color-paper); }
.hero-engine:focus-visible { outline: var(--rule-heavy) solid var(--color-focus); outline-offset: var(--space-2xs); }
@media (max-width: 22rem) {
  .hero-spec .wpt-seal { padding-inline: 0.4em; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-engine .engine-thumb { transition: transform var(--dur-short) var(--ease-out); }
}
.hero-play-info {
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-muted-on-ink);
  font-size: var(--text-xs);
  line-height: 1.5;
}
.hero-play-status,
.hero-render-time {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.hero-play-status:empty,
.hero-play-status:not(:empty) + .hero-render-time { display: none; }
.hero-render-time { font-variant-numeric: tabular-nums; }

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

.hero-code pre {
  min-width: 0;
  padding: var(--space-xl);
  overflow-x: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-lg);
  line-height: 1.5rem;
}

.hero-code .lines {
  color: var(--color-ink-3);
  text-align: end;
  user-select: none;
}

pre code { font: inherit; }

/* inline code carries the code face at seven eighths, so it lands on the same steps as the text around it
   rather than on the browser's own monospace default */
:not(pre) > code {
  font-family: var(--font-code);
  font-size: 0.875em;
}

/* a recorded graph: cards for nodes, blue dashes for connections; the panel sets the surface.
   Light from above: a dimmed face, a whiter edge inside, a tight contact shadow, a wide faint one */
.graph { display: block; }

.graph .card {
  fill: var(--graph-box, var(--color-ink-2));
  stroke: var(--graph-frame, color-mix(in oklab, var(--color-paper) 5%, transparent));
}

.graph .sheen {
  fill: none;
  stroke: var(--color-white);
  stroke-opacity: var(--graph-sheen, 0.06);
}

.graph .shadow-near { flood-color: var(--color-shadow); flood-opacity: 0.85; }
.graph .shadow-far { flood-color: var(--color-shadow); flood-opacity: 0.32; }

.graph text {
  fill: var(--graph-text, var(--color-paper));
  font: 500 11px var(--font-code);
  text-anchor: middle;
}

.graph .sub {
  fill: var(--graph-sub, var(--color-muted-on-ink));
  font-weight: 400;
}

.graph .edge {
  fill: none;
  stroke: var(--color-wire);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  stroke-linecap: round;
}

.graph .param { stroke-dasharray: 1.5 3; }
.graph marker path { fill: var(--color-wire); }

.graph .edge-label {
  fill: var(--color-wire);
  font-weight: 400;
  text-anchor: start;
}


.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; }

/* catalogue: a white field the band above dissolves the paper into; below, the questions'
   own band hands the white back */
.examples { padding-block: var(--space-lg) var(--space-2xl); }

/* the homepage's few sit on a white field the band above them dissolves the paper into; the
   catalogue page keeps the paper, and the questions below break straight back to it */
.examples.is-field { background: var(--color-white); }

.field-strips {
  margin-block-start: calc(-1 * (var(--space-2xl) + var(--space-xl)));
  display: block;
  width: 100%;
  max-width: none;
  height: 6rem;
  padding-inline: 0;
  background: linear-gradient(transparent calc(100% - 2px), var(--color-white) 0);
}

/* the field hands its white back to the paper the way the paper offered it */
.faq-strips {
  margin-block-start: 0;
  background: linear-gradient(var(--color-white) 2px, transparent 2px);
}

.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-3xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

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

/* one pill everywhere: a hairline in the text's colour, xs type, one height; pressed inverts */
.example-tag,
.example-filters button {
  min-height: 1.5rem;
  padding: 0 var(--space-sm);
  display: inline-flex;
  align-items: center;
  border: var(--rule-hair) solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--text-xs);
  line-height: 1;
}

.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);
  font-variant-numeric: tabular-nums;
}

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

/* the heading carries the way to the rest of them, wrapping under the title when it must */
.examples .section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
}

.examples .section-heading h2 { overflow-wrap: normal; }

.example-all {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* the featured few are a selection, not a numbered list: each entry opens with its title */
.is-featured .example-entry { grid-template-columns: minmax(0, 1fr) 6rem; }
.is-featured .example-heading { grid-area: 1 / 1; }
.is-featured .example-description { grid-area: 2 / 1; }
.is-featured .example-tag { grid-area: 3 / 1; }
.is-featured .example-thumb { grid-area: 1 / 2 / 4 / 3; }

/* the featured few close without a rule beneath the last row */
.example-groups > .example-grid > :last-child { border-block-end: 0; }

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

.example-group h3 {
  margin: 0;
  padding-block: var(--space-md) var(--space-sm);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-raised);
  border-block-end: var(--rule-heavy) solid var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.example-grid { display: grid; }

/* number, then the words; the example's own render at the right */
.example-entry {
  min-width: 0;
  padding-block: var(--space-lg);
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 6rem;
  /* the last row takes whatever height the spanning render adds, so title and description stay close */
  grid-template-rows: auto auto 1fr;
  column-gap: var(--space-md);
  row-gap: var(--space-2xs);
  align-items: start;
  border-block-end: var(--rule-hair) solid var(--color-rule);
  color: var(--color-ink);
  text-decoration: none;
}

.example-number {
  grid-area: 1 / 1;
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.5rem;
}

/* one square, one lattice, one stroke: a unit of the render is a pixel */
.example-thumb {
  grid-area: 1 / 3 / 4 / 4;
  width: 6rem;
  height: 6rem;
  align-self: center;
  justify-self: end;
  color: var(--color-ink-3);
}

.example-thumb path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.example-heading {
  grid-area: 1 / 2;
  min-width: 0;
  line-height: 1.5rem;
}

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

.example-arrow { display: none; }

.example-description {
  grid-area: 2 / 2;
  min-width: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.example-tag {
  grid-area: 3 / 2;
  justify-self: start;
  margin-block-start: var(--space-2xs);
}

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

/* questions: the field's white dissolves back into the paper on the way in, and the paper
   runs a little after them before the footer's band takes it to ink */
.faq { padding-block: var(--space-xl) var(--space-2xl); }

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

.faq summary {
  min-height: 4rem;
  padding-block: var(--space-md);
  padding-inline-end: var(--space-2xs);
  line-height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  list-style: none;
  white-space: normal;
}

.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; &:first-of-type { margin-block-start:  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);
  border-radius: var(--radius-lg);
  background: var(--color-ink-2);
  color: var(--color-paper);
}

/* the comparison scrolls sideways on a transparent track; a thin ink thumb shows as it moves, as the code panes' paper one does */
.table-scroll {
  max-width: 100%;
  overflow: auto;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--color-ink) 35%, transparent) transparent;
}

/* formats by family: a term column and its list */
.format-list {
  margin: var(--space-md) 0 0;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-md);
}

.format-list dt { color: var(--color-ink); font-weight: 600; }
.format-list dd { margin: 0; }

.table-note, .faq p.table-note {
  margin: var(--space-md) 0 0;
  color: var(--color-muted);
  font-size: var(--text-xs);
}

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

caption {
  padding: var(--space-sm);
  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;
  overflow-wrap: anywhere;
}

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;
}

/* Runtime marks and names remain a single label; the table owns the overflow. */
.table-scroll tbody th { white-space: nowrap; overflow-wrap: normal; }
.table-scroll table { table-layout: auto; }
.table-scroll thead th:first-child { min-width: 10rem; }

/* a framed table keeps readable columns and scrolls on phones; the alternatives ask for more */
.table-scroll table { min-width: 36rem; }
.comparison table { min-width: 62rem; }

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

table.bench td { font-variant-numeric: tabular-nums; }
tbody th { color: var(--color-ink); }

/* footer: the stripe band dissolves paper into ink */
.footer-strips {
  display: block;
  width: 100%;
  height: 6rem;
  margin-block-end: -1px;
  background: linear-gradient(var(--color-paper) calc(100% - 2px), var(--color-ink) 0);
}

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

.footer-inner {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg) var(--space-xl);
}

/* project at the left; authors, licence and dedication at the right */
.footer-left {
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
}

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

.footer-specs {
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
  justify-items: end;
  text-align: end;
}

.footer-specs a { color: var(--color-paper); }
.footer-license { display: inline-flex; align-items: center; gap: var(--space-sm); }

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

.footer-brand svg {
  width: 1.25rem;
  height: 1.25rem;
  align-self: center;
}

/* example modal, carried from site.css */
.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);
}

.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;
  display: flex;
  flex-direction: column;
  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;
}

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

/* the source takes the modal's remaining height and scrolls inside it, scrollbar in view */
.dialog-code {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.dialog-code .code-output,
.dialog-code .cli-pane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

/* panes that scroll do so on a transparent track; a thin thumb shows as it moves */
.graph-scroll,
.hero-code pre,
.code-output,
.cli-pane,
.graph-pane,
.cli-command pre {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--color-paper) 35%, transparent) transparent;
}

/* the graph at its own size or pinched larger, scrolling inside the modal */
.graph-pane {
  --dot: var(--color-grid-on-ink);
  min-height: 0;
  flex: 1;
  padding: 0 var(--space-md) var(--space-md);
  overflow: auto;
}

.graph-pane .graph {
  height: auto;
  margin-block-start: var(--space-md);
}

.graph-note {
  margin: var(--space-md) 0 0;
  color: var(--color-muted-on-ink);
  font-size: var(--text-sm);
}

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

.demo-panel {
  display: flex;
  flex-direction: column;
}

.demo-stage {
  flex: 1;
  min-height: 17rem;
  padding: var(--space-md);
  display: grid;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
}

.demo-canvas-wrap { min-height: 0; position: relative; }
/* Backing-store dimensions must not participate in grid track sizing. */
.demo-canvas, .demo-spectrogram { position: absolute; inset: 0; }
.demo-canvas { width: 100%; height: 100%; display: block; }

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

.demo-spectrogram { width: 100%; height: 100%; 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-end: 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);
}

/* the meter leads the footer: a bar of fixed length, its reading in a column of its own;
   nothing in it moves when the text does */
.demo-meter {
  /* the bar gives way before the reading does when the footer runs out of room */
  flex: 0 1 12rem;
  min-width: 0;
  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 > span {
  min-width: 8ch;
  overflow: hidden;
  text-align: end;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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: none;
  background: var(--color-ink);
  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 {
  --fold: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-2xl);
}

.control-field { grid-column: span 2; }
.control-field:has(> :is(select, input:not([type="range"]))) { grid-column: span var(--fold); }
.demo-extras { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.demo-extras:empty { display: none; }

/* the playback row and the tab row keep one height */
.dialog-shell,
.example-detail { --toolbar: 3.5rem; }

/* the playback closes the stage under the demo and the source, riding the screen's foot until the stage ends */
.dialog-foot {
  grid-column: 1 / -1;
  position: sticky;
  inset-block-end: 0;
  z-index: var(--z-raised);
  min-height: var(--toolbar);
  /* play sits by the bar's own edge, the reading and status keeping the measure at the other */
  padding-block: var(--space-2xs);
  padding-inline: var(--space-md) var(--space-2xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-dark);
  background: var(--color-ink);
  color: var(--color-paper);
}

.demo-runbar {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-sm);
}

/* the status says where the demo stands, trimmed rather than wrapped so the footer keeps its height */
.dialog-foot .demo-help {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-muted-on-ink);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.control-field {
  min-width: 0;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-xs);
  color: var(--color-paper-2);
  font-size: var(--text-xs);
  font-weight: 700;
}

.control-field > span {
  min-height: 1.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* a value begins where every other value begins */
.demo-form .control-field > :is(select, input) { grid-column: 2 / -1; justify-self: start; }
/* a slider is the exception: it takes the room, its reading closing the line */
.demo-form .control-field > input[type="range"] { grid-column: 2; justify-self: stretch; }
.control-field > output {
  grid-column: 3;
  min-width: 5ch;
  font-family: var(--font-code);
  font-weight: 400;
  text-align: center;
}

/* a value you can edit, not a box: the code face; its rule surfaces on hover, the accent on focus */
.demo-form select,
.demo-form input:not([type="range"]):not([type="file"]) {
  /* field-sizing sets the width from the value; the start keeps the grid from stretching it back */
  justify-self: start;
  max-width: 100%;
  min-height: 2.25rem;
  padding: 0 0 var(--space-3xs);
  field-sizing: content;
  border: 0;
  border-block-end: var(--rule-hair) solid var(--color-rule-dark);
  border-radius: 0;
  background: none;
  color: var(--color-paper);
  font-family: var(--font-code);
  font-size: var(--text-sm);
}

.demo-form select:focus-visible,
.demo-form input:not([type="range"]):not([type="file"]):focus-visible {
  outline: none;
  border-block-end-color: var(--color-accent);
}

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

.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; }

.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; }

/* the same play as the hero: an icon on the dark stage */
.demo-runbar .demo-run {
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding-inline: 0;
  position: relative;
  border-color: transparent;
  background: transparent;
  color: var(--color-paper);
}

.demo-runbar .demo-run path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-runbar .demo-run span { width: 1px; height: 1px; position: absolute; overflow: hidden; clip-path: inset(50%); }
.demo-runbar .demo-run .play-glyph { display: block; }
.demo-runbar .demo-run[data-state="running"] .play-glyph { display: none; }
.demo-runbar .demo-run[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); text-align: start; }
.demo-results {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--color-ink);
  padding: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-rule-dark);
}
.demo-results:empty { display: none; }
.demo-results audio { flex: 1; min-width: 0; width: 0; min-height: 2.75rem; }
.demo-download {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-muted-on-ink);
}
.demo-download:hover { color: var(--color-paper); }
.demo-download svg { width: 1.125rem; height: 1.125rem; }

.dialog-code { border-block-start: var(--rule-hair) solid var(--color-rule-dark); }
/* the source, numbered like the hero's */
.code-output {
  font-size: var(--text-xs);
  padding: var(--space-md) var(--space-lg);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-lg);
  align-content: start;
  overflow-x: auto;
  line-height: 1.5rem;
}

.code-output .lines {
  color: var(--color-ink-3);
  text-align: end;
  user-select: none;
}

.code-tabs {
  min-height: var(--toolbar);
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  border-block-end: var(--rule-hair) solid var(--color-rule-dark);
}

/* tabs are type on the toolbar; the open one is underlined down on the row's rule */
.code-tab {
  align-self: stretch;
  padding: 0;
  border: 0;
  border-block-end: var(--rule-heavy) solid transparent;
  background: transparent;
  color: var(--color-muted-on-ink);
  font-family: var(--font-code);
  font-size: var(--text-xs);
}

.code-tab:hover { color: var(--color-paper); }

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

.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); }
::highlight(punctuation) { color: var(--syntax-punctuation); }
::highlight(method) { color: var(--syntax-method); }
::highlight(storage) { color: var(--syntax-keyword); }
::highlight(support) { color: var(--syntax-type); }
::highlight(numeric) { color: var(--syntax-constant); }
::highlight(boolean) { color: var(--syntax-constant); }

/* ---- example pages: the modal's stage on a page of its own ---- */
.example-detail { padding-block: var(--space-2xl) var(--space-4xl); }

.detail-head h1,
.detail-head .detail-crumbs { max-width: 54rem; }

.detail-crumbs {
  display: flex;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

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

.detail-crumbs a:hover { color: var(--color-ink); }

.detail-head h1 {
  max-width: 20ch;
  margin: var(--space-sm) 0 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
}

.detail-head > p {
  max-width: 34rem;
  margin: var(--space-lg) 0 0;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: 1.6;
  text-wrap: pretty;
}

/* one callout after the stage, in the manner of GitHub's notes: a coloured rule and label */
.callout {
  margin-block: var(--space-lg) 0;
  padding: var(--space-2xs) var(--space-md);
  border-inline-start: var(--rule-heavy) solid var(--color-accent-strong);
  color: var(--color-body);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.callout p { max-width: 54rem; margin: 0; }

.callout .callout-label {
  color: var(--color-accent-strong);
  font-weight: 600;
}

.callout-warning { border-color: var(--color-warning); }
.callout-warning .callout-label { color: var(--color-warning); }

/* the one short page: keep the footer at the foot */
.not-found { min-height: calc(100dvh - 14rem); }

/* a block with edges of its own -- a panel's ink, a callout's rule -- holds the measure by standing
   inside the gutter rather than carrying it, so its edges land where the text around it starts */
.detail-grid,
.callout {
  width: calc(100% - 2 * var(--page-gutter));
  max-width: calc(var(--page-max) - 2 * var(--page-gutter));
  margin-inline: auto;
}

.detail-grid { padding-inline: 0; }

.detail-grid {
  min-width: 0;
  margin-block-start: var(--space-xl);
  display: grid;
  overflow: clip;
  border: var(--rule-hair) solid var(--color-rule-dark);
  border-radius: var(--radius-lg);
  background: var(--color-ink);
  color: var(--color-paper);
}

.detail-related { margin-block-start: var(--space-2xl); }

.detail-related h2 {
  margin: 0;
  padding-block: var(--space-md) var(--space-sm);
  border-block-end: var(--rule-heavy) solid var(--color-ink);
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 700;
}

/* the block holds the measure, its line stopping short of it the way the head's lines do */
.detail-seo { margin-block: var(--space-2xl) 0; }

.detail-seo p {
  max-width: 68ch;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
}

@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 img { transition: filter var(--dur-short) var(--ease-out); }
  .hero-stack button:hover img { filter: none; }
  [aria-label="Runtime support"] tbody tr:hover { background-color: var(--color-white); }
  [aria-label="Runtime support"] tbody tr:hover .runtime-mark { filter: none; }
  .example-filters button { transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
  .example-filters button:not([aria-pressed="true"]):hover { border-color: var(--color-ink); }
  .corner-action nav a { transition: color var(--dur-short) var(--ease-out); }
  .corner-action nav a:hover { color: var(--color-ink); }
  .hero-spec a { transition: color var(--dur-short) var(--ease-out); }
  .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); }
  .brand { transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
  .brand:hover { color: var(--color-ink-3); }
  .example-thumb { transition: color var(--dur-short) var(--ease-out); }
  .example-entry:hover .example-thumb { color: var(--color-ink); }
  .demo-action:not(.demo-run):hover,
  .file-label:hover { transform: translateY(-1px); }
  .demo-form select,
  .demo-form input:not([type="range"]):not([type="file"]) { transition: border-color var(--dur-short) var(--ease-out); }
  .demo-form select:not(:focus-visible):hover,
  .demo-form input:not([type="range"]):not([type="file"]):not(:focus-visible):hover { border-block-end-color: var(--color-rule-dark); }
}

@media (min-width: 40rem) {
  .example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .example-grid > :nth-child(odd) { padding-inline-end: var(--space-xl); }
  .example-groups > .example-grid > :nth-last-child(-n+2) { border-block-end: 0; }
  .example-grid > :nth-child(even) {
    padding-inline-start: var(--space-xl);
    border-inline-start: var(--rule-hair) solid var(--color-rule);
  }
}

@media (min-width: 60rem) {
  .dialog-body,
  .detail-grid {
    grid-template-columns: minmax(22rem, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    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 demo column sets the modal's height; the source column scrolls inside it */
    contain: size;
  }
  .dialog-body,
  .detail-grid { min-height: min(28rem, 50dvh); }
  .demo-panel {
    min-height: 0;
    max-height: 100dvh;
    position: sticky;
    inset-block-start: 0;
    align-self: stretch;
  }
  .demo-form { min-height: 0; }
  .demo-controls { min-height: 0; overflow-y: auto; }
}

@media (max-width: 64rem) {
  .hero-wave,
  .hero-spectrum { max-height: 14rem; }
}

/* Two equal columns on tablets; the graph stays clear of the introduction. */
@media (48rem < width <= 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero-intro { grid-column: 1; padding-inline-end: var(--space-sm); }
  .hero-art { grid-column: 2; padding-inline: 0; justify-self: end; }
  .graph-scroll { width: 100%; max-width: none; }
  .hero-code, .install-row { grid-column: 1 / -1; }
  .install-row { grid-row: 2; }
  .hero-demo-note { grid-column: 2; grid-row: 2; max-width: 14rem; }
  .hero h1 { font-size: clamp(2rem, 4.7vw, var(--text-display)); }
}

@media (40rem <= width <= 64rem) {
  /* two narrow catalogue columns: tighter numeration, shorter entries */
  .example-grid > :nth-child(odd) { padding-inline-end: var(--space-md); }
  .example-grid > :nth-child(even) { padding-inline-start: var(--space-md); }
  .example-entry {
    padding-block: var(--space-md);
    grid-template-columns: 1.25rem minmax(0, 1fr) 6rem;
    column-gap: var(--space-sm);
  }
}

@media (max-width: 48rem) {
  /* three sizes of text on a phone, under the two the hero keeps: 16 reading, 14 supporting, 12 fine
     print. Code and the footer join the fine print; section headings step back under the title. */
  .section-heading h2 { font-size: var(--text-xl); }
  .example-group h3 { font-size: var(--text-md); }
  .hero-lede,
  .hero-intro ul,
  .detail-head > p { font-size: var(--text-base); }
  .hero-code pre,
  .code-output,
  .site-footer { font-size: var(--text-xs); }

  /* no room to fold two parameters onto a line here */
  .demo-fields { --fold: 2; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero-intro { padding-inline-end: 0; }
  .hero-art,
  .install-row,
  .hero-demo-note,
  .hero-code { grid-column: 1; grid-row: auto; }
  /* stacked: intro, install with status, graph, preview note, code */
  .hero-art { order: 1; }
  .hero-demo-note { order: 2; }
  .hero-code { order: 3; }
  /* the dots run to both edges and pass under the code, which is the graph's own */
  .hero-art {
    margin-inline: calc(-1 * var(--page-gutter));
    /* the pull is deeper than the row gap, so what is left is the overlap */
    margin-block-end: calc(-1 * var(--space-2xl));
    padding: var(--space-sm) var(--page-gutter) calc(var(--space-sm) + var(--space-2xl));
    justify-items: center;
  }
  /* the graph keeps its own size and scrolls sideways, rather than shrinking its labels out of
     legibility; it never scrolls down, and the field it stands on does not move with it */
  .graph-scroll {
    justify-self: start;
    overflow: auto hidden;
  }
  .hero-art .graph { min-width: 25rem; }
  .hero-code { grid-template-columns: minmax(0, 1fr); }
  .install-command .prompt { display: none; }
  .install-row { gap: var(--space-xs); }
  .install-command { font-size: clamp(0.625rem, calc(4vw - 0.175rem), var(--text-xs)); min-height: 2.5rem; }
  .hero-spec { font-size: clamp(0.6875rem, 3.2vw, var(--text-xs)); }
  .wpt-tip { width: 12rem; }
  .hero-code pre,
  .code-output {
    padding: var(--space-md);
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-code .lines,
  .code-output .lines { display: none; }
  .hero-signal {
    --signal-pad: var(--space-md);
    padding: var(--space-sm) var(--signal-pad) 0;
    border-inline-start: 0;
    border-block-start: var(--rule-hair) solid var(--color-rule-dark);
  }
  /* compact: the graph leads, the signal is a short strip the height of its spectrum */
  .hero {
    padding-block: var(--space-xl) var(--space-2xl);
    row-gap: var(--space-md);
  }
  /* less paper to cross here, so the bands cross it in less height */
  .field-strips { height: 5rem; }
  .faq-strips { height: 5rem; }
  .footer-strips { height: 4rem; }
  .hero-intro ul { padding-inline-start: 0; }
  /* a tighter row keeps more runtimes named before the labels start dropping */
  .hero-stack { gap: var(--space-2xs); }
  .example-detail { padding-block: var(--space-xl) var(--space-2xl); }
  .hero-wave,
  .hero-spectrum { aspect-ratio: 400 / 64; }
  .hero-spectrum { margin-block-start: var(--space-sm); }
  .examples { padding-block: var(--space-sm) var(--space-xl); }
  .section-heading { margin-block-end: var(--space-md); }
  .example-groups { gap: var(--space-xl); }
  /* one row of tags, bleeding to the edge and scrolling past it; the counts wait for a wider screen */
  .example-filters {
    margin-inline: calc(-1 * var(--page-gutter));
    padding-inline: var(--page-gutter);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .example-filters button { flex: none; }
  .example-filters .filter-count { display: none; }
  .cli-command pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .faq summary {
    min-height: 3rem;
    padding-block: var(--space-sm);
    gap: var(--space-md);
    font-size: var(--text-base);
    font-weight: 600;
  }
  /* the modal is a sheet: edge to edge, the close button over the title's corner */
  .example-dialog { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .dialog-shell { border-radius: 0; }
  .dialog-head {
    padding: var(--space-md);
    display: block;
    position: relative;
  }
  .dialog-head h2 { padding-inline-end: 2.5rem; }
  .dialog-close {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-end: var(--space-2xs);
  }
}

@media (width < 60rem), (height < 44rem) {
  /* stacked, the modal scrolls as one sheet: it keeps its content's height and nothing
     inside it scrolls or sticks */
  .dialog-shell {
    flex: none;
    max-height: none;
    overflow: visible;
  }
  .example-dialog .demo-panel {
    max-height: none;
    position: static;
  }
  .example-dialog .demo-controls { overflow-y: visible; }
  .dialog-code { contain: none; }
  .dialog-code .code-output,
  .dialog-code .cli-pane,
  .graph-pane { flex: none; }
  .dialog-code .code-output { overflow-y: visible; }
}

@media (max-width: 40rem) {
  .example-entry {
    padding-block: var(--space-sm);
    grid-template-columns: 1.25rem minmax(0, 1fr) 4rem;
    column-gap: var(--space-xs);
  }
  .is-featured .example-entry { grid-template-columns: minmax(0, 1fr) 4rem; }
  .example-thumb {
    width: 4rem;
    height: 4rem;
  }
  /* the level is the first thing a phone's footer can do without: the status has more to say */
  .demo-meter { display: none; }
}

@media (max-width: 22.5rem) {
  .corner-action nav { gap: var(--space-md); }
  .version-link { display: none; }
}

@media (max-height: 40rem) {
  .demo-stage { padding: var(--space-sm); min-height: 10rem; }
}

/* Keep playback and graph/source controls on phones, without signal plots. */
@media (max-width: 40rem), (pointer: coarse) and (max-height: 40rem) {
  .demo-stage, .hero-signal { display: none; }
  .demo-panel { background-image: none; min-height: 0; }
  .demo-form, .demo-results { border-block-start: 0; }
  .hero-code { grid-template-columns: minmax(0, 1fr); }
}

@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; }
}