/* ─────────────────────────────────────────────────────────────────────────────────────────────
   api.siavigyan.com — the developer face of the SIA API (2026-10-16).

   WHY THIS FILE EXISTS: the host's root used to answer FastAPI's default 404 and its only page was
   the stock Swagger UI; the owner, on seeing it: "atleast make the UI look great. check other
   websites, indian and other … its hyper generic". So the host now has two pages of its own — the
   landing (index.html) and the reference (reference.html + reference.js) — built in-house in the
   site's own language: the Dusk palette (SIA_site/src/theme.css), Fraunces for display, Inter for
   body, the gold as a MATERIAL for the one filled button (the 10-09 ruling: a top-lit plate on a
   plinth, never a glow), dark by default with the universe as the stage (the premium home), light
   as the same by day. Nothing moves except what the visitor touches.

   WHAT THE RESEARCH SAID (Razorpay, Setu, Sarvam, Stripe, Resend, Anthropic docs, 2026-10-16):
   a short headline with two verb-first buttons; products grouped by what the developer is
   building; "make your first request" with a timed code sample; numbered steps; a left nav with
   the request on the left and the code on the right; a theme toggle; nothing that reads as a form
   dump. Swagger's one column of collapsible forms is what none of them do.

   The tokens below are copied from theme.css, not linked: this host is its own origin and must
   paint with no request to the main site. ⚠ A palette change there is mirrored here by hand.
   ───────────────────────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/fraunces-latin-iast.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(/fonts/fraunces-italic-latin-iast.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2'); }

:root {
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px;
  --dur-press: 100ms; --dur-fast: 160ms; --dur-base: 220ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* light — warm parchment, the site's day */
  --primary: #3f3a8f;
  --gold: #a8721f;
  --gold-bright: #cf9a3e;
  --background: #f8f2e4;
  --surface: #fffcf5;
  --surface-variant: #efe4cd;
  --on-surface: #201c2e;
  --on-surface-variant: #6a6255;
  --outline: #cabd9d;
  --outline-variant: #e4d8ba;
  --tone-good: #2e7d57;
  --tone-bad: #b23a34;
  --tone-mixed: #b07a1e;
  --lotus: #b56172;
  --nila: #7276bf;
  --water: #099191;

  --shadow-1: 0 1px 2px rgba(32, 24, 8, 0.05), 0 3px 10px rgba(32, 24, 8, 0.06);
  --shadow-2: 0 10px 40px rgba(32, 24, 8, 0.14), 0 2px 8px rgba(32, 24, 8, 0.08);
  --shadow-gold: 0 2px 0 #7f5f27, 0 8px 20px rgba(32, 24, 8, 0.16);
  --gradient-gold: linear-gradient(180deg, #f0d593 0%, #e3bf69 30%, #d1a24a 64%, #b9893b 100%);
  --door-primary-line: #a27a34;
  --door-primary-hi: rgba(255, 250, 232, 0.62);
  --door-primary-lo: rgba(70, 45, 0, 0.26);
  --glass-bg: color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-border: color-mix(in srgb, var(--outline-variant) 70%, transparent);

  /* the stage by day: the sun on parchment, no stars */
  --cosmos-lit: #fffaf0; --cosmos-mid: #f8f2e4; --cosmos-edge: #efe6d2;
  --cosmos-nebula-a: rgba(63, 58, 143, 0.07); --cosmos-nebula-b: rgba(168, 114, 31, 0.10);

  /* the code panel is INK in both themes (Stripe, Setu): the request is the one thing on the page
     that must read as the machine's, and a dark pane on parchment is the manuscript's own contrast */
  --code-bg: #15162b; --code-line: #272848; --code-ink: #e9e4d6; --code-dim: #8e8aa6;
  --code-key: #eec97a; --code-str: #b9d7ff; --code-num: #7fd1c4; --code-bool: #f6a7b8;
}

:root[data-theme="dark"] {
  --primary: #7b74d9;
  --gold: #dcae55;
  --gold-bright: #eec97a;
  --background: #0c0d1a;
  --surface: #14152a;
  --surface-variant: #1e2038;
  --on-surface: #e9e4d6;
  --on-surface-variant: #a8a4b8;
  --outline: #3c3d5c;
  --outline-variant: #262742;
  --tone-good: #7fd1a6;
  --tone-bad: #e59a93;
  --tone-mixed: #e0b25c;
  --lotus: #f698a9;
  --nila: #a9b0fd;
  --water: #5ecbcb;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 14px 44px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 2px 0 #7a5a24, 0 12px 26px rgba(0, 0, 0, 0.5);
  --gradient-gold: linear-gradient(180deg, #f6df9e 0%, #ecca79 30%, #d9ae55 64%, #c0923f 100%);
  --door-primary-line: #a67c32;
  --door-primary-hi: rgba(255, 251, 235, 0.66);
  --door-primary-lo: rgba(70, 45, 0, 0.30);
  --glass-bg: color-mix(in srgb, var(--surface) 70%, transparent);
  --glass-border: color-mix(in srgb, var(--outline-variant) 80%, transparent);

  /* "night, lit from above" — the premium home's ground */
  --cosmos-lit: #141333; --cosmos-mid: #0b0b1e; --cosmos-edge: #04040b;
  --cosmos-nebula-a: rgba(63, 58, 143, 0.22); --cosmos-nebula-b: rgba(220, 174, 85, 0.08);

  --code-bg: #121330; --code-line: #2a2c5a;
}

/* ── base ─────────────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--on-surface); background: var(--background);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; }
code, pre, kbd { font-family: var(--font-mono); }
::selection { background: color-mix(in srgb, var(--gold) 35%, transparent); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* the stage: fixed, under everything, nothing moves */
.cosmos {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120vw 70vh at 38% -12%, var(--cosmos-lit) 0%, var(--cosmos-mid) 55%, var(--cosmos-edge) 100%),
    var(--cosmos-edge);
}
.cosmos::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(60vw 44vh at 78% 12%, var(--cosmos-nebula-a) 0%, transparent 70%),
    radial-gradient(48vw 36vh at 12% 68%, var(--cosmos-nebula-b) 0%, transparent 70%),
    radial-gradient(50vw 40vh at 62% 96%, var(--cosmos-nebula-a) 0%, transparent 72%);
}
.cosmos::after { /* 4 % grain — paper, not pixels */
  content: ''; position: absolute; inset: 0; opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
#stars { position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; }
:root[data-theme="dark"] #stars { display: block; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .wrap { padding: 0 16px; } }

.display { font-family: var(--font-display); font-optical-sizing: auto; letter-spacing: -0.01em; font-weight: 500; }
.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.muted { color: var(--on-surface-variant); }
.small { font-size: 13.5px; }
.lede { font-size: 17px; line-height: 1.6; color: var(--on-surface-variant); max-width: 680px; margin: 0; }
.a { color: var(--on-surface); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent); text-underline-offset: 3px; }
.a:hover { text-decoration-color: var(--gold); }

/* ── the top bar ──────────────────────────────────────────────────────────────────────────── */
.bar { position: sticky; top: 0; z-index: 20; background: var(--glass-bg); border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
@media (hover: none) and (pointer: coarse) { .bar { background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; } }
.bar-in { height: 64px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-surface); margin-right: auto; }
.brand svg { display: block; overflow: visible; }
.brand-word { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: 0.02em; line-height: 1; }
.brand-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: 999px; padding: 3px 8px; line-height: 1; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { font-size: 14px; font-weight: 500; color: var(--on-surface-variant); text-decoration: none; padding: 8px 12px; border-radius: 999px; }
.nav a:hover { color: var(--on-surface); background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.nav a[aria-current="page"] { color: var(--on-surface); }
.bar-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--outline-variant); background: transparent; color: var(--on-surface);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.icon-btn svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .icon-moon { display: none; }
.icon-sun { display: none; } .icon-moon { display: block; }
@media (max-width: 860px) { .nav { display: none; } }

/* ── buttons: the gold is a material, the ghost a hairline ────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 12px 26px; min-height: 48px;
  font: inherit; font-weight: 600; font-size: 15.5px; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.btn-gold { color: #2a1a00; border: 1px solid var(--door-primary-line);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, rgba(0, 0, 0, 0.04) 1px 2px), var(--gradient-gold);
  box-shadow: inset 0 1px 0 var(--door-primary-hi), inset 0 -2px 0 var(--door-primary-lo), var(--shadow-gold);
  text-shadow: 0 1px 0 rgba(255, 246, 220, 0.45); }
.btn-ghost { background: transparent; color: var(--on-surface); border: 1.5px solid var(--outline); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 14px; }
@media (hover: hover) {
  .btn-gold:hover { filter: brightness(1.06); transform: translateY(-1px); }
  .btn-ghost:hover { background: color-mix(in srgb, var(--on-surface) 5%, transparent); border-color: var(--on-surface-variant); transform: translateY(-1px); }
}
.btn:active { transform: scale(0.97); filter: brightness(0.93); transition-duration: var(--dur-press); }

/* ── the hero ─────────────────────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding: 72px 0 40px; }
.hero-words { display: flex; flex-direction: column; gap: 18px; }
.h1 { font-size: clamp(38px, 4.8vw, 60px); line-height: 1.04; letter-spacing: -0.015em; margin: 0; font-weight: 500; text-wrap: balance; }
.sub { font-size: 18.5px; line-height: 1.55; margin: 0; color: var(--on-surface-variant); max-width: 560px; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--outline-variant); }
.facts span { font-size: 13.5px; color: var(--on-surface-variant); }
.facts b { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--on-surface); margin-right: 6px; }
.hero .facts { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 12px 36px; }
/* a grid item's min-width is its content's by default: a code block with a long line would widen the
   column past the screen and clip the whole page on a phone (seen 2026-10-16 at 390 px) */
.hero > *, .two > *, .tiles > *, .steps > * { min-width: 0; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 32px; padding-top: 44px; } }

/* ── sections ─────────────────────────────────────────────────────────────────────────────── */
.sec { margin-top: 96px; display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 88px; }
.sec-head { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; margin: 0; font-weight: 500; letter-spacing: -0.012em; text-wrap: balance; }
@media (max-width: 720px) { .sec { margin-top: 64px; } }

/* cards, tiles, steps */
.card { background: var(--surface); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tile { padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 8px; }
.tile strong { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }
.tile p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--on-surface-variant); }
.tile .sig { width: 28px; height: 2px; border-radius: 2px; background: var(--gold); margin-bottom: 4px; }
.tile .sig.lotus { background: var(--lotus); } .tile .sig.nila { background: var(--nila); } .tile .sig.water { background: var(--water); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tile .chips { margin-top: auto; padding-top: 8px; }
.free { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
.chip { font-family: var(--font-mono); font-size: 12px; color: var(--on-surface); text-decoration: none; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--outline-variant); background: color-mix(in srgb, var(--surface-variant) 55%, transparent); }
.chip:hover { border-color: var(--gold); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; counter-reset: step; }
.step { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.step-n { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--gold); line-height: 1; margin-bottom: 4px; }
.step strong { font-size: 16px; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--on-surface-variant); }

/* the table: a rate card without a rupee */
.tbl { width: 100%; border-collapse: collapse; margin-top: 4px; }
.tbl th { text-align: left; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); font-weight: 600;
  padding: 0 14px 10px 0; border-bottom: 1px solid var(--outline-variant); }
.tbl td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--outline-variant); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .name { font-weight: 600; font-size: 15px; width: 26%; }
.tbl .name a { text-decoration: none; color: inherit; }
.tbl .name a:hover { color: var(--gold); }
.tbl .what { font-size: 14px; line-height: 1.5; color: var(--on-surface-variant); }
.tbl .num { text-align: right; white-space: nowrap; padding-right: 0; }
.tbl .route { white-space: nowrap; }
.credits { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--gold); }
.note { display: block; font-size: 12px; font-weight: 500; color: var(--gold); margin-top: 3px; }
.m { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 7px; border-radius: 6px; line-height: 1; vertical-align: middle; margin-right: 8px; }
.m-post { color: #fff; background: var(--primary); }
.m-get { color: #fff; background: var(--water); }
:root[data-theme="dark"] .m-post { color: #0c0d1a; background: var(--nila); }
:root[data-theme="dark"] .m-get { color: #0c0d1a; }
.path { font-family: var(--font-mono); font-size: 13px; color: var(--on-surface); }
@media (max-width: 760px) {
  .tbl thead { display: none; }
  .tbl tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 0; border-bottom: 1px solid var(--outline-variant); }
  .tbl td { display: block; padding: 0; border: 0; }
  .tbl .name { width: auto; grid-column: 1; grid-row: 1; }
  .tbl .route { grid-column: 1; grid-row: 2; }
  .tbl .what { grid-column: 1; grid-row: 3; }
  .tbl .num { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
}

/* ── code: the ink panel ──────────────────────────────────────────────────────────────────── */
.code { position: relative; background: var(--code-bg); border: 1px solid var(--code-line); border-radius: var(--radius-md); color: var(--code-ink);
  box-shadow: var(--shadow-1); overflow: hidden; min-width: 0; max-width: 100%; }
.code-head { display: flex; align-items: center; gap: 6px; padding: 10px 12px 0 14px; }
.code-title { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--code-dim); margin-right: auto; font-family: var(--font-mono); }
.code pre { margin: 0; padding: 14px 16px 16px; font-size: 12.75px; line-height: 1.6; overflow-x: auto; tab-size: 2; }
/* a reply's long strings wrap (nothing hidden off the right edge); a request keeps its lines */
.code pre.json, .reply pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.code code { font-family: var(--font-mono); }
.j-k { color: var(--code-key); } .j-s { color: var(--code-str); } .j-n { color: var(--code-num); } .j-b { color: var(--code-bool); } .j-c { color: var(--code-dim); font-style: italic; }
.copy { font: inherit; font-size: 12px; font-weight: 600; color: var(--code-dim); background: transparent; border: 1px solid var(--code-line); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.copy:hover { color: var(--code-ink); border-color: var(--code-dim); }
.copy[data-done="1"] { color: var(--code-key); border-color: var(--code-key); }
.tabs { display: flex; gap: 2px; }
.tab { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--code-dim); background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px 8px; cursor: pointer; }
.tab[aria-selected="true"] { color: var(--code-ink); border-bottom-color: var(--code-key); }
.tab:hover { color: var(--code-ink); }
[hidden] { display: none !important; }

/* the hero's reply card */
.reply { transform: rotate(-0.4deg); }
@media (max-width: 980px) { .reply { transform: none; } }

/* first-call layout */
.two { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .two { grid-template-columns: 1fr; } }
.mini { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.mini li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--outline-variant); }
.mini li:first-child { border-top: 0; padding-top: 4px; }
.mini .n { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--gold); line-height: 1.1; }
.mini strong { display: block; font-size: 15px; margin-bottom: 2px; }
.mini p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--on-surface-variant); }

/* ── footer ───────────────────────────────────────────────────────────────────────────────── */
.foot { margin-top: 112px; padding: 28px 0 40px; border-top: 1px solid var(--outline-variant); display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; font-size: 13px; color: var(--on-surface-variant); }
.foot a { color: var(--on-surface-variant); text-decoration: none; }
.foot a:hover { color: var(--on-surface); }
.foot .co { margin-right: auto; display: flex; align-items: center; gap: 10px; }
.foot .colophon { width: 100%; font-size: 12.5px; }
@media (max-width: 720px) { .foot { margin-top: 72px; } }

/* ── the reference ────────────────────────────────────────────────────────────────────────── */
.ref-head { padding: 48px 0 28px; display: flex; flex-direction: column; gap: 12px; max-width: 800px; }
.ref-head .h1 { font-size: clamp(32px, 4vw, 48px); }
.ref { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 40px; align-items: start; }
.toc { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow: auto; padding-right: 6px; scrollbar-width: thin; }
.toc-search { width: 100%; font: inherit; font-size: 13.5px; color: var(--on-surface); background: var(--surface); border: 1px solid var(--outline-variant); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px; }
.toc-search::placeholder { color: var(--on-surface-variant); }
.toc-g { margin: 0 0 16px; }
.toc-g > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface-variant); padding: 0 10px 6px; }
.toc a { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--on-surface-variant); text-decoration: none; padding: 6px 10px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; line-height: 1.35; }
.toc a:hover { color: var(--on-surface); background: color-mix(in srgb, var(--on-surface) 5%, transparent); }
.toc a.on { color: var(--on-surface); border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, transparent); }
.toc a .m { margin: 0; font-size: 9.5px; padding: 2px 5px; }
.toc a.hide { display: none; }
.toc-note { font-size: 12.5px; color: var(--on-surface-variant); padding: 6px 10px; }
.ref-main { display: flex; flex-direction: column; min-width: 0; }
.ep { padding: 44px 0; border-top: 1px solid var(--outline-variant); scroll-margin-top: 84px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 32px; align-items: start; }
.ep:first-child { border-top: 0; padding-top: 8px; }
.ep.one { grid-template-columns: minmax(0, 1fr); }
.ep-words { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ep-code { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ep .h2 { font-size: clamp(22px, 2.2vw, 28px); }
.ep-route { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ep-route .path { font-size: 14px; }
.badge { font-size: 12px; font-weight: 600; color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.badge b { font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-right: 2px; }
.ep p { margin: 0; font-size: 15px; line-height: 1.65; }
.ep p code, .ep li code, .ep td code { font-size: 12.5px; background: color-mix(in srgb, var(--surface-variant) 70%, transparent); border: 1px solid var(--outline-variant); border-radius: 5px; padding: 0 4px; }
.ep ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; }
.ep li { margin: 4px 0; }
.ep h4 { margin: 10px 0 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-surface-variant); }
.fields { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fields th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); font-weight: 600; padding: 0 10px 8px 0; border-bottom: 1px solid var(--outline-variant); }
.fields td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--outline-variant); vertical-align: top; line-height: 1.5; }
.fields tr:last-child td { border-bottom: 0; }
.fields .f-name { font-family: var(--font-mono); font-size: 12.75px; white-space: nowrap; color: var(--on-surface); }
.fields .f-name i { color: var(--gold); font-style: normal; margin-left: 3px; }
.fields .f-type { font-family: var(--font-mono); font-size: 12px; color: var(--on-surface-variant); white-space: nowrap; }
.fields .f-type a { color: var(--on-surface); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent); text-underline-offset: 3px; }
.fields .f-desc { color: var(--on-surface-variant); }
.fields .f-desc em { color: var(--on-surface); font-style: normal; }
.fields tr.sub .f-name { padding-left: 18px; }
.kv { width: 100%; border-collapse: collapse; font-size: 14px; }
.kv td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--outline-variant); vertical-align: top; line-height: 1.5; }
.kv tr:last-child td { border-bottom: 0; }
.kv td:first-child { width: 30%; color: var(--on-surface-variant); font-weight: 500; white-space: nowrap; }
.err { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.err th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); font-weight: 600; padding: 0 10px 8px 0; border-bottom: 1px solid var(--outline-variant); }
.err td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--outline-variant); vertical-align: top; line-height: 1.5; }
.err tr:last-child td { border-bottom: 0; }
.err .st { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--on-surface); white-space: nowrap; width: 10%; }
.err .cd { font-family: var(--font-mono); font-size: 12px; width: 46%; overflow-wrap: break-word; }
.err .wh { color: var(--on-surface-variant); }
.quiet { font-size: 13px; color: var(--on-surface-variant); border: 1px dashed var(--outline); border-radius: 10px; padding: 10px 12px; }
.ref-mobile { display: none; }
@media (max-width: 1180px) {
  .ep { grid-template-columns: minmax(0, 1fr); }
  .ep-code { position: static; }
}
@media (max-width: 900px) {
  .ref { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .ref-mobile { display: block; margin: 0 0 8px; }
  .ref-mobile summary { cursor: pointer; font-size: 14px; font-weight: 600; padding: 12px 16px; list-style: none; display: flex; align-items: center; justify-content: space-between; }
  .ref-mobile summary::after { content: '+'; font-family: var(--font-display); font-size: 20px; color: var(--gold); }
  .ref-mobile[open] summary::after { content: '–'; }
  .ref-mobile .toc { display: block; position: static; max-height: none; padding: 0 10px 12px; }
}