/* Local presentation inspired by Algia's current dorsal-horn union viewer.
 * Original page styles; these colors describe structure groups, not physiology. */
@font-face { font-family:Inter; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:Inter; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); }
:root { color-scheme:dark; --paper:#080e13; --plate:#070c10; --ink:#dfe4e3; --dim:#9caeb6; --faint:#8e9ca4; --rule:#ffffff17; --line:#ffffff10; --panel:#111c24; --card:#17252e; --accent:#e9ba83; --edge:#627580; --gold:#e9ba83; --sans:Inter,Arial,sans-serif; --serif:'Instrument Serif',Georgia,serif; }
* { scrollbar-color:#40515b transparent; scrollbar-width:thin; }
::-webkit-scrollbar-thumb { background:#40515b; }
body { font:400 14px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
main { max-width:1760px; margin:auto; padding:0 28px; }
a { color:#e3bc8f; text-underline-offset:3px; }
.encyc-mast { border-bottom:1px solid var(--line); background:#0e161c; }
.mast-inner { max-width:1760px; margin:auto; padding:18px 28px; display:flex; justify-content:space-between; gap:16px; font:11px/1.5 var(--sans); letter-spacing:.08em; color:#98a8b0; }
.mast-inner a { color:var(--ink); text-decoration:none; font-weight:500; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; gap:12px; }
.mast-inner a::before { content:'a'; font:36px/.6 var(--serif); color:var(--gold); text-transform:none; }
.mast-inner b { margin-left:12px; color:var(--gold); font-weight:400; }
.page-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(270px,.7fr); gap:4px 45px; padding:27px 4px 22px; align-items:center; }
.eyebrow { font:400 9px/1.5 var(--sans); letter-spacing:.19em; text-transform:uppercase; color:#a0aeb4; margin:0 0 12px; }
.page-head>.eyebrow { grid-column:1; margin-bottom:4px; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; letter-spacing:0; }
h1 { font-size:clamp(34px,3.6vw,52px); line-height:1.05; text-wrap:balance; margin:0; grid-column:1; grid-row:2/4; }
.intro { font-size:12px; color:#a3b3bc; line-height:1.8; text-wrap:pretty; margin:0; grid-column:2; grid-row:1/3; }
.scope-note { font:10px/1.6 var(--sans); color:#c2ae93; border-left:2px solid #e9ba8355; padding-left:11px; margin:9px 0 0; grid-column:2; }
.load-status { font:10px/1.5 var(--sans); color:#91a2ac; margin:0 4px 14px; }
.workbench { display:grid; grid-template-columns:244px minmax(0,1fr) 256px; gap:18px; align-items:start; padding:0 0 26px; border-bottom:1px solid var(--line); }
[hidden] { display:none!important; }
button,input,fieldset,.small,.figure-stamp,.group-controls,figcaption { font-family:var(--sans); }
button { color:var(--ink); cursor:pointer; font-size:11px; font-weight:400; min-height:40px; border:1px solid #ffffff1c; background:#101b22; border-radius:6px; padding:8px 10px; transition:background-color 160ms,border-color 160ms,transform 160ms; }
button:hover { background:#ffffff08; border-color:#ffffff36; color:#fff; }
button:active { transform:scale(.96); }
button:disabled { cursor:not-allowed; opacity:.45; }
button[aria-pressed="true"] { background:linear-gradient(105deg,#e9ba831c,#e9ba8306); color:#f0dfc9; border-color:#e9ba8355; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.route-panel,.inspector { background:linear-gradient(135deg,#141e24,#0e171d); padding:21px 15px; border:1px solid var(--line); border-radius:9px; }
.route-panel>.eyebrow,.inspector>.eyebrow { color:#91a2a9; }
.route-buttons { display:flex; flex-direction:column; gap:4px; }
.route-buttons button { text-align:left; display:flex; align-items:center; gap:10px; background-color:transparent; border-color:transparent; min-height:49px; line-height:1.5; }
.route-buttons button[aria-pressed="true"] { border-color:#e9ba8355; }
.route-buttons button[aria-pressed="true"]::after { content:''; flex-shrink:0; margin-left:auto; height:4px; width:4px; border-radius:50%; background:var(--gold); box-shadow:0 0 9px #e9ba8350; }
.route-buttons button span { color:#91a3ad; font-size:9px; font-variant-numeric:tabular-nums; }
.route-buttons button[aria-pressed="true"] span { color:var(--gold); }
.route-panel h2 { border:0; font-size:29px; line-height:1.12; margin:24px 0 10px; padding:0; }
.route-panel p { font-size:11px; line-height:1.75; color:#a0b1ba; }
fieldset { margin:20px 0 0; padding:10px; border:1px solid var(--rule); border-radius:6px; }
legend { font-size:10px; padding:0 5px; color:#b1bdc3; }
fieldset label,.hypothesis-control { display:flex; gap:8px; align-items:center; font:10px/1.5 var(--sans); min-height:40px; color:#c0cbd0; }
input { accent-color:var(--gold); }
.hypothesis-control { padding:10px 0; }
.small,.route-panel .small { font:10px/1.7 var(--sans); color:#9cafb8; }
.route-steps { list-style:none; margin:18px 0; padding:0; counter-reset:step; }
.route-steps li { position:relative; margin-bottom:5px; }
.route-steps button { width:100%; text-align:left; background:transparent; border:0; border-left:1px solid #65d7ef88; border-radius:0 4px 4px 0; padding:8px 6px 8px 11px; min-height:40px; color:#bdcbd2; line-height:1.55; font-size:10px; }
.route-steps button::before { counter-increment:step; content:counter(step,decimal-leading-zero) '  '; font-size:8px; color:#9aacb6; }
.route-steps button[aria-current="true"] { background:#e9ba8312; color:#f1ddc3; }
.route-steps li.hypothetical button { border-left:1px dashed #c3a0e5; }
.route-note { border-top:1px solid var(--line); padding-top:15px; }
.figure-column { min-width:0; }
.figure-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.figure-tabs button { font-size:10px; background-color:#0d171e; }
figure { margin:0; }
.stage { position:relative; height:660px; overflow:hidden; border-radius:8px; background:var(--plate); border:1px solid #ffffff0a; box-shadow:0 10px 40px #0003; }
.canvas { width:100%; height:100%; }
.canvas canvas { display:block; width:100%; height:100%; touch-action:none; }
.figure-stamp { position:absolute; z-index:2; top:20px; left:21px; pointer-events:none; }
.figure-stamp span { font-size:9px; letter-spacing:.16em; font-weight:400; border:1px solid #9ebac533; border-radius:3px; background:#0d1922bb; color:#d0dbe1; padding:5px 7px; }
.figure-stamp p { font-size:9px; margin-top:12px; color:#a2b3bd; max-width:260px; }
.camera-controls { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:5px; padding:5px; background:#0c161dcc; border:1px solid #b9cbd119; border-radius:9px; backdrop-filter:blur(12px); }
.camera-controls button { background:transparent; border-color:transparent; padding:6px 11px; min-height:40px; font-size:10px; color:#c7d2d8; }
.camera-controls button:hover { border-color:#e9ba8342; color:var(--gold); }
.scene-status { position:absolute; top:45%; left:8%; width:84%; font:12px/1.7 var(--sans); color:#f3d9c6; background:#2c1920f5; border:1px solid #ce947e66; padding:18px; border-radius:7px; }
.scene-status:empty { display:none; }
.scene-labels { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.scene-label { position:absolute; font:11px/1.35 var(--sans); max-width:155px; color:#e2e9ed; background:#101b23ed; border:1px solid color-mix(in srgb,var(--label-color) 45%,transparent); border-radius:5px; padding:5px 8px; transform:translate(-50%,-100%); text-align:center; box-shadow:0 4px 18px #0005; text-shadow:0 1px 6px #000; }
figcaption { font-size:10px; color:#94a7b1; margin-top:12px; line-height:1.7; }
.group-controls { display:flex; flex-wrap:wrap; gap:0 15px; margin-top:14px; font-size:10px; color:#b0bfc7; }
.group-controls label { display:flex; align-items:center; gap:5px; min-height:40px; }
.group-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
.atlas-source-mark { border-block:1px solid var(--line); padding:15px 0; margin:20px 0; }
.atlas-source-mark>span { display:block; font-size:10px; color:var(--gold); }
.atlas-source-mark strong { font:32px var(--serif); color:var(--ink); }
.atlas-source-mark p { margin:4px 0 0; }
#atlas-focus { margin-top:15px; }
.atlas-limit { border-left:2px solid #e9ba8380; background:#e9ba8308; padding:13px; margin:20px 0; }
.atlas-limit strong { font-size:11px; color:#e2c4a3; font-weight:500; }
.atlas-limit p { margin:7px 0 0; }
.atlas-legend { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px; font:10px/1.6 var(--sans); color:#b0bfc7; }
.atlas-legend span { display:flex; gap:6px; align-items:center; }
.atlas-legend i { width:6px; height:6px; border-radius:50%; }
.atlas-legend p { flex-basis:100%; margin:0; color:#9aabb4; }
.atlas-label { width:max-content; max-width:175px; }
.atlas-leaders { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.atlas-leaders line { stroke-width:1; stroke-opacity:.65; }
@media (max-width:480px) { .atlas-label { max-width:120px; font-size:10px; } }
.atlas-warning { color:#eed0a7!important; border-left:2px solid #e9ba8360; padding-left:9px; }
.evidence-legend { display:flex; flex-wrap:wrap; gap:8px 18px; font:9px var(--sans); color:#b0c0c8; margin:12px 0; }
.evidence-legend span { display:flex; align-items:center; gap:7px; }
.solid-line,.dashed-line { display:inline-block; width:22px; border-top:1px solid #65d7ef; }
.dashed-line { border-top:1px dashed #c3a0e5; }
.evidence-note { border-top:1px solid var(--line); padding-top:14px; }
.inspector h2 { border:0; font-size:30px; line-height:1.12; margin:16px 0 14px; padding:0; }
.inspector p { font-size:11px; line-height:1.75; color:#b3c2ca; }
.badge { display:inline-block; font:9px var(--sans); color:#b8cbd5; background:#17242c; border:1px solid #8fa6b22b; border-radius:4px; padding:5px 7px; margin:0 3px 5px 0; }
.inspector dl { font:10px/1.7 var(--sans); margin:18px 0; }
.inspector dt { color:#93a4af; margin-top:12px; }
.inspector dd { margin:2px 0 0; color:#c7d3d9; }
.measurement { padding:16px 0; border-block:1px solid var(--line); font:10px var(--sans); color:#a6b6bf; margin:20px 0 15px; }
.measurement strong { display:block; color:#d9c3a6; font-family:var(--serif); font-size:25px; font-weight:400; margin:8px 0; }
.measurement p { font:10px/1.7 var(--sans); color:#9cafb8; margin:0; }
.export { width:100%; display:flex; justify-content:space-between; align-items:center; color:#dfc4a2; font-size:10px; border-color:#e9ba8336; }
.search-label { display:block; font:10px var(--sans); color:#b0bfc8; margin:20px 0 8px; }
input[type="search"] { min-height:40px; width:100%; padding:10px; border:1px solid #ffffff20; background:#0b151c; border-radius:5px; color:var(--ink); font-size:11px; }
input[type="search"]::placeholder { color:#90a4af; }
.structure-list { max-height:285px; overflow-y:auto; }
.structure-list button { display:block; width:100%; border:0; background:transparent; text-align:left; border-radius:0; border-bottom:1px solid var(--line); font-size:10px; line-height:1.6; color:#aebfc8; }
.structure-list button[aria-pressed="true"] { background:#e9ba8310; color:#ebd4b9; box-shadow:inset 2px 0 var(--gold); }
.section-title h2 { margin:0 0 23px; padding:0; border:0; font-size:34px; line-height:1.15; }
.mechanisms,.source-section { padding:32px 4px; border-bottom:1px solid var(--line); }
.mechanism-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:20px; }
.mechanism-grid article { border:1px solid var(--line); border-radius:7px; padding:20px; background:linear-gradient(135deg,#121c23,#0c151b); }
.mechanism-grid span { font:10px var(--sans); color:var(--gold); }
.mechanism-grid h3 { font-size:28px; margin:12px 0; }
.mechanism-grid p,.source-grid p { font-size:12px; color:#a7bac4; line-height:1.8; }
.source-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:60px; }
.source-grid h3 { font-size:26px; margin-top:0; }
details { border-bottom:1px solid var(--line); padding:8px 0; }
summary { font:11px/1.7 var(--sans); cursor:pointer; min-height:40px; padding:9px 0; color:#c1cfd5; }
details p { margin:9px 0; }
footer { padding:25px 4px 40px; font:9px var(--sans); letter-spacing:.06em; color:#91a4ae; }
@media(min-width:1450px) { .workbench { grid-template-columns:252px minmax(0,1fr) 270px; gap:20px; } .stage { height:740px; } }
@media(max-width:1150px) { main { padding:0 20px; } .workbench { grid-template-columns:224px minmax(0,1fr); gap:16px; } .page-head { gap:4px 28px; } .inspector { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:0 28px; padding:22px; } .inspector>.eyebrow { grid-column:1/-1; } .structure-list { max-height:190px; } .stage { height:650px; } }
@media(max-width:700px) { main { padding:0 12px; } .mast-inner { padding:16px; font-size:8px; align-items:center; } .mast-inner a { font-size:9px; letter-spacing:.08em; } .mast-inner a::before { font-size:29px; } .mast-inner b { margin-left:3px; } .page-head { display:block; padding:24px 5px 18px; } .page-head h1 { font-size:38px; margin:9px 0 15px; } .intro { font-size:11px; line-height:1.7; } .scope-note { font-size:9px; margin-top:14px; } .workbench { grid-template-columns:1fr; } .figure-column { grid-row:1; } .stage { height:510px; } .route-buttons { display:grid; grid-template-columns:1fr 1fr; } .route-buttons button { min-height:54px; } .route-panel { padding:20px 16px; } .inspector { display:block; padding:20px 16px; } .mechanism-grid,.source-grid { grid-template-columns:1fr; gap:16px; } .section-title h2 { font-size:30px; } .scene-label { font-size:10px; max-width:120px; } .camera-controls button { padding:6px 10px; } .figure-stamp { left:16px; } }
@media(prefers-reduced-motion:reduce) { button { transition:none; } button:active { transform:none; } }

.source-selector{display:block;margin:18px 0 7px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
#atlas-source, #atlas-smoothing, #atlas-context-surface{width:100%;padding:10px 8px;background:#161c20;color:#e4ded2;border:1px solid #44494a;border-radius:4px;font:inherit;font-size:12px}
#atlas-source:focus-visible, #atlas-smoothing:focus-visible, #atlas-context-surface:focus-visible{outline:2px solid #d3af70;outline-offset:3px}

#context-opacity { width:100%; accent-color:#c7b28a; }
#context-opacity-value { float:right; color:#d6c69e; }
#atlas-overview { margin-bottom:8px; }