/* EBO site. Colors, families, sizes, radii and spacing come from tokens.css, generated from site/DESIGN.md. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--surface-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
}
:root[data-theme="dark"] body { line-height: 1.66; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { line-height: 1.66; } }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
code, pre, time { font-family: var(--font-readout); }
code { font-size: 0.86em; }
:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 3px; border-radius: var(--r-sm); }
::selection { background: var(--primary); color: var(--on-primary); }
.nowrap { white-space: nowrap; }

:root { --ease: cubic-bezier(0.25, 1, 0.5, 1); --gutter: clamp(16px, 4vw, 40px); }
.wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 30; padding: 8px 12px; background: var(--ink); color: var(--surface-0); }
.skip:focus { left: 8px; }

/* masthead */
.masthead { position: sticky; top: 0; z-index: 20; background: var(--surface-0); border-bottom: 1px solid var(--rule); }
.masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); height: 60px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark svg { width: 22px; height: 22px; flex: none; }
.wm-short { font-family: var(--font-display); font-stretch: 125%; font-weight: 750; font-size: 17px; letter-spacing: 0.02em; }
.wm-long { font-size: var(--size-small); color: var(--text-muted); padding-left: 10px; border-left: 1px solid var(--rule); }
.masthead nav { display: flex; align-items: center; gap: 2px; }
.masthead nav a { padding: 6px 10px; font-size: var(--size-small); color: var(--text-secondary); text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.masthead nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--primary); }
.theme { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 6px; padding: 0; border: 1px solid var(--rule); border-radius: var(--r-md); background: none; color: var(--ink); cursor: pointer; }
.theme:hover { border-color: var(--ink); }
.theme svg { width: 16px; height: 16px; }
@media (max-width: 1100px) { .wm-long { display: none; } }
@media (max-width: 820px) { .masthead nav a:not(.gh) { display: none; } }

/* type */
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 {
  font-family: var(--font-display); font-weight: var(--weight-display); font-stretch: 118%;
  font-size: clamp(2.5rem, 1.1rem + 5.2vw, var(--size-display)); line-height: 0.98; letter-spacing: var(--ls-display);
  max-width: 15ch;
}
h2 {
  font-family: var(--font-headline); font-weight: var(--weight-headline); font-stretch: 112%;
  font-size: clamp(1.85rem, 1.05rem + 2.3vw, var(--size-headline)); line-height: 1.06; letter-spacing: var(--ls-headline);
}
h3 { font-family: var(--font-title); font-size: var(--size-title); font-weight: var(--weight-title); font-stretch: 104%; line-height: 1.3; }
p { text-wrap: pretty; }
.link { color: var(--primary-ink); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.link::after { content: " →"; }
.link:hover { text-decoration-color: var(--primary); }

/* hero */
.hero { padding-top: clamp(48px, 7vw, 104px); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-lg); row-gap: var(--s-2xl); align-items: end; }
.hero-copy { grid-column: 1 / span 7; }
.lede { margin: var(--s-lg) 0 0; max-width: 58ch; font-size: clamp(17px, 1rem + 0.3vw, 19px); color: var(--text-secondary); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-sm) 12px; margin-top: var(--s-xl); }
.btn {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px;
  border: 1.5px solid var(--ink); border-radius: var(--r-md); background: var(--surface-0); color: var(--ink);
  font-size: 15px; font-weight: 600; text-decoration: none; transition: box-shadow .25s var(--ease), background-color .2s var(--ease);
}
.btn:hover { box-shadow: inset 0 -3px 0 var(--primary); }
.btn.primary { background: var(--ink); color: var(--surface-0); }
.btn svg { width: 13px; height: 13px; }
.dur { font-family: var(--font-label); font-size: var(--size-label); font-weight: 400; opacity: 0.75; font-variant-numeric: tabular-nums; }
.install { display: flex; align-items: stretch; width: fit-content; max-width: 100%; margin-top: var(--s-md); border: 1px solid var(--rule); border-radius: var(--r-md); }
.install code { display: flex; align-items: center; min-width: 0; padding: 10px 14px; font-size: var(--size-readout); color: var(--text-secondary); white-space: nowrap; overflow-x: auto; }
.install .prompt { margin-right: 0.6em; color: var(--text-muted); user-select: none; }
.copy { flex: none; padding: 0 14px; border: 0; border-left: 1px solid var(--rule); background: none; color: var(--ink); font: 600 13px var(--font-body); cursor: pointer; }
.copy:hover { background: var(--surface-1); }
.copy[data-state="done"] { color: var(--primary-ink); }

.spec { grid-column: 9 / span 4; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.spec caption { padding-bottom: 10px; border-bottom: 2px solid var(--rule-strong); text-align: left; font-family: var(--font-label); font-size: var(--size-label); font-weight: 500; color: var(--ink); }
.spec th, .spec td { padding: 9px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; text-align: left; }
.spec th { width: 34%; padding-right: 12px; font-family: var(--font-label); font-size: var(--size-label); font-weight: 400; color: var(--text-muted); }
.spec td { font-size: var(--size-small); line-height: 1.45; color: var(--ink); }
.spec code { font-size: 12px; }
@media (max-width: 1040px) {
  .hero-copy, .spec { grid-column: 1 / -1; }
  .spec { max-width: 640px; }
}

/* plate */
.plate { margin-top: clamp(56px, 7vw, 96px); margin-bottom: 0; }
.plate-mat {
  --mk: var(--rule-strong); --ml: 18px; --mo: 10px;
  padding: clamp(14px, 3vw, 40px);
  background:
    linear-gradient(var(--mk), var(--mk)) top var(--mo) left var(--mo) / var(--ml) 1px,
    linear-gradient(var(--mk), var(--mk)) top var(--mo) left var(--mo) / 1px var(--ml),
    linear-gradient(var(--mk), var(--mk)) top var(--mo) right var(--mo) / var(--ml) 1px,
    linear-gradient(var(--mk), var(--mk)) top var(--mo) right var(--mo) / 1px var(--ml),
    linear-gradient(var(--mk), var(--mk)) bottom var(--mo) left var(--mo) / var(--ml) 1px,
    linear-gradient(var(--mk), var(--mk)) bottom var(--mo) left var(--mo) / 1px var(--ml),
    linear-gradient(var(--mk), var(--mk)) bottom var(--mo) right var(--mo) / var(--ml) 1px,
    linear-gradient(var(--mk), var(--mk)) bottom var(--mo) right var(--mo) / 1px var(--ml),
    var(--surface-2);
  background-repeat: no-repeat;
}
.plate-image { position: relative; }
.plate-image img { width: 100%; outline: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.mark {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary);
  box-shadow: 0 0 0 2px rgb(11 9 7 / 0.7);
  font: 600 12px/1 var(--font-label); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: scale .25s var(--ease), box-shadow .25s var(--ease);
}
.mark[data-active], .mark:hover { scale: 1.18; box-shadow: 0 0 0 2px rgb(11 9 7 / 0.7), 0 0 0 5px var(--primary); }
.plate figcaption { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-lg); margin-top: var(--s-md); }
.plate-title { grid-column: 1 / span 4; margin: 0; font-size: var(--size-small); color: var(--text-secondary); }
.plate-no { margin-right: 8px; font-family: var(--font-label); font-size: var(--size-label); font-weight: 500; color: var(--ink); }
.key { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px var(--s-lg); margin: 0; padding: 0; list-style: none; counter-reset: key; }
.key li { position: relative; padding: 6px 8px 6px 36px; border-radius: var(--r-sm); font-size: var(--size-small); line-height: 1.45; color: var(--text-secondary); counter-increment: key; transition: background-color .2s var(--ease); }
.key li::before {
  content: counter(key); position: absolute; left: 6px; top: 6px; display: grid; place-items: center; width: 20px; height: 20px;
  border: 1.5px solid var(--primary-ink); border-radius: var(--r-pill); font: 600 11px/1 var(--font-label); color: var(--primary-ink);
}
.key li b { font-weight: 600; color: var(--ink); margin-right: 4px; }
.key li[data-active] { background: var(--surface-1); }
.plate .note { grid-column: 5 / -1; margin: var(--s-sm) 0 0 8px; font-size: 13px; color: var(--text-muted); }
@media (max-width: 860px) {
  .plate-title, .key, .plate .note { grid-column: 1 / -1; }
  .key { margin-top: var(--s-sm); }
  .plate .note { margin-left: 0; }
}
@media (max-width: 560px) { .mark { width: 20px; height: 20px; font-size: 10px; } }

/* sections */
.sec { padding-top: clamp(80px, 10vw, var(--s-3xl)); }
.sec-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-lg); row-gap: var(--s-xl); padding-top: var(--s-lg); border-top: 2px solid var(--rule-strong); }
.sec-head { grid-column: 1 / span 4; align-self: start; }
.sec-head p { margin: var(--s-md) 0 0; max-width: 40ch; font-size: 16px; color: var(--text-secondary); }
.sec-head .actions { margin-top: var(--s-lg); }
.sec-grid > :not(.sec-head) { grid-column: 6 / -1; min-width: 0; }
@media (min-width: 1041px) { .sec-head { position: sticky; top: 92px; } }
@media (max-width: 1040px) { .sec-head, .sec-grid > :not(.sec-head) { grid-column: 1 / -1; } }

/* signal path: the one ordered sequence on the page */
.path { margin: 0; padding: 0; list-style: none; counter-reset: stage; background: linear-gradient(var(--rule), var(--rule)) 44px 14px / 1px calc(100% - 40px) no-repeat; }
.path li { position: relative; padding: 0 0 var(--s-xl) 72px; counter-increment: stage; }
.path li:last-child { padding-bottom: 0; }
.path li::before { content: counter(stage, decimal-leading-zero); position: absolute; left: 0; top: 4px; font: 400 var(--size-label) var(--font-label); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.path li::after { content: ""; position: absolute; left: 39px; top: 8px; width: 11px; height: 11px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--surface-0); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.path li:hover::after { background: var(--primary); border-color: var(--primary); }
.path p { margin: 6px 0 0; max-width: 62ch; font-size: 16px; color: var(--text-secondary); }
.mapping { display: grid; gap: 1px; margin: var(--s-md) 0 0; padding: 0; max-width: 520px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--rule); overflow: hidden; }
.mapping div { display: flex; justify-content: space-between; gap: var(--s-md); padding: 9px 14px; background: var(--surface-1); font-size: 14px; }
.mapping dt { color: var(--text-secondary); }
.mapping dd { margin: 0; white-space: nowrap; }
.mapping dd::before { content: "→ "; color: var(--primary-ink); font-family: var(--font-readout); }
.mapping code { color: var(--ink); }
.outcomes { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--font-label); font-size: var(--size-label); color: var(--text-secondary); }
.o::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: var(--r-sm); vertical-align: -1px; }
.o.pos::before { background: var(--div-pos); }
.o.neg::before { background: var(--div-neg); }
.o.mid::before { background: var(--div-mid); }
/* the Atlas marks context-dependent outcomes with a hatch, so outcomes never rely on color alone */
.o.ctx::before { background: repeating-linear-gradient(135deg, var(--text-muted) 0 1.5px, transparent 1.5px 4px); outline: 1px solid var(--text-muted); outline-offset: -1px; }

/* anatomy of a claim */
.specimen { border-top: 2px solid var(--rule-strong); }
.specimen-head { display: flex; justify-content: space-between; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--rule); font-family: var(--font-label); font-size: var(--size-label); }
.specimen-head span:last-child { color: var(--text-muted); }
.tree, .tree ul { margin: 0; padding: 0; list-style: none; }
.tree ul { grid-column: 1 / -1; margin-left: 5px; padding-left: 22px; border-left: 1px solid var(--rule); }
.tree li { position: relative; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); column-gap: var(--s-lg); }
.tree li > .f, .tree li > .d { padding: 11px 0; border-bottom: 1px solid var(--rule); }
.tree ul li::before { content: ""; position: absolute; left: -22px; top: 1.45em; width: 14px; height: 1px; background: var(--rule); }
.tree .f code { font-size: var(--size-readout); color: var(--ink); }
.tree .f { color: var(--text-muted); }
.tree .d { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.tree .d code { font-size: 12.5px; color: var(--ink); }
@media (max-width: 640px) {
  .tree li { grid-template-columns: 1fr; }
  .tree li > .f { padding-bottom: 0; border-bottom: 0; }
  .tree li > .d { padding-top: 2px; }
}

/* atlas */
.atlas-body { display: grid; gap: var(--s-xl); }
.trace { margin: 0; }
.trace-plot { padding: var(--s-md) 0 0; border-top: 2px solid var(--rule-strong); }
.lanes { display: grid; gap: 10px; }
.lane { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; column-gap: 12px; }
.lane-label { font-family: var(--font-label); font-size: var(--size-label); line-height: 1.3; color: var(--ink); font-variant-numeric: tabular-nums; }
.lane-label small { display: block; font-size: 11px; color: var(--text-muted); }
.lane svg { display: block; width: 100%; height: 38px; }
.axis { position: relative; height: 26px; margin: 6px 0 0 104px; border-top: 1px solid var(--rule-strong); font-family: var(--font-label); font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.axis span { position: absolute; top: 0; translate: -50% 0; padding-top: 6px; }
.axis span::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 4px; background: var(--rule-strong); }
.axis .unit { right: 0; translate: 0 0; }
.axis .unit::before { content: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: var(--s-sm) 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-secondary); }
.legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: var(--r-sm); vertical-align: -1px; }
.legend .x { margin-right: 5px; color: var(--status-critical); }
.trace figcaption { margin-top: var(--s-md); font-size: 13px; color: var(--text-muted); }
.views { margin: 0; border-top: 1px solid var(--rule); }
.views div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s-lg); padding: 12px 0; border-bottom: 1px solid var(--rule); }
.views dt { font-weight: 600; font-size: 15px; }
.views dd { margin: 0; font-size: 15px; color: var(--text-secondary); }
@media (max-width: 560px) { .views div { grid-template-columns: 1fr; gap: 2px; } .lane { grid-template-columns: 64px minmax(0, 1fr); } .axis { margin-left: 76px; } }

/* ruled tables */
.table-wrap { min-width: 0; }
.ruled { width: 100%; border-collapse: collapse; border-top: 2px solid var(--rule-strong); }
.ruled thead th { padding: 10px var(--s-md) 10px 0; border-bottom: 1px solid var(--rule-strong); text-align: left; font-family: var(--font-label); font-size: var(--size-label); font-weight: 400; color: var(--text-muted); }
.ruled tbody th, .ruled td { padding: 14px var(--s-md) 14px 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.ruled tbody th { font-size: 16px; font-weight: 600; white-space: nowrap; }
.ruled tbody th img { display: inline-block; margin: 0 10px 0 0; vertical-align: -4px; border-radius: var(--r-sm); background: #fff; }
.ruled td { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.ruled td code { display: block; margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.ruled tbody th code { font-size: 14px; font-weight: 500; }
.harness-table td:nth-child(2) { width: 30%; }
@media (max-width: 720px) {
  .ruled thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ruled tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .ruled tbody th, .ruled td { display: block; width: auto !important; padding: 2px 0; border: 0; white-space: normal; }
  .ruled td[data-label]::before { content: attr(data-label); display: block; margin-top: 8px; font-family: var(--font-label); font-size: 11px; color: var(--text-muted); }
}
.packets { display: grid; gap: var(--s-lg); }
.readout { margin: 0; padding: 14px 18px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface-1); font-size: var(--size-readout); line-height: 1.7; overflow-x: auto; }
.readout code { font-size: inherit; }
.readout .c { color: var(--text-muted); }
.fine { margin: 0; max-width: 70ch; font-size: 14px; color: var(--text-muted); }
.fine code { color: var(--text-secondary); }

/* film: a projection room in both themes */
.film { margin-top: clamp(80px, 10vw, var(--s-3xl)); padding: clamp(56px, 8vw, 104px) 0; background: var(--projection); color: var(--projection-ink); line-height: 1.66; }
.film-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-lg); row-gap: var(--s-xl); align-items: start; }
.film-screen { grid-column: 1 / span 8; }
.film-screen video { width: 100%; aspect-ratio: 16 / 9; background: #000; outline: 1px solid var(--projection-rule); }
.film-side { grid-column: 9 / span 4; }
.film-side h2 { color: var(--projection-ink); }
.film-side p { margin: var(--s-md) 0 0; font-size: 15px; color: var(--projection-muted); }
.chapters { margin: var(--s-lg) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--projection-rule); }
.chapters button {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; width: 100%; padding: 10px 0;
  border: 0; border-bottom: 1px solid var(--projection-rule); background: none; color: var(--projection-ink);
  font: 400 15px var(--font-body); text-align: left; cursor: pointer;
}
.chapters button::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: transparent; transition: background-color .2s var(--ease); }
.chapters time { font-size: var(--size-label); color: var(--projection-muted); font-variant-numeric: tabular-nums; }
.chapters button:hover { color: #fff; }
.chapters button[aria-current="true"] { font-weight: 600; }
.chapters button[aria-current="true"] time { color: #fba541; }
.chapters button[aria-current="true"]::after { background: #fba541; }
.chapters button:focus-visible { outline-color: #fba541; }
@media (max-width: 1040px) { .film-screen, .film-side { grid-column: 1 / -1; } .chapters { columns: 2; column-gap: var(--s-lg); } .chapters li { break-inside: avoid; } }
@media (max-width: 520px) { .chapters { columns: 1; } }

/* constraints, start */
.constraints { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: var(--s-xl); margin: 0; }
.constraints div { padding: 16px 0 20px; border-top: 1px solid var(--rule); }
.constraints dt { font-weight: 600; font-size: 17px; font-stretch: 104%; }
.constraints dd { margin: 6px 0 0; font-size: 15px; color: var(--text-secondary); }
.terminal { border: 0; background: var(--projection); color: var(--projection-ink); }
.terminal .c { color: var(--projection-muted); }

/* colophon */
.colophon { margin-top: clamp(80px, 10vw, var(--s-3xl)); padding-bottom: var(--s-xl); }
.colophon-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px var(--s-lg); padding-top: var(--s-md); border-top: 2px solid var(--rule-strong); font-size: 14px; color: var(--text-muted); }
.colophon p { margin: 0; }
.wm-foot { margin-right: 6px; font-weight: 600; color: var(--ink); }
#build { font-family: var(--font-label); font-size: var(--size-label); }
.colophon .links { display: flex; flex-wrap: wrap; gap: var(--s-lg); }
.colophon a { color: var(--text-secondary); text-underline-offset: 4px; }
.colophon a:hover { color: var(--ink); }

/* motion: content is visible by default; these only animate it in */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .spec tr { animation: readout .55s var(--ease) both; animation-delay: calc(200ms + var(--i) * 70ms); }
  .mark { animation: mark-in .5s var(--ease) both; animation-delay: calc(700ms + var(--n) * 90ms); }
  @supports (animation-timeline: view()) {
    .lane svg { animation: acquire linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
  }
}
@keyframes readout { from { opacity: 0; translate: 0 6px; } }
@keyframes mark-in { from { opacity: 0; scale: 0.4; } }
@keyframes acquire { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; } }