:root {
  --ink: #0e2026;
  --paper: #e8f1f2;
  --muted: #6e858b;
  --line: rgba(14, 32, 38, .19);
  --green: #27a58b;
  --amber: #d8923a;
  --white: #f7fbfb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(rgba(14,32,38,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,32,38,.035) 1px, transparent 1px),
    var(--paper);
  background-size: 32px 32px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: inherit; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--ink); color: white; }
.skip-link:focus { top: 12px; }
.site-header, main, footer { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.site-header { min-height: 84px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; letter-spacing: .13em; font-size: .85rem; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; color: var(--paper); background: var(--ink); letter-spacing: -.08em; font-size: .72rem; }
.node-state, .eyebrow, .trace-label, legend, footer { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.site-nav a { position: relative; padding: 31px 0 29px; color: #536970; text-decoration: none; font: .67rem ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--green); }
.node-state { justify-self: end; display: flex; align-items: center; gap: 9px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(39,165,139,.12); }

.hero { padding: clamp(70px, 10vw, 132px) 0 72px; }
.eyebrow { color: #496168; margin-bottom: 18px; }
h1, h2, h3 { margin: 0; font-family: "Arial Narrow", "Roboto Condensed", Impact, sans-serif; text-transform: uppercase; font-weight: 800; line-height: .94; }
h1 { max-width: 900px; font-size: clamp(3.6rem, 9.8vw, 8.2rem); letter-spacing: -.055em; }
.hero-copy { max-width: 590px; margin: 30px 0 45px; font-size: clamp(1rem, 1.6vw, 1.25rem); color: #40575e; }
.route-line { display: grid; grid-template-columns: auto 1fr 8px 1fr auto; align-items: center; gap: 12px; color: var(--muted); font: .65rem ui-monospace, monospace; letter-spacing: .08em; }
.route-line i { height: 1px; background: repeating-linear-gradient(90deg, var(--muted) 0 8px, transparent 8px 14px); }
.route-line b { width: 8px; height: 8px; background: var(--amber); transform: rotate(45deg); }

.instrument { color: var(--paper); background: var(--ink); padding: clamp(24px, 5vw, 58px); box-shadow: 14px 14px 0 rgba(14,32,38,.09); }
.instrument-head { display: flex; justify-content: space-between; align-items: start; gap: 30px; }
.instrument .eyebrow { color: #8ca2a7; }
h2 { font-size: clamp(2.2rem, 5vw, 4.7rem); letter-spacing: -.035em; }
.test-state { padding: 8px 11px; border: 1px solid #496168; color: #9ab0b5; font: .66rem ui-monospace, monospace; letter-spacing: .12em; }
.test-state.running { color: #85dfca; border-color: var(--green); }
.trace-wrap { position: relative; height: clamp(150px, 24vw, 255px); margin: 38px 0 4px; border: 1px solid #31474e; overflow: hidden; }
.trace { width: 100%; height: 100%; }
.grid-lines { stroke: #2b4148; stroke-width: 1; vector-effect: non-scaling-stroke; }
.trace-path { fill: none; stroke: var(--green); stroke-width: 3; vector-effect: non-scaling-stroke; }
.trace-area { fill: url(#trace-fill); }
.trace-label { position: absolute; top: 12px; left: 14px; color: #748b91; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border: 1px solid #31474e; border-top: 0; }
.metrics div { min-width: 0; padding: 20px; border-right: 1px solid #31474e; }
.metrics div:last-child { border-right: 0; }
.metrics dt { color: #8ca2a7; font: .65rem ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }
.metrics dd { margin: 10px 0 0; display: flex; align-items: baseline; gap: 7px; font: 700 clamp(1.7rem, 4vw, 3rem) "Arial Narrow", sans-serif; white-space: nowrap; }
.metrics small { color: #789097; font: .65rem ui-monospace, monospace; text-transform: uppercase; }
.metrics .primary dd { color: #85dfca; }
.controls { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-top: 34px; }
fieldset { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 10px; color: #8ca2a7; }
label input { position: absolute; opacity: 0; pointer-events: none; }
label span { display: block; padding: 10px 14px; border: 1px solid #496168; color: #a9babe; cursor: pointer; font: .72rem ui-monospace, monospace; }
label input:checked + span { color: var(--ink); background: var(--paper); border-color: var(--paper); }
label input:focus-visible + span, button:focus-visible, a:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.run-button { min-width: 210px; display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 16px 18px; border: 0; color: var(--ink); background: var(--green); font: 800 .78rem ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; cursor: pointer; }
.run-button:hover { background: #3cbea2; }
.run-button.stop { color: var(--paper); background: #a7553c; }
.run-button i { font-style: normal; font-size: 1.2rem; }
.notice { margin: 18px 0 0; color: #80969b; font-size: .75rem; }

.details { display: grid; grid-template-columns: repeat(3, 1fr); margin: 94px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.details article { position: relative; padding: 34px 36px 42px 0; }
.details article + article { padding-left: 36px; border-left: 1px solid var(--line); }
.detail-index { display: block; margin-bottom: 48px; color: var(--green); font: .7rem ui-monospace, monospace; }
h3 { font-size: 1.35rem; letter-spacing: -.015em; }
.details p { color: #536970; font-size: .9rem; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 24px 0 42px; border-top: 1px solid var(--line); color: var(--muted); }
footer nav { display: flex; gap: 22px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); }

/* Interior pages */
.inner-page { padding-bottom: 30px; }
.page-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .38fr); column-gap: 7vw; align-items: end; padding: clamp(78px, 10vw, 132px) 0 clamp(60px, 8vw, 104px); border-bottom: 1px solid var(--line); }
.page-hero .eyebrow { grid-column: 1 / -1; }
.page-hero h1 { font-size: clamp(3.4rem, 8.4vw, 7.4rem); }
.page-hero p { margin: 0 0 8px; color: #496168; font-size: 1.05rem; }
.method-sequence { border-bottom: 1px solid var(--line); }
.method-sequence article { display: grid; grid-template-columns: 110px minmax(180px, .7fr) minmax(260px, 1fr) auto; gap: 30px; align-items: baseline; padding: 34px 0; border-top: 1px solid var(--line); }
.method-sequence article:first-child { border-top: 0; }
.method-sequence span, .note-meta { color: var(--green); font: .65rem ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }
.method-sequence h2, .prose-grid h2, .endpoint-table h2, .operating-policy h2, .privacy-ledger h2, .next-action h2 { font-size: clamp(1.8rem, 3.5vw, 3.1rem); letter-spacing: -.025em; }
.method-sequence p { margin: 0; color: #536970; }
.method-sequence code { color: #496168; font-size: .72rem; white-space: nowrap; }
.prose-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; padding: 90px 0; }
.prose-body { max-width: 670px; color: #40575e; font-size: 1.05rem; }
.prose-body p:first-child { margin-top: 0; }
.boundary-list { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); }
.boundary-list div { padding: 28px; }
.boundary-list div + div { border-left: 1px solid var(--line); }
.boundary-list strong { display: block; margin-bottom: 10px; font-family: "Arial Narrow", sans-serif; text-transform: uppercase; }
.boundary-list span { color: #5a7076; font-size: .85rem; }

.notes-hero { grid-template-columns: 1fr .3fr; }
.notes-index { counter-reset: notes; }
.notes-index article { display: grid; grid-template-columns: 170px minmax(230px, .75fr) 1fr; column-gap: 5vw; padding: 54px 0; border-bottom: 1px solid var(--line); }
.notes-index h2 { font-size: clamp(2rem, 4vw, 3.5rem); letter-spacing: -.035em; }
.notes-index p { grid-column: 3; margin: 0 0 16px; color: #536970; }
.notes-index a { grid-column: 3; width: fit-content; margin-top: 8px; color: var(--ink); text-decoration-color: var(--green); text-underline-offset: 5px; font-size: .82rem; font-weight: 700; }

.node-console { margin-top: clamp(68px, 9vw, 112px); padding: clamp(25px, 5vw, 56px); color: var(--paper); background: var(--ink); }
.node-console-head { display: flex; align-items: start; justify-content: space-between; gap: 30px; }
.node-console h1 { font-size: clamp(4rem, 10vw, 8.8rem); }
.live-badge { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #496168; color: #9ab0b5; font: .65rem ui-monospace, monospace; letter-spacing: .1em; }
.live-badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.live-badge.online { color: #85dfca; border-color: var(--green); }
.live-badge.online span { background: var(--green); box-shadow: 0 0 0 5px rgba(39,165,139,.12); }
.live-badge.offline { color: #e69a83; border-color: #a7553c; }
.live-badge.offline span { background: #a7553c; }
.pulse-track { display: flex; align-items: end; gap: 5px; height: 70px; margin: 35px 0; overflow: hidden; }
.pulse-track i { flex: 1; height: 1px; background: #31474e; }
.pulse-track i:nth-child(3), .pulse-track i:nth-child(7) { height: 34px; border-top: 2px solid var(--green); background: linear-gradient(90deg, transparent 49%, #31474e 50%, transparent 51%); }
.pulse-track i:nth-child(4) { height: 57px; border-top: 2px solid var(--amber); background: linear-gradient(90deg, transparent 49%, #31474e 50%, transparent 51%); }
.node-readout { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; border: 1px solid #31474e; }
.node-readout div { padding: 18px; border-right: 1px solid #31474e; }
.node-readout div:last-child { border-right: 0; }
.node-readout dt { color: #789097; font: .64rem ui-monospace, monospace; text-transform: uppercase; }
.node-readout dd { margin: 8px 0 0; font: 700 1rem ui-monospace, monospace; }
.recheck-button { margin-top: 28px; padding: 13px 16px; border: 0; color: var(--ink); background: var(--green); font: 700 .72rem ui-monospace, monospace; text-transform: uppercase; cursor: pointer; }
.recheck-button:disabled { opacity: .55; cursor: wait; }
.recheck-button span { margin-left: 20px; font-size: 1rem; }
.endpoint-table { display: grid; grid-template-columns: .7fr 1.3fr; gap: 7vw; padding: 94px 0; border-bottom: 1px solid var(--line); }
.endpoint-rows { border-top: 1px solid var(--line); }
.endpoint-rows div { display: grid; grid-template-columns: 1.1fr 1.5fr auto; gap: 20px; padding: 19px 0; border-bottom: 1px solid var(--line); }
.endpoint-rows code { font-size: .76rem; }
.endpoint-rows span { color: #5a7076; font-size: .82rem; }
.endpoint-rows b { color: var(--green); font: .68rem ui-monospace, monospace; }
.operating-policy { display: grid; grid-template-columns: .7fr 1fr auto; gap: 5vw; align-items: start; padding: 60px 0; }
.operating-policy p { margin-top: 0; color: #536970; }
.operating-policy a { color: var(--ink); font-size: .78rem; font-weight: 700; text-underline-offset: 4px; }

.about-hero { grid-template-columns: 1fr .42fr; }
.manifesto { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; padding: 95px 0; border-bottom: 1px solid var(--line); }
.manifesto-lead { margin: 0; font: 800 clamp(2rem, 4.4vw, 4rem)/1.02 "Arial Narrow", sans-serif; text-transform: uppercase; letter-spacing: -.035em; }
.manifesto > div { color: #496168; font-size: 1.02rem; }
.manifesto > div p:first-child { margin-top: 0; }
.privacy-ledger { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; padding: 92px 0; }
.privacy-ledger > div p { max-width: 420px; color: #536970; }
.privacy-ledger dl { margin: 0; border-top: 1px solid var(--line); }
.privacy-ledger dl div { display: flex; justify-content: space-between; gap: 30px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.privacy-ledger dt { color: #536970; }
.privacy-ledger dd { margin: 0; font: 700 .75rem ui-monospace, monospace; text-transform: uppercase; }
.next-action { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 40px; color: var(--paper); background: var(--ink); }
.next-action span { color: #8ca2a7; font: .68rem ui-monospace, monospace; text-transform: uppercase; }
.next-action a { min-width: 200px; display: flex; justify-content: space-between; padding: 15px 18px; color: var(--ink); background: var(--green); text-decoration: none; font: 700 .74rem ui-monospace, monospace; text-transform: uppercase; }

@media (max-width: 700px) {
  .site-header, main, footer { width: min(100% - 24px, 1180px); }
  .site-header { grid-template-columns: 1fr auto; padding-top: 14px; gap: 8px; }
  .site-nav { grid-column: 1 / -1; order: 3; width: calc(100vw - 24px); overflow-x: auto; gap: 22px; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding: 12px 0 15px; }
  .node-state { font-size: .6rem; }
  .hero { padding-top: 64px; }
  .instrument { margin-inline: -12px; padding: 24px 12px 30px; box-shadow: none; }
  .instrument-head { align-items: end; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .metrics div:nth-child(2) { border-right: 0; }
  .metrics div:nth-child(-n+2) { border-bottom: 1px solid #31474e; }
  .controls { align-items: stretch; flex-direction: column; }
  .run-button { width: 100%; }
  .details { grid-template-columns: 1fr; }
  .details article, .details article + article { padding: 28px 0; border-left: 0; }
  .details article + article { border-top: 1px solid var(--line); }
  .detail-index { margin-bottom: 20px; }
  footer { gap: 12px; flex-direction: column; }
  footer nav { order: 3; flex-wrap: wrap; }
  .page-hero, .notes-hero, .about-hero { grid-template-columns: 1fr; }
  .page-hero p { margin-top: 28px; }
  .method-sequence article { grid-template-columns: 1fr; gap: 10px; }
  .method-sequence code { white-space: normal; }
  .prose-grid, .endpoint-table, .operating-policy, .manifesto, .privacy-ledger { grid-template-columns: 1fr; gap: 28px; padding: 58px 0; }
  .boundary-list { grid-template-columns: 1fr; }
  .boundary-list div + div { border-left: 0; border-top: 1px solid var(--line); }
  .notes-index article { grid-template-columns: 1fr; row-gap: 16px; }
  .notes-index p, .notes-index a { grid-column: 1; }
  .node-console { margin-inline: -12px; }
  .node-readout { grid-template-columns: repeat(2, 1fr); }
  .node-readout div:nth-child(2) { border-right: 0; }
  .node-readout div:nth-child(-n+2) { border-bottom: 1px solid #31474e; }
  .endpoint-rows div { grid-template-columns: 1fr auto; }
  .endpoint-rows span { grid-column: 1 / -1; grid-row: 2; }
  .next-action { margin-inline: -12px; padding: 30px 18px; flex-direction: column; align-items: stretch; }
  .next-action a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}