:root {
  color-scheme: light;
  --bg: #f1f4f1;
  --panel: #fffefa;
  --panel-raised: #e8f0ed;
  --panel-soft: #f8f8f3;
  --line: #cbd3cf;
  --line-bright: #a9b7b2;
  --text: #34433e;
  --text-bright: #14231e;
  --muted: #687771;
  --cyan: #147c77;
  --cyan-soft: #dcecea;
  --amber: #a86112;
  --amber-soft: #f5e9d6;
  --violet: #6d559b;
  --violet-soft: #ece7f4;
  --red: #b64a42;
  --green: #357d58;
  --edge: #647873;
  --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; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 72% -10%,#d7e8e4 0,transparent 34rem),var(--bg); font-family:var(--sans); font-size:15px; line-height:1.5; }
button,input,select { font:inherit; }
button,select { color:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--cyan); outline-offset:2px; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:9px 13px; background:var(--text-bright); color:var(--bg); transform:translateY(-150%); }
.skip-link:focus { transform:none; }

.site-header { min-height:64px; display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:30px; padding:0 30px; border-bottom:1px solid var(--line); background:rgb(255 254 250 / 88%); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; }
.brand svg { width:32px; height:32px; color:var(--cyan); }
.brand svg circle { fill:var(--bg); stroke:currentColor; stroke-width:1.5; }
.brand svg path { fill:none; stroke:currentColor; stroke-width:1.5; }
.brand span { display:grid; line-height:1.12; }
.brand strong { color:var(--text-bright); font-size:14px; letter-spacing:.02em; }
.brand small { margin-top:4px; color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.09em; text-transform:uppercase; }
.site-header nav { display:flex; gap:22px; color:var(--muted); font-size:13px; font-weight:650; }
.site-header nav a:hover { color:var(--text-bright); }
.verified-badge { display:flex; align-items:center; gap:8px; color:var(--cyan); font-family:var(--mono); font-size:12px; }
.verified-badge i { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px var(--cyan-soft); }

main { min-width:0; }
.hero { width:min(1520px,calc(100% - 64px)); min-height:360px; margin:0 auto; padding:72px 0 55px; display:grid; grid-template-columns:minmax(0,1fr) minmax(360px,500px); align-items:end; gap:70px; }
.eyebrow,.panel-title p,.section-heading>div>p { margin:0; color:var(--cyan); font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.hero h1 { margin:14px 0 17px; color:var(--text-bright); font-size:clamp(44px,5.4vw,82px); font-weight:430; line-height:.98; letter-spacing:-.045em; }
.hero h1 em { color:var(--cyan); font-style:normal; }
.hero-deck { max-width:780px; margin:0; color:var(--muted); font-size:19px; line-height:1.55; }
.identity-card { margin:0; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); background:rgb(255 254 250 / 82%); box-shadow:0 18px 45px rgb(38 61 53 / 8%); }
.identity-card div { min-width:0; padding:13px 15px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.identity-card div:nth-child(2n) { border-right:0; }
.identity-card div:nth-last-child(-n+2) { border-bottom:0; }
.identity-card dt { color:var(--muted); font-size:12px; }
.identity-card dd { margin:4px 0 0; overflow:hidden; color:var(--text-bright); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.identity-card code { color:var(--cyan); font-family:var(--mono); font-size:12px; }

.layer-boundary { width:min(1520px,calc(100% - 64px)); margin:0 auto 26px; display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); }
.layer-boundary article { min-width:0; display:flex; gap:14px; padding:17px 19px; border-right:1px solid var(--line); background:var(--panel-soft); }
.layer-boundary article:last-child { border-right:0; }
.layer-boundary article>span { color:var(--muted); font-family:var(--mono); font-size:12px; }
.layer-boundary strong { color:var(--text-bright); font-size:14px; }
.layer-boundary p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.layer-boundary [data-layer="upstream"] { box-shadow:inset 0 2px var(--cyan); }
.layer-boundary [data-layer="derived"] { box-shadow:inset 0 2px var(--amber); }
.layer-boundary [data-layer="analysis"] { box-shadow:inset 0 2px var(--violet); }

.explorer-shell { width:min(1760px,calc(100% - 32px)); margin:0 auto 80px; display:grid; grid-template-columns:300px minmax(620px,1fr) 310px; align-items:start; border:1px solid var(--line); background:var(--panel-soft); box-shadow:0 30px 80px rgb(38 61 53 / 12%); }
.trace-panel,.inspector-panel { position:sticky; top:0; max-height:100vh; overflow:hidden; background:var(--panel); }
.trace-panel { display:grid; grid-template-rows:auto auto auto minmax(0,1fr); border-right:1px solid var(--line); }
.inspector-panel { border-left:1px solid var(--line); }
.panel-title,.section-heading { min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 16px; border-bottom:1px solid var(--line); }
.panel-title h2,.section-heading h2 { margin:2px 0 0; color:var(--text-bright); font-size:17px; font-weight:650; }
.panel-title>span,.section-heading>span { color:var(--muted); font-family:var(--mono); font-size:12px; }
.trace-controls { display:grid; gap:10px; padding:12px; border-bottom:1px solid var(--line); }
.trace-controls>div { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.trace-controls label,.analysis-controls label { min-width:0; display:grid; gap:4px; color:var(--muted); font-size:12px; }
.trace-controls input,.trace-controls select,.analysis-controls select { min-width:0; width:100%; height:31px; padding:4px 7px; border:1px solid var(--line-bright); border-radius:2px; outline:0; background:var(--panel-soft); color:var(--text); font-size:12px; }
.trace-controls input:focus,.trace-controls select:focus,.analysis-controls select:focus { border-color:var(--cyan); }
.trace-legend { display:flex; gap:13px; padding:7px 12px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; }
.trace-legend span { display:flex; align-items:center; gap:5px; }
.trace-legend i { width:7px; height:7px; border-radius:50%; background:var(--green); }
.trace-legend i.inactive { background:var(--muted); }
.trace-list { min-height:260px; max-height:calc(100vh - 238px); overflow-x:hidden; overflow-y:auto; }
.trace-item { width:100%; overflow:hidden; display:grid; grid-template-columns:36px minmax(0,1fr); gap:8px; padding:9px 11px; border:0; border-bottom:1px solid var(--line); background:transparent; text-align:left; }
.trace-item:hover,.trace-item[aria-selected="true"] { background:var(--panel-raised); }
.trace-item[aria-selected="true"] { box-shadow:inset 2px 0 var(--cyan); }
.trace-item[data-active="false"] { opacity:.56; }
.trace-item>span { padding-top:2px; color:var(--muted); font-family:var(--mono); font-size:12px; }
.trace-item>div { min-width:0; display:grid; gap:2px; }
.trace-item strong { overflow:hidden; color:var(--text-bright); font-family:var(--mono); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.trace-item small { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.trace-item code { min-width:0; overflow:hidden; color:var(--cyan); font-family:var(--mono); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.trace-empty { margin:0; padding:28px 16px; color:var(--muted); font-size:12px; text-align:center; }

.research-stage { min-width:0; background:var(--bg); }
.research-stage>section { border-bottom:1px solid var(--line); background:var(--panel-soft); }
.research-stage>section:last-child { border-bottom:0; }
.section-heading { padding:15px 20px; }
.section-heading>p { margin:0; color:var(--muted); font-size:12px; }
.mode-switch { display:flex; border:1px solid var(--line-bright); }
.mode-switch button { min-width:0; min-height:31px; padding:4px 9px; border:0; border-right:1px solid var(--line-bright); background:transparent; color:var(--muted); font-size:12px; line-height:1.25; white-space:normal; }
.mode-switch button:last-child { border-right:0; }
.mode-switch button:hover,.mode-switch button.is-active { background:var(--cyan-soft); color:var(--text-bright); }
.graph-notice,.path-boundary { display:flex; justify-content:space-between; gap:18px; margin:13px 20px 0; padding:9px 11px; border-left:2px solid var(--amber); background:var(--amber-soft); color:#75522b; font-size:12px; }
.graph-notice strong,.path-boundary strong { color:#704309; }
.graph-wrap { position:relative; min-height:430px; margin:12px 20px 0; overflow:hidden; border:1px solid var(--line); background:radial-gradient(circle at center,#edf5f2,transparent 62%),#fbfcf9; }
#provenance-graph { width:100%; height:auto; min-height:430px; display:block; }
.evidence-edge { outline:0; cursor:pointer; }
.evidence-edge-hit { fill:none; stroke:transparent; stroke-width:16; pointer-events:stroke; }
.evidence-edge-line { fill:none; stroke:var(--edge); stroke-width:1.3; pointer-events:none; vector-effect:non-scaling-stroke; }
#evidence-arrow path { fill:var(--edge); }
#evidence-arrow-derived path { fill:var(--amber); }
#evidence-arrow-unknown path { fill:var(--red); }
#evidence-arrow-focus path { fill:var(--text-bright); }
.evidence-edge[data-class="derived-state"] .evidence-edge-line { marker-end:url(#evidence-arrow-derived); stroke:var(--amber); stroke-dasharray:5 4; }
.evidence-edge[data-class="unknown"] .evidence-edge-line { marker-end:url(#evidence-arrow-unknown); stroke:var(--red); stroke-dasharray:2 5; }
.evidence-edge:hover .evidence-edge-line,.evidence-edge:focus .evidence-edge-line { marker-end:url(#evidence-arrow-focus); stroke:var(--text-bright); stroke-width:2.5; }
.evidence-node { cursor:pointer; }
.evidence-node rect { fill:#e4f0ed; stroke:var(--cyan); stroke-width:1.5; vector-effect:non-scaling-stroke; transition:fill .12s ease,stroke-width .12s ease; }
.evidence-node[data-layer="derived-fact"] rect { fill:var(--amber-soft); stroke:var(--amber); }
.evidence-node[data-selected="true"] rect { stroke:var(--text-bright); stroke-width:3; }
.evidence-node text { fill:var(--text-bright); font-family:var(--mono); font-size:12px; font-weight:550; text-anchor:middle; pointer-events:none; }
.evidence-node:hover rect,.evidence-node:focus rect { fill:var(--cyan-soft); stroke-width:2.5; }
.evidence-node[data-layer="derived-fact"]:hover rect,.evidence-node[data-layer="derived-fact"]:focus rect { fill:#efd8b5; }
.provenance-card footer { min-height:48px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 15px; padding:8px 20px 13px; color:var(--muted); font-size:12px; }
.provenance-card footer p { margin:0; }
.evidence-legend { min-width:0; flex:1; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px 12px; }
.evidence-legend span { display:flex; align-items:center; gap:5px; }
.evidence-legend i { width:13px; height:2px; background:var(--cyan); }
.empty-state { position:absolute; z-index:1; inset:0; display:grid; place-items:center; margin:0; padding:24px; background:rgb(251 252 249 / 90%); color:var(--muted); text-align:center; }
.empty-state[hidden] { display:none; }

.trust-roots { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:16px 20px 10px; }
.root-card { min-width:0; padding:13px; border:1px solid var(--line); background:var(--panel-raised); }
.root-card[data-layer="onto2d-analysis"] { border-color:#b9acd0; background:var(--violet-soft); }
.root-card span { color:var(--muted); font-family:var(--mono); font-size:12px; text-transform:uppercase; }
.root-card strong { display:block; margin:5px 0 3px; overflow-wrap:anywhere; color:var(--text-bright); font-size:13px; }
.root-card code { color:var(--cyan); font-family:var(--mono); font-size:12px; overflow-wrap:anywhere; }
.boundary-note { margin:0; padding:4px 20px 18px; color:var(--muted); font-size:12px; line-height:1.55; }

.path-boundary { border-left-color:var(--violet); background:var(--violet-soft); color:#594b70; }
.path-boundary strong { color:#513b79; }
.path-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:13px 20px 20px; }
.path-card { min-width:0; display:grid; grid-template-rows:auto auto 1fr auto; padding:15px; border:1px solid #b9acd0; background:linear-gradient(145deg,var(--violet-soft),var(--panel)); }
.path-card[data-actual="true"] { border-color:#79aaa5; background:linear-gradient(145deg,var(--cyan-soft),var(--panel)); }
.path-card>span { color:var(--violet); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.path-card[data-actual="true"]>span { color:var(--cyan); }
.path-card h3 { margin:7px 0 5px; color:var(--text-bright); font-size:14px; line-height:1.35; }
.path-card p { margin:0; color:var(--muted); font-size:12px; }
.path-card footer { margin-top:13px; display:flex; justify-content:space-between; gap:8px; color:var(--text); font-family:var(--mono); font-size:12px; }
.path-card button { margin-top:12px; min-height:30px; border:1px solid var(--line-bright); background:transparent; font-size:12px; }
.path-card button:hover { border-color:var(--cyan); }

.analysis-controls { min-width:330px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.analysis-disclaimer { margin:13px 20px 0; padding:10px 12px; border:1px solid #b9acd0; background:var(--violet-soft); color:#594b70; font-size:12px; }
.load-grid { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; padding:15px 20px; }
.load-readout { min-width:0; min-height:190px; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:12px; overflow:hidden; padding:18px 20px; border:1px solid #b9acd0; background:linear-gradient(145deg,#e4dcef,var(--violet-soft)); }
.load-readout>span { align-self:start; color:var(--violet); font-family:var(--mono); font-size:17px; letter-spacing:.04em; }
.load-readout strong { min-width:0; max-width:100%; align-self:center; justify-self:end; color:var(--text-bright); font-family:var(--mono); font-size:clamp(52px,6vw,72px); font-weight:450; line-height:.86; letter-spacing:-.06em; white-space:nowrap; }
.load-readout small { min-width:0; overflow:hidden; color:var(--muted); font-family:var(--mono); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.load-facts { margin:0; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); }
.load-facts div { min-width:0; padding:14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.load-facts div:nth-child(2n) { border-right:0; }
.load-facts div:nth-last-child(-n+2) { border-bottom:0; }
.load-facts dt { color:var(--muted); font-size:12px; }
.load-facts dd { margin:5px 0 0; color:var(--text-bright); font-size:13px; overflow-wrap:anywhere; }
.load-interpretation { margin:0 20px 18px; display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); border:1px solid #ad9bc8; background:#f0ecf6; }
.load-interpretation>div,.load-interpretation>p { min-width:0; margin:0; padding:14px 16px; }
.load-interpretation>div { border-right:1px solid #ad9bc8; }
.load-interpretation span { display:block; margin-bottom:5px; color:var(--violet); font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.load-interpretation strong { display:block; color:var(--text-bright); font-size:14px; font-weight:550; line-height:1.55; }
.load-interpretation>p { align-self:center; color:#685c79; font-size:12px; line-height:1.55; }
.comparison-heading { display:flex; justify-content:space-between; gap:20px; padding:0 20px 9px; }
.comparison-heading h3,.constraint-grid h3 { margin:0; color:var(--text-bright); font-size:13px; }
.comparison-heading p { margin:0; color:var(--muted); font-size:12px; }
.path-comparison { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:0 20px 16px; }
.comparison-path { min-width:0; min-height:130px; padding:12px; border:1px solid var(--line); background:var(--panel); }
.comparison-path[data-kind="actual"] { border-top:2px solid var(--cyan); }
.comparison-path[data-kind="free"] { border-top:2px solid var(--red); }
.comparison-path[data-kind="admissible"] { border-top:2px solid var(--violet); }
.comparison-path>span { color:var(--muted); font-family:var(--mono); font-size:12px; text-transform:uppercase; }
.comparison-path strong { display:block; margin:7px 0; color:var(--text-bright); font-size:13px; }
.comparison-path p { margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.constraint-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 20px 22px; }
.constraint-grid>section { padding:13px; border:1px solid var(--line); background:var(--panel); }
.constraint-list,.ablation-list { margin-top:9px; display:grid; gap:6px; }
.constraint-list p,.ablation-list p { margin:0; padding:7px 8px; background:var(--panel-raised); color:var(--muted); font-size:12px; }
.constraint-list code,.ablation-list code { color:var(--violet); font-family:var(--mono); font-size:12px; }

.inspector-body { max-height:calc(100vh - 66px); overflow:auto; padding:15px; }
.inspector-body h3 { margin:0 0 13px; color:var(--text-bright); font-size:16px; overflow-wrap:anywhere; }
.inspector-facts { margin:0; display:grid; border:1px solid var(--line); }
.inspector-facts div { min-width:0; padding:8px 9px; border-bottom:1px solid var(--line); }
.inspector-facts div:last-child { border-bottom:0; }
.inspector-facts dt { color:var(--muted); font-size:12px; }
.inspector-facts dd { margin:3px 0 0; color:var(--text); font-family:var(--mono); font-size:12px; overflow-wrap:anywhere; }
.inspector-body section { margin-top:14px; }
.inspector-body h4 { margin:0 0 5px; color:var(--text-bright); font-size:12px; }
.inspector-body section p { margin:0; color:var(--muted); font-size:12px; line-height:1.55; overflow-wrap:anywhere; }
.inspector-body details { margin-top:14px; border-top:1px solid var(--line); }
.inspector-body summary { padding:9px 0; color:var(--text-bright); font-size:12px; cursor:pointer; }
.inspector-body pre { max-height:470px; margin:0; overflow:auto; padding:9px; border:1px solid var(--line); background:var(--bg); color:var(--cyan); font-family:var(--mono); font-size:12px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.fatal-error { position:fixed; z-index:50; inset:auto 20px 20px; padding:14px 16px; border:1px solid var(--red); background:#f8dfdc; color:#7c2923; font-family:var(--mono); font-size:12px; }
body[data-state="error"] .verified-badge { color:var(--red); }
body[data-state="error"] .verified-badge i { background:var(--red); box-shadow:0 0 0 4px #f3d5d2; }

@media (max-width:1320px) {
  .explorer-shell { grid-template-columns:270px minmax(580px,1fr); }
  .inspector-panel { position:relative; grid-column:1/3; max-height:none; border-top:1px solid var(--line); border-left:0; }
  .inspector-body { max-height:none; display:grid; grid-template-columns:300px 1fr; gap:16px; }
  .inspector-body h3 { grid-column:1/3; }
  .inspector-body details { margin-top:0; }
}
@media (max-width:980px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header nav { display:none; }
  .hero { grid-template-columns:1fr; gap:30px; }
  .layer-boundary { grid-template-columns:1fr; }
  .layer-boundary article { border-right:0; border-bottom:1px solid var(--line); }
  .layer-boundary article:last-child { border-bottom:0; }
  .explorer-shell { display:block; }
  .trace-panel { position:relative; max-height:none; border-right:0; border-bottom:1px solid var(--line); }
  .trace-list { max-height:430px; }
  .inspector-panel { position:relative; }
  .load-interpretation { grid-template-columns:1fr; }
  .load-interpretation>div { border-right:0; border-bottom:1px solid #ad9bc8; }
}
@media (max-width:700px) {
  .site-header { padding:0 16px; }
  .verified-badge { display:none; }
  .hero,.layer-boundary { width:calc(100% - 28px); }
  .hero { padding:48px 0 35px; }
  .hero h1 { font-size:42px; }
  .identity-card,.path-cards,.trust-roots,.path-comparison,.constraint-grid { grid-template-columns:1fr; }
  .identity-card div { border-right:0; }
  .identity-card div:nth-last-child(-n+2) { border-bottom:1px solid var(--line); }
  .identity-card div:last-child { border-bottom:0; }
  .explorer-shell { width:100%; border-right:0; border-left:0; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .mode-switch { width:100%; }
  .mode-switch button { flex:1; }
  .graph-notice,.path-boundary,.comparison-heading { flex-direction:column; }
  .graph-wrap { min-height:280px; margin-right:12px; margin-left:12px; }
  #provenance-graph { min-height:280px; }
  .analysis-controls { min-width:0; width:100%; }
  .load-grid { grid-template-columns:1fr; }
  .load-interpretation { margin-right:12px; margin-left:12px; }
  .load-facts { grid-template-columns:1fr; }
  .load-facts div,.load-facts div:nth-child(2n),.load-facts div:nth-last-child(-n+2) { border-right:0; border-bottom:1px solid var(--line); }
  .load-facts div:last-child { border-bottom:0; }
  .inspector-body { display:block; }
  .inspector-body h3 { grid-column:auto; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }