:root{
  --bg: #eaf2f6;
  --sea:#c5dbe6;
  --land:#efe8d8;
  --land-hi:#f7f1e2;
  --ink:#1f2730;
  --muted:#576473;
  --border:rgba(15,20,28,.12);
  --shadow: 0 10px 30px -18px rgba(10,20,30,.35);
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:linear-gradient(180deg,#eaf2f6 0%, #d9e6ef 100%);
  display:flex;flex-direction:column;min-height:100vh;
}

.topbar{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:2rem;padding:.9rem 1.2rem .7rem;border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.55);backdrop-filter:blur(8px);
}
.title h1{
  font-family:var(--display);font-weight:600;letter-spacing:.01em;
  margin:0;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1;
}
.subtitle{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}
#yearDisplay{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}

.legend{font-size:.72rem;min-width:480px;max-width:560px}
.legend-title{color:var(--muted);margin-bottom:.35rem}
.grad-legend{margin-bottom:.25rem}
.grad-bar{height:14px;border-radius:4px;box-shadow:var(--shadow);background:linear-gradient(to right,#2fb000 0%,#b4c800 15%,#dcc80a 25%,#e68200 42%,#be5005 58%,#8c3205 78%,#391e02 100%)}
.grad-stops{display:flex;justify-content:space-between;font-size:.62rem;color:#5a6470;margin-top:.18rem;letter-spacing:.02em}
.overlays{display:flex;flex-wrap:wrap;gap:.9rem;color:var(--muted);font-size:.65rem;margin:.25rem 0 .3rem;align-items:center}
.overlays .sw{display:inline-block;width:14px;height:10px;border-radius:2px;vertical-align:middle;margin-right:.25rem;box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.overlays .sw-v{background:#b00000}
.overlays .sw-r{background:#9a00b3}
.legend-note{color:var(--muted);font-size:.65rem;line-height:1.35}
.legend-note b{color:var(--ink);font-weight:600}

main{flex:1;display:flex;flex-direction:column;min-height:0}
.stage{position:relative;flex:1;overflow:hidden}

.year-banner{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  z-index:15;pointer-events:none;
  background:rgba(255,255,255,.82);backdrop-filter:blur(8px);
  border:1px solid rgba(15,20,28,.10);
  border-radius:999px;padding:.35rem 1.1rem .4rem;
  box-shadow:0 8px 28px -14px rgba(10,20,30,.4),0 1px 0 rgba(255,255,255,.5) inset;
  display:flex;align-items:baseline;gap:.45rem;
  font-family:var(--display);
  user-select:none;
}
.year-banner .yb-prefix{
  font-family:var(--sans);
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.year-banner .yb-year{
  font-size:1.4rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  min-width:7.5ch;text-align:center;
}
@media (max-width:900px){
  .year-banner{top:8px;padding:.25rem .8rem .3rem}
  .year-banner .yb-year{font-size:1.1rem}
}
#mapCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#labelSvg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#labelSvg text{font-family:var(--display);font-weight:600;fill:#1a1a1a;paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
#labelSvg text.small{font-family:var(--sans);font-weight:500;font-size:11px}
#labelSvg text.aq-label{fill:#6a0080;stroke:rgba(255,255,255,.92)}

.tooltip{
  position:absolute;z-index:20;pointer-events:auto;
  background:rgba(22,28,36,.94);color:#fff;font-size:.78rem;
  padding:.55rem .7rem;border-radius:8px;max-width:280px;line-height:1.35;
  box-shadow:0 12px 40px -12px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.08);
}
.tooltip .tt-name{font-family:var(--display);font-size:.95rem;font-weight:600;margin-bottom:.15rem}
.tooltip .tt-range{color:#dce3ea;font-variant-numeric:tabular-nums;font-size:.7rem}
.tooltip .tt-color{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:middle}
.tooltip .tt-desc{margin-top:.35rem;color:#cfdaf2;font-size:.72rem;line-height:1.4;font-style:italic}
.tooltip .tt-notes{margin-top:.3rem;color:#dce3ea;font-size:.72rem;line-height:1.4}
.tooltip .tt-wiki{display:inline-block;margin-top:.4rem;color:#7ed7e0;font-size:.7rem;text-decoration:none;border-bottom:1px solid rgba(126,215,224,.4)}
.tooltip .tt-wiki:hover{border-color:#7ed7e0}

.controls{
  display:flex;align-items:center;gap:1rem;padding:.6rem 1.2rem;
  background:rgba(255,255,255,.7);border-top:1px solid var(--border);
  backdrop-filter:blur(6px);
}
.play{
  width:40px;height:40px;border-radius:50%;border:1px solid var(--border);
  background:#fff;cursor:pointer;font-size:.95rem;line-height:1;
  box-shadow:var(--shadow);transition:transform .15s ease;
}
.play:hover{transform:scale(1.05)}
.play.playing{background:#1f2730;color:#fff;border-color:#1f2730}

.step{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--border);
  background:#fff;cursor:pointer;font-size:.7rem;line-height:1;color:var(--ink);
  box-shadow:var(--shadow);transition:transform .12s ease,background .12s ease;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.step:hover{transform:scale(1.06);background:#f5f0e8}
.step:active{transform:scale(.96)}
.step-size{font-size:.78rem;color:var(--muted)}
.step-size select{
  margin-left:.35rem;padding:.25rem .4rem;border:1px solid var(--border);background:#fff;
  border-radius:4px;font-family:inherit;font-size:.78rem;color:var(--ink);
}

.timeline{flex:1;position:relative}
#timeSlider{
  width:100%;-webkit-appearance:none;appearance:none;background:transparent;
}
#timeSlider::-webkit-slider-runnable-track{
  height:6px;background:linear-gradient(90deg,#2fb000 0%,#b4c800 15%,#dcc80a 25%,#e68200 42%,#be5005 58%,#8c3205 78%,#391e02 100%);
  border-radius:3px;
}
#timeSlider::-moz-range-track{
  height:6px;background:linear-gradient(90deg,#2fb000 0%,#b4c800 15%,#dcc80a 25%,#e68200 42%,#be5005 58%,#8c3205 78%,#391e02 100%);
  border-radius:3px;
}
#timeSlider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:#fff;border:2px solid #1f2730;margin-top:-6px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2);
}
#timeSlider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid #1f2730;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}

.ticks{display:flex;justify-content:space-between;margin-top:2px;font-size:.65rem;color:var(--muted);font-variant-numeric:tabular-nums}

.speed{font-size:.78rem;color:var(--muted)}
.speed select{
  margin-left:.35rem;padding:.25rem .4rem;border:1px solid var(--border);background:#fff;border-radius:4px;font-family:inherit;font-size:.78rem;color:var(--ink);
}
.source{color:var(--muted);font-size:.7rem;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
.source:hover{border-color:currentColor}

@media (max-width:900px){
  .topbar{flex-direction:column;gap:.6rem}
  .legend{min-width:0;width:100%}
  .grad-stops{font-size:.58rem}
  .controls{flex-wrap:wrap}
  .timeline{flex:1 1 100%;order:3}
}