:root { --ink:#12213a; --muted:#607089; --paper:#f3f6fa; --card:#fff; --line:#dce4ee; --blue:#2f68c5; --orange:#d4691d; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.6 Inter,"Segoe UI",Arial,sans-serif; }
header { padding:36px max(24px,calc((100% - 1080px)/2)); color:#fff; background:linear-gradient(130deg,#0b223c,#173e65 58%,#0b666a); }
header a { color:#b9e8ef; } h1 { margin:16px 0 10px; font-size:clamp(30px,5vw,50px); line-height:1.1; letter-spacing:-.035em; }
header p { margin:0; color:#d8e8f1; } main { max-width:1130px; margin:auto; padding:26px 24px 60px; }
a { color:var(--blue); } h2 { margin:32px 0 12px; font-size:25px; line-height:1.2; } h3 { margin:10px 0; font-size:17px; }
.explorer { background:var(--card); padding:20px; border:1px solid var(--line); border-radius:12px; }
.controls,.bands,.dates { display:flex; align-items:center; flex-wrap:wrap; gap:12px; } .controls { justify-content:space-between; }
.bands label { display:flex; align-items:center; gap:6px; font-weight:600; } .bands input { width:18px; height:18px; }
.swatch { width:12px; height:12px; display:inline-block; } .swatch.l { background:var(--blue); } .swatch.s { background:var(--orange); }
.dates label { display:flex; align-items:center; gap:6px; font-size:14px; } input,select,button { font:inherit; }
input[type=date],select { color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:7px; background:white; min-width:0; }
button { background:#eef3f9; color:var(--ink); border:1px solid var(--line); padding:7px 12px; border-radius:6px; cursor:pointer; } button:disabled { opacity:.4; cursor:default; }
.hint,.snapshot { color:var(--muted); font-size:14px; } .hint { margin:10px 0; }
#timeline { width:100%; display:block; height:146px; overflow:visible; } #timeline text { font:12px "Segoe UI",sans-serif; fill:var(--muted); }
#timeline .axis path,#timeline .axis line { stroke:var(--line); } #timeline .selection { fill:#102a43; fill-opacity:.10; stroke:var(--ink); }
#timeline .handle { fill:var(--ink); } #range-status { font-size:14px; margin:8px 0; font-variant-numeric:tabular-nums; }
#map { position:relative; width:100%; height:auto; aspect-ratio:1.85; background:#f9fbfd; overflow:hidden; touch-action:none; }
#map canvas { position:absolute; inset:0; width:100%; height:100%; } #shots-map { cursor:crosshair; } #reset-map { position:absolute; right:10px; top:10px; font-size:13px; }
.selection { padding-top:10px; } .selection label { display:block; font-size:14px; color:var(--muted); } .selection select { width:100%; }
#shot-details { font-size:14px; overflow-wrap:anywhere; margin:10px 0; } #shot-details code { font-size:12px; }
#all-shots { font-size:14px; } #all-shots summary { cursor:pointer; } #shot-list button { display:block; width:100%; text-align:left; margin-top:6px; font-size:13px; overflow-wrap:anywhere; }
.pagination { display:flex; align-items:center; justify-content:space-between; margin-top:10px; gap:8px; }
.downloads { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } .downloads a { display:block; margin:6px 0; }
footer { margin-top:40px; color:var(--muted); font-size:14px; }
@media(max-width:680px) { main { padding:16px 12px 40px; } .explorer { padding:12px; } .dates { gap:8px; } .dates label { flex-wrap:wrap; } .downloads { grid-template-columns:1fr; gap:8px; } #map { aspect-ratio:1.35; } input[type=date] { font-size:16px; max-width:155px; } }