/* Ovillo site. Layout: one calm column on paper, product stills beside short text, one dark band for privacy.
   The palette, serif and mark are the app's own. Charter ships with every Mac (the only platform Ovillo runs on), so no web fonts are loaded. */
:root {
  --paper: #f3efe5;
  --paper-light: #fbf9f3;
  --paper-deep: #e7e0d2;
  --ink: #153d3c;
  --ink-soft: #496461;
  --line: #c9c3b5;
  --accent: #a94734;
  --band: #153d3c;
  --band-text: #f3efe5;
  --band-soft: #b9cbc6;
  --button: #153d3c;
  --button-text: #fbf9f3;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --measure: 62ch;
  --wide: 1120px;
  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3rem;
  --step-2: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  --step-3: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);
  --section: 96px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --lift: 0 1px 2px rgba(0, 0, 0, .05), 0 12px 32px rgba(0, 0, 0, .08);
  --outline: rgba(0, 0, 0, .1);
  color-scheme: light;
}
@media (max-width: 760px) { :root { --section: 64px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --outline: rgba(255, 255, 255, .1);
    --paper: #0f2627; --paper-light: #153233; --paper-deep: #1c3d3e; --ink: #ecf1ec; --ink-soft: #a9bfbb; --line: #2f5050;
    --accent: #e3917b; --band: #0a1c1d; --band-text: #ecf1ec; --band-soft: #a9bfbb; --button: #ecf1ec; --button-text: #0f2627; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --outline: rgba(255, 255, 255, .1);
  --paper: #0f2627; --paper-light: #153233; --paper-deep: #1c3d3e; --ink: #ecf1ec; --ink-soft: #a9bfbb; --line: #2f5050;
  --accent: #e3917b; --band: #0a1c1d; --band-text: #ecf1ec; --band-soft: #a9bfbb; --button: #ecf1ec; --button-text: #0f2627; color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
html { scrollbar-color: color-mix(in srgb, var(--ink-soft) 60%, transparent) var(--paper); accent-color: var(--ink); caret-color: var(--accent); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: var(--step-3); }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); line-height: 1.25; letter-spacing: 0; }
p { margin: 0; text-wrap: pretty; }
.wrap { max-width: var(--wide); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--button); color: var(--button-text); padding: 10px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { top: 12px; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 600 1.25rem/1 var(--serif); letter-spacing: -.01em; }
.brand svg { width: 34px; height: 34px; flex: none; }
.nav { display: flex; gap: 20px; margin-left: auto; font-size: var(--step--1); }
.nav a { text-decoration: none; color: var(--ink-soft); padding-block: 10px; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; border-radius: 10px; font: 600 1rem/1.2 var(--sans); text-decoration: none; border: 1px solid var(--button); background: var(--button); color: var(--button-text); cursor: pointer; transition: transform 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease); }

.btn:active { transform: scale(.96); }

.btn.quiet { background: transparent; color: var(--ink); border-color: var(--line); }

.btn svg { width: 18px; height: 18px; }
.top .btn { min-height: 36px; padding: 8px 16px; font-size: .9375rem; border-radius: 8px; }
@media (max-width: 760px) { .nav { display: none; } .top .btn { margin-left: auto; } }

/* hero */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; padding-block: 64px 96px; }
.eyebrow { font: 500 var(--step--1)/1.4 var(--sans); color: var(--ink-soft); }
.hero h1 { margin: 0 0 20px; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 34ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.meta { margin-top: 16px; font-size: var(--step--1); color: var(--ink-soft); }
.film { position: relative; }
.film video { width: 100%; aspect-ratio: 4 / 5; border-radius: 16px; background: #f3efe5; box-shadow: var(--lift); object-fit: cover; }
.film .play { margin-top: 14px; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 48px 64px; } .film { max-width: 460px; } }

/* story line */
.pile { border-top: 1px solid var(--line); }
.pile .wrap { padding-block: var(--section); display: grid; gap: 20px; }
.pile .big { font: 600 var(--step-3)/1.05 var(--serif); letter-spacing: -.025em; max-width: 18ch; text-wrap: balance; hyphens: manual; }
.pile p:not(.big) { max-width: var(--measure); color: var(--ink-soft); font-size: var(--step-1); line-height: 1.5; }

/* how it works: a calm bento. Two tiles show product UI (the answer, the stamp); the others are a sentence in large type,
   a drawn line and a sheet of paper, so the eye has room. Copy sits at the top of every tile, pictures sit low with air around them. */
.how .wrap { padding-block: 48px var(--section); display: grid; gap: 40px; }
.how h2 { max-width: 24ch; }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "hero hero hero hero drop drop" "stamp stamp chart chart brief brief"; gap: 16px; }
.tile { display: flex; flex-direction: column; gap: 0; min-height: 360px; background: var(--paper-light); border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.t-hero { grid-area: hero; min-height: 480px; } .t-drop { grid-area: drop; min-height: 480px; } .t-stamp { grid-area: stamp; } .t-chart { grid-area: chart; } .t-brief { grid-area: brief; }
.tcopy { padding: 32px 32px 0; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-soft); max-width: 40ch; }
.tcopy b { color: var(--ink); font-weight: 600; }
.pic { position: relative; flex: 1; margin-top: 32px; }
.pic img { position: absolute; max-width: none; height: auto; border-radius: 12px; box-shadow: var(--lift); outline: 1px solid var(--outline); outline-offset: -1px; }
/* hero: the conversation and its page, inset on three sides, running off the bottom */
.t-hero img { left: 48px; right: 48px; width: calc(100% - 96px); max-width: 560px; top: 0; border-radius: 12px 12px 0 0; }
/* statement: the sentence is the picture */
.t-drop { justify-content: flex-end; padding-bottom: 32px; }
.say { padding: 32px 32px 0; font: 600 clamp(2rem, 1.4rem + 1.6vw, 2.6rem)/1.08 var(--serif); letter-spacing: -.02em; max-width: 12ch; margin-bottom: auto; }
.t-drop .tcopy { padding-top: 0; }
.types { list-style: none; margin: 20px 0 0; padding: 0 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.types li { font: 500 .875rem/1 var(--sans); color: var(--ink-soft); padding: 7px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
/* component: the stamp alone, small, with room */
.t-stamp img { left: 32px; bottom: 32px; width: calc(100% - 64px); max-width: 300px; }
/* diagram: one drawn line */
.spark { position: absolute; left: 24px; right: 24px; bottom: 24px; width: calc(100% - 48px); height: auto; overflow: visible; }
.spark .rng { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 5 6; }
.spark .old { fill: none; stroke: color-mix(in srgb, var(--ink-soft) 55%, transparent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.spark .drop { stroke: var(--accent); stroke-width: 4.5; stroke-linecap: round; }
.spark .dot { fill: color-mix(in srgb, var(--ink-soft) 55%, transparent); }
.spark .key { fill: var(--ink); }
.spark .end { fill: var(--paper-light); stroke: var(--accent); stroke-width: 4; }
.spark text { font-family: var(--sans); fill: var(--ink-soft); }
.spark .lbl { font-size: 12px; }
.spark .val { font-size: 15px; font-weight: 600; fill: var(--ink); }
.spark .val.big { font-size: 20px; font-weight: 700; }
.spark .yr text { font-size: 12px; }
/* object: the brief as a sheet of paper, the one place a tilt earns its keep */
.t-brief img { left: 50%; top: 0; width: 82%; max-width: 360px; transform: translateX(-50%) rotate(-2deg); transform-origin: 50% 0; border-radius: 4px; }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "hero hero" "drop stamp" "chart brief"; }
  .t-hero { min-height: 440px; } .t-drop { min-height: 360px; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "drop" "stamp" "chart" "brief"; }
  .tile, .t-drop { min-height: 320px; } .t-hero { min-height: 380px; }
  .tcopy, .say { padding-left: 24px; padding-right: 24px; } .types { padding: 0 24px; }
  .t-hero img { left: 24px; width: calc(100% - 48px); }
  .t-stamp img { left: 24px; width: calc(100% - 48px); }
}

/* privacy band */
.band { background: var(--band); color: var(--band-text); }
.band .wrap { padding-block: var(--section); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.band .eyebrow { color: var(--band-soft); }
.band h2 { margin: 0 0 24px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.facts li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--band-soft); }
.facts li b { color: var(--band-text); font-weight: 650; }
.facts svg { width: 22px; height: 22px; margin-top: 2px; }
.band .shot img { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 16px 40px rgba(0, 0, 0, .28); }
.band a { color: var(--band-text); }
.honest { margin-top: 22px; font-size: var(--step--1); color: var(--band-soft); max-width: 52ch; }
@media (max-width: 860px) { .band .wrap { grid-template-columns: minmax(0, 1fr); } }

/* in charge + who */
.split .wrap { padding-block: var(--section); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; }
.split .wrap + .wrap { border-top: 1px solid var(--line); }
.points { display: grid; gap: 24px; }
.points div { display: grid; gap: 6px; }
.points p { color: var(--ink-soft); }
@media (max-width: 760px) { .split .wrap { grid-template-columns: minmax(0, 1fr); } }

/* price */
.price { background: var(--paper-deep); }
.price .wrap { padding-block: var(--section); display: grid; gap: 16px; justify-items: start; }
.price .big { font: 600 clamp(3.2rem, 2rem + 6vw, 6rem)/1 var(--serif); letter-spacing: -.03em; }
.price p:not(.big) { max-width: var(--measure); color: var(--ink-soft); font-size: var(--step-1); line-height: 1.5; }

/* founder note */
.note .wrap { padding-block: var(--section); }
.note blockquote { margin: 0; max-width: 40ch; font: 500 var(--step-2)/1.3 var(--serif); letter-spacing: -.015em; }
.note cite { display: block; margin-top: 18px; font: 400 var(--step--1)/1.4 var(--sans); color: var(--ink-soft); font-style: normal; }
.draftflag { display: inline-block; margin-bottom: 16px; padding: 4px 10px; border-radius: 6px; background: var(--accent); color: var(--paper-light); font: 600 .8125rem/1.3 var(--sans); }

/* faq */
.faq .wrap { padding-block: var(--section); display: grid; gap: 24px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding-block: 4px; max-width: 760px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font: 600 var(--step-1)/1.3 var(--serif); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font: 400 1.5rem/1 var(--sans); color: var(--ink-soft); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 18px; color: var(--ink-soft); max-width: var(--measure); }
.faq details p + p { margin-top: -6px; }

/* final call */
.final .wrap { padding-block: var(--section); display: grid; gap: 16px; justify-items: center; text-align: center; }
.final p { color: var(--ink-soft); max-width: 46ch; }

/* footer */
.foot { border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--ink-soft); }
.foot .wrap { padding-block: 32px 40px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: baseline; }
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot nav a { padding-block: 10px; }
.foot .legal { flex-basis: 100%; max-width: 80ch; }

/* reading pages: guide, privacy, legal */
.page .wrap { padding-block: 64px var(--section); display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.page article { max-width: 70ch; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.page h1 { font-size: var(--step-3); margin-bottom: 4px; }
.page h2 { margin-top: 26px; }
.page h3 { margin-top: 10px; }
.page p, .page li { color: var(--ink-soft); }
.page strong { color: var(--ink); font-weight: 650; }
.page ol, .page ul { margin: 0; padding-left: 1.3em; display: grid; gap: 10px; }
.page .lede { max-width: 54ch; }
.callout { border-radius: 14px; padding: 18px 20px; background: var(--paper-light); border: 1px solid var(--line); display: grid; gap: 6px; }
.callout.warn { border-color: var(--accent); }
.callout b { color: var(--ink); }
.ui { font: 600 .95em/1.2 var(--sans); padding: 1px 7px; border-radius: 6px; background: var(--paper-deep); color: var(--ink); white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.toc { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--step--1); }
.figure img { border-radius: 12px; box-shadow: 0 0 0 1px rgba(21, 61, 60, .10); max-width: min(420px, 100%); }
.todo { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--ink); padding: 0 4px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* signature: the app's own source chip, used only where the copy is about sources */
.src { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--paper-light); color: var(--ink); font: 500 .875em/1.5 var(--sans); white-space: nowrap; vertical-align: 1px; }
.src svg { width: 11px; height: 13px; color: var(--ink-soft); flex: none; }
.nav a { transition: color 160ms var(--ease); }

/* images get a 1px neutral outline that sits on any surface (pure black or white, never a tint) */
.shot img, .film video, .figure img { outline: 1px solid var(--outline); outline-offset: -1px; }

/* hover only where a real pointer hovers; touch taps would leave it stuck */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in srgb, var(--button) 86%, var(--paper)); }
  .btn.quiet:hover { background: var(--paper-light); border-color: var(--ink-soft); }
  .nav a:hover { color: var(--ink); text-decoration: underline; }
}

/* the one authored entrance: the hero copy settles in, a short stagger, then stays put */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.hero .wrap > div:first-child > * { animation: rise 520ms var(--ease) both; }
.hero .wrap > div:first-child > :nth-child(2) { animation-delay: 60ms; }
.hero .wrap > div:first-child > :nth-child(3) { animation-delay: 120ms; }
.hero .wrap > div:first-child > :nth-child(4) { animation-delay: 180ms; }
.film { animation: rise 640ms var(--ease) 120ms both; }

/* switching from the muted cut to the full film: a brief blur hides the source swap */
.film video { transition: filter 220ms var(--ease), opacity 220ms var(--ease); }
.film video.swapping { filter: blur(3px); opacity: .7; }

@media (prefers-reduced-motion: reduce) {
  @keyframes rise { from { opacity: 0; } }
  .film video { transition: opacity 160ms linear; }
  .film video.swapping { filter: none; }
}

/* GitHub: the nav link, the button and its star count (filled at build time by tools/stars.mjs, hidden until there are a few) */
.gh-link { display: inline-flex; align-items: center; gap: 6px; }
.gh-link svg { width: 16px; height: 16px; }
.btn.gh svg { width: 18px; height: 18px; flex: none; }
.stars { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding-left: 12px; border-left: 1px solid color-mix(in srgb, var(--button-text) 30%, transparent); font-variant-numeric: tabular-nums; font-weight: 500; }
.stars svg { width: 14px; height: 14px; }

/* open source: a quiet split after the privacy band */
.open .wrap { padding-block: var(--section); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; border-bottom: 1px solid var(--line); }
.open h2 { margin-bottom: 16px; }
.open p { color: var(--ink-soft); max-width: 52ch; }
.open-links ul { list-style: none; margin: 0; padding: 0; display: grid; }
.open-links li { border-top: 1px solid var(--line); }
.open-links li:last-child { border-bottom: 1px solid var(--line); }
.open-links a { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px; text-decoration: none; font: 600 var(--step-1)/1.3 var(--serif); color: var(--ink); }
.open-links a::after { content: "\2192"; font: 400 1.1rem/1 var(--sans); color: var(--ink-soft); transition: transform 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .open-links a:hover::after { transform: translateX(4px); } }
.docnote { margin-top: 12px; font-size: var(--step--1); }
@media (max-width: 760px) { .open .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* docs: sidebar, article, on-this-page outline */
.docs-shell { max-width: 1280px; margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: 236px minmax(0, 1fr) 196px; gap: 56px; padding-block: 40px 96px; }
.side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); align-self: start; max-height: calc(100vh - 108px); overflow: auto; padding-right: 8px; font-size: .9375rem; }
.side nav { display: grid; gap: 24px; }
.side h2 { font: 600 .8125rem/1.3 var(--sans); color: var(--ink-soft); letter-spacing: 0; margin: 0 0 8px 10px; }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--ink-soft); text-decoration: none; line-height: 1.35; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.side a[aria-current="page"] { background: var(--paper-deep); color: var(--ink); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .side a:hover { color: var(--ink); background: color-mix(in srgb, var(--paper-deep) 60%, transparent); } }
.side-m { display: none; }
.doc { min-width: 0; max-width: 72ch; }
.doc .crumb { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: 8px; }
.doc h1 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem); margin-bottom: 16px; }
.doc .lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); margin-bottom: 8px; max-width: 60ch; }
.doc h2 { font-size: 1.6rem; margin: 48px 0 12px; scroll-margin-top: 96px; }
.doc h3 { font-size: 1.2rem; margin: 32px 0 8px; scroll-margin-top: 96px; }
.doc p, .doc li { color: var(--ink); line-height: 1.65; }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { margin: 12px 0; padding-left: 1.35em; display: grid; gap: 8px; }
.doc li::marker { color: var(--ink-soft); }
.doc strong { font-weight: 650; }
.doc a { color: var(--ink); text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: .2em; }
.doc code { font: 500 .875em/1.4 ui-monospace, "SF Mono", Menlo, monospace; background: var(--paper-deep); padding: 1px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.doc pre { margin: 16px 0; padding: 16px 20px; border-radius: 12px; background: var(--band); color: var(--band-text); overflow-x: auto; }
.doc pre code { background: none; padding: 0; color: inherit; font-size: .875rem; line-height: 1.6; overflow-wrap: normal; }
.doc kbd { font: 600 .8125em/1 var(--sans); padding: 3px 6px; border-radius: 5px; background: var(--paper-light); box-shadow: inset 0 0 0 1px var(--line), 0 1px 0 var(--line); }
.doc .callout { margin: 20px 0; }
.doc .tbl { margin: 16px 0; overflow-x: auto; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.doc table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.doc th { text-align: left; font: 600 .8125rem/1.3 var(--sans); color: var(--ink-soft); padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--paper-light); }
.doc td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink); line-height: 1.5; }
.doc tr:last-child td { border-bottom: 0; }
.doc figure { margin: 24px 0; }
.doc figure img { max-width: min(520px, 100%); border-radius: 12px; box-shadow: var(--lift); outline: 1px solid var(--outline); outline-offset: -1px; }
.doc figcaption { margin-top: 10px; font-size: var(--step--1); color: var(--ink-soft); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: background-color 160ms var(--ease); }
.pager a span { font-size: var(--step--1); color: var(--ink-soft); }
.pager a b { font: 600 1.05rem/1.3 var(--serif); color: var(--ink); }
.pager .next { text-align: right; grid-column: 2; }
@media (hover: hover) and (pointer: fine) { .pager a:hover { background: var(--paper-light); } }
.editlink { margin-top: 24px; font-size: var(--step--1); color: var(--ink-soft); }
.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 84px); align-self: start; font-size: .875rem; }
.toc p { font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-soft); text-decoration: none; line-height: 1.35; }
.toc a.on { color: var(--ink); border-left-color: var(--accent); }
.doc-index .groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; align-items: start; }
.doc-index .group { padding: 24px; border-radius: 16px; background: var(--paper-light); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); }
.doc-index .group h2 { margin: 0 0 8px; font-size: 1.25rem; }
.doc-index .group p { color: var(--ink-soft); margin-bottom: 12px; }
.doc-index .group ul { list-style: none; padding: 0; margin: 0; gap: 4px; }
@media (max-width: 1140px) { .docs-shell { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; } .toc { display: none; } }
@media (max-width: 860px) {
  .docs-shell { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 16px 64px; }
  .side { display: none; }
  .side-m { display: block; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); background: var(--paper-light); }
  .side-m summary { cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
  .side-m summary::-webkit-details-marker { display: none; }
  .side-m summary::after { content: "+"; color: var(--ink-soft); font-weight: 400; }
  .side-m[open] summary::after { content: "\2212"; }
  .side-m nav { display: grid; gap: 20px; padding: 4px 8px 16px; }
  .doc-index .groups { grid-template-columns: minmax(0, 1fr); }
}

/* mobile menu: a native disclosure, so it opens without scripts; the panel drops under the sticky header */
.menu { display: none; }
.menu summary { list-style: none; width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; color: var(--ink); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; grid-area: 1 / 1; }
.menu summary g { transform-box: fill-box; transform-origin: center; transition: opacity 200ms var(--ease), transform 200ms var(--ease), filter 200ms var(--ease); }
.menu .i-close { opacity: 0; transform: scale(.25); filter: blur(4px); }
.menu[open] .i-open { opacity: 0; transform: scale(.25); filter: blur(4px); }
.menu[open] .i-close { opacity: 1; transform: none; filter: none; }
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 4px max(20px, env(safe-area-inset-right, 0px)) 16px max(20px, env(safe-area-inset-left, 0px)); background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px rgba(0, 0, 0, .08); }
.menu[open] .menu-panel { animation: menu-in 220ms var(--ease) both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.menu-panel a { display: flex; align-items: center; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--line); text-decoration: none; font: 500 1.0625rem/1.3 var(--sans); color: var(--ink); }
.menu-panel a:last-child { border-bottom: 0; }
.menu-panel a[aria-current="page"] { font-weight: 650; }
.menu-panel a svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .menu { display: block; } }
@media (prefers-reduced-motion: reduce) { .menu summary g { transition: opacity 120ms linear; filter: none !important; transform: none !important; } .menu[open] .menu-panel { animation: none; } }