style.css

:root {
  color-scheme: dark;
  --ink: #f8fbfd;
  --muted: #a8b6bd;
  --pale: #d9e2e6;
  --black: #050607;
  --black-deep: #010203;
  --panel: rgba(17, 23, 27, 0.88);
  --red: #ff1a1a;
  --red-soft: #ff7777;
  --red-dark: #3a0909;
  --cyan: #48cbe8;
  --cyan-soft: #a6edf8;
  --amber: #dfa958;
  --green: #6ac49b;
  --violet: #9988e5;
  --paper: #edf1f2;
  --paper-ink: #18252b;
  --paper-muted: #59686f;
  --line: rgba(217, 226, 230, 0.17);
  --focus: #ffd166;
  font-family: Poppins, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.4rem; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 2%, rgba(255, 26, 26, 0.17), transparent 29rem),
    radial-gradient(circle at 13% 39%, rgba(72, 203, 232, 0.07), transparent 24rem),
    linear-gradient(rgba(255, 26, 26, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 26, 26, 0.032) 1px, transparent 1px),
    var(--black-deep);
  background-size: auto, auto, 2.7rem 2.7rem, 2.7rem 2.7rem, auto;
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: var(--cyan); text-underline-offset: 0.22em; }
a:hover { color: var(--focus); }
a:focus-visible, .button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 0.2rem; }

.skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 30; padding: 0.8rem 1rem; color: #111; background: var(--focus); font-weight: 900; }
.skip-link:focus { top: 1rem; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(1, 2, 3, 0.95); border-bottom: 1px solid rgba(255, 26, 26, 0.28); backdrop-filter: blur(16px); }
nav { max-width: 84rem; margin: 0 auto; padding: 0.82rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--ink); text-decoration: none; font-weight: 900; }
.brand-mark { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid var(--red); color: var(--red-soft); font: 900 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; box-shadow: 0 0 1.3rem rgba(255, 26, 26, 0.18), inset 0 0 1rem rgba(255, 26, 26, 0.12); }
.nav-links { display: flex; flex-wrap: wrap; gap: 0.65rem 1.1rem; }
.nav-links a { color: var(--pale); text-decoration: none; font-size: 0.9rem; font-weight: 750; }
.nav-links a:hover { color: var(--red-soft); }

main { overflow: hidden; }
.hero, .section { max-width: 84rem; margin: 0 auto; padding: 6.2rem 1.5rem; }
.hero { min-height: calc(100vh - 4.2rem); display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(27rem, 1.08fr); align-items: center; gap: clamp(2.5rem, 6vw, 6.2rem); padding-top: 7.3rem; padding-bottom: 7.3rem; }
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 1rem; color: var(--red-soft); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.035em; }
h1 { margin: 0; max-width: 13ch; font-size: clamp(3.1rem, 6.5vw, 6.2rem); }
h2 { margin: 0; max-width: 18ch; font-size: clamp(2.25rem, 4.65vw, 4.45rem); }
h3 { margin: 0 0 0.72rem; font-size: 1.33rem; }
.lede { max-width: 46rem; margin: 2rem 0; color: var(--pale); font-size: clamp(1.12rem, 2vw, 1.42rem); }
.actions { display: flex; flex-wrap: wrap; gap: 0.82rem; margin: 2.1rem 0 1.3rem; }
.button { display: inline-block; padding: 0.9rem 1.2rem; border: 2px solid var(--red); font-weight: 850; text-decoration: none; }
.button.primary { color: #0b0000; background: var(--red); }
.button.primary:hover { color: #111; background: var(--focus); border-color: var(--focus); }
.button.secondary { color: var(--red-soft); background: rgba(1, 2, 3, 0.55); }
.button.secondary:hover { color: var(--focus); border-color: var(--focus); }
.quiet { color: var(--muted); font-size: 0.93rem; }
.hero-visual { position: relative; margin: 0; border: 1px solid rgba(255, 26, 26, 0.5); background: #000; box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.6), 0 0 2.8rem rgba(255, 26, 26, 0.09); }
.hero-visual::before { content: "SCOPE → RISK → ORACLE → EVIDENCE → REVIEW → GATE"; position: absolute; z-index: 1; top: -1.5rem; right: 0; color: var(--cyan-soft); font: 800 0.65rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; }
.hero-visual::after { content: ""; position: absolute; right: -0.55rem; bottom: -0.55rem; width: 4.5rem; height: 4.5rem; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); pointer-events: none; filter: drop-shadow(0 0 0.5rem rgba(255, 26, 26, 0.35)); }
.hero-visual img { width: 100%; height: auto; }

.section { border-top: 1px solid var(--line); }
.section-heading { max-width: 60rem; margin-bottom: 3.1rem; }
.section-heading > p:last-child { color: var(--muted); font-size: 1.08rem; }

.wager-section { max-width: none; padding-left: max(1.5rem, calc((100vw - 81rem) / 2)); padding-right: max(1.5rem, calc((100vw - 81rem) / 2)); }
.capability-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.capability-grid article { min-height: 21rem; padding: 1.5rem; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); }
.capability-grid .operator { border-top: 4px solid var(--red); }
.capability-grid .reviewer { border-top: 4px solid var(--cyan); }
.capability-grid article > span { display: block; margin-bottom: 3.5rem; color: var(--red-soft); font: 850 0.72rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; }
.capability-grid .reviewer > span { color: var(--cyan-soft); }
.capability-grid p { color: var(--muted); }

.chain-section { max-width: none; padding-left: max(1.5rem, calc((100vw - 81rem) / 2)); padding-right: max(1.5rem, calc((100vw - 81rem) / 2)); color: var(--paper-ink); background: var(--paper); }
.chain-section .eyebrow { color: #b01616; }
.evidence-chain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(10.5rem, 1fr)); border: 1px solid rgba(24, 37, 43, 0.14); overflow-x: auto; background: #f9fbfb; }
.evidence-chain li { min-width: 11rem; padding: 1.4rem 1rem; border-right: 1px solid rgba(24, 37, 43, 0.12); }
.evidence-chain li:last-child { border-right: 0; }
.evidence-chain li > span { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 2rem; border: 2px solid #b01616; border-radius: 50%; color: #fff; background: #b01616; font: 900 0.69rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.evidence-chain li:nth-child(even) > span { border-color: #2d8398; background: #2d8398; }
.evidence-chain strong { display: block; margin-bottom: 0.65rem; }
.evidence-chain small { display: block; color: var(--paper-muted); font-size: 0.86rem; line-height: 1.5; }
.chain-rule { margin: 1rem 0 0; padding: 1rem 1.2rem; border-left: 0.42rem solid #b01616; background: rgba(176, 22, 22, 0.08); }

.states-section { max-width: none; padding-left: max(1.5rem, calc((100vw - 81rem) / 2)); padding-right: max(1.5rem, calc((100vw - 81rem) / 2)); background: var(--black); }
.state-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.8rem; }
.state-grid article { min-height: 11rem; padding: 1rem; border: 1px solid var(--line); background: rgba(17, 23, 27, 0.72); }
.state-grid article.executed { border-top: 4px solid var(--green); }
.state-grid article.authorized { border-top: 4px solid var(--amber); }
.state-grid span { display: inline-block; margin-bottom: 1.6rem; padding: 0.34rem 0.48rem; border: 1px solid currentColor; color: var(--red-soft); font: 850 0.67rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.state-grid p { margin: 0; color: var(--muted); }
.missing-evidence { margin-top: 1rem; padding: 1rem 1.2rem; border-left: 0.42rem solid var(--cyan); color: var(--pale); background: rgba(72, 203, 232, 0.07); }

.oracles-section { display: grid; grid-template-columns: minmax(17rem, 0.55fr) minmax(0, 1.45fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.oracles-copy { position: sticky; top: 7rem; }
.oracles-copy p:last-child { color: var(--muted); }
.oracle-card { border: 1px solid rgba(255, 26, 26, 0.4); background: rgba(17, 23, 27, 0.78); }
.oracle-head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); color: var(--red-soft); font: 850 0.67rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.09em; }
.oracle-head span:last-child { color: var(--cyan-soft); }
.oracle-card dl { margin: 0; }
.oracle-card dl > div { display: grid; grid-template-columns: minmax(10rem, 0.33fr) minmax(0, 1fr); gap: 1.2rem; padding: 1.1rem; border-bottom: 1px solid var(--line); }
.oracle-card dl > div:last-child { border-bottom: 0; }
.oracle-card dt { color: var(--pale); font-weight: 850; }
.oracle-card dd { margin: 0; color: var(--muted); }

.failures-section { max-width: none; padding-left: max(1.5rem, calc((100vw - 81rem) / 2)); padding-right: max(1.5rem, calc((100vw - 81rem) / 2)); color: var(--paper-ink); background: var(--paper); }
.failures-section .eyebrow { color: #b01616; }
.failure-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.failure-grid article { min-height: 11rem; padding: 1rem; border-top: 3px solid #b01616; background: #f9fbfb; box-shadow: 0 0.8rem 2rem rgba(24, 37, 43, 0.07); }
.failure-grid span { display: block; margin-bottom: 1.6rem; color: #b01616; font: 850 0.64rem/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.06em; overflow-wrap: anywhere; }
.failure-grid p { color: var(--paper-muted); }

.status-section { max-width: none; padding-left: max(1.5rem, calc((100vw - 81rem) / 2)); padding-right: max(1.5rem, calc((100vw - 81rem) / 2)); background: var(--black); }
.status-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.8rem; }
.status-grid article { min-height: 15rem; padding: 1rem; border: 1px solid var(--line); background: var(--panel); }
.status-grid .ready { border-top: 4px solid var(--green); }
.status-grid .not-ready { border-top: 4px solid var(--red); }
.status-grid span { display: block; margin-bottom: 2.5rem; color: var(--red-soft); font: 850 0.66rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.status-grid p { color: var(--muted); }
.status-rule { margin: 1rem 0 0; padding: 1rem 1.2rem; border-left: 0.42rem solid var(--red); color: var(--pale); background: rgba(255, 26, 26, 0.07); }

.ratchet-section { max-width: none; padding-left: max(1.5rem, calc((100vw - 81rem) / 2)); padding-right: max(1.5rem, calc((100vw - 81rem) / 2)); color: var(--paper-ink); background: var(--paper); }
.ratchet-section .eyebrow { color: #b01616; }
.ratchet-loop { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(8.5rem, 1fr)); overflow-x: auto; border: 1px solid rgba(24, 37, 43, 0.14); background: #f9fbfb; }
.ratchet-loop li { min-width: 9rem; position: relative; padding: 1.4rem 0.75rem; border-right: 1px solid rgba(24, 37, 43, 0.12); text-align: center; }
.ratchet-loop li:last-child { border-right: 0; }
.ratchet-loop li::after { content: "›"; position: absolute; right: -0.15rem; top: 50%; z-index: 1; transform: translateY(-50%); color: #b01616; font-size: 1.7rem; }
.ratchet-loop li:last-child::after { content: ""; }
.ratchet-loop span { color: #495c65; font: 900 0.69rem/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ratchet-loop .gate { background: rgba(176, 22, 22, 0.08); }
.ratchet-loop .gate span { color: #b01616; }
.ratchet-copy { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin-top: 1rem; }
.ratchet-copy p { margin: 0; padding: 1rem; border-left: 3px solid #b01616; background: #f9fbfb; }
.ratchet-copy strong, .ratchet-copy span { display: block; }
.ratchet-copy strong { margin-bottom: 0.45rem; }
.ratchet-copy span { color: var(--paper-muted); }

.evals-section { display: grid; grid-template-columns: minmax(17rem, 0.55fr) minmax(0, 1.45fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.evals-copy { position: sticky; top: 7rem; }
.evals-copy p:last-child { color: var(--muted); }
.eval-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.eval-flow article { min-height: 15rem; padding: 1.1rem; border: 1px solid var(--line); background: var(--panel); }
.eval-flow article > span { display: block; margin-bottom: 2.5rem; color: var(--cyan-soft); font: 850 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.eval-flow p { color: var(--muted); }
.eval-rule { grid-column: 2; margin: 0; padding: 1rem 1.2rem; border-left: 0.42rem solid var(--cyan); color: var(--pale); background: rgba(72, 203, 232, 0.07); }

.install-section { max-width: none; padding-left: max(1.5rem, calc((100vw - 81rem) / 2)); padding-right: max(1.5rem, calc((100vw - 81rem) / 2)); color: var(--paper-ink); background: var(--paper); }
.install-section .eyebrow { color: #b01616; }
.install-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.install-grid article { min-height: 20rem; padding: 1.25rem; border-top: 4px solid #b01616; background: #f9fbfb; box-shadow: 0 0.9rem 2.2rem rgba(24, 37, 43, 0.08); }
.install-grid article > span { display: block; margin-bottom: 2.5rem; color: #b01616; font: 850 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; }
.install-grid article > code { display: block; margin: 0.5rem 0; padding: 0.75rem; overflow-wrap: anywhere; color: #31434b; background: #e5ecee; font: 700 0.79rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.install-grid p { color: var(--paper-muted); }

.prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.prompt-grid blockquote { margin: 0; padding: clamp(1.4rem, 3vw, 2.2rem); border-left: 0.45rem solid var(--red); color: var(--pale); background: rgba(255, 26, 26, 0.07); }
.prompt-grid blockquote:last-child { border-color: var(--cyan); background: rgba(72, 203, 232, 0.07); }
.prompt-grid code { color: inherit; white-space: normal; }

.boundaries-section { display: grid; grid-template-columns: minmax(17rem, 0.6fr) minmax(0, 1.4fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; background: linear-gradient(180deg, transparent, rgba(255, 26, 26, 0.045)); }
.boundary-copy { position: sticky; top: 7rem; }
.boundary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.boundary-grid article { padding: 1.25rem; border: 1px solid var(--line); background: rgba(17, 23, 27, 0.72); }
.boundary-grid p { color: var(--muted); }


.install-section a, .troubleshooting-section a, .evidence-section a, .chain-section a, .failures-section a, .ratchet-section a { color: #8f1111; }
.install-section a:hover, .troubleshooting-section a:hover, .evidence-section a:hover, .chain-section a:hover, .failures-section a:hover, .ratchet-section a:hover { color: #5b0808; }
.install-section a:focus-visible, .troubleshooting-section a:focus-visible, .evidence-section a:focus-visible, .chain-section a:focus-visible, .failures-section a:focus-visible, .ratchet-section a:focus-visible { outline-color: #6b4c00; }

.journey-grid, .recovery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.journey-grid article, .recovery-grid article { min-height: 15rem; padding: 1.25rem; border: 1px solid var(--line); background: var(--panel); }
.journey-grid article > span { display: block; margin-bottom: 2.4rem; color: var(--cyan-soft); font: 850 0.68rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; }
.journey-grid p, .recovery-grid p { color: var(--muted); }
.first-prompt { margin-top: 1rem; }
.install-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.install-grid article { min-height: 23rem; }
.install-grid article > code { margin-inline: 0; padding-inline: 0.45rem; }
.install-grid p code { display: inline; margin: 0; padding: 0.1rem 0.28rem; }
.install-note { margin: 1rem 0 0; padding: 1rem 1.2rem; border-left: 0.42rem solid #b01616; color: var(--paper-muted); background: #f9fbfb; }
.troubleshooting-section, .evidence-section { max-width: none; padding-left: max(1.5rem, calc((100vw - 81rem) / 2)); padding-right: max(1.5rem, calc((100vw - 81rem) / 2)); color: var(--paper-ink); background: var(--paper); }
.troubleshooting-section .eyebrow, .evidence-section .eyebrow { color: #b01616; }
.recovery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.recovery-grid article { border-top: 4px solid #b01616; color: var(--paper-ink); background: #f9fbfb; }
.recovery-grid p { color: var(--paper-muted); }
.privacy-section { max-width: none; padding-left: max(1.5rem, calc((100vw - 81rem) / 2)); padding-right: max(1.5rem, calc((100vw - 81rem) / 2)); background: var(--black); }
.evidence-table-wrap { overflow-x: auto; border: 1px solid rgba(24, 37, 43, 0.16); background: #f9fbfb; }
.evidence-table-wrap:focus-visible { outline: 3px solid #6b4c00; outline-offset: 4px; }
table { width: 100%; min-width: 46rem; border-collapse: collapse; }
th, td { padding: 1rem; border-bottom: 1px solid rgba(24, 37, 43, 0.13); text-align: left; vertical-align: top; }
th { color: #fff; background: #26373f; }
td { color: var(--paper-muted); }
td:first-child { color: var(--paper-ink); font-weight: 800; }
.evidence-links { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1rem; }
.evidence-links a { padding: 0.7rem 0.85rem; border: 1px solid #b01616; color: #8f1111; background: #f9fbfb; font-weight: 800; text-decoration: none; }
.not-found { min-height: calc(100vh - 8rem); display: grid; align-items: center; }
.not-found .section { width: 100%; border-top: 0; }

footer { padding: 2.5rem 1.5rem 3.5rem; border-top: 1px solid rgba(255, 26, 26, 0.25); text-align: center; color: var(--muted); background: #000; }
footer p { margin: 0.35rem 0; }

@media (max-width: 76rem) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-visual { max-width: 56rem; }
  .state-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .failure-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .status-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 58rem) {
  nav { align-items: flex-start; }
  .nav-links { justify-content: flex-end; }
  .oracles-section, .evals-section, .boundaries-section { grid-template-columns: 1fr; }
  .oracles-copy, .evals-copy, .boundary-copy { position: static; }
  .eval-rule { grid-column: 1; }
  .oracle-card dl > div { grid-template-columns: 1fr; gap: 0.4rem; }
  .ratchet-copy, .install-grid, .journey-grid, .recovery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eval-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  nav { padding-inline: 1rem; }
  .nav-links { max-width: 70vw; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.35rem; }
  .hero, .section { padding: 4.6rem 1rem; }
  .hero { padding-top: 5.6rem; }
  .capability-grid, .state-grid, .failure-grid, .status-grid, .ratchet-copy, .eval-flow, .install-grid, .prompt-grid, .boundary-grid, .journey-grid, .recovery-grid { grid-template-columns: 1fr; }
  h1 { font-size: clamp(2.8rem, 14vw, 4.5rem); }
  h2 { font-size: clamp(2.1rem, 11vw, 3.5rem); }
  .hero-visual::before { position: static; display: block; padding: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}