@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap");

:root { --ink:#132425; --muted:#647071; --paper:#eef0ec; --panel:#f8f8f4; --line:#cad0c9; --deep:#132a2b; --existing:#71847b; --proposed:#d3a965; --lowering:#2d719a; --raising:#b0432f; --shadow:0 18px 50px rgba(24,40,39,.14); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { background:var(--paper); color:var(--ink); font-family:"Manrope", sans-serif; }
body { margin:0; min-width:320px; }
button, input { font:inherit; }
button, .map-link, .story-actions a { min-height:44px; }
button { border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; }
button:hover { border-color:#72827d; }
:focus-visible { outline:3px solid #e1a44b; outline-offset:3px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:14px clamp(18px,4vw,60px); background:var(--deep); color:#f6f3e9; }
.brand { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; border:1px solid #718d87; border-radius:50%; font:500 13px "DM Mono"; }
.brand strong,.brand small { display:block; }.brand small { margin-top:2px; color:#b9c7c2; font-size:11px; letter-spacing:.06em; }
.topbar-actions { display:flex; align-items:center; gap:10px; }.topbar button,.map-link { border-color:#58716c; background:transparent; color:#eef5f1; padding:11px 15px; text-decoration:none; font-size:12px; }.datum { color:#a9bbb5; font:11px "DM Mono"; }
main { width:min(1600px,100%); margin:auto; padding:clamp(24px,4vw,58px); }
.intro { display:grid; grid-template-columns:minmax(320px,1.25fr) minmax(280px,.75fr); align-items:end; gap:6vw; margin-bottom:28px; }
.eyebrow { margin:0 0 9px; color:#71807c; font:500 10px "DM Mono"; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,p { text-wrap:pretty; } h1 { max-width:920px; margin:0; font-size:clamp(34px,4vw,65px); line-height:.99; letter-spacing:-.055em; } h2 { margin:0; letter-spacing:-.025em; }.intro>p { max-width:620px; margin:0; color:var(--muted); line-height:1.65; }
.terrain-stage { background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); }
.stage-heading { display:flex; justify-content:space-between; align-items:end; padding:20px 22px 16px; border-bottom:1px solid var(--line); }.stage-heading h2 { font-size:24px; }#terrain-status { font:11px "DM Mono"; color:#59706a; }
.viewer-grid { display:grid; grid-template-columns:minmax(0,1fr) 250px; min-height:650px; }
.canvas-shell { position:relative; min-width:0; overflow:hidden; background:radial-gradient(circle at 62% 32%,#e7e7dc 0,#cfd5cc 47%,#aebcb3 100%); }
#terrain-canvas { display:block; width:100%; height:100%; min-height:650px; touch-action:none; }
.orientation { position:absolute; top:20px; left:20px; display:grid; place-items:center; width:45px; height:45px; border:1px solid rgba(19,42,43,.3); border-radius:50%; font:11px "DM Mono"; }.orientation span { position:absolute; top:5px; width:1px; height:12px; background:var(--raising); }
.gesture-help { position:absolute; bottom:15px; left:18px; margin:0; padding:7px 10px; background:rgba(244,245,239,.84); color:#475552; font:10px "DM Mono"; backdrop-filter:blur(8px); }
.surface-tags { position:absolute; inset:auto 18px 15px auto; display:flex; gap:8px; }.surface-tags span { padding:7px 10px; color:#203431; background:rgba(244,245,239,.84); font:10px "DM Mono"; }
.side-by-side-labels { position:absolute; inset:16px 16px auto; display:none; grid-template-columns:1fr 1fr; pointer-events:none; }.side-by-side-labels span { justify-self:start; padding:7px 10px; background:rgba(244,245,239,.88); font:10px "DM Mono"; }.side-by-side-labels span:last-child { justify-self:end; }.canvas-shell[data-terrain-mode="side-by-side"] .side-by-side-labels { display:grid; }.canvas-shell[data-terrain-mode="side-by-side"]::after { content:""; position:absolute; inset:0 auto 0 50%; width:1px; background:rgba(19,42,43,.45); pointer-events:none; }
.control-rail { padding:18px; border-left:1px solid var(--line); background:#f1f2ed; }.control-rail fieldset { padding:0; border:0; margin:0 0 24px; }.control-rail legend,.preset-grid>p { width:100%; margin:0 0 10px; color:#70807c; font:500 10px "DM Mono"; letter-spacing:.12em; text-transform:uppercase; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.segmented legend { grid-column:1/-1; }.segmented button { padding:8px 5px; font-size:11px; }.segmented button[aria-pressed="true"] { background:var(--deep); border-color:var(--deep); color:white; }
.range-control { display:block; padding:16px 0 22px; border-block:1px solid var(--line); margin-bottom:22px; }.range-control>span,.range-control small { display:flex; justify-content:space-between; }.range-control strong { font-size:12px; }.range-control output { font:11px "DM Mono"; }.range-control input { width:100%; margin:16px 0 8px; accent-color:var(--proposed); }.range-control small { color:var(--muted); font-size:9px; }.range-control small i { flex:1; height:1px; margin:6px 10px; background:linear-gradient(90deg,var(--existing),var(--proposed)); }
.compact-options { display:flex; flex-wrap:wrap; gap:5px; }.compact-options legend { flex-basis:100%; }.compact-options label { flex:1; padding:9px 6px; border:1px solid var(--line); text-align:center; font:11px "DM Mono"; }.compact-options input { accent-color:var(--deep); }.compact-options p { margin:5px 0 0; color:var(--muted); font-size:9px; line-height:1.45; }
.wireframes label { display:block; margin:9px 0; font-size:11px; }.wireframes input { accent-color:var(--deep); }
.preset-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; }.preset-grid p { grid-column:1/-1; }.preset-grid button { padding:7px 5px; font-size:10px; }
.difference-legend { display:grid; grid-template-columns:auto auto 50px auto 50px auto; align-items:center; gap:9px; padding:14px 22px; border-top:1px solid var(--line); font-size:10px; }.difference-legend strong { margin-right:auto; }.difference-legend i { height:5px; background:linear-gradient(90deg,var(--lowering),#b0b5b2,var(--raising)); }.difference-legend small { grid-column:1/-1; color:var(--muted); }.lowering { color:var(--lowering); }.raising { color:var(--raising); }
.evidence-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:16px 0; }.story-card,.measurement-card { padding:24px; border:1px solid var(--line); background:var(--panel); }.story-card { display:grid; grid-template-columns:130px 1fr; gap:5px 22px; }.story-card>.eyebrow,.story-actions { grid-column:1/-1; }.story-index { grid-row:2/4; display:flex; align-items:start; gap:6px; padding-top:7px; font:11px "DM Mono"; }.story-index i { width:20px; height:1px; margin-top:7px; background:var(--line); }.story-card p,.measurement-card p { color:var(--muted); font-size:12px; line-height:1.55; }.story-actions { display:flex; gap:7px; }.story-actions button { padding:8px 18px; }.story-actions button:first-child { background:var(--deep); color:white; }
.story-card[data-guide-dismissed="true"] { display:none; }.evidence-row:has(.story-card[data-guide-dismissed="true"]) { grid-template-columns:1fr; }
.measurement-values { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin:18px 0; }.measurement-values span { padding:12px 8px; border-left:2px solid var(--proposed); background:#edede6; font:10px "DM Mono"; }.measurement-values b { display:block; font-size:20px; color:var(--ink); }
.limitations { display:grid; grid-template-columns:.65fr 1.35fr; gap:6vw; padding:34px 8px; }.limitations ul { display:grid; grid-template-columns:1fr 1fr; gap:22px 36px; margin:0; padding:0; list-style:none; }.limitations li { color:var(--muted); font-size:12px; line-height:1.6; }.limitations strong { display:block; color:var(--ink); }
.fallback { display:grid; grid-template-columns:.75fr 1.25fr; gap:32px; padding:30px; border:1px solid var(--line); background:var(--panel); }.fallback a { color:var(--deep); font-weight:700; }.fallback figure { margin:0; }.fallback svg { width:100%; }.fallback-high,.fallback-low { fill:none; stroke-width:4; }.fallback-high { stroke:var(--existing); }.fallback-low { stroke:var(--proposed); }.fallback-fill { fill:url(#none); opacity:.15; stroke:none; }.fallback figcaption { color:var(--muted); font-size:11px; }
dialog { width:min(680px,calc(100% - 32px)); padding:32px; border:1px solid var(--line); background:var(--panel); color:var(--ink); box-shadow:var(--shadow); }dialog::backdrop { background:rgba(13,27,27,.7); backdrop-filter:blur(5px); }.dialog-close { float:right; padding:7px 14px; }dialog dl { display:grid; grid-template-columns:130px 1fr; gap:12px; }dialog dt { font-weight:700; }dialog dd { margin:0; color:var(--muted); line-height:1.5; }
dialog code { display:inline-block; max-width:100%; margin-top:6px; overflow-wrap:anywhere; color:#51615d; font:9px "DM Mono"; }.source-links { line-height:1.8; }
@media (max-width:960px) { .viewer-grid { grid-template-columns:1fr; }.control-rail { border-left:0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(2,1fr); gap:0 24px; }.canvas-shell,#terrain-canvas { min-height:540px; }.intro { grid-template-columns:1fr; }.difference-legend { grid-template-columns:auto auto 35px auto 35px auto; } }
@media (max-width:760px) { main { padding:18px 12px; }.topbar { align-items:flex-start; }.topbar-actions .datum,.topbar-actions button { display:none; }.map-link { display:grid; place-items:center; }.intro { gap:18px; }.viewer-grid { min-height:0; }.canvas-shell,#terrain-canvas { min-height:440px; }.control-rail { grid-template-columns:1fr; }.surface-tags { display:none; }.evidence-row,.limitations,.fallback { grid-template-columns:1fr; }.story-card { grid-template-columns:1fr; }.story-index { grid-row:auto; }.measurement-values { grid-template-columns:1fr 1fr; }.limitations ul { grid-template-columns:1fr; }.difference-legend { display:flex; flex-wrap:wrap; }.difference-legend i { width:35px; }.difference-legend small { width:100%; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }