/* =============================================================
   DOCS.MORFFEUS.COM — developer documentation
   -------------------------------------------------------------
   Sibling of morffeus.com (same tokens, DM Sans + Inter, Sora
   only on the home hero) tuned for reading: narrower measure,
   calmer surfaces, no grain, no glow fields. Dark default like
   the site, light via the header toggle (docs are read for
   hours). Code is the one place monospace is allowed.
   ============================================================= */

/* ── Fonts · self-hosted woff2 (tools/fetch_fonts.py), same faces and subsets
   the mockup loaded from Google Fonts. OFL-1.1, licences next to the files. ── */
/* DM Sans · latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans · latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter · cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Inter · cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter · greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* Inter · greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* Inter · vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Inter · latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter · latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono · cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* JetBrains Mono · cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* JetBrains Mono · greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* JetBrains Mono · vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono · cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* JetBrains Mono · cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* JetBrains Mono · greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* JetBrains Mono · vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono · cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* JetBrains Mono · cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* JetBrains Mono · greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-greek.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* JetBrains Mono · vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* JetBrains Mono · latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono · latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Sora · latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/sora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Sora · latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/sora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* ── Tokens · dark (default) ── */
:root{
  --bg-root:#0b0b12;
  --bg-primary:#0e0e16;
  --bg-secondary:#12121b;
  --bg-card:#16161f;
  --bg-card-hover:#1a1a26;
  --bg-elevated:#1e1e2a;
  --code-bg:#0a0a10;
  --code-head:#111119;
  --accent:#a78bfa;
  --accent-dim:rgba(167,139,250,.12);
  --accent-mid:rgba(167,139,250,.25);
  --accent-strong:rgba(167,139,250,.45);
  --text-primary:#e4e4e7;
  --text-secondary:#a1a1aa;
  --text-inactive:#52525b;
  --text-accent:#c4b5fd;
  --border:#1e1e28;
  --border-strong:#2a2a36;
  --border-accent:rgba(167,139,250,.2);
  --green:#4ade80; --green-dim:rgba(74,222,128,.12);
  --yellow:#facc15; --yellow-dim:rgba(250,204,21,.12);
  --red:#f87171; --red-dim:rgba(248,113,113,.12);
  --blue:#60a5fa; --blue-dim:rgba(96,165,250,.12);
  --orange:#fb923c; --orange-dim:rgba(251,146,60,.12);
  --glass-bg:rgba(14,14,22,.84);
  --shadow-lg:0 12px 40px rgba(0,0,0,.55);
  --shadow-xl:0 24px 60px rgba(0,0,0,.7);
  --btn-primary-ink:#0b0b12;
  /* code colours */
  --c-key:#c4b5fd; --c-str:#86efac; --c-num:#fcd34d; --c-cmt:#5b5b6b; --c-kw:#7dd3fc; --c-var:#f9a8d4;
  --radius:10px; --radius-card:14px; --radius-pill:999px;
  --transition:160ms cubic-bezier(.4,0,.2,1);
  --font-display:'Sora',sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,sans-serif;
  --font-num:'Inter',sans-serif;
  --font-code:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --header-h:60px; --sidebar-w:256px; --toc-w:200px;
}
[data-theme="light"]{
  --bg-root:#fafafc;
  --bg-primary:#ffffff;
  --bg-secondary:#f4f4f7;
  --bg-card:#ffffff;
  --bg-card-hover:#f7f5ff;
  --bg-elevated:#ffffff;
  --code-bg:#0f0f17;
  --code-head:#16161f;
  --accent:#7c3aed;
  --accent-dim:rgba(124,58,237,.08);
  --accent-mid:rgba(124,58,237,.18);
  --accent-strong:rgba(124,58,237,.35);
  --text-primary:#17171f;
  --text-secondary:#5b5b6b;
  --text-inactive:#9a9aa8;
  --text-accent:#6d28d9;
  --border:#e6e6ec;
  --border-strong:#d6d6df;
  --border-accent:rgba(124,58,237,.25);
  --green:#16a34a; --green-dim:rgba(22,163,74,.1);
  --yellow:#b45309; --yellow-dim:rgba(180,83,9,.1);
  --red:#dc2626; --red-dim:rgba(220,38,38,.1);
  --blue:#2563eb; --blue-dim:rgba(37,99,235,.1);
  --orange:#ea580c; --orange-dim:rgba(234,88,12,.1);
  --glass-bg:rgba(255,255,255,.86);
  --shadow-lg:0 12px 40px rgba(20,20,40,.10);
  --shadow-xl:0 24px 60px rgba(20,20,40,.14);
  --btn-primary-ink:#ffffff;
}

/* ── Base ── */
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 24px)}
body{font-family:var(--font-body);background:var(--bg-root);color:var(--text-primary);line-height:1.55;min-height:100vh}
button{border:none;background:none;cursor:pointer;font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
code,kbd,pre,.mono{font-family:var(--font-code);font-size:.92em}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
::selection{background:var(--accent-mid)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.container{max-width:1200px;margin:0 auto;padding:0 32px}
@media(max-width:720px){.container{padding:0 16px}}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--font-body);letter-spacing:-.01em;padding:10px 16px;border-radius:var(--radius-pill);white-space:nowrap;transition:transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition)}
.btn-primary{background:var(--accent);color:var(--btn-primary-ink);box-shadow:0 4px 18px var(--accent-mid)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 26px var(--accent-strong)}
.btn-ghost{border:1px solid var(--border-strong);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent-strong);background:var(--accent-dim)}
.btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* =============================================================
   HEADER
   ============================================================= */
.dh{position:sticky;top:0;z-index:100;background:var(--glass-bg);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.dh-inner{max-width:1440px;margin:0 auto;padding:0 24px;height:var(--header-h);display:flex;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{width:24px;height:24px;flex-shrink:0;background:linear-gradient(155deg,#c4b5fd 0%,var(--accent) 40%,#7c3aed 100%);-webkit-mask:url('assets/morffeus-icon.png') center/contain no-repeat;mask:url('assets/morffeus-icon.png') center/contain no-repeat}
.brand-word{width:84px;height:auto;filter:invert(1) hue-rotate(180deg)}
[data-theme="light"] .brand-word{filter:none}
.brand-docs{display:inline-flex;align-items:center;gap:8px;padding-left:12px;margin-left:2px;border-left:1px solid var(--border-strong);font:600 13px/1 var(--font-body);color:var(--text-secondary);letter-spacing:.01em}
.dh-nav{display:flex;gap:2px;margin-left:8px}
.dh-nav a{font:500 13.5px/1 var(--font-body);color:var(--text-secondary);padding:8px 12px;border-radius:var(--radius-pill);transition:color var(--transition),background var(--transition)}
.dh-nav a:hover{color:var(--text-primary);background:var(--accent-dim)}
.dh-nav a.is-here{color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border)}
.dh-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.dh-search{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 10px 0 12px;min-width:240px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg-card);color:var(--text-inactive);font:500 13px/1 var(--font-body);transition:border-color var(--transition)}
.dh-search:hover{border-color:var(--accent-strong);color:var(--text-secondary)}
.dh-search svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.dh-search kbd{margin-left:auto;font:600 10.5px/1 var(--font-num);letter-spacing:.04em;padding:4px 6px;border:1px solid var(--border-strong);border-radius:6px;color:var(--text-inactive);background:var(--bg-secondary)}
.icon-btn{width:36px;height:36px;display:inline-grid;place-items:center;border:1px solid var(--border-strong);border-radius:var(--radius);color:var(--text-secondary);background:var(--bg-card);transition:border-color var(--transition),color var(--transition)}
.icon-btn:hover{border-color:var(--accent-strong);color:var(--text-primary)}
.icon-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none}
.dh .sun{display:none}
[data-theme="light"] .dh .sun{display:block}
[data-theme="light"] .dh .moon{display:none}
.dh-site{font:500 13px/1 var(--font-body);color:var(--text-secondary);display:inline-flex;align-items:center;gap:6px;padding:0 6px}
.dh-site:hover{color:var(--text-primary)}
.dh-site svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}
.dh-burger{display:none}
@media(max-width:1080px){.dh-nav{display:none}.dh-search{min-width:0}.dh-search span{display:none}.dh-search kbd{display:none}.dh-site{display:none}}
@media(max-width:720px){.dh-inner{padding:0 16px;gap:12px}.brand-docs{display:none}.head-signin{display:none}.dh-burger{display:inline-grid}}

/* =============================================================
   HOME
   ============================================================= */
.hero{position:relative;padding:72px 0 56px;overflow:hidden;border-bottom:1px solid var(--border)}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 340px at 20% -10%,var(--accent-dim),transparent 70%),radial-gradient(520px 320px at 90% 10%,rgba(96,165,250,.07),transparent 70%);pointer-events:none}
.hero-inner{position:relative;max-width:820px}
.eyebrow{font:600 12px/1 var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--text-accent);margin-bottom:18px}
.hero h1{font:600 clamp(36px,5vw,52px)/1.08 var(--font-display);letter-spacing:-.03em;color:var(--text-primary);margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-sub{font-size:18px;line-height:1.55;color:var(--text-secondary);max-width:640px;margin-bottom:28px}
.hero-sub b{color:var(--text-primary);font-weight:600}
.hero-search{display:flex;align-items:center;gap:12px;height:56px;padding:0 10px 0 18px;max-width:640px;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-card);box-shadow:var(--shadow-lg);cursor:text;transition:border-color var(--transition),box-shadow var(--transition)}
.hero-search:hover,.hero-search:focus-within{border-color:var(--accent-strong);box-shadow:0 0 0 4px var(--accent-dim),var(--shadow-lg)}
.hero-search svg{width:18px;height:18px;stroke:var(--text-inactive);stroke-width:2;fill:none;flex-shrink:0}
.hero-search input{flex:1;background:none;border:none;outline:none;font:500 16px/1 var(--font-body);color:var(--text-primary)}
.hero-search input::placeholder{color:var(--text-inactive)}
.hero-search kbd{font:600 11px/1 var(--font-num);letter-spacing:.04em;padding:6px 8px;border:1px solid var(--border-strong);border-radius:7px;color:var(--text-inactive);background:var(--bg-secondary)}
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.hero-chips .lb{font:500 12.5px/1 var(--font-body);color:var(--text-inactive);margin-right:4px}
.chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-card);font:500 12.5px/1 var(--font-body);color:var(--text-secondary);transition:border-color var(--transition),color var(--transition)}
.chip:hover{border-color:var(--accent-strong);color:var(--text-primary)}
.chip code{font-size:11.5px;color:var(--text-primary)}

.sec{padding:56px 0;border-bottom:1px solid var(--border)}
.sec:last-of-type{border-bottom:none}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.sec-head h2{font:600 26px/1.15 var(--font-body);letter-spacing:-.02em}
.sec-head p{color:var(--text-secondary);font-size:15px;margin-top:8px;max-width:600px}
.sec-head .more{font:600 13.5px/1 var(--font-body);color:var(--text-accent);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.sec-head .more:hover{color:var(--accent)}

/* start here */
.start{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:start}
.start>.code{position:sticky;top:calc(var(--header-h) + 24px)}
.steps{display:flex;flex-direction:column;gap:6px;counter-reset:step}
.step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:16px;padding:18px 18px 18px 14px;border-radius:var(--radius-card);border:1px solid transparent;transition:background var(--transition),border-color var(--transition)}
.step:hover{background:var(--bg-card);border-color:var(--border)}
.step-n{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:var(--accent-dim);color:var(--text-accent);font:700 13px/1 var(--font-num);border:1px solid var(--border-accent)}
.step h3{font:600 16px/1.3 var(--font-body);margin-bottom:6px}
.step p{color:var(--text-secondary);font-size:14.5px;line-height:1.55}
.step p code{font-size:12.5px;color:var(--text-primary);background:var(--bg-secondary);padding:2px 6px;border-radius:5px;border:1px solid var(--border)}
.step a.more{display:inline-flex;align-items:center;gap:5px;margin-top:10px;font:600 13px/1 var(--font-body);color:var(--text-accent)}
.step a.more:hover{color:var(--accent)}

/* families */
.families{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.family{padding:26px 26px 22px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-card);display:flex;flex-direction:column;gap:14px;transition:border-color var(--transition),transform var(--transition)}
.family:hover{border-color:var(--accent-strong);transform:translateY(-2px)}
.family .tag{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-accent)}
.family .tag i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.family.store .tag i{background:var(--blue)}
.family.store .tag{color:var(--blue)}
.family h3{font:600 20px/1.2 var(--font-body);letter-spacing:-.01em}
.family p{color:var(--text-secondary);font-size:14.5px;line-height:1.55}
.family ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.family ul li{font:500 12.5px/1 var(--font-body);color:var(--text-secondary);padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-secondary)}
.family .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px;border-top:1px solid var(--border);font:500 12.5px/1 var(--font-body);color:var(--text-inactive)}
.family .foot b{color:var(--text-primary);font-weight:600}
.family .foot code{font-size:11.5px;color:var(--text-secondary)}

/* reference grid */
.refgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ref{display:flex;flex-direction:column;gap:10px;padding:18px 18px 16px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-card);transition:border-color var(--transition),transform var(--transition),background var(--transition)}
.ref:hover{border-color:var(--accent-strong);background:var(--bg-card-hover);transform:translateY(-2px)}
.ref-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.ref h3{font:600 15px/1.2 var(--font-body)}
.ref .ic{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--accent-dim);color:var(--text-accent);border:1px solid var(--border-accent)}
.ref .ic svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none}
.ref p{font-size:13.5px;line-height:1.5;color:var(--text-secondary);min-height:40px}
.ref .eps{display:flex;flex-direction:column;gap:5px;margin-top:auto;padding-top:8px;border-top:1px solid var(--border)}
.ref .ep{display:flex;align-items:center;gap:8px;font-family:var(--font-code);font-size:11.5px;color:var(--text-secondary);min-width:0}
.ref .ep span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soon{display:inline-block;font:600 10px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--text-inactive);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:4px 7px}

/* method badge */
.method{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:20px;padding:0 6px;border-radius:6px;font:700 10px/1 var(--font-num);letter-spacing:.06em;flex-shrink:0}
.method.get{color:var(--green);background:var(--green-dim);border:1px solid color-mix(in oklab,var(--green) 30%,transparent)}
.method.post{color:var(--blue);background:var(--blue-dim);border:1px solid color-mix(in oklab,var(--blue) 30%,transparent)}
.method.put{color:var(--yellow);background:var(--yellow-dim);border:1px solid color-mix(in oklab,var(--yellow) 30%,transparent)}
.method.patch{color:var(--accent);background:var(--accent-dim);border:1px solid color-mix(in oklab,var(--accent) 30%,transparent)}
.method.del{color:var(--red);background:var(--red-dim);border:1px solid color-mix(in oklab,var(--red) 30%,transparent)}
.method.lg{min-width:54px;height:26px;font-size:11.5px;border-radius:7px}

/* guides */
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.guide{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;padding:18px 18px 16px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-card);transition:border-color var(--transition),transform var(--transition)}
.guide:hover{border-color:var(--accent-strong);transform:translateY(-2px)}
.guide h3{font:600 15px/1.3 var(--font-body);margin-bottom:6px}
.guide p{font-size:13.5px;line-height:1.5;color:var(--text-secondary)}
.guide .meta{grid-column:1/-1;display:flex;gap:10px;align-items:center;margin-top:6px;font:500 12px/1 var(--font-body);color:var(--text-inactive)}
.guide .meta b{color:var(--text-secondary);font-weight:500}
.guide .arrow{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border);color:var(--text-inactive)}
.guide .arrow svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}
.guide:hover .arrow{color:var(--text-accent);border-color:var(--border-accent)}

/* essentials strip */
.essentials{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ess{padding:16px 18px;border:1px solid var(--border);border-radius:var(--radius-card);background:var(--bg-secondary)}
.ess .lb{font:600 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-inactive);margin-bottom:10px}
.ess .v{font:500 14px/1.4 var(--font-body);color:var(--text-primary)}
.ess .v code{font-size:12.5px;color:var(--text-accent)}
.ess .v small{display:block;margin-top:4px;font-size:12.5px;color:var(--text-secondary)}

/* changelog teaser */
.changes{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden;background:var(--bg-card)}
.change{display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border)}
.change:last-child{border-bottom:none}
.change time{font:600 12.5px/1 var(--font-num);color:var(--text-inactive);letter-spacing:.02em}
.change .t{font-size:14.5px;color:var(--text-primary)}
.change .t code{font-size:12.5px;color:var(--text-accent)}
.change .kind{font:600 10.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:var(--radius-pill);border:1px solid var(--border)}
.change .kind.add{color:var(--green);border-color:color-mix(in oklab,var(--green) 30%,transparent);background:var(--green-dim)}
.change .kind.fix{color:var(--blue);border-color:color-mix(in oklab,var(--blue) 30%,transparent);background:var(--blue-dim)}
.change .kind.dep{color:var(--orange);border-color:color-mix(in oklab,var(--orange) 30%,transparent);background:var(--orange-dim)}

@media(max-width:1080px){.refgrid,.essentials{grid-template-columns:repeat(2,1fr)}.guides{grid-template-columns:1fr 1fr}.start{grid-template-columns:1fr}}
@media(max-width:720px){.hero{padding:44px 0 36px}.refgrid,.essentials,.guides,.families{grid-template-columns:1fr}.change{grid-template-columns:1fr;gap:6px}.sec{padding:40px 0}}

/* =============================================================
   CODE BLOCK
   ============================================================= */
.code{border:1px solid var(--border);border-radius:12px;background:var(--code-bg);overflow:hidden;color:#e4e4e7;font-size:12.5px;line-height:1.6}
.code-head{display:flex;align-items:center;gap:2px;height:40px;padding:0 6px 0 8px;background:var(--code-head);border-bottom:1px solid var(--border)}
.code-head .title{font:600 12px/1 var(--font-body);color:#a1a1aa;padding:0 8px;display:inline-flex;align-items:center;gap:8px}
.code-head .title .method{height:18px;min-width:40px}
.code-head .tab{font:600 12px/1 var(--font-body);color:#71717a;padding:0 10px;height:28px;border-radius:7px;transition:color var(--transition),background var(--transition)}
.code-head .tab:hover{color:#e4e4e7}
.code-head .tab.is-on{color:#e4e4e7;background:rgba(255,255,255,.07)}
.code-head .copy{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:7px;font:600 11.5px/1 var(--font-body);color:#a1a1aa;border:1px solid transparent;transition:color var(--transition),border-color var(--transition)}
.code-head .copy:hover{color:#e4e4e7;border-color:#2a2a36}
.code-head .copy svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}
.code-head .status{margin-left:auto;font:600 11px/1 var(--font-num);color:var(--green);letter-spacing:.04em;padding-right:6px}
.code-head .status.err{color:var(--red)}
.code pre{margin:0;padding:16px 18px;overflow:auto;font-family:var(--font-code);font-size:12.5px;tab-size:2}
.code .pane{display:none}.code .pane.is-on{display:block}
.code .k{color:var(--c-key)}.code .s{color:var(--c-str)}.code .n{color:var(--c-num)}.code .c{color:var(--c-cmt)}.code .kw{color:var(--c-kw)}.code .v{color:var(--c-var)}.code .m{color:#fcd34d;font-weight:700}
.code .p{color:#71717a}

/* =============================================================
   DOC PAGE — 3-column layout
   ============================================================= */
.dl{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w);max-width:1440px;margin:0 auto;min-height:calc(100vh - var(--header-h))}
.ds{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto;padding:24px 14px 40px 24px;border-right:1px solid var(--border);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.ds-group{margin-bottom:22px}
.ds-group>.gt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:600 11.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-inactive);padding:0 10px;margin-bottom:8px}
.ds-group>.gt .b{white-space:nowrap;font:600 9.5px/1 var(--font-body);letter-spacing:.06em;color:var(--text-accent);border:1px solid var(--border-accent);border-radius:var(--radius-pill);padding:3px 6px;text-transform:none}
.ds-group>.gt .b.blue{color:var(--blue);border-color:color-mix(in oklab,var(--blue) 30%,transparent)}
.ds a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;font:500 13.5px/1.3 var(--font-body);color:var(--text-secondary);transition:color var(--transition),background var(--transition)}
.ds a:hover{color:var(--text-primary);background:var(--accent-dim)}
.ds a.is-here{color:var(--text-primary);background:var(--bg-card);border:1px solid var(--border);font-weight:600}
.ds a .soon{margin-left:auto}
.ds a.todo{color:var(--text-secondary)}

.da{min-width:0;padding:32px 44px 96px}
.crumb{display:flex;align-items:center;gap:8px;font:500 12.5px/1 var(--font-body);color:var(--text-inactive);margin-bottom:22px}
.crumb a:hover{color:var(--text-accent)}
.crumb .sep{opacity:.5}
.crumb .here{color:var(--text-secondary)}
.da h1{font:600 36px/1.15 var(--font-body);letter-spacing:-.025em;margin-bottom:14px}
.da .lead{font-size:17px;line-height:1.6;color:var(--text-secondary);max-width:720px;margin-bottom:34px}
.da .lead b{color:var(--text-primary);font-weight:600}
.da .lead code,.da p code,.da li code,.da td code{font-size:12.5px;color:var(--text-primary);background:var(--bg-secondary);padding:2px 6px;border-radius:5px;border:1px solid var(--border)}
.da h2{font:600 24px/1.2 var(--font-body);letter-spacing:-.02em;margin:48px 0 14px;padding-top:24px;border-top:1px solid var(--border);scroll-margin-top:calc(var(--header-h) + 20px)}
.da h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.da h3{font:600 17px/1.3 var(--font-body);margin:26px 0 10px;scroll-margin-top:calc(var(--header-h) + 20px)}
.da p{font-size:15px;line-height:1.65;color:var(--text-secondary);margin-bottom:14px;max-width:720px}
.da p b,.da li b{color:var(--text-primary);font-weight:600}
.da p a,.da li a,.da td a{color:var(--text-accent);border-bottom:1px solid var(--border-accent)}
.da p a:hover{color:var(--accent)}
.da ul,.da ol{margin:0 0 16px 20px;color:var(--text-secondary);font-size:15px;line-height:1.65;max-width:720px}
.da li{margin-bottom:6px}
.anchor{color:var(--text-inactive);margin-left:8px;opacity:0;font-weight:400;transition:opacity var(--transition)}
h2:hover .anchor,h3:hover .anchor{opacity:1}

/* callouts */
.callout{display:grid;grid-template-columns:20px 1fr;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--border-accent);background:var(--accent-dim);margin:18px 0 22px;max-width:720px}
.callout svg{width:18px;height:18px;stroke:var(--accent);stroke-width:2;fill:none;margin-top:1px}
.callout p{margin:0;font-size:14px;color:var(--text-secondary)}
.callout p b{color:var(--text-primary)}
.callout.warn{border-color:color-mix(in oklab,var(--yellow) 35%,transparent);background:var(--yellow-dim)}
.callout.warn svg{stroke:var(--yellow)}

/* param tables */
.params{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 22px;max-width:720px}
.params th{text-align:left;font:600 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-inactive);padding:0 12px 10px 0;border-bottom:1px solid var(--border)}
.params td{vertical-align:top;padding:12px 12px 12px 0;border-bottom:1px solid var(--border);color:var(--text-secondary);line-height:1.55}
.params tr:last-child td{border-bottom:none}
.params td:first-child{white-space:nowrap;width:190px}
.params .pn{font-family:var(--font-code);font-size:12.5px;color:var(--text-primary);font-weight:600}
.params .pt{display:block;margin-top:5px;font:500 11.5px/1 var(--font-num);color:var(--text-inactive)}
.params .req{display:inline-block;margin-left:6px;font:600 9.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--orange);border:1px solid color-mix(in oklab,var(--orange) 35%,transparent);border-radius:4px;padding:2px 4px;vertical-align:middle}
.params .oneof{display:inline-block;margin-left:6px;font:600 9.5px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--text-accent);border:1px solid var(--border-accent);border-radius:4px;padding:2px 4px;vertical-align:middle}
.params td:last-child code{font-size:12px}

/* endpoint block — prose left, samples right */
.ep-block{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:start;margin:10px 0 16px}
.ep-block .prose{min-width:0}
.ep-block .prose .params{max-width:none}
.ep-block .params td:first-child{white-space:normal;width:auto;min-width:150px;padding-right:16px}
.ep-block .params .req,.ep-block .params .oneof{margin-left:0;margin-top:5px;display:inline-block}
.ep-block .params .pn{display:inline-block;margin-right:6px}
.ep-block .prose p{max-width:none}
.ep-block .samples{position:sticky;top:calc(var(--header-h) + 20px);display:flex;flex-direction:column;gap:12px;min-width:0}
.ep-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.ep-title .path{font-family:var(--font-code);font-size:15px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em}
.ep-title .path .pm{color:var(--accent)}
.ep-title .path .base{color:var(--text-inactive);font-weight:500}
.ep-title .copy{width:26px;height:26px;display:inline-grid;place-items:center;border-radius:7px;border:1px solid var(--border);color:var(--text-inactive)}
.ep-title .copy:hover{color:var(--text-accent);border-color:var(--border-accent)}
.ep-title .copy svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}
.ep-block h3{margin-top:0}

/* prev / next */
.pn-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:56px;padding-top:28px;border-top:1px solid var(--border)}
.pn-nav a{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--border);border-radius:12px;background:var(--bg-card);transition:border-color var(--transition)}
.pn-nav a:hover{border-color:var(--accent-strong)}
.pn-nav a.next{text-align:right}
.pn-nav .lb{font:600 11px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-inactive)}
.pn-nav .t{font:600 15px/1.2 var(--font-body);color:var(--text-primary)}
.pn-nav .t code{font-size:12.5px;color:var(--text-secondary);margin-left:6px}
.da-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;font:500 12.5px/1 var(--font-body);color:var(--text-inactive)}
.da-foot a{color:var(--text-secondary);display:inline-flex;align-items:center;gap:6px}
.da-foot a:hover{color:var(--text-accent)}
.da-foot svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none}

/* right toc */
.dt{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto;padding:32px 24px 40px 16px}
.dt .tt{font:600 11.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-inactive);margin-bottom:12px}
.dt a{display:block;padding:6px 0 6px 12px;border-left:1px solid var(--border);font:500 13px/1.35 var(--font-body);color:var(--text-secondary);transition:color var(--transition),border-color var(--transition)}
.dt a:hover{color:var(--text-primary)}
.dt a.is-on{color:var(--text-primary);border-left-color:var(--accent)}
.dt a.sub{padding-left:24px;font-size:12.5px}
.dt .tools{margin-top:24px;padding-top:18px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.dt .tools a{border-left:none;padding:6px 0;font-size:12.5px;display:flex;align-items:center;gap:8px;color:var(--text-inactive)}
.dt .tools a:hover{color:var(--text-accent)}
.dt .tools svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none}

@media(max-width:1280px){.dl{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}.dt{display:none}.da{padding:28px 40px 80px}}
@media(max-width:1080px){.start>.code{position:static}}
@media(max-width:1080px){.ep-block{grid-template-columns:1fr}.ep-block .samples{position:static}}
@media(max-width:900px){.dl{grid-template-columns:1fr}.ds{display:none;position:fixed;inset:var(--header-h) 0 0 0;height:auto;z-index:90;background:var(--bg-root);border-right:none;padding:20px 20px 40px}body.nav-open .ds{display:block}.da{padding:24px 16px 64px}.da h1{font-size:30px}.params td:first-child{width:auto}}

/* =============================================================
   FOOTER
   ============================================================= */
.df{border-top:1px solid var(--border);padding:44px 0 28px;background:var(--bg-primary)}
.df-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.df .brand-lg .brand-mark{width:28px;height:28px}
.df .brand-lg .brand-word{width:100px}
.df-motto{margin-top:14px;font-size:13.5px;line-height:1.55;color:var(--text-secondary);max-width:320px}
.df-col p{font:600 11.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-inactive);margin-bottom:14px}
.df-col a{display:block;font:500 13.5px/1.3 var(--font-body);color:var(--text-secondary);padding:5px 0}
.df-col a:hover{color:var(--text-primary)}
.df-legal{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:36px;padding-top:18px;border-top:1px solid var(--border);font:500 12.5px/1 var(--font-body);color:var(--text-inactive);flex-wrap:wrap}
.df-legal nav{display:flex;gap:16px}
.df-legal a:hover{color:var(--text-secondary)}
@media(max-width:900px){.df-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.df-grid{grid-template-columns:1fr}}

/* =============================================================
   SEARCH PALETTE
   ============================================================= */
.pal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:10vh 16px 0;background:rgba(6,6,10,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pal.is-open{display:flex}
.pal-box{width:100%;max-width:640px;border:1px solid var(--border-strong);border-radius:16px;background:var(--bg-elevated);box-shadow:var(--shadow-xl);overflow:hidden}
.pal-in{display:flex;align-items:center;gap:12px;height:56px;padding:0 18px;border-bottom:1px solid var(--border)}
.pal-in svg{width:18px;height:18px;stroke:var(--text-inactive);stroke-width:2;fill:none}
.pal-in input{flex:1;background:none;border:none;outline:none;font:500 15.5px/1 var(--font-body);color:var(--text-primary)}
.pal-in kbd{font:600 10.5px/1 var(--font-num);padding:5px 7px;border:1px solid var(--border-strong);border-radius:6px;color:var(--text-inactive)}
.pal-list{max-height:52vh;overflow-y:auto;padding:8px}
.pal-g{font:600 10.5px/1 var(--font-body);letter-spacing:.1em;text-transform:uppercase;color:var(--text-inactive);padding:12px 12px 6px}
.pal-it{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text-secondary);font:500 14px/1.3 var(--font-body)}
.pal-it:hover,.pal-it.is-on{background:var(--accent-dim);color:var(--text-primary)}
.pal-it .path{font-family:var(--font-code);font-size:12px;color:var(--text-primary)}
.pal-it .in{margin-left:auto;font:500 11.5px/1 var(--font-body);color:var(--text-inactive)}
.pal-empty{padding:28px 16px;text-align:center;color:var(--text-inactive);font-size:14px}
/* full-text rows (Pagefind) under the quick results: "Page › Heading" + excerpt */
.pal-it.ft{flex-direction:column;align-items:flex-start;gap:4px}
.pal-it.ft .ex{font:400 12.5px/1.45 var(--font-body);color:var(--text-inactive);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pal-it.ft .ex mark{background:none;color:var(--text-accent);font-weight:600}
.pal-foot{display:flex;gap:16px;padding:10px 18px;border-top:1px solid var(--border);font:500 11.5px/1 var(--font-body);color:var(--text-inactive)}
.pal-foot kbd{font:600 10px/1 var(--font-num);padding:3px 5px;border:1px solid var(--border-strong);border-radius:5px;margin-right:4px}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);z-index:300;padding:11px 16px;border-radius:10px;background:var(--bg-elevated);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);font:500 13px/1 var(--font-body);color:var(--text-primary);opacity:0;pointer-events:none;transition:opacity var(--transition),transform var(--transition)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}