@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("fonts/dm-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2");
  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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("fonts/outfit-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* WardForth's website, built from Patrik's chosen sketch "The gate"
   (docs/design/reference/website-sketch-the-gate.html, card 0250). The tokens are the sketch's oklch
   values, which come from docs/design/reference/styles.css. Dark is the default (Patrik, 2026-10-10,
   card 0241: dark first, light stays available); the page turns light only when the reader's system
   asks for it. Fonts: the site's self-hosted DM Sans for text and Outfit for display
   (assets/brand/README.md, "Questions closed by Patrik"), not the sketch's system font.

   The arched gate of the mark is the structural motif, as in the sketch: the numbered plate above
   each section heading, the gate cards of the Coming lists, the dock's indicator, the pilot door.

   Contrast: where a sketch colour fails WCAG 2.2 AA as text (4.5:1 for normal text, 3:1 for large),
   a text-safe token stands beside it and the comment says so. The browser test (test/visual.test.mjs)
   measures every visible text node against the pixels rendered behind it, so gradients and
   translucent panels are checked as they are seen, not assumed. */

:root {
  color-scheme: dark;
  --radius: 0.75rem;
  --background: oklch(0.145 0.008 265);
  --foreground: oklch(0.95 0.01 265);
  --card: oklch(0.2 0.012 265 / 75%);
  --primary: oklch(0.64 0.23 272);
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.27 0.015 265);
  --muted: oklch(0.26 0.012 265);
  --muted-foreground: oklch(0.72 0.018 265);
  --accent: oklch(0.27 0.02 269);
  --border: oklch(1 0 0 / 12%);
  --panel: oklch(0.21 0.012 265 / 72%);
  --header: oklch(0.145 0.008 265 / 80%);
  /* The sketch's badge colours, lifted a little so a badge's text passes 4.5:1 on its own tint. */
  --warning: oklch(0.78 0.13 75);
  --success: oklch(0.76 0.15 153);
  --special: oklch(0.76 0.12 285);
  --danger: oklch(0.7 0.17 25);
  --signal: oklch(0.78 0.12 200);
  --brand-blue: oklch(0.68 0.17 250);
  /* The brand blue as small text (the heading of "where it runs", card 0261): the same in the dark
     theme, darker in the light one, where the brand blue is 4.1:1 on the block's tint. */
  --brand-blue-text: oklch(0.68 0.17 250);
  --logo: oklch(0.62 0.21 264);
  /* Small text in the primary colour (the dock's current item, the replay link): the sketch's
     primary on its own tint is 3.3:1 in the dark theme, so a lighter one carries text. */
  --primary-text: oklch(0.78 0.16 272);
  /* The chat scene's own surfaces. */
  --chat-bg: oklch(0.19 0.02 260);
  --bubble: oklch(0.25 0.015 262);
  --bubble-own: oklch(0.32 0.08 262);
  --bot-name: oklch(0.74 0.16 264);
  --name-1: oklch(0.74 0.13 30);
  --name-2: oklch(0.74 0.13 150);
  --name-3: oklch(0.74 0.13 300);
  /* The decorative gradient (gradient text, the gate watermark), and the one that carries white
     text: the sketch's own stops give white 3.7:1 and 2.8:1 in the dark theme, these give 5.1:1. */
  --gradient: linear-gradient(135deg, var(--brand-blue), var(--primary));
  --gradient-ui: linear-gradient(135deg, oklch(0.53 0.17 250), oklch(0.52 0.23 272));
  --gradient-ui-solid: oklch(0.52 0.23 272);
  --font-display: "Outfit", system-ui, sans-serif;
  --font-text: "DM Sans", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dock-h: 68px;
  --gutter: 16px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: oklch(0.975 0.006 265);
    --foreground: oklch(0.19 0.025 266);
    --card: oklch(1 0 0 / 86%);
    /* The sketch's light primary, oklch(0.57 0.23 272), is 4.46:1 on the page; this one is 5.3:1. */
    --primary: oklch(0.53 0.23 272);
    --primary-foreground: oklch(0.99 0 0);
    --secondary: oklch(0.93 0.012 265);
    --muted: oklch(0.94 0.008 265);
    --muted-foreground: oklch(0.46 0.025 265);
    --accent: oklch(0.93 0.02 269);
    --border: oklch(0.86 0.015 265);
    --panel: oklch(1 0 0 / 78%);
    --header: oklch(0.975 0.006 265 / 80%);
    /* Darkened from the sketch so a badge's text passes 4.5:1 on its tint. */
    --warning: oklch(0.52 0.14 72);
    --success: oklch(0.46 0.14 153);
    --special: oklch(0.48 0.12 285);
    --danger: oklch(0.52 0.2 25);
    --signal: oklch(0.47 0.13 200);
    /* The sketch's light brand blue, oklch(0.6 0.19 250), is 2.9:1 as the hero's gradient text on the
       hero's tinted top; this one is 3.3:1 there, the 3:1 large text needs. */
    --brand-blue: oklch(0.56 0.19 250);
    --brand-blue-text: oklch(0.46 0.17 250);
    --logo: oklch(0.58 0.22 264);
    --primary-text: oklch(0.5 0.23 272);
    --chat-bg: oklch(0.93 0.02 255);
    --bubble: oklch(1 0 0);
    --bubble-own: oklch(0.9 0.06 255);
    --bot-name: oklch(0.5 0.22 264);
    --name-1: oklch(0.48 0.13 30);
    --name-2: oklch(0.48 0.13 150);
    --name-3: oklch(0.48 0.13 300);
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
  }
}

/* ---- base ---- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  scroll-padding-bottom: calc(var(--dock-h) + 24px);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  padding-bottom: calc(var(--dock-h) + 28px + env(safe-area-inset-bottom, 0px));
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--primary-text);
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
}

.skip:focus {
  left: var(--gutter);
  top: 0.5rem;
  z-index: 40;
  padding: 0.5rem 1rem;
  background: var(--background);
}

/* ---- the lockup: the supplied artwork at the manual's 180 px minimum (assets/brand/README.md,
   page 5). lockup-light.svg has the white wordmark, for the dark default; lockup-dark.svg the navy
   one. ---- */

.logo {
  display: block;
  padding: 10px 0;
}

.logo img,
.foot-brand img {
  width: 180px;
  height: 54px;
}

.logo-on-dark {
  display: block;
}

.logo-on-light {
  display: none;
}

@media (prefers-color-scheme: light) {
  .logo-on-dark {
    display: none;
  }
  .logo-on-light {
    display: block;
  }
}

/* ---- the top bar: brand and language. The dock does the navigating. ---- */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--header);
  border-bottom: 1px solid var(--border);
}

/* The blur behind the bar sits on a pseudo-element on purpose: a backdrop filter on the header
   itself would make the header the containing block of the dock's fixed position, and the dock
   would hang under the bar instead of standing at the bottom of the screen. */
.top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
}

.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  color: var(--foreground);
  background: var(--panel);
}

.lang:hover {
  background: var(--accent);
}

/* ---- the header's menu (card 0261): a details element whose panel hangs under the bar, the
   full width of the screen, listing the sections and the help pages. It opens without script. The
   summary is the button; the stylesheet hides the browser's marker and shows the three lines or
   the cross. The menu sits before the dock in the document and is pushed to the right, next to the
   language, so the top row reads: brand, then the menu and the language. ---- */

.menu {
  margin-left: auto;
}

.menu details {
  position: static;
}

.menu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px 6px 9px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--foreground);
  background: var(--panel);
  user-select: none;
}

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

.menu summary:hover,
.menu details[open] > summary {
  background: var(--accent);
}

.menu summary svg {
  width: 16px;
  height: 16px;
  flex: none;
}

/* The three lines when closed, the cross when open. */
.menu summary svg + svg,
.menu details[open] > summary svg:first-child {
  display: none;
}

.menu details[open] > summary svg + svg {
  display: block;
}

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1;
  background: var(--background);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 30px 60px oklch(0.1 0.03 265 / 35%);
  /* Never under the dock: the panel scrolls when the screen is short. The bar's own height is the
     100% (the panel's containing block), so a wrapped bar on a narrow screen is counted too, and
     the margin leaves room for a dock whose labels wrap to two lines on the narrowest screens. */
  max-height: calc(100dvh - 100% - var(--dock-h) - 64px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mega-grid {
  display: grid;
  gap: 18px;
  padding-block: 18px 22px;
}

@media (min-width: 860px) {
  .mega-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px 40px;
    padding-block: 26px 28px;
  }
}

/* The third column, "Take part" (card 0276), stands beside the other two where there is room. */
@media (min-width: 1100px) {
  .mega-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.mega-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted-foreground);
  padding-inline: 12px;
}

.mega ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.mega li a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 1px 12px;
  align-items: start;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--foreground);
}

.mega li a:hover,
.mega li a[aria-current="page"] {
  background: var(--accent);
}

.mega li a svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  grid-row: 1 / span 2;
  color: var(--primary-text);
}

.mega li a b {
  font-weight: 650;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.mega li a b .tag {
  transform: none;
  margin-left: 0.4rem;
}

.mega li a .blurb {
  grid-column: 2;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}

.mega-where {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 12px 0;
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

@media (min-width: 860px) {
  .mega-where {
    grid-column: 1 / -1;
  }
}

/* Narrow screens (PR 382 review): under 400 px the lockup's 180 px minimum, the menu's button and
   the language control do not share one row with their words. The button shows its icon alone,
   its word kept for assistive technology, and the row may wrap, the controls under the lockup. */
@media (max-width: 399px) {
  .top-row {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .menu summary {
    padding: 8px;
  }
  .menu summary span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Under 360 px even that row is too narrow, so the lockup takes the first row and the two controls
   stand together on the second. */
@media (max-width: 359px) {
  .top-row > .logo {
    flex-basis: 100%;
    padding-bottom: 0;
  }
}

.mega-where svg,
.hero .eu svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--brand-blue);
}

/* ---- buttons ---- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  border: 0;
  font-weight: 650;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  color: var(--primary-foreground);
  background-color: var(--gradient-ui-solid);
  background-image: var(--gradient-ui);
  box-shadow: 0 10px 30px color-mix(in oklab, var(--primary) 30%, transparent);
}

.button:hover {
  box-shadow: 0 12px 34px color-mix(in oklab, var(--primary) 42%, transparent);
}

.button svg {
  width: 18px;
  height: 18px;
  flex: none;
}

.button-quiet {
  color: var(--foreground);
  background-color: var(--background);
  background-image: none;
  border: 1px solid var(--border);
  box-shadow: none;
}

.button-quiet:hover {
  background-color: var(--accent);
  border-color: var(--border);
}

/* ---- the dock: the page's navigation, always at the thumb, on every screen size. It stays in the
   header's place in the document; only its position is at the bottom. ---- */

.dock {
  position: fixed;
  z-index: 30;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(560px, calc(100% - 16px));
  padding: 0 6px 6px;
  border-radius: 26px;
  background: color-mix(in oklab, var(--background) 82%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px oklch(0.2 0.05 265 / 22%);
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  min-height: var(--dock-h);
}

.nav a {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 3px;
  min-height: 56px;
  padding: 9px 2px 5px;
  text-decoration: none;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 650;
  line-height: 1.15;
  color: var(--muted-foreground);
}

.nav a svg {
  width: 21px;
  height: 21px;
  position: relative;
  z-index: 1;
}

.nav a span {
  position: relative;
  z-index: 1;
}

/* The current item sits inside a small gate: an arch rising from the dock floor. */
.nav a::before {
  content: "";
  position: absolute;
  inset: 0 10%;
  border-radius: 999px 999px 10px 10px;
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.28s ease;
}

.nav a:hover {
  color: var(--foreground);
}

.nav a[aria-current="page"],
.nav a[aria-current="location"] {
  color: var(--primary-text);
}

.nav a[aria-current="page"]::before,
.nav a[aria-current="location"]::before {
  transform: scaleY(1);
}

/* The pilot item is the raised pill of the sketch: it rises above the dock's edge and carries the
   gradient itself, so the browser test can measure its text against it. */
.nav .nav-pilot a {
  margin-top: -16px;
  margin-inline: 4%;
  min-height: 72px;
  padding: 15px 2px 5px;
  border-radius: 999px 999px 10px 10px;
  color: var(--primary-foreground);
  background-color: var(--gradient-ui-solid);
  background-image: var(--gradient-ui);
  box-shadow: 0 10px 24px color-mix(in oklab, var(--primary) 40%, transparent);
}

.nav .nav-pilot a::before {
  display: none;
}

.nav .nav-pilot a:hover {
  color: var(--primary-foreground);
}

/* ---- sections, plates, badges ---- */

main {
  counter-reset: plate;
}

.band {
  position: relative;
  padding-block: 64px;
}

@media (min-width: 768px) {
  .band {
    padding-block: 104px;
  }
}

.band-alt {
  border-block: 1px solid var(--border);
  background: color-mix(in oklab, var(--accent) 35%, var(--background));
}

.numbered {
  counter-increment: plate;
}

.plate {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 18px;
}

.arch {
  width: 40px;
  height: 48px;
  border-radius: 999px 999px 4px 4px;
  display: grid;
  place-items: end center;
  padding-bottom: 7px;
  background-color: var(--gradient-ui-solid);
  background-image: var(--gradient-ui);
  color: var(--primary-foreground);
  font: 800 0.8125rem/1 var(--mono);
}

.arch::before {
  content: counter(plate, decimal-leading-zero);
}

.band > .wrap > h2,
.h2 {
  font-size: clamp(1.9rem, 7vw, 3.25rem);
  font-weight: 800;
  max-width: 20ch;
}

.lede {
  margin-top: 14px;
  color: var(--muted-foreground);
  font-size: 1.0625rem;
  max-width: 58ch;
}

.grad-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* A meta note: the tests behind a list, that a feature is not there yet, that a scene is invented. */
.illus,
.group > .note,
.compare > .wrap > .note {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-top: 10px;
}

.illus::before,
.group > .note::before,
.compare > .wrap > .note::before {
  content: "◇ ";
  color: var(--warning);
}

.note {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.tag,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  vertical-align: middle;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 9px;
  font-family: var(--font-text);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--signal);
  background: color-mix(in oklab, var(--signal) 11%, transparent);
  border-color: color-mix(in oklab, var(--signal) 35%, var(--border));
}

.tag {
  margin-left: 0.5rem;
  transform: translateY(-0.35em);
}

.tag::before,
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}

/* The two list headings, "Available today" and "Coming", with their marks. */
.group {
  margin-top: 40px;
}

.group > h3,
.group > h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.group > h3 svg,
.group > h4 svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.group-available > h3,
.group-available > h4 {
  color: var(--success);
}

.group-coming > h3,
.group-coming > h4 {
  color: var(--signal);
}

.group > .lede {
  margin-top: 10px;
}

.claims {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* ---- 1. the hero: the copy, and a Telegram chat where the bot bans a spammer ---- */

.hero {
  padding-block: 40px 72px;
  overflow: hidden;
  background-image: radial-gradient(
    ellipse 120% 50% at 50% 0%,
    color-mix(in oklab, var(--primary) 16%, transparent),
    transparent 70%
  );
}

@media (min-width: 960px) {
  .hero {
    padding-block: 88px 120px;
  }
}

.hero-grid {
  display: grid;
  gap: 36px;
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr 440px;
    gap: 64px;
  }
}

.hero h1 {
  font-size: clamp(2.6rem, 12vw, 5rem);
  font-weight: 800;
}

.hero h1 span {
  display: block;
}

.hero .lede {
  margin-top: 18px;
  font-size: 1.25rem;
}

.hero .actions {
  margin-top: 28px;
}

.hero .note {
  margin-top: 14px;
}

/* Where it runs (card 0261): one line under the actions, with the pin. */
.hero .eu {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--foreground);
}

.scene {
  margin: 0;
}

.phone {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--chat-bg);
  box-shadow: 0 40px 90px oklch(0.25 0.1 265 / 28%);
}

/* The gate, watermarked behind the chat. */
.phone::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 70%;
  aspect-ratio: 1 / 1.1;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  border: 2px solid color-mix(in oklab, var(--logo) 18%, transparent);
  pointer-events: none;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--background) 70%, transparent);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 2;
}

.ava {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.8125rem;
  color: #fff;
  background: oklch(0.45 0.14 160);
  flex: none;
}

.chat-head b {
  display: block;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.chat-head small {
  color: var(--muted-foreground);
  font-size: 0.75rem;
}

.chat {
  position: relative;
  z-index: 1;
  padding: 14px 12px 16px;
  display: grid;
  gap: 8px;
  min-height: 470px;
  align-content: end;
}

.msg {
  width: fit-content;
  max-width: 86%;
  padding: 7px 11px 6px;
  border-radius: 16px 16px 16px 5px;
  background: var(--bubble);
  font-size: 0.875rem;
  line-height: 1.38;
  box-shadow: 0 1px 1px oklch(0 0 0 / 6%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.msg .n {
  display: block;
  font-size: 0.75rem;
  font-weight: 750;
  margin-bottom: 1px;
}

.n-1 {
  color: var(--name-1);
}

.n-2 {
  color: var(--name-2);
}

.n-3 {
  color: var(--name-3);
}

.msg .t {
  float: right;
  margin: 6px 0 0 10px;
  font-size: 0.625rem;
  color: var(--muted-foreground);
}

.msg.own {
  justify-self: end;
  border-radius: 16px 16px 5px 16px;
  background: var(--bubble-own);
}

.msg.bot {
  border: 1px solid color-mix(in oklab, var(--logo) 40%, var(--border));
}

.msg.bot .n {
  color: var(--bot-name);
  display: flex;
  align-items: center;
  gap: 5px;
}

.msg.bot .n img {
  width: 13px;
  height: 13px;
}

.msg.cmd {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/* The banned spammer's message: struck through and muted, never faded, so it stays readable. */
.msg.spam.gone,
.msg.spam.gone .n {
  color: var(--muted-foreground);
  text-decoration: line-through;
}

.stamp {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.625rem;
  font-weight: 750;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--success);
  background: color-mix(in oklab, var(--success) 12%, transparent);
}

.chat .pending {
  opacity: 0;
  transform: translateY(10px);
}

.chat-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.chat-foot .illus {
  margin-top: 0;
}

.replay {
  flex: none;
  background: none;
  border: 0;
  padding: 6px 0;
  font-size: 0.8125rem;
  font-weight: 650;
  white-space: nowrap;
  color: var(--primary-text);
  cursor: pointer;
}

/* ---- 2. the challenge: one big line ---- */

.challenge > .wrap > h2 {
  font-size: clamp(1.6rem, 6vw, 2.75rem);
  max-width: 24ch;
  line-height: 1.14;
}

.challenge > .wrap > h2 .grad-text {
  display: inline;
}

.challenge > .wrap > .lede {
  max-width: 58ch;
}

.challenge > .wrap > .lede + .lede {
  margin-top: 10px;
}

.challenge .actions {
  margin-top: 28px;
}

/* ---- the "Available today" lists: receipts, with the tests as the proof line ---- */

.group-available .claims {
  gap: 14px;
}

@media (min-width: 760px) {
  .group-available .claims {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

.group-available .claims li {
  position: relative;
  padding: 18px 18px 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  font-size: 0.9375rem;
  display: grid;
  gap: 10px;
  align-content: start;
  -webkit-mask: radial-gradient(circle 7px at 50% 100%, #0000 98%, #000) 0 0 / 18px 100%;
  mask: radial-gradient(circle 7px at 50% 100%, #0000 98%, #000) 0 0 / 18px 100%;
}

.group-available .claims li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--success);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--success) 18%, transparent);
  margin: 2px 0 4px 2px;
}

.group-available .claims li::after {
  content: "";
  height: 22px;
  border-radius: 2px;
  opacity: 0.55;
  background: repeating-linear-gradient(
    90deg,
    var(--foreground) 0 2px,
    transparent 2px 4px,
    var(--foreground) 4px 5px,
    transparent 5px 8px,
    var(--foreground) 8px 11px,
    transparent 11px 12px
  );
}

.claims .proof {
  display: block;
  font: 0.6875rem/1.5 var(--mono);
  color: var(--muted-foreground);
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}

/* ---- the "Coming" lists: gate cards ---- */

.group-coming .claims {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 900px) {
  .shields .group-coming .claims {
    grid-template-columns: repeat(5, 1fr);
  }
}

.group-coming .claims li {
  position: relative;
  padding: 34px 14px 18px;
  text-align: center;
  border-radius: 999px 999px 14px 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  display: grid;
  justify-items: center;
  gap: 8px;
  align-content: start;
  min-height: 196px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted-foreground);
}

.group-coming .claims li svg {
  width: 30px;
  height: 30px;
  color: var(--primary);
}

/* The shields' Coming lede is the shadow line of the sketch: a heading in its own right. */
.shields .group-coming > .lede {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4.5vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--foreground);
  max-width: 24ch;
  text-wrap: balance;
}

/* In the Group DNA and pilot sections the Coming items are panels, as the sketch's
   recommendation and pulse cards. */
.dna .group-coming .claims,
.pilot .group-coming .claims {
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .dna .group-coming .claims {
    grid-template-columns: 1fr 1fr;
  }
}

.dna .group-coming .claims li,
.pilot .group-coming .claims li {
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: start;
  text-align: left;
  gap: 12px;
  padding: 14px 16px;
  min-height: 0;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--foreground);
}

.dna .group-coming .claims li svg,
.pilot .group-coming .claims li svg {
  width: 26px;
  height: 26px;
  margin-top: 1px;
}

/* A fingerprint of rings behind the Group DNA section: decoration only, no counts. */
.dna::before {
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  width: 420px;
  height: 420px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: repeating-radial-gradient(
    circle at center,
    color-mix(in oklab, var(--primary) 12%, transparent) 0 2px,
    transparent 2px 22px
  );
  pointer-events: none;
}

/* The ring's activity (card 0261): a faint sweep turning around the same rings, decoration only. It
   stops under prefers-reduced-motion with every other animation. */
.dna::after {
  content: "";
  position: absolute;
  right: -120px;
  top: 50%;
  width: 420px;
  height: 420px;
  margin-top: -210px;
  border-radius: 999px;
  background: conic-gradient(
    from 0deg,
    transparent 0 72%,
    color-mix(in oklab, var(--primary) 14%, transparent) 94%,
    transparent 100%
  );
  pointer-events: none;
  animation: dna-sweep 16s linear infinite;
}

@keyframes dna-sweep {
  to {
    transform: rotate(1turn);
  }
}

.dna {
  overflow: hidden;
}

.dna > .wrap {
  position: relative;
  z-index: 1;
}

/* ---- 4. privacy: the ledger of what is kept, and the protected entries ---- */

.privacy .group-available .claims {
  gap: 10px;
}

@media (min-width: 860px) {
  .privacy > .wrap > .group-available .claims {
    grid-template-columns: repeat(3, 1fr);
  }
}

.privacy .group-available .claims li {
  padding: 14px 16px;
  border-radius: 14px;
  border-bottom: 1px solid var(--border);
  -webkit-mask: none;
  mask: none;
}

.privacy .group-available .claims li::after {
  display: none;
}

/* Where it runs (card 0261): the lines of WHERE in src/content.mjs, each with its decision or its
   tests as the proof line, in the brand blue. */
.where {
  margin-top: 32px;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--brand-blue) 36%, var(--border));
  background: color-mix(in oklab, var(--brand-blue) 6%, var(--panel));
  box-shadow: inset 3px 0 0 color-mix(in oklab, var(--brand-blue) 70%, transparent);
}

.where > h3 {
  color: var(--brand-blue-text);
  font-size: 1.125rem;
}

.where > p {
  margin-top: 8px;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  max-width: 70ch;
}

.where .claims {
  margin-top: 16px;
  gap: 10px;
}

@media (min-width: 760px) {
  .where .claims {
    grid-template-columns: 1fr 1fr;
  }
}

.where .claims li {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--brand-blue) 5%, var(--card));
  font-size: 0.9375rem;
  display: grid;
  gap: 10px;
  align-content: start;
}

.protected {
  margin-top: 32px;
  padding: 20px 22px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in oklab, var(--special) 36%, var(--border));
  background: color-mix(in oklab, var(--special) 6%, var(--panel));
  box-shadow: inset 3px 0 0 color-mix(in oklab, var(--special) 70%, transparent);
}

.protected > h3 {
  color: var(--special);
  font-size: 1.125rem;
}

.protected > p {
  margin-top: 8px;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  max-width: 70ch;
}

.protected .group {
  margin-top: 18px;
}

.protected .group-available > h4 {
  color: var(--special);
  font-size: 1rem;
}

.protected .claims li {
  background: color-mix(in oklab, var(--special) 5%, var(--card));
}

.protected .claims li::before {
  background: var(--special);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--special) 18%, transparent);
}

/* ---- 5. the comparison: one card per question ---- */

.asks {
  margin-top: 36px;
  display: grid;
  gap: 14px;
}

@media (min-width: 860px) {
  .asks {
    grid-template-columns: 1fr 1fr;
  }
}

.compare-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: grid;
  align-content: start;
}

.compare-row h3 {
  padding: 18px 18px 14px;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}

.compare-grid {
  display: contents;
}

.us {
  padding: 14px 18px;
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  border-block: 1px solid var(--border);
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 4px 10px;
  align-items: start;
  font-size: 0.9375rem;
}

.us::before {
  content: "";
  grid-row: 1 / span 3;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background: url("brand/mark.svg") center / contain no-repeat;
}

.us > p {
  grid-column: 2;
}

.who {
  font: 600 0.6875rem/1.4 var(--mono);
  color: var(--muted-foreground);
}

.us .source,
.other .source,
.source {
  font: 0.6875rem/1.5 var(--mono);
  color: var(--muted-foreground);
}

.them {
  padding: 12px 14px 14px;
}

.them .who {
  margin-bottom: 8px;
}

.them ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

@media (min-width: 560px) {
  .them ul {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0;
  }
  .other {
    padding-inline: 10px;
    border-right: 1px dashed var(--border);
    text-align: center;
    justify-items: center;
  }
  .other:first-child {
    padding-left: 0;
  }
  .other:last-child {
    border-right: 0;
    padding-right: 0;
  }
}

.other {
  display: grid;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  align-content: start;
}

.other-name {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--foreground);
}

/* The rows come into view (card 0261): src/site.js marks each row `reveal` when the script runs
   and the reader has not asked for reduced motion, then `in` as the row is seen. The card rises,
   the question's rule draws, WardForth's answer slides in and its bar fills, then the others follow
   one by one. The words never change, and a row the script has not marked stands revealed. */
.compare-row.reveal {
  opacity: 0;
  transform: translateY(18px);
}

/* The transitions sit on the revealed state only, so a row the script holds back is hidden at once,
   not faded out, and nothing moves until it is seen. */
.compare-row.reveal.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.asks .compare-row.reveal.in:nth-child(2n) {
  transition-delay: 0.12s;
}

.compare-row h3 {
  position: relative;
}

.compare-row h3::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient);
  transform-origin: left;
  transform: scaleX(1);
}

.compare-row.reveal h3::after {
  transform: scaleX(0);
}

.compare-row.reveal.in h3::after {
  transform: scaleX(1);
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
}

.us {
  position: relative;
}

/* The bar under WardForth's answer: it fills as the row is seen. */
.us::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--gradient);
  transform-origin: left;
  transform: scaleX(1);
}

.compare-row.reveal .us {
  opacity: 0;
  transform: translateX(-14px);
}

.compare-row.reveal .us::after {
  transform: scaleX(0);
}

.compare-row.reveal.in .us {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s ease 0.3s,
    transform 0.45s ease 0.3s;
}

.compare-row.reveal.in .us::after {
  transform: scaleX(1);
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s;
}

.compare-row.reveal .other {
  opacity: 0;
  transform: translateY(8px);
}

.compare-row.reveal.in .other {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.4s ease 0.85s,
    transform 0.4s ease 0.85s;
}

.compare-row.reveal.in .other:nth-child(2) {
  transition-delay: 1.05s;
}

.compare-row.reveal.in .other:nth-child(3) {
  transition-delay: 1.25s;
}

/* ---- 6. the pilot: the door, and what is coming ---- */

.door-wrap {
  display: grid;
  justify-items: center;
  text-align: center;
}

.door {
  position: relative;
  width: min(100%, 520px);
  padding: 72px 24px 36px;
  border-radius: 999px 999px 28px 28px;
  background-image: radial-gradient(
    ellipse 80% 60% at 50% 100%,
    color-mix(in oklab, var(--primary) 20%, transparent),
    transparent 70%
  );
  background-color: var(--panel);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: inset 0 0 0 10px color-mix(in oklab, var(--logo) 8%, transparent);
  display: grid;
  justify-items: center;
}

.door > img {
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
}

.door .lede {
  margin-inline: auto;
}

.door .actions {
  margin-top: 26px;
  width: 100%;
  justify-content: center;
}

.door .button {
  width: 100%;
  min-height: 56px;
  font-size: 1rem;
}

.door .note {
  margin-top: 12px;
  color: var(--foreground);
}

.door .note a {
  color: var(--foreground);
  font-weight: 600;
}

.pilot .group-coming {
  margin-top: 56px;
}

/* ---- the footer ---- */

.foot {
  border-top: 1px solid var(--border);
  padding-block: 36px 24px;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.foot-row {
  display: grid;
  gap: 18px;
}

@media (min-width: 800px) {
  .foot-row {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 22px;
    align-items: start;
  }
  .foot-where {
    grid-column: 2 / -1;
  }
  .foot-copy {
    grid-column: 1 / -1;
  }
}

.foot a {
  color: var(--foreground);
  text-decoration: none;
  font-weight: 600;
}

.foot a:hover {
  text-decoration: underline;
}

/* ---- the help pages ---- */

.help-hero h1,
.help h1 {
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 800;
  max-width: 24ch;
}

.guides {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

@media (min-width: 900px) {
  .guides {
    grid-template-columns: repeat(3, 1fr);
  }
}

.guide {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
}

.guide h3 {
  font-size: 1.25rem;
}

.guide h3 a {
  color: var(--foreground);
  text-decoration: none;
}

.guide h3 a:hover {
  text-decoration: underline;
  text-decoration-color: var(--primary);
}

.guide p {
  margin-top: 8px;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
}

.toc,
.toc ol {
  margin: 0;
  padding-left: 1.25rem;
}

.toc li {
  margin: 0.25rem 0;
}

.toc ol {
  font-size: 0.9375rem;
}

.toc .coming > a {
  color: var(--muted-foreground);
  text-decoration-style: dashed;
}

.guide .toc {
  margin-top: 14px;
  font-size: 0.9375rem;
}

.help > .wrap {
  max-width: 66rem;
}

.crumbs {
  margin-bottom: 14px;
}

.help > .wrap > .note {
  margin-top: 14px;
}

.toc-box,
.other-guides {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 28px 0;
  max-width: 48rem;
  box-shadow: inset 3px 0 0 color-mix(in oklab, var(--primary) 70%, transparent);
}

.toc-box h2,
.other-guides h2 {
  font-size: 1.125rem;
  margin-bottom: 10px;
}

.other-guides ul {
  margin: 0;
  padding-left: 1.25rem;
}

.other-guides [aria-current="page"] {
  color: var(--foreground);
  text-decoration: none;
}

.doc {
  max-width: 68ch;
}

.doc p {
  margin: 0 0 1em;
}

.doc h2 {
  font-size: 1.75rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.doc h3 {
  font-size: 1.3125rem;
  margin-top: 2rem;
}

.doc h4 {
  font-size: 1.0625rem;
  margin-top: 1.5rem;
}

.doc h2,
.doc h3,
.doc h4 {
  margin-bottom: 0.6em;
}

.doc ul,
.doc ol {
  padding-left: 1.5rem;
  margin: 0 0 1em;
}

.doc li {
  margin: 0.375rem 0;
}

.doc li > ul,
.doc li > ol {
  margin: 0.375rem 0 0;
}

code {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--accent);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0 0.3em;
  overflow-wrap: anywhere;
}

.table {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.doc th,
.doc td {
  text-align: left;
  vertical-align: top;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--border);
  min-width: 8rem;
}

.doc tbody tr:last-child td {
  border-bottom: 0;
}

.doc th {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}

.doc .meta,
.cite {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.coming-part {
  border-left: 3px dashed color-mix(in oklab, var(--signal) 60%, var(--border));
  padding-left: 1.25rem;
  margin-top: 3rem;
}

.coming-part > h2:first-child {
  margin-top: 0;
  border-top: 0;
  padding-top: 0;
}

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---- the translation page (card 0276) ---- */

.translate .files {
  columns: 2 14rem;
  column-gap: 2rem;
}

.translate .files li {
  break-inside: avoid;
}

.translate .codes {
  margin: 0 0 1.5rem;
}

.translate .codes summary {
  cursor: pointer;
  font-weight: 650;
  padding-block: 0.5rem;
}

.translate .codes .table {
  margin-top: 0.75rem;
  max-height: 28rem;
  overflow-y: auto;
}

.translate h2 .tag {
  vertical-align: middle;
}


/* ---- the help search (card 0258): the form on the help index and on every help page, hidden
   until src/search.js runs. The tokens are the site's own (src/styles.css). ---- */

.search {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 24px 0 0;
  max-width: 48rem;
  box-shadow: inset 3px 0 0 color-mix(in oklab, var(--signal) 70%, transparent);
}

.search label {
  display: block;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.search input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}

.search input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.search .note {
  margin-top: 8px;
}

.search-status {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.search-status:empty {
  display: none;
}

.search-results {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.search-results:empty {
  display: none;
}

.search-results > li {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.search-results a {
  font-weight: 600;
}

.search-results p {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

.search-results ul {
  list-style: none;
  margin: 6px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--border);
}

.search-results ul li {
  margin: 8px 0;
}

.search-results ul a {
  font-weight: 500;
}

.search-results mark {
  color: var(--foreground);
  background: color-mix(in oklab, var(--primary) 28%, transparent);
  border-radius: 3px;
  padding: 0 2px;
}

/* A result inside a Coming part: the same mark as the Coming entries of the table of contents. */
.search-results .coming-tag {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted-foreground);
  border: 1px dashed color-mix(in oklab, var(--signal) 60%, var(--border));
  border-radius: 999px;
  padding: 0 8px;
  vertical-align: middle;
}