/* GENERATED by scripts/build-legal.ts. Do not edit. */

/*
 * The app's four faces, self-hosted.
 *
 * ## Why these are vendored rather than loaded through `next/font`
 *
 * The legal pages are not Next pages — they are generated to zero-JS HTML by
 * `scripts/build-legal.ts` so they can keep serving under
 * `default-src 'none'`. `next/font` emits hashed filenames into
 * `_next/static/media`, which a hand-built page cannot reference without
 * reading Next's manifest. Vendoring the woff2 into `public/fonts/` gives both
 * halves of the site one set of files at one set of stable URLs, so the legal
 * pages and the marketing pages cannot drift into different typography.
 *
 * All four are OFL-1.1. See `public/fonts/LICENSE.md` — the repo already has
 * one piece of third-party art with attribution in prose and no licence file
 * (the Lichess chess pieces), and that is not a mistake worth repeating.
 *
 * ## Subsetting
 *
 * `unicode-range` does the work the Astro Fonts API would have done: an English
 * page never downloads Cairo's Arabic block, and an Arabic page never downloads
 * Unbounded. The browser fetches a face only when a glyph in its range is
 * actually used.
 *
 * ## The fallback faces
 *
 * `size-adjust` on a local fallback keeps the swap from moving the layout.
 * Google's Visual Stability Index (2026) measures shift across the whole
 * session, not just on load, so an unmatched fallback is now a ranking cost as
 * well as an ugly one. The percentages are per-family and tuned by eye against
 * the real faces; they are close, not exact.
 */

@font-face {
  font-family: "Unbounded";
  src: url("/fonts/unbounded-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Unbounded Fallback";
  src: local("Arial");
  size-adjust: 108%;
  ascent-override: 88%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Fredoka";
  src: url("/fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Fredoka Fallback";
  src: local("Arial");
  size-adjust: 104%;
  ascent-override: 94%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Nunito Fallback";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 100%;
  descent-override: 30%;
  line-gap-override: 0%;
}

/*
 * Cairo carries every role on the Arabic pages, because Fredoka, Nunito and
 * Unbounded contain zero Arabic codepoints — the app verified that against
 * their cmap tables rather than assuming it. Both subsets are declared so a
 * mixed-script line (an Arabic sentence with a Latin product name in it)
 * resolves per character instead of falling back for the whole run.
 */
@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-arabic.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
    U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF,
    U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Cairo";
  src: url("/fonts/cairo-latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Cairo Fallback";
  src: local("Arial");
  size-adjust: 100%;
  ascent-override: 96%;
  descent-override: 30%;
  line-gap-override: 0%;
}


/*
 * BoardVerse design tokens.
 *
 * Every value here is the app's, read from
 * `app/lib/core/constants/app_constants.dart` and
 * `app/lib/core/widgets/board/board_material.dart`. Nothing is picked to look
 * nice on a website. The site is a photograph of the product, and a photograph
 * that improves its subject's colours is a lie the store screenshots will
 * immediately contradict.
 *
 * ## Both schemes, because the app has both
 *
 * This file was dark-only at first, on the argument that a table does not
 * alternate between light and dark bands as you walk down it. That is a fine
 * argument about *one page* and a bad one about a product: the app ships a full
 * light theme and a full dark theme and follows the system setting, so a
 * dark-only site contradicts the thing it is selling — and it does it to the
 * subset of people who chose light because dark is harder for them to read.
 *
 * So: light on `:root`, dark in `prefers-color-scheme`, following the OS with
 * no toggle and no JavaScript. A toggle would need a script, a stored
 * preference and an inline blocking snippet to avoid a flash on load — on a
 * site whose whole architecture is "no script unless it earns it", the OS
 * setting is already the answer and it is already correct.
 *
 * **The five board materials do NOT invert.** They lighten slightly, using the
 * app's own `baseColor(Brightness.light)` values. A board is a physical object:
 * felt is dark green in a bright room too.
 */

:root {
  color-scheme: light dark;
  /* ── Brand ─────────────────────────────────────────────────────────────
   * AppColors.primary / .secondary — "matches the BoardVerse logo's purple
   * gradient stop" / "the logo's pink gradient stop".                     */
  --brand: #8b5cf6;
  --brand-dark: #6d28d9;
  --brand-light: #a78bfa;
  --accent-pink: #ec4899;
  --accent-pink-dark: #be185d;
  --accent-pink-light: #f9a8d4;

  /* AppColors.primaryGradient */
  --gradient-brand: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);

  /* ── Ground — light ────────────────────────────────────────────────────
   * lightBackground is "clean white with a hint of lavender".             */
  --ground: #faf5ff;
  --surface: #ffffff;
  --surface-variant: #f3e8ff;
  --surface-container: #f8f2ff;
  --outline: #cbb8e8;
  --outline-variant: #e6daf6;

  /* ── Ink — light ───────────────────────────────────────────────────────
   * The hint value was #9B8FB4 until 2026-08-13, when it measured 2.80:1 and
   * failed WCAG AA. Do not reintroduce a dimmer one in either scheme.     */
  --ink: #1e1b4b; /* lightTextPrimary, "deep indigo" */
  --ink-muted: #4c3a7e; /* lightTextSecondary */
  --ink-hint: #685b8b; /* lightTextHint, 5.66:1 on --ground */

  /* The brand gradient is legible on white at these stops, but the darker
     ends are what the app uses for text and outlines in light mode. */
  --brand-ink: #6d28d9; /* primaryDark — brand colour that passes AA on white */

  /* ── Status ────────────────────────────────────────────────────────── */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* ── Game accents ──────────────────────────────────────────────────────
   * Each game's `color:` from its descriptor. The rim light adopts one per
   * section, which is how the app's BoardSurface signals whose turn it is.  */
  --game-last-card: #e53935;
  --game-domino: #1565c0;
  --game-chess: #f57c00;
  --game-xo: #8e24aa;
  --game-four-in-a-row: #2e7d32;
  --game-ludo: #e53935;
  --game-ludo-alt: #1565c0;

  /* ── Board materials — light ───────────────────────────────────────────
   * BoardMaterial.baseColor(Brightness.light). "A material is how the board is
   * made, not what colour it is" — so these lighten a little between schemes
   * and never invert. Felt is dark green in a bright room too.            */
  --mat-felt: #1b5e43;
  --mat-wood: #6b4426;
  --mat-slate: #3c414d;
  --mat-acrylic: #243b8f;
  --mat-lacquer: #2e1b4e;

  /* ── Radii — AppSizes. 14 is the app's card default. ───────────────── */
  --r-xs: 4px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-round: 100px;

  /* ── Spacing — AppSizes.padding* ───────────────────────────────────── */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;

  /* ── Motion — AppSizes durations ───────────────────────────────────── */
  --t-fast: 150ms;
  --t-medium: 300ms;
  --t-slow: 500ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ── Type ──────────────────────────────────────────────────────────────
   * Declared in `fonts.css`, which both the Next pages and the generated legal
   * pages load. Unbounded is the app's own hero face, "reserved for the
   * cinematic game hero screens" — here it carries the whole voice.
   *
   * Cairo sits in every stack, not only the Arabic one: a Latin heading with an
   * Arabic word in it should resolve per character rather than dropping the
   * whole run to a system fallback.                                        */
  --face-hero: "Unbounded", "Cairo", "Unbounded Fallback", system-ui, sans-serif;
  --face-display: "Fredoka", "Cairo", "Fredoka Fallback", system-ui, sans-serif;
  --face-body: "Nunito", "Cairo", "Nunito Fallback", system-ui, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.55rem, 1.35rem + 1vw, 2.1rem);
  --step-3: clamp(1.95rem, 1.6rem + 1.8vw, 3rem);
  --step-4: clamp(2.4rem, 1.8rem + 3vw, 4.4rem);
  --step-5: clamp(2.9rem, 1.9rem + 5vw, 6.5rem);

  --measure: 62ch;
  --page: 1200px;

  /* ── Breakpoints ───────────────────────────────────────────────────────
   * Three, and only three. There were six ad-hoc values across the
   * components — 44, 48, 52, 56, 62 and 72rem — and an iPad at 820px fell
   * between two of them: the games grid stayed one column, so every board
   * became a 544px square with dead space beside it. That is the same shape
   * as the app's own tablet bug, where the Home grid handed Domino the full
   * 1024px width.
   *
   * Media queries cannot read custom properties, so these are documentation
   * rather than values. Use one of the three; do not invent a fourth.
   *
   *   44rem /  704px — two columns, side by side.  Catches iPad portrait (768).
   *   62rem /  992px — three columns, wide splits. Catches iPad landscape (1024).
   *   78rem / 1248px — reserved. `--page` caps at 1200px, so anything beyond
   *                    this only adds margin.                              */
}

/*
 * Dark, from the app's dark theme.
 *
 * Only the tokens that differ are redefined — the brand, the game accents, the
 * radii, the type scale and everything else are one definition shared by both
 * schemes, so they cannot drift apart. If a value appears in this block it is
 * because the app has two of them.
 */
/*
 * ## Three states, two selectors, one set of values
 *
 * The header carries a toggle, so the scheme has THREE states and not two:
 * follow the system (the default), force light, force dark. That needs both
 * rules below, and the `:not([data-theme="light"])` is the load-bearing part —
 * without it, a visitor whose OS is dark and who explicitly chose light gets
 * dark anyway, because the media query would still match.
 *
 * The two blocks are byte-identical on purpose and `color_scheme.test.ts`
 * asserts it. CSS has no way to share a declaration block between selectors
 * without a preprocessor, and adding one to this project to avoid twenty
 * duplicated lines would be the larger cost.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* darkBackground is "deep navy, directly from the logo background". */
    --ground: #0f1027;
    --surface: #1a1b3e;
    --surface-variant: #26264b;
    --surface-container: #1f2046;
    --outline: #4a4570;
    --outline-variant: #34335c;

    --ink: #faf5ff; /* darkTextPrimary, "bright lavender-white" */
    --ink-muted: #d4c5f2; /* darkTextSecondary */
    --ink-hint: #9e93c7; /* darkTextHint, 5.10:1 on --ground */

    /* On a dark ground the light brand tint is the legible one. */
    --brand-ink: #a78bfa; /* primaryLight */

    /* BoardMaterial.baseColor(Brightness.dark) */
    --mat-felt: #14452f;
    --mat-wood: #3a2418;
    --mat-slate: #23262e;
    --mat-acrylic: #141a3a;
    --mat-lacquer: #1a0f2e;
  }
}

:root[data-theme="dark"] {
  /* darkBackground is "deep navy, directly from the logo background". */
  --ground: #0f1027;
  --surface: #1a1b3e;
  --surface-variant: #26264b;
  --surface-container: #1f2046;
  --outline: #4a4570;
  --outline-variant: #34335c;

  --ink: #faf5ff; /* darkTextPrimary, "bright lavender-white" */
  --ink-muted: #d4c5f2; /* darkTextSecondary */
  --ink-hint: #9e93c7; /* darkTextHint, 5.10:1 on --ground */

  /* On a dark ground the light brand tint is the legible one. */
  --brand-ink: #a78bfa; /* primaryLight */

  /* BoardMaterial.baseColor(Brightness.dark) */
  --mat-felt: #14452f;
  --mat-wood: #3a2418;
  --mat-slate: #23262e;
  --mat-acrylic: #141a3a;
  --mat-lacquer: #1a0f2e;
}

/* The browser's own chrome — scrollbars, form controls — follows the choice. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/*
 * Arabic gets zero tracking, everywhere, at every size.
 *
 * This is not a preference. `app/lib/core/theme/script_typography.dart` learned
 * it the expensive way: "Positive tracking inserts gaps at those joins and the
 * word visibly falls apart." Arabic is cursive — the letters are connected, and
 * letter-spacing cuts the connections.
 */
:root:lang(ar),
[dir="rtl"] {
  --face-hero: "Cairo", "Cairo Fallback", system-ui, sans-serif;
  --face-display: "Cairo", "Cairo Fallback", system-ui, sans-serif;
  --face-body: "Cairo", "Cairo Fallback", system-ui, sans-serif;
}

[lang="ar"] *,
[dir="rtl"] * {
  letter-spacing: 0 !important;
}

/* ── The five materials ──────────────────────────────────────────────────
 *
 * Translated from `BoardMaterialPainter`, layer for layer. Each surface reads
 * `--accent` from whatever section it sits in, which is how one table becomes
 * six boards. The accent wash is held at 7.5% exactly as the painter does:
 * "at 15% it reads as a coloured board rather than a lit one, and the pieces
 * stop separating from it."
 */
.mat {
  --accent: var(--brand);
  --mat-base: var(--mat-felt);
  position: relative;
  isolation: isolate;
  background-color: var(--mat-base);
}

/* The accent wash, shared by all five. Radial from the top, as the painter
 * draws it: `rect.topCenter + Offset(0, rect.height * 0.15)`. */
.mat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    ellipse 90% 90% at 50% 15%,
    color-mix(in srgb, var(--accent) 7.5%, transparent) 0%,
    transparent 70%
  );
  transition: background var(--t-slow) var(--ease);
}

/* Felt — "fine directional nap, slightly warmer at the centre". */
.mat-felt {
  --mat-base: var(--mat-felt);
  background-image:
    repeating-linear-gradient(
      0deg,
      rgb(255 255 255 / 0.022) 0 1px,
      transparent 1px 4px
    ),
    radial-gradient(
      ellipse 120% 110% at 50% 50%,
      color-mix(in srgb, var(--mat-base) 92%, white) 0%,
      var(--mat-base) 55%,
      color-mix(in srgb, var(--mat-base) 78%, black) 100%
    );
}

/* Wood — "long grain with a cathedral figure and a satin sheen". */
.mat-wood {
  --mat-base: var(--mat-wood);
  background-image:
    repeating-linear-gradient(
      92deg,
      rgb(0 0 0 / 0.16) 0 2px,
      transparent 2px 7px,
      rgb(255 255 255 / 0.03) 7px 8px,
      transparent 8px 19px
    ),
    radial-gradient(
      ellipse 40% 130% at 32% 50%,
      color-mix(in srgb, var(--mat-base) 82%, black) 0%,
      transparent 60%
    ),
    linear-gradient(
      100deg,
      color-mix(in srgb, var(--mat-base) 88%, white) 0%,
      var(--mat-base) 45%,
      color-mix(in srgb, var(--mat-base) 82%, black) 100%
    );
}

/* Slate — "matte, cool, faintly cleaved along one axis". */
.mat-slate {
  --mat-base: var(--mat-slate);
  background-image:
    repeating-linear-gradient(
      118deg,
      rgb(255 255 255 / 0.02) 0 1px,
      transparent 1px 23px
    ),
    linear-gradient(
      160deg,
      color-mix(in srgb, var(--mat-base) 90%, white) 0%,
      var(--mat-base) 40%,
      color-mix(in srgb, var(--mat-base) 84%, black) 100%
    );
}

/* Acrylic — "translucent, edge-lit, with a soft internal glow". */
.mat-acrylic {
  --mat-base: var(--mat-acrylic);
  background-image:
    radial-gradient(
      ellipse 70% 55% at 50% 108%,
      color-mix(in srgb, var(--accent) 26%, transparent) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 80% 60% at 50% 40%,
      color-mix(in srgb, var(--mat-base) 74%, white) 0%,
      transparent 70%
    ),
    linear-gradient(
      180deg,
      var(--mat-base) 0%,
      color-mix(in srgb, var(--mat-base) 80%, black) 100%
    );
}

/* Lacquer — "deep gloss with a single broad specular sweep". */
.mat-lacquer {
  --mat-base: var(--mat-lacquer);
  background-image:
    linear-gradient(
      104deg,
      transparent 0%,
      transparent 34%,
      rgb(255 255 255 / 0.07) 46%,
      rgb(255 255 255 / 0.02) 54%,
      transparent 66%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 110% 90% at 50% 0%,
      color-mix(in srgb, var(--mat-base) 76%, white) 0%,
      var(--mat-base) 55%,
      color-mix(in srgb, var(--mat-base) 74%, black) 100%
    );
}

/*
 * The rim light IS the turn indicator.
 *
 * `BoardSurface` breathes it in the active player's colour, and `BoardChrome`
 * says the same thing in words — which is what makes the pair work without
 * colour vision. On the site there is no active player, so it breathes in the
 * section's game accent instead.
 */
.rim {
  position: relative;
}

.rim::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 0 24px -4px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: rim-breathe 5.5s var(--ease) infinite;
}

@keyframes rim-breathe {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}


/*
 * The legal pages' stylesheet.
 *
 * Concatenated after `fonts.css` and `tokens.css` by `scripts/build-legal.ts`
 * into `out/legal.css`, so these pages and the marketing site are set in the
 * same type on the same palette without either importing the other's build.
 *
 * No Tailwind here on purpose: these two pages are prose, and pulling a utility
 * framework into a document with eleven elements in it would be the largest
 * thing on the page.
 */

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

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--face-body);
  font-size: var(--step-0);
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  flex-wrap: wrap;
  width: min(100% - 2rem, 72ch);
  margin-inline: auto;
  padding-block: var(--s-md);
  color: var(--ink-hint);
  font-size: var(--step--1);
}

header.bar {
  border-bottom: 1px solid var(--outline-variant);
}

footer.bar {
  margin-top: var(--s-xl);
  border-top: 1px solid var(--outline-variant);
}

.bar nav {
  display: flex;
  gap: var(--s-md);
}

.bar a {
  color: var(--ink-muted);
  text-decoration: none;
}

.bar a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.home {
  font-family: var(--face-hero);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink) !important;
}

main {
  width: min(100% - 2rem, 72ch);
  margin-inline: auto;
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

h1 {
  font-family: var(--face-hero);
  font-size: var(--step-3);
  line-height: 1.1;
  margin: 0;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  margin: var(--s-sm) 0 0;
  color: var(--ink-hint);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.fallback {
  margin-block: var(--s-lg);
  padding: var(--s-md) var(--s-lg);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--warning) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 40%, transparent);
}

.fallback h2 {
  margin: 0 0 var(--s-xs);
  font-family: var(--face-display);
  font-size: var(--step-0);
  border: 0;
  padding: 0;
}

.fallback p {
  margin: 0;
}

.doc {
  margin-top: var(--s-xl);
}

.doc h2 {
  font-family: var(--face-display);
  font-size: var(--step-1);
  line-height: 1.2;
  margin: var(--s-xl) 0 var(--s-sm);
  padding-top: var(--s-md);
  border-top: 1px solid var(--outline-variant);
}

.doc h3 {
  font-family: var(--face-display);
  font-size: var(--step-0);
  margin: var(--s-lg) 0 var(--s-xs);
}

.doc p,
.doc ul,
.doc ol {
  margin-block: var(--s-md);
  color: var(--ink-muted);
}

.doc li {
  margin-block: var(--s-xs);
}

.doc strong {
  color: var(--ink);
  font-weight: 700;
}

.doc a {
  color: var(--brand-ink);
  text-underline-offset: 3px;
}

.doc code {
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
  background: var(--surface-variant);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* The retention windows live in a table, and it is the part a reader is most
   likely to have come for. It scrolls rather than squeezing. */
.doc table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  margin-block: var(--s-lg);
  font-size: var(--step--1);
}

.doc th,
.doc td {
  padding: 0.6rem 0.9rem;
  text-align: start;
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: top;
}

.doc th {
  color: var(--ink);
  font-family: var(--face-display);
  white-space: nowrap;
}

.source {
  margin-top: var(--s-xl);
  padding-top: var(--s-md);
  border-top: 1px solid var(--outline-variant);
  color: var(--ink-hint);
  font-size: var(--step--1);
}

:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-md);
  top: -100px;
  z-index: 9;
  background: var(--surface);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-md);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--s-md);
}