:root {
  --ink: #102c33;
  --muted: #61767a;
  --paper: #f5f2e9;
  --paper-deep: #eae5d8;
  --teal: #0d5661;
  --teal-dark: #092f3a;
  --aqua: #88d0c6;
  --orange: #ed6a3a;
  --line: rgba(16, 44, 51, 0.15);
  --white: #fffefa;
  --shadow: 0 20px 70px rgba(9, 47, 58, 0.12);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--paper); line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, select { color: inherit; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.section { padding: 104px 0; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 16px; background: white; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 82% 28%, rgba(136, 208, 198, .2), transparent 27%),
    linear-gradient(135deg, #082b35 0%, #0b4752 58%, #0d5661 100%);
}
.nav { position: relative; z-index: 3; height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.14); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 720; letter-spacing: -.03em; }
.brand-mark { width: 22px; height: 22px; display: inline-block; border: 2px solid var(--aqua); border-radius: 50% 50% 48% 52%; position: relative; transform: rotate(-12deg); }
.brand-mark::after { content: ""; position: absolute; inset: 5px -5px -3px 6px; border-right: 2px solid var(--orange); border-radius: 50%; }
.brand-accent { color: var(--aqua); }
.nav-links { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.nav-links a { opacity: .82; transition: opacity .2s; }
.nav-links a:hover { opacity: 1; }
.nav-github { padding: 9px 15px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; }
.hero-content { position: relative; z-index: 2; min-height: 635px; display: grid; grid-template-columns: 1.45fr .72fr; gap: 110px; align-items: center; padding-bottom: 40px; }
.hero-content > * { min-width: 0; }
.eyebrow, .section-label, .panel-label, .summary-kicker { margin: 0 0 14px; color: var(--orange); font-size: 12px; font-weight: 760; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { max-width: 760px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(52px, 7vw, 92px); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.hero h1 span { color: var(--aqua); }
.hero-intro { max-width: 660px; margin: 28px 0 0; color: rgba(255,255,255,.72); font-size: 18px; }
.hero-actions { display: flex; gap: 14px; margin-top: 36px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 14px; font-weight: 700; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--teal-dark); background: var(--aqua); }
.button-secondary { border: 1px solid rgba(255,255,255,.3); }
.button-dark { color: white; background: var(--teal-dark); }
.hero-summary { position: relative; padding: 34px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.17); border-radius: 28px; backdrop-filter: blur(14px); box-shadow: 0 30px 90px rgba(0,0,0,.15); }
.summary-orbit { position: absolute; right: 22px; top: 24px; width: 58px; height: 58px; border: 1px solid rgba(136,208,198,.35); border-radius: 50%; }
.summary-orbit::after { content: ""; position: absolute; width: 8px; height: 8px; right: 2px; top: 8px; background: var(--orange); border-radius: 50%; }
.summary-kicker { color: var(--aqua); }
.hero-summary > strong { display: block; margin-top: 15px; font-family: Georgia, serif; font-size: 80px; font-weight: 400; line-height: 1; }
.hero-summary > span { color: rgba(255,255,255,.6); }
.hero-summary dl { margin: 34px 0 0; }
.hero-summary dl div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; }
.hero-summary dt { color: rgba(255,255,255,.48); }
.hero-summary dd { margin: 0; text-align: right; }
.hero-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to right, transparent 0%, black 70%); transform: perspective(600px) rotateZ(-5deg) scale(1.2); }

.intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 100px; }
h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(38px, 4.5vw, 60px); font-weight: 400; line-height: 1.07; letter-spacing: -.04em; }
.intro > p, .section-heading > p, .components-grid > div > p { margin: 0; color: var(--muted); font-size: 17px; }

.explorer-section { background: #e8e4da; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 80px; margin-bottom: 40px; }
.section-heading > p { max-width: 470px; }
.explorer-shell { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(260px, .8fr); gap: 18px; }
.panel { background: var(--white); border: 1px solid rgba(16,44,51,.09); border-radius: var(--radius); box-shadow: var(--shadow); }
.map-card { min-width: 0; padding: 26px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel-head h3 { margin: 0; font-family: Georgia, serif; font-size: 28px; font-weight: 400; }
.panel-label { margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.value-readout { text-align: right; }
.value-readout span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.value-readout strong { color: var(--teal); font-family: Georgia, serif; font-size: 27px; font-weight: 400; }
.map-wrap { position: relative; height: 475px; margin-top: 8px; }
#tws-map { display: block; width: 100%; height: 100%; }
.map-tooltip { position: absolute; z-index: 4; pointer-events: none; min-width: 150px; padding: 9px 11px; color: white; background: rgba(9,47,58,.94); border-radius: 8px; font-size: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.2); transform: translate(12px, -50%); }
.map-tooltip strong { display: block; margin-bottom: 2px; color: var(--aqua); }
.map-legend { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 10px; }
.legend-scale { width: min(230px, 35%); height: 8px; border-radius: 999px; background: linear-gradient(90deg, #1d668b, #e8eee8 50%, #cf4b32); }
.control-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 470px; padding: 28px; color: white; background: var(--teal-dark); }
.control-card .panel-label { color: var(--aqua); }
.timeline-year { margin-top: 34px; font-family: Georgia, serif; font-size: 72px; line-height: .9; }
.timeline-month { margin-top: 12px; color: var(--aqua); font-size: 22px; }
.range-field label { display: flex; justify-content: space-between; margin-bottom: 16px; color: rgba(255,255,255,.7); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; }
input[type="range"] { width: 100%; height: 4px; appearance: none; background: rgba(255,255,255,.2); border-radius: 999px; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 19px; height: 19px; background: var(--orange); border: 4px solid white; border-radius: 50%; cursor: grab; }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; background: var(--orange); border: 4px solid white; border-radius: 50%; cursor: grab; }
.play-controls { display: flex; align-items: end; gap: 12px; }
.play-button { flex: 1; min-height: 48px; color: var(--teal-dark); background: var(--aqua); border: 0; border-radius: 10px; font-size: 13px; font-weight: 750; cursor: pointer; }
.play-button span:first-child { margin-right: 5px; }
.speed-field { color: rgba(255,255,255,.6); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.speed-field select { display: block; margin-top: 4px; padding: 7px; color: white; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 7px; }
.speed-field option { color: var(--ink); }
.metric-note { display: flex; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); }
.metric-note p { margin: 0; color: rgba(255,255,255,.58); font-size: 11px; }
.metric-note strong { color: white; }
.metric-dot { flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px; background: var(--orange); border-radius: 50%; }
.chart-card { grid-column: 1 / -1; padding: 26px; }
.chart-head { align-items: center; }
.text-button { padding: 7px 12px; color: var(--teal); background: transparent; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; cursor: pointer; }
.line-chart { width: 100%; height: 260px; margin-top: 16px; }
.line-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-grid line { stroke: rgba(16,44,51,.12); stroke-width: 1; }
.chart-grid text { fill: var(--muted); font-family: Inter, ui-sans-serif, sans-serif; font-size: 11px; }
.chart-area { fill: rgba(13,86,97,.08); }
.chart-line { fill: none; stroke: var(--teal); stroke-width: 2.25; vector-effect: non-scaling-stroke; }
.month-marker { stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.line-point { fill: var(--orange); stroke: var(--white); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-hit { fill: transparent; cursor: crosshair; }
.chart-help { margin: 2px 0 0; color: var(--muted); font-size: 10px; text-align: center; }

.components-section { background: var(--paper); }
.components-grid { display: grid; grid-template-columns: .82fr 1.35fr; align-items: center; gap: 90px; }
.components-grid > div > p { margin-top: 24px; }
.component-controls { display: flex; gap: 12px; margin-top: 32px; }
.component-controls label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.component-controls select { display: block; min-width: 150px; margin-top: 6px; padding: 10px 34px 10px 12px; background: transparent; border: 1px solid var(--line); border-radius: 8px; }
.component-chart-card { padding: 28px; }
.component-chart { height: 340px; }

.data-section { color: var(--white); background: var(--teal-dark); }
.section-heading.light > p { color: rgba(255,255,255,.58); }
.data-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.data-cards article { min-height: 310px; padding: 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.04); transition: transform .25s, background .25s; }
.data-cards article:hover { transform: translateY(-5px); background: rgba(255,255,255,.07); }
.file-index { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; color: var(--teal-dark); background: var(--aqua); border-radius: 50%; font-size: 12px; font-weight: 800; }
.data-cards h3 { margin: 52px 0 10px; font-family: Georgia, serif; font-size: 25px; font-weight: 400; }
.data-cards p { color: rgba(255,255,255,.56); font-size: 14px; }
.data-cards a { display: inline-block; margin-top: 18px; color: var(--aqua); font-size: 13px; font-weight: 700; }

.methods-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; }
.method-steps { margin: 0; padding: 0; list-style: none; }
.method-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 18px; padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.method-steps li > span { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; color: white; background: var(--teal); border-radius: 50%; font-family: Georgia, serif; }
.method-steps h3 { margin: 0 0 6px; font-family: Georgia, serif; font-size: 23px; font-weight: 400; }
.method-steps p { margin: 0; color: var(--muted); font-size: 14px; }
.citation-section { padding-top: 0; }
.citation-card { padding: 58px; background: #dadfd6; border-radius: 28px; }
.citation-card blockquote { max-width: 970px; margin: 20px 0 28px; font-family: Georgia, serif; font-size: clamp(23px, 3vw, 36px); line-height: 1.35; }
.citation-card > div { display: flex; align-items: center; gap: 22px; }
.text-link { color: var(--teal); font-size: 13px; font-weight: 700; }

footer { padding: 58px 0; color: white; background: #061f26; }
.footer-content { display: flex; justify-content: space-between; gap: 50px; }
.footer-brand { font-size: 18px; }
.footer-content p { max-width: 470px; margin: 18px 0 0; color: rgba(255,255,255,.48); font-size: 13px; }
.footer-links { display: flex; gap: 28px; align-items: center; color: rgba(255,255,255,.72); font-size: 13px; }

.loading-screen { position: fixed; z-index: 50; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; background: var(--teal-dark); transition: opacity .45s, visibility .45s; }
.loading-screen.is-hidden { opacity: 0; visibility: hidden; }
.loading-screen.is-error { padding: 30px; text-align: center; }
.loading-mark { width: 42px; height: 42px; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--aqua); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-screen p { margin-top: 18px; color: rgba(255,255,255,.7); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .section { padding: 78px 0; }
  .hero { min-height: auto; }
  .hero-content { min-height: 700px; grid-template-columns: 1fr; gap: 45px; padding: 80px 0; }
  .hero-summary { max-width: 500px; }
  .intro, .components-grid, .methods-grid { grid-template-columns: 1fr; gap: 46px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .explorer-shell { grid-template-columns: 1fr; }
  .chart-card { grid-column: auto; }
  .control-card { min-height: 390px; }
  .data-cards { grid-template-columns: 1fr; }
  .data-cards article { min-height: 240px; }
  .data-cards h3 { margin-top: 32px; }
}

@media (max-width: 620px) {
  .wrap { width: min(100% - 24px, 1180px); }
  .nav { height: 70px; }
  .nav-links a:not(.nav-github) { display: none; }
  .hero-content { padding: 65px 0; }
  .hero h1 { max-width: 100%; font-size: 46px; overflow-wrap: break-word; }
  .hero-intro { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-summary { padding: 26px; }
  .intro { gap: 25px; }
  .map-card, .chart-card, .component-chart-card { padding: 18px; }
  .map-wrap { height: 390px; }
  .map-legend { justify-content: space-between; }
  .map-legend span { max-width: 80px; }
  .component-controls { flex-direction: column; }
  .component-controls select { width: 100%; }
  .citation-card { padding: 32px 24px; }
  .citation-card > div, .footer-content, .footer-links { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}