/* soft skin: white fading to porcelain,
   navy ink, one blue, white sheets on a soft tinted lift, hairline pills. Hanken Grotesk. */
:root {
  --porcelain: #f5f8fc; --white: #ffffff; --ink: #0b1d3a; --mid: #56657c; --soft: #93a1b5;
  --hair: #e1e8f1; --ice: #eaf1fb; --blue: #2347d6; --steel: #7e95b6;
  --lift: 0 1px 2px rgba(20,52,120,.05), 0 10px 24px -18px rgba(20,52,120,.35);
  --ink-2: var(--mid); --muted: var(--soft); --rule: var(--hair);
  --accent: var(--blue); --accent-soft: var(--ice);
  --take: var(--blue); --unsure: #8aa6e8; --unsure-ink: #5d7bc9; --skip: #c5cfdc;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; background: linear-gradient(180deg, #fff 0, var(--porcelain) 640px) fixed; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--ink); background: transparent;
  font: 400 16.5px/1.65 var(--sans); letter-spacing: -.003em;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(35,71,214,.16); }
a { color: var(--blue); text-decoration-color: rgba(35,71,214,.3); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
a:not(:hover) { transition: text-decoration-color .3s, color .3s, background .3s; }

.layout {
  display: grid; grid-template-columns: 13.5rem minmax(0, 50rem);
  gap: 4.5rem; max-width: 73rem; margin: 0 auto; padding: 3.5rem 2.5rem 8rem;
}
main :is(p, ul, ol, h2, h3, header .lede, header .meta) { max-width: 40rem; }
.scroll table { min-width: 32rem; }
@media (max-width: 640px) { .layout { padding-left: 1.2rem; padding-right: 1.2rem; } pre { font-size: 11.5px; } .wrow.three { grid-template-columns: 5.5rem 1fr 2.6rem; gap: .6rem; } .wbar { flex-wrap: wrap; } .wbar .dim { margin-left: 0; width: 100%; } }

/* nav: the three pages as a soft white sheet, the current page's sections under it */
nav.toc { position: sticky; top: 2rem; align-self: start; font-size: 14px; max-height: calc(100vh - 4rem); overflow-y: auto; }
nav.toc ul, nav.toc ol { list-style: none; margin: 0; padding: 0; }
nav.toc .pages { background: var(--white); border-radius: 14px; box-shadow: var(--lift), 0 0 0 1px var(--hair); padding: .35rem; }
nav.toc .pages > li > a {
  display: block; padding: .45rem .7rem; border-radius: 9px;
  color: var(--mid); text-decoration: none; font-weight: 500;
}
nav.toc .pages > li > a:hover { background: var(--ice); color: var(--ink); }
nav.toc .pages > li.here > a { background: none; color: var(--ink); font-weight: 600; }
nav.toc .pages > li.here > a:hover { background: none; }
nav.toc .sections { margin: .1rem .2rem .45rem; }
nav.toc .sections li.group { padding: .75rem .7rem .2rem; font: 500 11.5px/1.3 var(--sans); color: var(--soft); letter-spacing: .02em; }
nav.toc .sections li.group:first-child { padding-top: .35rem; }
nav.toc .sections a {
  display: flex; align-items: baseline; gap: .55rem; padding: .3rem .7rem; border-radius: 8px;
  color: var(--soft); text-decoration: none; line-height: 1.38; font-size: 13.5px;
}
nav.toc .sections a::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 99px; background: transparent; transform: translateY(-.1em); }
nav.toc .sections a:hover { color: var(--ink); }
nav.toc .sections a.on { color: var(--ink); }
nav.toc .sections a.on::before { background: var(--blue); }
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 2.5rem; }
  nav.toc { display: none; }
}

.kicker { font: 500 13px/1.3 var(--sans); color: var(--blue); }
header h1 { font: 300 clamp(2.3rem, 5vw, 3.1rem)/1.12 var(--sans); letter-spacing: -.03em; margin: .7rem 0 1.1rem; }
header .lede { font-size: 1.1rem; line-height: 1.6; color: #2c3b53; margin: 0 0 1.6rem; text-wrap: pretty; }
header .meta { font-size: 13.5px; color: var(--soft); border-top: 1px solid var(--hair); padding-top: 1rem; }

section { padding-top: 3.8rem; }
h2 { font: 400 1.65rem/1.25 var(--sans); letter-spacing: -.02em; margin: 0 0 1rem; }
h3 { font: 500 1.05rem/1.35 var(--sans); letter-spacing: -.01em; margin: 2.2rem 0 .55rem; }
p, li { text-wrap: pretty; }
p { margin: 0 0 1rem; }
ul, ol { padding-left: 1.2rem; margin: 0 0 1rem; }
li { margin: .3rem 0; }
li::marker { color: var(--soft); }
strong { font-weight: 600; }
em { font-style: italic; }

code { font: 400 .84em/1 var(--mono); background: var(--ice); color: var(--ink); padding: .16em .38em; border-radius: 5px; }
pre {
  font: 400 12.5px/1.65 var(--mono); background: var(--white); color: var(--ink);
  padding: 1.1rem 1.25rem; overflow-x: auto; margin: 1.1rem 0 1.4rem; tab-size: 4;
  border-radius: 12px; box-shadow: var(--lift), 0 0 0 1px var(--hair);
}
pre code { background: none; padding: 0; font: inherit; }
figure { margin: 1.1rem 0 1.4rem; }
figure pre { margin: 0; }
figcaption { font: 500 12.5px/1.4 var(--sans); color: var(--soft); margin: 0 0 .5rem; }
.c { color: var(--soft); }
.s { color: #2f6b8f; }
.k { color: var(--blue); font-weight: 500; }

.pull { font: 300 1.5rem/1.4 var(--sans); letter-spacing: -.02em; margin: 2rem 0; padding: 0; text-wrap: balance; }
.pull em { color: var(--blue); font-style: normal; font-weight: 400; }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 1rem 0 1.4rem; }
th { text-align: left; font: 500 12.5px/1.4 var(--sans); color: var(--soft); }
th, td { padding: .6rem .9rem .6rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
.paths li:last-child { border-bottom: 0; }
td code { white-space: nowrap; }

.note { font-size: 14.5px; color: var(--mid); }
.note strong { color: var(--ink); }

/* bands widget */
.bands { margin: 1.8rem 0 2.2rem; padding: 1.2rem 1.3rem 1rem; background: var(--white); border-radius: 14px; box-shadow: var(--lift), 0 0 0 1px var(--hair); }
.bands input[type=range] { margin: .2rem 0 .1rem; }
/* the band slider's own track is the three bands, so there's only one track */
input[type=range].banded::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(90deg, var(--skip) 0 var(--no), var(--unsure) var(--no) var(--yes), var(--take) var(--yes) 100%); }
input[type=range].banded::-moz-range-track { height: 6px; background: linear-gradient(90deg, var(--skip) 0 var(--no), var(--unsure) var(--no) var(--yes), var(--take) var(--yes) 100%); }
input[type=range].banded::-moz-range-progress { background: transparent; }
input[type=range].banded::-webkit-slider-thumb { margin-top: -5px; }
.bands .readout { display: flex; align-items: baseline; gap: 1rem; margin-top: .3rem; }
.bands .p { font: 300 2.2rem/1 var(--sans); font-variant-numeric: tabular-nums; min-width: 4.2ch; letter-spacing: -.02em; }
.bands .verdict { font-weight: 500; }
.bands .why { color: var(--mid); font-size: 14.5px; }
.bands .legend { display: flex; justify-content: space-between; font: 400 12.5px/1 var(--sans); color: var(--soft); margin-top: .5rem; }

/* mocked widgets: the same white sheet as the bands */
.widget { margin: 1.8rem 0 2.2rem; padding: 1.2rem 1.3rem 1.1rem; background: var(--white); border-radius: 14px; box-shadow: var(--lift), 0 0 0 1px var(--hair); }
.wtitle { font: 500 14px/1.3 var(--sans); margin: 0 0 .85rem; }
.wsub { font: 500 12.5px/1.4 var(--sans); color: var(--soft); margin: 0 0 .2rem; }
.wcap { font: 400 12.5px/1.45 var(--sans); color: var(--soft); margin-top: .9rem; }
.wlog { font-size: 14.5px; color: var(--mid); margin: .9rem 0 0; min-height: 3em; max-width: none; }
/* controls, in the board's sizes: 28px pills for actions, 32px for tabs and chips, one hairline ring */
:root { --c-md: 28px; --c-lg: 32px; --c-ring: 0 0 0 1px rgba(11,29,58,.09); --c-ring-hi: 0 0 0 1px rgba(35,71,214,.32); --focus: rgba(35,71,214,.28); }
button, input { font-family: inherit; }

/* segmented switch: one pill, exactly one on */
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 2px; margin: 0 0 .9rem; border-radius: 99px; background: var(--white); box-shadow: var(--c-ring); }
.seg button {
  all: unset; cursor: pointer; box-sizing: border-box; height: calc(var(--c-lg) - 4px); padding: 0 .9rem;
  display: inline-flex; align-items: center; border-radius: 99px; font: 500 12.5px/1 var(--sans); color: var(--mid);
}
.seg button:hover { color: var(--ink); }
.seg button:not(:hover) { transition: color .3s, background .3s; }
.seg button[aria-pressed=true] { background: var(--ink); color: #fff; }

/* chips: presets you can pick from, and toggles */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .9rem; }
.chips button, .checks label {
  all: unset; cursor: pointer; box-sizing: border-box; height: var(--c-lg); padding: 0 .85rem;
  display: inline-flex; align-items: center; gap: .45rem; border-radius: 99px;
  font: 500 12.5px/1 var(--sans); color: var(--mid); background: var(--white); box-shadow: var(--c-ring);
}
.chips button:hover, .checks label:hover { background: var(--ice); color: var(--ink); }
.chips button:not(:hover), .checks label:not(:hover) { transition: background .3s, color .3s, box-shadow .3s; }
.chips button[aria-pressed=true], .checks label:has(input:checked) { background: var(--ice); color: var(--ink); box-shadow: var(--c-ring-hi); }
.checks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 .9rem; }
.checks input { position: absolute; opacity: 0; pointer-events: none; }
.checks label::before { content: ""; width: 7px; height: 7px; border-radius: 99px; box-shadow: inset 0 0 0 1.5px var(--soft); }
.checks label:not(:hover)::before { transition: background .3s, box-shadow .3s; }
.checks label:has(input:checked)::before { background: var(--blue); box-shadow: none; }

/* action pills; the main one is the board's blue "next" */
.wbtn {
  all: unset; cursor: pointer; box-sizing: border-box; height: var(--c-md); padding: 0 .85rem;
  display: inline-flex; align-items: center; border-radius: 99px;
  font: 500 12.5px/1 var(--sans); color: var(--mid); background: var(--white); box-shadow: var(--c-ring);
}
.wbtn:not(:hover) { transition: background .3s, color .3s, box-shadow .3s; }
.wbtn:hover { background: var(--ice); color: var(--blue); box-shadow: var(--c-ring-hi); }
.wbtn:active { transform: translateY(.5px); }
.wbtn.next { background: var(--blue); color: #fff; box-shadow: 0 0 0 1px var(--blue), 0 4px 10px -5px rgba(35,71,214,.6); }
.wbtn.next:hover { background: #1b39b4; box-shadow: 0 0 0 1px #1b39b4, 0 4px 10px -5px rgba(35,71,214,.6); }
.wbtn:disabled, .wbtn:disabled:hover { cursor: default; background: var(--white); color: var(--soft); box-shadow: var(--c-ring); transform: none; }

/* text field: a white well with the same ring */
.widget input[type=text] {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 .9rem; margin: 0 0 .4rem;
  font: 400 15px/1 var(--sans); color: var(--ink); border: 0; border-radius: 10px;
  background: var(--porcelain); box-shadow: inset 0 0 0 1px var(--hair);
}
.widget input[type=text]:not(:focus) { transition: box-shadow .3s, background .3s; }
.widget input[type=text]:focus { outline: 0; background: var(--white); box-shadow: inset 0 0 0 1px rgba(35,71,214,.45), 0 0 0 3px rgba(35,71,214,.1); }

/* slider: a hairline track filled in blue up to the thumb */
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 20px; margin: 0; background: transparent; cursor: pointer; --fill: 50%;
}
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--blue) var(--fill), var(--hair) var(--fill)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 99px; background: var(--hair); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--blue); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 99px; background: var(--white);
  box-shadow: 0 0 0 1px rgba(11,29,58,.14), 0 2px 6px -1px rgba(20,52,120,.3);
}
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 99px; background: var(--white); box-shadow: 0 0 0 1px rgba(11,29,58,.14), 0 2px 6px -1px rgba(20,52,120,.3); }
input[type=range]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 1px rgba(35,71,214,.4), 0 2px 8px -1px rgba(35,71,214,.35); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
input[type=range]:not(:hover)::-webkit-slider-thumb { transition: transform .3s, box-shadow .3s; }
input[type=range]:focus { outline: 0; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 1px var(--blue), 0 0 0 4px rgba(35,71,214,.18); }

.seg button:focus-visible, .chips button:focus-visible, .checks label:has(input:focus-visible), .wbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.wrow { display: grid; grid-template-columns: 11rem 1fr; align-items: center; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; }
.wrow:last-child { border-bottom: 0; }
.wrow .lab { color: var(--mid); }
.wrow .dim { margin-left: .8rem; font-size: 13.5px; }
.wrow.three { grid-template-columns: 6.5rem 1fr 3rem; }
.wrow.three [data-opt] { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.widget .readout { display: flex; align-items: center; gap: 1rem; margin: .9rem 0; }
.widget .big { font: 300 2.2rem/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.widget .readout .dim { font-size: 13.5px; }
.wcols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: .4rem; }
.wcols .wrow { grid-template-columns: 6.5rem 1fr; gap: .6rem; }
.checks { display: flex; flex-wrap: wrap; gap: 1.2rem; font-size: 14.5px; margin: 0 0 .8rem; }
.checks input { accent-color: var(--blue); margin: 0 .4rem 0 0; vertical-align: -1px; }
.tlwrap { display: grid; grid-template-columns: 1fr 3.6rem; gap: .8rem; align-items: center; }
.lane { display: flex; gap: 2px; height: 6px; }
.lane i { display: block; height: 100%; background: var(--steel); border-radius: 99px; opacity: .55; }
.lane i.one { background: var(--blue); opacity: 1; min-width: 4px; }
.tlwrap .t { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.wstate { font-size: 14px; color: var(--mid); padding: .55rem .8rem; background: var(--porcelain); border-radius: 10px; margin: 0 0 .5rem; }
.paths { list-style: none; padding: 0; margin: 0; }
.paths li { display: grid; grid-template-columns: 1.2rem 1fr auto; gap: .8rem; align-items: baseline; padding: .55rem .1rem; margin: 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; color: var(--soft); transition: color .2s; }
.paths li.seen { color: var(--mid); }
.paths li.cur, .paths li.won { color: var(--ink); }
.paths li.won .name { font-weight: 600; }
.paths .n { font-variant-numeric: tabular-nums; }
.paths li.cur .n { color: var(--blue); }
.paths .to { color: var(--soft); font-size: 13.5px; }
.paths .kind { font-size: 12px; color: var(--steel); margin-left: .3rem; }
.wbar { display: flex; align-items: center; gap: .4rem; margin-top: .9rem; }
.wbar .dim { margin-left: auto; font-size: 13.5px; }
@media (max-width: 640px) { .wcols { grid-template-columns: 1fr; } .wrow { grid-template-columns: 7rem 1fr; } }

.verified {
  display: grid; grid-template-columns: auto 1fr; gap: .45rem 1.2rem;
  font-size: 14.5px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 1rem 0; margin: 1.4rem 0;
}
.verified dt { font: 500 12.5px/1.9 var(--sans); color: var(--soft); }
.verified dd { margin: 0; }

footer { margin-top: 5rem; padding-top: 1.2rem; border-top: 1px solid var(--hair); font-size: 13.5px; color: var(--soft); }

/* use-case pages */
section > .kicker { margin-bottom: .5rem; }
.dim { color: var(--soft); }
.scroll { overflow-x: auto; margin: 1rem 0 1.4rem; }
.scroll table { margin: 0; }
table.data td { font-size: 14px; }
table.data.num td:not(:first-child):not(:nth-child(2)),
table.data.num th:not(:first-child):not(:nth-child(2)) { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data tr.sep td { border-top: 1px dashed var(--hair); }
td.bad { color: #c4543f; font-weight: 600; }
/* a verdict is a number with one quiet dot, not a badge */
.chip { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--mid); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--c); }
.chip.take { --c: var(--take); color: var(--ink); }
.chip.unsure { --c: var(--unsure); }
.chip.skip { --c: var(--skip); color: var(--soft); }
.bar {
  display: inline-block; width: 7rem; height: 4px; border-radius: 99px; margin-right: .8rem; vertical-align: middle;
  background: linear-gradient(90deg, var(--blue) var(--w), var(--hair) var(--w));
}
ul.tight li { font-size: 14.5px; margin: .25rem 0; }
figure.chart { margin: 1.6rem 0 1.2rem; }
svg.strip { width: 100%; height: auto; display: block; }
svg.strip .tick { stroke: var(--hair); }
svg.strip .lbl { font: 400 11px var(--sans); fill: var(--soft); text-anchor: middle; }
svg.strip .neg { fill: var(--steel); opacity: .35; }
svg.strip .near { fill: none; stroke: var(--unsure-ink); stroke-width: 2; }
svg.strip .pos { fill: var(--blue); }
.legend-row { display: flex; gap: 1.5rem; font: 500 12.5px/1 var(--sans); color: var(--soft); margin-top: .5rem; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 99px; margin-right: .45rem; vertical-align: 0; }
.dot.pos { background: var(--blue); }
.dot.near { border: 1.5px solid var(--unsure-ink); }
.dot.neg { background: var(--steel); opacity: .35; }
.widget .readout .stack { display: flex; flex-direction: column; gap: .1rem; }