/* =============================================================================
   STASH — Docs page (method.html). Adds to stash.css, never redefines a token.
   Green rule (scripts/check-naming.sh rule 7): every selector below that touches
   var(--rate…) carries "rate" in its name. On paper green is a fill, never text.
   Figures animate once, when they are revealed (.is-in from stash-motion.js, or
   .is-play from stash-docs.js); reduced motion shows the final state.
   ============================================================================= */

/* ------------------------------------------------------------------ surfaces */
.fig--ink, .docs-plate__ink {
  --fg: var(--d1); --fg-2: var(--d2); --fg-3: var(--d3);
  --rule: var(--line-d); --rule-2: var(--line-d-2);
  --surface: var(--ink); --surface-2: var(--ink-2); --surface-3: var(--ink-3);
  --inv-bg: var(--paper); --inv-fg: var(--ink);
  color: var(--fg);
}

/* ------------------------------------------------------------------ hero */
.docs-hero {
  position: relative; overflow-x: clip;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 6vw, 5rem);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .043  0 0 0 0 .051  0 0 0 0 .047  .11 0 0 0 -.035'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  border-bottom: 1px solid var(--line);
}
.docs-hero::before { /* the plate-mark, as on the home page */
  content: ""; position: absolute; top: 10px; bottom: 10px; border: 1px solid var(--line); pointer-events: none;
  left: min(var(--gut), max(12px, calc((100% - var(--maxw)) / 2 + var(--gut) - 24px)));
  right: min(var(--gut), max(12px, calc((100% - var(--maxw)) / 2 + var(--gut) - 24px)));
}
.docs-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.docs-hero__copy { padding-left: clamp(0rem, 1.4vw, 1.1rem); }
.docs-hero__h { font-size: clamp(2.5rem, 5.2vw, 4.4rem); max-width: 12ch; }
.docs-hero__lede { margin-top: 1.2rem; max-width: 36rem; }
.docs-meta { margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line-2); max-width: 36rem; }
.docs-meta > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .25rem 1rem; padding: .7rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.docs-meta dt { font-stretch: 125%; font-weight: 600; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--t3); }
.docs-meta dd { margin: 0; font-size: .92rem; color: var(--t2); display: flex; flex-wrap: wrap; gap: .35rem; }
.docs-hero__ctas { margin-top: 1.6rem; }

/* the engraved plate of constants */
.docs-plate {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-panel);
  padding: clamp(1.2rem, 2.6vw, 1.9rem); box-shadow: var(--shadow-card);
}
.docs-plate::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line); border-radius: 16px; pointer-events: none; }
.docs-plate__rose { position: absolute; z-index: -1; right: -70px; top: -70px; width: 300px; height: 300px; opacity: .55; overflow: visible; }
.docs-plate__rose .eng { stroke-width: .45; }
.js .docs-plate__rose .rose-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .docs-plate.is-in .docs-plate__rose .rose-line { animation: docs-cut 2.4s var(--ease) forwards; animation-delay: calc(var(--d, 0) * 1s + .2s); }
@keyframes docs-cut { to { stroke-dashoffset: 0; } }
.docs-plate__head { display: flex; flex-direction: column; gap: .3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-2); }
.docs-plate__h { font-stretch: 86%; font-weight: 780; font-size: 1.45rem; line-height: 1.05; }
.docs-plate__k { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--t3); }
.docs-plate__grid { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.4rem; }
.pv { display: grid; grid-template-columns: minmax(5.4rem, auto) minmax(0, 1fr); gap: .8rem; align-items: center; padding: .72rem 0; border-bottom: 1px solid var(--line); }
.pv:nth-last-child(-n+2) { border-bottom: 0; }
.pv__v { margin: 0; font-stretch: 62%; font-weight: 880; font-size: 2.05rem; line-height: 1; letter-spacing: -.005em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv__v small { font-size: .5em; font-weight: 700; margin-left: .08em; }
.pv__l { margin: 0; font-size: .82rem; line-height: 1.3; color: var(--t2); min-width: 0; }
.pv__c { display: block; margin-top: .2rem; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--t3); }
.docs-plate__foot { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line-2); font-size: .85rem; line-height: 1.5; color: var(--t2); }

/* ------------------------------------------------------------------ document frame */
.docs-main { padding-block: clamp(2.5rem, 6vw, 4.5rem) var(--section-y); }
.doc { grid-template-columns: 14.5rem minmax(0, 1fr); }
.doc__body { max-width: none; }
.doc__body > .doc-sec > p, .doc__body > .doc-sec > .dot-list, .doc__body > .doc-sec > ul.files { max-width: 44rem; }
.doc__toc { padding-bottom: 1rem; }
.toc a { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline; }
.toc__n { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.toc a[aria-current="true"] .toc__n { color: var(--fg); }
.toc-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; align-items: center; margin: 1rem 0 0 .9rem; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.toc-foot__bar { height: 2px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.toc-foot__bar b { display: block; height: 100%; background: var(--fg); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .3s var(--ease); }
.toc-sum__k { font-stretch: 125%; font-weight: 600; font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); flex: none; }
.toc-sum__cur { flex: 1; min-width: 0; font-weight: 650; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-sum__chev { flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--fg); border-bottom: 1.5px solid var(--fg); transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.doc__toc[open] .toc-sum__chev { transform: translateY(2px) rotate(-135deg); }

/* sections */
.doc-sec { position: relative; padding-top: clamp(2.8rem, 5vw, 4rem); margin-top: clamp(2.8rem, 5vw, 4rem); border-top: 1px solid var(--line-2); scroll-margin-top: calc(var(--hdr-h) + 1rem); }
.doc-sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc-sec__n { display: inline-flex; align-items: center; gap: .6rem; font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.doc-sec__n::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.doc__body .doc-sec h2 { margin: .8rem 0 1.1rem; font-size: clamp(1.8rem, 3.2vw, 2.55rem); max-width: 22ch; text-wrap: balance; }
.doc__body .doc-sec h3 { text-wrap: balance; }
.h2-mono { font-family: var(--f-mono); font-weight: 500; font-size: .66em; letter-spacing: -.02em; overflow-wrap: anywhere; }
.doc__body p b { color: var(--fg); font-weight: 600; }

/* big-number strip under a section head */
.doc-keys { margin: 1.6rem 0 1.8rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule); }
.doc-keys > div { padding: 1rem 1rem 1rem 0; min-width: 0; }
.doc-keys > div + div { padding-left: 1rem; border-left: 1px solid var(--rule); }
.doc-keys dt { font-stretch: 62%; font-weight: 880; font-size: 2.4rem; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.doc-keys dt.mono { font-family: var(--f-mono); font-stretch: 100%; font-weight: 500; font-size: 1.15rem; line-height: 2.1rem; }
.doc-keys dd { margin: .45rem 0 0; font-size: .85rem; line-height: 1.4; color: var(--fg-2); }
.doc-keys dd .mono { font-size: .8rem; }

.files { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.files li { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: .3rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.files li > span:first-child { justify-self: start; }
.files li > span:last-child { font-size: .95rem; color: var(--fg-2); }

.doc-sig { margin: 1.2rem 0 1.4rem; }
.doc-sig code { font-size: .86rem; padding: .8rem 1rem; background: var(--paper-2); }
.doc-sig .sig__sel { line-height: 1.55; }
.doc-formula { margin: 1.3rem 0 1.5rem; padding: 1.1rem 1.2rem; border: 1px solid var(--rule-2); border-radius: var(--r-card); background: var(--paper-2); }
.doc-formula code { font-size: .84rem; }
.doc-callout { margin: 2rem 0 0; }
.doc-callout > p + p, .doc-callout > p + .scroller, .doc-callout > .scroller + p, .doc-callout .vbars + p { margin-top: .8rem; }
.doc-callout .callout__title { margin-bottom: .7rem; }
.doc-callout p { color: var(--fg-2); }
.doc-note { margin-top: 1.4rem; padding: 1rem 1.15rem; border: 1px dashed var(--rule-2); border-radius: var(--r-card); }
.doc-note .prov { display: block; }
.doc-list { margin-top: 1.4rem; }

/* ------------------------------------------------------------------ figure shell */
.fig { position: relative; margin: 1.8rem 0 1.4rem; padding: clamp(1rem, 2.4vw, 1.6rem); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-panel); }
.fig--ink { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-panel); }
.fig--ink::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--line-d); border-radius: 17px; pointer-events: none; }
.fig__head { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1.1rem; }
.fig__t { font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg); line-height: 1.4; }
.fig__t .mono { text-transform: none; letter-spacing: 0; font-stretch: 100%; }
.fig__k { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); }
.fig__btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--rule-2); border-radius: var(--r-pill); background: transparent; cursor: pointer; font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg-2); }
.fig__btn::before { content: "\21BB"; font-size: 1rem; line-height: 1; }
.fig__btn:hover { color: var(--fg); border-color: var(--fg); }
.fig__cap { position: relative; margin-top: 1.1rem; padding-top: .8rem; border-top: 1px solid var(--rule); font-family: var(--f-mono); font-size: var(--fs-mono-s); line-height: 1.55; color: var(--fg-3); }
.fig__cap .prov { display: block; margin-top: .3rem; }
.fig__cap .code { font-size: .9em; }
.illus-chip--ink { background: var(--ink); }
.fig .illus-chip { flex: none; }

/* ------------------------------------------------------------------ 01 · effect table */
.fx-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.fx-table th, .fx-table td { padding: .75rem .6rem; border-bottom: 1px solid var(--rule); text-align: center; vertical-align: middle; }
.fx-table thead th { font-weight: 500; font-size: var(--fs-mono-xs); color: var(--fg); border-bottom-color: var(--rule-2); padding-top: 0; }
.fx-table thead th .mono { font-size: .72rem; }
.fx-table thead th small { display: block; margin-top: .15rem; font-stretch: 125%; font-weight: 600; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.fx-table th[scope="row"], .fx-table thead th:first-child { text-align: left; padding-left: 0; }
.fx-table th[scope="row"] { font-weight: 600; font-size: .92rem; color: var(--fg); white-space: nowrap; }
.fx-table thead th:last-child, .fx-table td:last-child { text-align: left; }
.fx-table tbody tr:last-child > * { border-bottom: 0; }
.fx-a { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule-2); font-style: normal; font-family: var(--f-mono); font-size: .8rem; color: var(--fg); }
.fx-a--eq { border-style: dashed; color: var(--fg-3); }
.fx-r { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-2); white-space: nowrap; }
.fx-r svg { width: 64px; height: 20px; flex: none; overflow: visible; }
.fx-r--up { color: var(--fg); }
.fx-flat { fill: none; stroke: var(--fg-3); stroke-width: 1.5; stroke-dasharray: 3 3; }
.fx-dot { fill: var(--fg); }
.rate-fx-line { fill: none; stroke: var(--rate); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.js .fx-table tbody tr { opacity: 0; transform: translateX(-8px); }
.js .fx.is-in .fx-table tbody tr { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 120ms + 150ms); }
.js .fx .rate-fx-line { stroke-dasharray: 120; stroke-dashoffset: 120; }
.js .fx.is-in .rate-fx-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease) 1s; }

/* ------------------------------------------------------------------ 02 · accounting board */
.acct__tabs { margin-bottom: 1.3rem; }
.acct__tabs .tab { min-height: 44px; height: auto; }
.acct__board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.acct__row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) minmax(10.5rem, max-content); gap: 1rem; align-items: center; }
.acct__k { font-size: .85rem; color: var(--fg-2); line-height: 1.35; }
.acct__k .mono { display: block; color: var(--fg); font-size: .8rem; }
.acct__v { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct__bar { position: relative; display: flex; height: 40px; border-radius: 8px; background: var(--paper); border: 1px solid var(--rule-2); overflow: hidden; }
.acct__seg { display: block; height: 100%; width: 0; transition: width .9s var(--ease); }
.acct__seg--count { background: var(--ink); }
.rate-acct-lock { background: repeating-linear-gradient(-45deg, var(--rate) 0 5px, var(--rate-40) 5px 9px); box-shadow: inset 1px 0 0 var(--ink); }
.acct__bar--sup { background: transparent; }
.acct__seg--sup { width: 80.16%; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 7px); opacity: .55; }
.acct__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; padding: .2rem 0 .2rem 12rem; font-size: .85rem; color: var(--fg-2); }
.acct__legend p { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.acct__legend b { font-family: var(--f-mono); font-weight: 500; font-size: var(--fs-mono-s); color: var(--fg); }
.acct__sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; flex: none; border: 1px solid var(--ink); }
.acct__sw--count { background: var(--ink); }
.rate-acct-sw { background: repeating-linear-gradient(-45deg, var(--rate) 0 3px, var(--rate-40) 3px 5px); }
.acct__sw--inv { background: var(--paper); border-style: dashed; }
.acct__rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-stretch: 125%; font-weight: 600; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.rate-acct-rate { font-family: var(--f-mono); font-stretch: 100%; font-weight: 500; font-size: 1.5rem; letter-spacing: 0; text-transform: none; color: var(--ink); background: var(--rate); padding: .1rem .5rem; border-radius: 5px; font-variant-numeric: tabular-nums; }
.acct__rate span { font-family: var(--f-display); font-stretch: 100%; font-weight: 400; font-size: .9rem; letter-spacing: 0; text-transform: none; color: var(--fg-2); }

.dec { margin: 1rem 0 1.2rem; display: grid; gap: .5rem; padding: 1rem 1.2rem; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--paper-2); max-width: 32rem; }
.dec__row { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 1rem; align-items: center; }
.dec__k { font-size: .85rem; color: var(--fg-2); }
.dec__v { font-size: 1.35rem; color: var(--fg); letter-spacing: .06em; }
.dec__x { display: inline-block; margin-left: 2px; padding: 0 .15em; border-radius: 4px; border: 1px dashed var(--ink); background: var(--paper); }
.js .dec .dec__x { opacity: 0; transform: translateX(-10px); }
.js .dec.is-in .dec__x { opacity: 1; transform: none; transition: opacity .6s var(--ease) .5s, transform .6s var(--ease) .5s; }

/* ------------------------------------------------------------------ 03 · formula */
.fml__eq { position: relative; display: grid; justify-items: center; gap: .55rem; padding: 1.4rem .5rem 1.2rem; font-family: var(--f-mono); color: var(--fg); overflow-x: auto; }
.fml__num, .fml__den { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .35rem .5rem; font-size: clamp(.95rem, 1.9vw, 1.35rem); }
.fml__bar { width: min(100%, 34rem); height: 1.5px; background: var(--fg); transform-origin: 50% 50%; }
.fml__op, .fml__par { color: var(--fg-3); }
.fml__t { position: relative; padding: .15rem .35rem; border-radius: 6px; border: 1px solid transparent; transition: background-color .25s, border-color .25s; cursor: default; }
.fml__t sup { margin-left: .15rem; font-size: .55em; color: var(--fg-3); }
.fml__t.is-hot, .fml__t:hover { border-color: var(--line-d-2); background: var(--ink-3); }
.fml__legend { list-style: none; margin: .5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.6rem; counter-reset: fml; }
.fml__legend li { position: relative; padding: .35rem .5rem .35rem 2rem; border-radius: 8px; font-size: .88rem; line-height: 1.45; color: var(--fg-2); counter-increment: fml; transition: background-color .25s; }
.fml__legend li::before { content: counter(fml); position: absolute; left: .4rem; top: .45rem; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--rule-2); font-family: var(--f-mono); font-size: .66rem; color: var(--fg); }
.fml__legend li b { color: var(--fg); font-weight: 600; font-family: var(--f-mono); font-size: .82rem; }
.fml__legend li.is-hot { background: var(--ink-3); }
.fml__work { margin-top: 1.2rem; display: grid; gap: .5rem; }
.fml__work p { display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: baseline; padding: .7rem .9rem; border-radius: 10px; background: var(--ink-2); border: 1px solid var(--line-d); }
.fml__work .mono { font-size: var(--fs-mono-xs); color: var(--fg-2); overflow-wrap: anywhere; }
.fml__lab { font-stretch: 125%; font-weight: 600; font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.fml__res { font-family: var(--f-mono); font-weight: 500; font-size: 1.15rem; color: var(--fg); font-variant-numeric: tabular-nums; }
.rate-fml-res { color: var(--rate); }
.js .fml .fml__t, .js .fml .fml__op, .js .fml .fml__par { opacity: 0; transform: translateY(6px); }
.js .fml .fml__bar { transform: scaleX(0); }
.js .fml.is-in .fml__t, .js .fml.is-in .fml__op, .js .fml.is-in .fml__par { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .fml.is-in .fml__bar { transform: scaleX(1); transition: transform .8s var(--ease) .1s; }
.js .fml.is-in .fml__num > :nth-child(1) { transition-delay: .3s; } .js .fml.is-in .fml__num > :nth-child(2) { transition-delay: .4s; }
.js .fml.is-in .fml__num > :nth-child(3) { transition-delay: .5s; } .js .fml.is-in .fml__num > :nth-child(4) { transition-delay: .6s; }
.js .fml.is-in .fml__num > :nth-child(5) { transition-delay: .7s; } .js .fml.is-in .fml__num > :nth-child(6) { transition-delay: .8s; }
.js .fml.is-in .fml__num > :nth-child(7) { transition-delay: .9s; } .js .fml.is-in .fml__num > :nth-child(8) { transition-delay: 1s; }
.js .fml.is-in .fml__den > :nth-child(1) { transition-delay: 1.15s; } .js .fml.is-in .fml__den > :nth-child(2) { transition-delay: 1.25s; }
.js .fml.is-in .fml__den > :nth-child(3) { transition-delay: 1.35s; }

/* ------------------------------------------------------------------ call ladders */
.ladder { position: relative; list-style: none; margin: 1.6rem 0 1.6rem; padding: 0; display: grid; gap: 0; }
.ladder::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 1.5px; background: var(--rule-2); }
.ladder::after { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 1.5px; background: var(--ink); transform-origin: 50% 0; transform: scaleY(var(--lad, 1)); }
.js .ladder::after { transform: scaleY(0); }
.js .ladder.is-in::after { transform: scaleY(1); transition: transform 2.2s var(--ease-io) .2s; }
.ladder li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 15.5rem; gap: .4rem 1.2rem; align-items: center; padding: .7rem 0 .7rem 44px; border-bottom: 1px solid var(--rule); }
.ladder li:last-child { border-bottom: 0; }
.ladder li::before { content: ""; position: absolute; left: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px; box-sizing: border-box; background: var(--paper); border: 1.5px solid var(--ink); z-index: 1; }
.ladder li[data-kind="check"]::before { transform: rotate(45deg) scale(.82); border-radius: 2px; }
.ladder li[data-kind="act"]::before { border-radius: 50%; background: var(--ink); }
.ladder li[data-kind="done"]::before { border-radius: 4px; background: var(--ink); width: 18px; height: 18px; left: 5px; margin-top: -9px; box-shadow: 0 0 0 4px var(--paper-2); }
.js .ladder li { opacity: .25; }
.js .ladder.is-in li { opacity: 1; transition: opacity .5s var(--ease); transition-delay: calc(var(--i) * 210ms + 250ms); }
.ladder__what { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: baseline; }
.ladder__what p { font-size: .95rem; line-height: 1.45; color: var(--fg-2); }
.ladder__what b { color: var(--fg); font-weight: 600; }
.ladder__src { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); white-space: nowrap; }
.ladder__out { display: flex; flex-direction: column; gap: .1rem; padding: .45rem .7rem; border: 1px dashed var(--rule-2); border-radius: 8px; font-family: var(--f-mono); font-size: var(--fs-mono-xs); line-height: 1.4; color: var(--fg-3); min-width: 0; }
.ladder__out code { color: var(--fg); font-size: .74rem; overflow-wrap: anywhere; }
.ladder__out code::before { content: "revert "; color: var(--fg-3); }
.ladder__out--act { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 500; font-size: .72rem; }

/* ------------------------------------------------------------------ throttle ruler + setting dials */
.ruler__track { position: relative; height: 10px; margin: 3.4rem .4rem 3.6rem; border-radius: 5px; background: var(--paper); border: 1px solid var(--rule-2); }
.ruler__range { position: absolute; top: -1px; bottom: -1px; left: var(--a); width: calc(var(--b) - var(--a)); background: var(--ink); border-radius: 5px 0 0 5px; transform-origin: 0 50%; }
.ruler__range--cond { background: repeating-linear-gradient(90deg, var(--ink) 0 6px, transparent 6px 10px); border-radius: 0 5px 5px 0; opacity: .7; }
.js .ruler .ruler__range { transform: scaleX(0); }
.js .ruler.is-in .ruler__range { transform: scaleX(1); transition: transform 1s var(--ease) .2s; }
.js .ruler.is-in .ruler__range--cond { transition-delay: 1.1s; }
.ruler__wall, .ruler__mark, .ruler__ceil { position: absolute; left: var(--x); display: block; font-family: var(--f-mono); font-size: var(--fs-mono-xs); line-height: 1.3; color: var(--fg-2); white-space: nowrap; }
.ruler__wall b, .ruler__mark b, .ruler__ceil b { display: block; font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg); }
.ruler__wall::before, .ruler__mark::before, .ruler__ceil::before { content: ""; position: absolute; left: 0; width: 1.5px; background: var(--ink); }
.ruler__wall { top: 18px; padding-left: 7px; }
.ruler__wall::before { top: -24px; height: 42px; width: 3px; left: -1.5px; }
.ruler__wall--r { padding-left: 0; padding-right: 7px; text-align: right; transform: translateX(-100%); }
.ruler__wall--r::before { left: auto; right: -1.5px; }
.ruler__mark { bottom: 18px; padding-left: 7px; }
.ruler__mark::before { bottom: -18px; height: 30px; }
.ruler__mark::after { content: ""; position: absolute; left: -5px; bottom: -14px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.ruler__ceil { bottom: 18px; padding-right: 7px; text-align: right; transform: translateX(-100%); }
.ruler__ceil::before { left: auto; right: 0; bottom: -18px; height: 30px; border-right: 1.5px dashed var(--ink); width: 0; background: none; }
.ruler__axis, .dials__axis { position: relative; height: 1.2rem; margin: 0 .4rem; border-top: 1px solid var(--rule); }
.ruler__axis span, .dials__axis span { position: absolute; left: var(--x); top: .3rem; transform: translateX(-50%); font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); white-space: nowrap; }
.ruler__axis span:first-child, .dials__axis span:first-child { transform: none; }
.ruler__axis span:last-child, .dials__axis span:last-child { transform: translateX(-100%); }

.dials__group + .dials__group { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.dials__g { font-stretch: 125%; font-weight: 600; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); margin-bottom: .6rem; }
.dial { display: grid; grid-template-columns: 11rem minmax(0, 1fr) minmax(11.5rem, max-content); gap: .4rem 1rem; align-items: center; padding: .55rem 0; }
.dial__k { font-weight: 600; font-size: .92rem; color: var(--fg); line-height: 1.25; }
.dial__k span { display: block; font-weight: 400; font-size: .78rem; color: var(--fg-3); }
.dial__track { position: relative; height: 12px; margin: 0 .4rem; border-radius: 6px; background: var(--paper); border: 1px solid var(--rule); }
.dial__range { position: absolute; top: -1px; bottom: -1px; left: var(--a); width: calc(var(--b) - var(--a)); background: var(--ink); border-radius: 6px; transform-origin: 0 50%; }
.dial__range--cond { left: var(--b); width: calc(var(--c) - var(--b)); background: repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 9px); opacity: .6; }
.dial__def { position: absolute; left: var(--d); top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 0 0 0 2px var(--paper-2); }
.dial__wall { position: absolute; left: var(--b); top: -7px; bottom: -7px; width: 3px; margin-left: -1.5px; background: var(--ink); border-radius: 1px; }
.dial__wall--a { left: var(--a); }
.dial__wall--c { left: var(--c); }
.dial__v { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); white-space: nowrap; }
.dial__v b { font-family: var(--f-mono); font-weight: 600; font-size: .8rem; color: var(--fg); }
.dials__axis { margin-left: calc(12rem + .4rem); margin-right: calc(12.5rem + .4rem); }
.js .dials .dial__range { transform: scaleX(0); }
.js .dials .dial__def { opacity: 0; transform: scale(.4); }
.js .dials.is-in .dial__range { transform: scaleX(1); transition: transform .9s var(--ease) .15s; }
.js .dials.is-in .dial__def { opacity: 1; transform: none; transition: opacity .4s var(--ease) .9s, transform .4s var(--ease) .9s; }

/* ------------------------------------------------------------------ 06 · price floor band */
.band__stage { position: relative; }
.band__track { position: relative; height: 56px; margin: 5.4rem .4rem 5rem; border-radius: 8px; border: 1px solid var(--rule-2); background: var(--paper); }
.band__zone { position: absolute; top: 0; bottom: 0; left: var(--a); width: calc(var(--b) - var(--a)); background: repeating-linear-gradient(-45deg, var(--line-2) 0 1.5px, transparent 1.5px 7px); border-left: 0; }
.band__below { position: absolute; top: 0; bottom: 0; left: 0; width: var(--b); background: var(--paper-3); border-radius: 7px 0 0 7px; }
.band__below::after { content: "refused"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-stretch: 125%; font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.band__avg, .band__floor, .band__ghost, .band__spot { position: absolute; left: var(--x); top: 0; bottom: 0; display: block; }
.band__avg::before, .band__floor::before, .band__ghost::before, .band__spot::before { content: ""; position: absolute; left: -1px; }
.band__avg::before { top: -84px; bottom: 0; border-left: 1.5px dashed var(--ink); }
.band__floor::before { top: -70px; bottom: -8px; width: 3px; left: -1.5px; background: var(--ink); }
.band__ghost::before { top: 0; bottom: -58px; border-left: 1.5px dotted var(--ink); opacity: .7; }
.band__spot::before { top: -6px; bottom: -22px; width: 2px; background: var(--ink); }
.band__spot::after { content: ""; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--paper-2); }
.band__avg i, .band__floor i, .band__ghost i, .band__spot i { display: block; font-style: normal; font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-2); white-space: nowrap; }
.band__floor b, .band__ghost b, .band__spot b { display: block; font-family: var(--f-mono); font-weight: 600; font-size: .95rem; color: var(--fg); white-space: nowrap; }
.band__avg { z-index: 1; }
.band__avg > i { position: absolute; bottom: calc(100% + 70px); right: 7px; }
.band__floor > b, .band__floor > i { position: absolute; right: 8px; }
.band__floor > b { bottom: calc(100% + 52px); }
.band__floor > i { bottom: calc(100% + 36px); }
.band__ghost > b, .band__ghost > i { position: absolute; right: 7px; }
.band__ghost > b { top: calc(100% + 26px); }
.band__ghost > i { top: calc(100% + 44px); }
.band__spot { left: var(--sx, 13.11%); z-index: 2; transition: left 1.6s var(--ease-io); }
.band__spot > b, .band__spot > i { position: absolute; left: 12px; }
.band__spot > b { top: calc(100% + 6px); }
.band__spot > i { top: calc(100% + 24px); }
.band__spot.is-right > b, .band__spot.is-right > i { left: auto; right: 12px; text-align: right; }
.band__stage[data-phase="before"] .band__ghost { opacity: 0; }
.band__ghost { transition: opacity .5s var(--ease); }
.band__axis { position: relative; height: 1.2rem; margin: -3.8rem .4rem 0; }
.band__axis span { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); white-space: nowrap; }
.band__axis span:first-child { transform: none; } .band__axis span:last-child { transform: translateX(-100%); }
.band__verdict { margin-top: 2.8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; padding: .8rem 1rem; border-radius: 10px; border: 1px solid var(--rule-2); background: var(--paper); font-size: .92rem; color: var(--fg-2); min-height: 3.2rem; }
.band__verdict b { color: var(--fg); }
.band__stage[data-phase="after"] .band__verdict { border-color: var(--ink); border-left-width: 3px; }

.tiers td:last-child { white-space: nowrap; }
.tiers__bar { display: inline-block; vertical-align: middle; height: 9px; width: calc(var(--w) * 3.2rem); margin-right: .6rem; border-radius: 2px; background: repeating-linear-gradient(-45deg, var(--ink) 0 1.5px, transparent 1.5px 4px); border: 1px solid var(--ink); }

/* ------------------------------------------------------------------ 07 · vesting chart */
.vest__read { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line-d); border-radius: 12px; background: var(--ink-deep); margin-bottom: 1.1rem; }
/* a label may wrap to two lines; the value sits at the foot of its cell, so the row's values stay level */
.vest__read > div { padding: .7rem .9rem; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.vest__read > div + div { border-left: 1px solid var(--line-d); }
.vest__k { display: block; font-stretch: 125%; font-weight: 600; font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--d3); }
.vest__k .mono { text-transform: none; letter-spacing: 0; font-stretch: 100%; }
/* a readout is never cut or broken: "12,474.511185" is 13 mono characters, about 9.1 px a character
   per 1 px of font-size in Martian Mono, so the size follows the figure's width (cqi) and the cells go
   2 × 2 under 720 px of figure and one per row under 360 px. Four across, a cell's text box is
   W/4 - 24 px (W the figure's content width, .7rem sides), so 2.7cqi - 2.8px fits from W = 720 up
   with 4 px to spare and gives 19.1 px at 1440 (.9rem sides and 2.7cqi - 4px stopped at 17.9) */
.fig.vest { container: vest / inline-size; }
.vest__read > div { padding-inline: .7rem; }
.vest__read b { display: block; margin-top: .25rem; font-family: var(--f-mono); font-weight: 500; font-size: min(clamp(.95rem, 1.6vw, 1.2rem), 2.7cqi - 2.8px); color: var(--d1); font-variant-numeric: tabular-nums; white-space: nowrap; }
@container vest (max-width: 719.98px) {
  .vest__read > div { padding-inline: .9rem; }
  .vest__read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vest__read > div:nth-child(3) { border-left: 0; }
  .vest__read > div:nth-child(n+3) { border-top: 1px solid var(--line-d); }
  .vest__read b { font-size: min(.95rem, 5.4cqi - 4px); }
}
@container vest (max-width: 359.98px) {
  .vest__read { grid-template-columns: minmax(0, 1fr); }
  .vest__read > div + div { border-left: 0; border-top: 1px solid var(--line-d); }
  .vest__read > div { flex-flow: row wrap; align-items: baseline; gap: .1rem .8rem; }
  .vest__read b { flex: none; margin-top: 0; font-size: .95rem; }
}
/* no container queries (Safari < 16, Chrome < 105, Firefox < 110): the cqi size above is dropped and
   neither @container rule applies, which would leave four 64 px cells at 320; these browsers get the
   2 × 2 grid at every width, one per row at 400 px and below, at .95rem ("12,474.511185" is 138 px
   in Martian Mono, a 2 × 2 cell holds 154 px or more above 400 px) */
@supports not (container-type: inline-size) {
  .vest__read > div { padding-inline: .9rem; }
  .vest__read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vest__read > div:nth-child(3) { border-left: 0; }
  .vest__read > div:nth-child(n+3) { border-top: 1px solid var(--line-d); }
  .vest__read b { font-size: .95rem; }
  @media (max-width: 400px) {
    .vest__read { grid-template-columns: minmax(0, 1fr); }
    .vest__read > div + div { border-left: 0; border-top: 1px solid var(--line-d); }
    .vest__read > div { flex-flow: row wrap; align-items: baseline; gap: .1rem .8rem; }
    .vest__read b { flex: none; margin-top: 0; }
  }
}
.rate-vest-read { color: var(--rate) !important; }
.vest__chart { position: relative; height: clamp(230px, 28vw, 300px); margin: 2.2rem 0 2rem; }
.vest__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vest__chart svg * { vector-effect: non-scaling-stroke; }
.vest__grid { stroke: var(--line-d); stroke-width: 1; }
.vest__ev { stroke: var(--line-d-2); stroke-width: 1; stroke-dasharray: 3 4; }
.vest__hatchline { stroke: var(--d3); stroke-width: 1.2; }
.vest__lock { stroke: none; opacity: .75; }
.rate-vest-area { fill: var(--rate-24); }
.vest__count { fill: none; stroke: var(--d1); stroke-width: 2.4; stroke-linejoin: round; }
.vest__raw { fill: none; stroke: var(--d2); stroke-width: 1.4; stroke-dasharray: 5 4; }
.rate-vest-pen { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--rate); box-shadow: 0 0 0 5px var(--rate-24); pointer-events: none; }
.vest__ylab { position: absolute; left: 0; transform: translateY(-130%); font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--d2); white-space: nowrap; background: var(--ink); padding-right: .4rem; }
.vest__tag { position: absolute; top: -1.9rem; transform: translateX(-2px); font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--d2); white-space: nowrap; padding-left: 7px; border-left: 1px solid var(--line-d-2); }
.vest__tag--r { transform: translateX(-100%); padding-left: 0; padding-right: 7px; border-left: 0; border-right: 1px solid var(--line-d-2); }
.vest__x { position: absolute; left: 0; right: 0; top: calc(100% + .45rem); height: 1rem; }
.vest__x span { position: absolute; transform: translateX(-50%); font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--d3); white-space: nowrap; }
.vest__x span:first-child { transform: none; }
.vest__scrub { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: center; margin-top: 2.2rem; }
.vest__scrub input { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: var(--paper); cursor: pointer; }
.vest__key { position: relative; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .8rem; font-size: .82rem; color: var(--d2); }
.vest__key > span { display: inline-flex; align-items: center; gap: .45rem; }
.vk { display: inline-block; width: 22px; height: 12px; flex: none; }
.vk--raw { border-top: 1.5px dashed var(--d2); height: 0; }
.vk--count { border-top: 2.5px solid var(--d1); height: 0; }
.vk--lock { background: repeating-linear-gradient(-45deg, var(--d3) 0 1.5px, transparent 1.5px 5px); border: 1px solid var(--line-d-2); }
.rate-vk { background: var(--rate-24); border: 1px solid var(--rate-60); }
.vest-table__cap { caption-side: top; text-align: left; padding: 0 0 .6rem; font-stretch: 125%; font-weight: 600; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.vest-table td:last-child { color: var(--fg); font-weight: 500; }

/* carry-over illustration */
.carry__svg { display: block; width: 100%; max-width: 640px; height: auto; margin: .2rem auto 0; overflow: visible; }
.carry__axis { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.carry__first, .carry__second { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.carry__old { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: .018 .018; opacity: .55; }
.carry__stack { fill: none; stroke: var(--ink); stroke-width: 3; stroke-dasharray: .06 .045; }
.carry__brace { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: .6; }
.carry__brace--new { opacity: 1; }
.carry__tick { stroke: var(--ink); stroke-width: 1.5; }
.carry__dot { fill: var(--ink); }
.carry__badge circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; }
.carry__badge text { font-family: var(--f-mono); font-size: 16px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.js .carry .carry__first, .js .carry .carry__second { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .carry .carry__stack, .js .carry .carry__old, .js .carry .carry__brace { opacity: 0; }
.js .carry .carry__badge { opacity: 0; }
.js .carry.is-in .carry__first { animation: docs-cut .9s var(--ease) .2s forwards; }
.js .carry.is-in .carry__stack { opacity: 1; transition: opacity .5s var(--ease) 1.1s; }
.js .carry.is-in .carry__brace { opacity: .6; transition: opacity .5s var(--ease) 1.3s; }
.js .carry.is-in .carry__brace--new { opacity: 1; }
.js .carry.is-in .carry__old { opacity: .55; transition: opacity .6s var(--ease) 1.5s; }
.js .carry.is-in .carry__second { animation: docs-cut 1.4s var(--ease) 1.6s forwards; }
.js .carry.is-in .carry__badge { opacity: 1; transition: opacity .4s var(--ease); transition-delay: calc(var(--i) * 180ms + 2.4s); }
.carry__key { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.6rem; }
.carry__key li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: .6rem; font-size: .88rem; line-height: 1.45; color: var(--fg-2); }
.carry__key li:last-child { grid-column: 1 / -1; }
.carry__key b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.4px solid var(--ink); font-family: var(--f-mono); font-size: .7rem; color: var(--fg); }

/* before / after bars in the "why it vests" callout */
.vbars { margin: 1.2rem 0; display: grid; gap: 1.2rem; }
.vbars__row { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .3rem 1rem; align-items: center; }
.vbars__k { font-weight: 600; font-size: .9rem; color: var(--fg); }
.vbars__bar { display: flex; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid var(--ink); background: var(--paper); }
.vbars__keeper { width: var(--w); min-width: 3px; background: repeating-linear-gradient(-45deg, var(--ink) 0 5px, rgba(11, 13, 12, .72) 5px 8px); transform-origin: 0 50%; }
.rate-vbars-rest { flex: 1; background: var(--rate); transform-origin: 0 50%; }
.vbars__v, .vbars__row .prov { grid-column: 2; }
.vbars__v { font-family: var(--f-mono); font-size: var(--fs-mono-s); color: var(--fg-2); }
.vbars__v b { font-size: 1.1rem; color: var(--fg); font-weight: 600; }
.vbars__row .prov { margin-top: 0; }
.js .vbars__keeper, .js .rate-vbars-rest { transform: scaleX(0); }
.js .doc-callout.is-in .vbars__keeper, .js .doc-callout.is-in .rate-vbars-rest { transform: scaleX(1); transition: transform 1.3s var(--ease) .3s; }
.js .doc-callout.is-in .rate-vbars-rest { transition-delay: .9s; }

/* ------------------------------------------------------------------ 09 · roles */
.roles { margin-top: 1.6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.role { min-width: 0; padding: clamp(1rem, 2vw, 1.3rem); border: 1px solid var(--rule-2); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-card); }
.role:first-child { grid-row: span 2; }
.role--factory { grid-column: 1 / -1; background: var(--paper-2); box-shadow: none; }
.role__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding-bottom: .8rem; border-bottom: 1px solid var(--rule); }
.role__head h3 { margin: 0 !important; font-size: 1.2rem; flex: 1; min-width: 6rem; }
.role__tag { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ink); color: var(--paper); font-stretch: 62%; font-weight: 900; font-size: 1.2rem; flex: none; }
.role__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: .8rem; }
.role:first-child .role__cols { grid-template-columns: minmax(0, 1fr); }
.role__k { font-stretch: 125%; font-weight: 600; font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); margin-bottom: .45rem; }
.role ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.role li { position: relative; padding-left: 1.3rem; font-size: .88rem; line-height: 1.45; color: var(--fg-2); }
.role__cols > div:first-child li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-size: .8rem; color: var(--fg); }
.role__cols > div:last-child li::before { content: "\00d7"; position: absolute; left: 0; top: -.05em; font-family: var(--f-mono); font-size: .95rem; color: var(--fg); }

/* ------------------------------------------------------------------ 10 · pause timeline */
.ptl__row { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .5rem 1rem; align-items: center; padding: .55rem 0; }
.ptl__k { font-weight: 600; font-size: .9rem; color: var(--fg); }
.ptl__bar { display: flex; height: 48px; border-radius: 8px; overflow: hidden; border: 1px solid var(--ink); background: var(--paper); }
.ptl__seg { position: relative; display: flex; align-items: center; width: var(--w); padding: 0 .55rem; min-width: 0; transform-origin: 0 50%; }
.ptl__seg + .ptl__seg { border-left: 1px solid var(--ink); }
.ptl__seg b { font-stretch: 112%; font-weight: 600; font-size: .72rem; line-height: 1.15; }
.ptl__seg--pause { background: var(--ink); color: var(--paper); }
.ptl__seg--cool { background: repeating-linear-gradient(-45deg, var(--paper-3) 0 5px, var(--paper) 5px 9px); color: var(--ink); }
.ptl__seg--free { color: var(--fg-2); }
.ptl__seg--gone { background: var(--paper-2); color: var(--fg-2); }
.ptl__seg--gone b::before { content: "\2190 "; }
.js .ptl .ptl__seg { opacity: 0; }
.js .ptl.is-in .ptl__seg { opacity: 1; transition: opacity .5s var(--ease); }
.js .ptl.is-in .ptl__seg:nth-child(2) { transition-delay: .5s; } .js .ptl.is-in .ptl__seg:nth-child(3) { transition-delay: 1s; } .js .ptl.is-in .ptl__seg:nth-child(4) { transition-delay: 1.5s; }
.pauses td:nth-child(2), .pauses td:nth-child(3) { font-family: var(--f-display); font-size: .88rem; }

/* ------------------------------------------------------------------ 11 · opening rules */
.doc-sources { margin-top: 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.doc-sources .source { align-content: start; }
.mini-sq { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, 14px); gap: 5px; margin-top: .7rem; }
.mini-sq i { width: 14px; height: 14px; border-radius: 3px; border: 1.2px solid var(--line-2); position: relative; }
.mini-sq i::after { content: ""; position: absolute; inset: 3px; border-radius: 1px; background: var(--ink); transform: scale(0); transition: transform .35s var(--ease); }
.is-in .mini-sq i::after { transform: scale(1); }
.mini-sq i:nth-child(1)::after { transition-delay: .30s; } .mini-sq i:nth-child(2)::after { transition-delay: .38s; } .mini-sq i:nth-child(3)::after { transition-delay: .46s; } .mini-sq i:nth-child(4)::after { transition-delay: .54s; } .mini-sq i:nth-child(5)::after { transition-delay: .62s; }
.mini-sq i:nth-child(6)::after { transition-delay: .70s; } .mini-sq i:nth-child(7)::after { transition-delay: .78s; } .mini-sq i:nth-child(8)::after { transition-delay: .86s; } .mini-sq i:nth-child(9)::after { transition-delay: .94s; } .mini-sq i:nth-child(10)::after { transition-delay: 1.02s; }
.mini-sq i:nth-child(11)::after { transition-delay: 1.10s; } .mini-sq i:nth-child(12)::after { transition-delay: 1.18s; } .mini-sq i:nth-child(13)::after { transition-delay: 1.26s; } .mini-sq i:nth-child(14)::after { transition-delay: 1.34s; } .mini-sq i:nth-child(15)::after { transition-delay: 1.42s; }
.mini-sq i:nth-child(16)::after { transition-delay: 1.50s; } .mini-sq i:nth-child(17)::after { transition-delay: 1.58s; } .mini-sq i:nth-child(18)::after { transition-delay: 1.66s; } .mini-sq i:nth-child(19)::after { transition-delay: 1.74s; } .mini-sq i:nth-child(20)::after { transition-delay: 1.82s; }

/* ------------------------------------------------------------------ 12 · ERC-4626 */
.dev td:nth-child(2) { font-family: var(--f-display); font-weight: 600; font-size: .85rem; color: var(--fg); white-space: nowrap; }
.dev td:nth-child(3) { font-family: var(--f-display); font-size: .88rem; }
.dev__no::before, .dev__add::before { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: .45rem; border-radius: 50%; font-family: var(--f-mono); font-size: .7rem; vertical-align: 1px; }
.dev__no::before { content: "\00d7"; border: 1px dashed var(--ink); }
.dev__add::before { content: "+"; background: var(--ink); color: var(--paper); }
.ledger td .code { white-space: nowrap; }

/* ------------------------------------------------------------------ 13 · reference */
.ref-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1rem; align-items: center; margin-top: 1.4rem; }
.ref-search input {
  width: 100%; height: 48px; padding: 0 1rem 0 2.6rem; border: 1px solid var(--rule-2); border-radius: var(--r-pill); background: var(--paper) no-repeat 1rem 50% / 16px 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='7' cy='7' r='5' fill='none' stroke='%230B0D0C' stroke-width='1.5'/><path d='M11 11l4 4' stroke='%230B0D0C' stroke-width='1.5'/></svg>");
  font-family: var(--f-mono); font-size: .82rem; color: var(--fg);
}
.ref-search input:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.ref-status { font-family: var(--f-mono); font-size: var(--fs-mono-xs); color: var(--fg-3); white-space: nowrap; }
.ref-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 .4rem; }
.ref-jump a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .85rem; border: 1px solid var(--rule); border-radius: var(--r-pill); text-decoration: none; font-size: .82rem; color: var(--fg-2); }
.ref-jump a:hover { color: var(--fg); border-color: var(--fg); }
.ref-block { margin-top: 1.8rem; scroll-margin-top: calc(var(--hdr-h) + 5rem); }
.ref-block[hidden] { display: none; }
.doc__body .ref-block__h { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; font-size: 1.1rem; }
.ref-count { display: inline-grid; place-items: center; min-width: 30px; height: 22px; padding: 0 .45rem; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-family: var(--f-mono); font-size: .68rem; font-weight: 500; }
.ref-scroll { max-height: 34rem; overflow: auto; border: 1px solid var(--rule); border-radius: var(--r-card); background: var(--paper); }
.ref-table { min-width: 640px; }
.ref-table th { position: sticky; top: 0; z-index: 1; background: var(--paper-2); padding: .65rem .8rem; }
.ref-table td { padding: .55rem .8rem; vertical-align: middle; }
.ref-table td:first-child { font-family: var(--f-mono); font-size: .74rem; font-weight: 400; }
.ref-table tr[hidden] { display: none; }
.ref-sig code { font-size: .74rem; color: var(--fg); overflow-wrap: anywhere; }
.ref-hex { font-size: .74rem; color: var(--fg); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; padding: .05rem .35rem; white-space: nowrap; }
.ref-hex--long { display: inline-block; white-space: normal; word-break: break-all; max-width: 23ch; font-size: .68rem; line-height: 1.45; }
.ref-note { font-family: var(--f-display) !important; font-size: .82rem !important; }
.ref-src { white-space: nowrap; color: var(--fg-3) !important; }
.ref-table tbody tr:hover td { background: var(--paper-2); }
.ref-table mark { background: var(--paper-3); color: inherit; border-radius: 2px; }

/* ------------------------------------------------------------------ 14 · chain */
.chain-card { margin: 1.4rem 0 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ink); border-radius: var(--r-card); background: var(--ink); color: var(--d1); overflow: hidden; }
.chain-card > div { padding: .8rem 1rem; min-width: 0; }
.chain-card > div + div { border-left: 1px solid var(--line-d); }
.chain-card__k { display: block; font-stretch: 125%; font-weight: 600; font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--d3); }
.chain-card b { display: block; margin-top: .25rem; font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.chain-card b.mono { font-weight: 500; font-size: .92rem; }
.chain-card a { color: inherit; }
.const-mount, .pools-mount { margin-top: 1rem; }
.const-table td:nth-child(2) a { word-break: break-all; }
.const-table .const-use { display: block; margin-top: .2rem; font-family: var(--f-display); font-weight: 400; font-size: .8rem; color: var(--fg-3); }
.const-table td:last-child { font-family: var(--f-display); font-size: .82rem; }
.const-group td { padding-top: 1.1rem; font-stretch: 125%; font-weight: 600 !important; font-size: .62rem !important; letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3) !important; font-family: var(--f-display) !important; }

/* ------------------------------------------------------------------ 15 · glossary */
.gloss { margin: 1.2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; border-top: 1px solid var(--rule-2); }
.gloss > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: .8rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.gloss dt { font-weight: 700; font-size: .92rem; color: var(--fg); }
.gloss dd { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--fg-2); }

/* ------------------------------------------------------------------ closing band */
.docs-end__head { max-width: 40rem; margin-bottom: 2rem; }
.docs-end__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.docs-end__card { display: flex; flex-direction: column; text-decoration: none; background: var(--ink-2); border-color: var(--line-d); min-height: 12rem; }
.docs-end__card:hover { border-color: var(--line-d-2); }
.docs-end__card .proof-link__arr { margin-top: auto; padding-top: 1rem; font-size: 1.2rem; transition: transform .3s var(--ease); }
.docs-end__card:hover .proof-link__arr { transform: translateX(4px); }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .docs-plate__grid { grid-template-columns: minmax(0, 1fr); }
  .pv:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .docs-hero__grid { align-items: start; }
}
@media (max-width: 1060px) {
  .docs-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .docs-hero__copy { padding-left: 0; }
  .docs-plate__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv:nth-last-child(2) { border-bottom: 0; }
  /* the table of contents becomes a sticky "On this page" sheet */
  .docs-main { padding-top: 0; }
  /* the rail column above is declared after stash.css, so it beats stash.css's own breakpoint: reset it */
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .doc__toc {
    position: sticky; top: var(--hdr-h); z-index: 40; max-height: none; overflow: visible;
    margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); border: 0; border-radius: 0;
    border-bottom: 1px solid var(--line-2); background: rgba(244, 239, 228, .94);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
  .doc__toc > summary { display: flex; align-items: center; gap: .8rem; min-height: 52px; list-style: none; }
  .doc__toc > summary::-webkit-details-marker { display: none; }
  .doc__toc > nav { max-height: min(62vh, 30rem); overflow-y: auto; overscroll-behavior: contain; padding: .2rem 0 .6rem; }
  .doc__toc .toc { border-left: 0; padding-left: 0; }
  .doc__toc .toc a { min-height: 44px; display: grid; align-items: center; border-top: 1px solid var(--rule); font-size: .98rem; }
  .doc__toc .toc a[aria-current="true"]::before { left: calc(-1 * var(--gut)); top: 0; bottom: 0; width: 3px; }
  .toc-foot { position: absolute; left: 0; right: 0; bottom: -1px; margin: 0; display: block; }
  .toc-foot > span:last-child { display: none; }
  .toc-foot__bar { display: block; height: 2px; border-radius: 0; background: transparent; }
  .doc__body { padding-top: 2rem; }
}
@media (max-width: 860px) {
  .acct__row { grid-template-columns: minmax(0, 1fr) auto; }
  .acct__bar { grid-column: 1 / -1; grid-row: 2; }
  .acct__legend { padding-left: 0; }
  .ladder li { grid-template-columns: minmax(0, 1fr); }
  .ladder__out { justify-self: start; }
  .dial { grid-template-columns: minmax(0, 1fr) auto; }
  .dial__track { grid-column: 1 / -1; grid-row: 2; margin: .4rem .4rem .2rem; }
  .dials__axis { margin-left: .4rem; margin-right: .4rem; }
  .fml__work p { grid-template-columns: minmax(0, 1fr) auto; }
  .fml__work .mono { grid-column: 1 / -1; grid-row: 2; }
  .roles { grid-template-columns: minmax(0, 1fr); }
  .role:first-child { grid-row: auto; }
  .role:first-child .role__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gloss { grid-template-columns: minmax(0, 1fr); }
  .docs-end__cards { grid-template-columns: minmax(0, 1fr); }
  .docs-end__card { min-height: 0; }
  .chain-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chain-card > div:nth-child(3) { border-left: 0; }
  .chain-card > div:nth-child(n+3) { border-top: 1px solid var(--line-d); }
}
@media (max-width: 640px) {
  .docs-plate__grid { grid-template-columns: minmax(0, 1fr); }
  .pv:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .pv { grid-template-columns: minmax(4.6rem, auto) minmax(0, 1fr); }
  .pv__v { font-size: 1.8rem; }
  .docs-plate__rose { width: 220px; height: 220px; right: -60px; top: -60px; }
  .docs-meta > div { grid-template-columns: minmax(0, 1fr); }
  .doc-keys { grid-template-columns: minmax(0, 1fr); }
  /* 6rem: in the fallback fonts (no 62% Archivo) "1,000" at 2rem is 91 px; it ran 3 px out of 5.5rem */
  .doc-keys > div, .doc-keys > div + div { padding: .8rem 0; border-left: 0; display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: center; }
  .doc-keys > div + div { border-top: 1px solid var(--rule); }
  .doc-keys dt { font-size: 2rem; }
  .doc-keys dt.mono { font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; }
  .doc-keys dd { margin: 0; }
  .files li { grid-template-columns: minmax(0, 1fr); }
  .fig { margin-inline: 0; padding: 1rem .9rem; border-radius: var(--r-card); }
  .fig--ink::before { inset: 4px; border-radius: 11px; }
  .role__cols, .role:first-child .role__cols { grid-template-columns: minmax(0, 1fr); }
  .ptl__row { grid-template-columns: minmax(0, 1fr); }
  .ptl__seg { padding: 0 .35rem; }
  .ptl__seg b { font-size: .6875rem; }
  .doc-sources { grid-template-columns: minmax(0, 1fr); }
  .carry__key { grid-template-columns: minmax(0, 1fr); }
  .vbars__row { grid-template-columns: minmax(0, 1fr); }
  .vbars__v, .vbars__row .prov { grid-column: 1; }
  .gloss > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .ref-tools { grid-template-columns: minmax(0, 1fr); }
  .dec__row { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .fml__legend { grid-template-columns: minmax(0, 1fr); }
  .fml__eq { justify-items: stretch; }
  .band__track { margin-inline: .2rem; }
  .vest__scrub { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ruler__track { margin-inline: .2rem; }
}
/* phones: the 6 h label no longer fits left of its line beside "120 s default": it rises above that
   label and wraps inside the track, so it neither covers it nor runs off the left edge */
@media (max-width: 640px) {
  .ruler__track { margin-top: 5.8rem; }
  .ruler__ceil { bottom: 52px; white-space: normal; width: max-content; max-width: var(--x); }
  .ruler__ceil::before { bottom: -52px; height: 64px; }
}
/* phones: a formula part too long for the line wraps at its spaces ("quoteAtTick(meanTick(pool," over
   "twapWindow), swapIn)"), as stash.css already lets it at 360 px and below */
@media (max-width: 520px) {
  .doc-formula code { min-width: 0; }
  .doc-formula code > span { white-space: normal; }
}
/* 360 px and below: "AdminTransferStarted" in the decoder callout is wider than the line in Martian
   Mono; a slightly smaller mono keeps every identifier whole on its line */
@media (max-width: 360px) {
  .doc-callout .mono { font-size: .9em; }
}
/* small phones: the amount goes under its label, the bar under both */
@media (max-width: 440px) {
  .acct__row { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .acct__bar { grid-row: 3; }
}
/* a source line such as "DEFAULT_MAX_SLIPPAGE_BPS · :74" has no break inside the name: one plate
   column up to 760 px, and where a cell is still too narrow beside its value (the two-column plate
   beside the hero copy, small phones) the value sits above its label */
@media (max-width: 760px) {
  .docs-plate__grid { grid-template-columns: minmax(0, 1fr); }
  .pv:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
@media (min-width: 1181px), (max-width: 400px) {
  .pv { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .fx-table tbody tr, .js .dec .dec__x, .js .fml .fml__t, .js .fml .fml__op, .js .fml .fml__par, .js .ladder li,
  .js .ptl .ptl__seg, .js .carry .carry__badge, .js .carry .carry__stack, .js .carry .carry__old { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .carry .carry__brace { opacity: .6 !important; transition: none !important; }
  .js .fx .rate-fx-line, .js .carry .carry__first, .js .carry .carry__second, .js .docs-plate__rose .rose-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; transition: none !important; }
  .js .carry .carry__old { stroke-dasharray: .018 .018 !important; }
  .js .carry .carry__stack { stroke-dasharray: .06 .045 !important; }
  .js .fml .fml__bar, .js .ladder::after, .js .ruler .ruler__range, .js .dials .dial__range, .js .vbars__keeper, .js .rate-vbars-rest { transform: none !important; transition: none !important; }
  .js .dials .dial__def { opacity: 1 !important; transform: none !important; transition: none !important; }
  .acct__seg, .band__ghost, .toc-foot__bar b, .mini-sq i::after { transition: none !important; }
  .mini-sq i::after { transform: scale(1); }
}

/* 26-9 mobile overflow fix: tables scroll inside themselves, drawings never widen the page */
main { overflow-x: clip; }
@media (max-width: 760px) {
  main table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}


/* fix 3 · the log-scale axes (the harvest-interval ruler, the two dials axes): below 360 px of axis
   every second label drops to a second row. On one row "1 day" ran 13.8 px into "7 days" and
   "1 min" 0.6 px into "10 min" at 320 (webfont), and the dials' axes ("0%" | "10%" too) again at
   1070-1130, where the side contents column leaves them 256-370 px */
@media (max-width: 440px) {
  .ruler__axis, .dials__axis { height: 2.6rem; }
  .ruler__axis span:nth-child(even), .dials__axis span:nth-child(even) { top: 1.5rem; }
}
@media (min-width: 1061px) and (max-width: 1200px) {
  .dials__axis { height: 2.6rem; }
  .dials__axis span:nth-child(even) { top: 1.5rem; }
}

/* the floor band: its price axis hangs under the quote labels, not across them ("quote after the
   dump" sat on "2,400" at every width); on phones "2,477.78 · quote before" steps down below "quote
   after the dump", the axis below both, every second axis label on a second row ("2,450" ran
   13 px into "2,500 USDG" at 320) */
.band__axis { margin-top: calc(62px - 5rem); }
@media (max-width: 640px) {
  .band__ghost > b { top: calc(100% + 42px); }
  .band__ghost > i { top: calc(100% + 60px); }
  .band__ghost::before { bottom: -76px; }
  .band__axis { margin-top: 0; }
}
@media (max-width: 440px) {
  .band__axis { height: 2.4rem; }
  .band__axis span:nth-child(even) { top: 1.2rem; }
}

/* the six-hour vesting chart on phones: "harvest · rate unchanged" rises a row above "fully vested"
   (they ran 13 px into each other at 320-450), and "deposit" drops a row below "0 h" (7.7 px, at
   320-590) */
@media (max-width: 520px) {
  .vest__chart { margin-top: 3.5rem; }
  .vest__tag:not(.vest__tag--r) { top: -3.3rem; }
}
@media (max-width: 640px) {
  .vest__x span:first-child { top: 1.1rem; }
  .vest__scrub { margin-top: 3.2rem; }
}

/* a dial's value ("6 h default · 10 min – 7 days", one line) sits beside its name while both fit,
   else under it: as a minmax(0, 1fr) | auto grid the name got 40 px at 320 and ran 42 px under the
   value (320-360) */
@media (max-width: 860px) {
  .dial { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .dial__k { flex: 1 1 8rem; min-width: min-content; }
  .dial__track { order: 1; flex: 1 1 100%; }
}

/* small phones: a pause-timeline segment can be narrower than its one-word label ("paused" ran
   3.2 px into "open again" at 320-330, webfont); Archivo narrows to fit, the bar keeps its scale */
@media (max-width: 400px) {
  .ptl__seg { padding: 0 .25rem; }
  .ptl__seg b { font-stretch: 75%; }
}