:root{
  --paper:#dae5ee; --panel:#f7fafc; --plate:#e9f0f6; --capsule:#d2dfe9; --board:#d2dfe9;
  --ink:#10202c; --soft:#476074; --faint:#8ba3b4; --line:#c3d1db; --frame:#14415f;
  --accent:#14557f; --warn:#a2502a; --warn-soft:#f4ebe5;
  --field:#12405e; --on-field:#e6eff5; --on-field-soft:#93b4c9; --field-line:#2b5a79;
  --s1:#a7c0d0; --s2:#7fa3bc; --s3:#57869f; --s4:#2f6a86; --s5:#0f4a6b;
  --kind-pick:#d6ebdb; --kind-pick-line:#3d8a57; --kind-table:#dcdddd;
  --kind-guide:#c2e1f7; --kind-guide-line:#1f7fc0;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#0f1720; --panel:#16202a; --plate:#1b2733; --capsule:#1b2733; --board:#131c25;
    --ink:#dfe8ef; --soft:#9db0bf; --faint:#7d94a7; --line:#2b3a48; --frame:#4a7fa0;
    --accent:#8fbcd8; --warn:#d08a63; --warn-soft:#2a2018;
    --field:#0d2b41; --on-field:#dfe8ef; --on-field-soft:#7fa3bc; --field-line:#23445c;
    --s1:#3f5f75; --s2:#4f7995; --s3:#6b9ab8; --s4:#8fbcd8; --s5:#b4d6ec;
    --kind-pick:#19291e; --kind-pick-line:#5fae7b; --kind-table:#2b2c2e;
    --kind-guide:#16354b; --kind-guide-line:#5aaee6;
  }
}

:root{
  --tier-free:#6a564e; --tier-core:#112e96; --tier-structure:#6d16c5; --tier-roof:#951181; --tier-bim:#81140e;
}
@media (prefers-color-scheme: dark){
  :root{
  --tier-free:#c3bfb7; --tier-core:#83c3e6; --tier-structure:#daaeee; --tier-roof:#e582ab; --tier-bim:#e2a770;
  }
}

:root {
  --ink-soft: var(--soft);
  --ink-faint: var(--faint);
  --bg: var(--paper);
  --bg-soft: var(--plate);
  --rule: var(--line);

  --font-body: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t1: 11px; --t2: 13px; --t3: 16px; --t4: 20px; --t5: 25px; --t6: 40px;
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px; --sp5: 24px; --sp6: 32px;
  --sp7: 48px; --sp8: 64px; --sp9: 96px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  --measure: 38rem;  --wide: 74rem;  --side: 224px;  --sheet: 1180px;  --pad: 1.5rem;
  --rhythm: 5rem;}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.7 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration: none; }

.skip { position: absolute; left: -999px; background: var(--bg); padding: .5rem .75rem; z-index: 10; }
.skip:focus { left: .5rem; top: .5rem; }

.site-head { border-bottom: 1px solid var(--rule); }
.head-in {
  max-width: var(--wide); margin: 0 auto; padding: 1.15rem var(--pad);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2rem;
}

.wordmark {
  font-family: var(--font-mono);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; color: var(--ink); white-space: nowrap;
}
.wordmark span { color: var(--ink-faint); }

.product-nav { display: flex; flex-wrap: wrap; gap: .35rem 1.35rem; font-size: .875rem; }
.product-nav a { text-decoration: none; color: var(--ink-soft); }
.product-nav a:hover { color: var(--ink); }
.product-nav .product-home { color: var(--ink); font-weight: 600; }
.product-nav .here { color: var(--accent); }

.content { max-width: var(--wide); margin: 0 auto; padding: 4rem var(--pad) 6rem; }
.content > * { max-width: var(--measure); }
.content > .full, .content > .split, .content > .grid, .content > .map-wrap,
.content > .combos, .content > .map-note, .content > .rib-wrap,
.content > .fm-wrap, .content > .fm-key, .content > .roadmap, .content > .tuts,
.content > section, .content > table, .content > pre, .content > figure { max-width: none; }

h1 {
  font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 300; letter-spacing: -.02em;
  line-height: 1.12; margin: 0 0 1.5rem;
}
h2 {
  font-size: 1.5rem; font-weight: 400; letter-spacing: -.01em; line-height: 1.25;
  margin: var(--rhythm) 0 1rem; padding-top: 1.6rem; border-top: 1px solid var(--rule);
}
h3 { font-size: 1.075rem; font-weight: 600; margin: 2.4rem 0 .5rem; }
h1 + p, h2 + p, h3 + p { margin-top: 0; }

h1 + p { font-size: 1.2rem; line-height: 1.6; color: var(--ink-soft); font-weight: 300; }

p, ul, ol { margin: 0 0 1.15rem; }
li { margin: .3rem 0; }
strong { font-weight: 600; }

.label {
  font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); margin: 0 0 .7rem;
}

blockquote {
  margin: 1.6rem 0; padding: .1rem 0 .1rem 1.2rem;
  border-left: 1px solid var(--rule); color: var(--ink-soft);
}

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--rhythm) 0; }
hr + h2 { border-top: 0; padding-top: 0; }

code { font: .875em/1.5 var(--font-mono); background: var(--bg-soft); padding: .12em .38em; border-radius: 2px; }
pre { background: var(--bg-soft); padding: 1.1rem 1.25rem; overflow-x: auto; border-radius: 2px; font-size: .9rem; }
pre code { background: none; padding: 0; }

table {
  display: block; width: fit-content; max-width: 100%; overflow-x: auto;
  border-collapse: collapse; font-size: .9rem; margin: 0 0 1.15rem;
}
th, td { border-bottom: 1px solid var(--rule); padding: .5rem .9rem .5rem 0; text-align: left; vertical-align: top; }
th { font-weight: 600; color: var(--ink-soft); }

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

.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem 3.5rem; align-items: start;
  margin: var(--rhythm) 0;
}
.split > .split-text { max-width: var(--measure); }
.split.flip > .split-text { order: 2; }
.split.flip > .fig { order: 1; }
.split h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.split h3 { margin-top: 0; }

figure.fig { margin: 0; }
figure.fig img { border: 1px solid var(--rule); }
figure.fig figcaption {
  font-size: .82rem; color: var(--ink-soft); margin-top: .7rem; line-height: 1.5;
}
.fig-wait {
  aspect-ratio: 3 / 2; border: 1px solid var(--rule); background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}

.carousel { position: relative; --car-gut: 44px; }
.car-pick { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.carousel .car-frame, .carousel .car-dots, .carousel figcaption { margin-left: var(--car-gut); margin-right: var(--car-gut); }
.car-frame { position: relative; }
.car-slides > *, .car-navs > *, .car-caps > * { display: none; }
.car-slide img, .car-slide .fig-wait {
  width: 100%; aspect-ratio: var(--car-ar, 3 / 2); object-fit: contain; background: var(--bg-soft);
}
.car-nav { position: absolute; inset: 0; pointer-events: none; }
.car-prev, .car-next {
  position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--soft); cursor: pointer; pointer-events: auto; transition: color 120ms ease;
}
.car-prev { left: calc(-1 * var(--car-gut)); }
.car-next { right: calc(-1 * var(--car-gut)); }
.car-prev svg, .car-next svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; }
.car-end { color: var(--line); cursor: default; }
@media (hover: hover) and (pointer: fine) {
  label.car-prev:hover, label.car-next:hover { color: var(--ink); }
}
.car-dots { display: flex; justify-content: center; gap: var(--sp1); margin-top: var(--sp2); }
.car-dot { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; cursor: pointer; }
.car-dot::before {
  content: ""; width: 9px; height: 9px; border: 1.5px solid var(--soft); border-radius: 50%;
}
.car-pick:nth-of-type(1):checked ~ .car-frame .car-slides > :nth-child(1),
.car-pick:nth-of-type(2):checked ~ .car-frame .car-slides > :nth-child(2),
.car-pick:nth-of-type(3):checked ~ .car-frame .car-slides > :nth-child(3),
.car-pick:nth-of-type(4):checked ~ .car-frame .car-slides > :nth-child(4),
.car-pick:nth-of-type(5):checked ~ .car-frame .car-slides > :nth-child(5),
.car-pick:nth-of-type(1):checked ~ .car-frame .car-navs > :nth-child(1),
.car-pick:nth-of-type(2):checked ~ .car-frame .car-navs > :nth-child(2),
.car-pick:nth-of-type(3):checked ~ .car-frame .car-navs > :nth-child(3),
.car-pick:nth-of-type(4):checked ~ .car-frame .car-navs > :nth-child(4),
.car-pick:nth-of-type(5):checked ~ .car-frame .car-navs > :nth-child(5),
.car-pick:nth-of-type(1):checked ~ .car-caps > :nth-child(1),
.car-pick:nth-of-type(2):checked ~ .car-caps > :nth-child(2),
.car-pick:nth-of-type(3):checked ~ .car-caps > :nth-child(3),
.car-pick:nth-of-type(4):checked ~ .car-caps > :nth-child(4),
.car-pick:nth-of-type(5):checked ~ .car-caps > :nth-child(5) { display: block; }
.car-pick:nth-of-type(1):checked ~ .car-dots > :nth-child(1)::before,
.car-pick:nth-of-type(2):checked ~ .car-dots > :nth-child(2)::before,
.car-pick:nth-of-type(3):checked ~ .car-dots > :nth-child(3)::before,
.car-pick:nth-of-type(4):checked ~ .car-dots > :nth-child(4)::before,
.car-pick:nth-of-type(5):checked ~ .car-dots > :nth-child(5)::before { background: var(--soft); }
.car-pick:nth-of-type(1):focus-visible ~ .car-dots > :nth-child(1),
.car-pick:nth-of-type(2):focus-visible ~ .car-dots > :nth-child(2),
.car-pick:nth-of-type(3):focus-visible ~ .car-dots > :nth-child(3),
.car-pick:nth-of-type(4):focus-visible ~ .car-dots > :nth-child(4),
.car-pick:nth-of-type(5):focus-visible ~ .car-dots > :nth-child(5) { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) {
  .car-dot { width: 44px; height: 44px; }
  .car-dots { gap: 0; }
}
@media (max-width: 46rem) {
  .carousel { --car-gut: 0px; }
  .car-dots { min-height: 44px; align-items: center; }
  .car-prev, .car-next { top: calc(100% + var(--sp2)); margin-top: 0; }
  .car-prev { left: 0; }
  .car-next { right: 0; }
}
@media print {
  .car-slides > *, .car-caps > * { display: block; margin-bottom: var(--sp4); }
  .car-navs, .car-dots { display: none; }
}

.zoom, .zoom-shut {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: zoom-in;
}
.zoom img { display: block; width: 100%; height: auto; }
.zoom:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.zoom-pop {
  margin: auto; padding: 0; border: 0; background: transparent; overflow: visible;
  max-width: 96vw; max-height: 96vh;
}
.zoom-pop::backdrop { background: rgb(12 15 20 / .86); }
.zoom-shut { cursor: zoom-out; }
.fig .zoom-pop img {
  display: block; width: auto; height: auto; max-width: 96vw; max-height: 92vh;
  aspect-ratio: auto; object-fit: contain; border: 0; background: #fff;
}
.zoom-pop:popover-open { opacity: 1; transform: none; transition: opacity 180ms cubic-bezier(.23,1,.32,1), transform 180ms cubic-bezier(.23,1,.32,1); }
@starting-style { .zoom-pop:popover-open { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) {
  .zoom-pop:popover-open { transition: opacity 180ms ease; }
  @starting-style { .zoom-pop:popover-open { transform: none; } }
}
@media print { .zoom-pop { display: none; } }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 23rem)); gap: 2.5rem 2rem; margin: 2.5rem 0 var(--rhythm); }
.card { display: block; }
.card h3 { margin-top: 0; }
.card p { color: var(--ink-soft); font-size: .95rem; }
.card .fig-wait { aspect-ratio: 16 / 10; margin-bottom: 1rem; }
.card img {
  display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain;
  border: 1px solid var(--rule); background: var(--bg-soft); margin-bottom: 1rem;
}

.tuts { margin: var(--sp6) 0 var(--rhythm); }
.tut {
  display: grid; grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); gap: var(--sp6);
  align-items: start; padding: var(--sp6) 0; border-top: 1px solid var(--rule);
}
.tut-thumb { position: relative; display: block; }
.tut-thumb img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border: 1px solid var(--rule); background: var(--bg-soft); transition: border-color 120ms ease;
}
.tut-thumb:hover img, .tut-thumb:focus-visible img { border-color: var(--accent); }
.tut-len {
  position: absolute; right: var(--sp2); bottom: var(--sp2); padding: .15rem .45rem;
  background: var(--ink); color: var(--bg); font-size: .75rem; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.tut h2 { margin: 0 0 var(--sp3); padding-top: 0; border-top: 0; font-size: 1.35rem; }
.tut h2 a { color: var(--ink); text-decoration: none; }
.tut h2 a:hover { color: var(--accent); }
.tut-text > p { color: var(--ink-soft); max-width: var(--measure); }
.tut .nb { white-space: nowrap; }.tut-ch { list-style: none; padding: 0; margin: 0; columns: 2 14rem; column-gap: var(--sp5); font-size: .92rem; }
.tut-ch li { margin: 0 0 .35rem; break-inside: avoid; }
.tut-ch a { color: var(--ink-soft); text-decoration: none; }
.tut-ch a:hover { color: var(--accent); }
.tut-ch .at {
  display: inline-block; min-width: 3.2em; margin-right: .5em;
  font-variant-numeric: tabular-nums; color: var(--ink-faint);
}
.tut-fine { font-size: .82rem; color: var(--ink-faint); max-width: var(--measure); }
@media (max-width: 46rem) {
  .tut { grid-template-columns: minmax(0, 1fr); gap: var(--sp4); }
}

.roadmap { margin: var(--sp6) 0; }
.rm { display: grid; grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1fr) var(--sp7) minmax(0, 1fr); }
.rm-v { background: var(--panel); border: 1px solid var(--line); padding: var(--sp4) var(--sp5) var(--sp5); }
.rm-v.is-now { border-color: var(--frame); }
.rm-head { display: flex; align-items: center; gap: var(--sp3); margin: 0 0 var(--sp3); }
.rm-when { font-size: var(--t1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.rm-v h3 { margin: 0 0 var(--sp2); font-size: var(--t4); font-weight: 400; }
.rm-v ul { margin: 0; padding-left: 1.1em; font-size: .95rem; line-height: 1.5; color: var(--soft); }
.rm-v li { margin: var(--sp1) 0; }
.rm-link { position: relative; display: flex; align-items: center; padding: 0 var(--sp2); }
.rm-arrow { position: relative; display: block; width: 100%; border-top: 1px solid var(--frame); }
.rm-arrow::after {
  content: ""; position: absolute; right: -1px; top: -5px;
  border-left: 7px solid var(--frame); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.rm-note {
  position: absolute; left: var(--sp2); right: var(--sp2); bottom: calc(50% + var(--sp2));
  font-size: var(--t2); line-height: 1.35; color: var(--soft); text-align: center;
}
.rm-fine { font-size: .85rem; color: var(--soft); }
@media (max-width: 46rem) {
  .rm { grid-template-columns: minmax(0, 1fr); }
  .rm-link { min-height: var(--sp8); padding: 0 0 0 var(--sp6); gap: var(--sp3); }
  .rm-arrow { width: 0; height: var(--sp6); border-top: 0; border-left: 1px solid var(--frame); }
  .rm-arrow::after {
    right: auto; top: auto; bottom: -1px; left: -5px;
    border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-top: 7px solid var(--frame); border-bottom: 0;
  }
  .rm-note { position: static; text-align: left; order: 2; }
}

.site-foot { border-top: 1px solid var(--rule); margin-top: var(--rhythm); }
.foot-in { max-width: var(--wide); margin: 0 auto; padding: 2rem var(--pad) 4rem; font-size: .85rem; color: var(--ink-soft); }
.foot-links { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; margin: 0 0 1rem; }
.foot-links a { text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.site-foot .mark { font-family: var(--font-mono); color: var(--ink-faint); margin: 0; }

@media (max-width: 46rem) {
  :root { --rhythm: 3.25rem; }
  .content { padding-top: 2.5rem; }
  .split { grid-template-columns: 1fr; gap: 1.5rem; }
  .split.flip > .split-text, .split.flip > .fig { order: 0; }
}

.map-wrap { margin: 2.5rem 0 var(--rhythm); overflow-x: auto; }
.map { width: 100%; min-width: 46rem; height: auto; display: block; }

.map-node { fill: var(--bg-soft); stroke: var(--rule); stroke-width: 1; transition: fill .12s; }
.map a:hover .map-node { fill: var(--bg); stroke: var(--accent); }
.map-aside { fill: none; stroke-dasharray: 3 3; }

.map text { font-family: var(--font-body); fill: var(--ink); }
.map-n { font-size: 12px; font-weight: 600; letter-spacing: .14em; fill: var(--ink-faint); }
.map-t { font-size: 17px; font-weight: 400; }
.map-c { font-size: 12px; fill: var(--ink-soft); }
.map a { text-decoration: none; }
.map a:hover .map-t { fill: var(--accent); }

.map-arrow { stroke: var(--ink-faint); stroke-width: 1; fill: none; }
.map-dash { stroke-dasharray: 3 3; }
.map-head { fill: var(--ink-faint); }

.map-e-main { stroke: var(--s4); stroke-width: 1.4; }
.map-e-back { stroke-dasharray: 4 3; stroke: var(--ink-faint); }
.map-e-aside { stroke-dasharray: 3 3; stroke: var(--ink-faint); opacity: .8; }
.map-note { font-size: .92rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 var(--rhythm); }

.rib-wrap { margin: 1.5rem 0 var(--rhythm); }
.rib { width: 100%; height: auto; display: block; }
.rib-plate { fill: var(--plate); stroke: var(--line); stroke-width: .5; }

.rib-band rect { fill: var(--accent); }
.rib-lead path { fill: none; stroke: var(--accent); stroke-width: 1.25; }

.rib-call rect { fill: var(--panel); stroke: var(--line); stroke-width: .5; }
.rib-call .rib-call-top { fill: var(--accent); stroke: none; }
.rib-name { font: 600 15px/1 var(--font-body); fill: var(--ink); }
.rib-count { font: 400 11.5px/1 var(--font-mono); fill: var(--faint); letter-spacing: .02em; }

.comp-list { font-size: .92rem; line-height: 2; color: var(--ink-faint); }
.comp-list a { text-decoration: none; color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.comp-list a:hover { color: var(--accent); border-bottom-color: currentColor; }

.content.wide > p, .content.wide > ul, .content.wide > ol { max-width: var(--measure); }

.content.full-page { max-width: 1520px; }
.content.full-page > p, .content.full-page > ul, .content.full-page > ol,
.content.full-page > h1, .content.full-page > h2 { max-width: var(--measure); }
.content.wide > .fm-key, .content.full-page > .fm-key { max-width: none; }

.content.sheet-page { max-width: 1520px; padding: var(--sp6) var(--sp5) var(--sp9); }
.content.sheet-page > * { max-width: none; }

.shell { display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: 0 var(--sp7); }
.shell > .col { min-width: 0; }

.side { padding: 0 0 var(--sp8); position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; }
.side h2 {
  font: 600 var(--t1)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 var(--sp3); padding: 0; border: 0;
}
.side-panel > summary {
  display: none; list-style: none; cursor: pointer; min-height: 44px;
  align-items: center; justify-content: space-between;
  font: 600 var(--t2)/1 var(--font-body); color: var(--ink);
}
.side-panel > summary::-webkit-details-marker { display: none; }
.side-panel > summary::after { content: "▾"; color: var(--faint); font-size: var(--t2); }
.side-panel[open] > summary::after { content: "▴"; }

.side-in details { border-top: .5px solid var(--line); }
.side-in details:last-of-type { border-bottom: .5px solid var(--line); }
.side-in summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp2); min-height: 36px;
  font: 600 var(--t2)/1.3 var(--font-body); color: var(--ink);
}
.side-in summary::-webkit-details-marker { display: none; }
.side-in summary i {
  font-style: normal; font: 400 var(--t1)/1 var(--font-mono); color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.side-in summary::after { content: "+"; font: 400 var(--t2)/1 var(--font-mono); color: var(--faint); }
.side-in details[open] summary::after { content: "–"; }
.side-in ul { margin: 0 0 var(--sp2); padding: 0 0 0 var(--sp3); list-style: none; }
.side-in li { margin: 0; }
.side-in li a {
  display: block; min-height: 32px; padding: var(--sp1) 0 var(--sp1) var(--sp3);
  font-size: var(--t2); line-height: 1.5; color: var(--soft); text-decoration: none;
  border-left: 2px solid transparent; transition: color 120ms ease, border-color 120ms ease;
}
.side-in li a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--accent); }

.rel-count { margin-top: var(--sp6); }
.rel-list { margin: 0 0 var(--sp7); border-bottom: .5px solid var(--line); }
.rel { border-top: .5px solid var(--line); }
.rel > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: var(--sp4);
  min-height: 44px; padding: var(--sp3) 0; color: var(--ink);
}
.rel > summary::-webkit-details-marker { display: none; }
.rel > summary::after {
  content: "+"; margin-left: auto; padding-left: var(--sp3);
  font: 400 var(--t3)/1 var(--font-mono); color: var(--faint);
}
.rel[open] > summary::after { content: "–"; }
.rel-v {
  flex: none; min-width: var(--sp9);
  font: 600 var(--t3)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--accent);
}
.rel-t { font-size: var(--t3); line-height: 1.4; }
.rel > summary:hover .rel-t { color: var(--accent); }
.rel-body { padding: 0 0 var(--sp5) calc(var(--sp9) + var(--sp4)); }
.rel-body > :last-child { margin-bottom: 0; }
.rel-date { font: 400 var(--t2)/1.4 var(--font-mono); color: var(--faint); margin: 0 0 var(--sp3); }
@media (max-width: 40rem) {
  .rel-v { min-width: var(--sp8); }
  .rel-body { padding-left: 0; }
}

.sheet { max-width: var(--sheet); background: var(--panel); border: 1.5px solid var(--frame); position: relative; }
.sheet::before { content: ""; position: absolute; inset: 7px; border: .5px solid var(--line); pointer-events: none; }
.sheet .inner { padding: var(--sp6) var(--sp7) 0; }

.sheet .crumb {
  font: 600 var(--t1)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); display: flex; gap: var(--sp2); align-items: center; flex-wrap: wrap;
  margin: 0;
}
.sheet .crumb a { color: var(--faint); text-decoration: none; transition: color 120ms ease; }

.sheet h1 {
  font-size: var(--t6); font-weight: 300; letter-spacing: -.022em; line-height: 1.05;
  margin: var(--sp4) 0 var(--sp1); text-wrap: balance;
}
.sheet .nick {
  font: 400 var(--t4)/1 var(--font-mono); color: var(--faint); margin-left: var(--sp2);
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.sheet .lede {
  font-size: var(--t4); line-height: 1.5; font-weight: 300; color: var(--soft);
  max-width: 46ch; margin: var(--sp3) 0 0; text-wrap: pretty;
}

.stages { display: flex; gap: 2px; margin: var(--sp6) 0 0; max-width: 640px; }
.stages div {
  flex: 1; padding: var(--sp2) 0 0; border-top: 5px solid var(--st, var(--line));
  font: 600 9.5px/1.35 var(--font-mono); letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
.stages div b {
  display: block; font: 400 var(--t2)/1.4 var(--font-body); letter-spacing: 0;
  text-transform: none; color: var(--faint);
}
.stages div.here, .stages div.here b { color: var(--ink); }
.stages div.here b { font-weight: 600; }

.tags { display: flex; flex-wrap: wrap; gap: var(--sp1); margin: var(--sp5) 0 0; }
.tag {
  font: 600 10.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .42em .62em; border: .5px solid var(--line); color: var(--soft); border-radius: 2px;
}
.tag.on { border-color: var(--tier, var(--accent)); background: var(--tier, var(--accent)); color: var(--panel); }

.plate {
  margin: var(--sp6) 0 0; padding: var(--sp5) var(--sp7);
  border-top: .5px solid var(--line); border-bottom: .5px solid var(--line);
  background: var(--plate); overflow-x: auto;
}
.plate-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--sp4); gap: var(--sp4); }
.plate-h b {
  font: 600 var(--t1)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint);
}
.diagram { position: relative; margin-left: auto; margin-right: auto; }
.diagram svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lead path { stroke: var(--line); stroke-width: 1; fill: none; }
.lead path.chain-in, .lead path.chain-out { stroke: var(--s3); stroke-width: 1.6; }
.tick circle { fill: var(--frame); }
.call {
  position: absolute; display: flex; flex-direction: column; justify-content: center;
  gap: 1px; padding: 0 var(--sp2); border: .5px solid var(--line); background: var(--panel);
}
.call.in { text-align: right; align-items: flex-end; }
.call > * { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call b { font: 600 12px/1.2 var(--font-body); }
.call b i { font-style: normal; font-family: var(--font-mono); color: var(--faint); font-weight: 400; }
.call span { font: 400 10.5px/1.2 var(--font-mono); color: var(--faint); letter-spacing: .02em; }
.call em {
  font: 400 11px/1.35 var(--font-body); font-style: normal; color: var(--soft);
  white-space: normal; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
}
.call.req { border-left: 2.5px solid var(--s3); }
.call.out.req { border-left: .5px solid var(--line); border-right: 2.5px solid var(--s3); }
.capsule {
  position: absolute; border: 1px solid var(--frame); background: var(--capsule);
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.capsule-img { position: absolute; display: block; image-rendering: auto; }
.capsule p {
  font: 600 10.5px/1.7 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint); margin: 0;
}
.capsule p em {
  font-style: normal; display: block; font-size: 9.5px; letter-spacing: .08em;
  text-transform: none; color: var(--faint); opacity: .75;
}
.plate-n { font: 400 var(--t2)/1.5 var(--font-mono); color: var(--faint); margin: var(--sp4) 0 0; max-width: none; }

.sheet .body { padding: 0 var(--sp7) var(--sp7); display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 0 var(--sp7); }
.sheet .body > * { grid-column: 1; }
.sheet .body h2 {
  font: 600 12px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin: var(--sp7) 0 var(--sp3); padding-top: var(--sp4);
  border-top: .5px solid var(--line);
}
.sheet .body p { margin: 0 0 var(--sp4); max-width: var(--measure); text-wrap: pretty; }

.ports { margin: 0; padding: 0; list-style: none; }
.ports li {
  display: grid; grid-template-columns: 118px 96px minmax(0, 1fr); gap: 0 var(--sp5);
  padding: var(--sp2) 0; border-bottom: .5px solid var(--line); align-items: baseline; margin: 0;
}
.ports li:first-child { border-top: .5px solid var(--line); }
.ports b { font: 600 var(--t2)/1.4 var(--font-body); }
.ports code { font: 400 11px/1.4 var(--font-mono); color: var(--soft); background: none; padding: 0; }
.ports li.chain code { color: var(--s3); font-weight: 600; }
.ports li.chain {
  margin-left: calc(-1 * (var(--sp4) + .5px)); margin-right: calc(-1 * (var(--sp4) + .5px));
  padding-left: var(--sp4); padding-right: var(--sp4);
}
.ports span, .ports .sum { font-size: 13.5px; color: var(--soft); line-height: 1.5; }
.ports span em { font-style: normal; color: var(--faint); }

.warn { margin: 0; padding: 0; list-style: none; }
.warn li {
  padding: var(--sp3) 0 var(--sp3) var(--sp5); border-bottom: .5px solid var(--line);
  position: relative; font-size: 14.5px; color: var(--soft); max-width: var(--measure); margin: 0;
}
.warn li::before { content: "!"; position: absolute; left: 0; top: var(--sp3); font: 600 12px/1.55 var(--font-mono); color: var(--warn); }

.sheet .body > .chain-box { grid-column: 2; grid-row: 1 / span 40; padding-top: var(--sp7); }
.chain { border: .5px solid var(--line); padding: var(--sp4) var(--sp4) var(--sp1); background: var(--plate); }
.chain h3 {
  font: 600 var(--t1)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 var(--sp3);
}
.chain a, .chain .self {
  display: block; text-decoration: none; color: var(--ink); font-size: 13.5px;
  padding: var(--sp2) 0; border-bottom: .5px solid var(--line); min-height: 32px;
  transition: color 120ms ease;
}
.chain .self { font-weight: 400; color: var(--soft); }
.chain a:last-child, .chain .self:last-child { border-bottom: 0; }
.chain a em, .chain .self em { font-style: normal; display: block; font: 400 10.5px/1.5 var(--font-mono); color: var(--faint); }
.chain .self em { font-family: var(--font-body); font-size: 11.5px; }
.chain .dir {
  font: 600 10.5px/1 var(--font-mono); color: var(--accent); letter-spacing: .1em;
}
.sheet .body .chain .dir { margin: var(--sp5) 0 var(--sp1); max-width: none; }
.sheet .body .chain h3 + .dir { margin-top: 0; }

.title-block {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1.5px solid var(--frame); background: var(--field); margin: 0;
}
.title-block div { padding: var(--sp3) var(--sp4) var(--sp4); border-right: .5px solid var(--field-line); }
.title-block div:last-child { border-right: 0; }
.title-block dt {
  font: 600 9.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-field-soft); margin: 0 0 var(--sp1);
}
.title-block dd {
  margin: 0; font: 400 var(--t2)/1.35 var(--font-mono); color: var(--on-field);
  font-variant-numeric: tabular-nums;
}
.title-block dd a { color: var(--on-field); text-decoration: none; border-bottom: .5px solid var(--field-line); }

@media (hover: hover) and (pointer: fine) {
  .sheet .crumb a:hover, .chain a:hover { color: var(--accent); }
  .side-in li a:hover { color: var(--ink); border-left-color: var(--line); }
  .side-in summary:hover { color: var(--accent); }
  .title-block dd a:hover { border-bottom-color: var(--on-field); }
}

@media (max-width: 76rem) {
  .shell { gap: 0 var(--sp5); }
  .sheet .body { grid-template-columns: 1fr; }
  .sheet .body > .chain-box { grid-column: 1; grid-row: auto; padding-top: var(--sp5); }
  .chain-box .chain {
    margin-left: calc(-1 * (var(--sp4) + .5px)); margin-right: calc(-1 * (var(--sp4) + .5px));
  }
}
@media (max-width: 60rem) {
  .shell { display: block; }
  .content.sheet-page { padding-left: var(--pad); padding-right: var(--pad); }
  .side { position: static; max-height: none; padding: var(--sp3) 0; border-bottom: .5px solid var(--line); }
  .side h2 { display: none; }
  .side-panel > summary { display: flex; }
  .side-panel { margin-bottom: var(--sp5); }
  .sheet .inner, .plate, .sheet .body { padding-left: var(--sp5); padding-right: var(--sp5); }
}
@media (max-width: 46rem) {
  .content.sheet-page { --sp7: 32px; --sp8: 40px; --t6: 32px; }
  .stages { max-width: none; }
  .stages div b { display: none; }
  .ports li { grid-template-columns: minmax(0, 1fr) 96px; gap: 0 var(--sp3); }
  .ports span, .ports .sum { grid-column: 1 / -1; }
}

.combos { margin: 1.5rem 0 var(--rhythm); border-top: 1px solid var(--rule); }
.combo { border-bottom: 1px solid var(--rule); }
.combo > summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline;
  justify-content: space-between; gap: 1rem; padding: .95rem 0; min-height: 44px;
}
.combo > summary::-webkit-details-marker { display: none; }
.combo > summary b { font-size: 1.0625rem; font-weight: 600; }
.combo > summary i {
  font-style: normal; font: 400 .78rem/1 var(--font-mono); color: var(--ink-faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.combo > summary::after { content: "+"; font: 400 1rem/1 var(--font-mono); color: var(--ink-faint); }
.combo[open] > summary::after { content: "–"; }
.combo-in { padding: 0 0 1.6rem; }
.combo-n { font-size: .95rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 1rem; max-width: var(--measure); }

.combo-plate { overflow-x: auto; background: var(--bg-soft); border: .5px solid var(--rule); padding: .6rem; }
.combo-plate svg { display: block; height: auto; }
.combo-wires path { fill: none; }
.cw-main { stroke: var(--s4); stroke-width: 1.5; }
.cw-skip { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 4 3; opacity: .75; }
.combo-node { fill: var(--panel); stroke: var(--frame); stroke-width: .8; transition: fill 120ms ease; }
.combo-tier { stroke: none; }
.combo-t { font: 400 12px/1 var(--font-body); fill: var(--ink); }
.combos a { text-decoration: none; }

@media (hover: hover) and (pointer: fine) {
  .combo > summary:hover b { color: var(--accent); }
  .combos a:hover .combo-node { fill: var(--bg); stroke: var(--accent); }
  .combos a:hover .combo-t { fill: var(--accent); }
}

.fm-wrap { margin: 1.8rem 0 1.4rem; }
.fm { width: 100%; height: auto; display: block; }

.fm-shape { transition: fill 120ms ease, stroke 120ms ease; }
.fm-t { font: 400 11px/1 var(--font-body); text-anchor: middle; fill: var(--ink); }
.fm-n { text-decoration: none; }

.fm-main .fm-shape { fill: var(--capsule); stroke: var(--frame); stroke-width: 1.4; }

.fm-alt .fm-shape { fill: var(--panel); stroke: var(--frame); stroke-width: 1.1; stroke-dasharray: 4 3; }
.fm-alt .fm-t { fill: var(--ink-soft); }

.fm-pick .fm-shape { fill: var(--panel); stroke: var(--s2); stroke-width: 1.4; }

.fm-table .fm-shape { fill: var(--bg-soft); stroke: var(--frame); stroke-width: 1; }

.fm-guide .fm-shape { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.fm-guide .fm-t { fill: var(--accent); }

.fm-wire { fill: none; stroke: var(--s3); stroke-width: 1.2; }
.fm-head { fill: var(--s3); }
.fm-swap { fill: none; stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 4; }

.fm-key {
  list-style: none; margin: 0 0 var(--rhythm); padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem 1.8rem;
  font-size: .86rem; color: var(--ink-soft);
}
.fm-key li { display: flex; align-items: center; gap: .5rem; }
.fm-key b { font-weight: 600; color: var(--ink); }
.fm-key-ic { width: 14px; height: 14px; flex: none; display: inline-block; }
.fm-key-main { background: var(--capsule); border: 1.4px solid var(--frame); border-radius: 50%; }
.fm-key-alt { background: var(--panel); border: 1px dashed var(--frame); transform: rotate(45deg); }
.fm-key-pick { background: var(--panel); border: 1.4px solid var(--s2); border-radius: 5px; }
.fm-key-table { background: var(--bg-soft); border: 1.2px solid var(--line); border-radius: 2px; }
.fm-key-guide { border: 1.5px solid var(--accent); border-radius: 50%; }
.fm-key-box { width: 20px; height: 20px; flex: none; display: inline-block; overflow: visible; }
.fm-key-box .fm-shape { vector-effect: non-scaling-stroke; }

.fm-s-icon .fm-shape { fill: var(--panel); stroke: var(--frame); stroke-width: 1.2; }
.fm-s-icon .fm-alt .fm-shape { stroke-width: 1.6; stroke-dasharray: 5 3; }
.fm-s-icon .fm-pick .fm-shape  { fill: var(--kind-pick);  stroke: var(--kind-pick-line);  stroke-width: 1.6; }
.fm-s-icon .fm-guide .fm-shape { fill: var(--kind-guide); stroke: var(--kind-guide-line); stroke-width: 1.6; }
.fm-s-icon .fm-tab .fm-shape   { fill: var(--kind-table); }
.fm-s-icon .fm-t {
  fill: var(--ink); stroke: var(--bg); stroke-width: 1.8px;
  paint-order: stroke fill; stroke-linejoin: round;
}

@media (hover: hover) and (pointer: fine) {
  .fm-n:hover .fm-shape { stroke: var(--accent); stroke-width: 2; }
  .fm-n:hover .fm-t { fill: var(--accent); }
}