/* OpenVoiceType documentation site. The colours come from the app's artwork (docs/ARTWORK.md): the icon's ink and the
   waveform's blue to violet. System fonts only: the site loads nothing from anyone else. */

:root {
  --bg: #fbfbfa;
  --bg-soft: #f3f3f0;
  --surface: #ffffff;
  --ink: #14141f;
  --ink-2: #454659;
  --ink-3: #6e6f82;
  --line: #e3e3de;
  --line-strong: #cfcfc8;
  --link: #2459c4;
  --accent: #59a6ff;
  --accent-2: #b88fff;
  --accent-ink: #2f6fd6;
  --gradient: linear-gradient(90deg, #59a6ff, #b88fff);
  --code-bg: #f0f0ec;
  --code-ink: #2b2c3d;
  --green: #15803d;
  --amber: #b45309;
  --red: #c2410c;
  --hero-top: #2b2e42;
  --hero-bottom: #12121c;
  --shadow: 0 1px 2px rgb(20 20 31 / 6%), 0 8px 24px rgb(20 20 31 / 6%);
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --topbar: 60px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0f16;
    --bg-soft: #141621;
    --surface: #191b28;
    --ink: #ececf3;
    --ink-2: #b7b9ca;
    --ink-3: #8b8da2;
    --line: #262939;
    --line-strong: #353849;
    --link: #8cc0ff;
    --accent-ink: #8cc0ff;
    --code-bg: #171a27;
    --code-ink: #dcdcea;
    --green: #4ade80;
    --amber: #fbbf24;
    --red: #fb923c;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 35%);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0e0f16;
  --bg-soft: #141621;
  --surface: #191b28;
  --ink: #ececf3;
  --ink-2: #b7b9ca;
  --ink-3: #8b8da2;
  --line: #262939;
  --line-strong: #353849;
  --link: #8cc0ff;
  --accent-ink: #8cc0ff;
  --code-bg: #171a27;
  --code-ink: #dcdcea;
  --green: #4ade80;
  --amber: #fbbf24;
  --red: #fb923c;
  --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 12px 32px rgb(0 0 0 / 35%);
  color-scheme: dark;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--topbar) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
code, kbd, pre { font-family: var(--mono); font-size: 0.88em; }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  text-align: center;
  line-height: 1.4;
}
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--surface); }
.skip:focus { left: 8px; }
.muted { color: var(--ink-3); }

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover { transform: translateY(-1px); box-shadow: var(--shadow); text-decoration: none; }
.button-ghost { background: transparent; color: inherit; border-color: currentColor; }
.button-small { padding: 7px 13px; font-size: 14px; border-radius: 8px; }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}
.icon-button:hover { background: var(--bg-soft); color: var(--ink); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button svg.icon-fill { fill: currentColor; stroke: none; }
.icon-button::-webkit-details-marker { display: none; }

/* The theme button shows the moon in light and the sun in dark. */
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

/* Images that exist in a light and a dark version. */
.only-dark { display: none; }
:root[data-theme="dark"] .only-dark { display: block; }
:root[data-theme="dark"] .only-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-dark { display: block; }
  :root:not([data-theme="light"]) .only-light { display: none; }
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 1280px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
.brand img { border-radius: 7px; }
.topnav { display: flex; gap: 4px; flex: 1; }
.topnav a { padding: 6px 10px; border-radius: 8px; color: var(--ink-2); font-size: 14.5px; font-weight: 500; text-decoration: none; }
.topnav a:hover { color: var(--ink); background: var(--bg-soft); }
.topnav a[aria-current="page"] { color: var(--ink); background: var(--bg-soft); }
.actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.actions .button { margin-left: 6px; }

.menu { display: none; position: relative; }
.menu-panel {
  position: absolute;
  right: 0;
  top: 44px;
  width: min(300px, calc(100vw - 32px));
  max-height: calc(100vh - 80px);
  overflow: auto;
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.menu-panel a { display: block; padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.menu-panel a:hover { background: var(--bg-soft); }
.menu-heading { margin: 10px 10px 4px; color: var(--ink-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------- Landing page ---------- */

.hero {
  position: relative;
  overflow: hidden;
  color: #ececf3;
  background:
    radial-gradient(900px 420px at 78% 38%, rgb(89 166 255 / 22%), transparent 70%),
    radial-gradient(700px 380px at 95% 90%, rgb(184 143 255 / 18%), transparent 70%),
    linear-gradient(180deg, var(--hero-top), var(--hero-bottom));
}
.hero a:not(.button) { color: #a9cdff; }
.hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 24px 96px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.eyebrow { margin: 0 0 18px; color: #a7a9c0; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; }
.hero h1 {
  margin: 0;
  font: 700 clamp(38px, 5.4vw, 62px)/1.04 var(--display);
  letter-spacing: -0.035em;
}
.gradient-text { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { margin: 22px 0 0; max-width: 34em; color: #c4c6d8; font-size: 18.5px; line-height: 1.6; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero .button { background: #ececf3; color: #12121c; }
.hero .button-ghost { background: transparent; color: #ececf3; border-color: rgb(236 236 243 / 35%); }
.hero .button-ghost:hover { border-color: rgb(236 236 243 / 70%); }
.fineprint { margin: 18px 0 0; color: #9092aa; font-size: 13.5px; }
.fineprint strong { color: #c4c6d8; }

/* The demo: a window with the spoken words and the pasted text, and the app's overlay below it. */
.demo { position: relative; padding-bottom: 38px; }
.demo-window {
  border-radius: 14px;
  background: #f7f7f5;
  color: #1a1a24;
  box-shadow: 0 30px 80px rgb(0 0 0 / 45%), 0 0 0 1px rgb(255 255 255 / 8%);
  overflow: hidden;
}
.demo-titlebar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #ebebe8; border-bottom: 1px solid #deded9; }
.demo-titlebar i { width: 11px; height: 11px; border-radius: 50%; background: #d4d4cf; }
.demo-titlebar i:nth-child(1) { background: #ff5f57; }
.demo-titlebar i:nth-child(2) { background: #febc2e; }
.demo-titlebar i:nth-child(3) { background: #28c840; }
.demo-titlebar span { margin-left: 10px; color: #6e6f7a; font-size: 13px; font-weight: 600; }
.demo-body { min-height: 196px; padding: 22px 24px 26px; display: grid; gap: 16px; align-content: start; }
.demo-body p { margin: 0; font-size: 16px; line-height: 1.5; transition: opacity 0.35s ease; }
.demo-label { display: block; margin-bottom: 4px; color: #8a8b96; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-said { color: #6b6c78; font-style: italic; }
.demo-typed { padding: 12px 14px; border-radius: 10px; background: #ffffff; box-shadow: 0 0 0 1px #e2e2dd; font-weight: 500; }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.18em; background: #59a6ff; animation: blink 1s steps(2) infinite; }
/* The message field keeps its place; the text arrives when the overlay says Pasted. */
.demo-typed .typed, .demo-typed .placeholder { transition: opacity 0.35s ease; }
.demo-typed .placeholder { position: absolute; left: 14px; bottom: 12px; color: #9a9ba6; font-weight: 400; }
.demo-typed { position: relative; }
.demo:not([data-state="pasted"]) .demo-typed .typed { opacity: 0; }
.demo[data-state="pasted"] .demo-typed .placeholder { opacity: 0; }
.demo[data-state="pasted"] .demo-said { opacity: 0.55; }

.pill {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 250px;
  height: 58px;
  border-radius: 999px;
  background: #1d1d22;
  color: #f2f2f5;
  box-shadow: 0 16px 40px rgb(0 0 0 / 45%), inset 0 0 0 1px rgb(255 255 255 / 10%);
  font-size: 15px;
  font-weight: 600;
}
.pill-state { grid-area: 1 / 1; display: none; align-items: center; gap: 12px; }
.pill-state svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo[data-state="recording"] .pill-recording,
.demo[data-state="transcribing"] .pill-transcribing,
.demo[data-state="polishing"] .pill-polishing,
.demo[data-state="pasted"] .pill-pasted { display: inline-flex; animation: fade-in 0.25s ease; }
.pill-polishing svg { fill: #b88fff; stroke: none; }
.pill-pasted svg { stroke: #4ade80; stroke-width: 2.6; }
.rec { width: 11px; height: 11px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 0 4px rgb(255 59 48 / 18%); }
.bars { display: inline-flex; align-items: center; gap: 3px; height: 26px; }
.bars i { width: 3px; height: 30%; border-radius: 2px; background: linear-gradient(#59a6ff, #b88fff); animation: bar 0.9s ease-in-out infinite; }
.bars i:nth-child(3n) { animation-delay: -0.3s; }
.bars i:nth-child(3n+1) { animation-delay: -0.55s; }
.bars i:nth-child(4n) { animation-duration: 1.1s; }
.pill-time { color: #c9c9d2; font-variant-numeric: tabular-nums; }
.shimmer {
  background: linear-gradient(90deg, #8e8ea0 0%, #ffffff 45%, #8e8ea0 90%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 1.3s linear infinite;
}

@keyframes bar { 0%, 100% { height: 25%; } 50% { height: 100%; } }
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Facts under the hero. */
.facts { border-bottom: 1px solid var(--line); background: var(--surface); }
.facts-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); }
.facts-inner > div { padding: 26px 22px; display: grid; gap: 4px; border-left: 1px solid var(--line); }
.facts-inner > div:first-child { border-left: 0; padding-left: 0; }
.facts strong { font: 700 22px/1.2 var(--display); letter-spacing: -0.02em; }
.facts span { color: var(--ink-3); font-size: 14px; line-height: 1.45; }

.section { padding: 96px 0; }
.section-soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.kicker { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.section h2 { margin: 0; max-width: 22em; font: 700 clamp(28px, 3.4vw, 40px)/1.12 var(--display); letter-spacing: -0.028em; }
.section-lede { max-width: 46em; margin: 16px 0 0; color: var(--ink-2); font-size: 17px; }
.more { margin: 28px 0 0; font-weight: 600; }
.more a { text-decoration: none; }
.more a:hover { text-decoration: underline; }

.steps { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.steps li { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.steps h3, .card h3, .install h3 { margin: 18px 0 6px; font-size: 18px; letter-spacing: -0.01em; }
.steps p, .card p, .install p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.step-key { display: inline-flex; align-items: center; gap: 5px; height: 38px; }
.step-key kbd { font-size: 14px; padding: 0.2em 0.55em; }
.step-wave { gap: 3px; }
.step-wave i { width: 4px; height: 40%; border-radius: 2px; background: linear-gradient(#59a6ff, #b88fff); animation: bar 1s ease-in-out infinite; }
.step-wave i:nth-child(2n) { animation-delay: -0.4s; }
.step-wave i:nth-child(3n) { animation-delay: -0.7s; }
.step-check svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: color-mix(in srgb, var(--green) 14%, transparent); fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.cards { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.card { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.card h3 { margin-top: 0; }
.card h3::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 16px; border-radius: 2px; background: var(--gradient); }

.diagram-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.diagram-card {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.diagram-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); text-decoration: none; }
.diagram-thumb { display: block; aspect-ratio: 16 / 9.4; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.diagram-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.diagram-text { display: grid; gap: 4px; align-content: start; padding: 16px 18px 18px; }
.diagram-text strong { font-size: 16px; }
.diagram-text span { color: var(--ink-3); font-size: 14px; line-height: 1.45; }

.table-wrap { margin-top: 32px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.table-wrap table { margin: 0; border: 0; min-width: 640px; }
.table-wrap th:first-child, .table-wrap td:first-child { padding-left: 20px; }
.split { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.split h3 { margin: 0 0 8px; font-size: 18px; }
.split ul, .privacy ul { margin: 0; padding-left: 1.1em; color: var(--ink-2); }
.split li, .privacy li { margin: 6px 0; }

.privacy { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.privacy-col { padding: 26px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.privacy-col h3 { margin: 0 0 12px; font-size: 17px; display: flex; align-items: center; gap: 10px; }
.privacy-col h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.privacy-stays h3::before { background: var(--green); }
.privacy-sent h3::before { background: var(--accent); }
.privacy-never h3::before { background: var(--red); }

.install { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: install; }
.install li { padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); counter-increment: install; }
.install li::before {
  content: counter(install);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
}

.closing { padding: 96px 0; text-align: center; background: radial-gradient(700px 300px at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
.closing-inner { display: grid; justify-items: center; }
.closing img { border-radius: 16px; box-shadow: var(--shadow); }
.closing h2 { margin: 22px 0 0; font: 700 clamp(28px, 3.4vw, 40px)/1.15 var(--display); letter-spacing: -0.028em; }
.closing .cta { justify-content: center; }
.closing .button-ghost { color: var(--ink); }

/* ---------- Documentation pages ---------- */

.doc-shell {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr) 220px;
  gap: 48px;
}
.sidebar, .toc { position: sticky; top: var(--topbar); align-self: start; max-height: calc(100vh - var(--topbar)); overflow-y: auto; padding: 32px 0; }
.sidebar-toggle { display: none; }
.sidenav-heading, .toc-heading { margin: 22px 0 6px; color: var(--ink-3); font-size: 12px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.sidenav-heading:first-child, .toc-heading { margin-top: 0; }
.sidenav ul { list-style: none; margin: 0; padding: 0; }
.sidenav a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; margin-left: -10px; border-radius: 8px; color: var(--ink-2); font-size: 14.5px; text-decoration: none; }
.sidenav a:hover { color: var(--ink); background: var(--bg-soft); }
.sidenav a[aria-current="page"] { color: var(--ink); background: var(--bg-soft); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.external { color: var(--ink-3); font-size: 12px; }
.toc-list { display: grid; border-left: 1px solid var(--line); }
.toc-list a { padding: 4px 0 4px 14px; margin-left: -1px; border-left: 1px solid transparent; color: var(--ink-3); font-size: 13.5px; line-height: 1.4; text-decoration: none; }
.toc-list a:hover { color: var(--ink); }
.toc-list a.toc-sub { padding-left: 26px; font-size: 13px; }
.toc-list a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); }

.doc { min-width: 0; padding: 40px 0 96px; }
.doc-header { padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.doc-header h1 { margin: 0; font: 700 clamp(30px, 3.6vw, 42px)/1.12 var(--display); letter-spacing: -0.03em; }
.doc-source { display: inline-block; margin-top: 10px; color: var(--ink-3); font-size: 13.5px; text-decoration: none; }
.doc-source:hover { color: var(--link); text-decoration: underline; }

.prose { max-width: 780px; color: var(--ink); font-size: 16.5px; line-height: 1.7; }
.prose > :first-child { margin-top: 24px; }
.prose h2 { margin: 2.2em 0 0.6em; padding-top: 0.2em; font: 700 25px/1.25 var(--display); letter-spacing: -0.02em; }
.prose h3 { margin: 1.8em 0 0.5em; font: 650 19px/1.3 var(--display); letter-spacing: -0.01em; }
.prose h4 { margin: 1.5em 0 0.4em; font-size: 16.5px; }
.prose p, .prose ul, .prose ol, .prose table, .prose blockquote, .prose pre { margin: 0 0 1.1em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0.3em 0; }
.prose li > ul, .prose li > ol { margin: 0.3em 0; }
.prose strong { font-weight: 650; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose img { border-radius: 10px; }
.prose picture img { border: 1px solid var(--line); }
.prose blockquote { margin-left: 0; padding: 14px 18px; border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; background: var(--bg-soft); color: var(--ink-2); }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose :not(pre) > code { padding: 0.12em 0.38em; border-radius: 6px; background: var(--code-bg); color: var(--code-ink); overflow-wrap: anywhere; }
.anchor { margin-left: 8px; color: var(--ink-3); font-weight: 400; text-decoration: none; opacity: 0; transition: opacity 0.15s; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }
.to-github::after { content: " ↗"; font-size: 0.8em; color: var(--ink-3); }

/* Tables, in the prose and on the landing page. */
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; display: block; overflow-x: auto; }
.table-wrap table { display: table; }
th, td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--ink-3); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
.prose table { border-top: 1px solid var(--line); }

/* Code blocks. */
.prose div.highlighter-rouge, .prose pre { position: relative; }
.prose pre { overflow-x: auto; padding: 16px 18px; border-radius: 12px; background: var(--code-bg); color: var(--code-ink); font-size: 14px; line-height: 1.6; border: 1px solid var(--line); }
.prose pre code { font-size: inherit; }
.copy { position: absolute; top: 8px; right: 8px; padding: 4px 9px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink-2); font: 600 12px var(--font); cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.has-copy:hover .copy, .copy:focus { opacity: 1; }
.highlight .c, .highlight .c1, .highlight .cm { color: var(--ink-3); font-style: italic; }
.highlight .s, .highlight .s1, .highlight .s2 { color: var(--green); }
.highlight .k, .highlight .kd, .highlight .nb { color: var(--accent-ink); }
.highlight .nv, .highlight .na { color: var(--amber); }

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--line); background: var(--bg-soft); color: var(--ink-2); font-size: 14.5px; }
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px 24px; display: grid; grid-template-columns: 1.1fr 2fr; gap: 48px; }
.footer-brand p { margin: 12px 0 0; max-width: 28em; }
.footer-note { color: var(--ink-3); font-size: 13.5px; }
.footer-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.footer-heading { margin: 0 0 8px; color: var(--ink); font-weight: 700; font-size: 13px; }
.footer-columns a { display: block; padding: 3px 0; color: var(--ink-2); text-decoration: none; }
.footer-columns a:hover { color: var(--ink); text-decoration: underline; }
.footer-credits { display: block; padding-top: 0; padding-bottom: 40px; color: var(--ink-3); font-size: 13px; }
.footer-credits p { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.footer a { color: inherit; }

/* ---------- Narrower screens ---------- */

@media (max-width: 1180px) {
  .doc-shell { grid-template-columns: 220px minmax(0, 1fr); }
  .toc { display: none; }
}

@media (max-width: 960px) {
  .topnav { display: none; }
  .actions .icon-button[title="GitHub"] { display: none; }
  .menu { display: block; }
  .hero-inner { grid-template-columns: 1fr; gap: 48px; padding: 56px 20px 72px; }
  .demo { max-width: 560px; }
  .facts-inner { grid-template-columns: 1fr 1fr; }
  .facts-inner > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts-inner > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .steps, .cards, .diagram-grid, .privacy, .install { grid-template-columns: 1fr 1fr; }
  .doc-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sidebar { display: none; }
  .sidebar-toggle { display: block; margin-top: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .sidebar-toggle summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
  .sidebar-toggle .sidenav { padding: 0 16px 14px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .topbar-inner { padding: 0 16px; gap: 12px; }
  .section { padding: 68px 0; }
  .section-inner, .facts-inner { padding: 0 16px; }
  .hero-inner { padding: 44px 16px 60px; }
  .lede { font-size: 17px; }
  .demo-body { padding: 18px; min-height: 0; }
  .pill { width: 220px; height: 52px; font-size: 14px; }
  .facts-inner { grid-template-columns: 1fr; }
  .facts-inner > div { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .facts-inner > div:first-child { border-top: 0; }
  .steps, .cards, .diagram-grid, .privacy, .install, .split { grid-template-columns: 1fr; }
  .doc-shell { padding: 0 16px; }
  .prose { font-size: 16px; }
  .footer-columns { grid-template-columns: 1fr 1fr; }
  .actions .button-small { display: none; }
}

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