:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

body {
    margin: 0; font-family: system-ui, sans-serif;
    background: Canvas; color: CanvasText;
}
.skip {
    position: absolute; left: -999px; top: 0;
}
.skip:focus {
    left: 0; background: Highlight; color: HighlightText; padding: .5em 1em; z-index: 10;
}
header { display: flex; justify-content: flex-end; padding: .75em 1em; }
.theme-controls { display: flex; gap: .5em; }
.theme-btn {
    padding: .4em .8em; border: 1px solid currentColor; background: transparent;
    color: inherit; cursor: pointer; border-radius: 4px;
}
.theme-btn[aria-pressed="true"] { background: Highlight; color: HighlightText; }
.theme-btn:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }

#future-content { min-height: 0; }
#map-section { width: 100%; }
#map { width: 100%; min-height: 800px; background: #e5e5e5; }
.map-fallback { text-align: center; padding: 2em; }
.map-caption { text-align: center; font-size: .85em; opacity: .8; }

footer { text-align: center; padding: 1em; font-size: .9em; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}