:root { color-scheme: dark; --ink: #eef3ff; --muted: #9aa8c4; --line: #263451; --blue: #76a7ff; --red: #ff6b7a; --green: #4fe0a3; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 80% 0, #152a51 0, transparent 35%), #080d18; font: 16px/1.5 Inter, ui-sans-serif, system-ui, sans-serif; }
main { width: min(1120px, calc(100% - 40px)); margin: auto; padding: 40px 0 28px; }
.hero { position: relative; padding: 16px 0 34px; }
.brand { font-size: 1.3rem; font-weight: 750; letter-spacing: -.02em; }
.mark { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 9px; border-radius: 9px; color: #071124; background: linear-gradient(135deg, #78a7ff, #57e0be); }
.eyebrow, .label { color: var(--muted); font-size: .72rem; font-weight: 750; letter-spacing: .14em; }
.eyebrow { position: absolute; right: 0; top: 18px; }
h1 { max-width: 880px; margin: 38px 0 12px; font-size: clamp(2.25rem, 5vw, 4.5rem); line-height: 1.02; letter-spacing: -.055em; }
h1 span { color: var(--blue); }
.product-description { max-width: 900px; margin: 0 0 8px; color: #d4def0; font-size: 1.08rem; }
.principle { margin: 0; color: #c3cee2; font-size: 1.2rem; }
.principle strong { color: white; }
.capability, .impact, .proof, .security-map { padding: 22px 26px; border: 1px solid var(--line); border-radius: 16px; background: #0d1525cc; }
.capability { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.impact { margin-bottom: 16px; }
.security-map { margin-bottom: 16px; }
.map-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.map-heading h2 { font-size: 1.2rem; }
.map-intro, .bounded-note { max-width: 700px; margin: 6px 0 0; color: var(--muted); font-size: .78rem; }
.map-modes { display: flex; flex: 0 0 auto; overflow: hidden; border: 1px solid #385076; border-radius: 8px; }
.map-modes button { padding: 8px 11px; border: 0; border-right: 1px solid #385076; color: #bdcae0; background: #0b1322; font: 750 .75rem ui-sans-serif, system-ui, sans-serif; letter-spacing: .07em; cursor: pointer; }
.map-modes button:last-child { border: 0; }
.map-modes button[aria-pressed="true"] { color: #061124; background: var(--blue); }
.map-modes button:focus-visible { outline: 2px solid white; outline-offset: -3px; }
.map-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, 1fr); gap: 16px; margin-top: 18px; }
.map-canvas { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #09111f; }
#security-map-graph { display: block; width: 100%; height: auto; min-height: 420px; }
.map-edge path { fill: none; stroke: #55719f; stroke-width: 2; }
.map-edge text { fill: #93a3bd; font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.map-node rect { fill: #111e34; stroke: #5076af; stroke-width: 1.5; }
.map-node.control rect, .map-node.regression rect { fill: #0e2a27; stroke: var(--green); }
.map-node.resource rect, .map-node.invariant rect { fill: #211924; stroke: #d47788; }
.map-node.input rect { stroke-dasharray: 5 3; }
.map-node .node-type { fill: #9aa9c1; font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.map-node .node-label { fill: var(--ink); font-size: 13px; font-weight: 700; }
.map-node.muted, .map-edge.muted { opacity: .16; }
.map-edge.muted text { opacity: 0; }
.map-node:focus { outline: none; } .map-node:focus rect { stroke: white; stroke-width: 3; }
.auth-boundary { position: absolute; left: 35%; right: 5%; top: 67.5%; margin: 0; border-top: 1px dashed #7791b9; color: #9cacc4; font-size: .72rem; text-align: right; }
.auth-boundary span { float: left; padding-right: 8px; background: #09111f; font-weight: 800; letter-spacing: .08em; }
.map-details { min-height: 420px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #101a2c; }
.map-details h3 { margin: 0 0 8px; font-size: 1rem; }
.map-details > p:not(.label, .release, .bounded-note) { color: #cbd6eb; font-size: .78rem; }
.map-details dl { margin: 18px 0 0; }
.map-details dl div { margin-bottom: 12px; }
.map-details dd { color: var(--ink); font-size: .78rem; }
.map-details dd.good, .release { color: var(--green); }
.impact-chain { padding: 10px; border-left: 2px solid var(--blue); background: #0b1322; line-height: 1.7; }
.release { font-weight: 850; letter-spacing: .06em; }
.threat-card { margin-top: 10px; padding: 10px; border-left: 2px solid var(--red); background: #151725; }
.threat-card h3 { color: #ff9da7; font-size: .8rem; }
.threat-card p { margin: 3px 0 7px; color: #bdc9dc; font-size: .75rem; }
.threat-card small { display: block; color: var(--muted); font-size: .7rem; font-weight: 800; letter-spacing: .07em; }
.threat-card strong { display: block; margin-bottom: 5px; color: #dce6f7; font-size: .75rem; }
.provenance { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 12px; color: #9aa9c0; font-size: .7rem; font-weight: 700; letter-spacing: .04em; }
.provenance i { display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: var(--blue); }
.provenance .capability-key { background: #a48bff; } .provenance .context { background: #dbb75a; } .provenance .risk { background: var(--red); } .provenance .runtime { background: var(--green); }
.map-status { margin: 8px 0 0; color: #8997ae; font-size: .7rem; }
.section-heading h2 { font-size: 1.2rem; } .section-heading h2 span { color: var(--blue); }
.impact-paths, .proof-cases { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.impact-card, .proof-cases article { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #101a2c; }
.impact-card h3, .proof-cases h3 { margin: 0; font-size: .92rem; }
.impact-card h3 b, .semantic-path b { padding: 0 5px; color: var(--blue); }
.no-impact h3 strong, .impact-decision { color: var(--green); }
.impact-counts { display: flex; gap: 20px; margin: 18px 0; }
.impact-counts div { flex: 1; } .impact-counts dd { font-size: 1.25rem; }
.assurance-selection, .semantic-path { margin: 14px 0; color: #cbd6eb; font-size: .8rem; }
.assurance-selection strong { color: var(--ink); }
.invariant { padding: 10px 12px; border-left: 2px solid var(--blue); background: #0b1322; font-size: .85rem; }
.invariant small { display: block; color: var(--muted); font-weight: 800; letter-spacing: .1em; }
.impact-decision { margin: 10px 0 0; font-weight: 800; letter-spacing: .04em; }
.impact-note { margin: 5px 0 0; color: var(--muted); font-size: .75rem; }
.security-requirement { max-width: 440px; padding-left: 26px; border-left: 1px solid var(--line); }
.security-requirement p { margin-top: 0; }
.security-requirement b { color: var(--blue); }
.security-requirement .authorized-path { margin: 7px 0 0; color: var(--muted); font-size: .78rem; }
.label { margin: 0 0 7px; }
h2 { margin: 0; font-size: 1.05rem; }
code { color: #d9e5ff; font: 600 .95em ui-monospace, SFMono-Regular, Menlo, monospace; }
.validation-summary { margin: 24px 0 10px; font-size: 1.35rem; }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 16px; }
.result { overflow: hidden; padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #0d1525; }
.result.fail { border-top: 3px solid var(--red); } .result.pass { border-top: 3px solid var(--green); }
.fail strong, .fail .decision { color: var(--red); } .pass strong, .pass .decision { color: var(--green); }
.validation-ids { margin: 0 0 4px; color: var(--muted); font: 600 .76rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.approval { margin: 20px 0 4px; color: var(--muted); font-size: .82rem; }
.mutation { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0; font-family: ui-monospace, monospace; font-size: .88rem; }
.mutation b { color: var(--muted); }
.test-outcome { margin: 0 0 2px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.fail .test-outcome { color: var(--red); } .pass .test-outcome { color: var(--green); }
.decision { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: .04em; }
.evidence-id { margin: 12px 0 0; color: #6f7d98; font-size: .68rem; } .evidence-id code { color: #8391aa; font-weight: 400; }
dt { color: var(--muted); font-size: .78rem; } dd { margin: 2px 0 0; color: var(--green); font-weight: 800; }
.proof small { margin-left: 6px; color: var(--muted); font-size: .7rem; font-weight: 400; }
.proof-flow { margin: 10px 0 0; color: #cbd6eb; font-size: .76rem; }
.proof-evals { margin: 10px 0 0; color: var(--muted); font-size: .68rem; }
.pipeline { margin: 16px 0 0; padding: 24px 26px; border: 1px solid var(--line); border-radius: 16px; }
.pipeline ol { display: flex; align-items: center; margin: 18px 0 0; padding: 0; list-style: none; color: #cbd6eb; font-size: .8rem; }
.pipeline li { display: flex; align-items: center; flex: 1; }
.pipeline li:not(:last-child)::after { content: "→"; margin: 0 10px; color: var(--blue); font-size: 1rem; }
.pipeline-note { margin: 12px 0 0; color: var(--muted); font-size: .72rem; }
.trust { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 14px; margin-top: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #0b1220; }
.plane { padding: 12px 14px; border-radius: 10px; background: #111a2b; } .plane p:last-child { margin: 0; color: #cbd6eb; font-size: .82rem; } .plane b { padding: 0 5px; color: var(--blue); }
.boundary { display: grid; place-items: center; padding: 0 8px; border-right: 1px dashed #496184; border-left: 1px dashed #496184; color: #8293b1; font-size: .62rem; font-weight: 800; letter-spacing: .1em; writing-mode: vertical-rl; }
.trust-statement { grid-column: 1 / -1; margin: 2px 0 0; color: white; text-align: center; font-size: .92rem; font-weight: 750; }
footer { padding: 25px 4px 0; color: #bec9dc; text-align: center; font-size: .8rem; } footer i { padding: 0 5px; color: var(--blue); font-style: normal; }
.note { margin-bottom: 0; color: #74829c; }
@media (max-width: 760px) { main { width: min(100% - 24px, 1120px); padding-top: 20px; } .eyebrow { position: static; margin-top: 18px; } h1 { margin-top: 24px; } .capability { align-items: flex-start; flex-direction: column; } .security-requirement { padding: 18px 0 0; border-top: 1px solid var(--line); border-left: 0; } .impact-paths, .proof-cases, .comparison, .map-layout { grid-template-columns: 1fr; } .map-heading { flex-direction: column; } .map-modes { width: 100%; } .map-modes button { flex: 1; } #security-map-graph { min-height: 0; } .map-details { min-height: 0; } .impact-counts { gap: 10px; } .pipeline ol { align-items: flex-start; flex-direction: column; gap: 8px; } .pipeline li:not(:last-child)::after { content: "↓"; } .trust { grid-template-columns: 1fr; } .boundary { min-height: 30px; border: 0; border-top: 1px dashed #496184; border-bottom: 1px dashed #496184; writing-mode: horizontal-tb; } }

/* Evidence explorer information architecture. */
.explorer { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; display: flex; flex-direction: column; height: 100vh; padding: 28px 20px 20px; border-right: 1px solid var(--line); background: #09101ddd; }
.sidebar .brand { color: var(--ink); text-decoration: none; }
.sidebar-kicker { margin: 14px 0 24px 42px; color: #74829c; font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.desktop-nav { display: flex; flex-direction: column; gap: 4px; }
.desktop-nav > p { margin: 15px 10px 4px; color: #73819a; font-size: .63rem; font-weight: 800; letter-spacing: .13em; }
.desktop-nav a { display: flex; flex-direction: column; padding: 9px 11px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; color: #bcc8dc; text-decoration: none; }
.desktop-nav a strong { font-size: .84rem; }
.desktop-nav a span { color: #73819a; font-size: .69rem; }
.desktop-nav a:hover { background: #101b2f; }
.desktop-nav a.active { border-left-color: var(--blue); color: white; background: #13223a; }
.desktop-nav a.active span { color: #9cb8e8; }
.scenario-note { margin: auto 7px 10px; padding-top: 18px; border-top: 1px solid var(--line); color: #acbad0; font-size: .7rem; }
.read-only-note { margin: 0 7px; color: #6f7d96; font-size: .65rem; }
.mobile-nav, .mobile-nav-label { display: none; }
.explorer main { width: min(1120px, calc(100% - 64px)); min-width: 0; margin: 0 auto; padding: 42px 0; }
.view[hidden] { display: none; }
.view { min-height: calc(100vh - 84px); }
.view-heading { margin-bottom: 22px; }
.view-heading h1 { margin: 4px 0 8px; font-size: clamp(2rem, 4vw, 3.5rem); }
.view-heading > p:last-child { max-width: 850px; margin: 0; color: #b8c5da; }
.hero { padding-top: 8vh; }
.hero h1 { margin-top: 24px; }
.assurance-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.assurance-modes article { min-height: 135px; padding: 20px; border: 1px solid var(--line); border-top: 2px solid var(--blue); border-radius: 12px; background: #0d1525cc; }
.assurance-modes h2 { font-size: 1rem; }
.security-map { padding: 22px 26px; }
.scenario-card { padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: #0d1525cc; }
.scenario-card.deep { border-top: 3px solid var(--blue); }
.scenario-card.replay { border-top: 3px solid var(--green); }
.scenario-card.no-impact { border-top: 3px solid #91a1bb; }
.scenario-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; color: #b9c6d9; font-size: .78rem; }
.scenario-meta p { margin: 0; }
.scenario-flow, .semantic-flow { display: flex; align-items: stretch; margin: 28px 0; padding: 0; list-style: none; }
.scenario-flow li, .semantic-flow li { display: flex; flex: 1; align-items: center; padding: 12px; border: 1px solid var(--line); background: #101a2c; font-size: .75rem; }
.scenario-flow li:not(:last-child)::after, .semantic-flow li:not(:last-child)::after { content: "→"; position: relative; left: 18px; z-index: 1; color: var(--blue); font-size: 1rem; }
.semantic-flow { flex-wrap: wrap; }
.semantic-flow li { min-width: 30%; }
.evidence-grid, .skip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.evidence-grid div, .skip-grid p { min-width: 0; margin: 0; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #0a1220; }
.evidence-grid span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.evidence-grid code { overflow-wrap: anywhere; font-size: .72rem; }
.release { margin: 22px 0 0; font-size: 1.1rem; }
.allowed, .not-applicable { color: var(--green); }
.not-applicable { margin: 22px 0 8px; font-size: 1.5rem; font-weight: 850; letter-spacing: .04em; }
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.outcomes div { padding: 12px; border-left: 2px solid var(--green); background: #0a1220; }
.impact-counts { display: grid; grid-template-columns: repeat(3, 1fr); }
.scenario-summary { color: #b9c6da; font-size: .82rem; }
.comparison { margin-top: 24px; }
.trust { margin-top: 28px; }
#trust-model footer { margin-top: 18px; }

@media (max-width: 900px) {
  .explorer { display: block; }
  .sidebar { position: sticky; z-index: 10; display: grid; grid-template-columns: auto minmax(170px, 1fr); gap: 8px 16px; height: auto; padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
  .sidebar .brand { align-self: center; }
  .sidebar-kicker, .desktop-nav { display: none; }
  .mobile-nav-label { display: block; grid-column: 2; margin-bottom: -7px; color: #7f8da5; font-size: .58rem; font-weight: 800; letter-spacing: .1em; }
  .mobile-nav { display: block; grid-column: 2; width: 100%; padding: 7px 28px 7px 9px; border: 1px solid #385076; border-radius: 7px; color: var(--ink); background: #101a2c; font: 700 .75rem system-ui, sans-serif; }
  .scenario-note { grid-column: 1 / -1; margin: 2px 0 0; padding: 0; border: 0; font-size: .62rem; }
  .read-only-note { display: none; }
  .explorer main { width: min(100% - 28px, 1120px); padding: 28px 0; }
  .view { min-height: calc(100vh - 130px); }
  .hero { padding-top: 3vh; }
  .assurance-modes { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .scenario-flow, .semantic-flow { flex-direction: column; }
  .scenario-flow li:not(:last-child)::after, .semantic-flow li:not(:last-child)::after { content: "↓"; left: 8px; top: 18px; }
  .evidence-grid, .skip-grid, .outcomes, .impact-counts { grid-template-columns: 1fr; }
  .scenario-meta { flex-direction: column; }
  .scenario-meta code { overflow-wrap: anywhere; }
}

@media (max-width: 520px) {
  .sidebar { grid-template-columns: 1fr; }
  .sidebar .brand { display: none; }
  .mobile-nav-label, .mobile-nav { grid-column: 1; }
  .scenario-card, .result, .security-map { padding: 18px; }
  .mutation { align-items: flex-start; flex-direction: column; }
}