:root {
  --ink: #13201e; --muted: #5e6c68; --paper: #f4f3ed; --panel: #fbfaf5;
  --line: #d8d9d0; --deep: #112a26; --teal: #0b6f61; --mint: #d5eee5;
  --amber: #db8d29; --red: #a54435;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
button, a { font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #f2aa4d; outline-offset: 3px; }

.site-header { min-height: 86px; padding: 18px clamp(24px, 5vw, 80px); border-bottom: 1px solid rgba(255,255,255,.16); display: flex; align-items: center; justify-content: space-between; gap: 24px; position: absolute; inset: 0 0 auto; z-index: 2; color: #fff; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.7); display: grid; place-items: center; font: 700 13px var(--mono); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 14px; letter-spacing: .02em; }
.brand small { margin-top: 3px; color: rgba(255,255,255,.65); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .11em; }
.header-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.header-badges span { border: 1px solid rgba(255,255,255,.25); padding: 7px 10px; font: 10px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.header-badges .status-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #73e6bd; margin-right: 7px; box-shadow: 0 0 0 3px rgba(115,230,189,.14); }

.hero { min-height: 680px; padding: 180px clamp(24px, 8vw, 128px) 88px; color: #f7f5ed; position: relative; overflow: hidden; background: radial-gradient(circle at 84% 20%, rgba(219,141,41,.2), transparent 28%), linear-gradient(125deg, #102c27 0%, #0e211f 64%, #172d2a 100%); }
.hero::before { content: ""; position: absolute; width: 440px; height: 440px; right: -80px; bottom: -200px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.025), 0 0 0 140px rgba(255,255,255,.018); }
.hero::after { content: "CONTACT / CONTEXT / CONTROL / EVIDENCE"; position: absolute; right: 4.5vw; top: 42%; writing-mode: vertical-rl; font: 10px var(--mono); letter-spacing: .24em; color: rgba(255,255,255,.25); }
.eyebrow, .section-number { color: #e6a955; font: 700 11px var(--mono); letter-spacing: .16em; }
.hero h1 { max-width: 980px; margin: 26px 0 24px; font: 400 clamp(48px, 6.3vw, 88px)/.98 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.hero-copy { max-width: 790px; color: rgba(255,255,255,.72); font-size: clamp(16px, 2vw, 20px); line-height: 1.65; }
.hero-proof { display: flex; margin-top: 66px; border-top: 1px solid rgba(255,255,255,.18); max-width: 820px; }
.hero-proof div { flex: 1; padding: 22px 28px 0 0; }
.hero-proof strong { display: block; font: 400 clamp(30px,4vw,48px) Georgia, serif; color: #f2b35f; }
.hero-proof span { display: block; margin-top: 6px; color: rgba(255,255,255,.55); font: 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.architecture-section, .workspace, .audit-section, .observability-section, .proof-section, .sequence-section { padding: 84px clamp(24px, 8vw, 128px); }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.workspace-heading > div, .proof-section > div:first-child { display: flex; align-items: baseline; gap: 20px; }
.workspace-heading h2, .proof-section h2 { margin: 0; font: 400 clamp(30px, 4vw, 48px) Georgia, serif; letter-spacing: -.03em; }
.workspace-heading p { margin: 0; color: var(--muted); font-size: 14px; }

.architecture-section { background: #e7e5dd; }
.architecture-flow { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(8, 1fr); border-top: 1px solid #aeb5af; border-left: 1px solid #aeb5af; }
.architecture-flow li { min-height: 150px; padding: 18px 16px; border-right: 1px solid #aeb5af; border-bottom: 1px solid #aeb5af; position: relative; }
.architecture-flow li:not(:last-child)::after { content: "→"; position: absolute; right: -10px; top: 65px; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center; background: #e7e5dd; color: var(--teal); font: 700 13px var(--mono); }
.architecture-flow span { color: var(--teal); font: 700 9px var(--mono); }
.architecture-flow strong { display: block; margin-top: 42px; font: 400 16px/1.25 Georgia, serif; }
.architecture-note { max-width: 960px; margin: 26px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.workspace { background: var(--paper); }
.operation-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #aeb5af; border-left: 1px solid #aeb5af; }
.operation-tabs button { min-height: 72px; padding: 14px 16px; display: flex; align-items: center; gap: 13px; border: 0; border-right: 1px solid #aeb5af; border-bottom: 1px solid #aeb5af; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.operation-tabs button span { color: #8a9691; font-size: 9px; }
.operation-tabs button:hover { color: var(--ink); background: rgba(17,42,38,.04); }
.operation-tabs button.active { background: var(--deep); color: #fff; }
.operation-tabs button.active span { color: #f0b15a; }

.operation-panel { display: grid; grid-template-columns: minmax(330px, .9fr) minmax(520px, 1.35fr); min-height: 720px; background: var(--panel); border: 1px solid var(--line); border-top: 0; box-shadow: 0 24px 70px rgba(20,36,32,.08); }
.operation-brief { padding: clamp(32px, 5vw, 58px); border-right: 1px solid var(--line); }
.operation-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.status-chip { padding: 7px 9px; background: var(--mint); color: var(--teal); }
.operation-brief h3 { margin: 42px 0 18px; font: 400 clamp(32px, 4vw, 48px)/1.06 Georgia, serif; letter-spacing: -.035em; }
.operation-summary { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.business-grid { margin: 42px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.business-grid div { min-width: 0; padding: 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.business-grid dt { color: var(--teal); font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.business-grid dd { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.flow-view { padding: clamp(32px, 5vw, 58px); background: #eef0e9; }
.panel-label { display: flex; justify-content: space-between; gap: 18px; color: #67736f; font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.decision-chain { list-style: none; padding: 0; margin: 40px 0 32px; display: grid; grid-template-columns: repeat(5, 1fr); }
.decision-chain li { position: relative; min-width: 0; padding-right: 12px; transition: opacity .25s, transform .25s; }
.decision-chain li.pending { opacity: .32; }
.decision-chain li::after { content: ""; position: absolute; top: 15px; left: 33px; right: 0; height: 1px; background: #acb5b0; }
.decision-chain li:last-child::after { display: none; }
.step-marker { width: 31px; height: 31px; border: 1px solid #9da8a2; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; background: #eef0e9; position: relative; z-index: 1; font: 700 10px var(--mono); }
.done .step-marker { background: var(--teal); border-color: var(--teal); color: white; }
.review .step-marker { background: var(--amber); border-color: var(--amber); color: white; }
.blocked .step-marker { background: var(--red); border-color: var(--red); color: white; }
.decision-chain strong, .decision-chain small { display: block; }
.decision-chain strong { font-size: 11px; line-height: 1.4; }
.decision-chain small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.run-button { width: 100%; padding: 17px 19px; display: flex; justify-content: space-between; border: 0; background: var(--deep); color: white; cursor: pointer; font-weight: 700; }
.run-button:hover { background: var(--teal); }
.run-button:disabled { opacity: .75; cursor: wait; }
.control-boundaries { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 28px; }
.control-boundaries article { padding: 20px; background: #fff; border-left: 4px solid var(--teal); }
.control-boundaries article:last-child { border-left-color: var(--amber); }
.control-boundaries span { color: var(--teal); font: 700 9px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.control-boundaries article:last-child span { color: #96601f; }
.control-boundaries p, .credit-branch p { margin: 10px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.credit-branch { margin-top: 16px; padding: 20px; background: #f6e3c7; border: 1px solid #e8c999; }
.credit-branch strong { color: #81521b; font: 700 10px var(--mono); text-transform: uppercase; }

.audit-section { background: #192d2a; color: #f4f3ed; }
.audit-section .workspace-heading p { color: #9eaaa6; }
.audit-table { border-top: 1px solid rgba(255,255,255,.22); }
.audit-row { display: grid; grid-template-columns: 90px 1.15fr 1.05fr 1.8fr; gap: 20px; padding: 18px 8px; border-bottom: 1px solid rgba(255,255,255,.11); }
.audit-row span { min-width: 0; overflow-wrap: anywhere; font-size: 12px; line-height: 1.5; }
.audit-row span:first-child, .audit-row span:nth-child(2), .audit-row span:nth-child(3) { font-family: var(--mono); }
.audit-row span:first-child { color: #8ca09a; }
.audit-row span:nth-child(2) { color: #f0b15a; }
.audit-row span:nth-child(3) { color: #b7cec8; }
.audit-row span:last-child { color: #c3cbc7; }
.audit-header { color: #869590; padding-top: 13px; padding-bottom: 13px; }
.audit-header span { color: inherit !important; font: 700 9px var(--mono) !important; letter-spacing: .09em; text-transform: uppercase; }

.observability-section { background: var(--panel); }
.observability-panel { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(440px, 1.2fr); border: 1px solid var(--line); box-shadow: 0 24px 70px rgba(20,36,32,.07); }
.threshold-control { padding: clamp(30px, 5vw, 58px); background: #e7e5dd; border-right: 1px solid var(--line); }
.panel-kicker { color: var(--teal); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.threshold-control h3 { margin: 18px 0 14px; font: 400 clamp(26px, 3vw, 38px)/1.08 Georgia, serif; letter-spacing: -.03em; }
.threshold-control > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.threshold-control label { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin-top: 52px; font: 700 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.threshold-control output { color: var(--teal); font: 400 25px Georgia, serif; letter-spacing: 0; text-transform: none; }
.threshold-control input[type="range"] { width: 100%; margin: 22px 0 5px; accent-color: var(--teal); cursor: pointer; }
.threshold-scale { display: flex; justify-content: space-between; color: #7b8782; font: 10px var(--mono); }
.threshold-help { margin: 20px 0 0 !important; color: var(--muted); font-size: 11px !important; line-height: 1.55 !important; }
.trace-evaluation { padding: clamp(30px, 5vw, 58px); background: #eef0e9; }
.trace-status-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.trace-status { display: inline-flex; align-items: center; gap: 9px; padding: 8px 10px; font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.trace-status i { width: 7px; height: 7px; border-radius: 50%; }
.trace-status.healthy { background: #d7ece4; color: #156251; }
.trace-status.healthy i { background: #16856d; box-shadow: 0 0 0 3px rgba(22,133,109,.12); }
.trace-status.review { background: #f6e3c7; color: #8c5616; }
.trace-status.review i { background: var(--amber); box-shadow: 0 0 0 3px rgba(219,141,41,.15); }
.evaluator-name { color: #76817d; font: 9px var(--mono); overflow-wrap: anywhere; text-align: right; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 34px; border-top: 1px solid #bdc3bd; border-left: 1px solid #bdc3bd; }
.metric-grid > div { min-width: 0; padding: 20px 16px; border-right: 1px solid #bdc3bd; border-bottom: 1px solid #bdc3bd; }
.metric-grid span, .metric-grid strong { display: block; }
.metric-grid span { min-height: 29px; color: var(--muted); font: 9px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.metric-grid strong { margin-top: 10px; font: 400 30px Georgia, serif; }
.metric-grid .metric-warning { color: #a56216; }
.finding-card { margin-top: 24px; padding: 22px; border-left: 4px solid var(--teal); background: #fff; }
.finding-card.visible { border-left-color: var(--amber); background: #fbf2e4; }
.finding-card > div { display: flex; justify-content: space-between; gap: 20px; }
.finding-card span { color: var(--muted); font: 700 9px var(--mono); letter-spacing: .06em; }
.finding-card strong { color: var(--teal); font: 700 10px var(--mono); text-transform: uppercase; }
.finding-card.visible strong { color: #955b13; }
.finding-card p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.control-summary { list-style: none; padding: 0; margin: 26px 0 0; }
.control-summary li { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid #cdd1cc; color: var(--muted); font-size: 11px; }
.control-summary strong { color: var(--teal); font: 700 9px var(--mono); text-transform: uppercase; }
.projection-note { max-width: 850px; margin: 24px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

.proof-section { background: #e7e5dd; }
.proof-grid { margin-top: 46px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #b9beb7; border-left: 1px solid #b9beb7; }
.proof-grid article { min-height: 285px; padding: 30px; border-right: 1px solid #b9beb7; border-bottom: 1px solid #b9beb7; }
.proof-grid article > span { color: var(--teal); font: 700 11px var(--mono); }
.proof-grid h3 { margin: 55px 0 15px; font: 400 24px/1.15 Georgia, serif; }
.proof-grid p { color: var(--muted); line-height: 1.65; font-size: 13px; }

.sequence-section { background: var(--panel); }
.implementation-sequence { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.implementation-sequence li { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.sequence-index { color: var(--teal); font: 700 11px var(--mono); padding-top: 5px; }
.sequence-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.sequence-title-row h3 { margin: 0; font: 400 21px/1.3 Georgia, serif; overflow-wrap: anywhere; }
.sequence-title-row span { flex: 0 0 auto; padding: 6px 8px; background: var(--mint); color: var(--teal); font: 700 9px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.implementation-sequence p { max-width: 900px; margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.sequence-disclosure { max-width: 900px; margin: 28px 0 0; color: var(--muted); font-size: 11px; line-height: 1.65; }

footer { padding: 42px clamp(24px, 8vw, 128px); display: flex; justify-content: space-between; gap: 40px; background: #0d1f1c; color: white; }
footer p { margin: 0; }
footer strong, footer span { display: block; }
footer strong { font-size: 13px; }
footer span { margin-top: 7px; color: #80938e; font: 10px var(--mono); line-height: 1.6; }
footer .disclosure { max-width: 390px; color: #8da09b; text-align: right; font-size: 11px; line-height: 1.6; }

@media (max-width: 1100px) {
  .architecture-flow { grid-template-columns: repeat(4, 1fr); }
  .architecture-flow li:nth-child(4)::after { display: none; }
  .operation-panel { grid-template-columns: 1fr; }
  .operation-brief { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 800px) {
  .operation-tabs { grid-template-columns: repeat(2, 1fr); }
  .observability-panel { grid-template-columns: 1fr; }
  .threshold-control { border-right: 0; border-bottom: 1px solid var(--line); }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .hero::after { display: none; }
}

@media (max-width: 600px) {
  .site-header { align-items: flex-start; }
  .header-badges span:not(.status-live) { display: none; }
  .brand strong { max-width: 170px; }
  .hero { min-height: 740px; padding-top: 160px; }
  .hero h1 br { display: none; }
  .hero-proof { flex-direction: column; border-top: 0; border-left: 1px solid rgba(255,255,255,.18); padding-left: 20px; margin-top: 42px; }
  .hero-proof div { padding-top: 0; padding-bottom: 18px; }
  .architecture-section, .workspace, .audit-section, .observability-section, .proof-section, .sequence-section { padding-top: 58px; padding-bottom: 58px; }
  .workspace-heading { align-items: flex-start; flex-direction: column; }
  .workspace-heading > div, .proof-section > div:first-child { gap: 12px; }
  .architecture-flow { grid-template-columns: 1fr 1fr; }
  .architecture-flow li { min-height: 120px; }
  .architecture-flow li::after { display: none; }
  .operation-tabs button { min-height: 78px; align-items: flex-start; flex-direction: column; gap: 6px; }
  .operation-brief, .flow-view { padding: 30px 22px; }
  .business-grid, .control-boundaries { grid-template-columns: 1fr; }
  .decision-chain { grid-template-columns: 1fr; gap: 0; }
  .decision-chain li { display: grid; grid-template-columns: 42px 1fr; min-height: 72px; }
  .decision-chain li::after { top: 31px; bottom: 0; left: 15px; width: 1px; height: auto; }
  .step-marker { grid-row: 1 / span 2; margin: 0; }
  .audit-header { display: none; }
  .audit-row { grid-template-columns: 1fr; gap: 6px; padding: 22px 4px; }
  .audit-row span::before { content: attr(data-label) ": "; color: #718580; font: 700 9px var(--mono); text-transform: uppercase; }
  .trace-status-row { align-items: flex-start; flex-direction: column; }
  .evaluator-name { text-align: left; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-grid article { min-height: 230px; }
  .implementation-sequence li { grid-template-columns: 38px 1fr; gap: 10px; }
  .sequence-title-row { flex-direction: column; gap: 10px; }
  footer { flex-direction: column; }
  footer .disclosure { text-align: left; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }