:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; background: #f4f7f7; color: #172526; }
main { width: min(100% - 2rem, 1000px); margin: 2rem auto 4rem; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: .25rem; text-wrap: balance; }
h1 span + span::before { content: ": "; }
.eyebrow { margin-bottom: .5rem; color: #476265; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.warning { padding: .75rem 1rem; border-left: 4px solid #a45a00; background: #fff3df; color: #573400; }
.controls { margin: 1.5rem 0; padding: 1.25rem; background: #fff; border-radius: .7rem; box-shadow: 0 1px 8px #1725261f; }
.time-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 700; }
#time-label { color: #126782; font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: -.03em; }
input { width: 100%; margin: 1rem 0 .25rem; accent-color: #126782; }
.time-scale { display: flex; justify-content: space-between; gap: .5rem; color: #476265; font-size: .72rem; }
.time-scale span:last-child { text-align: right; }
#level-label { margin: 1rem 0 0; color: #365153; font-size: .92rem; }
.uncertainty-control { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; font-size: .9rem; }
.scenario-label { grid-column: 1 / -1; font-weight: 700; }
.uncertainty-control button { border: 1px solid #9db6b4; border-radius: .4rem; padding: .5rem .4rem; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.uncertainty-control button strong, .uncertainty-control button span { display: block; }
.scenario-value { margin-top: .16rem; color: #476265; font-size: .78rem; font-weight: 500; }
.uncertainty-control button[aria-pressed="true"] { border-color: #126782; background: #126782; color: white; }
.uncertainty-control button[aria-pressed="true"] .scenario-value { color: #e2f3f7; }
.quality-control { margin-top: .65rem; }
.quality-control button { border: 1px solid #6d8586; border-radius: .3rem; padding: .35rem .55rem; background: transparent; color: inherit; cursor: pointer; }
.quality-control button[aria-pressed="true"] { border-color: #126782; background: #126782; color: white; }
.profile-section { margin-top: 1.5rem; padding: 1rem; background: #e5efed; border-radius: .5rem; }
#profile-chart { display: block; width: 100%; min-height: 260px; overflow: visible; }
.map-wrap { position: relative; }
#map { height: min(62vh, 620px); border-radius: .5rem; overflow: hidden; box-shadow: 0 1px 6px #1725261f; }
.legend { position: absolute; bottom: 1rem; left: 1rem; padding: .65rem .85rem; max-width: 18rem; background: #fffffff0; color: #172526; border-radius: .35rem; font-size: .85rem; }
.swatch { display: inline-block; height: .8rem; width: .8rem; margin-right: .35rem; background: #167da2a8; vertical-align: -.08rem; }
.swatch.exposed { background: #c4ab74; }
.quality-legend { margin-top: .45rem; padding-top: .45rem; border-top: 1px solid #b7c8c7; }
.swatch.quality-land { background: #368b5d; }
.swatch.quality-sea { background: #7460be; }
.swatch.quality-missing { background: #c43c2d; }
.map-note { position: absolute; top: 1rem; left: 1rem; margin: 0; max-width: 20rem; padding: .65rem .85rem; background: #fffffff0; color: #172526; border-radius: .35rem; font-size: .85rem; }
.map-context { position: absolute; top: 1rem; right: 3.5rem; max-width: 16rem; padding: .7rem .85rem; background: #126782ed; color: white; border-radius: .4rem; box-shadow: 0 1px 6px #17252633; }
.map-context strong, .map-context span { display: block; }
.map-context strong { font-size: 1rem; }
.map-context span { margin-top: .15rem; font-size: .8rem; }
.area-stats { margin-top: 1rem; padding: 1rem; background: #e5efed; border-radius: .5rem; }
.area-stats h2 { margin-bottom: .7rem; font-size: 1.05rem; }
.area-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.area-stat-grid p { margin: 0; padding-left: .65rem; border-left: .3rem solid #167da2; }
.area-stat-grid p:last-child { border-left-color: #a88442; }
.area-stat-grid span, .area-stat-grid strong { display: block; }
.area-stat-grid span { font-size: .78rem; color: #476265; }
.area-stat-grid strong { margin-top: .15rem; font-size: 1.2rem; }
.method { margin-top: 1.5rem; padding: 1rem; background: #e5efed; border-radius: .5rem; }
.method p { margin-bottom: 0; }
.chart-section { margin-top: 1.5rem; }
.chart-section h2 { margin-bottom: .3rem; }
#rsl-chart { display: block; width: 100%; min-height: 280px; overflow: visible; }
.chart-note { color: #476265; font-size: .85rem; }
.timeline-story { margin-top: 1.5rem; padding: 1rem; background: #e5efed; border-radius: .5rem; }
.explore-menu { margin-top: 1.5rem; border: 1px solid #9db6b4; border-radius: .55rem; background: #fff; }
.explore-menu > summary { padding: .85rem 1rem; cursor: pointer; color: #126782; font-weight: 750; }
.explore-menu[open] > summary { border-bottom: 1px solid #c9d8d6; }
.explore-content { padding: 0 1rem 1rem; }
.explore-content .timeline-story, .explore-content .validation, .explore-content .method { margin-top: 1rem; }
.validation { margin-top: 1.5rem; padding: 1rem; border-left: .35rem solid #a45a00; background: #fff3df; border-radius: .5rem; }
.validation-status { margin-bottom: .7rem; }
.validation ul { margin: 0 0 .8rem; padding-left: 1.3rem; }
.validation li + li { margin-top: .45rem; }
.validation summary { cursor: pointer; font-weight: 700; }
.validation details[open] summary { margin-bottom: .8rem; }
.site-footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid #b7c8c7; color: #476265; font-size: .76rem; line-height: 1.45; }
.site-footer p { margin-bottom: .45rem; }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: inherit; }
.timeline-events { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.timeline-event { min-height: 6.5rem; text-align: left; border: 1px solid #9db6b4; border-left: .35rem solid #126782; border-radius: .3rem; padding: .7rem; background: #fff; color: #172526; cursor: pointer; }
.timeline-event strong, .timeline-event span { display: block; }
.timeline-event span { margin-top: .35rem; font-size: .85rem; }
.timeline-event:hover, .timeline-event:focus-visible { outline: 3px solid #126782; outline-offset: 2px; }
@media (max-width: 700px) {
  main { display: flex; flex-direction: column; width: min(100% - 1.25rem, 1000px); margin-top: 1.25rem; }
  header { order: 1; }
  .controls { display: contents; }
  .time-heading { order: 2; margin: 1rem 0 .15rem; }
  #time-slider { order: 3; margin: .65rem 0 .25rem; }
  .time-scale { order: 4; }
  .map-wrap { order: 5; margin-top: 1rem; }
  .area-stats { order: 6; }
  #level-label { order: 7; margin: .85rem 0 0; }
  .uncertainty-control { order: 8; }
  .quality-control { order: 9; }
  #profile-section { order: 10; }
  .chart-section { order: 11; }
  .chart-section { margin-top: 1.1rem; }
  #rsl-chart { min-height: 235px; }
  .explore-menu { order: 12; }
  .site-footer { order: 13; margin-top: 2rem; font-size: .72rem; }
  .area-stats { margin-top: .85rem; }
  .area-stat-grid { gap: .5rem; }
  h1 { font-size: clamp(1.65rem, 8vw, 2.15rem); line-height: 1.08; }
  h1 span { display: block; }
  h1 span + span::before { content: ""; }
  .timeline-events { grid-template-columns: 1fr; }
  #map { height: min(58vh, 520px); }
  .map-context { position: static; max-width: none; margin: .65rem 0 0; padding: .65rem .75rem; border-radius: .35rem; }
  .map-context strong { font-size: .9rem; }
  .map-context span { font-size: .73rem; }
  .map-note { position: static; max-width: none; margin: .45rem 0 0; background: transparent; color: inherit; padding: 0; border-radius: 0; font-size: .8rem; }
  .legend { top: 1rem; bottom: auto; left: 1rem; max-width: 12.5rem; padding: .45rem .6rem; font-size: .73rem; }
  .time-scale { font-size: .64rem; }
}
@media (prefers-color-scheme: dark) { body { background: #111a1c; color: #e7f0ef; } .controls, .explore-menu { background: #1d2a2c; } .warning, .validation { background: #3d2a13; color: #ffddb2; } .method, .timeline-story, .profile-section, .area-stats { background: #1d302e; } .timeline-event { background: #1d2a2c; color: #e7f0ef; } .legend, .map-note { background: #1d2a2cf0; color: #e7f0ef; } .scenario-value, #level-label, .time-scale, .site-footer, .area-stat-grid span { color: #b9cfcd; } }