@font-face{font-family:'Bricolage Grotesque';font-weight:200 800;font-stretch:75% 100%;src:url(/static/fonts/bricolage-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Bricolage Grotesque';font-weight:200 800;font-stretch:75% 100%;src:url(/static/fonts/bricolage-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#10282F; --ink2:#4B6A6E; --land:#F2B134; --sea:#DCEBE7; --card:#F5FAF8; --line:#A7C5C1;
  --on-land:#10282F; --nav:#DCEBE7E6; --grid:#A7C5C155; --a-line:#B9740C;
  --r-s:8px; --r-m:10px; --r-l:14px; --bw:2px; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[data-theme="dark"]{--ink:#E3F1ED;--ink2:#8FB0B1;--sea:#0B1D24;--card:#112A33;--line:#24454D;--nav:#0B1D24E6;--grid:#24454D77;--a-line:#F2B134}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#E3F1ED;--ink2:#8FB0B1;--sea:#0B1D24;--card:#112A33;--line:#24454D;--nav:#0B1D24E6;--grid:#24454D77;--a-line:#F2B134}}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background-color:var(--sea);font-family:'Bricolage Grotesque',system-ui,sans-serif;font-stretch:92%;font-size:16px;line-height:1.55;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:64px 64px;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1{font-weight:800;font-stretch:92%;line-height:1.05;letter-spacing:-.01em;margin:0 0 .4em;font-size:clamp(2rem,5vw,3.4rem)}
mark{background:var(--land);color:var(--on-land);border-radius:var(--r-l);padding:0 .16em;display:inline-block;line-height:1.02}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
:focus-visible{outline:3px solid var(--land);outline-offset:2px;box-shadow:0 0 0 5px var(--ink)}

.top{position:sticky;top:0;z-index:20;background:var(--nav);backdrop-filter:blur(8px);border-bottom:var(--bw) solid var(--ink)}
.bar{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:1.1rem}
.brand b{color:var(--ink2)}
.tag{margin-left:auto;color:var(--ink2);font-size:.9rem;display:none}
@media(min-width:720px){.tag{display:block}}
#theme{margin-left:auto}@media(min-width:720px){#theme{margin-left:0}}

.chip{font:inherit;font-weight:700;font-size:.9rem;color:var(--ink);background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-s);padding:6px 12px;cursor:pointer;line-height:1.2}
.chip:hover,.chip.on{background:var(--land);color:var(--on-land)}
.btn{font:inherit;font-weight:800;color:var(--on-land);background:var(--land);border:var(--bw) solid var(--ink);border-radius:var(--r-l);padding:12px 22px;cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.btn:disabled{opacity:.5;cursor:wait}
.panel{background:var(--card);border:var(--bw) solid var(--ink);border-radius:var(--r-l);box-shadow:8px 8px 0 var(--land)}

.hero{padding:44px 0 22px}
.coord{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--ink2);margin:0 0 1em}
.lead{max-width:62ch;color:var(--ink2);font-size:1.08rem;margin:0}

.controls{padding:18px;display:grid;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.row.between{justify-content:space-between;align-items:center}
.row.pair{gap:18px}
.grow{flex:1 1 220px}
label{display:grid;gap:4px;font-weight:700;font-size:.82rem;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em}
select{font:inherit;font-weight:600;font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink);background:var(--sea);border:var(--bw) solid var(--ink);border-radius:var(--r-s);padding:8px 10px;min-width:120px;max-width:100%}
.side{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;padding:10px 12px;border:var(--bw) dashed var(--line);border-radius:var(--r-m)}
.badge{align-self:center;font-weight:800;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;border:var(--bw) solid var(--ink)}
.badge.a{background:var(--land);color:var(--on-land)}
.badge.b{background:var(--ink);color:var(--sea)}
.status{min-height:1.6em;margin:14px 2px;color:var(--ink2);font-weight:600}
.status.err{color:var(--ink);background:var(--card);border:var(--bw) dashed var(--ink);border-radius:var(--r-m);padding:10px 14px}

.cards{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:6px 0 22px}
.card{border:var(--bw) solid var(--ink);border-radius:var(--r-m);padding:12px 14px;background:var(--card)}
.card .k{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink2)}
.card .v{display:flex;gap:10px;align-items:baseline;font-variant-numeric:tabular-nums;font-weight:800;font-size:1.25rem}
.card .v i{font-style:normal;font-size:.8rem;font-weight:700;padding:0 6px;border-radius:6px;border:var(--bw) solid var(--ink)}
.card .v i.a{background:var(--land);color:var(--on-land)}.card .v i.b{background:var(--ink);color:var(--sea)}
.card .d{font-size:.82rem;color:var(--ink2);margin-top:2px}

.grid2{display:grid;gap:22px;margin-bottom:22px}
@media(min-width:960px){.grid2{grid-template-columns:1.6fr 1fr}}
.mapbox,.readout,.charts{padding:16px}
.h{font-size:1.05rem}
#map{width:100%;height:auto;display:block;margin-top:10px;background:var(--sea);border:var(--bw) solid var(--ink);border-radius:var(--r-m)}
.seg{display:flex;gap:6px}
.legend-line{display:flex;gap:6px 18px;flex-wrap:wrap;margin:10px 0 0;font-size:.85rem;color:var(--ink2)}
.sw{display:inline-block;width:22px;height:8px;border-radius:4px;border:var(--bw) solid var(--ink);vertical-align:middle;margin-right:6px}
.sw.a{background:var(--land)}.sw.b{background:var(--ink)}
.sw.ramp{background:linear-gradient(90deg,var(--ink2),var(--land))}

.readout h3,.readout .h{margin:0 0 8px}
.readout table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.readout th,.readout td{padding:5px 6px;text-align:right;border-bottom:1px dashed var(--line);font-size:.95rem}
.readout th:first-child,.readout td:first-child{text-align:left;color:var(--ink2);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.readout thead th{font-weight:800}
.readout .gap{margin-top:12px;border:var(--bw) solid var(--ink);border-radius:var(--r-m);padding:10px 12px;background:var(--sea);font-weight:800;font-size:1.05rem}
.readout .gap small{display:block;font-weight:600;color:var(--ink2);font-size:.8rem}

.charts{display:grid;gap:6px}
.ch .t{font-weight:800;font-size:.9rem;margin:8px 0 2px;display:flex;justify-content:space-between;gap:10px}
.ch .t small{font-weight:600;color:var(--ink2)}
.ch svg{width:100%;height:auto;display:block;cursor:crosshair;touch-action:pan-y}
.ax{font:600 11px var(--mono);fill:var(--ink2)}
.gl{stroke:var(--line);stroke-width:1}
.la{fill:none;stroke:var(--a-line);stroke-width:2.4;stroke-linejoin:round}
.lb{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.fa{fill:var(--land);opacity:.85}.fb{fill:var(--ink);opacity:.7}
.cur{stroke:var(--ink);stroke-width:1.4;stroke-dasharray:3 3}
.note{max-width:78ch;color:var(--ink2);font-size:.9rem;margin:28px 0 40px;border-left:4px solid var(--land);padding-left:14px}