.iso{
  --anatomy-page:#0b0b0b;--anatomy-card:#131313;--anatomy-text:#a3a3a3;--anatomy-strong:#e6e6e6;--anatomy-muted:#6e6e6e;
  --anatomy-paper:#131313;--anatomy-face:#1b1b1b;--anatomy-top:#1c1c1c;
  --anatomy-shade-0:#0f0f0f;--anatomy-shade-1:#121212;--anatomy-shade-2:#151515;--anatomy-shade-3:#181818;
  --anatomy-lit-top:#262626;--anatomy-lit-shade:#1d1d1d;
  --anatomy-hi:#d4d4d4;--anatomy-mid:#6a6a6a;--anatomy-lo:#3e3e3e;--anatomy-faint:#2a2a2a;--anatomy-lit:#ffffff;
  --anatomy-halo:#050505;--anatomy-halo-opacity:.9;--anatomy-dot:#e6e6e6;
  --anatomy-red:#ff6b6b;--anatomy-green:#6be0a0;--anatomy-blue:#6b9bff;
  --anatomy-weight:.6px;--anatomy-ease:cubic-bezier(.32,.72,0,1);
  --anatomy-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --anatomy-lift:inset 0 1px 0 0 #ffffff0a,inset 0 0 0 1px #ffffff06,0 0 0 1px #00000026,0 1px 1px -.5px #00000014,0 3px 3px -1.5px #00000014,0 6px 6px -3px #00000014,0 12px 12px -6px #00000014;
}
.iso[data-theme="light"]{
  --anatomy-page:#f2f2ef;--anatomy-card:#fbfbfa;--anatomy-text:#57575a;--anatomy-strong:#18181a;--anatomy-muted:#8c8c90;
  --anatomy-paper:#fbfbfa;--anatomy-face:#ffffff;--anatomy-top:#ffffff;
  --anatomy-shade-0:#dcdcd9;--anatomy-shade-1:#e5e5e2;--anatomy-shade-2:#ededea;--anatomy-shade-3:#f4f4f1;
  --anatomy-lit-top:#ffffff;--anatomy-lit-shade:#eeeeeb;
  --anatomy-hi:#26262a;--anatomy-mid:#8a8a8f;--anatomy-lo:#b4b4b8;--anatomy-faint:#d4d4d6;--anatomy-lit:#000000;
  --anatomy-halo:#8a8a80;--anatomy-halo-opacity:.32;--anatomy-dot:#3a3a3e;
  --anatomy-red:#e5484d;--anatomy-green:#30a46c;--anatomy-blue:#3e63dd;
  --anatomy-lift:inset 0 1px 0 0 #ffffff,0 0 0 1px #0000000f,0 1px 1px -.5px #0000000a,0 3px 3px -1.5px #0000000a,0 6px 6px -3px #0000000a,0 12px 12px -6px #0000000a;
}
.iso-svg{display:block;width:100%;height:auto;overflow:visible}
.iso-svg path,.iso-svg circle{vector-effect:non-scaling-stroke}
.iso-fill{fill:var(--anatomy-paper);stroke:none}
.iso-solid[data-lit]>.iso-fill{fill:var(--anatomy-face)}
.iso-shade,.iso-top{stroke:none}
.iso-shade[data-shade="0"]{fill:var(--anatomy-shade-0)}
.iso-shade[data-shade="1"]{fill:var(--anatomy-shade-1)}
.iso-shade[data-shade="2"]{fill:var(--anatomy-shade-2)}
.iso-shade[data-shade="3"]{fill:var(--anatomy-shade-3)}
.iso-top{fill:var(--anatomy-top)}
.iso-solid[data-lit]>.iso-top{fill:var(--anatomy-lit-top)}
.iso-solid[data-lit]>.iso-shade{fill:var(--anatomy-lit-shade)}
.iso-solid[data-seamless]>.iso-shade,.iso-solid[data-seamless]>.iso-top{stroke-width:.4;stroke-linejoin:round}
.iso-solid[data-seamless]>.iso-shade[data-shade="0"]{stroke:var(--anatomy-shade-0)}
.iso-solid[data-seamless]>.iso-shade[data-shade="1"]{stroke:var(--anatomy-shade-1)}
.iso-solid[data-seamless]>.iso-shade[data-shade="2"]{stroke:var(--anatomy-shade-2)}
.iso-solid[data-seamless]>.iso-shade[data-shade="3"]{stroke:var(--anatomy-shade-3)}
.iso-solid[data-seamless]>.iso-top{stroke:var(--anatomy-top)}
.iso-solid[data-seamless][data-lit]>.iso-top{stroke:var(--anatomy-lit-top)}
.iso-solid[data-seamless][data-lit]>.iso-shade{stroke:var(--anatomy-lit-shade)}
.iso-solid[data-lit]>.iso-edge{stroke:var(--anatomy-lit)}
.iso-halo{fill:var(--anatomy-halo);stroke:none;filter:blur(9px);opacity:var(--anatomy-halo-opacity);transform:translateY(3px)}
.iso-line{fill:none;stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight);stroke-linecap:round;stroke-linejoin:round}
.iso-line[data-tone="hi"]{stroke:var(--anatomy-hi)}
.iso-line[data-tone="mid"]{stroke:var(--anatomy-mid)}
.iso-line[data-tone="lo"]{stroke:var(--anatomy-lo)}
.iso-line[data-tone="faint"]{stroke:var(--anatomy-faint)}
.iso-line[data-tone="lit"]{stroke:var(--anatomy-lit)}
.iso-line[data-tone="red"]{stroke:var(--anatomy-red)}
.iso-line[data-tone="green"]{stroke:var(--anatomy-green)}
.iso-line[data-tone="blue"]{stroke:var(--anatomy-blue)}
.iso-line[data-dotted]{stroke-dasharray:.01 3.5;stroke-width:1}
.iso-line[data-dashed]{stroke-dasharray:3 3}
.iso-line[data-flow]{stroke-dasharray:2 6}
.iso-wire-end{fill:var(--anatomy-paper);stroke:var(--anatomy-lo);stroke-width:var(--anatomy-weight)}
.iso-wire[data-tone="hi"] .iso-wire-end{stroke:var(--anatomy-hi)}
.iso-wire[data-tone="mid"] .iso-wire-end{stroke:var(--anatomy-mid)}
.iso-wire[data-tone="faint"] .iso-wire-end{stroke:var(--anatomy-faint)}
.iso-wire[data-tone="lit"] .iso-wire-end{stroke:var(--anatomy-lit)}
.iso-dots circle{fill:var(--anatomy-dot);stroke:none;opacity:.32}
.iso-dots[data-tone="hi"] circle{opacity:.85}
.iso-dots[data-tone="mid"] circle{opacity:.45}
.iso-dots[data-tone="lo"] circle{opacity:.22}
.iso-dots[data-tone="faint"] circle{opacity:.12}
.iso-face-text{fill:var(--anatomy-mid);font-family:var(--anatomy-mono);letter-spacing:.04em}
.iso-face-text[data-tone="hi"]{fill:var(--anatomy-hi)}
.iso-face-text[data-tone="lo"]{fill:var(--anatomy-lo)}
.iso-face-text[data-tone="faint"]{fill:var(--anatomy-faint)}
.tb-body{fill:var(--anatomy-shade-2);stroke:none}
.tb-shine{fill:var(--anatomy-top);stroke:none}
.tb-shade{fill:var(--anatomy-shade-0);stroke:none}
.tb-ring{fill:none;stroke:var(--anatomy-lo);stroke-width:.45;stroke-linecap:butt;stroke-linejoin:round}
.tb-ring[data-tone="mid"]{stroke:var(--anatomy-mid)}
.tb-ring[data-tone="faint"]{stroke:var(--anatomy-faint)}
.tb-ring[data-tone="hi"]{stroke:var(--anatomy-hi)}
@keyframes iso-flow{to{stroke-dashoffset:-32}}
@keyframes iso-pulse{0%,100%{opacity:.18}12%{opacity:1}40%{opacity:.18}}
.iso-line[data-flow]{animation:iso-flow 1600ms linear infinite}
.iso-dots circle[data-pulse]{animation:iso-pulse 1600ms steps(1,end) infinite;animation-delay:var(--pulse-at,0ms)}
.iso-figure{margin:32px 0 36px}
.iso-plate{position:relative;padding:52px 24px;border-radius:0;background:var(--anatomy-card);box-shadow:0 0 0 1px var(--anatomy-mid);--anatomy-paper:var(--anatomy-card)}
.iso-plate-corners{position:absolute;inset:18px 20px;pointer-events:none}
.iso-plate-corner{position:absolute;color:var(--anatomy-muted);font-family:var(--anatomy-mono);font-size:10.5px;line-height:1;letter-spacing:.04em;white-space:nowrap}
.iso-plate-corner[data-corner="fig"]{top:0;left:0;color:var(--anatomy-text)}
.iso-plate-corner[data-corner="title"]{top:0;right:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="hint"]{bottom:0;left:0;text-transform:uppercase;letter-spacing:.1em}
.iso-plate-corner[data-corner="readout"]{right:0;bottom:0;color:var(--anatomy-text);font-variant-numeric:tabular-nums}
.iso-plate .iso-svg{margin:0 auto}
.iso-legend{display:grid;gap:8px;margin-top:12px;color:var(--anatomy-muted);font-size:13px;line-height:1.55}
.iso-keys{display:flex;flex-wrap:wrap;gap:6px 18px}
.iso-key{display:inline-flex;align-items:center;gap:7px}
.iso-swatch{width:16px;height:10px;flex:none;overflow:visible}
.iso-swatch path{fill:none;stroke:var(--anatomy-hi);stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.iso-swatch[data-mark="raised"] path,.iso-swatch[data-mark="flat"] path{stroke:var(--anatomy-mid)}
.iso-swatch[data-mark="lit"] path{stroke:var(--anatomy-lit)}
.iso-swatch[data-mark="dim"] path{stroke:var(--anatomy-lo)}
.iso-swatch[data-mark="dotted"] path{stroke-dasharray:.01 3;stroke-width:1.4}
.iso-swatch[data-mark="dashed"] path{stroke-dasharray:3 2.5}
.iso-swatch[data-mark="red"] path{stroke:var(--anatomy-red)}
.iso-swatch[data-mark="green"] path{stroke:var(--anatomy-green)}
.iso-swatch[data-mark="blue"] path{stroke:var(--anatomy-blue)}
.iso-swatch-crease{stroke:var(--anatomy-lo)!important}
@media (max-width:560px){.iso-plate{padding:48px 12px 70px}.iso-plate-corner[data-corner="hint"]{bottom:18px}}
@media (prefers-reduced-motion:reduce){.iso-line[data-flow],.iso-dots circle[data-pulse]{animation:none}}

/* Site styles. The figure kit's stylesheet is prepended at build time and
   supplies the colour tokens (--anatomy-*) for both themes. */

:root {
  --col: 560px;
  --wide: 720px;
  --ease: cubic-bezier(.32, .72, 0, 1);
}

.iso {
  --anatomy-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* the one colour, kept for what's live, what's pointed at and what a source
     doesn't back. Both shades pass 4.5:1 on the page and on cards. */
  --accent: #ff6262;
}
.iso[data-theme="light"] { --accent: #cc2a2a; }

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

html {
  color-scheme: light;
  background: var(--anatomy-page);
  overflow-x: clip;
}
html[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  background: var(--anatomy-page);
  color: var(--anatomy-text);
  font: 15px/1.65 Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--anatomy-strong); color: var(--anatomy-page); }

main {
  width: min(var(--col), 100% - 32px);
  margin: 0 auto;
  padding: 120px 0 56px;
}

h1, h2 { margin: 0; font: inherit; }
h1 { color: var(--anatomy-strong); font-weight: 500; }
h2 { color: var(--anatomy-muted); margin-bottom: 10px; }
p { margin: 0 0 14px; }
b { color: var(--anatomy-strong); font-weight: 500; }
code { color: var(--anatomy-strong); font: .87em var(--anatomy-mono); }

a {
  color: var(--anatomy-strong);
  text-decoration: underline 1px var(--anatomy-lo);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 1px solid var(--anatomy-mid); outline-offset: 3px; border-radius: 2px; }

.role { color: var(--anatomy-muted); margin-bottom: 0; }

/* light or dark, top right of the header; it shows the theme it switches to */
header { position: relative; }
.theme {
  position: absolute;
  top: -2px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--anatomy-muted);
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.theme:hover, .theme:focus-visible { color: var(--anatomy-strong); background: var(--anatomy-card); }
.theme svg { display: block; width: 16px; height: 16px; }
[data-theme="dark"] .theme .moon, [data-theme="light"] .theme .sun { display: none; }

.elsewhere { display: flex; gap: 6px; margin: 12px 0 36px -6px; }
.elsewhere a { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--anatomy-muted); transition: color .2s, background-color .2s; }
.elsewhere a:hover, .elsewhere a:focus-visible { color: var(--anatomy-strong); background: var(--anatomy-card); }
.elsewhere svg { display: block; width: 16px; height: 16px; }
.elsewhere .cv { width: auto; margin-left: 2px; padding: 0 7px; font-size: 13px; text-decoration: none; }
section { margin-top: 56px; }
.about { margin-top: 0; }

/* a dated line on what I'm doing this month */
.now { margin-top: 22px; }
.now .label { display: block; color: var(--anatomy-muted); font: 12px/1.6 var(--anatomy-mono); }
.now .label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  vertical-align: 1px;
}

/* words that point at parts of the figure */
b[data-focus] {
  cursor: default;
  text-decoration: underline dotted 1px var(--anatomy-lo);
  text-underline-offset: 4px;
  transition: text-decoration-color .2s;
}
b[data-focus]:hover, b[data-focus]:focus-visible { text-decoration-color: var(--accent); outline: none; }

.iso-svg [data-group] { transition: opacity .35s var(--ease); }
.iso-svg[data-focus] [data-group] { opacity: .14; }
.iso-svg[data-focus="model"] [data-group="model"],
.iso-svg[data-focus="harness"] [data-group="harness"],
.iso-svg[data-focus="tools"] [data-group="tools"],
.iso-svg[data-focus="context"] [data-group="context"],
.iso-svg[data-focus="checks"] [data-group="checks"] { opacity: 1; }
/* the card in flight between shuttle and tray belongs to both */
.iso-svg[data-focus] [data-part="fly"] { opacity: .14; }
.iso-svg[data-focus="harness"] [data-part="fly"],
.iso-svg[data-focus="context"] [data-part="fly"] { opacity: 1; }

/* hover cards */
.tip {
  position: relative;
  color: var(--anatomy-strong);
  cursor: default;
  text-decoration: underline dotted 1px var(--anatomy-lo);
  text-underline-offset: 4px;
}
.tip:hover, .tip:focus-visible { text-decoration-color: var(--accent); outline: none; }
.tip-card {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 5;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--anatomy-card);
  box-shadow: var(--anatomy-lift);
  color: var(--anatomy-text);
  font: 12px/1.6 var(--anatomy-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  translate: calc(-50% + var(--shift, 0px)) 4px;
  transition: opacity .18s, translate .3s var(--ease);
}
.tip:hover .tip-card, .tip:focus-within .tip-card { opacity: 1; translate: calc(-50% + var(--shift, 0px)) 0; }
.tip-list { display: grid; grid-template-columns: auto auto; column-gap: 24px; }
.tip-list span:nth-child(even) { text-align: right; color: var(--anatomy-strong); }

/* figure: a little wider than the text column when there is room */
.iso-figure { margin: 44px calc((min(100vw - 32px, var(--wide)) - 100%) / -2) 0; }
.iso-legend { font-size: 13px; }
.loop-stage { cursor: pointer; border-radius: 2px; }
.loop-stage:focus-visible { outline-offset: 8px; }
/* the lit solid, Fig 1's working card or the slab pointed at in Fig 3, and its key */
.iso-solid[data-lit] > .iso-edge, .iso-swatch[data-mark="lit"] path { stroke: var(--accent); }
.iso-solid[data-lit] > .iso-top { fill: color-mix(in srgb, var(--accent) 12%, var(--anatomy-lit-top)); }
.iso-solid[data-seamless][data-lit] > .iso-top { stroke: color-mix(in srgb, var(--accent) 12%, var(--anatomy-lit-top)); }

/* work */
.rows { border-top: 1px solid var(--anatomy-faint); }
.row { border-bottom: 1px solid var(--anatomy-faint); }
.row summary {
  display: grid;
  grid-template-columns: 30px auto minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: baseline;
  padding: 11px 0;
  cursor: pointer;
  list-style: none;
}
.row summary::-webkit-details-marker { display: none; }
.row summary:focus-visible { outline-offset: -1px; }
.n, .stat { color: var(--anatomy-muted); font: 12px/1 var(--anatomy-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Kannada digits run small next to Latin ones, so they get a point more */
.n { font-family: "Noto Sans Kannada", "Kannada Sangam MN", "Nirmala UI", var(--anatomy-mono); font-size: 13px; }
.name { color: var(--anatomy-strong); font-weight: 500; }
.what { color: var(--anatomy-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .2s; }
.row summary:hover .what, .row[open] .what { color: var(--anatomy-text); }
.body { padding: 2px 0 10px 44px; }
.row[open] .body { animation: open .5s var(--ease) backwards; }
.links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.more { margin-top: 14px; color: var(--anatomy-muted); }

@keyframes open { from { opacity: 0; translate: 0 -4px; } }

/* the upheld demo inside its row: no wider than the row */
.row .iso-figure { margin: 18px 0 22px; }
.uph { --v: var(--anatomy-muted); color: var(--anatomy-text); text-align: left; }
.uph [data-v="supported"] { --v: var(--anatomy-mid); }
.uph [data-v="unsupported"], .uph [data-v="source_missing"] { --v: var(--accent); }
.uph-q { display: flex; gap: 10px; margin: 0 0 10px; color: var(--anatomy-muted); font: 12px/1.6 var(--anatomy-mono); }
.uph-q span { color: var(--anatomy-text); }
.uph-answer { margin: 0 0 22px; color: var(--anatomy-strong); font-size: 15px; line-height: 1.85; }
.uph-claim {
  padding: 2px 1px;
  border-radius: 3px;
  outline: none;
  cursor: default;
  text-decoration: underline 1.5px var(--v);
  text-underline-offset: 5px;
  transition: background-color .25s;
}
.uph-claim[data-v="source_missing"] { text-decoration-style: dashed; }
.uph-claim[data-v="uncited"] { text-decoration-style: dotted; text-decoration-color: var(--anatomy-mid); }
.uph-claim em { font-style: normal; }
.uph-claim[data-on] { background: color-mix(in srgb, var(--v) 14%, transparent); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.uph-claim[data-on] em { color: var(--v); }
.uph-claim:focus-visible { outline: 1px solid var(--anatomy-mid); outline-offset: 1px; }
.uph-cite { margin-left: 2px; color: var(--anatomy-muted); font: 10px var(--anatomy-mono); }
.uph-panels { display: grid; padding-top: 16px; border-top: 1px solid var(--anatomy-faint); }
.uph-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .25s, visibility 0s .25s; }
.uph-panel[data-on] { visibility: visible; opacity: 1; transition: opacity .25s; }
.uph-head { display: flex; align-items: baseline; gap: 14px; font: 12px/1.6 var(--anatomy-mono); }
.uph-count { color: var(--anatomy-muted); }
.uph-verdict { color: var(--v); }
.uph [data-v="supported"] .uph-verdict { color: var(--anatomy-strong); }
.uph-score { margin-left: auto; color: var(--anatomy-text); font-variant-numeric: tabular-nums; }
.uph-meter { position: relative; height: 2px; margin: 8px 0 12px; background: var(--anatomy-faint); }
.uph-meter i { position: absolute; inset: 0 auto 0 0; background: var(--v); }
.uph-meter b { position: absolute; top: -4px; width: 1px; height: 10px; background: var(--anatomy-mid); }
.uph-why { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; }
.uph-evidence { margin: 0; padding-left: 12px; border-left: 1px solid var(--anatomy-lo); color: var(--anatomy-text); font-size: 13.5px; line-height: 1.6; }
.uph-evidence mark { padding: 0 1px; border-radius: 2px; background: color-mix(in srgb, var(--v) 16%, transparent); color: var(--anatomy-strong); }
.uph-evidence cite { display: block; margin-top: 6px; color: var(--anatomy-muted); font: 11px/1.5 var(--anatomy-mono); font-style: normal; }
.uph-sources { display: grid; gap: 4px; margin: 20px 0 0; padding: 12px 0 0; border-top: 1px solid var(--anatomy-faint); list-style: none; font: 11.5px/1.5 var(--anatomy-mono); }
.uph-src { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 10px; color: var(--anatomy-muted); transition: color .25s; }
.uph-src a, .uph-src s { overflow-wrap: anywhere; color: inherit; }
.uph-src s { text-decoration-color: var(--accent); }
.uph-src[data-dead] span:last-child { color: var(--accent); }
.uph-src[data-on] { color: var(--anatomy-strong); }
@media (max-width: 560px) {
  .uph-answer { font-size: 14px; }
  .uph-src { grid-template-columns: auto minmax(0, 1fr); }
  .uph-src span:last-child { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .uph-panel, .uph-panel[data-on], .uph-claim, .uph-src { transition: none; }
}

/* open source: Fig 3, a tower per repo with a slab per merged PR, then a
   button per repo and its panel, which lists the PRs newest first */
.oss { margin: 18px 0 4px; }
.oss .iso-figure { margin: 0; }
.oss-slab, .oss-name { outline: none; cursor: pointer; }
.oss-name[data-on] .iso-face-text { fill: var(--anatomy-strong); }
.oss-lane { transition: opacity .25s; }
.oss:has(.oss-lane[data-on]) .oss-lane:not([data-on]) { opacity: .55; }
.oss-meta { display: block; color: var(--anatomy-muted); font: 12px/1.6 var(--anatomy-mono); overflow-wrap: anywhere; }
.oss-total { margin: 12px 0 0; }
.oss-repos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.oss-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid var(--anatomy-faint);
  border-radius: 6px;
  background: none;
  color: var(--anatomy-text);
  font: 12px/1.2 var(--anatomy-mono);
  cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.oss-chip span { color: var(--anatomy-muted); font-variant-numeric: tabular-nums; }
.oss-chip:hover { color: var(--anatomy-strong); border-color: var(--anatomy-lo); }
.oss-chip[aria-selected="true"] { color: var(--anatomy-strong); border-color: var(--anatomy-mid); background: var(--anatomy-card); }
.oss-panel { margin-top: 18px; }
.oss-panel .oss-meta a { color: var(--anatomy-text); }
.oss-note { margin: 4px 0 12px; }
.oss-prs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--anatomy-faint); }
.oss-prs li { border-bottom: 1px solid var(--anatomy-faint); }
.oss-row {
  display: grid;
  grid-template-columns: 48px 46px minmax(0, 1fr);
  column-gap: 10px;
  padding: 6px 6px;
  color: var(--anatomy-text);
  font-size: 13.5px;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color .15s, color .15s;
}
.oss-when, .oss-ref { color: var(--anatomy-muted); font: 12px/1.7 var(--anatomy-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.oss-prs li[data-on] .oss-row, .oss-row:focus-visible { background: var(--anatomy-card); color: var(--anatomy-strong); outline: none; }
.oss-prs li[data-on] .oss-row { box-shadow: inset 2px 0 var(--accent); }
.oss-prs li[data-on] .oss-ref { color: var(--accent); }
.oss-prs:not([data-all]) li[data-more] { display: none; }
.oss-all {
  margin-top: 8px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--anatomy-text);
  font: 12px/1.2 var(--anatomy-mono);
  text-decoration: underline;
  text-decoration-color: var(--anatomy-lo);
  text-underline-offset: 3px;
  cursor: pointer;
}
.oss-all:hover { color: var(--anatomy-strong); text-decoration-color: var(--accent); }

/* contact */
.copy {
  margin-left: 10px;
  padding: 1px 7px;
  border: 1px solid var(--anatomy-faint);
  border-radius: 4px;
  background: none;
  color: var(--anatomy-muted);
  font: 12px/1.5 var(--anatomy-mono);
  vertical-align: 1px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.copy:hover { color: var(--anatomy-strong); border-color: var(--anatomy-lo); }

footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 88px;
  color: var(--anatomy-muted);
  font: 12px/1 var(--anatomy-mono);
  font-variant-numeric: tabular-nums;
}

/* entrance */
.rise { animation: rise .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 70ms + 80ms); }
@keyframes rise { from { opacity: 0; translate: 0 8px; filter: blur(3px); } }

@media (max-width: 640px) {
  main { padding-top: 72px; }
  .row summary { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 2px; }
  .stat { grid-row: 1; grid-column: 3; }
  .what { grid-row: 2; grid-column: 2 / -1; white-space: normal; }
  .body { padding-left: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .row[open] .body { animation: none; }
  .tip-card, .iso-svg [data-group] { transition: none; }
}