:root {
  --paper:#eee7dc; --ink:#18201f; --muted:#626963; --line:#b8aea0; --panel:#faf7f0;
  --oxide:#ad4d34; --teal:#1f6866; --gold:#9b6d20; --blue:#315f82; --purple:#725285; --red:#a53e35;
  --sans:Aptos,"Segoe UI",Arial,sans-serif; --serif:"Iowan Old Style",Baskerville,"Times New Roman",serif;
  --mono:"Cascadia Mono",Consolas,monospace;
}
* { box-sizing:border-box }
html { background:var(--paper); color:var(--ink) }
body { margin:0; font:18px/1.6 var(--serif) }
a { color:var(--teal); text-underline-offset:.16em }
.mast, main, footer { width:min(1440px,calc(100% - 40px)); margin:auto }
.mast { padding:22px 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; font:700 .72rem var(--sans); letter-spacing:.11em; text-transform:uppercase }
.intro { padding:62px 0 42px; display:grid; grid-template-columns:minmax(260px,680px) minmax(260px,520px); gap:26px 60px; align-items:end }
.kicker,.detail-status { margin:0; font:700 .72rem/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--oxide) }
h1 { grid-column:1; margin:.12em 0; font-size:clamp(3.3rem,7vw,7.7rem); line-height:.86; font-weight:500 }
h1 em { color:var(--oxide); font-weight:400 }
.lede { font-size:1.25rem; margin:0 }
.rule { margin:0; padding:16px 18px; border-left:5px solid var(--gold); background:var(--panel); font-family:var(--sans) }
.atlas { border-top:1px solid var(--line); padding:34px 0 }
.atlas-head { display:flex; justify-content:space-between; gap:24px; align-items:end }
.atlas h2 { font-size:clamp(2rem,4vw,3.6rem); line-height:1; margin:.18em 0 }
.counts { font:700 .78rem var(--mono); color:var(--muted) }
.controls { display:flex; flex-wrap:wrap; gap:12px; align-items:end; padding:18px 0 }
.controls label { display:grid; gap:4px; font:700 .72rem var(--sans); letter-spacing:.06em; text-transform:uppercase }
.controls input,.controls select,.controls button { min-height:40px; border:1px solid var(--line); background:var(--panel); color:var(--ink); padding:7px 10px; font:500 .84rem var(--sans); border-radius:0 }
.controls input { width:220px }
.controls select { max-width:230px }
.controls button { align-self:end }
.controls button[aria-pressed="true"] { background:var(--ink); color:var(--paper) }
.stage-shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,370px); gap:18px; align-items:stretch }
.stage-wrap { position:relative; min-width:0; min-height:780px; border:1px solid var(--line); background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 76%,transparent),color-mix(in srgb,var(--paper) 72%,var(--teal) 8%)); overflow:hidden }
.stage-wrap::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.62; background:linear-gradient(to bottom,transparent 0 25%,color-mix(in srgb,var(--purple) 10%,transparent) 25% 26%,transparent 26% 47%,color-mix(in srgb,var(--teal) 12%,transparent) 47% 48%,transparent 48% 70%,color-mix(in srgb,var(--gold) 11%,transparent) 70% 71%,transparent 71% 100%); z-index:0 }
#stage { position:absolute; inset:0 }
#stage canvas { display:block; width:100%; height:100% }
.graph-label-anchor { position:relative; width:0; height:0; pointer-events:none }
.graph-label { position:absolute; display:block; width:max-content; max-width:168px; margin:0; appearance:none; font:700 11px/1.22 var(--sans); color:var(--ink); background:color-mix(in srgb,var(--paper) 96%,transparent); padding:5px 7px; border:1px solid color-mix(in srgb,var(--node-color,var(--teal)) 46%,var(--line)); border-left:4px solid var(--node-color,var(--teal)); border-radius:0; box-shadow:0 3px 10px color-mix(in srgb,var(--ink) 13%,transparent); white-space:normal; text-align:center; overflow-wrap:normal; pointer-events:auto; cursor:pointer; will-change:transform }
.graph-label:hover,.graph-label:focus-visible { z-index:5; outline:2px solid var(--node-color,var(--teal)); outline-offset:2px; background:var(--panel); box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 24%,transparent) }
.graph-label.dim { opacity:.12 }
.graph-label.selected { z-index:4; background:var(--ink); color:var(--paper); box-shadow:0 5px 16px color-mix(in srgb,var(--ink) 28%,transparent) }
.detail { position:relative; min-width:0; width:100%; max-height:720px; overflow:auto; padding:22px; background:color-mix(in srgb,var(--panel) 94%,transparent); border:1px solid var(--line); border-left:5px solid var(--detail-color,var(--gold)); box-shadow:0 12px 36px color-mix(in srgb,var(--ink) 12%,transparent) }
.detail h3 { font-size:1.35rem; line-height:1.15; margin:.35em 0 }
.detail p { margin:.6em 0 }
.detail h4 { margin:1.35rem 0 .4rem; color:var(--oxide); font:800 .72rem/1.3 var(--sans); letter-spacing:.09em; text-transform:uppercase }
.detail ul { margin:.5em 0; padding-left:1.2em }
.detail .connections { font:500 .8rem/1.45 var(--sans) }
.detail .sources { font:.72rem/1.4 var(--mono); overflow-wrap:anywhere }
.connection-button { appearance:none; margin:0; padding:0; border:0; background:none; color:var(--teal); font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:.16em; cursor:pointer }
.connection-button:hover,.connection-button:focus-visible { color:var(--oxide); outline:2px solid color-mix(in srgb,var(--teal) 40%,transparent); outline-offset:2px }
.evidence-list { display:grid; gap:10px; padding:0!important; list-style:none }
.evidence-list li { display:grid; gap:4px; padding:10px; border:1px solid var(--line); background:var(--paper) }
.evidence-list li>span:first-child { color:var(--ink); font-weight:700 }
.depth-key { position:absolute; left:18px; bottom:18px; display:flex; align-items:center; gap:8px; font:700 .65rem var(--sans); text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl }
.depth-key i { display:block; width:1px; height:32px; background:var(--line) }
.legend { display:flex; flex-wrap:wrap; gap:24px 40px; padding:18px 0; font:500 .78rem var(--sans) }
.legend>div { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center }
.legend strong { margin-right:5px }
.legend span { display:flex; align-items:center; gap:5px }
.dot { width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--muted) }
.dot.established { background:var(--teal) }
.dot.conditional { background:var(--gold) }
.dot.underdetermined { background:var(--blue) }
.dot.obstructed { background:var(--red) }
.dot.missing { background:var(--ink) }
.dot.analogical { background:var(--purple) }
.edge-swatch { --edge-color:var(--muted); width:28px; height:0; display:inline-block; border-top:3px solid var(--edge-color) }
.edge-swatch.established { --edge-color:var(--teal) }
.edge-swatch.conditional { --edge-color:var(--gold) }
.edge-swatch.underdetermined { --edge-color:var(--blue) }
.edge-swatch.obstructed { --edge-color:var(--red) }
.edge-swatch.missing { --edge-color:var(--ink) }
.edge-swatch.analogical { --edge-color:var(--purple) }
.edge-swatch.dashed { border-top-style:dashed }
.edge-swatch.dotted { border-top-style:dotted }
footer { padding:28px 0 46px; border-top:1px solid var(--line); font:500 .78rem var(--sans); color:var(--muted) }
@media(max-width:980px) {
  .stage-shell { grid-template-columns:1fr }
  .stage-wrap { min-height:720px }
  .detail { max-height:none; box-shadow:none }
}
@media(max-width:820px) {
  .mast { flex-direction:column }
  .intro { grid-template-columns:1fr }
  .intro h1 { grid-column:1 }
  .depth-key { display:none }
}
@media(max-width:540px) {
  .mast,main,footer { width:min(100% - 24px,1440px) }
  .intro { padding-top:42px }
  .controls>* { width:100% }
  .controls input,.controls select { width:100%; max-width:none }
  .stage-wrap { min-height:700px }
  .graph-label { max-width:138px; font-size:10px }
  .detail { padding:18px }
}
@media(prefers-color-scheme:dark) {
  :root { --paper:#171b1a; --ink:#ece7de; --muted:#aaa79f; --line:#4a4d49; --panel:#222826; --oxide:#dd8065; --teal:#6db5ae; --gold:#d7ac5e; --blue:#75a9d0; --purple:#b699c5; --red:#df776e }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important } }