/* 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 */

/* draconitic.com — workspace layer over the shared system block above. */

body { display: flex; min-height: 100vh; flex-direction: column; }
main { flex: 1 0 auto; }

/* --- Product index table */
.index-table td.lead a { display: inline-flex; align-items: center; font-weight: 600; }
.index-table tbody tr:hover td.lead a { color: var(--accent); text-decoration: none; }
.index-table td.host { color: var(--fg-muted); font: 12px var(--fg-mono); white-space: nowrap; }
.fg-table .dir-sector th { position: static; padding-top: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--fg-line); background: var(--fg-surface); }
.fg-table .dir-sector th a { color: var(--fg-secondary); }
.fg-table .dir-sector th a:hover { color: var(--fg-text); }
.fg-table tbody:first-of-type .dir-sector th { padding-top: 10px; }
.fg-table tbody tr.dir-sector:hover th { background: var(--fg-surface); }

/* --- Sector pages: one dossier row per product (identity, what it is, where to go in it) */
.dossiers { margin: 0; padding: 0; list-style: none; }
.dossier { display: grid; grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.6fr) minmax(200px, 0.9fr); gap: 10px 28px; align-items: start; padding: 18px 16px; border-bottom: 1px solid var(--fg-line); }
.dossier:last-child { border-bottom: 0; }
.dossier:target { background: var(--accent-dim); }
.dossier h3 { font-size: 16px; letter-spacing: -0.01em; }
.dossier h3 a { display: inline-flex; align-items: center; color: var(--fg-text); }
.dossier h3 a:hover { color: var(--accent); text-decoration: none; }
.dossier-id .subtitle, .dossier-id .host { display: block; margin: 5px 0 0 17px; color: var(--fg-muted); font-size: 12px; }
.dossier-id .host { font-family: var(--fg-mono); }
.dossier-about p { max-width: 68ch; margin: 0; color: #c5cad0; font-size: 14px; line-height: 1.55; }
.dossier-go { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.notice { margin: 8px 0 0; color: var(--fg-warn); font-size: 12.5px; }
.notice a { color: var(--fg-warn); text-decoration: underline; }

/* --- Home: the hero (live wave field with the dragon in the water), the sector dock, Labs, products */
.home { display: block; }
.home-hero { position: relative; isolation: isolate; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: clamp(520px, 74vh, 760px); overflow: hidden; background: #111315; }
.hero-field { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1400ms var(--fg-ease); }
.home-hero.is-live .hero-field { opacity: 1; }
.home-hero::before { position: absolute; z-index: -1; inset: 0; pointer-events: none; content: "";
  background:
    radial-gradient(52% 70% at 18% 50%, rgb(17 19 21 / 0.72), rgb(17 19 21 / 0.25) 70%, transparent),
    linear-gradient(180deg, rgb(17 19 21 / 0.5) 0%, transparent 18%, transparent 70%, rgb(17 19 21 / 0.7) 100%); }
.home-hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.14) 20%, rgb(255 255 255 / 0.14) 80%, transparent); }
.hero-inner { align-self: center; max-width: 820px; padding: 64px clamp(16px, 4.2vw, 64px) 40px; animation: fg-rise 900ms var(--fg-ease) 120ms both; }
.hero-wordmark { margin: 0; font-size: clamp(60px, 9.2vw, 136px); font-weight: 640; line-height: 0.88; letter-spacing: -0.058em; color: #f2f5f8;
  background: linear-gradient(180deg, #ffffff 0%, #e6ebf0 45%, #9fb0c2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 40px rgb(189 204 221 / 0.16)); }
.hero-line { max-width: 44ch; margin: 22px 0 0; color: #c4cad1; font-size: clamp(16px, 0.5vw + 14px, 20px); line-height: 1.45; text-wrap: balance; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.hero-actions .fg-btn { min-height: 44px; padding: 0 20px; border-radius: 10px; font-size: 14.5px; }
.hero-actions .fg-btn svg { width: 15px; height: 15px; }
.hero-labs { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background: rgb(255 255 255 / 0.06); }
.hero-sectors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid rgb(255 255 255 / 0.08); background: rgb(13 15 17 / 0.5); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.hero-sectors a { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name count" "dots dots"; align-content: start; gap: 12px 8px; min-height: 96px; padding: 20px clamp(14px, 1.6vw, 24px); border-right: 1px solid rgb(255 255 255 / 0.07); color: var(--fg-text); transition: background-color 200ms var(--fg-ease); }
.hero-sectors a:last-child { border-right: 0; }
.hero-sectors a::before { position: absolute; top: -1px; right: 0; left: 0; height: 2px; content: ""; background: var(--accent); box-shadow: 0 0 18px 1px var(--accent-glow); transform: scaleX(0); transform-origin: 0 50%; transition: transform 320ms var(--fg-ease); }
.hero-sectors a:hover, .hero-sectors a:focus-visible { text-decoration: none; background: radial-gradient(240px 120px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 80%); }
.hero-sectors a:hover::before, .hero-sectors a:focus-visible::before { transform: scaleX(1); }
.hero-sector-name { grid-area: name; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.hero-sector-count { grid-area: count; color: var(--fg-muted); font: 500 12px var(--fg-mono); }
.hero-sector-dots { grid-area: dots; display: flex; flex-wrap: wrap; gap: 6px; }
.hero-sector-dots i { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

.home-body { padding-top: 34px; }
.home-research { margin-bottom: 38px; padding: clamp(24px, 4vw, 54px); border: 1px solid var(--accent-line); border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, rgb(189 204 221 / 0.12), transparent 70%), var(--fg-surface); box-shadow: var(--fg-elev); }
.research-intro { max-width: 740px; margin: 0 auto; text-align: center; }
.research-eyebrow { margin: 0 0 14px; color: var(--accent); font: 500 11px/1.6 var(--fg-mono); letter-spacing: 0.12em; text-transform: uppercase; }
.research-intro h2 { font-size: clamp(28px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.research-summary { max-width: 58ch; margin: 18px auto 0; color: #c4cad1; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.research-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 24px; margin-top: 24px; }
.research-actions .fg-btn, .research-source-link { min-height: 44px; font-size: 14px; }
.research-actions .fg-btn { padding: 0 20px; }
.research-source-link { display: inline-flex; align-items: center; gap: 10px; }
.research-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 36px; }
.research-fields a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 74px; padding: 16px; border: 1px solid var(--fg-line-strong); border-radius: 8px; color: var(--fg-text); background: rgb(17 19 21 / 0.45); font-size: 14px; line-height: 1.4; }
.research-fields a > :last-child { color: var(--accent); }
.research-fields a:hover { border-color: var(--accent); background: var(--accent-dim); text-decoration: none; }
@media (max-width: 900px) { .research-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  .home-research { padding: 26px 16px; }
  .research-fields { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 26px; }
  .research-fields a { min-height: 52px; padding: 12px 14px; }
}
.home-labs { margin-bottom: 30px; }
.home-labs h2 a, .home-dir-head h2 a { color: var(--fg-text); }
.home-labs .fg-section-head h2, .home-dir-head h2 { font-size: 22px; letter-spacing: -0.02em; }
.home-more { color: var(--fg-secondary); font-size: 13px; }
.home-more:hover { color: var(--accent); }
.lab-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--fg-gap); margin: 0; padding: 0; list-style: none; }
.lab-strip a { position: relative; display: grid; grid-template-rows: auto auto 1fr; overflow: hidden; height: 100%; border: 1px solid rgb(255 255 255 / 0.07); border-radius: var(--fg-r-panel); color: var(--fg-text); background: var(--fg-surface); box-shadow: var(--fg-elev); transition: border-color 200ms var(--fg-ease), transform 260ms var(--fg-ease), box-shadow 260ms var(--fg-ease); }
.lab-strip img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid rgb(255 255 255 / 0.06); transition: transform 600ms var(--fg-ease), filter 400ms var(--fg-ease); filter: saturate(0.9) brightness(0.92); }
.lab-name { padding: 12px 12px 2px; font-weight: 600; font-size: 13.5px; }
.lab-desc { padding: 0 12px 14px; color: var(--fg-secondary); font-size: 12px; line-height: 1.4; }
.lab-strip a:hover { border-color: var(--accent-line); text-decoration: none; transform: translateY(-2px); box-shadow: var(--fg-elev), 0 18px 40px -20px var(--accent-glow); }
.lab-strip a:hover img { transform: scale(1.045); filter: none; }
.lab-strip .fg-demo { position: absolute; top: 8px; right: 8px; }
.rd-directions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.rd-directions a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid rgb(255 255 255 / 0.08); border-radius: 999px; color: var(--fg-secondary); background: rgb(255 255 255 / 0.02); font-size: 12.5px; transition: border-color 160ms var(--fg-ease), color 160ms var(--fg-ease); }
.rd-directions a:hover { border-color: var(--accent-line); color: var(--fg-text); text-decoration: none; }
.home-dir-head { margin-top: 8px; }
.sector-band h2 a { color: var(--fg-text); }
.sector-band h2 a:hover { color: var(--accent); text-decoration: none; }
.sector-band .fg-panel-head h2 { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; letter-spacing: -0.01em; }
.sector-band .fg-panel-head h2::before { width: 8px; height: 8px; border-radius: 2px; content: ""; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }
/* 12 columns: the two largest sectors take half the width with their rows in two columns, so every
   band in a row ends at the same height. */
.home-sectors { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas:
    "data data data data learning learning learning learning rd rd rd rd"
    "mind mind mind mind mind mind ai ai ai ai ai ai"
    "methods methods methods methods methods methods methods methods methods methods methods methods";
  gap: var(--fg-gap); align-items: stretch; }
.sector-band[data-sector="learning"] { grid-area: learning; }
.sector-band[data-sector="mind-motor"] { grid-area: mind; }
.sector-band[data-sector="data"] { grid-area: data; }
.sector-band[data-sector="ai"] { grid-area: ai; }
.sector-band[data-sector="rd"] { grid-area: rd; }
.home-methods { grid-area: methods; }
.sector-band { container-type: inline-size; grid-column: 1 / -1; }
.sector-band .fg-panel-head { flex-wrap: nowrap; align-items: flex-start; }
.sector-band .fg-rows a { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.sector-band .fg-rows .name { display: inline-flex; align-items: center; }
.sector-band .fg-rows .meta { overflow: hidden; text-overflow: ellipsis; text-align: right; }
.sector-band .fg-rows > li:last-child { border-bottom: 0; }
@container (max-width: 420px) { .sector-band .fg-rows .meta { display: none; } }
.home-methods { display: flex; flex-wrap: wrap; align-items: stretch; }
.home-methods .fg-panel-head { border-bottom: 0; border-right: 1px solid var(--fg-line); }
.home-methods .link-list { display: flex; flex: 1 1 auto; flex-wrap: wrap; }
.home-methods .link-list li { border-bottom: 0; }
.home-methods .link-list a { height: 100%; display: flex; align-items: center; }
.release-table td { vertical-align: top; }
.release-table .platforms { display: block; margin-top: 2px; color: var(--fg-muted); font-size: 12px; }
.release-table td a { color: var(--fg-text); }
.release-table td.lead a { font-weight: 600; }
.link-list { display: grid; margin: 0; padding: 0; list-style: none; }
.link-list li { border-bottom: 1px solid var(--fg-line); }
.link-list li:last-child { border-bottom: 0; }
.link-list a { display: block; padding: 9px 14px; color: var(--fg-text); }
.link-list a:hover { background: var(--fg-raised); color: var(--accent); text-decoration: none; }

/* --- Hand-written pages: page head */
.page-head { --fg-masthead-top: 0px; margin-bottom: 18px; padding: 22px 0 22px; }
.page-head-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 12px 24px; align-items: start; }
.page-head-inner:not(:has(.facts)) { grid-template-columns: minmax(0, 1fr); }

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; color: var(--fg-muted); font-size: 12.5px; }
.crumbs a { color: var(--fg-secondary); }
.crumbs span[aria-hidden] { color: var(--fg-line-strong); }
.lede { max-width: 72ch; margin: 8px 0 0; color: var(--fg-secondary); font-size: 15px; line-height: 1.55; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.button { display: inline-flex; min-height: 32px; align-items: center; padding: 0 12px; border: 1px solid var(--accent); border-radius: var(--fg-r-ctl); color: var(--accent-ink); background: var(--accent); font-weight: 600; white-space: nowrap; }
.button:hover { background: color-mix(in srgb, var(--accent) 86%, white); text-decoration: none; }
.button.secondary { border-color: var(--fg-line-strong); color: var(--fg-text); background: var(--fg-raised); font-weight: 500; }
.button.secondary:hover { border-color: #565b61; background: #2d3135; }
.facts { display: grid; margin: 0; overflow: hidden; border: 1px solid var(--fg-line); border-radius: var(--fg-r-panel); background: var(--fg-surface); }
.facts > div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--fg-line); }
.facts > div:last-child { border-bottom: 0; }
.facts dt { color: var(--fg-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.facts dd { margin: 0; font-size: 12.5px; }

/* --- Hand-written pages: blocks become panels on one column of the workspace */
main#main:not(.fg-workspace):not(.home) { width: 100%; max-width: var(--fg-max); margin: 0 auto; padding: 0 16px 28px; }
main#main:not(.fg-workspace):not(.home) > * + * { margin-top: var(--fg-gap); }
main#main:not(.fg-workspace) > .page-head + * { margin-top: 0; }
/* Reading pages: the page is as wide as its contents/article/related columns, so the masthead lines up with them. */
main#main:has(> .prose-wrap.has-toc) { max-width: 1362px; }
main#main:has(> .prose-wrap.has-toc.single) { max-width: 1052px; }
.rd-block { overflow: hidden; border: 1px solid var(--fg-line); border-radius: var(--fg-r-panel); background: var(--fg-surface); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; padding: 10px 14px; border-bottom: 1px solid var(--fg-line); }
.section-head h2 { font-size: 14px; }
.section-head p { margin: 0; color: var(--fg-secondary); font-size: 12.5px; }
.rows-title { margin: 18px 0 8px; font-size: 14px; }
.direction-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.direction-list.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.direction-list > li { min-width: 0; padding: 12px 14px; border-right: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); margin: 0 -1px -1px 0; }
.direction-list h3 { margin-bottom: 4px; font-size: 13.5px; }
.direction-list h3 a { color: var(--fg-text); }
.direction-list h3 a:hover { color: var(--accent); }
.direction-list p { margin: 0 0 6px; color: var(--fg-secondary); font-size: 13px; line-height: 1.55; }
.direction-labs { color: var(--fg-muted) !important; font-size: 12px !important; }
.concept-list, .dataset-list, .method-links, .guide-list, .source-list { margin: 0; padding: 0; list-style: none; }
.concept-list li { display: grid; grid-template-columns: minmax(180px, 0.9fr) minmax(0, 2fr) auto; gap: 6px 16px; align-items: baseline; padding: 9px 14px; border-bottom: 1px solid var(--fg-line); }
.concept-list li:last-child { border-bottom: 0; }
.concept-list strong { font-weight: 600; }
.concept-list span { color: var(--fg-secondary); font-size: 13px; }
.concept-list em { color: var(--fg-muted); font-size: 11px; font-style: normal; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.dataset-list li, .guide-list li { border-bottom: 1px solid var(--fg-line); }
.dataset-list li:last-child, .guide-list li:last-child { border-bottom: 0; }
.dataset-list a, .guide-list a { display: grid; grid-template-columns: minmax(150px, 0.6fr) minmax(0, 2fr); gap: 4px 16px; padding: 9px 14px; color: var(--fg-text); }
.dataset-list a:hover, .guide-list a:hover { background: var(--fg-raised); text-decoration: none; }
.dataset-list strong, .guide-list strong { font-weight: 600; }
.dataset-list span, .guide-list span { color: var(--fg-secondary); font-size: 13px; }
.method-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.method-links li { border-right: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); margin: 0 -1px -1px 0; }
.method-links a { display: block; padding: 9px 14px; color: var(--fg-text); }
.method-links a:hover { background: var(--fg-raised); color: var(--accent); text-decoration: none; }
.lab-index { margin: 0; }
.lab-index td.lead a { font-weight: 600; }
.profile-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 0; }
.profile-list > div { display: grid; gap: 3px; padding: 10px 14px; border-right: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); margin: 0 -1px -1px 0; }
.profile-list dt { font-weight: 600; }
.profile-list dd { margin: 0; color: var(--fg-secondary); font-size: 12.5px; }
.metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.metric-strip > div { display: grid; gap: 4px; padding: 10px 14px; border-right: 1px solid var(--fg-line); margin-right: -1px; }
.metric-strip dt { color: var(--fg-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.metric-strip dd { margin: 0; font: 600 16px var(--fg-mono); }

/* Consilium route diagram */
.route-diagram { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr) 150px minmax(0, 1fr); align-items: center; gap: 0; margin: 0; padding: 16px 14px 12px; }
.route-node { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--fg-line-strong); border-radius: var(--fg-r-ctl); background: #1a1d20; }
.route-node.chosen { border-color: var(--accent); background: var(--accent-dim); }
.route-node span { color: var(--fg-secondary); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.route-node strong { font-weight: 600; }
.route-node small { color: var(--fg-muted); font-size: 12px; }
.route-link { position: relative; height: 1px; margin: 0 8px; background: var(--fg-line-strong); }
.route-link.dashed { background: repeating-linear-gradient(90deg, var(--fg-line-strong) 0 6px, transparent 6px 11px); }
.route-link span { position: absolute; bottom: 6px; left: 0; right: 0; color: var(--fg-muted); font-size: 11px; line-height: 1.3; text-align: center; }
.route-diagram figcaption { grid-column: 1 / -1; margin-top: 10px; color: var(--fg-muted); font-size: 12px; }

/* Study guide shelves */
.rd-block .shelf { border-width: 1px 0 0; border-radius: 0; }
.shelf { overflow: hidden; border: 1px solid var(--fg-line); border-radius: var(--fg-r-panel); background: var(--fg-surface); }
.shelf-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding: 10px 14px; border-bottom: 1px solid var(--fg-line); }
.shelf-head h2 { font-size: 14px; }
.shelf-head p { margin: 0; color: var(--fg-secondary); font-size: 12.5px; }
.study-loop { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; padding: 0; list-style: none; }
.study-loop > li { padding: 10px 14px; border-right: 1px solid var(--fg-line); margin-right: -1px; color: var(--fg-secondary); font-size: 13px; }
.study-loop strong { display: block; color: var(--fg-text); font-weight: 600; }

/* Extension catalogue */
.extension-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 0; padding: 0; list-style: none; }
.extension-grid-single { grid-template-columns: minmax(0, 1fr); }
.extension-card { display: grid; align-content: start; gap: 5px; min-width: 0; padding: 12px 14px; border-right: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); margin: 0 -1px -1px 0; }
.extension-card h3 { font-size: 13.5px; }
.extension-card p { margin: 0; color: var(--fg-secondary); font-size: 13px; line-height: 1.5; }

/* Reading layout: article + aside */
.prose-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--fg-gap); align-items: start; }
.prose-wrap.single { grid-template-columns: minmax(0, 1fr); }
/* Reading pages with contents: contents | article | related, centred so lines stay readable. */
.prose-wrap.has-toc { grid-template-columns: 210px minmax(0, 800px) minmax(240px, 300px); justify-content: center; }
.prose-wrap.has-toc.single { grid-template-columns: 210px minmax(0, 800px); }
.toc { position: sticky; top: calc(var(--fg-sticky-top) + 12px); align-self: start; max-height: calc(100vh - var(--fg-sticky-top) - 24px); overflow: auto; padding: 4px 0; }
.toc h2 { margin: 0 0 8px; padding-left: 12px; color: var(--fg-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--fg-line); }
.toc a { display: block; margin-left: -1px; padding: 6px 10px 6px 12px; border-left: 1px solid transparent; color: var(--fg-secondary); font-size: 13px; line-height: 1.35; }
.toc a:hover { border-left-color: var(--fg-line-strong); color: var(--fg-text); text-decoration: none; }
.toc a:focus-visible { outline-offset: -2px; }
.prose { min-width: 0; padding: 18px 22px 20px; border: 1px solid var(--fg-line); border-radius: var(--fg-r-panel); background: var(--fg-surface); color: #dfe3e7; font-size: 15px; line-height: 1.68; }
.prose > * { max-width: 72ch; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 1.7em 0 0.5em; color: var(--fg-text); font-size: 17px; line-height: 1.3; }
.prose h3 { margin: 1.4em 0 0.4em; color: var(--fg-text); font-size: 15px; }
.prose p, .prose ul, .prose ol, .prose table, .prose figure { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.3em; }
.prose a { text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.prose code { padding: 1px 5px; border-radius: 4px; background: var(--fg-raised); font-size: 0.88em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.prose th, .prose td { padding: 7px 10px; border-bottom: 1px solid var(--fg-line); text-align: left; vertical-align: top; }
.prose th { color: var(--fg-secondary); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.note { padding: 10px 12px; border-left: 3px solid var(--fg-warn); border-radius: 0 var(--fg-r-ctl) var(--fg-r-ctl) 0; background: #23211a; color: #e9dcb8; font-size: 13.5px; }
.note strong { display: block; color: var(--fg-warn); }
.revision { color: var(--fg-muted); font-size: 12.5px; }
.muted { color: var(--fg-muted); }
.aside { display: grid; gap: var(--fg-gap); position: sticky; top: calc(var(--fg-sticky-top) + 12px); }
.aside-section { overflow: hidden; border: 1px solid var(--fg-line); border-radius: var(--fg-r-panel); background: var(--fg-surface); }
.aside-section h2 { padding: 10px 14px; border-bottom: 1px solid var(--fg-line); font-size: 13px; }
.aside-section ul { margin: 0; padding: 4px 0; list-style: none; }
.aside-section li a { display: block; padding: 6px 14px; color: var(--fg-text); font-size: 13px; }
.aside-section li a:hover { background: var(--fg-raised); color: var(--accent); text-decoration: none; }
.aside-section p, .aside-section dl { margin: 0; padding: 8px 14px; color: var(--fg-secondary); font-size: 13px; }

/* Product index */
.finder-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.finder-head .fg-field { min-width: 220px; }
.finder-head output { color: var(--fg-secondary); font: 12px var(--fg-mono); }
.index-table td:nth-child(2) { color: var(--fg-secondary); }
.index-empty { padding: 16px 14px; color: var(--fg-secondary); }

/* 404 */
.lost { max-width: 640px; margin: 40px auto; padding: 22px; border: 1px solid var(--fg-line); border-radius: var(--fg-r-panel); background: var(--fg-surface); }
.lost h1 { margin-bottom: 8px; }

@media (max-width: 1100px) {
  .home-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "data data" "learning mind" "utilities utilities" "games releases" "methods methods"; }
  .dossier { grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.6fr); }
  .dossier-go { grid-column: 2; justify-content: flex-start; }
  .page-head-inner { grid-template-columns: minmax(0, 1fr); }
  .direction-list.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prose-wrap, .prose-wrap.has-toc, .prose-wrap.has-toc.single { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; padding: 0; }
  .toc ul { display: flex; flex-wrap: nowrap; gap: 6px; margin-right: calc(-1 * var(--fg-pad-x)); padding-right: 28px; overflow-x: auto; border-left: 0; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
  .toc ul::-webkit-scrollbar { display: none; }
  .toc a { margin: 0; padding: 7px 10px; border: 1px solid var(--fg-line); border-radius: var(--fg-r-chip); background: var(--fg-surface); white-space: nowrap; }
  .toc h2 { padding-left: 0; }
  .aside { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .route-diagram { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .route-link { width: 1px; height: 22px; margin: 0 auto; }
  .route-link.dashed { background: repeating-linear-gradient(180deg, var(--fg-line-strong) 0 6px, transparent 6px 11px); }
  .route-link span { bottom: auto; top: 3px; left: 12px; right: auto; width: 260px; text-align: left; }
  .method-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  main#main:not(.fg-workspace):not(.home) { padding: 0 10px 22px; }
  .direction-list, .direction-list.three, .method-links { grid-template-columns: minmax(0, 1fr); }
  .concept-list li, .dataset-list a, .guide-list a { grid-template-columns: minmax(0, 1fr); }
  .prose { padding: 14px 14px 16px; }
  .home-sectors { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  .home-sectors > * { grid-area: auto !important; }
  .rd-directions { grid-template-columns: minmax(0, 1fr); }
  .home-methods { display: block; }
  .home-methods .fg-panel-head { border-right: 0; border-bottom: 1px solid var(--fg-line); }
  .home-methods .link-list { display: grid; }
  .home-methods .link-list li { border-bottom: 1px solid var(--fg-line); }
  .home-methods .link-list li:last-child { border-bottom: 0; }
  .dossier { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 12px; }
  .dossier-go { grid-column: 1; }
  .page-head { padding: 14px 0 16px; }
  .index-table th.host, .index-table td.host { display: none; }
}

@media (max-width: 1100px) {
  .lab-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-sectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-sectors a:nth-child(3n) { border-right: 0; }
  .hero-sectors a:nth-child(-n + 3) { border-bottom: 1px solid rgb(255 255 255 / 0.07); }
}
@media (max-width: 760px) {
  .home-hero { min-height: 560px; }
  .home-hero::before { background: linear-gradient(180deg, rgb(17 19 21 / 0.75) 0%, rgb(17 19 21 / 0.35) 45%, rgb(23 26 28 / 0.95) 100%); }
  .hero-inner { padding: 48px 16px 28px; }
  .hero-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-sectors a { min-height: 76px; padding: 14px; border-bottom: 1px solid rgb(255 255 255 / 0.07); }
  .hero-sectors a:nth-child(3n) { border-right: 1px solid rgb(255 255 255 / 0.07); }
  .hero-sectors a:nth-child(2n) { border-right: 0; }
  .hero-sectors a:nth-last-child(-n + 2) { border-bottom: 0; }
  .lab-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; margin: 0 calc(-1 * var(--fg-pad-x)); padding: 0 var(--fg-pad-x) 6px; scrollbar-width: none; }
  .lab-strip li { flex: 0 0 62%; scroll-snap-align: start; }
  .home-body { padding-top: 22px; }
}