:root { --ink:#18202a; --muted:#607080; --line:#d8dfe5; --paper:#f7f9fb; --accent:#f24e1e; }
* { box-sizing:border-box; }
html,body { min-height:100%; margin:0; background:var(--paper); color:var(--ink); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
body>header { height:72px; display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:12px 22px; border-bottom:1px solid var(--line); background:#fff; }
h1,p { margin:0; } h1 { font-size:20px; letter-spacing:-.025em; } .eyebrow { color:var(--accent); font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.back-link { padding:7px 10px; border:1px solid var(--line); border-radius:999px; color:var(--ink); font-size:12px; font-weight:800; text-decoration:none; } output { color:var(--muted); font:800 12px ui-monospace,SFMono-Regular,Menlo,monospace; }
main { min-height:calc(100vh - 72px); display:grid; grid-template-columns:300px minmax(0,1fr); }
.controls { padding:18px; border-right:1px solid var(--line); background:#fff; overflow:auto; } .note,.result { color:var(--muted); font-size:12px; line-height:1.45; } .result { margin-top:16px; padding:11px; border-left:3px solid var(--accent); background:#fff4f0; color:#7f341f; }
fieldset { margin:19px 0 0; padding:0; border:0; } legend { margin-bottom:8px; color:#3c4b59; font-size:11px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; } fieldset>label { display:block; padding:6px 0; font-size:13px; } input { accent-color:var(--accent); } small { color:var(--muted); }
.buttons { display:flex; flex-wrap:wrap; gap:6px; } button { border:1px solid var(--line); border-radius:999px; padding:6px 8px; background:#fff; color:var(--ink); font:750 12px ui-sans-serif,system-ui,sans-serif; cursor:pointer; } button:hover,button.active { border-color:var(--accent); background:#fff3ef; color:#a43211; }
.range-label { display:grid; grid-template-columns:1fr auto; gap:5px 8px; align-items:center; } .range-label input { grid-column:1 / -1; width:100%; } fieldset:disabled { opacity:.42; }
.map-wrap { min-height:560px; position:relative; background:#dce3e8; } #map { position:absolute; inset:0; } .maplibregl-ctrl-attrib { font-size:10px; }
@media (max-width:720px) { body>header { height:auto; grid-template-columns:auto 1fr; padding:12px; } body>header output { grid-column:1 / -1; } main { grid-template-columns:1fr; } .controls { border-right:0; border-bottom:1px solid var(--line); } .map-wrap { min-height:68vh; } }