/* o3 OPERATOR CONSOLE: calm product console. Light grey ground, white panels with thin borders
   and mono panel heads, Geist + Geist Mono, ONE accent (violet) used only for the decisive move,
   the selected item and the running state. Shared by index, toolkit and tech-toolkit. */
:root {
  --bg: oklch(97.2% 0.004 286);
  --panel: oklch(100% 0 0);
  --panel-head: oklch(98.6% 0.003 286);
  --sunken: oklch(96.1% 0.005 286);
  --line: oklch(90.5% 0.006 286);
  --line-strong: oklch(80.5% 0.01 286);
  --ink: oklch(23% 0.016 286);
  --ink-2: oklch(40% 0.014 286);
  --ink-3: oklch(50.5% 0.012 286);
  --accent: oklch(49% 0.205 292);       /* ~7:1 on white */
  --accent-ink: oklch(43% 0.19 292);
  --accent-soft: oklch(95.6% 0.028 292);
  --accent-line: oklch(79% 0.095 292);
  --on-accent: oklch(100% 0 0);

  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.5rem; --t-2xl: 2rem;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --gap: 8px;
  --gutter: 16px;
  --radius: 3px;
  --bar-h: 56px;
  --dur: 180ms;
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --container: 1440px;
}
@media (min-width: 768px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--t-md)/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, dl, dd, ul, ol, figure, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.skip { position: absolute; left: var(--gutter); top: -60px; background: var(--ink); color: var(--panel); padding: var(--s3) var(--s4); z-index: 30; text-decoration: none; }
.skip:focus { top: var(--s2); }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--line); }
.bar__in { max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s4); min-height: var(--bar-h); }
.brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; min-height: 44px; min-width: 0; }
.brand svg { width: 22px; height: 22px; flex: none; fill: var(--ink); }
.brand b { font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.brand span { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.env { display: none; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 2px var(--s2); white-space: nowrap; }
.env i { font-style: normal; color: var(--ink-3); }
.nav { grid-column: 1 / -1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); margin-inline: calc(var(--gutter) * -1); padding-inline: calc(var(--gutter) - var(--s3)); }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; padding: 0 var(--s3); min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--radius); transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); background: var(--sunken); }
.bar__contact { font-size: var(--t-sm); font-weight: 500; text-decoration: none; color: var(--panel); background: var(--ink); padding: 0 var(--s4); min-height: 44px; display: inline-flex; align-items: center; border-radius: var(--radius); transition: background-color var(--dur) var(--ease); }
.bar__contact:hover { background: var(--ink-2); }
@media (max-width: 1099px) { .bar__contact { grid-row: 1; grid-column: 2; } }
@media (max-width: 400px) { .brand span { display: none; } }
@media (min-width: 1100px) {
  .bar__in { grid-template-columns: auto auto 1fr auto; }
  .env { display: inline-block; }
  .nav { grid-column: auto; border-top: 0; margin: 0; padding: 0; justify-self: center; overflow: visible; }
}

/* ---------- layout ---------- */
main { max-width: var(--container); margin-inline: auto; padding: var(--s4) var(--gutter) var(--s7); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.grid > * { grid-column: span 12; }
@media (min-width: 640px) { .grid > .stat { grid-column: span 6; } }
@media (min-width: 900px) { .grid > .half { grid-column: span 6; } }
@media (min-width: 1024px) {
  .grid > .hero { grid-column: span 8; }
  .grid > .inspector { grid-column: span 4; }
  .grid > .stat { grid-column: span 3; }
  .grid > .board-panel { grid-column: span 7; }
  .grid > .readout { grid-column: span 5; }
}
@media (min-width: 1180px) {
  .grid > .matrix-panel { grid-column: span 7; }
  .grid > .loop-panel { grid-column: span 5; }
}
section + section { margin-top: var(--s2); }
.row-label { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s5); flex-wrap: wrap; padding: var(--s7) 0 var(--s3); border-bottom: 1px solid var(--line-strong); margin-bottom: var(--gap); }
.row-label h2 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
.row-label .path, .path { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); display: block; margin-bottom: var(--s1); }
.row-label > p { color: var(--ink-2); font-size: var(--t-sm); max-width: 60ch; }
.note { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); margin: 0 0 var(--gap); }

/* ---------- panel ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; display: flex; flex-direction: column; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; min-height: 36px; padding: var(--s1) var(--s4); border-bottom: 1px solid var(--line); background: var(--panel-head); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.panel__head b { font-weight: 500; color: var(--ink-2); }
.panel__body { padding: var(--s5) var(--s4); flex: 1; min-width: 0; }
@media (min-width: 768px) { .panel__body { padding: var(--s5); } }
.fig { display: block; }
.fig svg { display: block; width: 100%; height: auto; }
.h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.lede { margin-top: var(--s2); color: var(--ink-2); font-size: var(--t-md); max-width: 56ch; text-wrap: pretty; }
.source { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); max-width: 100ch; }
.lbl { display: block; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); margin-bottom: var(--s1); }

/* ---------- pills, tags, chips, buttons ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--mono); font-size: 11px; line-height: 1; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--panel); white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.pill--running { color: var(--accent-ink); border-color: var(--accent-line); background: var(--accent-soft); }
.pill--running::before { background: var(--accent); }
.pill--recent::before { background: transparent; border: 1px solid var(--ink-3); }
.pill--soon::before { background: transparent; border: 1px dashed var(--ink-3); }
.pill--xs { font-size: 10px; padding: 2px 6px; }
.tag { display: inline-flex; align-items: center; font-family: var(--mono); font-size: var(--t-xs); line-height: 1.4; color: var(--ink-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1px 6px; white-space: nowrap; }
.tag--a { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.tag--b { border-color: var(--ink); color: var(--ink); }
.tag--move { background: var(--sunken); }
.tag--move.is-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); padding: 2px 8px; }
.btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); border-radius: var(--radius); font-size: var(--t-sm); font-weight: 500; text-decoration: none; border: 1px solid var(--ink); transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.btn svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--panel); }
.btn--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn--ghost { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--ink); }
.tlink { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-ink); text-underline-offset: 3px; }
.tlink:hover { color: var(--ink); }

/* ---------- overview ---------- */
.wordmark { font-size: clamp(2.5rem, 9.6vw, 4.75rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.045em; text-wrap: balance; }
@media (min-width: 1024px) { .wordmark { font-size: clamp(3.5rem, 6.6vw, 6.5rem); white-space: nowrap; } }
.hero__claim { margin-top: var(--s5); font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.hero__claim b { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--line-strong); }
.hero__sub { margin-top: var(--s3); color: var(--ink-2); font-size: var(--t-md); line-height: 1.6; max-width: 58ch; text-wrap: pretty; }
.layers { margin-top: var(--s5); display: grid; border: 1px solid var(--line); border-radius: var(--radius); }
.layer { display: grid; grid-template-columns: 24px 1fr; gap: var(--s3); align-items: start; padding: var(--s3) var(--s4); }
.layer + .layer { border-top: 1px solid var(--line); }
.layer svg { width: 22px; height: 22px; margin-top: 2px; fill: var(--ink); color: var(--ink); }
.layer dt { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.layer dd { font-size: var(--t-sm); }
@media (min-width: 768px) { .layers { grid-template-columns: 1fr 1fr; } .layer + .layer { border-top: 0; border-left: 1px solid var(--line); } }
.ctas { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
.kv > div { display: grid; gap: 2px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.kv > div:first-child { padding-top: 0; }
.kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.kv dd { font-size: var(--t-sm); overflow-wrap: anywhere; }
.kv dd a { text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }
.stat .panel__body { padding-block: var(--s4) var(--s5); }
.stat__v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: clamp(2rem, 2.4vw + 1rem, 2.75rem); line-height: 1; letter-spacing: -0.03em; }
.stat__l { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-2); }

/* ---------- diagram primitives (inline SVG) ---------- */
.d-lab { font: 500 12px var(--mono); fill: var(--ink-3); }
.d-lab--sm { font-size: 11px; }
.d-name { font: 600 15px var(--font); fill: var(--ink); }
.d-dom { font: 600 16px var(--font); fill: var(--ink); }
.d-small { font: 400 12px var(--mono); fill: var(--ink-2); }
.d-box { fill: var(--panel); stroke: var(--line-strong); }
.d-box--layer { stroke: var(--ink-2); }
.d-knock { fill: var(--panel); }
.d-line { fill: none; stroke: var(--ink-3); stroke-width: 1.25; }
.d-line.d-accent { stroke: var(--accent); stroke-width: 1.5; }
.d-accent-t { fill: var(--accent); }
.d-mark { fill: var(--ink-3); }
.d-mark.is-accent { fill: var(--accent); }
.d-rule { stroke: var(--line); fill: none; }
.d-sq { fill: var(--panel); }
.d-sq--dk { fill: var(--sunken); }
.d-sq-sel { fill: var(--accent); }
.d-frame { fill: none; stroke: var(--line-strong); }
.d-plate .d-plate-top { fill: var(--panel); stroke: var(--ink-2); stroke-linejoin: round; }
.d-plate .d-plate-side { fill: var(--sunken); stroke: var(--ink-2); stroke-linejoin: round; }
.d-plate.is-accent .d-plate-top { fill: var(--accent-soft); stroke: var(--accent); }
.d-plate.is-accent .d-plate-side { fill: var(--accent-soft); stroke: var(--accent); }
.d-cyl .d-cyl-side { fill: var(--sunken); stroke: var(--ink-2); }
.d-cyl .d-cyl-top { fill: var(--panel); stroke: var(--ink-2); }
.d-cyl .d-tick { stroke: var(--ink-2); }
.d-cyl.is-accent .d-cyl-side, .d-cyl.is-accent .d-cyl-top { fill: var(--accent-soft); stroke: var(--accent); }
.d-cyl.is-accent .d-tick { stroke: var(--accent); }
.d-axis { stroke: var(--line-strong); stroke-dasharray: 4 4; fill: none; }
.d-num { fill: var(--ink); }
.d-num.is-accent { fill: var(--accent); }
.d-num-t { font: 600 12px var(--mono); fill: var(--on-accent); }
.d-callout { font: 500 13px var(--mono); fill: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; }
.d-grid { stroke: var(--line); fill: none; }
.d-axisline { stroke: var(--line-strong); fill: none; }
.d-lead { stroke: var(--line-strong); stroke-dasharray: 2 3; fill: none; }

/* responsive diagram variants */
.sys--wide, .map--wide, .curve--wide { display: none !important; }
.sys--tall { max-width: 460px; margin-inline: auto; }
.map--tall { max-width: 440px; margin-inline: auto; }
@media (min-width: 900px) { .curve--wide { display: block !important; } .curve--compact { display: none !important; } }
@media (min-width: 1024px) { .sys--wide { display: block !important; } .sys--tall { display: none !important; } }
@media (min-width: 1100px) { .map--wide { display: block !important; } .map--tall { display: none !important; } }

/* exploded view */
.fig--xpl { margin-top: var(--s4); max-width: 500px; }

/* ---------- matrix ---------- */
.exh-title { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; max-width: 34ch; text-wrap: balance; }
.matrix { margin-top: var(--s5); display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; gap: var(--s2); }
.matrix__y { grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.matrix__y b, .matrix__x b { font-weight: 500; color: var(--ink-2); }
.matrix__x { grid-column: 2; display: flex; justify-content: space-between; gap: var(--s2); font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.matrix__grid { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--ink-2); border-bottom: 1px solid var(--ink-2); }
.q { padding: var(--s3); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.q:nth-child(2n) { border-right: 0; }
.q:nth-child(n+3) { border-bottom: 0; }
.q__k { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.q b { display: block; margin-top: var(--s2); font-size: var(--t-md); font-weight: 600; line-height: 1.25; }
.q p { margin-top: var(--s1); font-size: var(--t-sm); color: var(--ink-2); }
.q--win { background: var(--accent); }
.q--win .q__k, .q--win b, .q--win p { color: var(--on-accent); }
@media (min-width: 600px) { .q { padding: var(--s4); } }
.notes { margin-top: var(--s5); display: grid; gap: var(--s3); }
.notes > div { padding-top: var(--s3); border-top: 1px solid var(--line); }
.notes dt { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.notes dd { margin-top: 2px; font-size: var(--t-sm); color: var(--ink-2); }
@media (min-width: 768px) { .notes { grid-template-columns: repeat(3, 1fr); gap: var(--s5); } }

/* ---------- loop ---------- */
.fig--loop { max-width: 440px; margin-inline: auto; }
/* Phones: the circle is too small to read, so the step list becomes the loop (connectors + feedback bracket). */
@media (max-width: 599px) {
  .fig--loop { display: none; }
  .lp-steps { margin-top: 0; position: relative; padding-right: 26px; gap: 14px; }
  .lp-steps li { position: relative; }
  .lp-steps li + li::before { content: ""; position: absolute; left: 22px; top: -14px; height: 14px; border-left: 1.5px solid var(--ink-2); }
  .lp-steps::after { content: ""; position: absolute; right: 6px; top: 22px; bottom: 22px; width: 14px; border: 1.5px dashed var(--ink-3); border-left: 0; }
  .lp-step { grid-template-columns: 1fr; }
  .lp-step__d { grid-column: 1; }
}
.lp-box { fill: var(--panel); stroke: var(--ink-2); transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease); }
.lp-lab { font: 500 11px var(--mono); fill: var(--ink-3); }
.lp-name { font: 600 14px var(--font); fill: var(--ink); }
.lp-center { font: 700 28px var(--font); fill: var(--ink); letter-spacing: -0.02em; }
.lp-node.is-sel .lp-box { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.lp-node.is-decisive .lp-box { fill: var(--accent); stroke: var(--accent); }
.lp-node.is-decisive .lp-lab, .lp-node.is-decisive .lp-name { fill: var(--on-accent); }
.lp-node.is-decisive.is-sel .lp-box { stroke: var(--ink); stroke-width: 2; }
.d-line--loop { stroke: var(--ink-2); }
.d-mark--muted { fill: var(--ink-3); }
.lp-steps { margin-top: var(--s4); display: grid; gap: 6px; }
.lp-step { width: 100%; text-align: left; display: grid; grid-template-columns: 108px 1fr; gap: 2px var(--s3); align-items: baseline; padding: var(--s2) var(--s3); min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.lp-step:hover { border-color: var(--line-strong); background: var(--panel-head); }
.lp-step__n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.lp-step__name { font-weight: 600; font-size: var(--t-sm); }
.lp-step__d { grid-column: 2; font-size: var(--t-sm); color: var(--ink-2); }
.lp-step[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.lp-step.is-decisive .lp-step__n { color: var(--accent-ink); }
.legend { margin-top: var(--s4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.lg { display: inline-block; width: 22px; height: 0; border-top: 1.5px solid var(--ink-2); }
.lg--dash { border-top-style: dashed; border-color: var(--ink-3); }

/* ---------- growth curve ---------- */
.cv-area { fill: var(--sunken); }
.cv-line { fill: none; stroke: var(--ink); stroke-width: 2; }
.cv-pt { fill: var(--panel); stroke: var(--ink); stroke-width: 1.5; }
.cv-pt.is-accent { fill: var(--accent); stroke: var(--accent); }
.cv-tag { font: 500 12px var(--mono); fill: var(--ink-2); }
.cv-tag.d-accent-t { fill: var(--accent); }
.cv-val { font: 600 17px var(--font); fill: var(--ink); }
.curve--compact .cv-tag { font-size: 13px; }
figcaption.source { margin-top: var(--s3); }
.pv { margin-top: var(--s4); padding: var(--s3) var(--s4); background: var(--sunken); border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--mono); font-size: var(--t-sm); display: grid; gap: var(--s1); }
.pv__k { color: var(--ink-3); font-size: var(--t-xs); margin-right: var(--s2); }
.pv__moves span { margin-right: var(--s3); white-space: nowrap; }
.pv__moves .is-accent { color: var(--accent-ink); font-weight: 500; }
.pv-cells { margin-top: var(--gap); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); }
.pv-cells li { padding: var(--s3); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 2px; min-width: 0; }
.pv-cells li:nth-child(2n) { border-right: 0; }
.pv-cells li:last-child { grid-column: 1 / -1; border-bottom: 0; border-right: 0; }
.pv-cells .mv { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.pv-cells b { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.01em; }
.pv-cells .by { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); }
.pv-cells .is-decisive .mv { color: var(--accent-ink); }
@media (min-width: 900px) {
  .pv-cells { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pv-cells li { border-bottom: 0; border-right: 1px solid var(--line); }
  .pv-cells li:nth-child(2n) { border-right: 1px solid var(--line); }
  .pv-cells li:last-child { grid-column: auto; border-right: 0; }
}

/* ---------- board ---------- */
.lg-pc { display: inline-flex; align-items: center; gap: 6px; }
.lg-pc + .lg-pc { margin-left: var(--s4); }
.pc-detail { fill: none; stroke: var(--detail, var(--panel)); stroke-width: 1.6; stroke-linecap: round; }
.g { fill: currentColor; color: var(--ink); --detail: var(--panel); }
.g--xs { width: 16px; height: 16px; }
.g--line { fill: var(--panel); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; --detail: currentColor; }
.board-panel .panel__body { padding: var(--s3); }
@media (min-width: 768px) { .board-panel .panel__body { padding: var(--s5); } }
.board-frame { display: grid; grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto 22px; max-width: 600px; margin-inline: auto; }
.ranks { display: grid; grid-template-rows: repeat(8, 1fr); font-family: var(--mono); font-size: 11px; color: var(--ink-3); align-items: center; }
.files { grid-column: 2; display: grid; grid-template-columns: repeat(8, 1fr); font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: center; align-items: end; }
.board { position: relative; aspect-ratio: 1; border: 1px solid var(--line-strong); }
.board__sq, .board__pc { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.board__sq i { background: var(--panel); }
.board__sq i.d { background: var(--sunken); }
.board__mid { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-strong); pointer-events: none; }
.board__mid span { position: absolute; right: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-3); background: var(--panel); padding: 0 4px; line-height: 1.5; }
.board__mid span:first-child { bottom: 2px; }
.board__mid span:last-child { top: 2px; }
.guide { pointer-events: none; background: var(--accent-line); opacity: 0; transition: opacity var(--dur) var(--ease); }
.js .guide { opacity: 1; }
.guide--rank { grid-column: 1 / -1; height: 1px; align-self: center; }
.guide--file { grid-row: 1 / -1; width: 1px; justify-self: center; }
.pc { position: relative; display: flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; z-index: 1; transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.pc .g { width: 72%; height: 72%; }
.pc__id { position: absolute; top: 2px; left: 3px; font-family: var(--mono); font-size: 10px; line-height: 1; color: var(--ink-2); }
.pc.is-decisive .pc__id { color: var(--accent-ink); }
.pc:hover { background: var(--panel-head); }
.pc[aria-current="true"] { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.pc[aria-current="true"] .pc__id { color: var(--accent-ink); }
.pc[aria-current="true"] .g--line { fill: var(--accent-soft); }
.pc[aria-current="true"] .g:not(.g--line) { --detail: var(--accent-soft); }
.pc:focus-visible { outline-offset: -2px; }
.pc.is-off { opacity: 0.25; }
@media (max-width: 480px) { .pc__id { font-size: 9px; } }

.readout .panel__head { padding-right: var(--s1); }
.ro__nav { display: inline-flex; align-items: center; gap: var(--s1); }
.ro__nav button { min-width: 44px; min-height: 44px; border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); cursor: pointer; font-family: var(--mono); }
.ro__nav button:hover { border-color: var(--ink); }
.ro__nav #ro-pos { margin-right: var(--s2); }
.ro__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ro__co { margin-top: var(--s3); font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.ro__co small { display: block; margin-top: var(--s1); font-family: var(--mono); font-size: var(--t-xs); font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.ro__sec { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.ro__move { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; text-wrap: balance; }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius); }
.metrics > div { padding: var(--s3); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.metrics > div:nth-child(2n) { border-right: 0; }
.metrics--4 > div:nth-child(n+3), .metrics--3 > div:nth-child(3) { border-bottom: 0; }
.metrics--3 > div:nth-child(3) { grid-column: span 2; }
.metrics dt { font-family: var(--mono); font-weight: 500; font-size: var(--t-lg); letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.metrics dd { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-3); }
.ro__links { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: 0 var(--s4); }

/* ---------- filter + cases ---------- */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.seg { display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.seg button { min-height: 44px; padding: 0 var(--s3); border: 0; background: transparent; cursor: pointer; font: 500 var(--t-xs)/1 var(--mono); color: var(--ink-2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.seg button + button { border-left: 1px solid var(--line-strong); }
.seg button:hover { background: var(--sunken); color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--panel); }
.seg button .n { color: var(--ink-3); }
.seg button[aria-pressed="true"] .n { color: oklch(80% 0.01 286); }
.seg button:focus-visible { outline-offset: -3px; }
.count { font-size: var(--t-xs); color: var(--ink-3); }
@media (max-width: 420px) { .seg { width: 100%; } .seg button { flex: 1; justify-content: center; padding: 0 var(--s2); } }

.cases { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.case[hidden] { display: none; }
.case { scroll-margin-top: 80px; transition: box-shadow var(--dur) var(--ease); }
.case.is-linked { box-shadow: 0 0 0 2px var(--accent); border-color: var(--accent); }
.case:focus { outline: none; }
.case__id { color: var(--ink-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.case__id b { color: var(--ink); font-weight: 500; margin-right: var(--s1); }
.case__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.case__title { margin-top: var(--s3); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.case__title h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.case__meta { margin-top: var(--s1); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); line-height: 1.6; }
.g--card { width: 40px; height: 40px; flex: none; }
.case__big { margin-top: var(--s4); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s3); }
.case__big .big { font-family: var(--mono); font-weight: 500; font-size: clamp(2.25rem, 2vw + 1.5rem, 3rem); letter-spacing: -0.04em; line-height: 1; }
.case__big .unit { margin-left: 4px; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.spark { width: 84px; height: 26px; flex: none; }
.spark path { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.spark-end { fill: var(--ink); }
.spark-end.is-accent { fill: var(--accent); }
.case__excerpt { margin-top: var(--s3); color: var(--ink-2); font-size: var(--t-sm); max-width: 62ch; text-wrap: pretty; }
.trace { margin-top: var(--s4); border: 1px solid var(--line); border-radius: var(--radius); }
.trace > div { display: grid; gap: var(--s1) var(--s3); padding: var(--s3); }
.trace > div + div { border-top: 1px solid var(--line); }
.trace dt { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.trace dt svg { width: 14px; height: 14px; fill: var(--ink-3); color: var(--ink-3); }
.move { font-weight: 600; font-size: var(--t-md); line-height: 1.3; }
@media (min-width: 600px) { .trace > div { grid-template-columns: 120px 1fr; align-items: baseline; } }
.case__foot { display: grid; grid-template-columns: minmax(0, 1fr) 56px; border-top: 1px solid var(--line); }
.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.readouts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.readouts > div { padding: var(--s3); border-right: 1px solid var(--line); display: flex; flex-direction: column-reverse; justify-content: flex-end; min-width: 0; }
.readouts dd { font-family: var(--mono); font-weight: 500; font-size: var(--t-md); letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.readouts dt { margin-top: 2px; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.35; }
@media (min-width: 600px) { .readouts dd { font-size: var(--t-lg); } }
.case__go { display: flex; align-items: center; justify-content: center; min-height: 56px; color: var(--ink); transition: background-color var(--dur) var(--ease); }
.case__go svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
.case__go:hover { background: var(--sunken); }
.case__go:hover svg { transform: translateX(3px); }
.case__go:focus-visible { outline-offset: -3px; }
.inspect { border-top: 1px solid var(--line); padding: 0 var(--s4); }
@media (min-width: 768px) { .inspect { padding: 0 var(--s5); } }
.inspect summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); }
.inspect summary::-webkit-details-marker { display: none; }
.inspect summary svg { width: 12px; height: 12px; transition: transform var(--dur) var(--ease); }
.inspect[open] summary svg { transform: rotate(90deg); }
.inspect summary:hover { color: var(--ink); }
.inspect summary:focus-visible { outline-offset: -2px; }
.inspect p { font-size: var(--t-sm); color: var(--ink-2); padding: 0 0 var(--s4) var(--s5); max-width: 64ch; }

/* ---------- exhibit ---------- */
.exh-head { font-size: clamp(1.4rem, 1.4vw + 1rem, 2rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; max-width: 30ch; text-wrap: balance; padding-bottom: var(--s5); border-bottom: 1px solid var(--line-strong); }
.exh-grid { margin-top: var(--s5); display: grid; gap: var(--s6); }
@media (min-width: 1024px) { .exh-grid { grid-template-columns: 5fr 7fr; } }
.exh-co { font-size: var(--t-lg); font-weight: 600; }
.exh-excerpt { margin-top: var(--s3); color: var(--ink-2); max-width: 52ch; }
.exh-row { margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.exh-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink-2); }
.exh-stats > div { padding: var(--s4) var(--s3) var(--s4) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.exh-stats > div:nth-child(2n) { padding-left: var(--s4); border-left: 1px solid var(--line); }
.exh-stats dd { font-family: var(--mono); font-weight: 500; font-size: clamp(2rem, 2vw + 1rem, 2.75rem); letter-spacing: -0.04em; line-height: 1; }
.exh-stats dt { margin-top: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.bars-k { margin-top: var(--s5); }
.bars { display: grid; gap: var(--s4); margin-top: var(--s2); }
.bars li { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: baseline; }
.bars__l { font-size: var(--t-sm); color: var(--ink-2); }
.bars b { font-family: var(--mono); font-weight: 500; }
.bars__t { grid-column: 1 / -1; display: block; height: 10px; background: var(--sunken); border: 1px solid var(--line); }
.bars__t i { display: block; height: 100%; background: var(--ink-2); }
.bars-axis { margin-top: var(--s2); padding-top: var(--s1); border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ---------- service map ---------- */
.m-dom { fill: var(--sunken); stroke: var(--ink-2); }
.m-edge { fill: none; stroke: var(--ink-3); stroke-width: 1.1; transition: opacity var(--dur) var(--ease); }
.m-port { fill: var(--ink); }
.m-g { transition: opacity var(--dur) var(--ease); }
[data-scope="b"] .m-a-only, [data-scope="b"] .m-edge.e-a, [data-scope="b"] .m-dom-a,
[data-scope="a"] .m-b-only, [data-scope="a"] .m-edge.e-b, [data-scope="a"] .m-dom-b { opacity: 0.2; }
.legend-p { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-2); max-width: 80ch; }
.map + .kg-panel { margin-top: var(--gap); }

/* ---------- knowledge graph ---------- */
.kg-head { padding-block: var(--s1); }
.kg-legend { display: none; align-items: center; gap: 6px var(--s2); flex-wrap: wrap; }
.kg-legend .k { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--ink-3); background: var(--panel); margin-left: var(--s2); }
.kg-legend .k--person { border-radius: 50%; width: 10px; background: var(--ink); border-color: var(--ink); }
.kg-legend .k--domain { border-style: dashed; }
.kg-legend .k--tech { border-radius: 6px; }
.kg-hint { display: none; align-items: center; gap: var(--s2); }
#gm-reset { min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--line-strong); background: var(--panel); border-radius: var(--radius); cursor: pointer; font-family: var(--mono); font-size: var(--t-xs); }
#gm-reset:hover { border-color: var(--ink); }
.kg-body { display: none; }
.kg-grid path { stroke: var(--line); fill: none; }
.edge line { stroke: var(--line-strong); stroke-width: 1; transition: stroke var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.edge text { font: 500 11px var(--mono); fill: var(--accent-ink); paint-order: stroke; stroke: var(--panel); stroke-width: 5px; stroke-linejoin: round; opacity: 0; transition: opacity var(--dur) var(--ease); }
.edge.is-hl line { stroke: var(--accent); stroke-width: 1.5; }
.edge.is-hl text { opacity: 1; }
.edge.is-dim line { opacity: 0.4; }
.node { cursor: pointer; outline: none; transition: opacity var(--dur) var(--ease); }
.node .ring { fill: none; stroke: transparent; stroke-width: 2; }
.node .sh { fill: var(--panel); stroke: var(--ink-3); transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease); }
.node .sh--dash { stroke-dasharray: 4 3; }
.node .lb { font: 600 13px var(--font); fill: var(--ink); }
.node .lb--tech { font: 500 12px var(--mono); fill: var(--ink-2); }
.node .tg { font: 500 11px var(--mono); fill: var(--ink-3); }
.node--person .sh { fill: var(--ink); stroke: var(--ink); }
.node--person .lb { fill: var(--on-accent); }
.node.is-nb .sh { stroke: var(--ink); }
.node.is-sel .sh { fill: var(--accent); stroke: var(--accent); }
.node.is-sel .lb, .node.is-sel .tg { fill: var(--on-accent); }
.node.is-dim { opacity: 0.45; }
.node:hover .sh { stroke: var(--ink); }
.node:focus-visible .ring { stroke: var(--accent); }
.kg-insp { border-top: 1px solid var(--line); padding: var(--s5); min-width: 0; }
.insp__type { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.insp__type b { color: var(--accent-ink); font-weight: 500; }
.insp__name { margin-top: var(--s2); font-size: var(--t-2xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.insp__full { margin-top: var(--s1); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-2); }
.insp__desc { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-2); }
.props, .rels { margin-top: var(--s4); border-top: 1px solid var(--line); }
.props > div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.pred { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.rels h4 { margin: var(--s3) 0 var(--s1); font: 500 var(--t-xs) var(--mono); color: var(--ink-3); }
.rels li { display: grid; grid-template-columns: 120px 1fr; gap: var(--s3); align-items: center; }
.rels button { text-align: left; min-height: 36px; padding: 0 var(--s2); margin-left: calc(var(--s2) * -1); border: 0; background: transparent; border-radius: var(--radius); cursor: pointer; font-size: var(--t-sm); }
.rels button:hover { background: var(--accent-soft); color: var(--accent-ink); }
.insp__cases { margin-top: var(--s3); display: grid; }
.alist { border-top: 1px solid var(--line); padding: var(--s4); }
@media (min-width: 768px) { .alist { padding: var(--s5); } }
.alist__head { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.alist__head b { color: var(--ink-2); font-weight: 500; }
.alist__grp { border-top: 1px solid var(--line); margin-top: var(--s3); }
.alist__grp summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.alist__grp summary b { color: var(--ink); font-weight: 500; }
.alist__grp summary span { margin-left: auto; }
.alist__item { padding: var(--s2) 0 var(--s3); border-top: 1px dashed var(--line); scroll-margin-top: 80px; }
.alist__item:target { background: var(--accent-soft); }
.alist__name { font-weight: 600; font-size: var(--t-sm); }
.alist__rels { font-size: var(--t-sm); color: var(--ink-2); }
.alist__rels .pred { margin-right: var(--s2); }
@media (min-width: 900px) {
  .js .kg-body { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .js .kg-legend, .js .kg-hint { display: inline-flex; }
  .kg-canvas { border-right: 1px solid var(--line); padding: var(--s3); }
  .kg-canvas svg { display: block; width: 100%; height: auto; }
  .kg-insp { border-top: 0; max-height: 640px; overflow: auto; }
}

/* ---------- services, toolkits, contact ---------- */
.events { border: 1px solid var(--line); border-radius: var(--radius); }
.events li { display: grid; gap: 2px var(--s4); padding: var(--s3) var(--s4); }
.events li + li { border-top: 1px solid var(--line); }
.events li:hover { background: var(--panel-head); }
.events .src { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.events .what { font-weight: 600; }
.events .detail { color: var(--ink-2); font-size: var(--t-sm); }
@media (min-width: 768px) { .events li { grid-template-columns: 200px 260px 1fr; align-items: baseline; } }
.tk-card { text-decoration: none; transition: border-color var(--dur) var(--ease); }
.tk-card:hover { border-color: var(--ink-3); }
.tk-card:hover .tk-meta svg { transform: translateX(3px); }
.tk-meta { margin-top: var(--s4); display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); color: var(--ink-2); }
.tk-meta svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.contact__body { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .contact__body { grid-template-columns: 1fr minmax(0, 420px); align-items: end; } }
.contact__h { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; max-width: 24ch; }
.channels { display: grid; gap: var(--s2); }
.channel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.channel small { display: block; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.channel span { font-family: var(--mono); font-size: var(--t-sm); overflow-wrap: anywhere; }
.channel svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.channel:hover { border-color: var(--ink); background: var(--panel-head); }
.channel:hover svg { transform: translateX(3px); }
.channel--primary { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.channel--primary small { color: oklch(80% 0.01 286); }
.channel--primary:hover { background: var(--ink-2); border-color: var(--ink-2); }

footer { border-top: 1px solid var(--line); background: var(--panel); }
.foot { max-width: var(--container); margin-inline: auto; padding: var(--s5) var(--gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); font-size: var(--t-xs); color: var(--ink-3); font-family: var(--mono); }
.foot a { color: var(--ink-2); text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ---------- toolkit pages (docs + API reference) ---------- */
.docs, .api { display: grid; gap: var(--gap); align-items: start; }
.side { padding: var(--s4); }
.side ul { display: grid; }
.side a { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 40px; padding: 0 var(--s2); border-radius: var(--radius); text-decoration: none; font-size: var(--t-sm); color: var(--ink-2); }
.side a:hover { background: var(--sunken); color: var(--ink); }
.side a[aria-current="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.side a[hidden] { display: none; }
.side__grp { margin: var(--s4) 0 var(--s1); padding: 0 var(--s2); font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.search { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); }
.search:focus-within { border-color: var(--accent); }
.search svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: var(--t-sm); color: var(--ink); min-height: 40px; }
.search kbd { font-family: var(--mono); font-size: 11px; color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 0 6px; }
.doc, .api__main { min-width: 0; }
.doc { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5) var(--s4); }
@media (min-width: 768px) { .doc { padding: var(--s6) var(--s7); } }
.crumb { font-size: var(--t-sm); color: var(--ink-3); display: flex; gap: var(--s2); flex-wrap: wrap; }
.crumb a { color: var(--ink-2); text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }
.doc .path, .ep--intro .path { margin-top: var(--s5); }
.doc__h1 { margin-top: var(--s2); font-size: clamp(2rem, 3vw + 1rem, 3.25rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.doc__lede { margin-top: var(--s4); font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }
.callout { margin-top: var(--s5); display: grid; grid-template-columns: 20px 1fr; gap: var(--s3); padding: var(--s4); border: 1px solid var(--accent-line); border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius); font-size: var(--t-sm); }
.callout svg { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }
.callout__k { font-family: var(--mono); font-size: 11px; color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.08em; }
.code { margin-top: var(--s5); }
.code pre, .ep__io pre { padding: var(--s4); overflow-x: auto; background: var(--sunken); font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink); }
.ln { display: inline-block; width: 2.4em; color: var(--ink-3); user-select: none; }
.doc .count, .ep--intro .count { margin-top: var(--s5); }
.doc-entry { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.doc-entry[hidden] { display: none; }
.doc-entry__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.doc-entry h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: -0.01em; }
.doc-entry__meta { margin-top: var(--s1); font-size: var(--t-xs); color: var(--ink-3); }
.doc-entry > p:last-child, .ep__doc > p { margin-top: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.doc-entry a, .ep__doc a { color: var(--ink); text-underline-offset: 3px; }
.empty-note { margin-top: var(--s4); font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.doc__next { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--line-strong); font-size: var(--t-sm); color: var(--ink-2); }
.doc__next a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; display: inline-block; padding: 12px 0; margin: -12px 0; }
.rail { display: none; }
.rail__h { font-size: var(--t-sm); font-weight: 600; }
.rail ul { margin-top: var(--s2); border-left: 1px solid var(--line); }
.rail a { display: block; padding: 6px var(--s3); font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; margin-left: -1px; border-left: 1px solid transparent; }
.rail a:hover { color: var(--ink); border-left-color: var(--ink); }
.rail__cta { margin-top: var(--s5); }
.rail__cta p { font-size: var(--t-sm); margin-bottom: var(--s3); }
.verb { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--accent-ink); margin-right: var(--s2); }
.ep { display: grid; gap: var(--s4); padding: var(--s5) var(--s4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 80px; }
.ep + .ep { margin-top: var(--gap); }
.ep[hidden] { display: none; }
@media (min-width: 768px) { .ep { padding: var(--s5); } }
.ep__path { font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-2); overflow-wrap: anywhere; }
.ep h3 { margin-top: var(--s2); display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: var(--t-xl); font-weight: 600; letter-spacing: -0.015em; }
.params { margin-top: var(--s4); border-top: 1px solid var(--line); }
.params > div { display: grid; grid-template-columns: 90px 1fr; gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.params dt { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.ep__io { align-self: start; min-width: 0; }
.ep__io .panel__head b { overflow-wrap: anywhere; }
.side .verb { margin-right: var(--s1); }
.api .side a { justify-content: flex-start; font-family: var(--mono); font-size: var(--t-xs); }
@media (min-width: 1024px) {
  .docs { grid-template-columns: 250px minmax(0, 1fr) 210px; }
  .api { grid-template-columns: 260px minmax(0, 1fr); }
  .side { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow: auto; }
  .rail { display: block; position: sticky; top: 72px; padding-top: var(--s5); }
}
@media (min-width: 1240px) { .ep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* link from each home case card to its detail page */
.case__read{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 var(--s3);font-size:var(--t-sm);font-weight:500;color:var(--accent);text-decoration:none}
.case__read:hover{text-decoration:underline}

/* every nav link is at least 44px wide for touch */
.nav a{min-width:44px;justify-content:center}
/* footer links get a 44px touch target */
.foot a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}