/* fg:start — generated by design-system/sync.mjs from design-system/estate.css; do not edit */
/* Estate workspace system.
   Canonical source: design-system/estate.css. design-system/sync.mjs copies it into every app;
   edit it here only. Element defaults use :where() so an app's own rules always win. */

@font-face { font-family: "Public Sans"; src: url("fonts/public-sans-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/public-sans-wght-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --fg-sunk: #111315;
  --fg-bg: #171a1c;
  --fg-surface: #1e2124;
  --fg-raised: #26292d;
  --fg-line: #2f3236;
  --fg-line-strong: #41454a;
  --fg-muted: #757b81;
  --fg-secondary: #9fa5ac;
  --fg-text: #eef0f3;
  --fg-warn: #e4b750;
  --fg-danger: #e8605b;
  --fg-up: #47b7f1;
  --fg-down: #ea6a64;
  --accent: #bdccdd;
  --accent-ink: #0c1722;
  --accent-dim: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --fg-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fg-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fg-r-panel: 10px;
  --fg-r-ctl: 7px;
  --fg-r-chip: 5px;
  --fg-r-dialog: 14px;
  --fg-shadow: 0 18px 48px -12px rgb(var(--fg-shade) / 0.65), 0 2px 6px rgb(var(--fg-shade) / 0.35);
  /* Light: the accent as a light source, and the faint top highlight every raised surface catches. */
  --accent-glow: color-mix(in srgb, var(--accent) 38%, transparent);
  --accent-haze: color-mix(in srgb, var(--accent) 7%, transparent);
  --fg-hi: rgb(255 255 255 / 0.055);
  --fg-elev: inset 0 1px 0 var(--fg-hi), 0 1px 0 rgb(var(--fg-shade) / 0.35), 0 14px 34px -22px rgb(var(--fg-shade) / 0.8);
  --fg-gap: 10px;
  --fg-max: 1560px;
  --fg-ease: cubic-bezier(.2, .7, .2, 1);
  --fg-pad-x: 16px;
  /* Height a sticky element must clear: the header on desktop, nothing on phones. */
  --fg-sticky-top: 0px;
  /* Header height including its border: 53 px on desktop, 94 px on phones with a section row. */
  --fg-header-h: 53px;
  --fg-mark-url: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2220 120 445 250%22%3E%3Cg transform=%22translate(0 60)%22%3E%3Cpath d=%22M 238,156 C 272,124 312,98 346,88 L 352,72 L 360,84 C 392,78 428,74 452,72 Q 412,94 368,118 Q 340,120 318,144 L 314,162 L 306,146 Q 290,148 272,158 L 238,198 Z%22/%3E%3Cpath d=%22M 212,152 C 182,124 152,108 126,104 L 120,90 L 112,102 C 88,100 58,102 34,106 Q 72,122 112,132 Q 136,134 156,154 L 160,170 L 166,156 Q 180,160 190,164 L 204,168 Z%22/%3E%3Cpath d=%22M 202,184 L 212,196 L 202,210 L 200,218 L 206,224 L 198,236 L 196,226 L 190,238 L 188,226 L 178,234 L 184,222 L 192,214 L 196,204 Z%22/%3E%3Cpath d=%22M 234,204 L 250,218 L 244,236 L 248,248 L 262,252 L 258,262 L 252,256 L 246,270 L 242,258 L 232,266 L 236,254 L 240,246 L 236,232 Z%22/%3E%3Cpath d=%22M 248,218 C 272,230 288,246 292,262 C 294,280 272,294 246,296 C 226,297 208,290 202,278 C 198,270 202,262 210,258 L 222,266 Q 214,272 216,278 Q 224,287 244,286 C 266,284 282,272 280,258 C 277,242 262,228 250,214 L 260,220 L 266,226 L 274,222 L 280,240 L 286,234 L 256,208 Z%22/%3E%3Cpath d=%22M 204,92 L 182,72 L 198,94 L 194,96 L 176,84 L 192,102 L 200,106 L 196,112 L 188,108 L 194,124 L 191,132 L 183,128 L 189,140 L 188,148 L 180,144 L 187,156 L 190,162 L 196,166 L 208,170 L 212,160 L 218,176 L 228,182 L 232,172 L 238,188 L 246,194 L 250,184 L 254,200 L 256,208 L 248,220 C 232,220 216,214 208,208 C 198,198 197,186 199,178 C 202,166 206,158 210,152 L 222,144 L 238,138 L 264,134 L 242,120 L 254,114 L 272,110 L 264,100 C 252,94 240,92 232,94 C 220,88 210,88 204,92 Z%22/%3E%3C/g%3E%3C/svg%3E");
  /* Small sizes (header, footer) use the same dragon with its thin limbs thickened so they land on whole pixels. */
  --fg-mark-small-url: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%2220 120 445 250%22%3E%3Cg stroke=%22%23000%22 stroke-width=%2210%22 stroke-linejoin=%22round%22 transform=%22translate(0 60)%22%3E%3Cpath d=%22M 238,156 C 272,124 312,98 346,88 L 352,72 L 360,84 C 392,78 428,74 452,72 Q 412,94 368,118 Q 340,120 318,144 L 314,162 L 306,146 Q 290,148 272,158 L 238,198 Z%22/%3E%3Cpath d=%22M 212,152 C 182,124 152,108 126,104 L 120,90 L 112,102 C 88,100 58,102 34,106 Q 72,122 112,132 Q 136,134 156,154 L 160,170 L 166,156 Q 180,160 190,164 L 204,168 Z%22/%3E%3Cpath d=%22M 202,184 L 212,196 L 202,210 L 200,218 L 206,224 L 198,236 L 196,226 L 190,238 L 188,226 L 178,234 L 184,222 L 192,214 L 196,204 Z%22/%3E%3Cpath d=%22M 234,204 L 250,218 L 244,236 L 248,248 L 262,252 L 258,262 L 252,256 L 246,270 L 242,258 L 232,266 L 236,254 L 240,246 L 236,232 Z%22/%3E%3Cpath d=%22M 248,218 C 272,230 288,246 292,262 C 294,280 272,294 246,296 C 226,297 208,290 202,278 C 198,270 202,262 210,258 L 222,266 Q 214,272 216,278 Q 224,287 244,286 C 266,284 282,272 280,258 C 277,242 262,228 250,214 L 260,220 L 266,226 L 274,222 L 280,240 L 286,234 L 256,208 Z%22/%3E%3Cpath d=%22M 204,92 L 182,72 L 198,94 L 194,96 L 176,84 L 192,102 L 200,106 L 196,112 L 188,108 L 194,124 L 191,132 L 183,128 L 189,140 L 188,148 L 180,144 L 187,156 L 190,162 L 196,166 L 208,170 L 212,160 L 218,176 L 228,182 L 232,172 L 238,188 L 246,194 L 250,184 L 254,200 L 256,208 L 248,220 C 232,220 216,214 208,208 C 198,198 197,186 199,178 C 202,166 206,158 210,152 L 222,144 L 238,138 L 264,134 L 242,120 L 254,114 L 272,110 L 264,100 C 252,94 240,92 232,94 C 220,88 210,88 204,92 Z%22/%3E%3C/g%3E%3C/svg%3E");
  --fg-foot: #1a1d20;
  --fg-inset: #15171a;
  --fg-danger-text: #ffb3b0;
  --fg-danger-bg: #2a1718;
  --fg-danger-hover: #351c1d;
  --fg-line-hover: #565b61;
  --fg-btn-hover: #2d3135;
  --fg-prose-text: #dfe3e7;
  --fg-td: #c5cad0;
  --fg-demo-text: #b9c1c9;
  --fg-chip-text: #b9bfc5;
  --fg-dot: #4a4f55;
  --fg-scroll-hover: #42474d;
  --fg-scroll: #33373c;
  --fg-row-hover: #212428;
  --fg-chip-bg: #191b1e;
  --fg-scrim: rgb(6 7 8 / 0.55);
  --fg-scrim-strong: rgb(5 6 7 / 0.66);
  --fg-demo-bg: rgb(10 11 13 / 0.6);
  --fg-chart-raised: #2d3135;
  /* Glints and shadows are mixed from these channels so a light brand can re-tint every surface. */
  --fg-glint: 255 255 255;
  --fg-shade: 0 0 0;
}

/* Accent families: one per site, equal lightness, sector hue bands, no green. Flintglade owns green. */
[data-site="draconitic"], [data-site="labs"] { --accent: #bdccdd; --accent-ink: #0c1722; }
[data-site="research"] { --accent: #d9e4f2; --accent-ink: #0d1520; }
[data-site="markets"] { --accent: #8fdbff; --accent-ink: #001a26; }
[data-site="agents"] { --accent: #9dc7fe; --accent-ink: #05162c; }
[data-site="ai"] { --accent: #b6bffe; --accent-ink: #11132c; }
[data-site="biochemistry"] { --accent: #ceb5ff; --accent-ink: #1a1029; }
[data-site="nocturne"] { --accent: #f8a3e5; --accent-ink: #230c1f; }
[data-site="tests"] { --accent: #ffa5c8; --accent-ink: #270b17; }
[data-site="splitframe"] { --accent: #ffa9af; --accent-ink: #290b0f; }

/* ------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fg-bg); scroll-padding-top: calc(var(--fg-sticky-top) + 8px); }
:where(body) { margin: 0; min-height: 100vh; background: var(--fg-bg); color: var(--fg-text); font: 400 13px/1.45 var(--fg-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* JetBrains Mono's contextual ligatures would draw >= and == as single glyphs; data shows the characters it contains.
   Applied to every element because the font shorthand resets inherited feature settings. */
*, ::before, ::after { font-feature-settings: "calt" 0 !important; }
:where(h1, h2, h3, h4) { margin: 0; font-weight: 600; line-height: 1.25; }
:where(h1) { font-size: 22px; letter-spacing: -0.012em; }
:where(h2) { font-size: 14px; }
:where(h3) { font-size: 13px; }
:where(p) { margin: 0 0 0.75em; }
:where(a) { color: var(--accent); text-decoration: none; }
:where(a:hover) { text-decoration: underline; text-underline-offset: 2px; }
:where(code, kbd, samp, pre) { font-family: var(--fg-mono); font-size: 0.92em; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(img, svg, canvas, video) { max-width: 100%; }
:where(hr) { height: 1px; margin: 12px 0; border: 0; background: var(--fg-line); }
:where(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
[hidden] { display: none !important; }
.fg-mono, .num { font-family: var(--fg-mono); font-variant-numeric: tabular-nums; }
.fg-muted { color: var(--fg-secondary); }
.fg-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fg-skip { position: absolute; top: 6px; left: 6px; z-index: 100; padding: 8px 12px; border-radius: var(--fg-r-ctl); background: var(--accent); color: var(--accent-ink); font-weight: 600; transform: translateY(-160%); }
.fg-skip:focus { transform: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fg-sunk); }
::-webkit-scrollbar-thumb { border: 2px solid var(--fg-sunk); border-radius: 8px; background: var(--fg-scroll); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-scroll-hover); }

/* ----------------------------------------------------------------- shell */

.fg-header {
  position: relative;
  z-index: 20;
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 18px;
  padding: 0 var(--fg-pad-x);
  border-bottom: 1px solid var(--fg-line);
  background: var(--fg-sunk);
}
.fg-brand { display: inline-flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: 10px; color: var(--fg-text); font-weight: 600; white-space: nowrap; }
.fg-brand:hover { text-decoration: none; }
.fg-brand a { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.fg-brand a:hover { text-decoration: none; color: var(--accent); }
.fg-brand .fg-org { color: var(--fg-secondary); font-weight: 500; }
.fg-brand .fg-sep { color: var(--fg-line-strong); font-weight: 400; }
/* The product name is the site's identity in the header: larger than the network name. */
.fg-brand .fg-sep + a { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.fg-mark { display: inline-block; width: 30px; height: 17px; flex: 0 0 30px; background: var(--accent); -webkit-mask: var(--fg-mark-small-url) center / contain no-repeat; mask: var(--fg-mark-small-url) center / contain no-repeat; }
/* If a site has more sections than fit beside the brand and utilities, the row scrolls instead of
   running under them. */
.fg-nav { display: flex; min-width: 0; flex: 1 1 auto; align-items: stretch; align-self: stretch; gap: 2px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.fg-nav::-webkit-scrollbar { display: none; }
.fg-nav { padding-right: 26px; -webkit-mask: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 28px), transparent); mask: linear-gradient(90deg, transparent, #000 10px, #000 calc(100% - 28px), transparent); }
.fg-nav a { flex: 0 0 auto; }
.fg-nav a:focus-visible { outline-offset: -2px; }
.fg-nav a[aria-current] { scroll-initial-target: nearest; }
.fg-nav a { position: relative; display: inline-flex; align-items: center; padding: 0 10px; color: var(--fg-secondary); font-weight: 500; white-space: nowrap; transition: color 120ms var(--fg-ease), background-color 120ms var(--fg-ease); }
.fg-nav a:hover { color: var(--fg-text); text-decoration: none; }
.fg-nav a::after { position: absolute; right: 8px; bottom: 0; left: 8px; height: 2px; border-radius: 2px 2px 0 0; background: transparent; content: ""; transition: background-color 120ms var(--fg-ease); }
.fg-nav a:hover::after { background: var(--fg-line-strong); }
/* Current section: white text, accent bar on the header edge, and a faint accent light rising from it. */
.fg-nav a[aria-current] { color: var(--fg-text); background: linear-gradient(to top, color-mix(in srgb, var(--accent) 13%, transparent), transparent 80%); }
.fg-nav a[aria-current]::after { right: 0; left: 0; background: var(--accent); }
.fg-utility { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; margin-left: auto; }
.fg-utility > a:not(.fg-btn) { color: var(--fg-secondary); font-weight: 500; }
.fg-utility > a:not(.fg-btn):hover { color: var(--fg-text); text-decoration: none; }

@media (min-width: 761px) {
  :root { --fg-sticky-top: 53px; }
  .fg-header { position: sticky; top: 0; }
}

/* Header menu: this site's pages and its brand's products. A native popover (button + [popover] panel)
   closes on Escape, on a click outside and returns focus to the button without script. The older
   <details> form is still styled for pages not yet converted. */
.fg-menu { position: relative; }
.fg-menu > summary, .fg-menu-toggle { display: inline-flex; min-width: 34px; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 0 11px 0 10px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-ctl); color: var(--fg-secondary); background: var(--fg-surface); font: inherit; font-weight: 500; cursor: pointer; list-style: none; user-select: none; }
.fg-menu > summary::after, .fg-menu-toggle::after { content: "Products"; }
.fg-menu > summary::-webkit-details-marker { display: none; }
.fg-menu > summary:hover, .fg-menu[open] > summary, .fg-menu-toggle:hover { border-color: var(--fg-line-hover); color: var(--fg-text); background: var(--fg-raised); }
.fg-menu[open] > summary { border-color: var(--accent-line); color: var(--fg-text); background: var(--fg-raised); }
.fg-menu:has(> .fg-menu-panel:popover-open) > .fg-menu-toggle { border-color: var(--accent-line); color: var(--fg-text); background: var(--fg-raised); }
.fg-menu > summary svg, .fg-menu-toggle svg { width: 15px; height: 15px; }
.fg-menu-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(860px, calc(100vw - 24px)); max-height: min(80vh, 720px); overflow: auto; padding: 8px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-dialog); color: var(--fg-text); background: var(--fg-surface); box-shadow: var(--fg-shadow); }
.fg-menu-panel[popover] { position: fixed; inset: 60px var(--fg-pad-x) auto auto; margin: 0; }
.fg-menu-panel[popover]::backdrop { background: transparent; }
@supports selector(:popover-open) {
  .fg-menu-panel[popover]:not(:popover-open) { display: none; }
  /* Place the open panel under its button where anchor positioning exists (falls back to the fixed inset). */
  @supports (anchor-name: --fg-menu) {
    .fg-menu-toggle { anchor-name: --fg-menu; }
    .fg-menu-panel[popover] { position-anchor: --fg-menu; top: calc(anchor(bottom) + 8px); right: anchor(right); }
  }
}
/* Browsers without popovers: the panel opens on hover or keyboard focus instead of staying open. */
@supports not selector(:popover-open) {
  .fg-menu-panel[popover] { display: none; }
  .fg-menu:hover > .fg-menu-panel[popover], .fg-menu:focus-within > .fg-menu-panel[popover] { display: block; }
}
.fg-network { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; }
.fg-network section { padding: 10px 8px 12px; }
.fg-network h3 { margin: 0 0 6px; color: var(--fg-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fg-network a { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: baseline; gap: 1px 9px; margin: 0 -6px; padding: 6px; border-radius: var(--fg-r-chip); color: var(--fg-text); font-weight: 500; }
.fg-network a small { grid-column: 2; color: var(--fg-secondary); font-size: 12px; font-weight: 400; line-height: 1.35; }
.fg-network a:hover { background: var(--fg-raised); text-decoration: none; }
.fg-network a[aria-current] { background: var(--accent-dim); box-shadow: inset 2px 0 0 var(--accent); }
.fg-network a i, .fg-site-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 2px; background: var(--accent); }
.fg-network a i { transform: translateY(-1px); }
.fg-site-dot { margin-right: 9px; vertical-align: 1px; }
.fg-network .fg-home { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 8px 10px; border-bottom: 1px solid var(--fg-line); }
.fg-network .fg-home a { display: inline-flex; margin: 0; padding: 4px 6px; }
.fg-network .fg-home a:first-child { font-weight: 650; }
.fg-phone-nav { display: none; }

.fg-rail { display: flex; min-height: 36px; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 6px 16px; border-bottom: 1px solid var(--fg-line); background: var(--fg-sunk); color: var(--fg-secondary); font-size: 12px; }
.fg-rail strong { color: var(--fg-text); font-weight: 500; }
.fg-rail .fg-sep { color: var(--fg-line-strong); }
.fg-rail-end { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }

.fg-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--fg-line); background: var(--fg-sunk); }
.fg-tab { position: relative; display: inline-flex; min-height: 38px; align-items: center; padding: 0 15px; border: 0; border-right: 1px solid var(--fg-line); color: var(--fg-secondary); background: transparent; font-weight: 500; white-space: nowrap; cursor: pointer; }
.fg-tab:hover { color: var(--fg-text); background: var(--fg-inset); text-decoration: none; }
.fg-tab[aria-selected="true"], .fg-tab[aria-current] { color: var(--fg-text); background: var(--fg-bg); }
.fg-tab[aria-selected="true"]::after, .fg-tab[aria-current]::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--accent); content: ""; }
.fg-tab .fg-count { margin-left: 7px; color: var(--fg-muted); font: 500 11px var(--fg-mono); }

.fg-workspace { width: 100%; max-width: var(--fg-max); margin: 0 auto; padding: 14px var(--fg-pad-x) 32px; }

/* Masthead: where you are on this site and what the page is. Its instrument grid and the accent
   signal line along its lower edge are the estate's one decorative device; the line draws once on
   load and is static under reduced motion. Never used behind charts, maps or canvases.
   .fg-pagehead is the standard layout; .fg-masthead adds only the treatment to an app's own head.
   --fg-masthead-top: how far the grid reaches up into the space above (the workspace padding). */
.fg-pagehead, .fg-masthead { position: relative; isolation: isolate; border-bottom: 1px solid var(--fg-line); }
.fg-pagehead::before, .fg-masthead::before { position: absolute; z-index: -1; inset: calc(-1 * var(--fg-masthead-top, 14px)) calc(-1 * var(--fg-pad-x)) 0; background:
    radial-gradient(560px 220px at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%),
    linear-gradient(to right, rgb(var(--fg-glint) / 0.04) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(to bottom, rgb(var(--fg-glint) / 0.04) 1px, transparent 1px) 0 0 / 24px 24px;
  -webkit-mask: radial-gradient(130% 150% at 0% 0%, #000 22%, transparent 68%); mask: radial-gradient(130% 150% at 0% 0%, #000 22%, transparent 68%);
  pointer-events: none; content: ""; }
.fg-pagehead::after, .fg-masthead::after { position: absolute; bottom: -1px; left: 0; width: min(520px, 60%); height: 1px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent) 55%, transparent); transform-origin: 0 50%; animation: fg-signal 720ms var(--fg-ease) 120ms both; pointer-events: none; content: ""; }
@keyframes fg-signal { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
.fg-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin: 0 0 18px; padding: 18px 0 22px; }
.fg-pagehead > div:first-child { min-width: 0; max-width: 100%; }
.fg-pagehead h1, .fg-masthead h1 { font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -0.022em; text-wrap: balance; }
.fg-pagehead p { max-width: 72ch; margin: 8px 0 0; color: var(--fg-secondary); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.fg-pagehead-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fg-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--fg-muted); font-size: 12.5px; }
.fg-crumbs a { color: var(--fg-secondary); }
.fg-crumbs a:hover { color: var(--fg-text); }
.fg-crumbs span[aria-hidden] { color: var(--fg-line-strong); }

/* Group title above a set of panels or rows. */
.fg-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin: 26px 0 10px; }
.fg-section-head:first-child { margin-top: 0; }
.fg-section-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.fg-section-head p { flex: 1 1 100%; margin: 0; color: var(--fg-secondary); font-size: 13.5px; }

.fg-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--fg-gap); align-items: start; }
.fg-grid.stretch { align-items: stretch; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-12 { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- panels */

.fg-panel { min-width: 0; overflow: hidden; border: 1px solid var(--fg-line); border-radius: var(--fg-r-panel); background: var(--fg-surface); }
.fg-panel-head { display: flex; min-height: 44px; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 9px 14px; border-bottom: 1px solid var(--fg-line); }
.fg-panel-head h2, .fg-panel-head h3 { font-size: 14px; }
.fg-panel-head .fg-sub { margin: 2px 0 0; color: var(--fg-secondary); font-size: 12px; font-weight: 400; }
.fg-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fg-panel-body { padding: 14px; }
.fg-panel-body > :last-child { margin-bottom: 0; }
/* The panel a page exists for: stronger edge and the accent signal along its top. */
.fg-panel.primary { border-color: var(--fg-line-strong); background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent) 40%, transparent 75%) top / 100% 1px no-repeat, var(--fg-surface); }
.fg-panel-body > p:not([class]) { font-size: 14px; line-height: 1.55; }

/* Link rows: a list of destinations, each a single target with a name, a line and an optional meta. */
.fg-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.fg-rows > li { min-width: 0; border-bottom: 1px solid var(--fg-line); }
.fg-rows > li:last-child { border-bottom: 0; }
.fg-rows a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 3px 14px; padding: 11px 14px; color: var(--fg-text); transition: background-color 120ms var(--fg-ease); }
.fg-rows a:hover { background: var(--fg-raised); text-decoration: none; }
.fg-rows a[aria-current] { background: var(--accent-dim); box-shadow: inset 2px 0 0 var(--accent); }
.fg-rows .name { min-width: 0; font-size: 14px; font-weight: 600; }
.fg-rows .meta { color: var(--fg-muted); font: 500 11.5px var(--fg-mono); white-space: nowrap; }
.fg-rows .desc { grid-column: 1 / -1; color: var(--fg-secondary); font-size: 13px; line-height: 1.45; }
.fg-rows a:hover .name { color: var(--accent); }
.fg-panel-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 8px 14px; border-top: 1px solid var(--fg-line); background: var(--fg-foot); color: var(--fg-muted); font-size: 11.5px; }
.fg-panel-foot a { color: var(--fg-secondary); }
.fg-note { margin: 0; padding: 10px 14px; border-top: 1px solid var(--fg-line); background: var(--fg-foot); color: var(--fg-secondary); font-size: 12.5px; line-height: 1.55; }
.fg-note.warn { color: var(--fg-warn); }
.fg-note.danger { border-left: 3px solid var(--fg-danger); color: var(--fg-danger-text); background: var(--fg-danger-bg); }

/* Label/value rows (Harvest metric-stack / contract-grid). */
.fg-kv { display: grid; margin: 0; }
.fg-kv > div { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--fg-line); }
.fg-kv > div:last-child { border-bottom: 0; }
.fg-kv dt, .fg-label { color: var(--fg-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fg-kv dd { min-width: 0; margin: 0; overflow-wrap: anywhere; text-align: right; font: 500 13px var(--fg-mono); font-variant-numeric: tabular-nums; }
.fg-kv dd.text { font-family: var(--fg-sans); }
.fg-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
.fg-metrics > div { display: grid; min-width: 0; gap: 5px; padding: 11px 14px; border-right: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); margin: 0 -1px -1px 0; }
.fg-metrics strong { overflow: hidden; font: 600 16px var(--fg-mono); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.fg-metrics small { color: var(--fg-secondary); font-size: 12px; }
.fg-figure { font: 700 28px/1 var(--fg-mono); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.up { color: var(--fg-up); } .down { color: var(--fg-down); }

/* ---------------------------------------------------------------- tables */

.fg-table-wrap { max-width: 100%; overflow: auto; }
.fg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fg-table th, .fg-table td { padding: 8px 12px; border-bottom: 1px solid var(--fg-line); text-align: left; vertical-align: middle; }
.fg-table th { position: sticky; top: 0; z-index: 1; color: var(--fg-secondary); background: var(--fg-foot); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.fg-table td { color: var(--fg-td); }
.fg-table td:first-child, .fg-table td.lead { color: var(--fg-text); }
.fg-table tr:last-child td { border-bottom: 0; }
.fg-table tbody tr:hover td { background: var(--fg-row-hover); }
.fg-table tbody tr[aria-selected="true"] td { background: var(--accent-dim); }
.fg-table .num, .fg-table th.num { font-family: var(--fg-mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.fg-table a { color: var(--fg-text); }
.fg-table a:hover { color: var(--accent); }
.fg-table caption { padding: 10px 12px; color: var(--fg-secondary); text-align: left; caption-side: bottom; }

/* ----------------------------------------------------------------- chips */

.fg-chip { display: inline-flex; min-height: 22px; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-chip); color: var(--fg-chip-text); background: var(--fg-chip-bg); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.fg-chip[data-tone="live"], .fg-chip[data-tone="ready"] { border-color: var(--accent-line); color: var(--accent); }
.fg-chip[data-tone="stale"] { border-color: rgb(228 183 80 / 0.45); color: var(--fg-warn); }
.fg-chip[data-tone="fault"] { border-color: rgb(232 96 91 / 0.55); color: var(--fg-danger); }
.fg-chip[data-tone="plain"] { text-transform: none; letter-spacing: 0; font-weight: 500; }
.fg-dot { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--fg-dot); }
.fg-dot.live { background: var(--accent); box-shadow: 0 0 8px var(--accent-line); animation: fg-pulse 2.4s ease-in-out infinite; }
.fg-dot.stale { background: var(--fg-warn); }
.fg-dot.fault { background: var(--fg-danger); }
@keyframes fg-pulse { 50% { opacity: 0.45; } }

/* -------------------------------------------------------------- controls */

.fg-btn { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-ctl); color: var(--fg-text); background: var(--fg-raised); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color 120ms var(--fg-ease), border-color 120ms var(--fg-ease); }
.fg-btn:hover { border-color: var(--fg-line-hover); background: var(--fg-btn-hover); text-decoration: none; }
.fg-btn.primary { border-color: var(--accent); color: var(--accent-ink); background: var(--accent); font-weight: 600; }
.fg-btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, white); }
.fg-btn.quiet { border-color: transparent; color: var(--fg-secondary); background: transparent; }
.fg-btn.quiet:hover { color: var(--fg-text); background: var(--fg-raised); }
.fg-btn.danger { border-color: rgb(232 96 91 / 0.5); color: var(--fg-danger-text); background: var(--fg-danger-bg); }
.fg-btn.danger:hover { border-color: var(--fg-danger); background: var(--fg-danger-hover); }
.fg-btn.small { min-height: 26px; padding: 0 9px; font-size: 12px; }
.fg-btn:disabled, .fg-btn[aria-disabled="true"] { opacity: 0.42; cursor: not-allowed; }
.fg-btn svg { width: 14px; height: 14px; }

.fg-field { display: grid; min-width: 0; gap: 5px; }
.fg-field > span, .fg-field > label { color: var(--fg-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fg-field small { color: var(--fg-muted); font-size: 12px; }
.fg-field .fg-error { color: var(--fg-danger-text); font-size: 12px; }
.fg-input, .fg-select, .fg-textarea { width: 100%; min-width: 0; min-height: 34px; padding: 7px 10px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-ctl); color: var(--fg-text); background: var(--fg-inset); font-size: 13px; }
.fg-textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.fg-input::placeholder, .fg-textarea::placeholder { color: var(--fg-muted); }
.fg-input:focus, .fg-select:focus, .fg-textarea:focus { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px var(--accent-dim); }
.fg-input[aria-invalid="true"] { border-color: var(--fg-danger); }
.fg-select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--fg-secondary) 50%), linear-gradient(135deg, var(--fg-secondary) 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.fg-check { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-text); cursor: pointer; }
.fg-check input { width: 15px; height: 15px; accent-color: var(--accent); }
.fg-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }

/* Segmented control for ranges and modes. */
.fg-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-ctl); background: var(--fg-inset); }
.fg-seg button, .fg-seg a { min-height: 28px; padding: 0 10px; border: 0; border-right: 1px solid var(--fg-line); color: var(--fg-secondary); background: transparent; font: 500 12px var(--fg-mono); cursor: pointer; }
.fg-seg > :last-child { border-right: 0; }
.fg-seg button:hover, .fg-seg a:hover { color: var(--fg-text); background: var(--fg-raised); text-decoration: none; }
.fg-seg [aria-pressed="true"], .fg-seg [aria-current] { color: var(--accent-ink); background: var(--accent); }

/* ------------------------------------------------------------ empty/load */

.fg-empty { display: grid; justify-items: start; gap: 8px; padding: 22px 16px; color: var(--fg-secondary); }
.fg-empty strong { color: var(--fg-text); font-weight: 600; }
.fg-skeleton { position: relative; overflow: hidden; border-radius: 4px; background: var(--fg-raised); }
.fg-skeleton::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(var(--fg-glint) / 0.05), transparent); transform: translateX(-100%); animation: fg-shimmer 1.4s infinite; content: ""; }
@keyframes fg-shimmer { to { transform: translateX(100%); } }

/* ---------------------------------------------------------------- charts */

.fg-chart { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.fg-chart-legend { display: flex; min-height: 30px; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 6px 14px; color: var(--fg-secondary); font: 500 12px var(--fg-mono); font-variant-numeric: tabular-nums; }
.fg-chart-legend b { color: var(--fg-muted); font-weight: 500; }
.fg-chart-legend span { color: var(--fg-text); }
.fg-chart-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.fg-chart-legend .fg-legend-time { color: var(--fg-secondary); }
.fg-chart-legend .fg-legend-k { color: var(--fg-muted); }
.fg-chart-legend .up { color: var(--fg-up); } .fg-chart-legend .down { color: var(--fg-down); }
.fg-key { display: inline-block; width: 12px; height: 2px; flex: 0 0 12px; border-radius: 1px; }
.fg-chart-stage { position: relative; min-height: 220px; touch-action: pan-y; }
.fg-chart-stage canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.fg-chart-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.fg-chart-msg { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; color: var(--fg-secondary); font-size: 13px; text-align: center; pointer-events: none; }
.fg-chart-msg .fg-btn { pointer-events: auto; }
.fg-chart-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 7px 14px; border-top: 1px solid var(--fg-line); background: var(--fg-foot); color: var(--fg-muted); font-size: 11.5px; }
.fg-chart-foot a { color: var(--fg-secondary); }
.fg-chart-table { max-height: 320px; overflow: auto; border-top: 1px solid var(--fg-line); }

/* --------------------------------------------------------- reading pages */

.fg-reading { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: var(--fg-gap); align-items: start; }
.fg-reading.centered { max-width: 1280px; margin-inline: auto; }
.fg-reading.no-facts { grid-template-columns: 220px minmax(0, 1fr); }
.fg-reading.no-index { grid-template-columns: minmax(0, 1fr) 300px; }
.fg-toc { position: sticky; top: calc(var(--fg-sticky-top) + 12px); max-height: calc(100vh - var(--fg-sticky-top) - 24px); overflow: auto; }
.fg-toc ol, .fg-toc ul { margin: 0; padding: 6px; list-style: none; }
.fg-toc a { display: block; padding: 5px 8px; border-radius: var(--fg-r-chip); color: var(--fg-secondary); font-size: 12.5px; line-height: 1.35; }
.fg-toc a:hover { color: var(--fg-text); background: var(--fg-raised); text-decoration: none; }
.fg-toc a[aria-current] { color: var(--fg-text); background: var(--accent-dim); }
.fg-prose { max-width: 72ch; padding: 18px 22px 22px; font-size: 15px; line-height: 1.68; color: var(--fg-prose-text); }
.fg-prose h1 { margin: 0 0 10px; font-size: 24px; line-height: 1.2; color: var(--fg-text); }
.fg-prose h2 { margin: 1.8em 0 0.5em; font-size: 18px; line-height: 1.3; color: var(--fg-text); }
.fg-prose h3 { margin: 1.5em 0 0.4em; font-size: 15px; color: var(--fg-text); }
.fg-prose > :first-child { margin-top: 0; }
.fg-prose p, .fg-prose ul, .fg-prose ol, .fg-prose blockquote, .fg-prose table, .fg-prose pre, .fg-prose figure { margin: 0 0 1em; }
.fg-prose ul, .fg-prose ol { padding-left: 1.3em; }
.fg-prose li + li { margin-top: 0.3em; }
.fg-prose a { text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.fg-prose blockquote { padding: 2px 0 2px 14px; border-left: 2px solid var(--fg-line-strong); color: var(--fg-secondary); }
.fg-prose code { padding: 1px 5px; border-radius: 4px; background: var(--fg-raised); }
.fg-prose pre { overflow: auto; padding: 12px 14px; border: 1px solid var(--fg-line); border-radius: var(--fg-r-ctl); background: var(--fg-inset); font-size: 13px; line-height: 1.55; }
.fg-prose pre code { padding: 0; background: none; }
.fg-prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fg-prose th, .fg-prose td { padding: 7px 10px; border-bottom: 1px solid var(--fg-line); text-align: left; }
.fg-prose th { color: var(--fg-secondary); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.fg-prose img { height: auto; border-radius: 4px; }
.fg-prose small, .fg-prose .meta { color: var(--fg-secondary); font-size: 13px; }

/* --------------------------------------------------------------- dialogs */

.fg-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-dialog); color: var(--fg-text); background: var(--fg-surface); box-shadow: var(--fg-shadow); }
.fg-dialog::backdrop { background: var(--fg-scrim-strong); }
.fg-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--fg-line); }
.fg-dialog-head h2 { font-size: 15px; }
.fg-dialog-body { display: grid; gap: 12px; padding: 16px; }
.fg-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--fg-line); background: var(--fg-foot); }
.fg-toast-region { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.fg-toast { padding: 10px 14px; border: 1px solid var(--fg-line-strong); border-left: 3px solid var(--accent); border-radius: var(--fg-r-ctl); background: var(--fg-raised); box-shadow: var(--fg-shadow); font-size: 13px; }
.fg-toast.error { border-left-color: var(--fg-danger); }

/* ---------------------------------------------------------------- footer */

.fg-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 22px var(--fg-pad-x) 24px; border-top: 1px solid var(--fg-line); background: var(--fg-sunk); color: var(--fg-muted); font-size: 12.5px; }
.fg-footer a { color: var(--fg-secondary); }
.fg-footer a:hover { color: var(--fg-text); }
.fg-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.fg-footer .fg-footer-end { margin-left: auto; }
/* The generated "Brand / Sector" link leads the footer as the estate signature. */
.fg-footer .network-link { display: inline-flex; align-items: center; gap: 9px; margin-right: 6px; color: var(--fg-text); font-weight: 600; }
.fg-footer .network-link::before { display: inline-block; width: 24px; height: 14px; flex: 0 0 24px; background: var(--accent); -webkit-mask: var(--fg-mark-small-url) center / contain no-repeat; mask: var(--fg-mark-small-url) center / contain no-repeat; content: ""; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .fg-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .span-2, .span-3 { grid-column: span 3; }
  .span-4, .span-5, .span-6, .span-7, .span-8, .span-9 { grid-column: 1 / -1; }
  .fg-grid.keep-pairs .span-4, .fg-grid.keep-pairs .span-5, .fg-grid.keep-pairs .span-6, .fg-grid.keep-pairs .span-7, .fg-grid.keep-pairs .span-8 { grid-column: span 3; }
  .fg-reading { grid-template-columns: 200px minmax(0, 1fr); }
  .fg-reading > .fg-facts { grid-column: 2; }
  .fg-reading.no-index { grid-template-columns: minmax(0, 1fr); }
  .fg-reading.no-index > .fg-facts { grid-column: 1; }
  .fg-network { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-menu-panel { width: min(640px, calc(100vw - 24px)); }
}

/* Opt-in for sites with many sections (header class "stack-mid"): at tablet widths the sections take the
   phone's second header row, opened on the current section, instead of scrolling beside the brand. */
@media (min-width: 761px) and (max-width: 1100px) {
  :root:has(.fg-header.stack-mid) { --fg-header-h: 94px; --fg-sticky-top: 94px; }
  .fg-header.stack-mid { flex-wrap: wrap; gap: 0 10px; }
  .fg-header.stack-mid > .fg-brand, .fg-header.stack-mid > .fg-utility { min-height: 52px; }
  .fg-header.stack-mid > .fg-nav { order: 3; flex: 1 0 100%; align-self: auto; gap: 0; margin: 0 calc(-1 * var(--fg-pad-x)); padding: 0 30px 0 6px; border-top: 1px solid var(--fg-line); -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 34px), transparent); mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 34px), transparent); }
  .fg-header.stack-mid > .fg-nav a { min-height: 40px; padding: 0 10px; }
  .fg-header.stack-mid > .fg-nav a::after { right: 6px; left: 6px; }
  .fg-header.stack-mid > .fg-nav a[aria-current]::after { right: 4px; left: 4px; }
}

@media (max-width: 760px) {
  :root { --fg-gap: 8px; --fg-pad-x: 10px; --fg-header-h: 94px; }
  /* Two rows: brand and menu, then this site's sections as one scrolling row (40 px) that opens on the
     current section (scroll-initial-target); the full list with the current page marked is also under
     "This site" in the menu. */
  .fg-header { flex-wrap: wrap; gap: 0 10px; padding: 0 var(--fg-pad-x); }
  .fg-header > .fg-brand, .fg-header > .fg-utility { min-height: 52px; }
  .fg-header > .fg-nav { display: flex; order: 3; flex: 1 0 100%; flex-wrap: nowrap; align-self: auto; gap: 0; min-width: 0; margin: 0 calc(-1 * var(--fg-pad-x)); padding: 0 30px 0 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; border-top: 1px solid var(--fg-line); -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 34px), transparent); mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 34px), transparent); }
  .fg-header > .fg-nav::-webkit-scrollbar { display: none; }
  .fg-header > .fg-nav a { flex: 0 0 auto; min-height: 40px; padding: 0 10px; font-size: 13px; }
  .fg-header > .fg-nav a::after { right: 6px; bottom: 0; left: 6px; }
  .fg-header > .fg-nav a[aria-current]::after { right: 4px; left: 4px; }
  .fg-header > .fg-nav:empty { display: none; }
  .fg-utility > a:not(.fg-btn):not(.fg-keep) { display: none; }
  .fg-menu > summary::after, .fg-menu-toggle::after { content: "Menu"; }
  .fg-phone-nav { display: grid; gap: 2px; padding: 4px 4px 10px; border-bottom: 1px solid var(--fg-line); margin-bottom: 6px; }
  .fg-phone-nav::before { padding: 6px 8px 4px; color: var(--fg-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; content: "This site"; }
  .fg-phone-nav a { min-height: 40px; display: flex; align-items: center; padding: 0 10px; border-radius: var(--fg-r-chip); color: var(--fg-text); font-size: 14px; }
  .fg-phone-nav a[aria-current] { background: var(--accent-dim); box-shadow: inset 2px 0 0 var(--accent); }
  .fg-phone-nav a:hover { background: var(--fg-raised); text-decoration: none; }
  .fg-menu-panel, .fg-menu-panel[popover] { position: fixed; inset: 58px 8px auto 8px; width: auto; max-height: calc(100dvh - 70px); }
  .fg-network { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-rail { padding: 6px 12px; }
  .fg-tab { padding: 0 12px; flex: 1 1 auto; justify-content: center; }
  .fg-workspace { padding: 10px var(--fg-pad-x) 24px; }
  .fg-grid { grid-template-columns: minmax(0, 1fr); }
  .fg-grid > [class*="span-"], .fg-grid.keep-pairs > [class*="span-"] { grid-column: 1 / -1; }
  .fg-reading, .fg-reading.no-facts { grid-template-columns: minmax(0, 1fr); }
  .fg-reading > * { grid-column: 1 / -1 !important; }
  .fg-toc { position: static; max-height: none; }
  .fg-prose { padding: 14px 14px 18px; font-size: 15px; }
  .fg-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fg-footer { padding-top: 18px; padding-bottom: 20px; }
  .fg-footer .fg-footer-end { margin-left: 0; }
  .fg-footer .network-link { flex: 1 0 100%; }
  .fg-pagehead { margin-bottom: 12px; padding: 12px 0 16px; }
  .fg-pagehead::before { top: -10px; }
  .fg-pagehead h1, .fg-masthead h1 { font-size: 24px; }
  .fg-pagehead p { font-size: 14px; }
  .fg-section-head { margin-top: 20px; }
}

@media (max-width: 380px) {
  .fg-brand .fg-org, .fg-brand .fg-sep { display: none; }
  .fg-network a small { display: none; }
  .fg-network { grid-template-columns: minmax(0, 1fr); }
  .fg-table th, .fg-table td { padding: 7px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; }
  .fg-header, .fg-rail, .fg-tabs, .fg-footer, .fg-menu { display: none !important; }
  .fg-panel { border-color: #bbb; background: #fff; }
}

/* ================================================================ light layer
   The estate as powered instruments: graphite chassis, each site's accent as the light it gives off.
   One orchestrated moment per page (the masthead), a slow aurora behind it, light that follows the
   pointer across surfaces, a glass header carrying the site's tinted dragon, and a search palette
   (Ctrl/Cmd+K) from design-system/fg-shell.js. Everything still reads without script; reduced motion
   stills every animation. */

:where(body) {
  background:
    radial-gradient(1200px 560px at 50% -260px, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%) no-repeat,
    radial-gradient(900px 600px at 100% 0%, rgb(var(--fg-glint) / 0.018), transparent 70%) no-repeat,
    var(--fg-bg);
}
/* Film grain under the content: visible in the gutters between surfaces, never over data. */
:where(body)::before {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; opacity: 0.32;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:where(body) { isolation: isolate; }

/* ------------------------------------------------------------ glass header */
.fg-header {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--fg-sunk) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  transition: background-color 200ms var(--fg-ease), box-shadow 200ms var(--fg-ease);
}
/* The header edge: a hairline lit by the site accent, with a slow light travelling along it. */
.fg-header { overflow-x: clip; }
.fg-header::after {
  position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; pointer-events: none; content: "";
  background: linear-gradient(90deg, var(--fg-line) 0%, color-mix(in srgb, var(--accent) 38%, var(--fg-line)) 22%, var(--fg-line) 60%);
  opacity: 0.9;
}
.fg-header::before {
  position: absolute; bottom: -1px; left: 0; width: 24%; height: 1px; pointer-events: none; content: "";
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 85%, white), transparent);
  transform: translateX(-100%); will-change: transform;
  animation: fg-header-sweep 9s cubic-bezier(.45, 0, .2, 1) 1.2s infinite;
}
@keyframes fg-header-sweep { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(420%); } }
:root.fg-scrolled .fg-header { background: color-mix(in srgb, var(--fg-sunk) 70%, transparent); box-shadow: 0 10px 30px -18px rgb(var(--fg-shade) / 0.9); }

/* The dragon carries the site's colour; here it also gives off that colour as light. */
.fg-brand { position: relative; isolation: isolate; }
.fg-brand::before {
  position: absolute; z-index: -1; top: 50%; left: -8px; width: 56px; height: 36px; pointer-events: none; content: "";
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 30%, transparent), transparent);
  filter: blur(10px); opacity: 0.5; transform: translateY(-50%);
  transition: opacity 240ms var(--fg-ease), transform 240ms var(--fg-ease);
}
.fg-brand:hover::before, .fg-brand:focus-within::before { opacity: 1; transform: translateY(-50%) scale(1.15); }
.fg-mark { width: 40px; height: 23px; flex-basis: 40px; transition: transform 240ms var(--fg-ease); }
.fg-brand:hover .fg-mark, .fg-brand a:hover .fg-mark { transform: translateY(-1px); }

.fg-nav a { border-radius: 6px 6px 0 0; }
.fg-nav a[aria-current] { background: linear-gradient(to top, color-mix(in srgb, var(--accent) 18%, transparent), transparent 85%); }
.fg-nav a[aria-current]::after { box-shadow: 0 0 12px 1px var(--accent-glow); }

/* Search button (mounted by fg-shell.js) and the Products button share one look. */
.fg-search-btn { display: inline-flex; min-height: 34px; align-items: center; gap: 8px; padding: 0 6px 0 10px; border: 1px solid var(--fg-line); border-radius: var(--fg-r-ctl); color: var(--fg-secondary); background: rgb(var(--fg-glint) / 0.025); font: inherit; font-weight: 500; cursor: pointer; transition: border-color 160ms var(--fg-ease), color 160ms var(--fg-ease), background-color 160ms var(--fg-ease); }
.fg-search-btn svg { width: 14px; height: 14px; }
.fg-search-btn span { min-width: 5.5em; text-align: left; }
:root:not([data-site="draconitic"]):not([data-site="flintglade"]) .fg-search-btn span { display: none; }
:root:not([data-site="draconitic"]):not([data-site="flintglade"]) .fg-search-btn { padding: 0 6px 0 9px; }
.fg-search-btn kbd, .fg-palette kbd { display: inline-flex; min-width: 20px; height: 20px; align-items: center; justify-content: center; padding: 0 5px; border: 1px solid var(--fg-line-strong); border-bottom-width: 2px; border-radius: 5px; color: var(--fg-secondary); background: var(--fg-sunk); font: 500 11px var(--fg-mono); }
.fg-search-btn:hover { border-color: var(--accent-line); color: var(--fg-text); background: var(--accent-haze); }
.fg-menu > summary, .fg-menu-toggle { border-color: var(--fg-line); background: rgb(var(--fg-glint) / 0.025); }
.fg-menu > summary:hover, .fg-menu-toggle:hover { border-color: var(--accent-line); background: var(--accent-haze); }

/* Products menu: a glass sheet that opens from its button. */
.fg-menu-panel { border-color: rgb(var(--fg-glint) / 0.08); background: color-mix(in srgb, var(--fg-surface) 86%, transparent); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); box-shadow: var(--fg-shadow), inset 0 1px 0 var(--fg-hi); }
.fg-menu-panel[popover] { transition: opacity 180ms var(--fg-ease), transform 220ms var(--fg-ease), overlay 220ms allow-discrete, display 220ms allow-discrete; }
.fg-menu-panel[popover]:popover-open { opacity: 1; transform: none; }
@starting-style { .fg-menu-panel[popover]:popover-open { opacity: 0; transform: translateY(-6px) scale(0.985); } }
.fg-network section { position: relative; }
.fg-network a { position: relative; transition: background-color 140ms var(--fg-ease); }
.fg-network a i { box-shadow: 0 0 10px var(--accent-glow); }
.fg-network a:hover { background: radial-gradient(260px 80px at var(--mx, 30%) var(--my, 50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 80%), var(--fg-raised); }

/* ----------------------------------------------------------------- surfaces */
:where(.fg-panel) { position: relative; isolation: isolate; }
.fg-panel {
  border-color: rgb(var(--fg-glint) / 0.07);
  background: linear-gradient(180deg, rgb(var(--fg-glint) / 0.022), transparent 120px), var(--fg-surface);
  box-shadow: var(--fg-elev);
}
/* Pointer light along a surface's edge: a ring that brightens where the pointer is. */
.fg-panel::after {
  position: absolute; z-index: 3; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none; content: "";
  background: radial-gradient(420px circle at var(--mx, -999px) var(--my, -999px), color-mix(in srgb, var(--accent) 70%, transparent), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 260ms var(--fg-ease);
}
.fg-pointer .fg-panel:hover::after { opacity: 1; }
.fg-panel.primary { border-color: rgb(var(--fg-glint) / 0.1); background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, transparent) 40%, transparent 75%) top / 100% 1px no-repeat, radial-gradient(700px 180px at 0% 0%, var(--accent-haze), transparent 70%), linear-gradient(180deg, rgb(var(--fg-glint) / 0.025), transparent 140px), var(--fg-surface); }
.fg-panel-head { border-bottom-color: rgb(var(--fg-glint) / 0.06); }
.fg-panel-foot, .fg-note, .fg-chart-foot, .fg-dialog-foot { background: rgb(var(--fg-shade) / 0.14); }
.fg-table th { background: color-mix(in srgb, var(--fg-surface) 70%, var(--fg-sunk)); }

/* Destinations light up under the pointer. */
.fg-rows a { position: relative; }
.fg-rows a:hover { background: radial-gradient(360px 120px at var(--mx, 20%) var(--my, 50%), color-mix(in srgb, var(--accent) 11%, transparent), transparent 75%), var(--fg-raised); }
.fg-rows a[aria-current] { box-shadow: inset 2px 0 0 var(--accent), inset 12px 0 18px -14px var(--accent-glow); }
.fg-site-dot { box-shadow: 0 0 9px var(--accent-glow); }

/* ----------------------------------------------------------------- controls */
.fg-btn { border-color: rgb(var(--fg-glint) / 0.1); background: linear-gradient(180deg, rgb(var(--fg-glint) / 0.05), rgb(var(--fg-glint) / 0.015)), var(--fg-raised); box-shadow: inset 0 1px 0 var(--fg-hi), 0 1px 2px rgb(var(--fg-shade) / 0.3); transition: background-color 140ms var(--fg-ease), border-color 140ms var(--fg-ease), box-shadow 180ms var(--fg-ease), transform 140ms var(--fg-ease); }
.fg-btn:hover { border-color: rgb(var(--fg-glint) / 0.16); background: linear-gradient(180deg, rgb(var(--fg-glint) / 0.08), rgb(var(--fg-glint) / 0.02)), var(--fg-btn-hover); }
.fg-btn:active { transform: translateY(1px); }
.fg-btn.primary { border-color: color-mix(in srgb, var(--accent) 80%, white); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.2), 0 8px 24px -8px var(--accent-glow); }
.fg-btn.primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, white), color-mix(in srgb, var(--accent) 92%, white)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 0 0 0 1px rgb(0 0 0 / 0.2), 0 10px 30px -6px var(--accent-glow); }
.fg-btn.quiet { box-shadow: none; background: transparent; }
.fg-seg { border-color: rgb(var(--fg-glint) / 0.09); background: rgb(var(--fg-shade) / 0.2); box-shadow: inset 0 1px 2px rgb(var(--fg-shade) / 0.35); }
.fg-seg [aria-pressed="true"], .fg-seg [aria-current] { box-shadow: 0 0 14px -2px var(--accent-glow); }
.fg-input, .fg-select, .fg-textarea { border-color: rgb(var(--fg-glint) / 0.1); background-color: rgb(var(--fg-shade) / 0.22); box-shadow: inset 0 1px 2px rgb(var(--fg-shade) / 0.3); }
.fg-input:focus, .fg-select:focus, .fg-textarea:focus { box-shadow: 0 0 0 3px var(--accent-dim), 0 0 18px -4px var(--accent-glow); }
:where(:focus-visible) { outline-offset: 2px; box-shadow: 0 0 0 4px var(--accent-dim); }
.fg-chip { border-color: rgb(var(--fg-glint) / 0.1); background: rgb(var(--fg-shade) / 0.18); }
.fg-chip[data-tone="live"], .fg-chip[data-tone="ready"] { box-shadow: 0 0 12px -3px var(--accent-glow); }
.fg-dot.live { box-shadow: 0 0 0 3px var(--accent-dim), 0 0 12px var(--accent-glow); }
.fg-tabs { background: transparent; }
.fg-tab[aria-selected="true"]::after, .fg-tab[aria-current]::after { box-shadow: 0 0 12px var(--accent-glow); }

/* --------------------------------------------------------------- mastheads
   The one orchestrated moment: the title rises in, the signal line draws, and an aurora in the site's
   colour drifts slowly behind the instrument grid. */
/* The signal line moves to the lower border; the masthead's ::after carries the site's dragon. */
.fg-pagehead, .fg-masthead { border-bottom: 1px solid transparent; border-image: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, var(--fg-line)) 32%, var(--fg-line) 62%, transparent) 1; }
.fg-pagehead::after, .fg-masthead::after {
  top: 50%; right: clamp(0px, 3vw, 48px); bottom: auto; left: auto; z-index: -1;
  width: clamp(150px, 15vw, 230px); height: auto; aspect-ratio: 445 / 250; max-height: 86%;
  background: linear-gradient(110deg, color-mix(in srgb, var(--accent) 70%, transparent) 0%, color-mix(in srgb, var(--accent) 35%, transparent) 45%, color-mix(in srgb, var(--accent) 80%, white) 70%, color-mix(in srgb, var(--accent) 50%, transparent) 100%);
  -webkit-mask: var(--fg-mark-url) center / contain no-repeat; mask: var(--fg-mark-url) center / contain no-repeat;
  box-shadow: none; opacity: var(--fg-dragon-alpha, 0.3); transform: translateY(-50%); transform-origin: 50% 50%;
  /* Four breaths, then still: a masked layer animates on the main thread, so it does not loop forever. */
  animation: fg-dragon-in 1100ms var(--fg-ease) 160ms both, fg-dragon-breathe 7s ease-in-out 1.4s 4;
}
/* Behind page actions the dragon steps back. */
.fg-pagehead:has(.fg-pagehead-actions, .fg-btn), .fg-masthead:has(.fg-btn, button) { --fg-dragon-alpha: 0.17; }
@keyframes fg-dragon-in { from { opacity: 0; transform: translateY(-46%) scale(0.97); } to { opacity: 0.3; transform: translateY(-50%); } }
@keyframes fg-dragon-in-quiet { from { opacity: 0; transform: translateY(-46%) scale(0.97); } to { opacity: 0.17; transform: translateY(-50%); } }
/* Literal keyframes keep the breathing on the compositor. */
@keyframes fg-dragon-breathe { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.44; } }
@keyframes fg-dragon-breathe-quiet { 0%, 100% { opacity: 0.17; } 50% { opacity: 0.25; } }
.fg-pagehead:has(.fg-pagehead-actions, .fg-btn)::after, .fg-masthead:has(.fg-btn, button)::after { animation-name: fg-dragon-in-quiet, fg-dragon-breathe-quiet; }
/* A halo behind the dragon, from the aurora layer. */
.fg-pagehead::before, .fg-masthead::before {
  background:
    radial-gradient(28% 90% at calc(100% - clamp(90px, 14vw, 220px)) 50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(42% 120% at var(--fg-ax, 12%) 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(30% 90% at var(--fg-bx, 58%) 10%, color-mix(in srgb, var(--accent) 8%, rgb(var(--fg-glint) / 0.02)), transparent 70%),
    linear-gradient(to right, rgb(var(--fg-glint) / 0.05) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(to bottom, rgb(var(--fg-glint) / 0.05) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent); mask: linear-gradient(180deg, #000 55%, transparent);
}
.fg-pagehead h1, .fg-masthead h1 { font-size: clamp(30px, 2.6vw + 12px, 44px); line-height: 1.05; letter-spacing: -0.03em; }
.fg-pagehead > div:first-child { animation: fg-rise 700ms var(--fg-ease) both; }
@keyframes fg-rise { from { opacity: 0; transform: translateY(8px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.fg-pagehead { padding: 26px 0 26px; }
.fg-pagehead p { font-size: 16px; }
.fg-crumbs { font-size: 12.5px; letter-spacing: 0.01em; }

/* ------------------------------------------------------------------ footer */
.fg-footer { position: relative; border-top-color: transparent; background: linear-gradient(180deg, rgb(var(--fg-glint) / 0.015), transparent 60%), var(--fg-sunk); }
.fg-footer::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; content: ""; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, var(--fg-line)) 30%, var(--fg-line) 70%, transparent); }
.fg-footer .network-link::before { width: 30px; height: 17px; flex-basis: 30px; }

/* ----------------------------------------------------------- search palette */
.fg-palette { width: min(680px, calc(100vw - 24px)); max-height: min(560px, calc(100dvh - 48px)); margin: 12vh auto auto; padding: 0; overflow: visible; border: 0; color: var(--fg-text); background: transparent; }
.fg-palette::backdrop { background: var(--fg-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fg-palette[open] { animation: fg-pop 200ms var(--fg-ease); }
.fg-palette[open]::backdrop { animation: fg-fade 200ms var(--fg-ease); }
@keyframes fg-pop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } }
@keyframes fg-fade { from { opacity: 0; } }
.fg-palette-box { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(560px, calc(100dvh - 48px)); overflow: hidden; border: 1px solid rgb(var(--fg-glint) / 0.1); border-radius: 16px; background: color-mix(in srgb, var(--fg-surface) 88%, transparent); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); box-shadow: 0 30px 80px -20px rgb(var(--fg-shade) / 0.85), 0 0 0 1px rgb(var(--fg-shade) / 0.4), inset 0 1px 0 var(--fg-hi), 0 0 60px -30px var(--accent-glow); }
.fg-palette-field { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid rgb(var(--fg-glint) / 0.07); }
.fg-palette-field svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--accent); }
.fg-palette-field input { width: 100%; min-width: 0; height: 56px; border: 0; outline: 0; box-shadow: none; color: var(--fg-text); background: transparent; font: 400 17px var(--fg-sans); }
.fg-palette-field input::-webkit-search-cancel-button { display: none; }
.fg-palette-field input::placeholder { color: var(--fg-muted); }
.fg-palette-list { margin: 0; padding: 6px; overflow: auto; list-style: none; overscroll-behavior: contain; }
.fg-palette-group { padding: 10px 10px 4px; color: var(--fg-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.fg-palette-list [role="option"] { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.fg-palette-list [role="option"] i { width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
.fg-palette-title { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.fg-palette-title small { margin-left: 10px; color: var(--fg-secondary); font-size: 12.5px; font-weight: 400; }
.fg-palette-meta { overflow: hidden; max-width: 30ch; color: var(--fg-muted); font: 500 11.5px var(--fg-mono); text-overflow: ellipsis; white-space: nowrap; }
.fg-palette-list [aria-selected="true"] { background: radial-gradient(400px 90px at 0% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 80%), rgb(var(--fg-glint) / 0.05); box-shadow: inset 2px 0 0 var(--accent); }
.fg-palette-list [aria-selected="true"] .fg-palette-meta { color: var(--fg-secondary); }
.fg-palette-empty { padding: 26px 12px; color: var(--fg-secondary); text-align: center; }
.fg-palette-foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 9px 14px; border-top: 1px solid rgb(var(--fg-glint) / 0.06); color: var(--fg-muted); font-size: 12px; }
.fg-palette-foot span { display: inline-flex; align-items: center; gap: 4px; }
:root.fg-palette-open { overflow: hidden; }

/* ------------------------------------------------------- page transitions
   Same-site navigation cross-fades; the header stays put. */
@view-transition { navigation: auto; }
.fg-header { view-transition-name: fg-header; }
::view-transition-old(root) { animation: 160ms var(--fg-ease) both fg-vt-out; }
::view-transition-new(root) { animation: 260ms var(--fg-ease) both fg-vt-in; }
@keyframes fg-vt-out { to { opacity: 0; } }
@keyframes fg-vt-in { from { opacity: 0; transform: translateY(6px); } }

@media (max-width: 760px) {
  .fg-search-btn { padding: 0 9px; }
  .fg-search-btn span, .fg-search-btn kbd { display: none; }
  .fg-palette { margin-top: 10px; }
  .fg-palette-meta { display: none; }
  .fg-palette-title small { display: none; }
  .fg-pagehead::after, .fg-masthead::after { right: 0; width: 140px; opacity: 0.16; animation: none; }
}
@media (max-width: 1100px) { .fg-search-btn kbd { display: none; } }
@media (max-width: 480px) {
  .fg-header > .fg-utility { flex-wrap: nowrap; gap: 6px; }
  .fg-brand .fg-org, .fg-brand .fg-sep { display: none; }
}
/* The Demo mark on every simulator and emulator: small, quiet, always present. */
.fg-demo { display: inline-block; padding: 1px 5px; border: 1px solid rgb(var(--fg-glint) / 0.14); border-radius: 4px; color: var(--fg-demo-text); background: var(--fg-demo-bg); font: 600 9.5px/1.5 var(--fg-sans); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

@media (prefers-reduced-motion: reduce) {
  .fg-header::before { animation: none; display: none; }
  .fg-pagehead::after, .fg-masthead::after { animation: none; }
  @view-transition { navigation: none; }
}
@media print { body::before, .fg-header::after, .fg-panel::after { display: none !important; } }
/* fg:end */

/* Biochemistry — workspace layer over the shared system block above.
   The page stylesheets (map, community, mechanisms, flashcards, study library, chart pages) share the
   token names below, so this bridge carries them onto the dark system. */

:root {
  --paper: var(--fg-bg);
  --field: var(--fg-bg);
  --field-deep: var(--fg-sunk);
  --black: #0c0d0f;
  --surface: var(--fg-surface);
  --surface-raised: var(--fg-raised);
  --surface-soft: #23262a;
  --overlay: rgba(5, 6, 7, 0.66);
  --ink: var(--fg-text);
  --ink-soft: #c5cad0;
  --text: var(--fg-text);
  --muted: var(--fg-secondary);
  --dim: #8a9097;
  --line: var(--fg-line);
  --line-strong: var(--fg-line-strong);
  --brand: var(--accent);
  --brand-bright: #e2d2ff;
  --brand-wash: var(--accent-dim);
  --cyan: #86c5fa;
  --bio: #8db8ef;
  --amber: var(--fg-warn);
  --violet: #b6a6ff;
  --danger: #f08a85;
  --paper-raised: var(--fg-raised);
  --paper-line: var(--fg-line);
  --paper-ink: var(--fg-text);
  --display: var(--fg-sans);
  --sans: var(--fg-sans);
  --mono: var(--fg-mono);
  --max: 1440px;
  --gutter: 16px;
}

body { display: flex; min-height: 100vh; flex-direction: column; font-size: 14px; line-height: 1.55; }
main { flex: 1 0 auto; }
main, section, article, aside, form, div, nav { min-width: 0; }
button, select { cursor: pointer; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 2px; }
code { padding: 1px 5px; border-radius: 4px; background: var(--fg-raised); font: .9em/1.45 var(--fg-mono); overflow-wrap: anywhere; }
h1, h2, h3, h4 { font-family: var(--fg-sans); font-weight: 600; line-height: 1.25; letter-spacing: -0.008em; color: var(--ink); }
h1 { margin: 0 0 6px; font-size: 22px; }
h2 { margin: 0 0 8px; font-size: 17px; }
h3 { margin: 0 0 6px; font-size: 14px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Structure drawings are black line art; flip their lightness on the dark pages and keep heteroatom hues. */
img[src*="/static/chem/"], .map-structure { filter: invert(1) hue-rotate(180deg); }

/* header: product name with the mandated subtitle */
.fg-brand .bio-name { display: inline-flex; align-items: baseline; gap: 10px; }
.fg-brand .bio-name strong { font-weight: 600; }
.fg-brand .bio-name span { color: var(--fg-muted); font-size: 12px; font-weight: 400; white-space: nowrap; }
.head-search { display: flex; overflow: hidden; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-ctl); background: #15171a; }
.head-search:focus-within { border-color: var(--accent); }
.head-search input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }
.head-search input { width: 170px; min-width: 0; min-height: 30px; padding: 0 10px; border: 0; outline: 0; background: transparent; font-size: 13px; }
.head-search button { border: 0; border-left: 1px solid var(--fg-line); padding: 0 10px; color: var(--fg-secondary); background: var(--fg-raised); font-size: 12px; font-weight: 500; }
.fg-phone-nav h2 { margin: 6px 8px 2px; color: var(--fg-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bio-here, .bio-here-sep { display: none; }
@media (max-width: 1720px) { .fg-brand .bio-name span { display: none; } }
@media (max-width: 1360px) { .fg-utility > a[href="/data"] { display: none; } .fg-nav a { padding: 0 8px; } }
/* Below 1240 px the header search gives its room to the sections (search stays in the menu and on /search);
   below 1100 px the sections take the second header row (shared "stack-mid" opt-in on the header). */
@media (max-width: 1240px) { .fg-header .head-search { display: none; } .fg-phone-nav { display: grid; gap: 2px; padding: 4px 4px 8px; border-bottom: 1px solid var(--fg-line); margin-bottom: 4px; } .fg-phone-nav a { padding: 7px 8px; border-radius: var(--fg-r-chip); color: var(--fg-text); } .fg-phone-nav a[aria-current] { background: var(--accent-dim); } }
/* The atlas is a full-height instrument whose toolbar and details sheet are the page's navigation: below
   1100 px it keeps a one-row header (the section row would take a tenth of a phone's height, more in
   landscape) and names the current section in the brand row instead. Sections stay in the menu. */
@media (max-width: 1100px) {
  .page-atlas .fg-header > .fg-nav { display: none; }
  .page-atlas .bio-here-sep { display: inline; color: var(--fg-line-strong); font-weight: 400; }
  .page-atlas .bio-here { display: inline; color: var(--fg-text); font-weight: 600; }
  .page-atlas { --fg-header-h: 53px; --fg-sticky-top: 53px; }
}
@media (max-width: 760px) { .page-atlas { --fg-sticky-top: 0px; } }
/* Phones: the mark already links to Draconitic, so the product name (and on the atlas, Map) keep one row. */
@media (max-width: 480px) { .fg-brand .fg-org, .fg-brand .fg-sep { display: none; } }

/* home workspace */
.home-head h1 { margin: 0; }
.home-poster { position: relative; display: block; overflow: hidden; border-bottom: 1px solid var(--fg-line); background: #15171a; }
.home-poster img { display: block; width: 100%; height: auto; aspect-ratio: 1800 / 1120; object-fit: cover; }
.home-index { display: grid; margin: 0; padding: 0; list-style: none; }
.home-index li { display: grid; grid-template-columns: minmax(150px, 0.8fr) minmax(0, 2fr); gap: 2px 14px; padding: 9px 14px; border-bottom: 1px solid var(--fg-line); }
.home-index li:last-child { border-bottom: 0; }
.home-index a { color: var(--fg-text); font-weight: 600; }
.home-index a:hover { color: var(--accent); text-decoration: none; }
.home-index span { color: var(--fg-secondary); font-size: 13px; }
.reaction-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.reaction-strip li { display: grid; justify-items: center; gap: 4px; padding: 14px 10px; border-right: 1px solid var(--fg-line); text-align: center; }
.reaction-strip li:last-child { border-right: 0; }
.reaction-strip img { width: 117px; height: auto; }
.reaction-strip strong { font-weight: 600; }
.reaction-strip span { color: var(--fg-secondary); font-size: 12px; }
.corpus-line { color: var(--fg-secondary); }
.home-stack { display: grid; gap: var(--fg-gap); align-content: start; }
.home-workspace .hero-actions { margin-top: 0; }
.fg-footer p { margin: 0; }

/* ---------- shared furniture ---------- */
.eyebrow { display: block; color: var(--muted); font: 600 .9rem/1.4 var(--sans); margin-bottom: .2rem; }
.button { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: .45rem; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--fg-raised); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; }
.button:hover { border-color: var(--brand); color: var(--brand-bright); }
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.button.primary:hover { background: color-mix(in srgb, var(--accent) 86%, white); color: var(--accent-ink); }
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 2rem; }
.pagination > span { color: var(--muted); }
.text-link, .back-link { color: var(--brand); font-weight: 700; }
.fine { color: var(--muted); font-size: .88rem; }
.lede { max-width: 80ch; color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }

.feature-section, .content-shell, .index-shell, .source-shell, .download-shell, .comparison-shell, .search-results, .legal, .timeline, .method-shell, .family-layout, .record-layout, .record-hero, .page-hero, .release-boundary { max-width: var(--max); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.feature-section { padding-top: 14px; padding-bottom: 10px; }
.section-heading { max-width: 760px; margin-bottom: 1.6rem; }
.section-heading p, .section-lede { color: var(--muted); font-size: 1.05rem; }
.split-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; margin-bottom: 1.6rem; }
.split-heading p { color: var(--muted); }
.three-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.feature-card { display: flex; flex-direction: column; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.card-index { color: var(--muted); font-weight: 700; font-size: .9rem; }
.feature-card h3 { margin: .3rem 0 .4rem; }
.feature-card p { color: var(--ink-soft); }
.feature-card a { margin-top: auto; font-weight: 700; }
.release-boundary { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem 4rem; padding-top: 3rem; padding-bottom: 3rem; }
.boundary-note { padding: 10px 14px; border: 1px solid var(--fg-line); border-left: 2px solid var(--fg-line-strong); border-radius: 0 var(--fg-r-ctl) var(--fg-r-ctl) 0; background: var(--fg-surface); color: var(--ink-soft); }
.boundary-note strong { display: block; color: var(--fg-text); font-weight: 600; }
.boundary-note p { margin: .3rem 0 0; }
.page-hero { padding-top: 18px; padding-bottom: 12px; }
.page-hero > p { max-width: 80ch; color: var(--muted); font-size: 14px; }
.page-evidence .index-shell { padding-bottom: 3rem; }
.status-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; max-width: 760px; margin-top: 1.4rem; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.status-banner strong { color: var(--bio); }
.status-banner span:last-child { color: var(--muted); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); }
.family-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 2.5rem; padding-bottom: 3rem; }
.prose { max-width: 72ch; font-size: 15px; line-height: 1.7; color: #dfe3e7; }
.prose h2, .record-main h2 { margin: 2.2rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.6rem 0 .5rem; }
.prose li { margin-bottom: .4rem; }
.prose blockquote, .record-main blockquote { margin: 1rem 0 1.6rem; padding: .9rem 1.2rem; border-left: 3px solid var(--bio); background: #1b2229; }
.token-line { padding: .7rem 1rem; border: 1px solid #34465a; background: #1b2229; color: var(--bio); font-weight: 600; border-radius: 6px; }
.token-line.amber { border-color: #5c4a2c; background: #26211a; color: var(--amber); }
.scope-panel { padding: 1.2rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); align-self: start; }
.scope-panel dl { display: grid; gap: .8rem; margin: 0 0 1rem; }
.scope-panel dl div { border-top: 1px solid var(--line); padding-top: .6rem; }
.scope-panel dt, .fact-grid dt, .micro-meta dt, .record-aside dt, .measurement-panel dt { color: var(--muted); font-weight: 600; font-size: .88rem; }
.scope-panel dd { margin: .15rem 0 0; }
.compact-section { padding-top: 1.5rem; }
.dossier-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 1rem; }
.dossier-strip a { display: grid; gap: 2px; padding: .8rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-decoration: none; color: var(--ink); }
.dossier-strip a:hover { border-color: var(--brand); }
.dossier-strip strong { font: 600 15px var(--fg-mono); }
.dossier-strip span { color: var(--bio); font-size: .9rem; }
.dossier-strip small { color: var(--muted); }
.filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: .8rem 1rem; margin: 1rem 0; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.filter-bar label, .compare-form label { display: grid; gap: .3rem; font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.filter-bar input, .filter-bar select, .compare-form select, .search-form input { width: 100%; min-height: 44px; padding: .55rem .75rem; border: 1.5px solid var(--line-strong); border-radius: 6px; background: var(--surface); }
.filter-bar input:focus, .filter-bar select:focus, .compare-form select:focus, .search-form input:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.filter-bar .text-link { align-self: center; }
.result-count { margin: 1rem 0 1.4rem; color: var(--muted); }
.dossier-grid, .evidence-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.dossier-card, .evidence-card { display: flex; flex-direction: column; gap: .4rem; padding: 1.1rem 1.15rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.dossier-card:hover, .evidence-card:hover { border-color: var(--line-strong); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.182); }
.card-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; align-items: center; }
.card-top code { font-size: .85rem; }
.status-tag { display: inline-flex; align-items: center; padding: .15rem .55rem; border: 1px solid #34465a; border-radius: 5px; color: var(--bio); background: #1b2229; font-weight: 600; font-size: .82rem; }
.status-acatalytic-related { border-color: #5c4a2c; color: var(--amber); background: #26211a; }
.dossier-card h2, .evidence-card h2 { font-size: 16px; margin: .3rem 0 0; }
.dossier-card h2 a, .evidence-card h2 a { color: var(--ink); text-decoration: none; }
.dossier-card h2 a:hover, .evidence-card h2 a:hover { color: var(--brand); text-decoration: underline; }
.protein-name { color: var(--muted); }
.micro-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .8rem; margin: .4rem 0; }
.micro-meta dd { margin: .1rem 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.card-link { margin-top: auto; font-weight: 700; text-decoration: none; }
.empty-state { padding: 22px 16px; border: 1px solid var(--line); border-radius: 8px; text-align: left; background: var(--surface); }
.empty-state h2, .empty-state h3 { margin: 0 0 6px; font-size: 16px; }
.empty-state p { color: var(--muted); max-width: 72ch; }
.inline-empty { padding: 1rem; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); }
.empty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.record-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; align-items: end; padding-top: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.record-hero > div > p { color: var(--ink-soft); max-width: 70ch; }
.identity-stamp { display: grid; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.identity-stamp span { color: var(--muted); font-weight: 600; font-size: .9rem; }
.identity-stamp strong { margin: .2rem 0; color: var(--bio); font: 600 20px var(--fg-mono); }
.identity-stamp small { color: var(--muted); }
.record-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.5rem; padding-top: 2rem; padding-bottom: 3rem; }
.record-section + .record-section { margin-top: 2.2rem; }
.record-section h3 { margin: 1.6rem 0 .6rem; }
.fact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 18px; margin: 0; }
.fact-grid div { border-top: 1px solid var(--line); padding: .6rem 0; }
.fact-grid dd { margin: .15rem 0 0; overflow-wrap: anywhere; }
.fact-grid .fact-wide { grid-column: 1 / -1; }
.record-aside { display: grid; gap: 1rem; align-content: start; }
.record-aside section { padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.record-aside p { color: var(--ink-soft); font-size: .95rem; }
.source-chip { display: inline-flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; padding: .35rem .7rem; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
.source-chip span { color: var(--muted); font-size: .88rem; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag-cloud span { padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-soft); font-size: .88rem; background: var(--surface); }
.evidence-list { display: grid; gap: .5rem; list-style: none; padding: 0; }
.evidence-list a { display: grid; gap: .1rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-decoration: none; color: var(--ink); }
.evidence-list a:hover { border-color: var(--brand); }
.evidence-list span, .evidence-list small { color: var(--muted); font-size: .9rem; }
.measurement-panel { padding: 1.1rem; border: 1px solid #34465a; border-radius: 8px; background: #1b2026; }
.measurement-panel dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem 1rem; margin: 0; }
.measurement-panel dd { margin: .1rem 0 0; font-weight: 600; }
.detail-table small { color: var(--muted); }
.long-code, .digest { font-size: .85rem; overflow-wrap: anywhere; }
.refusal-callout { display: grid; gap: .4rem; padding: 1rem 1.1rem; margin: 1.2rem 0; border: 1px solid #6b3633; border-radius: 8px; background: #2a1718; }
.refusal-callout strong { color: var(--danger); }
.refusal-callout p { margin: 0; color: var(--ink-soft); }
.mini-refusal { padding: .5rem .7rem; border-left: 3px solid var(--danger); background: #2a1718; color: var(--ink-soft); font-size: .9rem; border-radius: 0 6px 6px 0; }
.source-description, .citation-panel { padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.citation-panel > strong { display: block; margin-bottom: .4rem; }
.citation-panel dl { display: grid; gap: .5rem; margin: .6rem 0 0; }
.citation-panel dt { color: var(--muted); font-weight: 600; font-size: .88rem; }
.citation-panel dd { margin: 0; overflow-wrap: anywhere; }
.equation { font-weight: 600; overflow-wrap: anywhere; }
.provenance-table td:nth-child(3) { overflow-wrap: anywhere; }
.table-region { max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
caption { text-align: left; padding: .8rem 1rem; font-weight: 700; }
th, td { padding: 8px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: #1a1d20; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-top: 0; }
tbody th { font-weight: 600; }
tbody th small { display: block; margin-top: .2rem; color: var(--muted); font-weight: 400; }
.comparison-shell { padding-bottom: 3rem; }
.comparison-picker, .fixture-picker { padding: 1.1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin-bottom: 1.4rem; }
.compare-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; align-items: end; }
.fixture-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.fixture-grid a { display: grid; gap: .2rem; padding: .9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-decoration: none; color: var(--ink); }
.fixture-grid a:hover, .fixture-grid a[aria-current="true"] { border-color: var(--brand); background: var(--brand-wash); }
.fixture-grid strong { color: var(--bio); }
.fixture-grid span { color: var(--muted); font-size: .9rem; }
.decision-panel { padding: 1.2rem; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--surface); margin: 1.2rem 0; }
.decision-allowed { border-color: #4d6a8a; }
.decision-refused { border-color: #8a4440; }
.decision-head { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: .6rem; }
.decision-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #2a1718; color: var(--danger); font-weight: 800; }
.decision-allowed .decision-mark { background: #1b2229; color: var(--bio); }
.measurement-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 1rem 0; }
.measurement-pair article { padding: .9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.measurement-pair span { color: var(--muted); font-size: .88rem; }
.measurement-pair strong { display: block; font: 600 17px var(--fg-mono); }
.refusal-list { display: grid; gap: .6rem; }
.refusal-list article { padding: .8rem 1rem; border: 1px solid #6b3633; border-radius: 8px; background: #2a1718; }
.refusal-list code { color: var(--danger); background: transparent; }
.principle-list { counter-reset: principle; list-style: none; padding: 0; display: grid; gap: 10px; }
.principle-list li { position: relative; padding: 1rem 1.1rem 1rem 3.3rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); counter-increment: principle; }
.principle-list li::before { content: counter(principle); position: absolute; left: 1.1rem; top: .95rem; font: 600 15px var(--fg-mono); color: var(--brand); }
.source-shell { padding-bottom: 3rem; display: grid; gap: 1rem; }
.source-record { padding: 1.2rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.source-index { color: var(--brand); font-weight: 700; }
.source-record h2 { font-size: 17px; margin: .3rem 0; }
.source-record dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 16px; margin: .8rem 0; }
.source-record dl div { border-top: 1px solid var(--line); padding: .5rem 0; }
.source-record dt { color: var(--muted); font-weight: 600; font-size: .88rem; }
.source-record dd { margin: .1rem 0 0; overflow-wrap: anywhere; }
.source-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.license-snapshot { padding: .8rem 1rem; margin-top: 1rem; border-left: 3px solid var(--bio); background: #1b2229; border-radius: 0 6px 6px 0; }
.license-snapshot strong { color: var(--bio); }
.license-snapshot p { margin: .3rem 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.method-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 3rem; padding-bottom: 3rem; }
.method-rail { position: sticky; top: calc(var(--fg-sticky-top) + 16px); display: grid; align-self: start; }
.method-rail a { padding: .5rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.method-rail a:hover { color: var(--brand); }
.method-prose section { scroll-margin-top: 90px; }
.method-prose section + section { margin-top: 2.4rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.policy-code-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.download-grid article { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.timeline { padding-bottom: 3rem; display: grid; gap: 1rem; }
.search-hero { padding-bottom: 2rem; }
.search-form { max-width: 820px; margin-top: 1.4rem; }
.search-form label { display: block; margin-bottom: .4rem; font-weight: 600; color: var(--ink-soft); }
.search-form > div { display: flex; gap: .6rem; }
.search-results { padding-top: 1rem; padding-bottom: 3rem; }
.result-list { display: grid; gap: .5rem; list-style: none; padding: 0; }
.result-list a { display: grid; grid-template-columns: 9rem minmax(0, 1fr) auto; gap: .3rem 1.2rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); text-decoration: none; color: var(--ink); }
.result-list a:hover { border-color: var(--brand); }
.legal { max-width: 860px; padding-top: 18px; padding-bottom: 28px; font-size: 15px; line-height: 1.68; }
.legal h2 { font-size: 17px; margin-top: 1.8em; }
.error-page { display: grid; min-height: 60svh; place-content: center; padding: 3rem 1.25rem; text-align: center; }


/* page heads: one title, one factual line, the page's own facts */
.bio-head { display: grid; max-width: var(--max); grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; margin: 0 auto; padding: 16px var(--gutter) 12px; }
.bio-head h1 { margin: 0 0 4px; }
.bio-head p { max-width: 80ch; margin: 0; color: var(--muted); font-size: 14px; }
.bio-head .bio-head-links { margin-top: 6px; font-size: 13px; }
.bio-head-facts { display: flex; flex-wrap: wrap; margin: 0; overflow: hidden; border: 1px solid var(--fg-line); border-radius: var(--fg-r-panel); background: var(--fg-surface); }
.bio-head-facts > div { display: grid; min-width: 0; gap: 3px; padding: 8px 14px; border-right: 1px solid var(--fg-line); }
.bio-head-facts > div:last-child { border-right: 0; }
.bio-head-facts dt { color: var(--fg-secondary); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bio-head-facts dd { margin: 0; font: 500 14px var(--fg-mono); overflow-wrap: anywhere; }
/* Page heads carry the shared masthead (instrument grid, signal line) and a location line. Their boxes
   already include the gutter, so the grid stays inside them. */
.bio-head.fg-masthead, .page-hero.fg-masthead, .record-hero.fg-masthead { --fg-masthead-top: 0px; --fg-pad-x: 0px; margin-bottom: 14px; }
.bio-head.fg-masthead { padding-top: 22px; padding-bottom: 20px; }
.page-hero.fg-masthead, .record-hero.fg-masthead { padding-top: 22px; padding-bottom: 20px; }
.bio-head .fg-crumbs, .page-hero .fg-crumbs, .record-hero .fg-crumbs, .flashcards-heading .fg-crumbs { margin-bottom: 10px; }
.fg-crumbs code { padding: 0 4px; font-size: 11.5px; }
.bio-head p, .page-hero > p, .record-hero > div > p { max-width: 72ch; font-size: 15px; line-height: 1.5; }
.bio-head h1, .page-hero h1, .record-hero h1 { margin: 0 0 6px; }
.home-head.fg-pagehead .subtitle { margin-top: 6px; }
.home-map .home-poster { border-bottom: 0; }
.eyebrow { display: block; margin-bottom: 4px; color: var(--fg-secondary); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.error-page { display: grid; justify-items: start; gap: 6px; max-width: 760px; min-height: 0; margin: 40px auto; padding: 22px; border: 1px solid var(--fg-line); border-radius: var(--fg-r-panel); background: var(--fg-surface); text-align: left; }
.error-code { color: var(--accent); font: 600 32px var(--fg-mono); }
@media (max-width: 960px) { .bio-head { grid-template-columns: minmax(0, 1fr); } }

/* footer */
.fg-footer .foot-version { color: var(--fg-muted); }
.fg-footer .foot-version a { color: var(--fg-secondary); }

/* ---------- responsive structure ---------- */
@media (max-width: 960px) {
  .three-grid, .download-grid { grid-template-columns: 1fr; }
  .split-heading, .release-boundary, .family-layout, .record-hero, .record-layout, .method-shell { grid-template-columns: 1fr; }
  .method-rail { position: static; }
  .measurement-pair { grid-template-columns: 1fr; }
  .result-list a { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .home-index li { grid-template-columns: minmax(0, 1fr); }
  .reaction-strip { grid-template-columns: minmax(0, 1fr); }
  .reaction-strip li { border-right: 0; border-bottom: 1px solid var(--fg-line); }
  .reaction-strip li:last-child { border-bottom: 0; }
}