:root {
  --ink: #e8f8f7;
  --muted: #7c999c;
  --aqua: #56f4df;
  --blue: #45aafc;
  --violet: #7656d8;
  --panel: rgba(5, 16, 22, .76);
}

* { box-sizing: border-box; }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #02070b; color: var(--ink); font-family: Manrope, sans-serif; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#map { cursor: grab; touch-action: none; user-select: none; }
body.is-panning #map { cursor: grabbing !important; }
#geography, #heat-a, #heat-b, #overlay { pointer-events: none; }
.heat-layer { opacity: 0; transition: opacity 48ms linear; }
.heat-layer.active { opacity: 1; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 55% 46%, transparent 42%, rgba(2,7,11,.12) 72%, rgba(2,7,11,.48) 110%), linear-gradient(90deg, rgba(2,7,11,.32), transparent 24%, transparent 84%, rgba(2,7,11,.18)); }

header { position: absolute; left: 4.2vw; top: 4.5vh; width: 460px; }
.eyebrow { color: #8aa3a6; font: 500 13px/1.4 Manrope, sans-serif; letter-spacing: 0.01em; }
h1 { margin: 0 0 6px; color: var(--ink); font: 600 clamp(36px, 4.2vw, 64px)/1 Manrope, sans-serif; letter-spacing: -0.02em; }
.source { margin: 0; color: #8aa3a6; font: 400 15px/1.4 Manrope, sans-serif; }
#view-summary { margin: 10px 0 0; color: #91a8aa; font-size: 13px; letter-spacing: 0; }

.bottom-dock {
  position: absolute;
  left: 3.8vw;
  right: 3.8vw;
  bottom: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.copyright { padding: 0 2px 2px; }
.copyright p { margin: 0; color: #5d7578; font-size: 10px; line-height: 1.4; }
.copyright a, .copyright button {
  padding: 0;
  border: 0;
  color: #7f989b;
  background: none;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.copyright a:hover, .copyright a:focus-visible, .copyright button:hover, .copyright button:focus-visible { color: #c5d8d6; outline: 0; }

.metrics { position: absolute; top: 5vh; right: 3.8vw; display: grid; grid-template-columns: repeat(2, 150px); gap: 1px; background: rgba(180,200,198,.14); border: 1px solid rgba(180,200,198,.16); }
.metrics article { padding: 12px 16px; background: rgba(3,13,18,.9); }
.metrics b { display: block; font: 400 18px/1.2 DM Mono, monospace; color: #d8fffa; }
.metrics span { display: block; margin-top: 3px; color: #6e8b8e; font: 400 11px/1.25 Manrope, sans-serif; }

.inspector { position: absolute; left: 4.2vw; bottom: max(16vh, 168px); width: 270px; padding-left: 15px; border-left: 1px solid rgba(180,200,198,.35); opacity: .72; transition: opacity .2s; }
.inspector.active { opacity: 1; }
.inspector-label { color: #6f9194; font: 500 12px/1.3 Manrope, sans-serif; }
.inspector h2 { margin: 8px 0 12px; font-size: 15px; font-weight: 500; line-height: 1.35; }
.gauge-readout { display: flex; align-items: baseline; gap: 7px; }
.gauge-readout strong { font: 400 24px DM Mono, monospace; color: var(--aqua); }
.gauge-readout span { color: #729397; font: 400 12px/1.3 Manrope, sans-serif; }
.inspector p { color: #607b7e; font-size: 12px; line-height: 1.55; }
#clear-gauges { margin-top: 12px; padding: 7px 10px; border: 1px solid rgba(180,200,198,.28); color: #9ac0c0; background: rgba(4,15,20,.72); font: 500 12px Manrope, sans-serif; cursor: pointer; }
#clear-gauges:hover, #clear-gauges:focus-visible { color: var(--aqua); border-color: rgba(86,244,223,.5); outline: 0; }
#clear-gauges[hidden] { display: none; }

.view-controls {
  position: absolute;
  right: 3.8vw;
  bottom: max(22vh, 210px);
  width: 210px;
  display: grid;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(180,200,198,.16);
  background: rgba(3,13,18,.9);
}
.map-navigation {
  display: grid;
  grid-template-columns: 32px 1fr 32px;
  gap: 5px;
}
.map-navigation button {
  height: 29px;
  border: 1px solid rgba(86,244,223,.18);
  color: #d8fffa;
  background: rgba(4,15,20,.92);
  font: 500 12px DM Mono, monospace;
  cursor: pointer;
}
.map-navigation button:hover:not(:disabled),
.map-navigation button:focus-visible { border-color: rgba(86,244,223,.48); color: var(--aqua); outline: 0; }
.map-navigation button:disabled { color: #466064; cursor: default; }
.navigation-hint {
  margin: -3px 0 2px;
  color: #587477;
  font: 400 11px/1.3 Manrope, sans-serif;
  text-align: center;
}
.view-controls label {
  display: grid;
  gap: 3px;
  color: #6e8b8e;
  font: 500 11px/1.3 Manrope, sans-serif;
}
.view-controls select {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid rgba(180,200,198,.2);
  color: #d8fffa;
  background: rgba(4,15,20,.92);
  font: 400 12px/1.3 Manrope, sans-serif;
  cursor: pointer;
}
.view-controls select:focus { outline: 1px solid rgba(86,244,223,.4); }
.layer-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.residual-toggle { grid-column: 1 / -1; }
.toggle { grid-template-columns: 14px 1fr; align-items: center; gap: 8px; }
.toggle input { accent-color: var(--aqua); margin: 0; }
.scale-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 0; }
.scale-legend i {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(90deg, #16205c, #1aa8a8, #eccc32, #fff6d2);
}
.scale-legend span { color: #5d7a7d; font: 400 11px/1.3 Manrope, sans-serif; }
.scale-legend span:last-child { text-align: right; }

.corner-actions { position: absolute; right: 3.8vw; bottom: max(15.7vh, 156px); z-index: 4; display: flex; gap: 8px; }
.info-button { padding: 8px 12px; border: 1px solid rgba(180,200,198,.24); color: #9ac0c0; background: rgba(3,13,18,.76); font: 500 13px Manrope, sans-serif; cursor: pointer; }
.info-button:hover, .info-button:focus-visible { color: var(--aqua); border-color: rgba(86,244,223,.5); outline: 0; }

.about {
  width: min(920px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  margin: auto;
  padding: clamp(24px, 4vw, 40px);
  overflow: auto;
  border: 1px solid rgba(86,244,223,.18);
  background: rgba(3,12,17,.97);
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  scrollbar-width: thin;
  scrollbar-color: rgba(86,244,223,.35) rgba(3,12,17,.97);
}
.about::backdrop { background: rgba(2,7,11,.66); }
.about #about-close { position: sticky; top: 0; z-index: 1; float: right; width: 34px; height: 34px; margin: -12px -12px -22px 8px; border: 1px solid rgba(180,200,198,.2); color: #a9c4c4; background: #0a1b20; font-size: 25px; line-height: 1; cursor: pointer; }
.about #about-close:hover, .about #about-close:focus-visible { color: var(--aqua); border-color: rgba(86,244,223,.5); outline: 0; }
.about h2 { margin: 10px 40px 10px 0; font-size: clamp(26px, 3vw, 34px); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.about h3 { margin: 0 0 16px; font-size: 17px; font-weight: 600; }
.about h4 { margin: 0 0 9px; color: #d5efec; font-size: 14px; font-weight: 600; }
.about p, .about li { color: #9bb0b2; font-size: 13px; line-height: 1.65; }
.about p { margin: 0; }
.about p + p { margin-top: 12px; }
.about .about-lead { max-width: 650px; margin-bottom: 28px; color: #c3d9d7; font-size: 15px; line-height: 1.6; }
.about section + section { margin-top: 30px; }
.about-overview { padding: 20px 22px; border: 1px solid rgba(86,244,223,.16); background: rgba(86,244,223,.04); }
.about-overview ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.about-overview li { padding-left: 13px; border-left: 2px solid rgba(86,244,223,.38); }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.about-grid article { padding: 18px 20px; border: 1px solid rgba(180,200,198,.14); background: rgba(9,25,31,.58); }
.about-grid .legend { margin: 0; }
.about-footer { padding-top: 24px; border-top: 1px solid rgba(180,200,198,.2); }
.about-footer .alpha-note { margin-bottom: 12px; color: #c6a778; }
.about-footer .alpha-note a { color: #f0c56a; }
.about-footer details { margin-top: 22px; }
.about-footer summary { padding: 12px 0; border-top: 1px solid rgba(180,200,198,.2); color: #d5efec; font-size: 14px; font-weight: 600; cursor: pointer; }
.about-footer summary:hover, .about-footer summary:focus-visible { color: var(--aqua); outline: 0; }
.about-footer details p { margin: 10px 0; }
.about-footer ul { display: grid; gap: 8px; margin: 12px 0; padding-left: 20px; }
.about a { color: #a8e8df; text-underline-offset: 3px; }
.about a:hover, .about a:focus-visible { color: var(--aqua); }

.disclaimer {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  display: grid;
  gap: 14px;
  width: min(560px, calc(100vw - 40px));
  max-height: min(78vh, 560px);
  overflow: auto;
  padding: 22px 22px 18px;
  border: 1px solid rgba(240,197,106,.38);
  background: rgba(22,16,8,.96);
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  transform: translate(-50%, -50%);
}
.disclaimer[hidden] { display: none; }
.disclaimer h2 { margin: 0 88px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -.02em; color: #f6edd8; }
.disclaimer p { margin: 0; color: #f3e6cc; font-size: 13px; line-height: 1.55; }
.disclaimer button {
  justify-self: end;
  padding: 8px 12px;
  border: 1px solid rgba(240,197,106,.45);
  color: #f3e6cc;
  background: transparent;
  font: 500 13px Manrope, sans-serif;
  cursor: pointer;
}
.disclaimer button:hover, .disclaimer button:focus-visible { color: #fff6e4; border-color: #f0c56a; outline: 0; }
.legend { display: grid; gap: 10px; margin-top: 28px; color: #9db2b3; font: 400 13px/1.4 Manrope, sans-serif; }
.legend span { display: flex; align-items: center; gap: 10px; }
.swatch { width: 18px; height: 2px; background: var(--aqua); }
.swatch.modelled { background: var(--blue); box-shadow: none; }
.swatch.uncertain { background: var(--violet); opacity: .65; box-shadow: none; }
.swatch.dam { width: 9px; height: 9px; transform: rotate(45deg); background: #f0c56a; border: 1px solid #1a1006; box-shadow: none; }

.timeline { height: 70px; display: grid; grid-template-columns: 48px 156px 1fr auto 180px; align-items: center; gap: 16px; padding: 0 18px; border-top: 1px solid rgba(180,200,198,.2); background: linear-gradient(90deg, rgba(4,15,20,.94), rgba(4,15,20,.84)); }
#play { width: 32px; height: 32px; border: 1px solid rgba(86,244,223,.4); border-radius: 50%; background: rgba(86,244,223,.05); color: var(--aqua); cursor: pointer; }
#play:disabled { opacity: .55; cursor: not-allowed; }
.motion-note { position: absolute; bottom: 100%; left: 0; padding: 5px 9px; color: #d8fffa; background: #10282d; font: 500 12px/1.4 Manrope, sans-serif; }
.motion-note[hidden] { display: none; }
.speed-control { display: grid; gap: 6px; justify-items: end; }
.speed-control span { color: #668285; font: 500 12px/1.3 Manrope, sans-serif; }
.speed-control div { display: flex; }
.speed-control button { height: 22px; padding: 0 7px; border: 1px solid rgba(86,244,223,.22); color: #7c999c; background: transparent; font: 500 9px DM Mono, monospace; cursor: pointer; }
.speed-control button + button { margin-left: -1px; }
.speed-control button[aria-pressed="true"] { color: #dffffb; border-color: rgba(86,244,223,.72); background: rgba(86,244,223,.14); }
.date-block span { display: block; color: #668285; font: 500 12px/1.3 Manrope, sans-serif; }
.date-block strong { display: block; margin-top: 4px; font: 400 15px DM Mono, monospace; }
input[type=range] { appearance: none; width: 100%; height: 2px; background: linear-gradient(90deg, var(--aqua) var(--progress, 0%), rgba(121,162,164,.2) var(--progress, 0%)); outline: 0; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #dffffb; cursor: pointer; }
.timeline-tail { text-align: right; }
.timeline-tail b { display: block; font: 400 14px DM Mono, monospace; }
.timeline-tail span { color: #668285; font: 400 12px/1.3 Manrope, sans-serif; }

.loading { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 12px; background: #02070b; transition: opacity .7s, visibility .7s; }
.loading.done { opacity: 0; visibility: hidden; }
.loading-mark { width: 42px; height: 42px; border: 1px solid rgba(86,244,223,.15); border-top-color: var(--aqua); border-radius: 50%; animation: spin 1.3s linear infinite; }
.loading span { color: #b7d2d2; font: 500 14px Manrope, sans-serif; }
.loading small { color: #476164; font: 400 12px Manrope, sans-serif; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .heat-layer, .inspector, .loading { transition: none; }
  .loading-mark { animation: none; }
}

@media (max-width: 760px) {
  header { left: 22px; top: 24px; width: calc(100% - 44px); }
  #view-summary { display: none; }
  .metrics { top: 120px; left: 22px; right: auto; grid-template-columns: repeat(2, 125px); }
  .metrics article:nth-child(2), .metrics article:nth-child(4) { display: none; }
  .inspector { left: 22px; bottom: 200px; }
  .view-controls { right: 22px; bottom: 200px; width: 168px; padding: 10px; }
  .corner-actions { right: 22px; bottom: 470px; flex-direction: column; align-items: flex-end; }
  .about { max-height: calc(100dvh - 32px); padding: 22px; }
  .about-overview ul, .about-grid { grid-template-columns: 1fr; }
  .bottom-dock { left: 12px; right: 12px; bottom: 8px; }
  .disclaimer { left: 16px; right: 16px; top: 50%; width: auto; max-height: 72vh; transform: translateY(-50%); }
  .timeline { grid-template-columns: 36px 108px 1fr auto; gap: 8px; }
  .timeline-tail, .speed-control span { display: none; }
  .speed-control { justify-items: center; }
  .speed-control button { padding: 0 5px; }
}