/* Inklet documentation theme.
   Figures are shown on white "paper" in both colour themes, because that is
   how they are printed. Everything around them stays quiet. */

/* ---------- Tokens ---------- */
:root {
  --paper:#f6f8f7;
  --surface:#ffffff;
  --raised:#eef2f0;
  --ink:#122a2d;
  --ink-2:#2c4346;
  --muted:#566a6c;
  --line:#dae2df;
  --line-strong:#c3cecb;
  --accent:#12695a;
  --accent-hover:#0b4c41;
  --accent-soft:#e1efea;
  --point:#e6ac66;      /* the highlighted point of the logo */
  --point-ink:#8f4f10;  /* text-safe version of the point colour */
  --focus:#b4610f;
  --code-bg:#f1f5f3;
  --code-line:#dde5e2;
  --sheet-shadow:0 1px 2px rgba(18,42,45,.06),0 4px 16px rgba(18,42,45,.06);
  --backdrop:rgba(12,24,26,.42);
  --header:60px;
  --sidebar:264px;
  --toc:220px;
  --measure:44rem;
  --radius:6px;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Code","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0e1718;
    --surface:#142022;
    --raised:#1a2a2c;
    --ink:#e3ebe9;
    --ink-2:#c5d2cf;
    --muted:#9aaeab;
    --line:#26383a;
    --line-strong:#35494b;
    --accent:#6dcdb1;
    --accent-hover:#9be3cd;
    --accent-soft:#17342f;
    --point-ink:#f0b77a;
    --focus:#f0b77a;
    --code-bg:#0a1314;
    --code-line:#223336;
    --sheet-shadow:0 0 0 1px rgba(255,255,255,.04),0 6px 24px rgba(0,0,0,.35);
    --backdrop:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"] {
  --paper:#0e1718;
  --surface:#142022;
  --raised:#1a2a2c;
  --ink:#e3ebe9;
  --ink-2:#c5d2cf;
  --muted:#9aaeab;
  --line:#26383a;
  --line-strong:#35494b;
  --accent:#6dcdb1;
  --accent-hover:#9be3cd;
  --accent-soft:#17342f;
  --point-ink:#f0b77a;
  --focus:#f0b77a;
  --code-bg:#0a1314;
  --code-line:#223336;
  --sheet-shadow:0 0 0 1px rgba(255,255,255,.04),0 6px 24px rgba(0,0,0,.35);
  --backdrop:rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header) + 16px); }
body {
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:.2em; }
a:hover { color:var(--accent-hover); }
img { max-width:100%; height:auto; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; }
button,a,input,summary,select { touch-action:manipulation; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:3px; }
code,kbd,pre { font-family:var(--font-mono); }
kbd {
  display:inline-block; min-width:1.6em; padding:0 .35em;
  font-size:11px; line-height:1.6; text-align:center;
  color:var(--muted); background:var(--paper);
  border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:4px;
}
svg { flex:none; }
[hidden] { display:none !important; }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link {
  position:fixed; top:8px; left:8px; z-index:100; padding:8px 14px;
  background:var(--ink); color:var(--paper); border-radius:var(--radius);
  transform:translateY(-200%);
}
.skip-link:focus { transform:none; }
.logo-dark { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display:none; }
  :root:not([data-theme="light"]) .logo-dark { display:inline; }
}
:root[data-theme="dark"] .logo-light { display:none; }
:root[data-theme="dark"] .logo-dark { display:inline; }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:14px;
  height:var(--header); padding:0 20px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; flex:none; padding:4px 0; }
.brand img { display:block; width:106px; height:26px; }
.brand .logo-dark { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand .logo-dark { display:block; }
}
:root[data-theme="dark"] .brand .logo-dark { display:block; }
.version {
  font:500 12px/1 var(--font-mono); color:var(--muted);
  padding:4px 7px; border:1px solid var(--line); border-radius:999px;
  white-space:nowrap;
}
.top-links { display:flex; gap:2px; margin-left:18px; }
.top-links a {
  position:relative; padding:8px 12px; border-radius:var(--radius);
  color:var(--ink-2); font-size:14.5px; font-weight:500; text-decoration:none;
}
.top-links a:hover { color:var(--ink); background:var(--raised); }
.top-links a[aria-current] { color:var(--ink); }
.top-links a[aria-current]::after {
  content:""; position:absolute; left:12px; right:12px; bottom:-11px;
  height:2px; background:var(--accent); border-radius:2px;
}
.header-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.icon-button {
  display:inline-grid; place-items:center; width:38px; height:38px;
  border:0; border-radius:var(--radius); background:transparent; color:var(--ink-2);
}
.icon-button:hover { background:var(--raised); color:var(--ink); }
.icon-button svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.repo-link svg { width:19px; height:19px; fill:currentColor; stroke:none; }
.search-trigger {
  display:flex; align-items:center; gap:8px; width:236px; height:38px; padding:0 8px 0 11px;
  color:var(--muted); font-size:14px; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.search-trigger:hover { border-color:var(--line-strong); color:var(--ink-2); }
.search-trigger svg,.gallery-search svg,.search-heading svg {
  width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round;
}
.search-trigger span { flex:1; }
.menu-toggle { display:none; margin-left:-8px; }
.theme-toggle .icon-sun { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display:none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
.no-js .search-trigger,.no-js .theme-toggle { display:none; }

/* ---------- Layout ---------- */
.site-layout { display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); min-height:calc(100vh - var(--header)); }
main { min-width:0; padding:0 clamp(20px,3.2vw,48px); outline:none; }
main:focus { outline:none; }

/* ---------- Sidebar ---------- */
.sidebar {
  position:sticky; top:var(--header); height:calc(100vh - var(--header));
  overflow-y:auto; overscroll-behavior:contain;
  padding:20px 14px 48px 16px;
  border-right:1px solid var(--line);
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.sidebar nav { display:flex; flex-direction:column; gap:1px; font-size:14px; }
.sidebar a {
  display:block; padding:5px 10px; border-radius:5px;
  color:var(--ink-2); text-decoration:none; line-height:1.4;
}
.sidebar a:hover { background:var(--raised); color:var(--ink); }
.sidebar a[aria-current="page"] {
  color:var(--accent); background:var(--accent-soft); font-weight:600;
}
.sidebar .nav-external::after { content:" ↗"; font-size:.85em; color:var(--muted); }
.nav-label {
  margin:22px 10px 6px; font-size:12px; font-weight:600; letter-spacing:.01em;
  color:var(--muted);
}
.nav-group summary {
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 10px; border-radius:5px; cursor:pointer; list-style:none;
  font-weight:600; color:var(--ink); line-height:1.35;
}
.nav-group summary::-webkit-details-marker { display:none; }
.nav-group summary::after {
  content:""; width:6px; height:6px; flex:none; margin-right:3px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(-45deg); transition:transform .15s ease;
}
.nav-group[open]>summary::after { transform:rotate(45deg); }
.nav-group summary:hover { background:var(--raised); }
.nav-group>div { display:flex; flex-direction:column; gap:1px; margin:2px 0 8px 10px; padding-left:8px; border-left:1px solid var(--line); }
.nav-group .nav-group summary { font-weight:500; color:var(--ink-2); padding-left:10px; }
.nav-group .nav-group>div { margin-bottom:4px; }
.nav-backdrop { display:none; }

/* ---------- Reading layout ---------- */
.reading-layout {
  display:grid; grid-template-columns:minmax(0,var(--measure)) var(--toc);
  justify-content:center; gap:clamp(32px,4vw,64px);
  padding:36px 0 24px;
}
.reading-layout.no-toc { grid-template-columns:minmax(0,var(--measure)); }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:6px; font-size:13.5px; color:var(--muted); margin-bottom:10px; }
.breadcrumbs span+span::before { content:"/"; margin-right:6px; color:var(--line-strong); }
.page-toc { position:relative; }
.page-toc nav {
  position:sticky; top:calc(var(--header) + 36px);
  max-height:calc(100vh - var(--header) - 72px); overflow-y:auto;
  display:flex; flex-direction:column; font-size:13.5px;
  border-left:1px solid var(--line);
}
.page-toc p { margin:0 0 8px; padding-left:14px; font-weight:600; color:var(--ink); font-size:13px; }
.page-toc a {
  display:block; padding:4px 0 4px 14px; margin-left:-1px; line-height:1.4;
  color:var(--muted); text-decoration:none; border-left:1px solid transparent;
}
.page-toc a:hover { color:var(--ink); }
.page-toc a.active { color:var(--accent); border-left-color:var(--accent); font-weight:500; }
.mobile-toc { display:none; margin:4px 0 28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.mobile-toc summary { cursor:pointer; padding:10px 14px; font-size:14px; font-weight:600; }
.mobile-toc nav { display:flex; flex-direction:column; padding:0 14px 10px; border-top:1px solid var(--line); }
.mobile-toc a { padding:7px 0; font-size:14px; text-decoration:none; }

/* ---------- Prose ---------- */
.prose { min-width:0; font-size:16.5px; color:var(--ink-2); }
.prose :is(h1,h2,h3,h4) { color:var(--ink); font-weight:650; }
.prose h1 {
  margin:0 0 18px; font-size:clamp(30px,3.4vw,40px); line-height:1.12; letter-spacing:-.025em; font-weight:700;
}
.prose h1+p { font-size:18.5px; line-height:1.6; color:var(--muted); }
.prose h2 { margin:2.4em 0 .6em; font-size:25px; line-height:1.25; letter-spacing:-.018em; padding-top:.2em; }
.prose h3 { margin:1.9em 0 .5em; font-size:19.5px; line-height:1.3; letter-spacing:-.01em; }
.prose h4 { margin:1.6em 0 .4em; font-size:16.5px; line-height:1.4; }
.prose p,.prose ul,.prose ol { margin:0 0 1.05em; }
.prose ul,.prose ol { padding-left:1.35em; }
.prose li { margin:.3em 0; }
.prose li::marker { color:var(--muted); }
.prose strong { color:var(--ink); font-weight:650; }
.prose hr { border:0; border-top:1px solid var(--line); margin:2.5em 0; }
.prose .headerlink {
  margin-left:.35em; padding:0 .2em; color:var(--line-strong); text-decoration:none; font-weight:400;
  opacity:0; transition:opacity .12s;
}
.prose :is(h1,h2,h3,h4):hover .headerlink,.prose .headerlink:focus-visible { opacity:1; }
.prose .headerlink:hover { color:var(--accent); }
.prose :not(pre)>code {
  padding:.12em .36em; font-size:.87em; color:var(--ink);
  background:var(--raised); border:1px solid var(--line); border-radius:4px;
  overflow-wrap:anywhere;
}
.prose a code { color:inherit; }
/* A long unbroken link (a DOI) must wrap rather than set the column's minimum width. */
.prose a { overflow-wrap:anywhere; }
.prose :is(h1,h2,h3) code { padding:0; font-size:.9em; font-weight:600; background:none; border:0; }
.prose blockquote {
  margin:1.4em 0; padding:.2em 0 .2em 1.1em; color:var(--muted);
  border-left:3px solid var(--line-strong);
}
.admonition {
  margin:1.6em 0; padding:14px 18px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
}
.admonition.warning,.admonition.caution,.admonition.danger { border-left-color:var(--point); }
.admonition-title { margin:0 0 4px !important; font-weight:650; color:var(--ink); }
.admonition>:last-child { margin-bottom:0; }

/* Figures inside guides sit on a white sheet in both themes. */
.prose img {
  display:block; margin:1.6em 0; padding:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--sheet-shadow);
}
.prose p>img:only-child { margin:0; }
.prose p:has(>img:only-child),.prose p:has(>.figure-zoom:only-child) { margin:1.7em 0; }
.prose p:has(img)+p>em:only-child,.prose p:has(img)+p>small:only-child { font-size:14px; color:var(--muted); }
.figure-zoom { display:block; position:relative; cursor:zoom-in; }
.figure-zoom img { margin:0; transition:box-shadow .15s, border-color .15s; }
.figure-zoom:hover img { border-color:var(--line-strong); }
.figure-zoom::after {
  content:""; position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:5px;
  background:rgba(18,42,45,.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5h4.5V8M8 16.5H3.5V12M16.5 3.5 11 9M3.5 16.5 9 11'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0; transition:opacity .15s;
}
.figure-zoom:hover::after,.figure-zoom:focus-visible::after { opacity:1; }
.prose .brand-preview img,.prose .brand-sizes img { padding:0; border:0; box-shadow:none; background:none; margin:0; }

/* Tables */
.prose table {
  display:block; max-width:100%; overflow-x:auto; margin:1.6em 0;
  border-collapse:separate; border-spacing:0; font-size:14.5px; line-height:1.5;
  border:1px solid var(--line); border-radius:var(--radius);
}
.prose th,.prose td { padding:9px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.prose th { font-weight:600; color:var(--ink); background:var(--raised); white-space:nowrap; }
.prose tr:last-child td { border-bottom:0; }
.prose tbody tr:hover td { background:color-mix(in srgb, var(--raised) 55%, transparent); }

/* Code blocks */
.codehilite {
  position:relative; margin:1.4em 0 1.6em;
  background:var(--code-bg); border:1px solid var(--code-line); border-radius:var(--radius);
}
.codehilite pre {
  margin:0; padding:16px 18px; overflow-x:auto;
  font-size:13.5px; line-height:1.65; tab-size:4;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.codehilite code { font-size:inherit; background:none; border:0; padding:0; }
.copy-code {
  position:absolute; top:8px; right:8px;
  display:flex; align-items:center; gap:5px; height:28px; padding:0 9px;
  font-size:12px; font-weight:500; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:5px;
  opacity:0; transition:opacity .12s;
}
.copy-code svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; }
.codehilite:hover .copy-code,.copy-code:focus-visible,.copy-code.done { opacity:1; }
.copy-code:hover { color:var(--ink); border-color:var(--line-strong); }
.copy-code.done { color:var(--accent); }
@media (hover:none) { .copy-code { opacity:1; } }

/* API reference: signatures read as code, not as headings. */
.page-api .prose h4 { margin:2.2em 0 .5em; font-size:inherit; font-weight:inherit; }
.page-api .prose h4>code:first-child {
  display:block; padding:9px 12px; font-size:13.5px; font-weight:500; line-height:1.55;
  background:var(--code-bg); border:1px solid var(--code-line); border-left:3px solid var(--accent);
  border-radius:var(--radius); overflow-wrap:anywhere;
}
.page-api .prose h4 .headerlink { float:right; margin-top:-2em; }
.page-api .prose h4+p { margin-top:.4em; }
.page-api .prose ul { font-size:15px; }

/* Previous / next */
.page-pagination { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:64px 0 0; padding-top:28px; border-top:1px solid var(--line); }
.page-pagination a {
  display:flex; flex-direction:column; gap:2px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--radius); text-decoration:none;
  background:var(--surface); color:var(--ink); font-weight:600; line-height:1.35;
}
.page-pagination a:hover { border-color:var(--accent); }
.page-pagination small { font-size:13px; font-weight:400; color:var(--muted); }
.page-pagination .next { grid-column:2; text-align:right; }

/* ---------- Buttons and small parts ---------- */
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:var(--radius);
  font-size:15px; font-weight:600; text-decoration:none; white-space:nowrap;
  color:var(--ink); background:var(--surface); border:1px solid var(--line-strong);
}
.button:hover { color:var(--ink); border-color:var(--ink-2); }
.button.primary { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.button.primary:hover { color:var(--paper); background:var(--ink-2); }
.tag {
  display:inline-block; padding:1px 7px; font-size:12px; font-style:normal; font-weight:500; line-height:1.6;
  color:var(--muted); background:var(--raised); border-radius:999px; white-space:nowrap;
}
.tag-flag { color:var(--point-ink); background:color-mix(in srgb, var(--point) 22%, transparent); }

/* ---------- Plates: figures presented as measured sheets ---------- */
.plate { position:relative; margin:0; }
.plate-paper {
  display:block; background:#fff; border-radius:3px;
  box-shadow:var(--sheet-shadow); outline:1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.plate-paper img { display:block; width:100%; height:auto; }
.plate figcaption { margin-top:14px; font-size:14px; line-height:1.55; color:var(--muted); max-width:70ch; }
.plate figcaption a { white-space:nowrap; }
/* Dimension lines, as on a technical drawing: they state the physical size. */
.dim { position:absolute; color:var(--point-ink); font:500 12px/1 var(--font-mono); font-variant-numeric:tabular-nums; pointer-events:none; }
.dim span { position:relative; z-index:1; padding:0 8px; background:var(--paper); }
.dim-x { left:0; right:0; top:-26px; height:12px; display:flex; justify-content:center; align-items:center; }
.dim-x::before {
  content:""; position:absolute; left:0; right:0; top:50%; height:0;
  border-top:1px solid currentColor;
}
.dim-x::after {
  content:""; position:absolute; inset:0;
  border-left:1px solid currentColor; border-right:1px solid currentColor;
}
.dim-y { top:0; bottom:0; left:-28px; width:12px; display:flex; justify-content:center; align-items:center; }
.dim-y::before { content:""; position:absolute; top:0; bottom:0; left:50%; border-left:1px solid currentColor; }
.dim-y::after { content:""; position:absolute; inset:0; border-top:1px solid currentColor; border-bottom:1px solid currentColor; }
.dim-y span { writing-mode:vertical-rl; transform:rotate(180deg); padding:8px 0; }

/* ---------- Home ---------- */
.layout-home .site-layout { grid-template-columns:minmax(0,1fr); }
.layout-home main { padding:0 clamp(20px,4vw,56px); }
.home { max-width:1240px; margin:0 auto; }
.hero {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:28px clamp(32px,5vw,80px); align-items:center;
  padding:clamp(36px,5vw,64px) 0 0;
}
.hero h1 {
  margin:0; max-width:16ch;
  font-size:clamp(36px,4.3vw,58px); line-height:1.04; letter-spacing:-.035em; font-weight:700;
  text-wrap:balance;
}
.hero-lead { margin:0 0 22px; font-size:18px; line-height:1.6; color:var(--ink-2); max-width:36rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; }
.install-command {
  display:flex; align-items:center; gap:10px; max-width:360px; margin-top:16px; padding:5px 5px 5px 14px;
  font-family:var(--font-mono); font-size:14px;
  background:var(--code-bg); border:1px solid var(--code-line); border-radius:var(--radius);
}
.install-command>span { color:var(--muted); user-select:none; }
.install-command code { flex:1; color:var(--ink); }
.install-command button {
  height:30px; padding:0 11px; font-family:var(--font-sans); font-size:12.5px; font-weight:500;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:5px;
}
.install-command button:hover { border-color:var(--line-strong); color:var(--ink); }
.install-note { margin:10px 0 0; font-size:13.5px; color:var(--muted); }
/* The hero demo: the one-call code beside the chart it draws. */
.hero-demo { grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px clamp(32px,5vw,64px); align-items:start; margin-top:clamp(28px,4vw,48px); }
.hero-code { margin:0; }
.plate-hero { margin:0 0 0 30px; }
.plate-hero .plate-paper { padding:clamp(8px,1.4vw,18px); }
.plate-hero .plate-paper:hover { outline-color:var(--line-strong); }
.plate-hero figcaption { max-width:none; }

.home-band { padding:clamp(64px,8vw,104px) 0 0; }
.section-head { max-width:44rem; margin-bottom:32px; }
.section-head h2,.home-reference .prose h2 { margin:0 0 10px; font-size:clamp(26px,2.6vw,32px); line-height:1.15; letter-spacing:-.025em; font-weight:700; color:var(--ink); }
.section-head p { margin:0; font-size:16.5px; color:var(--muted); }
.section-head-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px 24px; flex-wrap:wrap; max-width:none; }
.section-head-row a { font-weight:500; }

.example-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px 48px; align-items:center; }
.example-code { min-width:0; border:1px solid var(--code-line); border-radius:var(--radius); background:var(--code-bg); overflow:hidden; }
.example-code .codehilite { margin:0; border:0; border-radius:0; }
.example-code .codehilite pre { font-size:13px; padding:14px 16px 16px; }
.code-title { display:flex; align-items:center; gap:8px; padding:9px 16px; border-bottom:1px solid var(--code-line); font:500 12.5px/1.4 var(--font-mono); color:var(--muted); }
.code-title::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--point); }
.plate-example { margin-top:26px; }
.plate-example .plate-paper { padding:10px; }
.plate-example figcaption code { font-size:.9em; }

.facts {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px;
  margin:56px 0 0; padding:0; list-style:none;
}
.facts li { padding-top:16px; border-top:1px solid var(--line-strong); }
.facts h3 { margin:0 0 6px; font-size:16px; font-weight:650; color:var(--ink); }
.facts p { margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); }
.why-facts p { font-size:15.5px; color:var(--ink-2); }
.why-facts code { font-size:.92em; }

.showcase-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 28px; }
.showcase-item { display:flex; flex-direction:column; gap:12px; color:inherit; text-decoration:none; }
.showcase-item .plate-paper { aspect-ratio:4/3; padding:12px; overflow:hidden; transition:outline-color .15s; }
.showcase-item img { width:100%; height:100%; object-fit:contain; transition:transform .3s ease; }
.showcase-item:hover .plate-paper { outline-color:var(--accent); }
.showcase-item:hover img { transform:scale(1.025); }
.showcase-copy { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.showcase-copy strong { font-weight:600; color:var(--ink); line-height:1.35; }
.showcase-copy span { font-size:13px; color:var(--muted); white-space:nowrap; }
.showcase-item:hover strong { color:var(--accent); }

.dense-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:40px 56px; align-items:center; }
.dense-copy .section-head { margin-bottom:22px; }
.dense-copy code { font-size:.92em; }
.dense-panels { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.dense-panels li { display:grid; grid-template-columns:4.2em minmax(0,1fr); gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-2); }
.dense-panels strong { font:600 13px/1.6 var(--font-mono); color:var(--point-ink); }
.dense-links { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 0; }
.plate-dense { margin-top:26px; }
.plate-dense .plate-paper { padding:clamp(8px,1.2vw,14px); }
.band-lead { margin:-18px 0 24px; font-size:16px; color:var(--muted); max-width:44rem; }
.plot-strip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px 16px; }
.plot-chip { display:flex; flex-direction:column; gap:6px; color:inherit; text-decoration:none; min-width:0; }
.plot-chip .plate-paper { aspect-ratio:4/3; padding:6px; overflow:hidden; transition:outline-color .15s; }
.plot-chip img { width:100%; height:100%; object-fit:contain; }
.plot-chip strong { font-size:14.5px; font-weight:600; line-height:1.3; color:var(--ink); }
.plot-chip code { font-size:12px; color:var(--muted); background:none; padding:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plot-chip:hover .plate-paper { outline-color:var(--accent); }
.plot-chip:hover strong { color:var(--accent); }

.path-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.path-grid a {
  display:flex; flex-direction:column; gap:6px; padding:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  color:var(--muted); text-decoration:none; font-size:14.5px; line-height:1.5;
}
.path-grid a:hover { border-color:var(--accent); }
.path-grid strong { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; color:var(--ink); font-size:16px; font-weight:650; }
.path-grid a:hover strong { color:var(--accent); }

.home-reference { padding-bottom:24px; }
.home-reference .prose { max-width:52rem; }
.home-reference .prose h2 { margin-top:1.8em; }
.home-reference .prose h2:first-child { margin-top:0; }
.home-reference .prose table { display:table; width:100%; }

/* ---------- Galleries ---------- */
.gallery-page { max-width:1320px; margin:0 auto; padding:36px 0 24px; }
.page-intro { max-width:46rem; }
.page-intro h1 { margin-bottom:14px; }
.page-intro p { color:var(--muted); }
.gallery-about { margin:4px 0 8px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.gallery-about summary { cursor:pointer; padding:10px 14px; font-size:14px; font-weight:600; color:var(--ink); }
.gallery-about > p { margin:0; padding:0 14px 12px; font-size:15px; }
.gallery-about > p:first-of-type { padding-top:12px; border-top:1px solid var(--line); }
.gallery-toolbar {
  position:sticky; top:var(--header); z-index:5;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  margin:28px 0 0; padding:12px 0;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.gallery-filters { display:flex; flex-wrap:wrap; gap:6px; }
.gallery-filters button {
  height:34px; padding:0 13px; font-size:14px; font-weight:500;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:999px;
}
.gallery-filters button:hover { border-color:var(--line-strong); color:var(--ink); }
.gallery-filters button[aria-pressed="true"] { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.gallery-search {
  display:flex; align-items:center; gap:8px; margin-left:auto; width:260px; height:36px; padding:0 10px;
  color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
}
.gallery-search:focus-within { border-color:var(--accent); }
.gallery-search input { flex:1; min-width:0; border:0; outline:0; background:none; font-size:14px; color:var(--ink); }
.gallery-reset { height:34px; padding:0 12px; font-size:13.5px; color:var(--ink-2); background:none; border:1px solid var(--line); border-radius:var(--radius); }
.gallery-count { margin:16px 0 20px; font-size:14px; color:var(--muted); }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:32px 24px; }
.gallery-card { position:relative; min-width:0; }
.card-link { display:flex; flex-direction:column; gap:12px; height:100%; color:inherit; text-decoration:none; }
.card-image { aspect-ratio:4/3; padding:12px; overflow:hidden; transition:outline-color .15s; }
.card-image img { width:100%; height:100%; object-fit:contain; transition:transform .3s ease; }
.card-link:hover .card-image { outline-color:var(--accent); }
.card-link:hover img { transform:scale(1.025); }
.card-link:focus-visible { outline:none; }
.card-link:focus-visible .card-image { outline:2px solid var(--focus); outline-offset:2px; }
.card-copy { display:flex; flex-direction:column; gap:4px; }
.card-title { font-size:16px; font-weight:650; line-height:1.35; color:var(--ink); }
.card-link:hover .card-title { color:var(--accent); }
.card-text { font-size:14px; line-height:1.55; color:var(--muted); }
.card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:6px; }
.card-requires { font-size:12.5px; color:var(--muted); }
.card-zoom {
  position:absolute; top:8px; right:8px;
  display:grid; place-items:center; width:34px; height:34px;
  color:#fff; background:rgba(18,42,45,.78); border:0; border-radius:5px;
  opacity:0; transition:opacity .15s;
}
.card-zoom svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.gallery-card:hover .card-zoom,.card-zoom:focus-visible { opacity:1; }
@media (hover:none) { .card-zoom { opacity:1; } }
.gallery-empty { padding:48px 0; text-align:center; color:var(--muted); }
.gallery-help { max-width:46rem; margin:64px 0 0; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:15px; }
.gallery-help h2 { margin:0 0 6px; font-size:18px; color:var(--ink); }

/* Plot gallery: one block per plot family. */
.gallery-group { margin-top:40px; }
.gallery-group:first-of-type { margin-top:8px; }
.gallery-grid-plots { grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:26px 20px; }
.gallery-grid-plots .card-text { font-size:13.5px; }
.gallery-group-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin:0 0 18px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.gallery-group-head h2 { margin:0; font-size:21px; line-height:1.25; letter-spacing:-.015em; font-weight:700; color:var(--ink); }
.gallery-group-head p { flex:1 1 22rem; margin:0; font-size:14.5px; color:var(--muted); }
.gallery-group-head a { font-size:14px; font-weight:500; white-space:nowrap; }
/* The family heading already names the category. */
.gallery-group .card-meta > .tag:not(.tag-flag) { display:none; }

/* ---------- Section overviews ---------- */
.section-page { max-width:1320px; margin:0 auto; padding:36px 0 24px; }
.section-group { margin-top:44px; padding-top:18px; border-top:1px solid var(--line); }
.section-group-head { max-width:46rem; margin-bottom:18px; }
.section-group-head h2 { margin:0 0 4px; font-size:21px; line-height:1.25; letter-spacing:-.015em; font-weight:700; color:var(--ink); }
.section-group-head p { margin:0; font-size:15px; color:var(--muted); }
.section-grid { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:28px 22px; }
.section-grid-text { grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.section-card-text .card-link {
  padding:16px 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
}
.section-card-text .card-link:hover { border-color:var(--accent); }
.section-card-text .card-link:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.section-card .card-meta { margin-top:4px; }
.section-notes { max-width:46rem; margin-top:56px; padding-top:24px; border-top:1px solid var(--line); }
.section-notes h2:first-child { margin-top:0; }

/* ---------- Search dialog ---------- */
.search-dialog {
  width:min(680px,calc(100vw - 24px)); max-height:min(640px,calc(100vh - 96px));
  margin:72px auto auto; padding:0; overflow:hidden;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:10px;
  box-shadow:0 24px 64px rgba(0,0,0,.25);
}
.search-dialog[open] { display:flex; flex-direction:column; }
.search-dialog::backdrop { background:var(--backdrop); }
.search-heading { display:flex; align-items:center; gap:10px; padding:0 12px 0 16px; border-bottom:1px solid var(--line); color:var(--muted); }
.search-heading input { flex:1; min-width:0; height:56px; border:0; outline:0; background:none; font-size:17px; color:var(--ink); }
.search-heading input::-webkit-search-cancel-button { display:none; }
.search-close { padding:0; border:0; background:none; }
.search-options { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; padding:10px 16px; border-bottom:1px solid var(--line); font-size:13px; color:var(--muted); }
.search-scope { display:flex; align-items:center; gap:8px; }
.search-scope select { height:30px; padding:0 8px; font-size:13px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:5px; }
.search-status { margin:0; }
.search-results { overflow-y:auto; padding:6px; }
.search-results a {
  display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:6px;
  color:var(--ink-2); text-decoration:none; font-size:14px; line-height:1.5;
}
.search-results a:hover,.search-results a:focus-visible { background:var(--raised); outline-offset:-2px; }
.search-results small { font-size:12px; color:var(--muted); }
.search-results strong { font-size:15px; color:var(--accent); font-weight:600; overflow-wrap:anywhere; }
.search-results span { color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- Lightbox ---------- */
.lightbox {
  width:min(1400px,calc(100vw - 24px)); max-width:none; height:calc(100vh - 24px); max-height:none;
  margin:auto; padding:0; border:0; background:transparent; color:#fff; overflow:hidden;
}
.lightbox[open] { display:flex; flex-direction:column; }
.lightbox::backdrop { background:rgba(8,16,17,.86); }
.lightbox-bar { display:flex; align-items:center; gap:14px; padding:6px 4px 12px; }
.lightbox-title { flex:1; min-width:0; margin:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lightbox-bar a { color:#fff; font-size:14px; }
.lightbox-bar a:hover { color:var(--point); }
.lightbox .icon-button { color:#fff; }
.lightbox .icon-button:hover { background:rgba(255,255,255,.12); color:#fff; }
.lightbox-sheet { flex:1; min-height:0; display:grid; place-items:center; }
.lightbox-sheet img { max-width:100%; max-height:100%; object-fit:contain; background:#fff; padding:14px; border-radius:3px; }

/* ---------- 404 ---------- */
.not-found { max-width:40rem; margin:0 auto; padding:clamp(56px,10vw,120px) 0 40px; }
.not-found-code { margin:0; font:500 14px/1 var(--font-mono); color:var(--point-ink); }
.not-found h1 { margin:12px 0 12px; font-size:clamp(32px,4vw,44px); letter-spacing:-.03em; line-height:1.1; }
.not-found>p { color:var(--muted); font-size:17px; margin:0 0 24px; }
.not-found-links { display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; margin:36px 0 0; padding:20px 0 0; list-style:none; border-top:1px solid var(--line); }

/* ---------- Footer ---------- */
.site-footer {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px;
  max-width:1320px; margin:72px auto 0; padding:24px 0 40px;
  border-top:1px solid var(--line); font-size:13.5px; color:var(--muted);
}
.footer-brand { display:flex; align-items:center; gap:10px; }
.footer-brand img { display:block; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:6px 20px; }
.site-footer a { color:var(--muted); text-decoration:none; }
.site-footer a:hover { color:var(--ink); text-decoration:underline; }

/* ---------- Brand page ---------- */
.brand-preview { display:grid; place-items:center; min-height:150px; margin:1em 0; padding:28px; background:#fafbf9; border:1px solid var(--line); border-radius:var(--radius); }
.brand-preview-dark { background:#172f32; border-color:#172f32; }
.brand-sizes { display:flex; flex-wrap:wrap; gap:28px; align-items:flex-end; margin:1em 0; }
.brand-sizes span { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; color:var(--muted); }

/* ---------- Responsive ---------- */
@media (min-width:1600px) {
  :root { --measure:46rem; --toc:240px; }
}
@media (max-width:1279px) {
  .reading-layout { grid-template-columns:minmax(0,var(--measure)); }
  .page-toc { display:none; }
  .mobile-toc { display:block; }
}
@media (max-width:1100px) {
  .facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .path-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .example-grid { grid-template-columns:minmax(0,1fr); }
  .plate-example { margin-top:24px; }
  .dense-grid { grid-template-columns:minmax(0,1fr); }
}
/* Drawer navigation: below 1024px everywhere, and at every width on the home page. */
@media (max-width:1023px) {
  .site-layout { grid-template-columns:minmax(0,1fr); }
  .menu-toggle { display:inline-grid; }
  .sidebar { display:none; }
  .js-ready .sidebar {
    display:block; position:fixed; z-index:60; top:0; left:0; bottom:0; height:auto;
    width:min(320px,86vw); padding-top:20px; background:var(--paper);
    border-right:1px solid var(--line); box-shadow:0 0 40px rgba(0,0,0,.2);
    transform:translateX(-102%); visibility:hidden; transition:transform .2s ease, visibility 0s .2s;
  }
  .js-ready .sidebar.is-open { transform:none; visibility:visible; transition:transform .2s ease; }
  .nav-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:55; background:var(--backdrop); }
}
.layout-home .menu-toggle { display:inline-grid; }
.layout-home .sidebar { display:none; }
.js-ready .layout-home .sidebar {
  display:block; position:fixed; z-index:60; top:0; left:0; bottom:0; height:auto;
  width:min(320px,86vw); padding-top:20px; background:var(--paper);
  border-right:1px solid var(--line); box-shadow:0 0 40px rgba(0,0,0,.2);
  transform:translateX(-102%); visibility:hidden; transition:transform .2s ease, visibility 0s .2s;
}
.js-ready .layout-home .sidebar.is-open { transform:none; visibility:visible; transition:transform .2s ease; }
.layout-home .nav-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:55; background:var(--backdrop); }
.no-js .sidebar { display:block !important; position:static !important; transform:none !important; visibility:visible !important; height:auto; border-right:0; border-bottom:1px solid var(--line); }
.no-js .site-layout { grid-template-columns:minmax(0,1fr); }
.no-js .menu-toggle { display:none; }

@media (max-width:900px) {
  .top-links { display:none; }
  .hero { grid-template-columns:minmax(0,1fr); align-items:start; }
  .hero h1 { max-width:15ch; }
  .hero-demo { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  :root { --header:56px; }
  body { font-size:16px; }
  .site-header { gap:8px; padding:0 12px; }
  .version { display:none; }
  .search-trigger { width:38px; padding:0; justify-content:center; border-color:transparent; background:none; color:var(--ink-2); }
  .search-trigger span,.search-trigger kbd { display:none; }
  .search-trigger svg { width:19px; height:19px; }
  main,.layout-home main { padding:0 16px; }
  .reading-layout { padding-top:24px; }
  .prose { font-size:16px; }
  .prose h1+p { font-size:17px; }
  .prose h2 { font-size:22px; }
  .prose img { padding:8px; }
  .codehilite { margin-left:-16px; margin-right:-16px; border-radius:0; border-left:0; border-right:0; }
  .codehilite pre { padding:14px 16px; font-size:13px; }
  .page-pagination { grid-template-columns:1fr; }
  .page-pagination .next { grid-column:1; }
  .hero { padding-top:32px; }
  .hero h1 { font-size:clamp(34px,10vw,44px); }
  .hero-lead { font-size:17px; }
  .hero-actions .button { flex:1 1 auto; }
  .install-command { max-width:none; }
  .hero-demo { gap:24px; margin-top:28px; }
  .plate-hero { margin:0; }
  .dim-y { display:none; }
  .facts,.path-grid { grid-template-columns:minmax(0,1fr); }
  .plot-strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; }
  .section-grid:not(.section-grid-text) { grid-template-columns:minmax(0,1fr); }
  .section-page { padding-top:24px; }
  .gallery-grid.gallery-grid-plots { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
  .gallery-grid-plots .card-text { display:none; }
  .facts { gap:20px; }
  .showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 14px; }
  .showcase-copy { flex-direction:column; gap:2px; }
  .showcase-copy strong { font-size:14.5px; }
  .gallery-toolbar { position:static; }
  .gallery-filters { flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:0 16px 2px; scrollbar-width:none; }
  .gallery-filters button { flex:none; }
  .gallery-search { width:100%; margin-left:0; }
  .gallery-grid { grid-template-columns:minmax(0,1fr); }
  .example-code { margin:0 -16px; border-radius:0; border-left:0; border-right:0; }
  .example-code .codehilite { margin:0; }
  .site-footer { flex-direction:column; align-items:flex-start; }
  .search-dialog { margin-top:12px; max-height:calc(100vh - 24px); }
  .not-found-links { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}
@media print {
  .site-header,.sidebar,.page-toc,.mobile-toc,.page-pagination,.site-footer,.copy-code,.gallery-toolbar,.card-zoom,.skip-link { display:none !important; }
  .site-layout,.reading-layout { display:block; }
  main { padding:0; }
  body { background:#fff; color:#000; }
  .prose img { box-shadow:none; }
  .codehilite { border:1px solid #ccc; }
}