/* =====================================================================
   gscode Community Wiki — Datum theme
   The gscode design system (see gscode-assetplace/src/app.css) applied to
   a Jekyll site. Dark is the native mode. Nothing is round: corners are
   chamfered with clip-path, edges are 1px hairlines, emphasis is a weight
   change, motion is short and never bouncy.
   ===================================================================== */

/* Three faces, three jobs:
   Chakra Petch 700  display (wordmark, buttons, HUD values), always uppercase
   Sora              all prose (300 body · 500 emphasis · 600 subheads)
   Cascadia Code     labels, readouts, nav, code. Ligatures off so `::` reads literally. */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Sora:wght@300;400;500;600&family=Cascadia+Code:wght@400;500&display=swap");

/* ---------- Tokens ---------- */
:root {
  color-scheme: dark;

  --ground:   #111317;   /* page — lifted five points, in step with assetplace and gscode */
  --panel:    #111720;   /* sidebar, hero, doc index head */
  --raise:    #19212C;   /* header, HUD strips, inline code */
  --edge:     #27333F;   /* hairlines */
  --recess:   #07080C;   /* input bodies */
  --table:    #0B0F15;   /* code blocks, tables, index table */
  --hatch-a:  #1A2733;
  --hatch-b:  #0D131A;

  --chalk:    #E2EAEC;   /* text */
  --muted:    #96A4AC;   /* body prose */
  --dim:      #8593A0;   /* labels, tertiary — never below 11px */
  --steel:    #3E5661;   /* unselected geometry, handles */

  --teal:     #3ED1BD;   /* the one brand hue */
  --bright:   #7BEFDD;   /* lit edge · hover */
  --deep:     #16564F;   /* structural teal */
  --sky:      #5FC6E0;
  --violet:   #8B7BFF;   /* gradients + chips only, never a panel */
  --ink:      #05201C;   /* text on teal fills */
  --danger:   #FF5C7A;
  --gold:     #F3CC4F;

  --rim-rest:   linear-gradient(146deg, #3E5661 0, #27333F 40%, #27333F 74%, #4B4574 100%);
  --rim-active: linear-gradient(146deg, #7BEFDD 0, #3ED1BD 12%, #27333F 44%, #27333F 68%, #8B7BFF 100%);
  --rim-hover:  linear-gradient(146deg, #7BEFDD, #7BEFDD);
  --rim-deep:   linear-gradient(146deg, #16564F, #16564F);
  --rim-danger: linear-gradient(146deg, #FF5C7A 0, #27333F 40%, #27333F 74%, #4B4574 100%);
  --grad-action: linear-gradient(112deg, #7BEFDD, #3ED1BD 70%, #5FC6E0);
  --grad-text:   linear-gradient(94deg, #7BEFDD, #3ED1BD 55%, #8B7BFF);

  --wash-active: rgba(62, 209, 189, 0.09);
  --wash-hover:  rgba(62, 209, 189, 0.05);
  --shadow-panel:   0 18px 28px rgba(0, 0, 0, 0.6);
  --shadow-overlay: 0 18px 32px rgba(0, 0, 0, 0.8);

  --cut: 15px;           /* chamfer: 15 surfaces · 10 controls · 7 chips */

  --header-h:    56px;
  --sidebar-w:   240px;
  --toc-w:       230px;
  --measure:     72ch;
  --container:   1100px; /* content column inside full-bleed bands */

  --font-display: 'Chakra Petch', system-ui, sans-serif;
  --font-body:    'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Cascadia Code', 'Cascadia Mono', 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   13.5px;
  --text-body: 16.5px;
  --tracking-label: 0.14em;
  --tracking-data:  0.04em;
  --tracking-heading: -0.03em;

  /* Motion — punchy, never bouncy. ease-in is never used. */
  --ease-out-cubic:   cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 100ms var(--ease-out-cubic);
  --t:      150ms var(--ease-out-cubic);
  --t-enter: 200ms var(--ease-out-expo);
  --t-press: 75ms var(--ease-out-cubic);
  --t-slide: 200ms var(--ease-out-cubic);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

* {
  scrollbar-color: var(--steel) var(--ground);
  scrollbar-width: thin;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--ground); }
*::-webkit-scrollbar-thumb { background: var(--steel); border: 2px solid var(--ground); }
*::-webkit-scrollbar-thumb:hover { background: var(--dim); }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.66;
  color: var(--chalk);
  background: var(--ground);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(62, 209, 189, 0.3); }

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Nothing is round — including native controls that slip through. */
button, input, select, textarea { border-radius: 0; font: inherit; }

/* Mono never inherits the body's 300. Uppercase labels sit at 500. */
code, pre, kbd, samp, .type-label, .type-data { font-family: var(--font-mono); font-weight: 400; font-feature-settings: "calt" 0, "liga" 0; }

/* ---------- Type roles ---------- */
.type-label {
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
}
.type-display {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.type-data {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-data);
  font-variant-numeric: tabular-nums;
}

/* ---------- Chamfer + rim ----------
   .brush: 1px rim (gradient) that follows the cut. The ::before is the body,
   inset 1px, clipped to the same polygon. Surface via --brush-surface. */
.chamfer,
.brush {
  clip-path: polygon(
    var(--cut) 0, 100% 0,
    100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%,
    0 100%, 0 var(--cut)
  );
}
.brush {
  position: relative;
  z-index: 0;
  background: var(--rim-rest);
  transition: background var(--t);
}
.brush::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: inherit;
  background: var(--brush-surface, var(--panel));
  transition: background var(--t);
}
.brush--sm { --cut: 10px; }
.brush--xs { --cut: 8px; }
.brush--2xs { --cut: 7px; }
.brush--edge { background: var(--edge); }
.brush--deep { background: var(--rim-deep); }
.brush--active { background: var(--rim-active); }
.brush--danger { background: var(--rim-danger); }
.brush--raise { --brush-surface: var(--raise); }
.brush--ground { --brush-surface: var(--ground); }
.brush--recess { --brush-surface: var(--recess); }
.brush--interactive:hover,
.brush--interactive:focus-within { background: var(--rim-hover); }

/* Corner handles: a 7px square on the two uncut corners. Needs a positioned
   wrapper because the brush clips its own overflow. */
.handles { position: relative; }
.handles::before,
.handles::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  background: var(--handles-behind, var(--ground));
  border: 1.5px solid var(--handles-color, var(--steel));
  z-index: 6;
  pointer-events: none;
  transition: border-color var(--t);
}
.handles::before { right: -4px; top: -4px; }
.handles::after  { left: -4px; bottom: -4px; }
.handles--active { --handles-color: var(--teal); }

/* Type tab docked into a brush's top-left cut: cut on the left, slanted right. */
.tab {
  position: absolute;
  left: 0; top: 0;
  z-index: 5;
  padding: 4px 13px 4px 17px;
  background: var(--tab-bg, var(--teal));
  color: var(--tab-fg, var(--ink));
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  clip-path: polygon(15px 0, 100% 0, calc(100% - 9px) 100%, 0 100%, 0 15px);
  pointer-events: none;
  transition: background var(--t), color var(--t);
}

/* Filter chip: slanted both ends. */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  padding: 6px 10px;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--edge);
  text-decoration: none;
  transition: color var(--t), box-shadow var(--t);
}
.chip:hover { color: var(--teal); text-decoration: none; box-shadow: inset 0 0 0 1px var(--steel); }
.chip--fill {
  background: var(--teal);
  color: var(--ink);
  box-shadow: none;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* Status marker — a 6px square. Dots are squares here. */
.marker { display: block; width: 6px; height: 6px; flex: none; background: var(--steel); }

/* Gradients — the only ones that exist. */
.grad-action { background: var(--grad-action); color: var(--ink); }
.grad-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hatch {
  background-image:
    repeating-linear-gradient(45deg, rgba(62,209,189,0.07) 0 2px, transparent 2px 9px),
    linear-gradient(158deg, var(--hatch-a), var(--hatch-b));
}

/* The lit grid — heroes only. A 16px grid with a 128px major, and a teal
   copy of the same grid masked to a light source top-right. */
.lit-grid {
  position: relative;
  overflow: hidden;
  background-color: var(--panel);
  background-image:
    linear-gradient(#111A20 1px, transparent 1px),
    linear-gradient(90deg, #111A20 1px, transparent 1px),
    linear-gradient(#1A2A33 1px, transparent 1px),
    linear-gradient(90deg, #1A2A33 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 128px 128px, 128px 128px;
}
.lit-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(62,209,189,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62,209,189,0.18) 1px, transparent 1px),
    linear-gradient(rgba(123,239,221,0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,239,221,0.26) 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 128px 128px, 128px 128px;
  -webkit-mask-image: radial-gradient(52% 74% at 80% -10%, #000 0, rgba(0,0,0,0.3) 40%, transparent 72%);
          mask-image: radial-gradient(52% 74% at 80% -10%, #000 0, rgba(0,0,0,0.3) 40%, transparent 72%);
}
.lit-grid > * { position: relative; z-index: 2; }


/* ---------- Prose ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  color: var(--chalk);
  margin: 1.6em 0 0.5em;
  line-height: 1.2;
  text-transform: none;
}
h1 { font-size: 2.25rem; line-height: 1.08; margin-top: 0.3em; }
h2 { font-size: 1.5rem; margin-top: 2.4em; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
h5, h6 {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}

.headerlink {
  font-family: var(--font-mono);
  font-size: 0.7em;
  margin-left: 0.4em;
  opacity: 0;
  text-decoration: none !important;
  color: var(--teal) !important;
  transition: opacity var(--t-fast);
}
h1:hover .headerlink, h2:hover .headerlink, h3:hover .headerlink, h4:hover .headerlink { opacity: 1; }

p { margin: 0 0 1.1em; }

a {
  color: var(--teal);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--bright); }
.content :is(p, li, td, th, blockquote, dd, figcaption, .alert, .doc-header__lead, .home-cols) a:not(.btn):not(.chip):not(.headerlink) {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}

/* Emphasis is a weight change, never italics. */
strong, b { color: var(--chalk); font-weight: 500; }
em, i { font-style: normal; font-weight: 500; }

hr {
  border: 0;
  height: 1px;
  background: var(--edge);
  margin: 2.4em 0;
}

blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 16px;
  border-left: 2px solid var(--teal);
  color: var(--muted);
}
blockquote p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.2em; margin: 0 0 1.1em; }
li { margin: 0.35em 0; }
li::marker { color: var(--steel); }
ol > li::marker { color: var(--dim); font-family: var(--font-mono); font-size: 0.85em; }

/* Body prose reads muted on a 72ch measure; headings and emphasis lift to chalk.
   Full-bleed blocks (heroes, index grids, card rows) opt out of the measure. */
.content { color: var(--muted); font-size: var(--text-body); line-height: 1.66; }
.content > * { max-width: var(--measure); }
.content > :is(.home, .docs-index, .card-grid, .lui-positioning-demo, .prevnext, .feedback) { max-width: none; }
.content > .prevnext, .content > .feedback { max-width: var(--measure); }

/* Inline code sits on raise with an inset edge. */
code, kbd, samp { font-size: 0.85em; }
:not(pre) > code {
  color: var(--chalk);
  background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--edge);
  padding: 0.1em 0.4em;
  overflow-wrap: anywhere;
}
kbd {
  color: var(--chalk);
  background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--steel);
  padding: 0.1em 0.45em;
  font-size: 0.8em;
}

pre {
  background: var(--table);
  box-shadow: inset 0 0 0 1px var(--edge);
  padding: 14px 16px;
  margin: 0 0 1.2em;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--chalk);
}
pre code { color: inherit; background: none; box-shadow: none; padding: 0; font-size: inherit; }

/* Tables — recessed surface, mono uppercase heads, tabular numerals. */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  background: var(--table);
  box-shadow: inset 0 0 0 1px var(--edge);
  font-size: var(--text-sm);
}
th, td { padding: 0.7em 1em; text-align: left; border-bottom: 1px solid var(--edge); }
th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dim);
  background: var(--raise);
}
td { font-variant-numeric: tabular-nums; color: var(--muted); }
td strong, td code { color: var(--chalk); }
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--wash-hover); }

/* Figures — an image sits in a 12px chamfered rim with a mono caption. */
.doc-figure { margin: 1.4em 0 1.6em; }
.doc-figure__frame { --cut: 12px; --brush-surface: var(--panel); }
.doc-figure__frame img { width: 100%; height: auto; padding: 1px; }
.doc-figure figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--dim);
  letter-spacing: var(--tracking-data);
}
.doc-figure figcaption b { color: var(--muted); font-weight: 500; }
.content > p > img:only-child { margin: 1.2em 0; }

/* ---------- App shell ---------- */
.app { position: relative; z-index: 1; min-height: 100vh; width: 100%; }

/* ---------- Header — the bar sits on raise with a hairline bottom edge ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--raise);
  box-shadow: inset 0 -1px 0 var(--edge);
}
.site-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 24px;
  gap: 22px;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--chalk);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: var(--tracking-data);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--t);
}
.brand:hover { color: var(--teal); text-decoration: none; }
.brand__mark { width: 17px; height: 17px; flex: none; }

.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t);
}
.nav a:hover, .nav a.active { color: var(--teal); text-decoration: none; }
.nav .ext, .ecosystem .ext, .footer-links .ext { color: var(--dim); font-size: 10px; }

.ecosystem {
  gap: 16px;
  padding-left: 16px;
  box-shadow: inset 1px 0 0 var(--edge);
  align-self: stretch;
}

.header-spacer { flex: 1; }

/* Recessed search (sidebar only) — the rim is the edge; focus swaps it for the ring. */
.search-box {
  --cut: 8px;
  --brush-surface: var(--recess);
  display: flex;
  align-items: center;
  width: 100%;
  height: 32px;
  background: var(--edge);
  margin: 0;
}
.search-box:focus-within { background: var(--bright); }
.search-box svg { width: 14px; height: 14px; flex: none; margin-left: 12px; color: var(--muted); stroke: currentColor; }
.search-box input {
  flex: 1;
  min-width: 0;
  height: 100%;
  background: none;
  border: 0;
  outline: none;
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 0 12px 0 9px;
}
.search-box input::placeholder { color: var(--dim); }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* GitHub — the assetplace ghost icon button: 36px square, 20px glyph,
   wash on hover, a 1px lift. Star count rides beside it in mono. */
.gh-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 8px;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color var(--t), background-color var(--t), transform var(--t);
}
.gh-source:hover { color: var(--bright); background: var(--wash-hover); text-decoration: none; }
.gh-source:focus-visible { background: var(--wash-hover); box-shadow: inset 0 0 0 1px var(--teal); outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .gh-source:hover { transform: translateY(-1px); }
  .gh-source:active { transform: translateY(0) scale(0.97); }
}
.gh-source svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.gh-source__stars::before { content: "\2605  "; }

.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  color: var(--chalk);
  width: 34px; height: 34px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: color var(--t);
}
.menu-toggle:hover { color: var(--teal); }
.menu-toggle svg { width: 18px; height: 18px; stroke-width: 1.5; }

/* ---------- Layout grid ---------- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w);
}
.layout--wide { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.layout--wide .toc-rail, .layout--wide .toc-toggle { display: none !important; }
.layout {
  width: 100%;
  gap: 0;
  position: relative;
  align-items: start;
}

/* ---------- Sidebar ----------
   WikiSidebar: a faint 16px grid on the panel, one vertical rail down the
   left, groups as Chakra Petch titles with a colour tick, items with a
   square marker on the rail. The tick and marker only light for the
   current page's group and entry. */
.sidebar {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  border-right: 1px solid var(--edge);
  background-color: var(--table);
  background-image:
    linear-gradient(#0F151C 1px, transparent 1px),
    linear-gradient(90deg, #0F151C 1px, transparent 1px);
  background-size: 16px 16px;
  overflow-y: auto;
  padding: 14px 0 28px;
  font-family: var(--font-mono);
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 6px; }

.sidebar__head { padding: 0 14px 14px; border-bottom: 1px solid #1B2530; }
.sidebar__search { margin: 0; }
.sidebar__search .search-box { width: 100%; height: 32px; }
.sidebar__search .search-box svg { width: 13px; height: 13px; margin-left: 11px; }
.sidebar__search .search-box input { padding: 0 8px; }
.search-box__key {
  flex: none;
  margin-right: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--edge);
  padding: 2px 5px;
  line-height: 1;
}
.sidebar__readout {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 10px;
  font-weight: 400;
  color: var(--dim);
}

/* The rail: one hairline the ticks and markers sit on. */
.nav-tree { position: relative; list-style: none; padding: 0; margin: 0; }

/* The backer: the hover wash as one element. It fades in on the first
   hovered entry, slides between entries, and fades out on leave. The
   current entry's wash is separate and never moves. */
.nav-tree__backer {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--wash-hover);
  transform: translateY(var(--y, 0));
  transition: transform var(--t-slide), height var(--t-slide), opacity var(--t);
}
.nav-tree__backer.is-on { opacity: 1; }
.nav-tree__item > a:hover { background: transparent; }
.nav-tree::before {
  content: "";
  position: absolute;
  left: 23px; top: 0; bottom: 0;
  width: 1px;
  background: #1B2530;
}
.nav-tree__group { position: relative; padding: 22px 0 4px; }
.nav-tree__title {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 0 8px;
  padding: 0 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t);
}
.nav-tree__title span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}
.nav-tree__tick {
  position: relative;
  z-index: 1;
  display: block;
  width: 18px; height: 3px;
  background: var(--edge);
  transform-origin: left center;
  transition: background var(--t), transform var(--t-slide);
}
.nav-tree__title:hover .nav-tree__tick { transform: scaleX(1.25); }
.nav-tree__title:hover { color: var(--chalk); text-decoration: none; }
.nav-tree__group.is-active .nav-tree__title { color: var(--chalk); }
.nav-tree__group.is-active .nav-tree__tick { background: var(--tab-bg, var(--teal)); }

.nav-tree__list { list-style: none; padding: 0; margin: 8px 0 0; }
.nav-tree__list li { margin: 0; }

.nav-tree__item > a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  font-size: var(--text-xs);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t), background var(--t);
}
.nav-tree__item > a > span:not(.nav-tree__arrow) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-tree__dot {
  flex: none;
  position: relative;
  z-index: 1;
  display: block;
  width: 6px; height: 6px;
  margin-left: 6px;
  background: var(--table);
  box-shadow: inset 0 0 0 1px var(--steel);
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.nav-tree__item > a:hover .nav-tree__dot {
  background: var(--steel);
  box-shadow: 0 0 0 2px rgba(62, 209, 189, 0.18);
}
.nav-tree__arrow { font-size: 10px; color: var(--teal); opacity: 0; transition: opacity var(--t); }
/* Entries with sub-pages carry a caret: pointing right when closed, turned
   down once the entry is open and its children are showing. */
.nav-tree__caret {
  flex: none;
  width: 12px; height: 12px;
  color: var(--dim);
  transform: rotate(-90deg);
  transition: color var(--t), transform var(--t-slide);
}
.nav-tree__item > a:hover .nav-tree__caret { color: var(--muted); }
.nav-tree__item > a.active .nav-tree__caret,
.nav-tree__item > a.is-open .nav-tree__caret { color: var(--teal); transform: none; }
.nav-tree__item > a:hover { color: var(--chalk); background: var(--wash-hover); text-decoration: none; }
.nav-tree__item > a.is-open { color: var(--chalk); }
.nav-tree__item > a.active { color: var(--teal); position: relative; z-index: 0; }
/* The current entry's wash lives on a pseudo so it can fade in on load. */
.nav-tree__item > a.active::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(62, 209, 189, 0.14), transparent 80%);
}
.nav-tree__item > a.active .nav-tree__dot,
.nav-tree__item > a.is-open .nav-tree__dot {
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(62, 209, 189, 0.25);
}
.nav-tree__item > a.active .nav-tree__arrow { opacity: 1; }
/* On arrival the current dot's ring closes in from wide, and the arrow slides
   in from the right. One-shot, motion-safe. */
@keyframes dot-arm {
  from { background: var(--table); box-shadow: 0 0 0 8px rgba(62, 209, 189, 0); }
  to   { background: var(--teal); box-shadow: 0 0 0 3px rgba(62, 209, 189, 0.25); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes arrow-in {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .nav-tree__item > a.active::before { animation: fade-in 300ms var(--ease-out-cubic) both; }
  .nav-tree__item > a.active .nav-tree__dot { animation: dot-arm 300ms var(--ease-out-cubic) both; }
  .nav-tree__item > a.active .nav-tree__arrow { animation: arrow-in 200ms var(--ease-out-expo) both; }
}

/* Children hang off the rail with a short stub. */
.nav-tree__sub { list-style: none; margin: 0; padding: 0; }
.nav-tree__sub a {
  position: relative;
  display: block;
  padding: 4px 14px 4px 44px;
  font-size: 11.5px;
  color: var(--dim);
  text-decoration: none;
  transition: color var(--t);
}
.nav-tree__sub a::before {
  content: "";
  position: absolute;
  left: 26px; top: 50%;
  width: 10px; height: 1px;
  background: var(--edge);
}
.nav-tree__sub a:hover { color: var(--chalk); text-decoration: none; }
.nav-tree__sub a.active { color: var(--teal); }
.nav-tree__sub a.active::before { background: var(--teal); }

.sidebar-overlay {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(0,0,0,0.6);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
  display: none;
}

/* ---------- Main ---------- */
.main { min-width: 0; width: 100%; padding: 28px 44px 64px; }
.main:not(.main--flush) { max-width: calc(var(--container) + 88px); margin: 0 auto; }
.main--flush { padding: 0; }

/* Bands (hero, HUD, page head, page body) run edge to edge; what sits in
   them is held to the container and centred. */
.container { max-width: var(--container); margin: 0 auto; }
.content { width: 100%; }
.content > h1:first-child { margin-top: 0; }

/* Breadcrumbs — mono designators. */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.breadcrumbs li + li::before { content: "/"; color: var(--dim); }
.breadcrumbs a { color: var(--muted); text-decoration: none; transition: color var(--t); }
.breadcrumbs a:hover { color: var(--teal); text-decoration: none; }
.breadcrumbs li.active { color: var(--teal); }

/* Doc header — designator, Sora 600 title, lead, chips, meta line. No display type. */
.doc-header { margin: 0 0 40px; }
.doc-header__designator {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}
.doc-header__title { font-size: 36px; line-height: 1.08; margin: 10px 0 0; color: var(--chalk); }
.doc-header__lead { color: var(--muted); font-size: var(--text-body); line-height: 1.66; margin: 14px 0 0; }
.doc-header__meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 14px 0;
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--dim);
  letter-spacing: var(--tracking-data);
}
.doc-header__meta b { color: var(--chalk); font-weight: 500; }
.doc-header ~ h1:first-of-type,
.doc-header ~ h1:first-of-type + hr { display: none; }

.page-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 0; }
.doc-header + .page-tags, .page-head + .page-tags { margin-bottom: 1.6rem; }

/* Tutorial media — video or screenshot under the doc header. */
.doc-media { margin: 0 0 40px; }
.doc-media__frame { --cut: 12px; --brush-surface: var(--panel); }
.doc-media__frame a, .doc-media__frame img { display: block; width: 100%; }
.doc-media__frame img { padding: 1px; aspect-ratio: 16 / 9; object-fit: cover; }
.doc-media__frame a { position: relative; }
.doc-media__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 44px;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--bright);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background var(--t);
}
.doc-media__play::before {
  content: "";
  position: absolute;
  left: 26px; top: 14px;
  border-left: 14px solid var(--bright);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.doc-media__frame a:hover .doc-media__play { background: var(--deep); }
.doc-media figcaption {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--dim);
  letter-spacing: var(--tracking-data);
}

/* Page head — panel band with breadcrumb, eyebrow, title, lead (docs index, sections). */
.page-head {
  background: var(--panel);
  border-bottom: 1px solid var(--edge);
  padding: 44px 48px 28px;
}
.page-head .breadcrumbs { margin: 0; }
.page-head__eyebrow, .eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--teal);
  line-height: 1;
}
.page-head__eyebrow { margin: 26px 0 12px; }
.page-head__title { font-size: 36px; line-height: 1.08; margin: 0; }
.page-head__lead { color: var(--muted); max-width: 50ch; margin: 12px 0 0; font-size: 16px; }
.page-body {
  padding: 8px 48px 56px;
  background: var(--ground);
  box-shadow: inset 0 14px 26px -14px rgba(0,0,0,0.85);
}
.page-body--landing { padding-top: 40px; }

/* ---------- TOC rail ---------- */
.toc-rail {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: 28px 20px;
  border-left: 1px solid var(--edge);
  background: var(--ground);
  font-family: var(--font-mono);
  scrollbar-width: thin;
}
.toc-rail::-webkit-scrollbar { width: 5px; }

.page-meta {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--edge);
  margin-bottom: 18px;
}
.page-meta a {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: var(--text-xs);
  text-decoration: none;
  transition: color var(--t);
}
.page-meta a:hover { color: var(--teal); text-decoration: none; }
.page-meta a:hover .marker { background: var(--teal); }
.page-meta .marker { transition: background var(--t); }

.toc-title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 10px;
}
#TableOfContents { position: relative; }
/* The scrollspy marker: teal edge plus wash, sliding between headings
   instead of snapping. Without JS the active link paints its own. */
.toc-marker {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  background: var(--wash-active);
  border-left: 2px solid var(--teal);
  transform: translateY(var(--y, 0));
  transition: transform var(--t-slide), height var(--t-slide), opacity var(--t);
}
.toc-marker.is-on { opacity: 1; }
#TableOfContents.has-marker a.active { border-left-color: var(--edge); background: transparent; }
#TableOfContents ul { list-style: none; margin: 0; padding: 0; }
#TableOfContents li { margin: 0; }
#TableOfContents a {
  display: block;
  padding: 5px 12px;
  color: var(--muted);
  border-left: 2px solid var(--edge);
  text-decoration: none;
  font-size: var(--text-xs);
  line-height: 1.4;
  transition: color var(--t), border-color var(--t), background-color var(--t);
}
#TableOfContents a:hover { color: var(--chalk); }
#TableOfContents a.active { color: var(--teal); border-left-color: var(--teal); background: var(--wash-active); }
#TableOfContents ul ul a { padding-left: 24px; font-size: 11.5px; }
#TableOfContents ul ul ul a { padding-left: 36px; }

.toc-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 96;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--steel);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color var(--t), box-shadow var(--t);
}
.toc-toggle:hover { color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.toc-overlay {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(0,0,0,0.55);
  z-index: 94;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t);
  display: none;
}
.toc-overlay.visible { opacity: 1; pointer-events: auto; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--edge);
  background: var(--ground);
  padding: 22px 48px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; transition: color var(--t); }
.footer-links a:hover { color: var(--teal); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  --cut: 10px;
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background: var(--deep);
  color: var(--teal);
  transition: background var(--t), color var(--t), filter var(--t), transform var(--t);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: inherit;
  background: var(--raise);
  transition: background var(--t);
}
.btn:hover { color: var(--bright); text-decoration: none; }
.btn:hover::before { background: var(--deep); }
.btn--primary { background: var(--grad-action); color: var(--ink); }
.btn--primary::before { display: none; }
.btn--primary:hover { color: var(--ink); filter: brightness(1.08); }
.btn--sm { --cut: 8px; padding: 9px 16px; font-size: 11px; }
.btn--ghost { background: var(--edge); color: var(--chalk); }
.btn--ghost::before { background: var(--panel); }
.btn--ghost:hover { background: var(--teal); color: var(--chalk); }
.btn--ghost:hover::before { background: var(--panel); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
@media (prefers-reduced-motion: no-preference) {
  .btn:hover, .hero-search button:hover { transform: translateY(-1px); }
  .btn:active, .hero-search button:active { transform: translateY(0) scale(0.97); transition-duration: 75ms; }
  .btn:disabled { transform: none; }
  .card:active, .index__item:active, .index__section:active, .prevnext a:active { transform: scale(0.985); transition-duration: 100ms; }
}

/* Text link in a Sora 500 with underline — the secondary action next to a button. */
.link-more {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-more:hover { color: var(--bright); }

/* ---------- Cards — a chamfered brush with a type tab ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px;
  margin: 1.6rem 0;
}
.card {
  --brush-surface: var(--panel);
  display: block;
  position: relative;
  z-index: 0;
  text-decoration: none !important;
  color: var(--chalk);
  background: var(--rim-rest);
  padding: 36px 17px 15px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background var(--t), transform var(--t);
}
.card::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: inherit;
  background: var(--brush-surface);
}
.card:hover { background: var(--rim-hover); color: var(--chalk); }
.card:hover .card__eyebrow { background: var(--bright); color: var(--ink); }
.card__eyebrow {
  position: absolute;
  left: 0; top: 0;
  z-index: 5;
  padding: 4px 13px 4px 17px;
  background: var(--tab-bg, var(--teal));
  color: var(--tab-fg, var(--ink));
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  clip-path: polygon(15px 0, 100% 0, calc(100% - 9px) 100%, 0 100%, 0 15px);
  transition: background var(--t), color var(--t);
}
.card__title {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: var(--tracking-heading);
  line-height: 1.26;
  margin: 0;
  color: var(--chalk);
}
.card__desc {
  display: block;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  font-weight: 300;
}
.card__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--dim);
  letter-spacing: var(--tracking-data);
}
.card__footer span:last-child { color: var(--teal); }

/* Section colour: set --tab-bg/--tab-fg on the card. */
.tone-launcher { --tab-bg: #3E7F8F; --tab-fg: #E2EAEC; }
.tone-sounds { --tab-bg: #3ED1BD; --tab-fg: #05201C; }
.tone-asset-types { --tab-bg: #7BEFDD; --tab-fg: #05201C; }
.tone-mapping { --tab-bg: #16564F; --tab-fg: #7BEFDD; }
.tone-lui { --tab-bg: #5FC6E0; --tab-fg: #05201C; }
.tone-software { --tab-bg: #8B7BFF; --tab-fg: #0A0620; }
.tone-general { --tab-bg: #3E5661; --tab-fg: #E2EAEC; }

/* Docs index — each section is a numbered eyebrow, a heading, and a card row. */
.docs-index__section { margin-top: 40px; }
.docs-index__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.docs-index__head h2 { margin: 0; font-size: 24px; line-height: 1.12; }
.docs-index__head .eyebrow { margin-bottom: 8px; }
.docs-index__count, .count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--dim);
  letter-spacing: var(--tracking-data);
}
.docs-index .card-grid { margin: 0; }

/* ---------- HUD strip — raise strip, inset edge, mono label over Chakra value ---------- */
.hud {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--edge);
  overflow: hidden;
}
.hud-band { background: var(--raise); border-bottom: 1px solid var(--edge); }
.hud--band { box-shadow: none; }
.hud > div {
  min-width: 0;
  padding: 14px 22px;
  border-right: 1px solid var(--edge);
}
.hud > div:last-child { border-right: 0; }
.hud span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
  line-height: 1;
}
.hud b {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--chalk);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Home ---------- */
.home-hero { padding: 60px 48px 40px; border-bottom: 1px solid var(--edge); }
.home-hero .eyebrow { margin-bottom: 16px; }
.home-hero__title {
  font-size: clamp(30px, 3.6vw, 42px);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 0;
  max-width: 19ch;
}
.home-hero__lead { color: var(--muted); max-width: 52ch; margin: 16px 0 0; font-size: 16px; }

.hero-search {
  --cut: 10px;
  --brush-surface: var(--recess);
  display: flex;
  margin: 26px 0 0;
  max-width: 600px;
  background: var(--edge);
}
.hero-search:focus-within { background: var(--bright); }
.hero-search svg { width: 16px; height: 16px; margin: auto 0 auto 16px; flex: none; color: var(--muted); }
.hero-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  outline: none;
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: 14px 12px;
}
.hero-search input::placeholder { color: var(--dim); }
.hero-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.hero-search button {
  border: 0;
  background: var(--grad-action);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 12.5px;
  padding: 0 22px;
  cursor: pointer;
  transition: filter var(--t), transform var(--t);
}
.hero-search button:hover { filter: brightness(1.08); }

.home-hero__actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 22px; align-items: center; }

.home-body {
  padding: 40px 48px 56px;
  background: var(--ground);
  box-shadow: inset 0 14px 26px -14px rgba(0,0,0,0.85);
}
.home-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.home-section__head h2, .home-cols h2 { font-size: 24px; line-height: 1.12; margin: 0; }
.home-section__head .eyebrow, .home-cols .eyebrow { margin-bottom: 8px; }
.home-cols .eyebrow { margin-bottom: 12px; }

/* Index — one chamfered card per section: tick, title, count on the left,
   every top-level guide on the right. */
.index { display: grid; gap: 18px; }
.index__row {
  --cut: 12px;
  --brush-surface: var(--table);
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}
.index__section {
  display: block;
  padding: 22px 22px 22px 20px;
  border-left: 2px solid transparent;
  border-right: 1px solid #1B2530;
  text-decoration: none;
  transition: background-color var(--t), border-color var(--t);
}
.index__section:hover { background: var(--wash-hover); border-left-color: var(--teal); text-decoration: none; }
.index__section:hover .index__title { color: var(--teal); }
.swatch { display: block; width: 18px; height: 3px; background: var(--tab-bg, var(--steel)); flex: none; }
.index__title {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: var(--tracking-heading);
  line-height: 1.2;
  color: var(--chalk);
  text-decoration: none;
  transition: color var(--t);
}
.index__count {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-data);
  color: var(--dim);
}
.index__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.index__item {
  display: block;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--chalk);
  border-left: 2px solid transparent;
  transition: background-color var(--t), border-color var(--t), transform var(--t);
}
.index__item:hover { background: var(--wash-hover); border-left-color: var(--teal); color: var(--chalk); text-decoration: none; }
.index__item b { display: block; font-family: var(--font-body); font-weight: 500; font-size: 14px; letter-spacing: -0.01em; color: var(--chalk); }
.index__item span { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.home-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  margin-top: 56px;
  max-width: 1040px;
}
.home-cols h2 { margin-bottom: 14px; }
.home-cols p { color: var(--muted); font-size: 15px; margin: 0 0 12px; line-height: 1.66; }
.home-cols blockquote { font-size: 14px; margin: 0; }

.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.steps li { display: flex; gap: 14px; align-items: flex-start; margin: 0; }
.steps__n {
  flex: none;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--deep);
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.steps li > span:last-child { font-size: 14.5px; color: var(--muted); line-height: 1.55; padding-top: 2px; }
.steps strong { color: var(--chalk); font-weight: 500; }

/* ---------- Section landing hero (sounds, lui, …) ---------- */
/* ---------- Alerts — a 10px chamfered callout with a square marker ---------- */
.alert {
  --cut: 10px;
  --brush-surface: var(--raise);
  --alert-rim: var(--steel);
  --alert-mark: var(--sky);
  position: relative;
  z-index: 0;
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 14px 17px;
  margin: 0 0 18px;
  background: var(--alert-rim);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.alert::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: inherit;
  background: var(--brush-surface);
}
.alert::after {
  content: "";
  order: -1;
  flex: none;
  width: 8px; height: 8px;
  margin-top: 6px;
  background: var(--alert-mark);
}
.alert > div { min-width: 0; }
.alert-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chalk);
  margin: 0 0 3px;
  line-height: 1.3;
}
.alert p { margin: 0; }
.alert p + p { margin-top: 0.6em; }
.alert-primary { --alert-rim: var(--deep); --alert-mark: var(--teal); }
.alert-success { --alert-rim: var(--deep); --alert-mark: var(--bright); }
.alert-info    { --alert-rim: var(--steel); --alert-mark: var(--sky); }
.alert-warning { --alert-rim: #6b5a1e; --alert-mark: var(--gold); }
.alert-danger  { --alert-rim: var(--danger); --alert-mark: var(--danger); }

/* ---------- Code blocks — table surface, mono header, gutter ---------- */
.code-block {
  margin: 0 0 18px;
  background: var(--table);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.code-block__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}
.code-block__lang { font-weight: 500; }
.code-copy {
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t);
}
.code-copy:hover { color: var(--teal); }
.code-block__inner { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.code-gutter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 2.6rem;
  padding: 14px 10px 14px 14px;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  user-select: none;
}
.code-gutter > span { display: block; }
.code-block pre { margin: 0 !important; box-shadow: none; background: transparent; padding-left: 8px; }

/* ---------- Badges / chips / tags ---------- */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  padding: 4px 10px;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--edge);
  text-decoration: none !important;
  transition: color var(--t), box-shadow var(--t);
}
a.badge:hover { color: var(--teal); box-shadow: inset 0 0 0 1px var(--steel); }
.badge-primary, .badge-info { color: var(--sky); }
.badge-success { color: var(--teal); }
.badge-warning { color: var(--gold); }
.badge-danger  { color: var(--danger); }

/* ---------- Prev / next ---------- */
.prevnext { display: flex; justify-content: space-between; gap: 16px; margin-top: 32px; }
.prevnext a {
  flex: 1;
  padding: 14px 16px;
  text-decoration: none !important;
  color: var(--chalk);
  box-shadow: inset 0 0 0 1px var(--edge);
  transition: box-shadow var(--t);
  font-weight: 600 !important;
}
.prevnext a:hover { box-shadow: inset 0 0 0 1px var(--teal); color: var(--chalk); }
.prevnext a span {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
  font-weight: 400;
}
.prevnext a b { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: -0.02em; }
.prevnext__next { text-align: right; }

/* ---------- Feedback ---------- */
.feedback { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--edge); }
.feedback--title {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 10px;
}
.feedback__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.feedback--question { font-size: 15px; color: var(--muted); margin: 0; }
.feedback--response { display: none; margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.feedback--response__visible { display: block; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .feedback--response__visible { animation: rise-in var(--t-enter) both; }
}

/* ---------- Panel with active rim (about / contribute) ---------- */
.panel { position: relative; margin: 24px 0; }
.panel__brush { --brush-surface: var(--panel); }
.panel__body {
  position: relative;
  z-index: 1;
  padding: 40px 26px 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.panel__body h3 { margin: 0 0 8px; font-size: 20px; }
.panel__body p { margin: 0; color: var(--muted); font-size: 14px; max-width: 44ch; }

/* ---------- Posts / news ---------- */
.post-preview {
  padding: 22px 0;
  border-bottom: 1px solid var(--edge);
}
.post-preview h2 { margin: 0 0 6px; font-size: 22px; }
.post-preview h2 a { color: var(--chalk); text-decoration: none !important; }
.post-preview h2 a:hover { color: var(--teal); }
.post-date {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-data);
  color: var(--dim);
}
.tag-entry {
  padding: 8px 0;
  border-bottom: 1px solid var(--edge);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 15px;
}
.tag-entry:last-child { border: 0; }
.tag-entry .text-muted, .tag-entry time { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-data); color: var(--dim); }

.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 2rem 0 0; list-style: none; padding: 0; }
.pagination button, .pagination a {
  min-width: 34px; height: 34px;
  padding: 0 10px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--edge);
  background: var(--raise);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--t), box-shadow var(--t);
}
.pagination button:hover:not(:disabled), .pagination a:hover { color: var(--chalk); box-shadow: inset 0 0 0 1px var(--steel); }
.pagination .active { background: var(--teal); color: var(--ink); box-shadow: none; }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Quiz admonition (legacy include) */
.admonition {
  margin: 1.4em 0 0.8em;
  padding: 14px 17px;
  background: var(--raise);
  box-shadow: inset 0 0 0 1px var(--edge);
}
.admonition-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--chalk);
  margin: 0 0 6px;
}
.well { padding: 10px 14px; background: var(--raise); box-shadow: inset 0 0 0 1px var(--edge); }

/* ---------- Search results ---------- */
.search-form { max-width: 600px; }
#search-results { list-style: none; padding: 0; margin: 1rem 0; }
#search-results li {
  padding: 16px 0;
  border-bottom: 1px solid var(--edge);
  margin: 0;
}
#search-results h4 { margin: 0 0 4px; font-size: 16px; }
#search-results h4 a { text-decoration: none !important; color: var(--chalk); }
#search-results h4 a:hover { color: var(--teal); }
#search-results p { margin: 0; font-size: 14px; color: var(--muted); }
#search-results strong { color: var(--teal); font-weight: 500; }
.search-status {
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--dim);
}
.search-status strong { color: var(--chalk); font-weight: 500; text-transform: none; letter-spacing: 0; }

/* ---------- Scroll to top ---------- */
#scrolltop {
  display: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  border: 0;
  padding: 0;
  background: var(--steel);
  color: var(--chalk);
  cursor: pointer;
  width: 40px; height: 40px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: color var(--t), background var(--t), transform var(--t);
  align-items: center;
  justify-content: center;
}
/* The rim is the button's own background; the body is a clipped pseudo
   inset 1px, so the edge follows the chamfer round the cut corners. */
#scrolltop::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  clip-path: inherit;
  background: var(--raise);
}
#scrolltop svg { stroke-width: 1.5; position: relative; }
#scrolltop:hover { color: var(--teal); background: var(--teal); }
@media (prefers-reduced-motion: no-preference) {
  #scrolltop:hover { transform: translateY(-1px); }
  #scrolltop:active { transform: translateY(0) scale(0.97); transition-duration: 75ms; }
}
#scrolltop.visible { display: inline-flex; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .layout, .layout--wide { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .toc-toggle { display: inline-flex; }
  .toc-overlay { display: block; }
  #scrolltop { right: 16px; bottom: 68px; }
  .toc-rail {
    display: block;
    position: fixed;
    top: var(--header-h);
    right: 0;
    height: calc(100vh - var(--header-h));
    width: min(320px, 88vw);
    transform: translateX(100%);
    transition: transform 150ms var(--ease-out-cubic);
    z-index: 95;
    background: var(--panel);
    box-shadow: var(--shadow-overlay);
  }
  .toc-rail.open { transform: translateX(0); transition-duration: 250ms; transition-timing-function: var(--ease-out-expo); }
  .ecosystem { display: none; }
}

@media (max-width: 1000px) {
  .index__row { grid-template-columns: 1fr; }
  .index__section { border-right: 0; border-bottom: 1px solid #1B2530; }
  .home-cols { grid-template-columns: 1fr; gap: 40px; }
  .hud b { font-size: 15px; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .header-spacer { display: none; }
  .site-header__inner { gap: 14px; }
}

@media (max-width: 720px) {
  .layout, .layout--wide { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 80%;
    max-width: 300px;
    height: calc(100vh - var(--header-h));
    z-index: 90;
    transform: translateX(-100%);
    transition: transform 150ms var(--ease-out-cubic);
    box-shadow: none;
  }
  .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-overlay); transition-duration: 250ms; transition-timing-function: var(--ease-out-expo); }
  .sidebar-overlay { display: block; }
  .sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
  .menu-toggle { display: inline-flex; }
  .main { padding: 20px 20px 48px; }
  .main--flush { padding: 0; }
  .hero { margin: -20px -20px 32px; padding: 32px 20px 24px; }
  .main--hero-with-crumbs .content > .hero:first-child { margin-top: -22px; padding-top: 20px; }
  .home-hero, .home-body, .page-head, .page-body, .site-footer { padding-left: 20px; padding-right: 20px; }
  .hero__title, .page-head__title, .doc-header__title { font-size: 28px; }
  .hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud > div:nth-child(2) { border-right: 0; }
  .hud > div:nth-child(-n+2) { border-bottom: 1px solid var(--edge); }
  .prevnext { flex-direction: column; }
  .prevnext__next { text-align: left; }
  .code-gutter { min-width: 2.2rem; padding: 12px 8px 12px 10px; font-size: 11.5px; }
  #scrolltop { right: 12px; }
  .toc-toggle { right: 12px; bottom: 12px; }
}

/* ---------- Interactive demos (LUI positioning) ---------- */
.lui-positioning-demo {
  margin: 1.5rem 0 2rem;
  box-shadow: inset 0 0 0 1px var(--edge);
  background: var(--panel);
  overflow: hidden;
  font-size: 14px;
}
.lui-demo__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid var(--edge);
}
.lui-demo__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--teal);
}
.lui-demo__title {
  margin-top: 0.3rem;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
  line-height: 1.25;
  color: var(--chalk);
}
.lui-demo__summary { max-width: 360px; color: var(--muted); font-size: 13.5px; line-height: 1.5; text-align: right; }
.lui-demo__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--edge);
  background: var(--raise);
}
.lui-demo__presets button,
.lui-demo__segmented button {
  min-height: 32px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--edge);
  background: var(--ground);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t), box-shadow var(--t), background-color var(--t);
}
.lui-demo__presets button { padding: 0.35rem 0.65rem; }
.lui-demo__presets button:hover,
.lui-demo__segmented button:hover { box-shadow: inset 0 0 0 1px var(--steel); color: var(--chalk); }
.lui-demo__presets button.is-active,
.lui-demo__segmented button.is-active { box-shadow: inset 0 0 0 1px var(--teal); background: var(--wash-active); color: var(--teal); }
.lui-demo__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); gap: 1rem; padding: 1rem; }
.lui-demo__visual-panel { min-width: 0; }
.lui-demo__stage {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 260px;
  box-shadow: inset 0 0 0 1px var(--steel);
  background:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    var(--ground);
  background-size: 5% 8.888%, 5% 8.888%, auto;
  overflow: hidden;
}
.lui-demo__root { position: relative; width: 100%; height: 100%; }
.lui-demo__root-label,
.lui-demo__parent-label,
.lui-demo__child span {
  position: absolute;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1;
  pointer-events: none;
}
.lui-demo__root-label { left: 0.65rem; top: 0.65rem; color: var(--dim); }
.lui-demo__parent {
  position: absolute;
  border: 2px solid var(--gold);
  background: rgba(243,204,79,0.08);
  overflow: visible;
}
.lui-demo__parent-label { left: 0.45rem; top: 0.45rem; color: var(--gold); }
.lui-demo__child {
  position: absolute;
  min-width: 2px;
  min-height: 2px;
  border: 2px solid var(--teal);
  background: rgba(62,209,189,0.18);
}
.lui-demo__child.is-invalid { border-color: var(--danger); background: rgba(255,92,122,0.2); }
.lui-demo__child.is-compact span { display: none; }
.lui-demo__child span { left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--chalk); text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.lui-demo__anchor-line { position: absolute; z-index: 2; pointer-events: none; }
.lui-demo__anchor-line::after {
  content: attr(data-label);
  position: absolute;
  z-index: 5;
  padding: 0.12rem 0.28rem;
  box-shadow: inset 0 0 0 1px var(--edge);
  background: var(--ground);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
}
.lui-demo__anchor-line--x { top: 0; bottom: 0; width: 0; border-left: 1px dashed rgba(226,234,236,0.58); }
.lui-demo__anchor-line--x::after { top: 2.15rem; left: 0.25rem; }
.lui-demo__anchor-line--x.is-near-end::after { left: auto; right: 0.25rem; }
.lui-demo__anchor-line--y { left: 0; right: 0; height: 0; border-top: 1px dashed rgba(226,234,236,0.58); }
.lui-demo__anchor-line--y::after { top: 0.25rem; left: 0.45rem; }
.lui-demo__anchor-line--y.is-near-end::after { top: auto; bottom: 0.25rem; }
.lui-demo__anchor-line--secondary { opacity: 0.72; }
.lui-demo__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin-top: 0.7rem;
  color: var(--dim);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-data);
}
.lui-demo__legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.lui-demo__legend-mark { display: inline-block; width: 0.95rem; height: 0.65rem; }
.lui-demo__legend-mark--parent { border: 1px solid var(--gold); background: rgba(243,204,79,0.12); }
.lui-demo__legend-mark--child { border: 1px solid var(--teal); background: rgba(62,209,189,0.22); }
.lui-demo__legend-mark--anchor { width: 1.1rem; height: 0; border-top: 1px dashed rgba(226,234,236,0.58); }
.lui-demo__metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 0.5rem; margin-top: 0.75rem; }
.lui-demo__metrics div { min-width: 0; padding: 0.55rem 0.65rem; box-shadow: inset 0 0 0 1px var(--edge); background: var(--raise); }
.lui-demo__metrics span {
  display: block;
  color: var(--dim);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 500;
}
.lui-demo__metrics strong { display: block; margin-top: 0.2rem; color: var(--chalk); font-family: var(--font-mono); font-size: 0.9rem; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.lui-demo__controls { display: grid; gap: 0.75rem; }
.lui-demo__controls fieldset { margin: 0; padding: 0.8rem; border: 0; box-shadow: inset 0 0 0 1px var(--edge); background: var(--raise); }
.lui-demo__controls legend {
  padding: 0 0.3rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--chalk);
}
.lui-demo__segmented { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; margin-bottom: 0.65rem; }
.lui-demo__segmented button { width: 100%; padding: 0.35rem 0.25rem; }
.lui-demo__input-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; }
.lui-demo__input-grid--anchors { margin-bottom: 0.55rem; }
.lui-demo__input-grid label {
  display: grid;
  gap: 0.25rem;
  color: var(--dim);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.lui-demo__input-grid input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 0.55rem;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--edge);
  background: var(--ground);
  color: var(--chalk);
  font-family: var(--font-mono);
  font-size: 13px;
}
.lui-demo__input-grid input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--bright); }
.lui-demo__input-grid input:disabled { opacity: 0.55; color: var(--dim); cursor: not-allowed; }
.lui-demo__readout { border-top: 1px solid var(--edge); padding: 1rem; background: var(--ground); }
.lui-demo__calls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.lui-demo__calls code { display: inline-flex; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.lui-demo__formula {
  padding: 0.85rem;
  box-shadow: inset 0 0 0 1px var(--edge);
  background: var(--table);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
}
@media (max-width: 980px) {
  .lui-demo__grid { grid-template-columns: 1fr; }
  .lui-demo__summary { text-align: left; }
}
@media (max-width: 720px) {
  .lui-demo__top { display: grid; }
  .lui-demo__stage { min-height: 220px; }
  .lui-demo__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lui-demo__segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .sidebar, .toc-rail, .site-footer, #scrolltop, .toc-toggle, .feedback, .prevnext { display: none !important; }
  body { background: white; color: black; }
  .layout { display: block; }
  .main { padding: 0; }
  .content { color: black; }
}

/* ---------- Utilities ---------- */
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-0 { margin-top: 0; }
.linked-section, :target { scroll-margin-top: calc(var(--header-h) + 16px); }