/* ZENREI public site: every page except the overview. */
:root { --ok: #8fd9b0; --code: #181a2b; --code-line: #2c2f4a; --code-dim: #8f94b8; }
html { padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px); }
pre { margin: 0; }
.wrap { max-width: 1080px; }
.note { font-size: .84rem; color: var(--mist); }
.wordmark { font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: .34em; text-decoration: none; }
.site-header .back { font-size: .88rem; color: var(--mist); margin-left: auto; }
.hero .wrap { display: grid; gap: 26px; justify-items: start; padding-block: 56px 110px; }
.sig { font-family: var(--mono); font-size: clamp(1.5rem, 4.4vw, 2.6rem); letter-spacing: .04em; color: var(--ai); }
.sig-block { display: grid; gap: 12px; padding-left: 20px; border-left: 2px solid var(--ai); }
.sig-read { max-width: 34em; font-size: 1rem; color: var(--washi); }
.hero h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); }
.hero p.lead { max-width: 33em; font-size: 1.14rem; color: var(--mist); }
.section > .wrap { display: grid; gap: 44px; padding-block: clamp(76px, 10vw, 128px); }
.head { display: grid; gap: 16px; max-width: 40em; }
.section h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); }
.head p { color: var(--mist); }

/* Flow */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.flow li { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 18px 22px 0; border-top: 2px solid var(--washi); }
.flow li.ai { border-top-color: var(--ai); }
.flow li::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--washi); }
.flow li.ai::before { background: var(--ai); }
.flow b { font-family: var(--display); font-size: 1.12rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.flow p { font-size: .88rem; color: var(--mist); line-height: 1.5; }
.flow .who { font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.flow li.ai .who { color: var(--ai); }

/* One engine */
.engines { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.engines figure { margin: 0; display: grid; gap: 18px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; }
.engines figure.us { border-color: var(--ai); }
.engines svg { width: 100%; height: auto; }
.engines figcaption { display: grid; gap: 6px; }
.engines figcaption b { font-family: var(--display); font-size: 1.2rem; font-weight: 500; letter-spacing: -.02em; }
.engines figcaption span { color: var(--mist); font-size: .92rem; }
.blk { fill: none; stroke: var(--mist); stroke-width: 1.3; }
.blk-us { fill: none; stroke: var(--washi); stroke-width: 1.3; }
.core { fill: var(--ai); }
.wire { stroke: var(--ai); stroke-width: 1.2; fill: none; }
.engines text { fill: var(--mist); font-family: var(--mono); font-size: 9px; letter-spacing: .08em; }

/* ZENREI-lang outline and notes */
.lang { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.codebox { border: 1px solid var(--code-line); border-radius: 16px; background: var(--code); overflow-x: auto; }
.codebox pre { padding: 22px 22px 22px 18px; font-family: var(--mono); font-size: .78rem; line-height: 1.85; white-space: pre; color: var(--washi); }
.codebox b { font-weight: 400; color: var(--ai); }
.codebox .n { display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-left: .8em; border-radius: 50%; background: var(--ai); color: var(--ink); font-size: .7rem; font-weight: 500; }
.sil { padding: 26px 24px; display: grid; gap: 11px; font-family: var(--mono); font-size: .62rem; }
.sil .row { display: flex; align-items: center; gap: 1ch; height: 9px; white-space: nowrap; }
.sil .row.gap { height: 5px; }
.sil i { flex: none; height: 7px; border-radius: 4px; background: var(--code-line); }
.sil i.k { background: var(--ai); opacity: .75; }
.sil .n { font-size: .68rem; margin-left: 1ch; flex: none; }
.notes { display: grid; gap: 22px; counter-reset: n; }
.notes li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; counter-increment: n; }
.notes li::before { content: counter(n); grid-row: span 2; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--ai); color: var(--ink); font-family: var(--mono); font-size: .76rem; }
.notes b { font-weight: 600; }
.notes p { grid-column: 2; color: var(--mist); font-size: .92rem; line-height: 1.55; }

/* Guarantees */
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.rules li { display: grid; gap: 10px; align-content: start; padding: 30px 28px; background: var(--ink); }
.rules code { font-family: var(--mono); font-size: .8rem; color: var(--ai); }
.rules b { font-family: var(--display); font-size: 1.3rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; }
.rules p { color: var(--mist); font-size: .94rem; }

/* Mutation evidence */
.mut { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.dots { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 10px; max-width: 520px; }
.dots i { aspect-ratio: 1; border-radius: 50%; background: var(--washi); }
.dots i.late { background: transparent; border: 2px solid var(--washi); }
.dots i.type { background: var(--ai); }
.key { display: grid; gap: 8px; margin-top: 22px; font-size: .88rem; color: var(--mist); }
.key span { display: flex; align-items: center; gap: 10px; }
.key i { width: 12px; height: 12px; border-radius: 50%; background: var(--washi); flex: none; }
.key i.late { background: transparent; border: 2px solid var(--washi); }
.key i.type { background: var(--ai); }
.big { font-family: var(--display); font-size: clamp(3rem, 9vw, 6rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.big small { font-size: .32em; letter-spacing: -.01em; color: var(--mist); margin-left: .4em; }

/* Limits and stack */
.limits { display: grid; gap: 0; max-width: 46em; border-top: 1px solid var(--line); }
.limits li { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.limits b { font-weight: 600; }
.limits p { color: var(--mist); font-size: .94rem; }
.stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.stack li { display: grid; gap: 6px; align-content: start; padding-top: 16px; border-top: 1px solid var(--washi); }
.stack b { font-family: var(--display); font-size: 1.15rem; font-weight: 500; }
.stack span { color: var(--mist); font-size: .88rem; line-height: 1.5; }
.closing .wrap { justify-items: start; gap: 24px; }
.closing .ja { font-size: clamp(1.7rem, 4.6vw, 3.4rem); font-weight: 500; letter-spacing: .08em; }
.button { transition: background-color .2s; }
.site-footer .wrap { padding-block: 28px 44px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--mist); display: grid; gap: 18px; }
@media (max-width: 860px) {
  .sil { font-size: .36rem; padding: 20px 16px; }
  .sil .n { font-size: .62rem; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow li { padding: 18px 0 18px 26px; border-top: 0; border-left: 2px solid var(--washi); }
  .flow li.ai { border-left-color: var(--ai); }
  .flow li::before { top: 22px; left: -7px; }
  .engines, .lang, .rules, .mut { grid-template-columns: minmax(0, 1fr); }
  .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .stack { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}
.page .wrap > *, .prose > *, .prose section > *, .lang > *, .mut > * { min-width: 0; }

/* Prose pages and footer navigation */
.page .wrap { display: grid; gap: 40px; padding-block: 56px 110px; }
.page h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); }
.page .lead { max-width: 34em; font-size: 1.12rem; color: var(--mist); }
.prose { display: grid; gap: 34px; max-width: 46em; }
.prose section { display: grid; gap: 12px; }
.prose h2 { font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.2; }
.prose p, .prose li { color: var(--mist); font-size: .98rem; }
.prose ul { display: grid; gap: 8px; padding-left: 1.1em; list-style: disc; }
.prose strong { color: var(--washi); font-weight: 600; }
.facts { width: 100%; max-width: 46em; border-collapse: collapse; }
.facts th, .facts td { padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .98rem; }
.facts th { width: 11em; font-weight: 500; color: var(--mist); padding-right: 20px; }
.tbl-scroll { overflow-x: auto; max-width: 100%; }
.tbl { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .88rem; }
.tbl th, .tbl td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--mist); }
.tbl th { color: var(--washi); font-weight: 500; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; max-width: 46em; }
.cards li { display: grid; gap: 8px; align-content: start; padding: 26px 24px; background: var(--ink); }
.cards b { font-family: var(--display); font-size: 1.15rem; font-weight: 500; letter-spacing: -.02em; }
.cards p { color: var(--mist); font-size: .92rem; }
.quote { max-width: 30em; display: grid; gap: 1.1em; font-family: var(--display); font-size: clamp(1.2rem, 2.3vw, 1.6rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.4; }
.quote p:last-child { font-family: var(--sans); font-size: .9rem; letter-spacing: 0; color: var(--mist); }
button.button { border: 0; cursor: pointer; font: inherit; font-weight: 600; justify-self: start; }
@media (max-width: 620px) {
  .cards { grid-template-columns: minmax(0, 1fr); }
  .facts th { width: 8em; }
}

/* Language picker, top right */