:root {
  --ground:    #E3E2DD;
  --surface:   #EFEDE9;
  --ink:       #171614;
  --on-ink:    #F4F2EF;
  --body:      #3B3833;
  --muted:     #625E58;
  --muted-ink: #8C857C;
  --dim-ink:   #B5AFA7;
  --line:      rgba(23, 22, 20, .14);
  --line-2:    rgba(23, 22, 20, .18);
  --line-ink:  rgba(244, 242, 239, .18);

  --accent:      #E357AE;
  --accent-lift: #FF9AD9;
  --accent-deep: #A2307F;
  --good:        #29703E;
  --good-lift:   #A9E0B4;

  --shell: 1180px;
  --gutter: 32px;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Space Grotesk', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  max-width: 100%;
  overflow-x: hidden;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent); }
/* A link inside running text is underlined, so it is not told apart by colour alone. */
:where(p, li, td, dd, blockquote, figcaption) a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

.shell { max-width: var(--shell); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--muted); margin-bottom: 18px; text-transform: uppercase;
}
.label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 14px; text-transform: uppercase;
}
h2 { font-size: 46px; line-height: 1.06; letter-spacing: -.028em; font-weight: 700; margin: 0 0 18px; }
.section-lede { font-size: 18px; line-height: 1.6; color: var(--body); margin: 0 0 44px; max-width: 44em; }
.footnote { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 26px 0 0; max-width: 46em; }

/* ---------- nav ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(227, 226, 221, .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(23, 22, 20, .12);
}

/* On the landing page only, the nav stays out of the way of the hero --
   no chrome until the reader has moved past the pitch on their own.
   Hidden rather than removed (not display:none) so it keeps its layout
   slot and the reveal has something to animate. Entry runs longer than
   exit: arriving is the moment worth a beat, leaving should just get
   out of the way. docs.html's plain .nav is untouched by this rule. */
.nav-hero-gated {
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.nav-hero-gated.nav-visible {
  opacity: 1; transform: translateY(0); pointer-events: auto;
  transition: opacity .32s cubic-bezier(.16, 1, .3, 1), transform .32s cubic-bezier(.16, 1, .3, 1);
}
/* Zero-height marker, not a layout element: the reveal watches when this
   scrolls past the viewport top rather than tracking pixel scroll
   distance, which would drift out of sync as the receipt's height
   changes while its trail types itself in. */
#hero-end { block-size: 0; }

.nav-inner {
  max-width: var(--shell); margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* The lockup is a real image, cut to 694x360 by site/make_assets.py.
   At 1.928:1 it renders at exactly the two sizes the design specified. */
.mark { display: block; flex: none; height: auto; }
.mark-nav { width: 115px; }
.nav-links {
  display: flex; align-items: center; gap: 22px;
  font-size: 13.5px; letter-spacing: .02em; white-space: nowrap;
}
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.btn-accent { background: var(--accent); color: var(--ink); }
.btn-accent:hover { background: var(--ink); color: var(--on-ink); }
.btn {
  flex: none; border-radius: 2px; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn-dark {
  padding: 9px 16px; background: var(--ink); color: var(--on-ink);
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
}
.btn-dark:hover { background: var(--accent); color: var(--ink); }

/* ---------- hero ---------- */

.hero { padding-top: 72px; padding-bottom: 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.mark-hero { width: 340px; max-width: 100%; margin-bottom: 28px; }
.hero .eyebrow { font-size: 11.5px; }
h1 { font-size: 62px; line-height: 1.02; letter-spacing: -.032em; font-weight: 700; margin: 0 0 22px; }
.lede { font-size: 18.5px; line-height: 1.55; color: var(--body); margin: 0 0 14px; max-width: 30em; }
.lede + .lede { margin-bottom: 32px; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-solid { padding: 13px 22px; background: var(--ink); color: var(--on-ink); font-size: 14.5px; font-weight: 500; }
.btn-solid:hover { background: var(--accent); color: var(--ink); }
.btn-outline {
  padding: 13px 22px; border: 1px solid rgba(23, 22, 20, .28);
  font-size: 14.5px; font-weight: 500;
}
.btn-outline:hover { border-color: var(--accent); }

/* ---------- try it live ---------- */

#try-it { scroll-margin-top: 90px; }
.try-form {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  margin: 36px 0 28px; padding: 24px 26px; border: 1px solid var(--line-2);
}
.try-field { display: flex; flex-direction: column; gap: 8px; }
.try-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--muted); text-transform: uppercase;
}
.try-field select, .try-field input {
  font-family: var(--mono); font-size: 14px; padding: 10px 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 2px; min-width: 160px;
}
.try-field select:focus, .try-field input:focus {
  outline: none; border-color: var(--accent);
}
.try-submit { border: none; cursor: pointer; }
.try-submit:disabled { opacity: .6; cursor: progress; }
.try-receipt pre { white-space: pre-wrap; min-height: 0; }

/* ---------- receipt ---------- */

#receipt { scroll-margin-top: 90px; }
.receipt {
  background: var(--ink); border-radius: 3px; padding: 22px 24px 26px;
  box-shadow: 0 24px 60px -30px rgba(23, 22, 20, .6);
}
.receipt-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--muted-ink);
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid rgba(244, 242, 239, .14);
}
.receipt-live { color: var(--accent-lift); }
.receipt pre {
  margin: 0; font-family: var(--mono); font-size: 12.4px; line-height: 1.72;
  color: #DCD8D2; white-space: pre-wrap; min-height: 420px;
}
.caret { color: var(--accent-lift); animation: blink 1s steps(1) infinite; }
.receipt-caption { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 16px 2px 0; }

@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@keyframes stampIn {
  0%   { transform: rotate(-9deg) scale(2.4); opacity: 0 }
  60%  { transform: rotate(-9deg) scale(1);   opacity: 1 }
  70%  { transform: rotate(-9deg) scale(1.04) }
  100% { transform: rotate(-9deg) scale(1);   opacity: 1 }
}

/* ---------- stats ---------- */

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line); margin-top: 64px;
}
.stat { background: var(--ground); padding: 22px 24px; }
.stat .label { margin-bottom: 8px; }
.stat-value {
  font-size: 34px; font-weight: 700; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-note { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ---------- dark bands ---------- */

.band { background: var(--ink); color: var(--on-ink); }
.band .eyebrow, .band .label { color: var(--muted-ink); }
.band .section-lede { color: var(--dim-ink); }
.band .footnote { color: var(--muted-ink); }
.band-inner { padding-top: 96px; padding-bottom: 100px; }

#missing { margin-top: 40px; scroll-margin-top: 70px; }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.panel { border: 1px solid var(--line-ink); padding: 28px 28px 30px; }
.panel-flag { border-color: rgba(255, 154, 217, .45); background: rgba(227, 87, 174, .06); }
.panel-flag .label { color: var(--accent-lift); }
.panel .label { margin-bottom: 20px; }

.metric { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.metric-value { font-size: 76px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.metric-flag .metric-value { color: var(--accent-lift); }
.metric-unit { font-size: 15px; color: var(--dim-ink); }

.readout {
  font-family: var(--mono); font-size: 12.6px; line-height: 1.9;
  color: var(--dim-ink); margin-top: 22px;
}
.readout .faint { color: var(--muted-ink); }
.readout .good { color: var(--good-lift); margin-top: 10px; }
.readout .flag { color: var(--accent-lift); }
.readout .flag-lead { color: var(--accent-lift); margin-top: 10px; }

/* ---------- voices ---------- */

#voices { padding-top: 96px; padding-bottom: 40px; scroll-margin-top: 70px; }
.voices { display: grid; grid-template-columns: 1fr 1fr 1fr .9fr; gap: 20px; align-items: stretch; }
.voice { border: 1px solid rgba(23, 22, 20, .16); padding: 24px; background: var(--surface); }
.voice-echo {
  border: 1px dashed rgba(227, 87, 174, .7);
  background: rgba(227, 87, 174, .07);
  transition: opacity .5s ease;
}
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink); color: var(--on-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; margin-bottom: 16px;
}
.avatar-echo { background: var(--accent); color: var(--ink); }
.voice-name { font-family: var(--mono); font-size: 13px; margin-bottom: 6px; }
.voice-note { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.voice-status { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; margin-top: 16px; }
.counted { color: var(--good); }
.demoted { color: var(--accent-deep); }

.voice-tally {
  border: 1px solid var(--ink); padding: 24px;
  background: var(--ink); color: var(--on-ink);
  display: flex; flex-direction: column; justify-content: center;
}
.voice-tally .label { color: var(--muted-ink); margin-bottom: 10px; }
.tally-value { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.tally-note { font-size: 13px; color: var(--dim-ink); margin-top: 8px; }

/* ---------- commitment ---------- */

#commitment { padding-top: 96px; padding-bottom: 40px; scroll-margin-top: 70px; }
.seal { border: 1px solid rgba(23, 22, 20, .2); background: var(--surface); padding: 28px; }
.seal-graded { position: relative; overflow: hidden; }
.seal-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 22px; text-transform: uppercase;
}
.seal-verdict { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 4px; }
.seal-body { font-family: var(--mono); font-size: 12.6px; line-height: 1.95; color: var(--body); margin-top: 18px; }
.seal-body .faint { color: var(--muted); }
.seal-body .gap { margin-top: 14px; }
.seal-body .met { color: var(--accent-deep); }
.seal-body .held { color: var(--good); }

.stamp {
  position: absolute; right: -14px; bottom: 18px;
  border: 4px solid var(--accent-deep); color: var(--accent-deep);
  border-radius: 4px; padding: 8px 20px;
  font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: .06em;
  opacity: .82;
  animation: stampIn 620ms cubic-bezier(.2, .8, .2, 1) both;
}

/* ---------- pipeline ---------- */

#pipeline { padding-top: 96px; padding-bottom: 40px; scroll-margin-top: 70px; }
.pipeline { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: stretch; }
.stage { border: 1px solid var(--line-2); border-right: none; padding: 26px 24px; background: var(--surface); }
.stage:last-child { border-right: 1px solid var(--line-2); }
.stage .label { margin-bottom: 14px; }
.stage-name { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.stage-note { font-size: 14.5px; line-height: 1.55; color: var(--body); }
.stage-purity { font-family: var(--mono); font-size: 11px; margin-top: 18px; color: var(--accent-deep); }
.stage-dark { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.stage-dark .label { color: var(--muted-ink); }
.stage-dark .stage-note { color: var(--dim-ink); }
.stage-dark .stage-purity { color: var(--accent-lift); }
.stage-dark:last-child { border-right: 1px solid var(--ink); }

.boundary {
  width: 56px; background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.boundary span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; font-weight: 700;
  color: var(--ink); writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
}

.notes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.note-card { border: 1px solid var(--line-2); padding: 28px; background: var(--surface); }
.note-body { font-size: 15.5px; line-height: 1.6; color: var(--body); }
.note-limit {
  font-size: 14px; line-height: 1.6; color: var(--accent-deep);
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}

/* ---------- proof ---------- */

#proof { padding-top: 96px; padding-bottom: 40px; }
#proof h2 { margin-bottom: 44px; }
.proof-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.proof-head { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; margin-bottom: 18px; text-transform: uppercase; }
.proof-head.good { color: var(--good); }
.proof-head.open { color: var(--accent-deep); }
.proof-list { list-style: none; margin: 0; padding: 0; }
.proof-item {
  display: grid; grid-template-columns: 20px 1fr; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid rgba(23, 22, 20, .1);
  font-size: 15.5px; line-height: 1.5; color: var(--body);
}
.proof-item .sigil { font-family: var(--mono); }
.proof-item .sigil.good { color: var(--good); }
.proof-item .sigil.open { color: var(--accent-deep); }

/* ---------- name ---------- */

#name { margin-top: 96px; scroll-margin-top: 70px; }
#name .band-inner { padding-top: 100px; padding-bottom: 100px; }
.name-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.kanji { font-size: 120px; line-height: 1; font-weight: 700; letter-spacing: -.02em; margin-bottom: 20px; }
.kanji-sub { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--muted-ink); }
.name-lede { font-size: 21px; line-height: 1.55; margin: 0 0 20px; }
.name-body { font-size: 17px; line-height: 1.6; color: var(--dim-ink); margin: 0; }

.colophon {
  margin-top: 80px; padding-top: 28px;
  border-top: 1px solid rgba(244, 242, 239, .16);
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted-ink);
}
.colophon a { color: var(--accent-lift); }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .name-grid { grid-template-columns: 1fr; gap: 36px; }
  h1 { font-size: 52px; }
  h2 { font-size: 38px; }
  .pipeline { grid-template-columns: 1fr 1fr; }
  .stage { border-right: 1px solid var(--line-2); border-bottom: none; }
  .stage-dark, .stage-dark:last-child { border-right-color: var(--ink); }
  .boundary { grid-column: 1 / -1; width: auto; padding: 12px 0; }
  .boundary span { writing-mode: horizontal-tb; }
  .voices { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
  h1 { font-size: 40px; }
  h2 { font-size: 30px; }
  .kanji { font-size: 88px; }
  .metric-value { font-size: 58px; }
  .nav-links { display: none; }
  .nav-actions { gap: 6px; }
  /* 12px of vertical padding puts these near 36px tall. They are the two
     primary calls to action and the only tap targets in the sticky nav,
     so they clear the 24px WCAG minimum with room rather than sitting on
     it -- at 8px they measured 28px, which is a thumb-sized miss. */
  .nav-actions .btn { padding: 12px 10px; font-size: 9px; letter-spacing: .04em; }
  .stats { grid-template-columns: 1fr 1fr; }
  .two-col, .notes, .proof-grid, .voices, .pipeline { grid-template-columns: 1fr; }
  .stage { border-right: 1px solid var(--line-2); }
  .band-inner { padding-top: 64px; padding-bottom: 68px; }
  #voices, #commitment, #pipeline, #proof { padding-top: 64px; }
  .mark-hero { width: 200px; }
  /* The real trail is long -- built-time wrapping is tuned to the
     desktop card's width, so on a narrow phone every one of those
     lines wraps again and the card runs past 900px tall, burying the
     rest of the page. Capped and faded rather than shortened: the
     full, unedited trail is still what's in the DOM (view-source
     shows it, and a screen reader gets all of it) -- clipping is a
     visual affordance only, the same trick a real receipt printer
     does when it cuts the paper mid-run. Which lines land inside the
     cap is left to wherever the pixel count falls rather than
     hand-picked, so this reads as an honest preview and not a
     curated highlight reel. */
  .receipt { position: relative; max-height: 320px; overflow: hidden; }
  .receipt::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 72px;
    background: linear-gradient(to bottom, transparent, var(--ink));
    pointer-events: none;
  }
  .receipt pre { font-size: 11.5px; min-height: 0; }
  .stamp { font-size: 22px; right: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret { animation: none; }
  .stamp { animation: none; }
  .voice-echo { transition: none; }
  .nav-hero-gated, .nav-hero-gated.nav-visible { transition: none; }
}

/* ---------- docs page ---------- */

.docs-hero { padding-top: 64px; padding-bottom: 8px; }
.docs-hero h1 {
  font-size: 46px; line-height: 1.06; letter-spacing: -.028em; font-weight: 700;
  margin: 0 0 16px; max-width: 18em;
}
.docs-hero .lede { max-width: 42em; margin-bottom: 0; }
.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 28px;
}
.back-link:hover { color: var(--accent); }

.toc {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em;
  padding: 20px 0 0; margin: 32px 0 0; border-top: 1px solid var(--line);
}
.toc a { color: var(--muted); }
.toc a:hover { color: var(--accent); }

.doc-section { padding-top: 72px; scroll-margin-top: 24px; }
.doc-section:first-of-type { padding-top: 56px; }
.doc-section h2 { font-size: 32px; max-width: 26em; }
.doc-section .section-lede { margin-bottom: 32px; }

.layer-table { width: 100%; border-collapse: collapse; margin: 8px 0 0; }
.layer-table th {
  text-align: left; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  padding: 0 16px 12px 0; border-bottom: 1px solid var(--line-2);
}
.layer-table td {
  padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 1.5; vertical-align: top; color: var(--body);
}
.layer-table tr:last-child td { border-bottom: none; }
.layer-table code {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  background: var(--surface); padding: .15em .4em; border-radius: 2px; white-space: nowrap;
}
.layer-table .guarantee { color: var(--accent-deep); font-family: var(--mono); font-size: 13px; }

.doc-note { border: 1px solid var(--line-2); background: var(--surface); padding: 26px 28px; margin: 28px 0; }
.doc-note .label { margin-bottom: 12px; }
.doc-note p { font-size: 15.5px; line-height: 1.6; color: var(--body); margin: 0 0 14px; }
.doc-note p:last-child { margin-bottom: 0; }
.doc-note .limit {
  font-size: 14px; color: var(--accent-deep); margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--line);
}

.doc-live { margin: 14px 0; }
.doc-live-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--muted);
  margin-bottom: 6px;
}
.doc-live-head .live-tag { color: var(--accent-deep); }
.doc-live pre {
  background: var(--ink); color: #DCD8D2; border-radius: 3px; padding: 18px 20px;
  margin: 0; font-family: var(--mono); font-size: 12.4px; line-height: 1.7;
  white-space: pre-wrap; overflow-x: auto;
}

.teaser {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border: 1px solid var(--line-2); background: var(--surface); padding: 22px 26px; margin-top: 24px;
}
.teaser p { margin: 0; font-size: 15px; color: var(--body); max-width: 40em; }
.teaser a {
  flex: none; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em;
  white-space: nowrap; padding: 10px 18px; background: var(--ink); color: var(--on-ink); border-radius: 2px;
}
.teaser a:hover { background: var(--accent); color: var(--ink); }
.band .teaser { border-color: var(--line-ink); background: transparent; }
.band .teaser p { color: var(--dim-ink); }

.doc-list { max-width: none; }
.doc-list.open .sigil { color: var(--accent-deep); }

@media (max-width: 760px) {
  .docs-hero h1 { font-size: 34px; }
  .doc-section h2 { font-size: 26px; }
  .layer-table { display: block; overflow-x: auto; }
}

/* ---------- workbench ---------- */

.wb-section { padding-top: 56px; scroll-margin-top: 90px; }
.wb-voice-post {
  font-size: 13.5px; line-height: 1.55; color: var(--body); margin: 8px 0 12px;
}
.wb-check {
  display: flex; align-items: center; gap: 10px; font-family: var(--mono);
  font-size: 11px; letter-spacing: .04em; cursor: pointer; margin-top: 14px;
}
.wb-check input { margin: 0; flex: none; }
.wb-fieldset legend + .wb-check { margin-top: 22px; }
.wb-controls {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  border: 1px solid var(--line-2); padding: 24px 26px; margin: 28px 0;
}
.wb-field { display: flex; flex-direction: column; gap: 8px; }
.wb-field .try-label { margin-bottom: 0; }
.wb-field input[type="number"] {
  font-family: var(--mono); font-size: 14px; padding: 10px 12px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: 2px; width: 100%;
}
.wb-hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.wb-run-row { display: flex; align-items: center; gap: 16px; margin: 8px 0 32px; }
.wb-error { color: var(--accent-deep); font-family: var(--mono); font-size: 13px; }

.wb-diff {
  border: 1px solid var(--accent-deep); background: rgba(227, 87, 174, .06);
  padding: 22px 26px; margin: 0 0 32px;
}
.wb-diff .label { color: var(--accent-deep); }
.wb-diff-verdict { font-size: 22px; font-weight: 700; margin: 10px 0 14px; }
.wb-diff-verdict .arrow { color: var(--muted); margin: 0 10px; font-weight: 400; }
.wb-diff-rule {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: var(--body);
  padding: 8px 0; border-top: 1px solid var(--line);
}
.wb-diff-rule .rule-id { color: var(--accent-deep); }
.wb-unchanged { color: var(--muted); font-family: var(--mono); font-size: 13px; }

.seal-body .rule-blocked { color: var(--accent-deep); }
.seal-body .rule-satisfied { color: var(--good); }
.seal-body .rule-noted { color: var(--muted); }

/* ---------- accessibility, shared ---------- */

.skip-link {
  position: absolute; left: 12px; top: -48px; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 2px;
  font-family: var(--mono); font-size: 13px;
}
.skip-link:focus { top: 12px; color: var(--on-ink); }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-deep); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* ---------- drill ---------- */

.drill-summary { font-size: 20px; font-weight: 600; margin-bottom: 18px; }
.drill-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 18px; }
.drill-card { border: 1px solid var(--line-2); background: var(--surface); padding: 22px 24px; }
.drill-card.drill-broke { border-color: var(--accent-deep); }
.drill-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.drill-title { font-size: 20px; margin: 0; }
.drill-badge {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em; padding: 4px 10px;
  border: 1.5px solid currentColor; border-radius: 2px; flex: none;
}
.drill-held { color: var(--good); }
.drill-failed { color: var(--accent-deep); }
.drill-facts { display: grid; grid-template-columns: 7em 1fr; gap: 6px 14px; margin: 14px 0; font-size: 14.5px; }
.drill-facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.drill-facts dd { margin: 0; color: var(--body); }
.drill-trail {
  background: var(--ink); color: #DCD8D2; border-radius: 3px; padding: 14px 16px; margin: 0 0 14px;
  font-family: var(--mono); font-size: 12px; line-height: 1.65; white-space: pre-wrap; overflow-x: auto;
}
@media (max-width: 760px) { .drill-facts { grid-template-columns: 1fr; } }

/* ---------- echo index ---------- */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.echo-stats { margin-top: 18px; }
.echo-list { list-style: none; padding: 0; display: grid; gap: 16px; }
.echo-item { border: 1px solid var(--line-2); background: var(--surface); padding: 18px 22px; }
.echo-head { display: flex; gap: 16px; font-family: var(--mono); font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.echo-sim { color: var(--accent-deep); }
.echo-who { font-weight: 600; margin: 10px 0 6px; }
.echo-quote { margin: 0 0 10px; padding-left: 14px; border-left: 3px solid var(--line-2); color: var(--body); font-size: 14.5px; white-space: pre-wrap; }
.table-wrap { overflow-x: auto; }
.echo-table { border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
.echo-table th, .echo-table td { border: 1px solid var(--line-2); padding: 8px 14px; text-align: left; }
.echo-table thead th { background: var(--surface); }
.echo-default { outline: 2px solid var(--accent-deep); outline-offset: -2px; font-weight: 700; }

/* ---------- judges ---------- */

.judge-steps { padding-left: 1.3em; display: grid; gap: 10px; font-size: 16px; line-height: 1.55; max-width: 52em; margin-bottom: 40px; }
.judge-table { border-collapse: collapse; width: 100%; margin: 12px 0 32px; font-size: 14.5px; }
.judge-table th, .judge-table td { border: 1px solid var(--line-2); padding: 12px 14px; text-align: left; vertical-align: top; line-height: 1.55; }
.judge-table thead th { background: var(--surface); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.judge-table tbody th { width: 16em; font-weight: 600; }
.judge-table td:nth-child(2) { width: 15em; font-family: var(--mono); font-size: 12.5px; }
.wb-fieldset { border: none; margin: 0; padding: 0; min-width: 0; }
.wb-fieldset legend { padding: 0; margin-bottom: 8px; }

/* ---- live ledger ---------------------------------------------------- */
.ledger-changes, .ledger-reviews { list-style: none; padding: 0; display: grid; gap: 12px; }
.ledger-change, .ledger-review { border: 1px solid var(--line-2); background: var(--surface); padding: 16px 20px; }
.ledger-rank-3 { border-left: 4px solid var(--accent); }
.ledger-rank-2 { border-left: 4px solid var(--ink); }
.ledger-change-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; }
.ledger-token { font-family: var(--mono); font-weight: 700; letter-spacing: .04em; }
.ledger-headline { font-weight: 600; }
.ledger-why { margin: 8px 0 0; font-size: 14px; color: var(--body); }
.ledger-sub { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: 6px; }
.ledger-wrong { margin: 0; padding-left: 18px; font-size: 13.5px; }
.ledger-table td:nth-child(2) { width: 14em; }
.verdict-tag { font-family: var(--mono); font-weight: 700; font-size: 12.5px; letter-spacing: .08em; }
.verdict-enter { color: var(--good); }
.verdict-pass { color: var(--ink); }
.verdict-abstain { color: var(--muted); }
.ledger-result { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.ledger-result-held { color: var(--good); }
.ledger-result-falsified { color: var(--accent-deep); }
.ledger-result-inconclusive { color: var(--muted); }
.ledger-runs a { word-break: break-all; }

/* Accessibility: links in the footer line are underlined like links in text,
   and checkboxes meet the 24px minimum target size. */
.colophon a { text-decoration: underline; text-underline-offset: 2px; }
input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--ink); flex: none; }

/* Japanese text falls back to the system's Japanese typeface. */
:lang(ja) { font-family: 'Space Grotesk', 'Hiragino Sans', 'Yu Gothic UI', 'Yu Gothic', 'Noto Sans JP', 'Meiryo', sans-serif; line-break: strict; }
.ja-summary .section-lede, .ja-summary .proof-item { line-height: 1.85; }
.ja-summary { margin-bottom: 56px; }