/* Reinforced Labs: "the lab" design system */
:root {
  --bg: #ffffff;
  --bg-2: #f3f6f9;      /* pale blue-grey band */
  --bg-3: #e8eef4;
  --panel: #ffffff;
  --ink: #0d1b2a;       /* ink navy */
  --ink-2: #33475b;
  --ink-3: #66788a;
  --rule: #d7dfe7;
  --rule-2: #b9c6d3;
  --grid: #e9eef3;
  --pass: #0a7a55;
  --pass-bg: #e3f3ec;
  --warn: #b26a00;
  --fail: #c23b22;
  --link: #0b5c8a;
  --code-bg: #0d1b2a;
  --code-ink: #dbe6f0;
  --sans: "Hanken Grotesk", "Hanken Fallback", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --max: 1280px;
  --gut: clamp(16px, 4vw, 48px);
  --r: 3px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a121c; --bg-2: #0f1925; --bg-3: #15212f; --panel: #0f1925; --ink: #e6edf5; --ink-2: #b4c2d0; --ink-3: #7f91a3;
    --rule: #223142; --rule-2: #34475b; --grid: #17232f; --pass: #34c48b; --pass-bg: #0f2a20; --warn: #e3a33b; --fail: #f0694f; --link: #7cc0ea;
    --code-bg: #060c13; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a121c; --bg-2: #0f1925; --bg-3: #15212f; --panel: #0f1925; --ink: #e6edf5; --ink-2: #b4c2d0; --ink-3: #7f91a3;
  --rule: #223142; --rule-2: #34475b; --grid: #17232f; --pass: #34c48b; --pass-bg: #0f2a20; --warn: #e3a33b; --fail: #f0694f; --link: #7cc0ea;
  --code-bg: #060c13; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.62 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: var(--pass); color: #fff; }
:focus-visible { outline: 2px solid var(--pass); outline-offset: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--ink); color: var(--bg); padding: 8px 12px; }

/* ---------- type ---------- */
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; color: var(--ink); margin: 0 0 .5em; line-height: 1.1; letter-spacing: -0.022em; }
h1 { font-size: clamp(38px, 5.2vw, 70px); font-weight: 650; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(28px, 3.1vw, 42px); letter-spacing: -0.028em; }
h3 { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.25; letter-spacing: -0.012em; }
h4 { font-size: 15px; letter-spacing: 0; margin-bottom: .35em; }
h1 em, h2 em, h3 em { font-style: normal; color: inherit; }
p { margin: 0 0 1em; }
.lede { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 38em; }
.mono, code, kbd, .tag { font-family: var(--mono); }
.muted { color: var(--ink-3); } .small { font-size: 14px; }
.eyebrow { display: block; font-size: 15px; font-weight: 500; color: var(--ink-3); margin-bottom: 14px; letter-spacing: 0; }
.eyebrow b { display: none; }

/* ---------- header: utility bar + main bar ---------- */
.util { background: var(--bg-2); border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.util .wrap { display: flex; justify-content: space-between; gap: 16px; height: 34px; align-items: center; }
.util a { color: var(--ink-2); }
.util nav { display: flex; gap: 20px; }
.util .status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.util .status i { width: 7px; height: 7px; border-radius: 50%; background: var(--pass); box-shadow: 0 0 0 3px var(--pass-bg); }
.site-head { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--rule); }
.site-head .wrap { display: flex; align-items: center; gap: 36px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 28px; height: 28px; }
.nav { display: flex; gap: 4px; font-size: 15px; font-weight: 500; }
.nav a { color: var(--ink-2); padding: 8px 12px; border-radius: var(--r); }
.nav a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--ink); background: var(--bg-3); }
.head-cta { margin-left: auto; }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--rule-2); color: var(--ink); font: 500 14px var(--sans); padding: 8px 14px; border-radius: var(--r); cursor: pointer; }
@media (max-width: 1020px) {
  .util nav { display: none; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 68px; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--rule); padding: 8px var(--gut) 20px; gap: 0; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 17px; border-radius: 0; }
  .site-head.open .nav { display: flex; }
  .menu-btn { display: block; }
  .site-head .head-cta { display: none; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1 var(--sans); padding: 14px 20px; border-radius: var(--r); border: 1px solid var(--pass); background: var(--pass); color: #fff; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.btn:hover { background: #075f42; border-color: #075f42; color: #fff; text-decoration: none; }
.btn .arr { transition: transform .2s ease; }
.btn:hover .arr { transform: translateX(3px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn.sm { padding: 10px 15px; font-size: 14px; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---------- sections ---------- */
section { padding: clamp(64px, 8vw, 112px) 0; }
section.band { background: var(--bg-2); }
section.flush { padding-top: 0; }
.sec-head { max-width: 760px; margin-bottom: 48px; }
.sec-head .num { display: none; }
.sec-head h2 { margin: 0; }
.sec-head p { margin-top: 14px; color: var(--ink-2); font-size: 18px; }
main > section:nth-of-type(even):not(.hero):not(.cta-band):not(.page-head) { background: var(--bg-2); }

/* ---------- hero ---------- */
.hero { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
.hero .lede { margin-top: 22px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; font-size: 14px; color: var(--ink-3); }
.hero-meta span { display: inline-flex; gap: 8px; align-items: center; }
.hero-meta span::before { content: ""; width: 14px; height: 2px; background: var(--pass); }

/* publication figure */
.fig { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px 22px 16px; }
.fig svg { width: 100%; height: auto; overflow: visible; }
.fig svg text { font-family: var(--mono); font-size: 11px; fill: var(--ink-3); }
.fig svg .lbl { fill: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 600; }
.fig svg .ax { stroke: var(--ink-2); stroke-width: 1; }
.fig svg .gl { stroke: var(--grid); stroke-width: 1; }
.fig svg .tk { stroke: var(--ink-2); stroke-width: 1; }
.fig svg .ci { stroke: var(--ink); stroke-width: 1.4; }
.fig svg .pt { fill: var(--ink); }
.fig svg .pt.pass { fill: var(--pass); } .fig svg .pt.fail { fill: var(--fail); }
.fig svg .thr { stroke: var(--pass); stroke-width: 1.2; stroke-dasharray: 5 4; }
.fig svg .s1 { stroke: var(--ink); fill: none; stroke-width: 1.8; }
.fig svg .s2 { stroke: var(--pass); fill: none; stroke-width: 1.8; }
.fig svg .s3 { stroke: var(--warn); fill: none; stroke-width: 1.8; }
.fig svg .s4 { stroke: var(--fail); fill: none; stroke-width: 1.8; }
.fig svg .s5 { stroke: var(--link); fill: none; stroke-width: 1.8; }
.fig svg .band { fill: var(--pass); opacity: .12; }
.fig svg .bar1 { fill: var(--ink); } .fig svg .bar2 { fill: var(--pass); } .fig svg .bar3 { fill: var(--warn); } .fig svg .bar4 { fill: var(--fail); } .fig svg .bar5 { fill: var(--rule-2); }
.fig figcaption, .fig .cap { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin-top: 12px; border-top: 1px solid var(--rule); padding-top: 10px; }
.fig figcaption b, .fig .cap b { color: var(--ink); font-weight: 600; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-2); margin: 4px 0 8px; }
.legend i { display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: 6px; }

/* measurement scale divider */
.scale { height: 22px; background:
  repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 10px) bottom/100% 7px no-repeat,
  repeating-linear-gradient(90deg, var(--ink-3) 0 1px, transparent 1px 100px) bottom/100% 14px no-repeat;
  border-bottom: 1px solid var(--rule-2); opacity: .8; }

/* ---------- lab report panel ---------- */
.report { background: var(--panel); border: 1px solid var(--rule-2); border-radius: var(--r); font: 13px/1.5 var(--mono); overflow: hidden; }
.report-top { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; background: var(--bg-2); border-bottom: 1px solid var(--rule); color: var(--ink-3); gap: 12px; }
.report-top b { color: var(--ink); font-weight: 600; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 2px; font: 600 11px var(--mono); letter-spacing: .02em; white-space: nowrap; }
.chip.pass { color: var(--pass); background: var(--pass-bg); } .chip.fail { color: #fff; background: var(--fail); } .chip.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); } .chip.neutral { color: var(--ink-2); background: var(--bg-3); }
.report-rows { padding: 4px 0; }
.rrow { display: grid; grid-template-columns: minmax(0, 1fr) 64px 120px 54px; gap: 12px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--grid); }
.rrow:last-child { border-bottom: 0; }
.rrow .name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rrow .n { color: var(--ink-3); text-align: right; }
.bar { height: 8px; background: var(--bg-3); position: relative; border-radius: 1px; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--pass); transform-origin: left; animation: grow 1s cubic-bezier(.2,.7,.2,1) both; }
.bar i.f { background: var(--fail); } .bar i.w { background: var(--warn); }
.rrow .s { text-align: right; color: var(--ink); }
.rrow .s.bad { color: var(--fail); font-weight: 600; }
@keyframes grow { from { transform: scaleX(0); } }
.report-foot { display: flex; justify-content: space-between; align-items: center; padding: 11px 16px; border-top: 1px solid var(--rule); background: var(--bg-2); gap: 10px; flex-wrap: wrap; }
.report-foot .gate { color: var(--fail); font-weight: 600; }
@media (max-width: 560px) { .rrow { grid-template-columns: minmax(0, 1fr) 70px 46px; } .rrow .n { display: none; } }
@media (prefers-reduced-motion: reduce) { .bar i { animation: none; } html { scroll-behavior: auto; } }

/* ---------- proof strip ---------- */
.proof { padding: 26px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--bg); }
.proof .wrap { display: flex; gap: 36px; align-items: center; flex-wrap: wrap; }
.proof .eyebrow { margin: 0; font-size: 14px; }
.proof-list { display: flex; flex-wrap: wrap; gap: 10px 34px; flex: 1; }
.proof-list div { font-size: 15px; color: var(--ink); font-weight: 500; }
.proof-list b { display: none; }

/* ---------- readouts (stats) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stat { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px 22px 18px; }
.stat .v { font: 600 clamp(36px, 3.8vw, 52px)/1 var(--sans); letter-spacing: -0.04em; color: var(--ink); }
.stat .v small { font-size: .42em; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; font-weight: 500; }
.stat::after { content: ""; display: block; height: 9px; margin-top: 16px; border-bottom: 1px solid var(--rule-2);
  background: repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 8px) bottom/100% 5px no-repeat; }
.stat p { font-size: 14px; color: var(--ink-3); margin: 12px 0 0; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- product index / instruments ---------- */
.pindex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 26px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); transition: border-color .15s, transform .15s; }
a.prow:hover { border-color: var(--pass); text-decoration: none; transform: translateY(-2px); }
.prow .k { display: none; }
.prow h3 { margin: 0; }
.prow h3 span { display: block; font-size: 14px; font-weight: 500; color: var(--pass); letter-spacing: 0; margin-bottom: 6px; }
.prow p { margin: 0; color: var(--ink-2); font-size: 16px; }
.prow .go { font-size: 14px; font-weight: 600; color: var(--pass); margin-top: 6px; }
.prow .mini { margin: 4px 0 10px; height: 76px; width: auto; max-width: 100%; }
@media (max-width: 760px) { .pindex { grid-template-columns: minmax(0, 1fr); } }

/* ---------- grids ---------- */
.cols { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.cols.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols.split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(28px, 5vw, 72px); }
@media (max-width: 960px) { .cols.c3, .cols.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cols.split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .cols.c2, .cols.c3, .cols.c4 { grid-template-columns: minmax(0, 1fr); } }
.note { padding: 0; }
.note .k { display: inline-block; font-size: 13px; font-weight: 600; color: var(--pass); margin-bottom: 10px; }
.note h3 { margin-bottom: 8px; }
.note p { color: var(--ink-2); font-size: 16px; margin: 0; }
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); padding: clamp(20px, 3vw, 32px); }
.panel .eyebrow { font-size: 14px; color: var(--pass); font-weight: 600; }

/* ---------- lists ---------- */
.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { padding: 8px 0 8px 28px; position: relative; font-size: 16px; color: var(--ink-2); }
.ticks li::before { content: ""; position: absolute; left: 3px; top: 15px; width: 11px; height: 6px; border-left: 2px solid var(--pass); border-bottom: 2px solid var(--pass); transform: rotate(-45deg); }
.dl { display: grid; grid-template-columns: 200px minmax(0, 1fr); background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
.dl dt, .dl dd { padding: 16px 20px; border-bottom: 1px solid var(--grid); margin: 0; }
.dl dt { font-weight: 600; color: var(--ink); background: var(--bg-2); }
.dl dt:last-of-type, .dl dd:last-of-type { border-bottom: 0; }
@media (max-width: 640px) { .dl { grid-template-columns: minmax(0, 1fr); } .dl dt { border-bottom: 0; padding-bottom: 6px; } .dl dd { padding-top: 6px; } }
.kicker-list { list-style: none; padding: 0; margin: 0; position: relative; }
.kicker-list::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 1px; background: var(--rule-2); }
.kicker-list li { position: relative; padding: 0 0 26px 34px; }
.kicker-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--pass); }
.kicker-list h4 { font-size: 19px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.kicker-list p { margin: 0; color: var(--ink-2); font-size: 16px; }

/* ---------- code ---------- */
pre { margin: 0; background: var(--code-bg); color: var(--code-ink); padding: 20px 22px; overflow-x: auto; font: 13.5px/1.65 var(--mono); border-radius: 0 0 var(--r) var(--r); }
pre .c { color: #7d93a8; } pre .k { color: #7fd1ae; } pre .s { color: #f2c98b; } pre .n { color: #9cc8f0; }
code { font-size: .88em; background: var(--bg-3); padding: 1px 5px; border-radius: 2px; }
pre code { background: none; padding: 0; font-size: inherit; }
.term-head { display: flex; justify-content: space-between; background: #1a2b3d; color: #9fb3c6; font: 12px var(--mono); padding: 8px 16px; border-radius: var(--r) var(--r) 0 0; }
.prose pre { border-radius: var(--r); }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 600px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--grid); vertical-align: top; }
th { font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--bg-2); border-bottom: 1px solid var(--rule); }
tr:last-child td { border-bottom: 0; }
td.y { color: var(--pass); font-weight: 600; } td.x { color: var(--ink-3); }
td.num, th.num { text-align: right; font-family: var(--mono); font-size: 14px; }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan { padding: 30px 26px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); display: flex; flex-direction: column; }
.plan.feat { border: 2px solid var(--pass); }
.plan .eyebrow { font-weight: 600; color: var(--ink); font-size: 16px; }
.plan .price { font: 650 46px/1 var(--sans); letter-spacing: -0.04em; margin: 12px 0 6px; }
.plan .price small { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.plan .ticks { margin: 20px 0 26px; flex: 1; }
.plan .btn { justify-content: center; }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); }
.faq details { border-bottom: 1px solid var(--grid); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 600; font-size: 18px; position: relative; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 24px; top: 26px; width: 10px; height: 10px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 30px; border-color: var(--pass); }
.faq .a { padding: 0 22px 20px; color: var(--ink-2); max-width: 52em; }

/* ---------- CTA ---------- */
.cta-band { background: var(--bg-2) !important; border-top: 1px solid var(--rule); }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cta-band h2 { margin: 0; }
.cta-band p { color: var(--ink-2); }
.cta-band .eyebrow { display: none; }
@media (max-width: 860px) { .cta-band .wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; } }

/* ---------- footer: colophon ---------- */
.site-foot { background: var(--ink); color: #c7d3df; padding: 64px 0 36px; font-size: 14px; }
:root[data-theme="dark"] .site-foot { background: #060c13; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-foot { background: #060c13; color: #c7d3df; } }
.site-foot .brand { color: #fff; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot-grid h4 { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 14px; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin: 0 0 9px; }
.foot-grid a { color: #a9bccd; }
.foot-grid a:hover { color: #fff; }
.foot-grid .btn.ghost { color: #fff; border-color: #ffffff44; }
.foot-grid p { color: #a9bccd; }
.colophon { margin-top: 48px; padding-top: 18px; border-top: 1px solid #ffffff1f; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 12px var(--mono); color: #8fa3b6; }
.theme-toggle { background: none; border: 1px solid #ffffff33; color: #c7d3df; font: 12px var(--mono); padding: 5px 10px; border-radius: 2px; cursor: pointer; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-grid > div:first-child { grid-column: 1 / -1; } }

/* ---------- page head / crumbs ---------- */
.crumbs { font-size: 13px; color: var(--ink-3); padding-top: 24px; }
.crumbs a { color: var(--ink-3); }
.crumbs span { margin: 0 7px; }
.page-head { padding: clamp(32px, 5vw, 64px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule); }
.page-head h1 { max-width: 17em; font-size: clamp(34px, 4.4vw, 58px); }
.page-head .lede { margin-top: 18px; }

/* ---------- articles ---------- */
.article { display: grid; grid-template-columns: 230px minmax(0, 740px); gap: clamp(28px, 5vw, 72px); padding-top: 36px; padding-bottom: 96px; }
.toc { position: sticky; top: 92px; align-self: start; font-size: 14px; max-height: calc(100vh - 110px); overflow: auto; }
.toc h4 { font-size: 13px; color: var(--ink-3); font-weight: 600; }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--rule); }
.toc a { display: block; padding: 6px 0 6px 14px; color: var(--ink-2); margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover { border-left-color: var(--pass); color: var(--ink); text-decoration: none; }
.prose { font-size: 18px; line-height: 1.72; }
.prose h2 { font-size: clamp(25px, 2.5vw, 32px); margin: 2em 0 .55em; scroll-margin-top: 100px; }
.prose h3 { font-size: 21px; margin: 1.7em 0 .45em; scroll-margin-top: 100px; }
.prose h2 .anchor, .prose h3 .anchor { color: var(--rule-2); margin-left: 8px; font-weight: 400; opacity: 0; transition: opacity .15s; }
.prose h2:hover .anchor, .prose h3:hover .anchor { opacity: 1; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .45em; }
.prose blockquote { margin: 1.6em 0; padding: 14px 20px; border-left: 3px solid var(--pass); background: var(--bg-2); font-size: 19px; color: var(--ink); font-weight: 500; }
.prose pre, .prose .table-wrap, .prose .fig { margin: 1.6em 0; }
.prose table { font-size: 15px; }
.prose .katex-display { margin: 1.4em 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.prose .katex { font-size: 1.06em; }
.byline { display: flex; gap: 8px 22px; flex-wrap: wrap; font-size: 14px; color: var(--ink-3); margin-top: 20px; }
.byline b { color: var(--ink); font-weight: 600; }
.callout { background: var(--pass-bg); border: 1px solid color-mix(in srgb, var(--pass) 30%, transparent); padding: 16px 20px; margin: 1.6em 0; font-size: 16px; border-radius: var(--r); }
.callout b { display: block; color: var(--pass); font-size: 14px; margin-bottom: 4px; }
.callout.limits { background: var(--bg-2); border-color: var(--rule); }
.callout.limits b { color: var(--ink); }
.refs { font-size: 15px; padding-left: 1.4em; }
.refs li { margin-bottom: .6em; color: var(--ink-2); }
.related { margin-top: 3em; padding: 22px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--bg-2); }
.related h2 { font-size: 20px !important; margin: 0 0 12px !important; }
.related ul { margin: 0; padding-left: 1.1em; }
@media (max-width: 960px) { .article { grid-template-columns: minmax(0, 1fr); } .toc { position: static; max-height: none; } }

/* ---------- forms ---------- */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.form .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.field input, .field select, .field textarea { width: 100%; font: 16px/1.4 var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--rule-2); border-radius: var(--r); padding: 12px 14px; appearance: none; transition: border-color .15s, box-shadow .15s; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pass); box-shadow: 0 0 0 3px var(--pass-bg); }
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { grid-column: 1 / -1; font-size: 15px; min-height: 1.5em; margin: 0; }
.form-status.ok { color: var(--pass); font-weight: 600; } .form-status.err { color: var(--fail); }
.form.sent .field, .form.sent .form-actions { opacity: .45; pointer-events: none; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.form-actions .small { color: var(--ink-3); }
@media (max-width: 640px) { .form { grid-template-columns: minmax(0, 1fr); } }

/* ---------- diagrams ---------- */
.diagram { border: 1px solid var(--rule); background: var(--panel); padding: clamp(16px, 2.5vw, 28px); border-radius: var(--r); }
.diagram svg { width: 100%; height: auto; }
.diagram svg text { font-family: var(--mono); font-size: 12px; fill: var(--ink-2); }
.diagram svg .t-strong { fill: var(--ink); font-weight: 600; font-family: var(--sans); font-size: 13px; }
.diagram svg .t-acc { fill: var(--pass); }
.diagram svg .ln { stroke: var(--ink-3); stroke-width: 1; fill: none; }
.diagram svg .ln-acc { stroke: var(--pass); stroke-width: 1.5; fill: none; }
.diagram svg .box { fill: var(--bg); stroke: var(--rule-2); stroke-width: 1; rx: 3; }
.diagram svg .box-acc { fill: var(--pass); stroke: var(--pass); }
.diagram svg .box-mute { fill: var(--bg-2); stroke: var(--rule); }
.diagram figcaption, figure figcaption { font-size: 13.5px; color: var(--ink-3); margin-top: 14px; }
figure { margin: 0; }
.dash-anim { stroke-dasharray: 4 5; animation: dash 1.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .dash-anim { animation: none; } }

/* ---------- playground ---------- */
.play { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--panel); overflow: hidden; }
.play-in { padding: 22px; border-right: 1px solid var(--rule); }
.play-in .eyebrow { font-size: 14px; font-weight: 600; color: var(--ink); }
.play-out { padding: 22px; font: 13px/1.6 var(--mono); background: var(--bg-2); }
.play textarea { width: 100%; min-height: 150px; font: 14px/1.5 var(--mono); padding: 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--rule-2); border-radius: var(--r); resize: vertical; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.presets button { font: 13px var(--sans); padding: 6px 11px; background: var(--bg); color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: 2px; cursor: pointer; }
.presets button:hover { border-color: var(--pass); color: var(--ink); }
.verdict { font: 650 28px/1.1 var(--sans); letter-spacing: -0.02em; margin: 6px 0 14px; }
.verdict.block { color: var(--fail); } .verdict.allow { color: var(--pass); } .verdict.review { color: var(--warn); }
.sig { display: grid; grid-template-columns: minmax(0, 1fr) 60px; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.sig span:last-child { text-align: right; }
@media (max-width: 800px) { .play { grid-template-columns: minmax(0, 1fr); } .play-in { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* ---------- lists of articles ---------- */
.guide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.guide-list a { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r); color: var(--ink); transition: border-color .15s; }
.guide-list a:hover { border-color: var(--pass); text-decoration: none; }
.guide-list h3 { margin: 0; font-size: 19px; }
.guide-list p { margin: 0; color: var(--ink-2); font-size: 15px; }
.guide-list .meta { order: -1; font: 12px var(--mono); color: var(--pass); }
@media (max-width: 760px) { .guide-list { grid-template-columns: minmax(0, 1fr); } }
.quote { font: 500 clamp(22px, 2.4vw, 30px)/1.4 var(--sans); letter-spacing: -0.015em; max-width: 34em; margin: 0; padding-left: 26px; border-left: 3px solid var(--pass); }
.quote cite { display: block; font: 14px var(--sans); color: var(--ink-3); margin-top: 18px; font-style: normal; }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { font-size: 12px; padding: 3px 8px; background: var(--bg-3); color: var(--ink-2); border-radius: 2px; }
.js .reveal { opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }
.mt0 { margin-top: 0; } .mt1 { margin-top: 12px; } .mt2 { margin-top: 28px; } .mt3 { margin-top: 48px; }
.notes-list { display: grid; gap: 0; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); }
.notes-list article { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 22px; border-bottom: 1px solid var(--grid); }
.notes-list article:last-child { border-bottom: 0; }
.notes-list time { font: 13px var(--mono); color: var(--ink-3); }
.notes-list h3 { font-size: 18px; margin: 0 0 6px; }
.notes-list p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 640px) { .notes-list article { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.nav a.mob { display: none; }
@media (max-width: 1020px) { .nav a.mob { display: block; } }
.toc .btn { color: #fff; border-left: 0; padding: 10px 15px; margin: 0; display: inline-flex; }
.toc .btn:hover { color: #fff; }

/* ---------- interactive 3D figures ---------- */
.viz-stage { position: relative; aspect-ratio: 16 / 10; width: 100%; background: linear-gradient(var(--panel), var(--bg-2)); border-radius: 2px; overflow: hidden; }
.viz-stage canvas { position: absolute; inset: 0; display: block; cursor: grab; }
.viz-stage canvas:active { cursor: grabbing; }
.viz-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; }
.viz-fallback svg { max-height: 100%; }
.viz.live .viz-fallback { display: none; }
.viz-ctrl { display: none; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.viz.live .viz-ctrl { display: flex; }
.viz-ctrl input[type=range] { flex: 1; min-width: 160px; accent-color: var(--pass); }
.viz-ctrl output { font: 600 13px var(--mono); color: var(--ink); min-width: 74px; text-align: right; }
.viz-out { display: none; font: 13px/1.5 var(--mono); color: var(--ink); margin: 8px 0 0; }
.viz.live .viz-out { display: block; }
.viz .hint { display: none; }
.viz.live .hint { display: inline; }
@media (max-width: 640px) { .viz-stage { aspect-ratio: 4 / 3; } }

/* ---------- photographs ---------- */
.photo { margin: 0; }
.photo picture, .photo img { display: block; width: 100%; height: auto; border-radius: var(--r); }
.photo img { aspect-ratio: 3 / 2; object-fit: cover; background: var(--bg-3); filter: saturate(.92); }
.photo figcaption { font-size: 13px; color: var(--ink-3); margin-top: 10px; }
.photo.wide img { aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .photo.wide img { aspect-ratio: 3 / 2; } }

/* ---------- archive interactive figures (module-mounted) ---------- */
.viz[data-viz-module] .viz-stage { aspect-ratio: auto; min-height: 0; background: none; overflow: visible; }
.viz[data-viz-module] .viz-fallback { position: static; display: block; padding: 0; }
.viz.mounted .viz-ctrl { display: flex; }
.viz.mounted .viz-out { display: block; }
.prose .eq { overflow-x: auto; overflow-y: hidden; margin: 1.4em 0; }
.prose aside.note { background: var(--bg-2); border-left: 3px solid var(--pass); padding: 14px 18px; margin: 1.6em 0; font-size: 16px; border-radius: 0 var(--r) var(--r) 0; }
.prose aside.note p:last-child { margin: 0; }
.prose figure.fig { margin: 1.8em 0; }
.prose figure.fig svg { width: 100%; height: auto; }
.prose table { border: 1px solid var(--rule); }
.archive-year { margin-top: 48px; }
.archive-year h3 { font: 600 14px var(--mono); color: var(--ink-3); border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 4px; }
.archive-list { list-style: none; padding: 0; margin: 0; }
.archive-list li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 220px; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--grid); align-items: baseline; }
.archive-list time { font: 13px var(--mono); color: var(--ink-3); }
.archive-list a { font-weight: 600; color: var(--ink); }
.archive-list a:hover { color: var(--pass); }
.archive-list .t { font-size: 13px; color: var(--ink-3); text-align: right; }
.archive-list p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 8px; }
.chips button { font: 500 14px var(--sans); padding: 7px 13px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--bg); color: var(--ink-2); cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.archive-list li[hidden], .archive-year[hidden] { display: none; }
@media (max-width: 760px) { .archive-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; } .archive-list .t { text-align: left; } }
/* control grid for module figures: label | control | value */
.viz.mounted[data-viz-module] .viz-ctrl { display: grid; grid-template-columns: max-content minmax(120px, 1fr) minmax(48px, max-content); gap: 10px 14px; align-items: center; }
.viz[data-viz-module] .viz-ctrl label { font-size: 14px; color: var(--ink-2); }
.viz[data-viz-module] .viz-ctrl input[type=range] { width: 100%; min-width: 0; accent-color: var(--pass); }
.viz[data-viz-module] .viz-ctrl output { font: 600 13px var(--mono); color: var(--ink); text-align: right; }
.viz[data-viz-module] .viz-ctrl select { grid-column: span 2; justify-self: start; font: 14px var(--sans); padding: 6px 10px; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--bg); color: var(--ink); }
.viz[data-viz-module] .viz-ctrl button { grid-column: 1 / -1; justify-self: start; font: 500 14px var(--sans); padding: 8px 14px; border: 1px solid var(--rule-2); border-radius: var(--r); background: var(--bg); color: var(--ink); cursor: pointer; }
.viz[data-viz-module] .viz-ctrl button:hover { border-color: var(--pass); }
.viz[data-viz-module] .viz-ctrl label:has(input[type=checkbox], input[type=radio]) { grid-column: 1 / -1; display: inline-flex; gap: 8px; align-items: center; }
.viz[data-viz-module] .viz-ctrl > :not(label):not(input):not(output):not(select):not(button) { grid-column: 1 / -1; }
.viz[data-viz-module] .viz-out { font: 13px/1.55 var(--mono); }
@media (max-width: 560px) {
  .viz.mounted[data-viz-module] .viz-ctrl { grid-template-columns: minmax(0, 1fr) minmax(44px, max-content); gap: 4px 12px; }
  .viz[data-viz-module] .viz-ctrl label { grid-column: 1 / -1; margin-top: 8px; }
  .viz[data-viz-module] .viz-ctrl select { grid-column: 1 / -1; }
}

/* ---------- learn hubs, topic navigation, glossary ---------- */
.part-of { font-size: 14.5px; color: var(--ink-3); margin: 18px 0 0; padding: 10px 14px; background: var(--bg-2); border-left: 3px solid var(--pass); border-radius: 0 var(--r) var(--r) 0; }
.next-in-topic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 2.4em 0 0; }
.next-in-topic a { display: block; padding: 16px 18px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); color: var(--ink); font-weight: 600; font-size: 16px; line-height: 1.35; }
.next-in-topic a:hover { border-color: var(--pass); text-decoration: none; }
.next-in-topic a span { display: block; font: 500 12.5px var(--sans); color: var(--ink-3); margin-bottom: 4px; }
.next-in-topic .next { text-align: right; }
@media (max-width: 640px) { .next-in-topic { grid-template-columns: minmax(0, 1fr); } .next-in-topic .next { text-align: left; } }
.topic-map ol { padding-left: 1.3em; }
.topic-map li { margin-bottom: .7em; }
.topic-map li .muted { display: block; font-size: 14.5px; }
.hub-p { color: var(--ink-2); max-width: 46em; margin-top: 14px; }
.hub-start { display: block; padding: 24px 26px; border: 2px solid var(--pass); border-radius: var(--r); background: var(--panel); color: var(--ink); max-width: 860px; }
.hub-start:hover { text-decoration: none; background: var(--pass-bg); }
.hub-start .meta { font: 600 12.5px var(--mono); color: var(--pass); }
.hub-start h2 { margin: 6px 0 6px; font-size: clamp(22px, 2.2vw, 28px); }
.hub-start p { margin: 0; color: var(--ink-2); }
.reading-order { list-style: none; padding: 0; margin: 0; max-width: 860px; border-top: 1px solid var(--rule); }
.reading-order li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--grid); }
.reading-order .n { font: 600 14px var(--mono); color: var(--pass); width: 30px; height: 30px; border: 1.5px solid var(--pass); border-radius: 50%; display: grid; place-items: center; }
.reading-order a { font-weight: 600; font-size: 17px; color: var(--ink); }
.reading-order a:hover { color: var(--pass); }
.reading-order p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hub-grid a { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); color: var(--ink); }
.hub-grid a:hover { border-color: var(--pass); text-decoration: none; }
.hub-grid h3 { margin: 0; font-size: 21px; }
.hub-grid p { margin: 0; color: var(--ink-2); font-size: 15px; }
.hub-grid .meta { font: 12.5px var(--mono); color: var(--pass); margin-top: auto; padding-top: 6px; }
@media (max-width: 760px) { .hub-grid { grid-template-columns: minmax(0, 1fr); } }
.az { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.az a { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--rule-2); border-radius: var(--r); font: 600 14px var(--mono); color: var(--ink); background: var(--bg); }
.az a:hover { border-color: var(--pass); color: var(--pass); text-decoration: none; }
.az-group { scroll-margin-top: 90px; margin-top: 36px; }
.az-group h2 { font: 700 22px var(--mono); color: var(--pass); margin-bottom: 10px; }
.az-group dt a { color: var(--ink); }
.az-group .more { font-size: 14px; }
a.term { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--pass); text-underline-offset: 3px; }
a.term:hover { color: var(--pass); }
.tagrow.plain { list-style: none; padding: 0; }
.tagrow.plain .tag { font-size: 13.5px; padding: 5px 10px; color: var(--ink); }
/* accessibility: heading levels without changing the look; legible primary buttons in dark mode */
.toc .toc-h { font-size: 13px; color: var(--ink-3); font-weight: 600; margin: 0 0 .35em; letter-spacing: 0; }
.foot-grid .foot-h { font-size: 13px; font-weight: 600; color: #fff; margin: 0 0 14px; letter-spacing: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:not(.ghost) { color: #04140d; } }
:root[data-theme="dark"] .btn:not(.ghost) { color: #04140d; }
.colophon a { color: #fff; text-decoration: underline; }