/* docs.maqpna.com. Colours, type and spacing come from brand/tokens.css
   (copied to /assets/tokens.css at build time); this file only lays them out.
   Light (true white) is the default and dark (true black) follows
   prefers-color-scheme; the theme button sets <html data-theme>, which
   tokens.css honours. Docs pages stay calm: only small hover transitions.
   The home page alone has entrance motion (off under prefers-reduced-motion). */

*, *::before, *::after { box-sizing: border-box; }
:root { --topbar-h: 60px; --side-w: 284px; --toc-w: 216px; --ring: color-mix(in srgb, var(--accent) 22%, transparent); }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 20px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--weight-regular) 1rem/1.7 var(--font-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
img, svg, video { max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .9em; }
kbd {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface);
  color: var(--text-3); font: var(--weight-medium) .72rem/1 var(--font-mono); box-shadow: 0 1px 0 var(--line);
}
h1, h2, h3, h4 { font-weight: var(--weight-semibold); line-height: 1.2; letter-spacing: -0.02em; color: var(--text); }
h1 { font-size: clamp(2rem, 3.2vw, 2.6rem); line-height: 1.1; letter-spacing: -0.035em; margin: 0 0 var(--space-4); }
h2 { font-size: 1.55rem; letter-spacing: -0.025em; margin: var(--space-16) 0 var(--space-4); }
h3 { font-size: 1.2rem; margin: var(--space-10) 0 var(--space-3); }
h4 { font-size: 1.02rem; margin: var(--space-6) 0 var(--space-2); }
p, ul, ol, dl { margin: 0 0 var(--space-5); }
li + li { margin-top: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-12) 0; }
.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; }
.muted { color: var(--text-3); }
.small { font-size: var(--text-sm); }

.skip { position: absolute; left: -9999px; top: 10px; z-index: 200; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 10px; color: var(--on-accent); }

/* ---------- Top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 60; height: var(--topbar-h);
  background: var(--surface-glass);
  backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { display: flex; align-items: center; gap: var(--space-4); height: 100%; padding: 0 var(--space-6); max-width: 1680px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-brand); flex: none; font-size: .95rem; }
.brand:hover { color: var(--text); }
.brand .mark { width: 34px; height: 18px; fill: currentColor; flex: none; color: var(--brand); }
.brand-docs {
  position: relative; padding-left: 13px; margin-left: 1px; font-weight: var(--weight-regular); letter-spacing: 0;
  color: var(--text-3); font-size: .95rem;
}
.brand-docs::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; transform: translateY(-50%) rotate(18deg); background: var(--line-strong); }
.search { position: relative; flex: 1 1 auto; max-width: 440px; margin-left: var(--space-8); }
.search input {
  width: 100%; height: 38px; padding: 0 40px 0 38px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface-subtle); color: var(--text);
  font: inherit; font-size: var(--text-sm);
  transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
}
.search input:hover { border-color: var(--line-strong); }
.search input:focus { outline: none; background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
.search input::placeholder { color: var(--text-3); opacity: 1; }
.search input::-webkit-search-cancel-button { display: none; }
.search-ico { position: absolute; left: 12px; top: 11px; width: 16px; height: 16px; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search-kbd { position: absolute; right: 8px; top: 8px; pointer-events: none; }
.search input:focus + .search-kbd, .search input:not(:placeholder-shown) + .search-kbd { display: none; }
.topnav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.topnav a { color: var(--text-2); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; padding: 7px 12px; border-radius: 8px; transition: color var(--duration-fast), background var(--duration-fast); }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--text); background: var(--surface-subtle); }
.topnav a.ext::after { content: " \2197"; color: var(--text-3); }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0;
  border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface-subtle); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.menu-btn { display: none; }
#theme .i-sun { display: none; }
:root[data-theme="dark"] #theme .i-sun { display: block; }
:root[data-theme="dark"] #theme .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme .i-sun { display: block; }
  :root:not([data-theme="light"]) #theme .i-moon { display: none; }
}

/* ---------- Search results ---------- */
.results {
  position: absolute; top: 46px; left: 0; right: 0; z-index: 70; max-height: min(70vh, 560px); overflow: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px;
}
.results a { display: block; padding: 9px 11px; border-radius: 9px; color: var(--text); text-decoration: none; }
.results a + a { margin-top: 2px; }
.results a[aria-selected="true"], .results a:hover { background: var(--surface-subtle); }
.results a[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--accent); }
.results .r-title { display: flex; gap: 8px; align-items: baseline; font-weight: var(--weight-medium); font-size: var(--text-sm); }
.results .r-kind { margin-left: auto; font: var(--weight-medium) 0.66rem/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); }
.results .r-sub { display: block; color: var(--text-3); font-size: var(--text-xs); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.results mark { background: none; color: var(--accent); font-weight: var(--weight-semibold); }
.results .none { padding: 12px; color: var(--text-2); font-size: var(--text-sm); }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); max-width: 1680px; margin: 0 auto; min-height: calc(100vh - var(--topbar-h)); }
.sidebar {
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  border-right: 1px solid var(--line); padding: var(--space-8) var(--space-4) var(--space-16) var(--space-6);
  font-size: .875rem; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent;
}
.side-sect { margin-bottom: var(--space-6); }
.side-title { margin: 0 0 var(--space-2); font-size: .8125rem; font-weight: var(--weight-semibold); letter-spacing: -0.005em; }
.side-title a { color: var(--text); text-decoration: none; }
.side-title a:hover { color: var(--accent); }
.side-title a[aria-current="page"] { color: var(--accent); }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li { margin: 0; }
.side-sect > ul { border-left: 1px solid var(--line); }
.side li a {
  position: relative; display: block; padding: 5px 10px 5px 14px; margin-left: -1px; border-left: 1px solid transparent;
  color: var(--text-2); text-decoration: none; line-height: 1.4;
  transition: color var(--duration-fast), border-color var(--duration-fast);
}
.side li a:hover { color: var(--text); border-left-color: var(--line-strong); }
.side li a[aria-current="page"] { color: var(--text); font-weight: var(--weight-medium); border-left: 2px solid var(--accent); padding-left: 13px; }
.side li a code { font-size: .84em; color: inherit; }
.side-group { margin: var(--space-4) 0 var(--space-2); font: var(--weight-medium) .68rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.side-cmds > ul { border-left: 1px solid var(--line); }
.side-subs { margin: 2px 0 4px 14px !important; border-left: 1px solid var(--line); }
.side-subs a { font-size: .95em; }
.side-cmds { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.scrim { display: none; }

.main { display: grid; grid-template-columns: minmax(0, 1fr) var(--toc-w); gap: var(--space-12); padding: var(--space-12) var(--space-12) var(--space-24); align-items: start; }
.main.no-toc, .main.home { grid-template-columns: minmax(0, 1fr); }
.main:focus { outline: none; }
.doc { min-width: 0; max-width: 768px; }
.main.no-toc .doc { max-width: 1040px; }
.main.home .doc { max-width: 1180px; margin: 0 auto; width: 100%; }
.doc > :first-child { margin-top: 0; }
.doc > p, .doc > ul, .doc > ol, .doc > dl, .doc li { color: var(--text-2); }
.doc strong { color: var(--text); font-weight: var(--weight-semibold); }
.lede { font-size: 1.15rem; line-height: 1.6; color: var(--text-2); margin-bottom: var(--space-8); max-width: 62ch; }

/* Breadcrumbs */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; padding: 0 !important; margin: 0 0 var(--space-5); font-size: .8125rem; }
.crumbs li { margin: 0 !important; color: var(--text-3); }
.crumbs li + li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 1px 2px; border-right: 1.5px solid var(--text-3); border-top: 1.5px solid var(--text-3); transform: rotate(45deg); opacity: .7; }
.crumbs a { color: var(--text-3); text-decoration: none; }
.crumbs a:hover { color: var(--text); }

/* Heading anchors */
.anchor { margin-left: 10px; color: var(--text-3); text-decoration: none; font-weight: var(--weight-regular); opacity: 0; transition: opacity var(--duration-fast); }
h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, .anchor:focus { opacity: 1; }
@media (hover: none) { .anchor { opacity: .45; } }

/* On this page */
.toc { position: sticky; top: calc(var(--topbar-h) + var(--space-12)); max-height: calc(100vh - var(--topbar-h) - 96px); overflow: auto; font-size: .8125rem; scrollbar-width: none; }
.toc-title { margin: 0 0 var(--space-3); font-size: .8125rem; font-weight: var(--weight-semibold); color: var(--text); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc > ul { border-left: 1px solid var(--line); }
.toc ul ul a { padding-left: 24px; }
.toc li { margin: 0; }
.toc a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 1px solid transparent; color: var(--text-3); text-decoration: none; line-height: 1.4; transition: color var(--duration-fast); }
.toc a:hover { color: var(--text); }
.toc a.active { color: var(--accent); border-left-color: var(--accent); }

/* ---------- Content ---------- */
.doc :not(pre) > code { background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: .84em; color: var(--text); overflow-wrap: anywhere; }
.doc a code { color: inherit; }
.doc a:has(> code:only-child) { text-decoration: none; }
.doc blockquote { margin: 0 0 var(--space-5); padding: var(--space-1) var(--space-5); border-left: 2px solid var(--line-strong); color: var(--text-2); }
.doc img { height: auto; border-radius: 10px; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li::marker { color: var(--text-3); }
.doc dt { font-weight: var(--weight-semibold); color: var(--text); }
.doc dd { margin: 0 0 var(--space-3) var(--space-4); }

.table-wrap { overflow-x: auto; margin: 0 0 var(--space-8); border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .875rem; line-height: 1.55; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); }
thead th { background: var(--surface-subtle); font-size: .78rem; font-weight: var(--weight-semibold); color: var(--text); white-space: nowrap; letter-spacing: .01em; }
tbody tr { transition: background var(--duration-fast); }
tbody tr:hover { background: color-mix(in srgb, var(--surface-subtle) 60%, transparent); }
tbody tr:last-child > * { border-bottom: 0; }
table.flags td.flag-name, table.flags td:last-child { white-space: nowrap; }
table.flags td:first-child code, table.cmd-index th code { background: none; border: 0; padding: 0; color: var(--text); font-weight: var(--weight-medium); }
table.flags tr:target { background: var(--accent-soft); }
table.cmd-index th { width: 34%; font-weight: var(--weight-regular); }
table.cmd-index th a { text-decoration: none; }
table.cmd-index th a:hover code { color: var(--accent); }
table.cmd-index .subs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font: var(--text-xs)/1.4 var(--font-mono); }
table.cmd-index .subs a { text-decoration: none; }
.muted-row td { color: var(--text-3); }

/* Code blocks: near-black in both themes (brand code tokens), hairline edge. */
.highlight {
  position: relative; margin: 0 0 var(--space-6); background: var(--code-bg);
  border: 1px solid var(--code-line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px -12px rgba(0, 0, 0, .18);
}
.highlight pre { margin: 0; padding: 18px 20px; overflow-x: auto; color: var(--code-text); font-size: .84rem; line-height: 1.7; tab-size: 4; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.highlight pre code { font-size: inherit; background: none; border: 0; padding: 0; color: inherit; }
.highlight .copy {
  position: absolute; top: 10px; right: 10px; padding: 5px 10px; border-radius: 7px;
  border: 1px solid #2a2a2a; background: #161616; color: var(--code-dim); font: var(--weight-medium) 0.72rem/1.4 var(--font-sans);
  cursor: pointer; opacity: 0; transition: opacity var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.highlight:hover .copy, .highlight .copy:focus-visible, .highlight .copy.done { opacity: 1; }
.highlight .copy:hover { color: var(--code-text); border-color: #444; }
.highlight .copy.done { color: #86efac; border-color: #1f4d33; }
@media (hover: none) { .highlight .copy { opacity: 1; } }
pre.snippet { margin: 0 0 var(--space-5); padding: 14px 16px; background: var(--surface-subtle); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; font-size: .82rem; line-height: 1.6; color: var(--text); }
pre.snippet code { background: none; border: 0; padding: 0; }
.synopsis pre { white-space: pre; }

/* Pygments tokens, mapped to the brand code tokens. */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs, .highlight .ch, .highlight .cp, .highlight .cpf { color: #8a8a8a; font-style: normal; }
.highlight .gp { color: #6b6b6b; user-select: none; }
.highlight .go { color: var(--code-dim); }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kc, .highlight .ow, .highlight .nt { color: var(--code-key); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss, .highlight .dl { color: var(--code-str); }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo, .highlight .il, .highlight .no, .highlight .bp { color: #c4b5fd; }
.highlight .nf, .highlight .fm, .highlight .nc, .highlight .nn, .highlight .nd, .highlight .na { color: #fde68a; }
.highlight .nb, .highlight .nv, .highlight .vi, .highlight .vg { color: #5eead4; }
.highlight .err, .highlight .gr, .highlight .gd { color: var(--code-err); }
.highlight .gi { color: var(--code-str); }
.highlight .gh, .highlight .gu { color: var(--code-key); font-weight: var(--weight-medium); }
.highlight .o, .highlight .p { color: var(--code-text); }
.highlight .hll { background: #ffffff12; display: block; }

/* Callouts (GitHub syntax: > [!NOTE]) */
.callout {
  --c: var(--status-info);
  position: relative; margin: 0 0 var(--space-6); padding: 14px 18px 4px 46px;
  border: 1px solid color-mix(in srgb, var(--c) 22%, var(--line)); border-radius: 12px;
  background: color-mix(in srgb, var(--c) 5%, var(--surface));
}
.callout::before {
  content: ""; position: absolute; left: 17px; top: 17px; width: 16px; height: 16px; border-radius: 50%;
  border: 1.6px solid var(--c); background: radial-gradient(circle at 50% 70%, var(--c) 0 1.6px, transparent 2px), linear-gradient(var(--c), var(--c)) 50% 30% / 1.6px 5px no-repeat;
}
.callout-title { margin: 0 0 2px; font-weight: var(--weight-semibold); color: var(--c); font-size: .875rem; }
.callout p, .callout li { margin-bottom: 10px; color: var(--text-2); font-size: .95rem; }
.callout-tip { --c: var(--status-allow); }
.callout-warning, .callout-caution { --c: var(--status-warn); }
.callout-important { --c: var(--status-pending); }

/* Mermaid */
pre.mermaid {
  margin: 0 0 var(--space-8); padding: var(--space-8) var(--space-6); text-align: center; overflow-x: auto;
  font-family: var(--font-mono); color: var(--text-3); white-space: pre;
  background: radial-gradient(circle, var(--grid-line) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--surface);
  border: 1px solid var(--line); border-radius: 14px;
}
pre.mermaid[data-processed="true"] { white-space: normal; font-family: var(--font-sans); }
pre.mermaid svg { max-width: 100%; height: auto; }

/* Terminal demos (asciinema-player), framed like a terminal window. */
.cast { margin: 0 0 var(--space-8); }
.cast-frame {
  position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--code-line); background: var(--code-bg);
  min-height: 120px; padding-top: 34px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 16px 40px -20px rgba(0, 0, 0, .35);
}
.cast-frame::before {
  content: ""; position: absolute; left: 14px; top: 13px; width: 9px; height: 9px; border-radius: 50%;
  background: #3a3a3a; box-shadow: 15px 0 0 #3a3a3a, 30px 0 0 #3a3a3a;
}
.cast-frame::after { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: var(--code-line); }
.cast figcaption { display: flex; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-3); font-family: var(--font-mono); }
.cast figcaption a { color: var(--text-3); }
.cast figcaption a:hover { color: var(--accent); }
.cast-note { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--text-3); }
.cast .ap-wrapper, .cast .ap-player { border-radius: 0; }
.cast .ap-player { background: var(--code-bg); }
.cast .ap-terminal, .cast .ap-term { font-family: var(--font-mono) !important; }
.cast .ap-control-bar { background: rgba(10, 10, 10, .88); border-top: 1px solid var(--code-line); }
.cast .ap-progressbar .ap-bar { background: #2a2a2a !important; }
.cast .ap-progressbar .ap-gutter-full, .cast .ap-progressbar .ap-gutter { background: #2dd4bf !important; }
.video video { width: 100%; border-radius: 12px; border: 1px solid var(--line); background: #000; }
.video figcaption { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--space-2); }

/* Command pages */
.cmd-title { font-size: clamp(1.7rem, 2.6vw, 2.15rem); overflow-wrap: anywhere; letter-spacing: -0.02em; }
.doc .cmd-title code { font-size: 1em; background: none; border: 0; padding: 0; font-weight: var(--weight-medium); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: calc(-1 * var(--space-3)) 0 var(--space-8); }
.tag { font: var(--weight-medium) 0.72rem/1 var(--font-mono); color: var(--text-2); border: 1px solid var(--line); background: var(--surface-subtle); padding: 6px 10px; border-radius: var(--radius-pill); text-decoration: none; }
a.tag:hover { color: var(--accent); border-color: var(--accent); }
.facts { padding-left: 1.2em; }
.facts li { color: var(--text-2); }
.related { list-style: none; padding: 0 !important; display: grid; gap: 0; border-top: 1px solid var(--line); }
.related li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); margin: 0; }
.related li a { text-decoration: none; }
.related li span { color: var(--text-3); font-size: var(--text-sm); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 0 0 var(--space-10); }
.cards-tight { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
a.card:hover { border-color: var(--line-strong); color: var(--text); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card b { font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.card span { color: var(--text-3); font-size: var(--text-sm); line-height: 1.55; }
.card small { color: var(--text-3); font: var(--text-xs)/1 var(--font-mono); margin-top: auto; padding-top: 8px; }
.card-cmd code { font-weight: var(--weight-medium); color: var(--text); font-size: .86rem; background: none !important; border: 0 !important; padding: 0 !important; }
a.card-cmd:hover code { color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .card, a.card:hover { transition: none; transform: none; } }

/* Prev / next */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: var(--space-16); padding-top: var(--space-8); border-top: 1px solid var(--line); }
.prevnext a { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--text); background: var(--surface); min-width: 0; transition: border-color var(--duration-fast); }
.prevnext a:hover { border-color: var(--line-strong); }
.prevnext a:hover b { color: var(--accent); }
.prevnext span { font-size: var(--text-xs); color: var(--text-3); }
.prevnext .prev span::before { content: "\2190  "; }
.prevnext .next span::after { content: "  \2192"; }
.prevnext b { font-weight: var(--weight-medium); overflow-wrap: anywhere; transition: color var(--duration-fast); }
.prevnext .next { text-align: right; grid-column: 2; }

/* ---------- Home (the one page with motion) ---------- */
.main.home { padding-top: var(--space-6); overflow-x: clip; }
.hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12);
  align-items: center; padding: var(--space-16) 0 var(--space-16); isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: -40px -10vw 0 -10vw; pointer-events: none;
  background:
    radial-gradient(circle, var(--grid-line) 1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 80% at 70% 40%, #000 20%, transparent 75%);
}
.hero::after {
  content: ""; position: absolute; z-index: -1; right: -6%; top: 6%; width: 560px; height: 420px; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow-accent), transparent), radial-gradient(closest-side at 70% 70%, var(--glow-blue), transparent);
  filter: blur(10px);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font: var(--weight-medium) .78rem/1 var(--font-sans);
  color: var(--text-2); margin-bottom: var(--space-6); padding: 6px 12px 6px 8px; border: 1px solid var(--line);
  border-radius: var(--radius-pill); background: var(--surface);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hero h1 { font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.045em; max-width: 11ch; margin-bottom: var(--space-5); }
.grad { background: linear-gradient(100deg, var(--grad-1), var(--grad-2) 70%, var(--grad-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { font-size: 1.15rem; color: var(--text-2); margin-bottom: 0; max-width: 40ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-8); }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px;
  font-weight: var(--weight-medium); font-size: .9rem; text-decoration: none; border: 1px solid transparent; white-space: nowrap;
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast), box-shadow var(--duration-fast);
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-base) var(--ease-standard); }
.btn:hover svg { transform: translateX(3px); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: var(--text); color: var(--bg); box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--text) 45%, transparent); transform: translateY(-1px); }
.btn-ghost { border-color: var(--line); color: var(--text); background: var(--surface); }
.btn-ghost:hover { border-color: var(--line-strong); color: var(--text); background: var(--surface-subtle); }

/* The quickstart terminal */
.quick { position: relative; padding: 0; border-radius: 16px; overflow: hidden; background: var(--code-bg); border: 1px solid var(--code-line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 30px 60px -30px rgba(0, 0, 0, .45), 0 0 0 6px color-mix(in srgb, var(--surface-subtle) 70%, transparent); }
.quick-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--code-line); }
.quick-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; }
.quick-bar span { margin-left: 10px; font: .75rem/1 var(--font-mono); color: #8a8a8a; }
.quick .highlight { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.quick .highlight pre { padding: 20px 22px 24px; font-size: .82rem; line-height: 1.85; white-space: pre; overflow-x: auto; }
.quick .q-line { display: block; }
.quick .q-ok { color: #86efac; }
.quick .q-deny { color: var(--code-err); }
.quick .q-dim { color: #8a8a8a; }
.quick .caret { display: inline-block; width: 8px; height: 1.05em; vertical-align: -2px; background: #2dd4bf; margin-left: 2px; }
.quick-foot { margin: var(--space-3) 2px 0; font-size: var(--text-sm); color: var(--text-3); }

/* Section bento */
.home-h { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin: var(--space-6) 0 var(--space-5); }
.home-h h2 { margin: 0; font-size: 1.6rem; }
.home-h a { font-size: var(--text-sm); text-decoration: none; color: var(--text-2); }
.home-h a:hover { color: var(--accent); }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 12px; margin-bottom: var(--space-16); }
.tile {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl, 20px); color: var(--text); text-decoration: none;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--duration-slow) var(--ease-standard);
  background: radial-gradient(400px circle at var(--mx, 80%) var(--my, 0%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%);
}
.tile:hover { border-color: var(--line-strong); color: var(--text); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tile:hover::after { opacity: 1; }
.tile-ic {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; margin-bottom: auto;
  color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  transition: transform var(--duration-slow) var(--ease-settle);
}
.tile:hover .tile-ic { transform: scale(1.08) rotate(-4deg); }
.tile-ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tile b { margin-top: var(--space-6); font-size: 1.02rem; font-weight: var(--weight-semibold); letter-spacing: -0.015em; display: flex; align-items: center; gap: 6px; }
.tile b::after { content: "\2192"; font-weight: var(--weight-regular); color: var(--text-3); opacity: 0; transform: translateX(-6px); transition: opacity var(--duration-base), transform var(--duration-base) var(--ease-standard); }
.tile:hover b::after { opacity: 1; transform: none; color: var(--accent); }
.tile span { color: var(--text-3); font-size: .875rem; line-height: 1.5; }
.tile small { position: absolute; top: 24px; right: 22px; font: .72rem/1 var(--font-mono); color: var(--text-3); }
.tile-lg { grid-column: span 2; grid-row: span 2; padding: 28px; background:
  radial-gradient(circle, var(--grid-line) 1px, transparent 1.3px) 0 0 / 18px 18px, var(--surface); }
.tile-lg b { font-size: 1.5rem; letter-spacing: -0.03em; }
.tile-lg span { font-size: 1rem; max-width: 34ch; }
.tile-wide { grid-column: span 3; }
.steps { list-style: none; margin: var(--space-6) 0 var(--space-2) !important; padding: 0 !important; display: grid; gap: 8px; }
.steps li { margin: 0 !important; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font: .82rem/1.3 var(--font-mono); color: var(--text) !important; }
.steps li em { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--text); color: var(--bg); font: var(--weight-semibold) .7rem/1 var(--font-sans); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-3); }
.chips a { font: .78rem/1 var(--font-mono); color: var(--text-2); text-decoration: none; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-subtle); transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast); }
.chips a:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-soft); }
.tile-wide .chips { margin-top: auto; }
.tile-title { color: inherit; text-decoration: none; }
.tile-title::after { content: ""; }
.tile-title:hover { color: var(--accent); }

/* Home entrance: CSS + IntersectionObserver (docs.js), home page only. */
@media (prefers-reduced-motion: no-preference) {
  .js .home .rise { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-enter), transform 700ms var(--ease-enter); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .home .rise.in { opacity: 1; transform: none; }
  .js .home .tile.rise.in { transition: opacity 700ms var(--ease-enter) calc(var(--i, 0) * 70ms), transform var(--duration-base) var(--ease-standard), border-color var(--duration-base), box-shadow var(--duration-base); }
  .js .home .tile.rise.in:hover { transform: translateY(-3px); }
  .home .quick .q-line { opacity: 0; animation: q-in 420ms var(--ease-enter) forwards; animation-delay: calc(400ms + var(--l, 0) * 260ms); }
  .home .quick .caret { animation: blink 1.1s steps(1) infinite; }
}
@keyframes q-in { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); }
.footer-in { max-width: 1680px; margin: 0 auto; padding: var(--space-8) var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); justify-content: space-between; align-items: center; font-size: .8125rem; color: var(--text-3); }
.footer nav { display: flex; gap: var(--space-5); }
.footer a { color: var(--text-3); text-decoration: none; }
.footer a:hover { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .main { grid-template-columns: minmax(0, 1fr); padding: var(--space-10) var(--space-10) var(--space-16); }
  .toc { display: none; }
}
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); padding: var(--space-10) 0 var(--space-12); }
  .hero h1 { max-width: 14ch; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-lg { grid-row: span 1; }
  .tile-wide { grid-column: span 1; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .menu-btn { display: inline-grid; }
  .sidebar {
    position: fixed; z-index: 55; top: var(--topbar-h); left: 0; bottom: 0; width: min(320px, 86vw); height: auto;
    background: var(--bg); transform: translateX(-102%); transition: transform var(--duration-base) var(--ease-standard);
    visibility: hidden; box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: none; visibility: visible; }
  .scrim:not([hidden]) { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 54; background: var(--backdrop); }
  .topnav { display: none; }
  .search { margin-left: var(--space-2); }
  .topbar-in { padding: 0 var(--space-4); gap: var(--space-3); }
  .main { padding: var(--space-8) var(--space-6) var(--space-16); }
}
@media (max-width: 560px) {
  .brand-word, .brand-docs { display: none; }
  .search-kbd { display: none; }
  .main { padding: var(--space-6) var(--space-4) var(--space-12); }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.35rem; margin-top: var(--space-12); }
  .cmd-title { font-size: 1.5rem; }
  .hero { padding-top: var(--space-6); }
  .hero h1 { font-size: 2.6rem; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .tile-lg, .tile-wide { grid-column: span 1; grid-row: span 1; }
  .tile-lg b { font-size: 1.25rem; }
  .prevnext { grid-template-columns: 1fr; }
  .prevnext .next { grid-column: 1; }
  .cards, .cards-tight { grid-template-columns: minmax(0, 1fr); }
  .highlight pre { padding: 14px 16px; font-size: .78rem; }
  .quick .highlight pre { white-space: pre-wrap; word-break: break-word; font-size: .76rem; }
  table.cmd-index th { width: auto; }
  table.cmd-index tr { display: block; border-bottom: 1px solid var(--line); }
  table.cmd-index th, table.cmd-index td { display: block; border: 0; padding: 6px 12px; }
  table.cmd-index th { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .sidebar, .tile, .tile::after, .tile-ic, .btn, .btn svg { transition: none; } .tile:hover, .btn-primary:hover { transform: none; } }
@media print {
  .topbar, .sidebar, .toc, .prevnext, .footer, .copy { display: none !important; }
  .shell, .main { display: block; }
}

/* asciinema-player theme "maqpna": the brand code tokens (near-black in both themes). */
.asciinema-player-theme-maqpna {
  --term-color-foreground: #e6e6e6;
  --term-color-background: var(--code-bg);
  --term-color-0: #262626;
  --term-color-1: #ff9aa9;
  --term-color-2: #86efac;
  --term-color-3: #f0b84a;
  --term-color-4: #8ab4ff;
  --term-color-5: #c4b5fd;
  --term-color-6: #2dd4bf;
  --term-color-7: #e6e6e6;
  --term-color-8: #8a8a8a;
  --term-color-9: #ffb3be;
  --term-color-10: #a7f3c0;
  --term-color-11: #fde68a;
  --term-color-12: #b4cdff;
  --term-color-13: #ddd6fe;
  --term-color-14: #99f6e4;
  --term-color-15: #ffffff;
}
.doc td:first-child > code { white-space: nowrap; }
.d1 { --i: 1; } .d2 { --i: 2; } .d3 { --i: 3; } .d4 { --i: 4; } .d5 { --i: 5; } .d6 { --i: 6; } .d7 { --i: 7; } .d8 { --i: 8; }
.l1 { --l: 1; } .l2 { --l: 2; } .l3 { --l: 3; } .l4 { --l: 4; } .l5 { --l: 5; } .l6 { --l: 6; }