:root {
  color-scheme: dark;
  --canvas: #090c12;
  --surface: #111722;
  --surface-raised: #171f2c;
  --border: #344054;
  --text: #f5f7fa;
  --text-secondary: #c1c8d2;
  --text-muted: #949dab;
  --accent: #ef625d;
  --focus: #8fd3ff;
  --warning: #f2c66d;
  --error: #ff847d;
  --success: #72c49a;
  --rail-width: 340px;
  --right-rail-width: 380px;
  --left-column: var(--rail-width);
  --right-column: var(--right-rail-width);
  --header-height: 72px;
  --bottom-tray-height: 310px;
  font-family: Aptos, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--canvas); color: var(--text); }
body { font-size: 14px; }
button, input, select { font: inherit; }
button, select, input[type="number"] { min-height: 44px; }
button { color: var(--text); }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.app-shell { display: grid; grid-template-columns: var(--left-column) minmax(0, 1fr) var(--right-column); grid-template-rows: minmax(0, 1fr); width: 100%; height: 100%; }
.app-shell.left-collapsed { --left-column: 52px; }
.app-shell.right-collapsed { --right-column: 52px; }
.center-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) var(--bottom-tray-height); overflow: hidden; }
.center-stage.bottom-collapsed { --bottom-tray-height: 52px; }

.control-rail,
.detail-rail { position: relative; z-index: 20; min-width: 0; min-height: 0; height: 100%; overflow: hidden; background: var(--surface); }
.control-rail { border-right: 1px solid var(--border); }
.detail-rail { border-left: 1px solid var(--border); }
.rail-heading { height: var(--header-height); display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.detail-heading .rail-toggle { margin-left: auto; }
.rail-title { min-width: 0; display: grid; gap: 4px; }
.rail-title strong { font-size: 16px; }
.desk-label { color: #f39a95; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.icon-button { width: 44px; height: 44px; min-height: 44px; display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); color: var(--text); font-weight: 700; cursor: pointer; }
.icon-button:hover { border-color: #607089; }
.collapsed-rail-label { display: none; height: calc(100% - var(--header-height)); align-items: center; justify-content: flex-start; gap: 14px; padding-top: 20px; color: var(--text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; }
.collapsed-rail-label kbd { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; border: 1px solid #5b687c; border-radius: 4px; background: #0c111a; color: var(--text); font: 700 11px/1 Aptos, "SF Pro Text", system-ui, sans-serif; writing-mode: horizontal-tb; }

.rail-scroll { height: calc(100% - var(--header-height)); overflow: auto; overscroll-behavior: contain; padding-bottom: 28px; }
.control-section { padding: 16px; border-bottom: 1px solid #263044; }
.current-view-section { padding: 14px 16px; border-bottom: 1px solid #263044; background: #0d131d; }
.current-view-section p { margin: 0; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.compact-heading { margin-bottom: 8px; }
.active-filter-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.active-filter-list:empty { display: none; }
.active-filter-list button { min-height: 30px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #536178; border-radius: 5px; padding: 4px 7px; background: #171f2c; color: var(--text-secondary); font-size: 10px; cursor: pointer; }
.active-filter-list button::after { content: "×"; color: var(--text); font-size: 13px; }
.active-filter-list button:hover { border-color: var(--focus); color: var(--text); }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.section-heading h2 { margin: 0; font-size: 13px; font-weight: 700; }
.section-heading output, .section-heading > span { color: var(--text-secondary); font-size: 12px; }
.text-button { min-height: 32px; border: 0; padding: 4px 0; background: transparent; color: var(--focus); cursor: pointer; }
.random-combo { min-height: 34px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; background: var(--surface-raised); color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; }
.random-combo:hover { border-color: var(--focus); }
.secondary-button { min-height: 34px; border: 1px solid var(--border); border-radius: 6px; padding: 5px 9px; background: transparent; color: var(--text-secondary); font-size: 11px; font-weight: 700; cursor: pointer; }
.secondary-button:hover { border-color: var(--focus); color: var(--text); }
.encoding-actions { display: grid; grid-template-columns: 1fr auto; gap: 7px; }

.segmented { display: grid; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: #0c111a; }
.segmented.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.segmented button { min-height: 36px; border: 0; border-radius: 5px; padding: 6px 8px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--surface-raised); color: var(--text); }
.strength-presets button[aria-pressed="true"] { background: var(--accent); color: #fff; }

.preset-list { display: grid; gap: 6px; }
.preset-list button { min-height: 40px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 6px; background: transparent; text-align: left; color: var(--text-secondary); cursor: pointer; }
.preset-list button:hover, .preset-list button.active { border-color: var(--accent); color: var(--text); background: #23191d; }
.guided-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: #0c111a; }
.guided-tabs button { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); font-weight: 700; cursor: pointer; }
.guided-tabs button[aria-selected="true"] { background: var(--surface-raised); color: var(--text); }
.guided-tabs span { min-width: 22px; padding: 2px 5px; border-radius: 999px; background: #293448; color: var(--text-secondary); font-size: 10px; }
.top20-intro { margin: 0 0 9px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.cinematic-tour-launch { width: 100%; min-height: 62px; display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: center; margin-top: 10px; padding: 10px 12px; border: 1px solid #b64c48; border-radius: 7px; background: #2b171a; color: var(--text); text-align: left; cursor: pointer; }
.cinematic-tour-launch > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; }
.cinematic-tour-launch > span:last-child { display: grid; gap: 3px; }
.cinematic-tour-launch strong { font-size: 13px; }
.cinematic-tour-launch small { color: var(--text-secondary); font-size: 10px; }
.cinematic-tour-launch:hover { border-color: var(--accent); background: #351a1e; }
.cinematic-tour-launch:disabled { opacity: .55; cursor: not-allowed; }

.field-label, .field-pair label > span { display: block; margin-bottom: 6px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.field-gap { margin-top: 12px; }
.palette-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.palette-options button { position: relative; padding-left: 23px; text-align: left; }
.palette-options button::before { content: ""; position: absolute; left: 8px; width: 9px; height: 18px; border-radius: 3px; background: var(--scheme-swatch, var(--accent)); }
.palette-options [data-palette="ember"] { --scheme-swatch: linear-gradient(#2c7fb8, #7fcdbb, #fd8d3c, #e2504c); }
.palette-options [data-palette="steel"] { --scheme-swatch: linear-gradient(#2a5480, #6f9bab, #e78245, #b93631); }
.palette-options [data-palette="colorblind"] { --scheme-swatch: linear-gradient(#00204c, #224f75, #5c8284, #ffe442); }
.palette-options [data-palette="contrast"] { --scheme-swatch: linear-gradient(#364452, #687378, #cd7847, #8b3537); }
select, input[type="number"], input[type="search"] { width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #0c111a; color: var(--text); padding: 9px 10px; }
#geography, #geography option { font-size: 14px !important; line-height: 1.3; }
.nested-control-section { min-width: 0; padding-bottom: 14px; border-bottom: 1px solid #263044; }
.nested-control-section:last-child { padding-bottom: 0; border-bottom: 0; }
.nested-control-section h2 { margin: 0 0 10px; color: var(--text-secondary); font-size: 12px; }
.county-search { position: relative; }
.county-search input { padding-right: 40px; }
.county-search button { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; min-height: 36px; border: 0; border-radius: 5px; background: transparent; color: var(--text-muted); cursor: pointer; }
.county-search button:hover { background: var(--surface-raised); color: var(--text); }
.control-note kbd { display: inline-grid; min-width: 22px; min-height: 22px; place-items: center; border: 1px solid #5b687c; border-radius: 4px; background: #0c111a; color: var(--text); font-size: 10px; }
.metric-range-control { margin-top: 8px; border: 1px solid #2c3647; border-radius: 6px; background: #0c111a; }
.metric-range-heading { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; color: var(--text-muted); font-size: 11px; line-height: 1.35; cursor: pointer; list-style: none; }
.metric-range-heading::-webkit-details-marker { display: none; }
.metric-range-heading::before { content: "›"; color: var(--text-muted); font-size: 16px; transition: transform 120ms ease-out; }
.metric-range-control[open] .metric-range-heading::before { transform: rotate(90deg); }
.metric-range-heading output { color: var(--text-secondary); font-variant-numeric: tabular-nums; text-align: right; }
.metric-range-body { padding: 0 9px 6px; }
.dual-range { --range-start: 0%; --range-end: 100%; position: relative; height: 34px; margin-top: 2px; }
.dual-range::before { content: ""; position: absolute; top: 15px; right: 0; left: 0; height: 5px; border-radius: 999px; background: linear-gradient(90deg, #3a4352 0 var(--range-start), var(--accent) var(--range-start) var(--range-end), #3a4352 var(--range-end) 100%); }
.dual-range input[type="range"] { position: absolute; inset: 0; width: 100%; height: 34px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; pointer-events: none; }
.dual-range input[type="range"]::-webkit-slider-runnable-track { height: 5px; background: transparent; }
.dual-range input[type="range"]::-webkit-slider-thumb { width: 19px; height: 19px; margin-top: -7px; border: 2px solid #0c111a; border-radius: 50%; appearance: none; -webkit-appearance: none; background: var(--accent); box-shadow: 0 0 0 1px #ffaaa5; pointer-events: auto; cursor: grab; }
.dual-range input[type="range"]::-moz-range-track { height: 5px; background: transparent; }
.dual-range input[type="range"]::-moz-range-thumb { width: 19px; height: 19px; border: 2px solid #0c111a; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px #ffaaa5; pointer-events: auto; cursor: grab; }
.dual-range input[type="range"]:focus-visible { outline: none; }
.dual-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus); }
.dual-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--focus); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.partial-note, .warning-note { margin: 9px 0 0; color: var(--warning); font-size: 12px; line-height: 1.4; }
.control-note { margin: 8px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.scenario-tabs { display: none; margin-bottom: 12px; }
[data-mode="compare"] .scenario-tabs { display: grid; }
.scenario-badge { display: none; min-width: 26px; padding: 3px 8px; border-radius: 999px; background: var(--accent); color: white !important; text-align: center; font-weight: 700; }
[data-mode="compare"] .scenario-badge { display: inline-block; }

.control-accordion { border-bottom: 1px solid #263044; }
.control-accordion > summary { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; color: var(--text); font-weight: 700; cursor: pointer; list-style: none; }
.control-accordion > summary::-webkit-details-marker { display: none; }
.control-accordion > summary::before { content: "›"; flex: 0 0 auto; color: var(--text-muted); font-size: 20px; line-height: 1; transform: rotate(0); transition: transform 120ms ease-out; }
.control-accordion[open] > summary::before { transform: rotate(90deg); }
.control-accordion > summary > :last-child { margin-left: auto; color: var(--text-secondary); font-size: 12px; font-weight: 500; }
.accordion-content { display: grid; gap: 14px; padding: 0 16px 18px; }
.accordion-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.accordion-actions p { margin: 0; color: var(--text-muted); font-size: 11px; }
.accordion-summary-note { color: var(--text-muted) !important; }
.nested-accordion { border: 1px solid var(--border); border-radius: 7px; background: #0c111a; }
.nested-accordion > summary { min-height: 42px; display: flex; align-items: center; padding: 0 10px; color: var(--text-secondary); font-size: 12px; font-weight: 700; cursor: pointer; }
.nested-accordion-content { padding: 0 10px 10px; }
.definition-note { margin: 0; padding: 10px 11px; border-left: 3px solid #8e6657; background: #17191d; color: var(--text-secondary); font-size: 11px; line-height: 1.5; }
.definition-note strong { color: var(--text); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { margin-bottom: 8px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.outcome-minimums > p { margin: 0 0 10px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
.outcome-minimums .filter-result { margin: 9px 0 0; color: var(--text-secondary); }
.ef-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ef-grid label { position: relative; }
.ef-grid input { position: absolute; opacity: 0; pointer-events: none; }
.ef-grid span { min-height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; color: var(--text-secondary); cursor: pointer; }
.ef-grid input:checked + span { border-color: var(--accent); background: #5a292d; color: #fff; }
.ef-grid input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.playback { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; }
.playback .primary-button { grid-column: 1 / -1; }
.playback .field-label { grid-column: 1 / -1; margin: 0; }
.playback input[type="range"] { width: 100%; accent-color: var(--accent); }
[data-mode="compare"] .playback { display: none; }
.primary-button { min-height: 44px; border: 0; border-radius: 7px; padding: 10px 14px; background: var(--accent); color: #fff; font-weight: 700; cursor: pointer; }
.primary-button:hover { background: #ff736e; }

.empty-copy { color: var(--text-muted); line-height: 1.5; }
.county-name { margin: 0 0 5px; font-size: 20px; line-height: 1.15; }
.county-subtitle { margin: 0 0 12px; color: var(--text-secondary); font-size: 12px; }
.county-filter-note { margin: 0 0 12px; padding: 8px 10px; border-left: 3px solid var(--warning); background: #211d15; color: var(--text-secondary); font-size: 12px; line-height: 1.4; }
.metric-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.metric-card { min-width: 0; min-height: 108px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #0c111a; }
.metric-card-active { border-color: #8e6657; box-shadow: inset 0 0 0 1px #8e6657; }
.metric-card-label { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 11px; font-weight: 700; line-height: 1.25; }
.metric-role { padding: 2px 5px; border: 1px solid #8e6657; border-radius: 999px; color: #f1b2a8; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.metric-card-value { color: var(--text); font-size: clamp(28px, 3vw, 36px); font-weight: 760; font-variant-numeric: tabular-nums; line-height: 1; }
.metric-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.metric-comparison span { min-width: 0; display: grid; gap: 3px; }
.metric-comparison small { color: var(--text-muted); font-size: 10px; font-weight: 700; }
.metric-comparison strong { overflow: hidden; color: var(--text); font-size: 22px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.mapped-metrics { display: grid; gap: 0; margin-top: 10px; border-top: 1px solid var(--border); }
.mapped-metrics p { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding: 10px 2px; border-bottom: 1px solid #263044; color: var(--text-secondary); font-size: 12px; }
.mapped-metrics p span { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mapped-metrics strong { color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.evidence-facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; margin: 0 0 14px; padding: 11px 0; border-top: 1px solid #263044; border-bottom: 1px solid #263044; font-size: 11px; }
.evidence-facts dt { color: var(--text-muted); }
.evidence-facts dd { margin: 0; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.evidence-note { margin: 12px 0 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.active-measure { color: var(--text); font-weight: 700; }
.selected-swatch { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1px solid #fff; border-radius: 2px; background: var(--accent); }
.comparison-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.comparison-table th, .comparison-table td { padding: 6px 4px; border-top: 1px solid #263044; text-align: right; }
.comparison-table th:first-child, .comparison-table td:first-child { text-align: left; color: var(--text-secondary); }
.ranking-list { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.ranking-list li { counter-increment: rank; }
.ranking-list button { width: 100%; min-height: 38px; display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; border: 0; border-radius: 5px; padding: 5px 7px; background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; }
.ranking-list button::before { content: counter(rank); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ranking-list button:hover { background: var(--surface-raised); color: var(--text); }
.ranking-list .rank-value { color: var(--text); font-variant-numeric: tabular-nums; }
.rail-source { margin: 16px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.rail-resizer { position: absolute; z-index: 2; top: 0; width: 10px; height: 100%; cursor: col-resize; touch-action: none; }
.rail-resizer-left { right: -5px; }
.rail-resizer-right { left: -5px; }

.left-collapsed .control-rail .rail-title,
.left-collapsed .control-rail .rail-scroll,
.left-collapsed .control-rail .rail-resizer,
.right-collapsed .detail-rail .rail-title,
.right-collapsed .detail-rail .rail-scroll,
.right-collapsed .detail-rail .rail-resizer { display: none; }
.left-collapsed .control-rail .rail-heading,
.right-collapsed .detail-rail .rail-heading { justify-content: center; padding: 10px 4px; }
.left-collapsed .control-rail .collapsed-rail-label,
.right-collapsed .detail-rail .collapsed-rail-label { display: flex; }
.rail-scrim { display: none; }

.map-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--canvas); }
.bottom-tray { min-width: 0; min-height: 0; overflow: hidden; border-top: 1px solid var(--border); background: var(--surface); }
.bottom-tray-heading { height: 52px; display: flex; align-items: center; gap: 10px; padding: 4px 12px; }
.bottom-tray-heading > div { min-width: 0; display: grid; gap: 2px; }
.bottom-tray-heading strong { font-size: 14px; }
.bottom-tray-toggle { width: 42px; height: 42px; min-height: 42px; }
.bottom-tray-hint { margin-left: auto; color: var(--text-muted); font-size: 11px; }
.storm-table-panel { height: calc(100% - 52px); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-top: 1px solid #263044; }
.bottom-collapsed .storm-table-panel { display: none; }
.storm-table-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 12px; border-bottom: 1px solid #263044; }
.storm-table-toolbar p { margin: 0; color: var(--text-secondary); font-size: 11px; }
.storm-table-actions { display: flex; align-items: center; gap: 9px; }
.download-button { min-height: 34px; padding: 5px 10px; border: 1px solid #5b687c; border-radius: 5px; background: #1a2230; color: var(--text); font-size: 11px; font-weight: 700; cursor: pointer; }
.download-button:hover { border-color: var(--focus); }
.download-button:disabled { opacity: .55; cursor: wait; }
.storm-table-pages { display: flex; align-items: center; gap: 7px; }
.storm-table-pages label { color: var(--text-muted); font-size: 11px; }
.storm-table-pages select { width: auto; min-height: 34px; padding: 5px 8px; }
.storm-table-pages button { min-height: 34px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface-raised); color: var(--text); font-size: 11px; cursor: pointer; }
.storm-table-pages button:disabled { opacity: .45; cursor: default; }
.storm-table-pages output { min-width: 70px; color: var(--text-secondary); font-size: 11px; text-align: center; }
.storm-table-scroll { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.storm-table { width: 100%; min-width: 940px; border-collapse: separate; border-spacing: 0; font-size: 12px; font-variant-numeric: tabular-nums; }
.storm-table th { position: sticky; z-index: 1; top: 0; padding: 8px 10px; border-bottom: 1px solid var(--border); background: #171f2c; color: var(--text-secondary); text-align: left; white-space: nowrap; }
.storm-table td { padding: 7px 10px; border-bottom: 1px solid #222b3a; color: var(--text-secondary); white-space: nowrap; }
.storm-table tbody tr:hover td { background: #171f2c; color: var(--text); }
.storm-table td:nth-child(n+5), .storm-table th:nth-child(n+5) { text-align: right; }
.display-section { background: #0e141e; }
.observation-control select { min-height: 40px; }
.map-header { position: absolute; z-index: 10; top: 0; left: 0; right: 0; min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px 11px 20px; background: linear-gradient(180deg, #090c12f2 0%, #090c12c9 72%, transparent 100%); pointer-events: none; }
.map-header > * { pointer-events: auto; }
.map-header h1 { margin: 0; font-size: 22px; letter-spacing: 0; }
.map-header h1 span { color: var(--accent); font-size: 14px; }
.map-header h1 b { color: var(--accent); font-size: 12px; }
.map-header p { margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; }
.hub-return { display: inline-flex; align-items: center; min-height: 24px; margin-bottom: 3px; color: var(--text-secondary); font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; }
.hub-return:hover { color: var(--text); }
.hub-return:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.map-actions { display: flex; gap: 6px; }
.action-button { min-height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-raised); color: var(--text); font-weight: 650; white-space: nowrap; cursor: pointer; }
.action-button:hover { border-color: #607089; }
.action-button[aria-pressed="true"] { border-color: #ff7b72; background: #25191d; box-shadow: inset 0 0 0 1px #ff7b72; }
.keyboard-help-button { display: inline-flex; align-items: center; justify-content: center; }
.keyboard-help-button kbd { min-width: 24px; min-height: 24px; display: inline-grid; place-items: center; border: 1px solid #5b687c; border-radius: 4px; background: #0c111a; color: var(--text); font: 800 12px/1 Aptos, "SF Pro Text", system-ui, sans-serif; }
.action-label-short { display: none; }
.feedback-group { display: flex; gap: 4px; }
.feedback-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid currentColor; border-radius: 7px; background: var(--surface-raised); cursor: pointer; }
.feedback-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feedback-positive { color: var(--success); }
.feedback-critical { color: var(--error); }
.feedback-button:hover { background: #202a39; }
.help-feedback { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; }
.help-feedback > strong { font-size: 13px; }
.help-feedback-actions { display: flex; gap: 8px; }

.map-grid { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: 1fr; }
[data-mode="compare"] .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.map-pane { position: relative; min-width: 0; overflow: hidden; border-right: 1px solid #2a3447; }
.pane-b { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
[data-mode="compare"] .pane-b { position: relative; inset: auto; visibility: visible; pointer-events: auto; }
.map-canvas { position: absolute; inset: 0; }
.pane-label { position: absolute; z-index: 5; top: 88px; left: 14px; display: flex; align-items: baseline; gap: 8px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: #111722e8; pointer-events: none; }
.pane-label strong { font-size: 12px; }
.pane-label span { color: var(--text-secondary); font-size: 11px; }
.map-kpi { position: absolute; z-index: 6; top: 132px; left: 14px; width: min(330px, calc(100% - 28px)); padding: 11px 13px 12px; border: 1px solid #4d5c72; border-left: 5px solid var(--accent); border-radius: 7px; background: #0b111bed; box-shadow: 0 10px 28px #0008; color: var(--text); pointer-events: none; }
.map-kpi-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 3px; }
.map-kpi-heading > span { color: var(--text-muted); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.map-kpi-heading strong { color: #fff; font-size: 20px; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.map-kpi-period { display: flex; align-items: center; justify-content: flex-end; min-height: 19px; margin-bottom: 7px; }
.map-kpi-period span { padding: 3px 6px; border: 1px solid #ef625d70; border-radius: 3px; background: #ef625d20; color: #ffaaa5; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.map-kpi dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.map-kpi dl div { min-width: 0; }
.map-kpi dt { margin: 0 0 2px; color: var(--text-muted); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.map-kpi dd { margin: 0; overflow: hidden; color: #fff; font-size: clamp(19px, 1.7vw, 26px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; }
.mobile-scenario-switch { display: none; position: absolute; z-index: 11; top: 76px; left: 50%; width: 224px; transform: translateX(-50%); }

.map-legend { position: absolute; z-index: 8; left: 18px; bottom: 18px; width: 260px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 7px; background: #111722ed; }
.legend-title { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; }
.legend-title span:last-child { color: var(--text-muted); font-weight: 500; }
.color-ramp { height: 9px; border-radius: 3px; background: var(--tornado-ramp, linear-gradient(90deg, #2c7fb8, #7fcdbb, #edf8b1, #fd8d3c, #e2504c)); }
.legend-ticks { display: flex; justify-content: space-between; margin-top: 4px; color: var(--text-secondary); font-size: 10px; font-variant-numeric: tabular-nums; }
.map-legend p { margin: 9px 0 0; color: var(--text-secondary); font-size: 11px; }
.map-legend b { color: var(--text); }
.height-scale-control { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; margin-top: 9px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.height-scale-control output { color: var(--text); font-variant-numeric: tabular-nums; }
.height-scale-control input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.height-scale-reset { width: 100%; min-height: 28px; margin-top: 5px; border: 1px solid var(--border); border-radius: 5px; background: #1a2230; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.height-scale-reset:hover { border-color: var(--border-strong); }

.map-player { position: absolute; z-index: 9; right: 125px; bottom: 18px; left: 300px; min-width: 0; display: grid; grid-template-columns: auto minmax(180px, 1fr) auto; gap: 11px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: #111722f2; box-shadow: 0 8px 22px #02050a88; }
.map-player-primary { display: grid; grid-template-columns: repeat(3, 36px); gap: 4px; }
.map-player-timeline { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.map-player-timeline input { width: 100%; margin: 0; accent-color: var(--accent); }
.map-player-timeline output { color: var(--text); font-size: 13px; font-weight: 750; font-variant-numeric: tabular-nums; }
.map-player-timeline p { overflow: hidden; margin: 0; color: var(--text-muted); font-size: 9px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.map-player-options { display: grid; grid-template-columns: repeat(3, auto); gap: 6px; }
.map-player-options label { display: grid; gap: 2px; color: var(--text-muted); font-size: 9px; font-weight: 700; }
.map-player-options select { width: auto; min-width: 72px; min-height: 34px; padding: 4px 24px 4px 7px; color: var(--text); font-size: 10px; }
.map-player-options label:first-child select { min-width: 108px; }
.map-player-button { width: 36px; min-width: 36px; height: 36px; min-height: 36px; display: grid; place-items: center; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; }
.map-player-button:disabled { opacity: .5; cursor: not-allowed; }
.map-player-step { width: 36px; min-width: 36px; height: 36px; min-height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 6px; padding: 0; background: #171f2c; color: var(--text); font-size: 20px; cursor: pointer; }
.map-player-step:hover { border-color: var(--focus); }
.map-player-step:disabled { opacity: .4; cursor: default; }

.map-hover-tooltip { position: absolute; z-index: 40; max-width: 270px; padding: 9px 11px; border: 1px solid #66758b; border-radius: 6px; background: #090d15f5; color: var(--text); box-shadow: 0 8px 24px #0009; pointer-events: none; }
.map-hover-tooltip strong { display: block; margin-bottom: 3px; font-size: 13px; }
.map-hover-tooltip span { display: block; color: var(--text-secondary); font-size: 11px; line-height: 1.45; }
.map-hover-tooltip[hidden] { display: none; }

.top20-tour-caption { position: absolute; z-index: 50; bottom: clamp(30px, 4.5vh, 58px); left: 50%; width: min(1040px, calc(100% - 72px)); padding: clamp(24px, 3vw, 38px) clamp(26px, 4.2vw, 52px); border: 1px solid #ff8a83; border-left: 10px solid var(--accent); border-radius: 12px; background: linear-gradient(100deg, #080c12fa 0%, #080c12f2 100%); box-shadow: 0 20px 60px #000d; transform: translateX(-50%); text-align: left; pointer-events: none; }
.top20-tour-caption[hidden] { display: none; }
.tour-caption-kicker,
.tour-caption-measure { display: none; }
.top20-tour-caption h2 { margin: 0; color: #fff; font-size: clamp(54px, 7vw, 94px); font-weight: 880; letter-spacing: -.045em; line-height: .96; text-wrap: balance; }
.top20-tour-caption p { margin: 15px 0 0; color: #fff; font-size: clamp(28px, 3.4vw, 46px); font-weight: 820; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance; }
.top20-tour-caption.tour-caption-enter { animation: tour-caption-arrive 720ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes tour-caption-arrive {
  from { opacity: 0; transform: translate(-50%, 34px); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: translate(-50%, 0); clip-path: inset(0); }
}
.top20-tour-caption[data-phase="national"] { width: min(760px, calc(100% - 72px)); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(18px, 3vw, 38px); align-items: end; }
.top20-tour-caption[data-phase="national"] h2 { font-size: clamp(64px, 9vw, 112px); line-height: .82; }
.top20-tour-caption[data-phase="national"] p { margin: 0 0 .02em; font-size: clamp(28px, 4vw, 52px); }
.top20-tour-caption[data-phase="coordinates"] h2,
.top20-tour-caption[data-phase="capabilities"] h2 { font-size: clamp(48px, 6.2vw, 84px); }
.top20-tour-caption[data-phase="coordinates"] p { max-width: 940px; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.04; }
.tour-capability-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-top: 16px; }
.tour-capability-grid[hidden] { display: none; }
.tour-capability-grid span { min-height: 52px; display: grid; place-items: center; padding: 8px 10px; border: 1px solid #ff8a836b; border-radius: 6px; background: #ef625d18; color: #fff; font-size: clamp(15px, 1.55vw, 22px); font-weight: 800; line-height: 1.08; text-align: center; }
.tour-scene-cover { position: absolute; z-index: 51; inset: 0; display: grid; grid-template-columns: auto auto; place-content: center; align-items: center; gap: 18px; background: #070b11; color: #fff; }
.tour-scene-cover[hidden] { display: none; }
.tour-scene-cover span { width: 24px; height: 24px; border-radius: 5px; background: var(--accent); box-shadow: 0 0 36px #ef625d77; }
.tour-scene-cover strong { font-size: clamp(36px, 5vw, 68px); font-weight: 850; letter-spacing: -.04em; }
.tour-intro-card {
  position: absolute;
  z-index: 58;
  inset: 0;
  display: grid;
  align-content: end;
  overflow: hidden;
  padding: clamp(56px, 7vw, 90px);
  background: #03060a;
  color: #fff;
  isolation: isolate;
  perspective: 900px;
}
.tour-intro-card[hidden] { display: none; }
.tour-intro-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20%;
  background:
    radial-gradient(circle at 64% 32%, #ef625d3d 0 5%, transparent 29%),
    radial-gradient(circle at 32% 74%, #1c8dab33 0 2%, transparent 30%),
    linear-gradient(145deg, #05090f 10%, #101722 54%, #020407 100%);
  animation: tour-intro-breathe 5s ease-in-out both;
}
.tour-intro-card::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #03060a00 0 52%, #03060ad9 78%, #03060a 100%),
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}
.tour-intro-atmosphere { position: absolute; z-index: 1; inset: 0; overflow: hidden; }
.tour-intro-grid {
  position: absolute;
  right: -16%;
  bottom: -16%;
  left: -16%;
  height: 76%;
  opacity: .44;
  background:
    linear-gradient(90deg, transparent 49.7%, #ef625d7d 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, #ef625d7d 50%, transparent 50.3%);
  background-size: 92px 92px;
  transform: rotateX(64deg) translateZ(-80px);
  transform-origin: center bottom;
  animation: tour-intro-grid-drive 5s cubic-bezier(.2, .7, .2, 1) both;
}
.tour-intro-vortex {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(76vw, 820px);
  height: min(70vw, 760px);
  transform: translateX(-50%);
  filter: drop-shadow(0 24px 60px #000);
}
.tour-intro-vortex i {
  position: absolute;
  top: calc(var(--ring, 0) * 8.8%);
  left: 50%;
  width: calc(100% - var(--ring, 0) * 11%);
  aspect-ratio: 2.8 / 1;
  border: clamp(2px, .35vw, 5px) solid transparent;
  border-top-color: color-mix(in srgb, #ef625d calc(90% - var(--ring, 0) * 6%), #8dd8db);
  border-right-color: #ffffff24;
  border-radius: 50%;
  transform: translateX(-50%) rotate(calc(var(--ring, 0) * 17deg));
  animation: tour-intro-vortex-spin calc(1.25s + var(--ring, 0) * .12s) linear infinite;
}
.tour-intro-vortex i:nth-child(1) { --ring: 0; }
.tour-intro-vortex i:nth-child(2) { --ring: 1; }
.tour-intro-vortex i:nth-child(3) { --ring: 2; }
.tour-intro-vortex i:nth-child(4) { --ring: 3; }
.tour-intro-vortex i:nth-child(5) { --ring: 4; }
.tour-intro-vortex i:nth-child(6) { --ring: 5; }
.tour-intro-vortex i:nth-child(7) { --ring: 6; }
.tour-intro-columns {
  position: absolute;
  top: 13%;
  right: 5%;
  left: 5%;
  height: 55%;
  display: flex;
  align-items: end;
  justify-content: center;
  gap: clamp(10px, 2vw, 26px);
  opacity: 0;
  transform: rotateX(59deg) rotateZ(-8deg);
  transform-origin: center bottom;
}
.tour-intro-columns i {
  width: clamp(48px, 8vw, 100px);
  height: calc(14% + var(--column, 1) * 7%);
  border: 1px solid #ffffff30;
  background: linear-gradient(90deg, #168eb6, #63cbc6 72%, #c9efa9);
  box-shadow: 0 0 40px #16a4c055;
  transform-origin: bottom;
  animation: tour-intro-column-rise 900ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--column, 1) * 65ms);
}
.tour-intro-columns i:nth-child(1) { --column: 2; }
.tour-intro-columns i:nth-child(2) { --column: 5; }
.tour-intro-columns i:nth-child(3) { --column: 3; }
.tour-intro-columns i:nth-child(4) { --column: 7; }
.tour-intro-columns i:nth-child(5) { --column: 4; }
.tour-intro-columns i:nth-child(6) { --column: 8; }
.tour-intro-columns i:nth-child(7) { --column: 5; }
.tour-intro-columns i:nth-child(8) { --column: 3; }
.tour-intro-columns i:nth-child(9) { --column: 6; }
.tour-intro-radar {
  position: absolute;
  top: 7%;
  left: 50%;
  width: min(82vw, 880px);
  aspect-ratio: 1;
  border: 2px solid #ef625d59;
  border-radius: 50%;
  opacity: 0;
  transform: translateX(-50%);
  background: conic-gradient(from 0deg, #ef625d00 0 82%, #ef625d70 96%, transparent);
}
.tour-intro-radar::before,
.tour-intro-radar::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 1px solid #ef625d3d;
  border-radius: inherit;
}
.tour-intro-radar::after { inset: 34%; }
.tour-intro-year-stream {
  position: absolute;
  top: 8%;
  right: clamp(40px, 6vw, 80px);
  display: grid;
  gap: 8px;
  opacity: 0;
  color: #ff8a83;
  font: 800 clamp(44px, 7vw, 84px)/.9 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: -.06em;
  text-align: right;
}
.tour-intro-year-stream span { opacity: .24; transform: translateX(70px); }
.tour-intro-copy {
  position: relative;
  z-index: 8;
  width: min(920px, 100%);
  padding-left: clamp(22px, 3vw, 40px);
  border-left: clamp(8px, 1.2vw, 14px) solid #ef625d;
}
.tour-intro-copy > span {
  display: block;
  margin-bottom: clamp(14px, 2vw, 24px);
  color: #ff8a83;
  font: 850 clamp(18px, 2.5vw, 32px)/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: .16em;
}
.tour-intro-copy h2 {
  max-width: 940px;
  margin: 0;
  font-size: clamp(76px, 11.5vw, 154px);
  font-weight: 920;
  letter-spacing: -.07em;
  line-height: .82;
  text-wrap: balance;
}
.tour-intro-copy p {
  max-width: 900px;
  margin: clamp(20px, 3vw, 34px) 0 0;
  color: #f8fafc;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 780;
  letter-spacing: -.03em;
  line-height: 1.03;
  text-wrap: balance;
}
.tour-intro-copy > * {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  animation: tour-intro-copy-punch 720ms cubic-bezier(.16, 1, .3, 1) both;
}
.tour-intro-copy > :nth-child(2) { animation-delay: 70ms; }
.tour-intro-copy > :nth-child(3) { animation-delay: 140ms; }
.tour-intro-progress {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 0;
  left: 0;
  height: 8px;
  background: #ffffff12;
}
.tour-intro-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ef625d, #ffb28d);
  transform-origin: left;
  animation: tour-intro-progress var(--tour-opener-duration, 5s) linear both;
}

.tour-intro-card[data-opener="vortex"] .tour-intro-vortex { animation: tour-intro-vortex-arrive 4.8s cubic-bezier(.16, 1, .3, 1) both; }
.tour-intro-card[data-opener="question"] .tour-intro-vortex { opacity: .16; transform: translateX(-50%) scale(1.35); }
.tour-intro-card[data-opener="question"]::before { background: radial-gradient(circle at 66% 24%, #ef625d85 0 4%, transparent 31%), #020408; }
.tour-intro-card[data-opener="question"] .tour-intro-copy h2 { font-size: clamp(70px, 10.7vw, 142px); }
.tour-intro-card[data-opener="question"] .tour-intro-copy { width: min(980px, 100%); }
.tour-intro-card[data-opener="question"] .tour-intro-grid { animation-duration: 3.8s; }

.tour-intro-card[data-opener="impact"] .tour-intro-vortex { display: none; }
.tour-intro-card[data-opener="impact"] .tour-intro-radar {
  opacity: 1;
  animation: tour-intro-radar 2.1s linear infinite;
}
.tour-intro-card[data-opener="impact"] .tour-intro-copy h2 { font-size: clamp(92px, 15vw, 192px); color: #fff; }
.tour-intro-card[data-opener="impact"] .tour-intro-copy > span { color: #9be2db; }
.tour-intro-card[data-opener="impact"] .tour-intro-grid { background-size: 70px 70px; }

.tour-intro-card[data-opener="atlas"]::before {
  background:
    linear-gradient(115deg, transparent 0 18%, #ef625d 18% 19%, transparent 19% 36%, #ef625d4a 36% 62%, transparent 62%),
    linear-gradient(155deg, #070b12 0 38%, #17212e 38% 60%, #05070b 60%);
  animation-name: tour-intro-atlas-sweep;
}
.tour-intro-card[data-opener="atlas"] .tour-intro-vortex,
.tour-intro-card[data-opener="atlas"] .tour-intro-radar { display: none; }
.tour-intro-card[data-opener="atlas"] .tour-intro-year-stream { opacity: 1; }
.tour-intro-card[data-opener="atlas"] .tour-intro-year-stream span { animation: tour-intro-year 2.8s cubic-bezier(.16, 1, .3, 1) both; }
.tour-intro-card[data-opener="atlas"] .tour-intro-year-stream span:nth-child(2) { animation-delay: 120ms; }
.tour-intro-card[data-opener="atlas"] .tour-intro-year-stream span:nth-child(3) { animation-delay: 240ms; }
.tour-intro-card[data-opener="atlas"] .tour-intro-year-stream span:nth-child(4) { animation-delay: 360ms; opacity: 1; }

.tour-intro-card[data-opener="extrude"] .tour-intro-vortex,
.tour-intro-card[data-opener="extrude"] .tour-intro-radar { display: none; }
.tour-intro-card[data-opener="extrude"] .tour-intro-columns { opacity: .85; }
.tour-intro-card[data-opener="extrude"] .tour-intro-copy h2 { text-transform: uppercase; }
.tour-intro-card[data-opener="extrude"]::before { background: linear-gradient(155deg, #071721 0, #090d14 52%, #05070a 100%); }

@keyframes tour-intro-breathe {
  from { transform: scale(1.06) rotate(-1.5deg); filter: saturate(.8); }
  to { transform: scale(1) rotate(0); filter: saturate(1.2); }
}
@keyframes tour-intro-grid-drive {
  from { background-position: 0 80px; opacity: .1; }
  to { background-position: 0 -40px; opacity: .48; }
}
@keyframes tour-intro-vortex-spin { to { rotate: 1turn; } }
@keyframes tour-intro-vortex-arrive {
  0% { opacity: 0; transform: translateX(-50%) translateY(-22%) scale(1.35); filter: blur(14px); }
  22% { opacity: .9; filter: blur(0); }
  100% { opacity: .55; transform: translateX(-50%) translateY(12%) scale(.72); }
}
@keyframes tour-intro-column-rise {
  from { transform: scaleY(.03) translateY(120px); opacity: 0; }
  to { transform: scaleY(1) translateY(0); opacity: 1; }
}
@keyframes tour-intro-radar { to { rotate: 1turn; } }
@keyframes tour-intro-atlas-sweep {
  from { transform: translateX(-12%) scale(1.15); }
  to { transform: translateX(0) scale(1); }
}
@keyframes tour-intro-year {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: .28; transform: translateX(0); }
}
@keyframes tour-intro-copy-punch {
  from { opacity: .58; transform: translateY(24px) scale(1.025); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes tour-intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.tour-end-card { position: absolute; z-index: 55; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(18px, 2.5vw, 30px); overflow: hidden; padding: clamp(42px, 7vw, 90px); background:
  radial-gradient(circle at 50% 38%, #253044 0%, #0d131d 38%, #05080d 78%);
  color: #fff; text-align: center; isolation: isolate; }
.tour-end-card[hidden] { display: none; }
.tour-end-card::before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .18; background:
  linear-gradient(90deg, transparent 49.85%, #ef625d 50%, transparent 50.15%),
  linear-gradient(0deg, transparent 49.85%, #ef625d 50%, transparent 50.15%);
  background-size: 110px 110px; transform: perspective(600px) rotateX(56deg) scale(1.6) translateY(12%); transform-origin: center bottom; }
.tour-end-card-mark { width: clamp(28px, 4vw, 44px); height: clamp(28px, 4vw, 44px); border-radius: 8px; background: var(--accent); box-shadow: 0 18px 54px #ef625d66; }
.tour-end-card p { max-width: 820px; margin: 0; color: var(--text-secondary); font-size: clamp(26px, 3.8vw, 46px); font-weight: 760; letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
.tour-end-card h2 { margin: 0; color: #fff; font-size: clamp(66px, 10vw, 126px); font-weight: 900; letter-spacing: -.065em; line-height: .9; }
.tour-end-card span { color: #ffaaa5; font-size: clamp(20px, 2.8vw, 34px); font-weight: 760; line-height: 1.15; text-wrap: balance; }
.tour-end-card:not([hidden]) > * { animation: tour-end-arrive 900ms cubic-bezier(.16, 1, .3, 1) both; }
.tour-end-card:not([hidden]) > :nth-child(2) { animation-delay: 80ms; }
.tour-end-card:not([hidden]) > :nth-child(3) { animation-delay: 150ms; }
.tour-end-card:not([hidden]) > :nth-child(4) { animation-delay: 220ms; }
@keyframes tour-end-arrive {
  from { opacity: 0; transform: translateY(34px); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
body[data-tour-cut="atlas"] .tour-end-card { background: #f1eadc; color: #17120d; box-shadow: inset 0 0 0 14px #17120d; }
body[data-tour-cut="atlas"] .tour-end-card::before { opacity: .09; }
body[data-tour-cut="atlas"] .tour-end-card p { color: #51473d; font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
body[data-tour-cut="atlas"] .tour-end-card h2 { color: #17120d; font-family: Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.055em; }
body[data-tour-cut="atlas"] .tour-end-card span { color: #b83f3c; }
.top20-tour-exit { position: absolute; z-index: 52; top: 18px; right: 18px; min-height: 38px; padding: 7px 10px; border: 1px solid #ffffff55; border-radius: 6px; background: #090c12bd; color: #d6dbe2; font-size: 11px; cursor: pointer; opacity: .7; animation: tour-exit-dim 1s 5s forwards; }
.top20-tour-exit[hidden] { display: none; }
.top20-tour-exit:hover, .top20-tour-exit:focus-visible { opacity: 1; animation: none; }
.top20-tour-exit kbd { margin-left: 5px; padding: 2px 5px; border: 1px solid #687386; border-radius: 3px; background: #131b27; }
@keyframes tour-exit-dim { to { opacity: .18; } }
body.tour-active .app-shell { --left-column: 0px; --right-column: 0px; }
body.tour-active .center-stage { --bottom-tray-height: 0px; }
body.tour-active .control-rail,
body.tour-active .detail-rail,
body.tour-active .bottom-tray { visibility: hidden; }
body.tour-active .map-header,
body.tour-active .pane-label,
body.tour-active .map-legend,
body.tour-active .map-player,
body.tour-active .map-navigation,
body.tour-active .basemap-control { opacity: 0; pointer-events: none; }
body.tour-active .map-attribution { z-index: 49; top: 8px; right: 8px; bottom: auto; opacity: .64; }
body.tour-active .map-kpi { z-index: 49; top: 18px; left: 18px; width: min(450px, calc(100% - 36px)); padding: 14px 16px 15px; }
body.tour-active .map-kpi-heading > span { font-size: 11px; }
body.tour-active .map-kpi-heading strong { font-size: 28px; }
body.tour-active .map-kpi-period span { font-size: 11px; }
body.tour-active .map-kpi dt { font-size: 10px; }
body.tour-active .map-kpi dd { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.05em; }

body.tour-active.tour-controls-featured .control-rail {
  position: fixed;
  z-index: 54;
  top: 20px;
  bottom: 20px;
  left: 20px;
  width: min(390px, calc(100vw - 40px));
  height: auto;
  visibility: visible;
  border: 1px solid #65748a;
  border-radius: 12px;
  box-shadow: 0 24px 80px #000d;
}
body.tour-active.tour-controls-featured .center-stage { grid-column: 2; }
body.tour-active.tour-controls-featured .detail-rail { grid-column: 3; }
body.tour-active.tour-controls-featured .control-rail .rail-heading { height: 64px; }
body.tour-active.tour-controls-featured .control-rail .rail-scroll {
  height: calc(100% - 64px);
  overflow: hidden;
}
body.tour-active.tour-controls-featured .mode-section,
body.tour-active.tour-controls-featured .current-view-section,
body.tour-active.tour-controls-featured .presets-section,
body.tour-active.tour-controls-featured .multi-state-picker,
body.tour-active.tour-controls-featured .definition-note,
body.tour-active.tour-controls-featured .control-note,
body.tour-active.tour-controls-featured .partial-note,
body.tour-active.tour-controls-featured .metric-range-control {
  display: none;
}
body.tour-active.tour-controls-featured .control-accordion > summary { min-height: 48px; }
body.tour-active.tour-controls-featured .control-accordion .accordion-content { padding: 12px 14px 14px; }
body.tour-active.tour-controls-featured .nested-control-section { padding-bottom: 10px; }
body.tour-active.tour-controls-featured .field-pair { gap: 8px; }
body.tour-active.tour-controls-featured .field-gap { margin-top: 8px; }
body.tour-active.tour-controls-featured .top20-tour-caption {
  right: 34px;
  bottom: 48px;
  left: auto;
  width: min(610px, calc(100% - 454px));
  transform: none;
}
body.tour-active.tour-controls-featured .top20-tour-caption.tour-caption-enter {
  animation-name: tour-control-caption-arrive;
}
@keyframes tour-control-caption-arrive {
  from { opacity: 0; transform: translateY(30px); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
}

body[data-tour-cut="kinetic"] .map-kpi,
body[data-tour-cut="atlas"] .map-kpi { opacity: 0; }

body[data-tour-cut="kinetic"] .map-stage::after {
  content: "";
  position: absolute;
  z-index: 48;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, #04070bd9 78%, #04070b 100%),
    linear-gradient(90deg, #ef625d24 0 2px, transparent 2px);
  pointer-events: none;
}
body[data-tour-cut="kinetic"] .top20-tour-caption {
  z-index: 50;
  bottom: clamp(38px, 5vh, 68px);
  width: min(1010px, calc(100% - 72px));
  padding: 0 0 0 clamp(24px, 3.5vw, 46px);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body[data-tour-cut="kinetic"] .top20-tour-caption::before {
  content: "";
  position: absolute;
  top: .06em;
  bottom: .08em;
  left: 0;
  width: 10px;
  background: var(--accent);
  transform-origin: bottom;
  animation: tour-pulse-rule 660ms cubic-bezier(.16, 1, .3, 1) both;
}
body[data-tour-cut="kinetic"] .top20-tour-caption h2 {
  max-width: 980px;
  font-size: clamp(76px, 11vw, 154px);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .8;
  text-shadow: 0 10px 38px #000;
}
body[data-tour-cut="kinetic"] .top20-tour-caption p {
  margin-top: 22px;
  color: #ff8a83;
  font-size: clamp(27px, 3.5vw, 45px);
  font-weight: 850;
  letter-spacing: -.025em;
  line-height: 1;
  text-shadow: 0 7px 24px #000;
}
body[data-tour-cut="kinetic"] .top20-tour-caption[data-phase="national"] {
  width: min(1010px, calc(100% - 72px));
  display: block;
}
body[data-tour-cut="kinetic"] .top20-tour-caption[data-phase="national"] h2 {
  font-size: clamp(88px, 13vw, 170px);
  line-height: .76;
}
body[data-tour-cut="kinetic"] .top20-tour-caption[data-phase="national"] p {
  margin: 22px 0 0;
  font-size: clamp(32px, 4vw, 52px);
}
body[data-tour-cut="kinetic"] .top20-tour-caption.tour-caption-enter {
  animation: tour-kinetic-arrive 680ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes tour-kinetic-arrive {
  from { opacity: 0; transform: translate(-50%, 42px) skewY(2deg); clip-path: inset(0 100% 0 0); }
  to { opacity: 1; transform: translate(-50%, 0) skewY(0); clip-path: inset(0); }
}
@keyframes tour-pulse-rule {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

body[data-tour-cut="atlas"] .map-stage::after {
  content: "";
  position: absolute;
  z-index: 48;
  inset: 0;
  background: linear-gradient(180deg, #14110c20 0%, transparent 42%, #15110d3d 100%);
  box-shadow: inset 0 0 0 14px #f1eadc;
  pointer-events: none;
}
body[data-tour-cut="atlas"] .top20-tour-caption {
  z-index: 50;
  bottom: clamp(34px, 4.5vh, 60px);
  width: min(980px, calc(100% - 92px));
  padding: clamp(30px, 4vw, 46px) clamp(34px, 5vw, 58px);
  border: 0;
  border-radius: 2px;
  background: #f5f0e6f7;
  box-shadow: 0 24px 70px #1a120a52, inset 0 0 0 1px #261d14;
}
body[data-tour-cut="atlas"] .top20-tour-caption::before {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(34px, 5vw, 58px);
  left: clamp(34px, 5vw, 58px);
  height: 5px;
  background: var(--accent);
  transform-origin: left;
  animation: tour-atlas-rule 900ms cubic-bezier(.16, 1, .3, 1) both;
}
body[data-tour-cut="atlas"] .top20-tour-caption h2 {
  color: #17120d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(58px, 7.6vw, 98px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .92;
}
body[data-tour-cut="atlas"] .top20-tour-caption p {
  margin-top: 18px;
  color: #b83f3c;
  font-size: clamp(27px, 3.25vw, 42px);
  font-weight: 850;
  letter-spacing: -.025em;
}
body[data-tour-cut="atlas"] .top20-tour-caption[data-phase="national"] {
  width: min(980px, calc(100% - 92px));
  display: block;
}
body[data-tour-cut="atlas"] .top20-tour-caption[data-phase="national"] h2 {
  font-size: clamp(58px, 7.6vw, 98px);
  line-height: .92;
}
body[data-tour-cut="atlas"] .top20-tour-caption[data-phase="national"] p {
  margin: 18px 0 0;
  font-size: clamp(30px, 3.8vw, 48px);
}
body[data-tour-cut="atlas"] .top20-tour-caption.tour-caption-enter {
  animation: tour-atlas-arrive 900ms cubic-bezier(.16, 1, .3, 1) both;
}
body.tour-active.tour-controls-featured[data-tour-cut="atlas"] .top20-tour-caption.tour-caption-enter {
  animation-name: tour-control-caption-arrive;
}
@keyframes tour-atlas-arrive {
  from { opacity: 0; transform: translate(-50%, 22px) scale(.985); filter: blur(7px); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
}
@keyframes tour-atlas-rule {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.map-navigation { position: absolute; z-index: 12; top: 88px; right: 14px; display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: 7px; background: #111722ed; box-shadow: 0 6px 18px #0005; }
.map-navigation button { width: 40px; min-width: 40px; height: 40px; min-height: 40px; display: grid; place-items: center; border: 0; border-bottom: 1px solid var(--border); padding: 0; background: transparent; color: var(--text); font-size: 22px; font-weight: 650; cursor: pointer; }
.map-navigation button:last-child { border-bottom: 0; }
.map-navigation button:hover { background: var(--surface-raised); }
.map-navigation svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.basemap-control { position: absolute; z-index: 12; right: 14px; bottom: 14px; display: grid; justify-items: end; gap: 7px; }
.basemap-toggle { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 7px; background: #111722ed; color: var(--text); font-size: 12px; font-weight: 700; cursor: pointer; }
.basemap-toggle:hover, .basemap-toggle[aria-expanded="true"] { border-color: var(--focus); }
.basemap-gallery { width: 190px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: #111722f5; box-shadow: 0 12px 32px #000a; }
.basemap-gallery[hidden] { display: none; }
.basemap-gallery strong { display: block; padding: 5px 6px 8px; font-size: 12px; }
.basemap-gallery button { width: 100%; min-height: 38px; display: flex; align-items: center; padding: 7px 9px; border: 0; border-radius: 5px; background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; }
.basemap-gallery button:hover { background: var(--surface-raised); color: var(--text); }
.basemap-gallery button[aria-pressed="true"] { background: #253044; color: var(--text); font-weight: 700; }
.basemap-gallery button[aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: var(--success); }
.multi-state-picker { margin-top: 8px; border: 1px solid var(--border); border-radius: 7px; background: #0d131d; }
.multi-state-picker summary { min-height: 42px; display: flex; align-items: center; padding: 8px 10px; color: var(--text-secondary); font-size: 12px; font-weight: 750; cursor: pointer; }
.multi-state-picker[open] summary { border-bottom: 1px solid var(--border); color: var(--text); }
.state-toggle-grid { max-height: 210px; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 9px; }
.state-toggle-grid label { min-height: 34px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 4px; border: 1px solid #303a4c; border-radius: 5px; background: #121a26; color: var(--text-secondary); font-size: 11px; font-weight: 800; cursor: pointer; }
.state-toggle-grid label:has(input:checked) { border-color: var(--focus); background: #24344a; color: #fff; }
.state-toggle-grid input { width: 14px; height: 14px; margin: 0; accent-color: var(--accent); }
.map-attribution { position: absolute; z-index: 7; right: 14px; bottom: 98px; max-width: 260px; margin: 0; padding: 3px 5px; border-radius: 3px; background: #090c12cf; color: #b5bdc8; font-size: 9px; line-height: 1.25; text-align: right; }
.map-attribution a { color: inherit; }

.status-overlay { position: absolute; z-index: 30; inset: 0; display: grid; place-items: center; background: var(--canvas); transition: opacity 200ms ease-out; }
.status-overlay.done { opacity: 0; pointer-events: none; }
.status-panel { max-width: 360px; padding: 24px; text-align: center; }
.status-panel strong { display: block; margin: 10px 0 5px; font-size: 17px; }
.status-panel p { margin: 0 0 16px; color: var(--text-secondary); line-height: 1.5; }
.status-mark { color: var(--accent); }
.status-overlay.error .status-mark { color: var(--error); }

dialog { width: min(600px, calc(100vw - 32px)); max-height: min(760px, calc(100vh - 32px)); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
dialog::backdrop { background: #03050ae8; }
#aboutDialog {
  width: min(920px, calc(100vw - 32px));
  max-height: min(880px, calc(100vh - 32px));
  overflow: hidden;
}
#mapKeysDialog {
  width: min(500px, calc(100vw - 24px));
  max-height: calc(100vh - 104px);
  margin: 72px 16px auto auto;
  border: 2px solid var(--focus);
  box-shadow: 0 22px 70px #000c, 0 0 0 1px #07111f;
}
#mapKeysDialog::backdrop { background: #03050a66; }
.dialog-shell { padding: 22px; }
.help-dialog-shell {
  max-height: min(880px, calc(100vh - 32px));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.keys-dialog-shell { padding: 16px; }
.keys-dialog-shell .dialog-heading {
  margin: -16px -16px 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: #0a101a;
}
.keys-dialog-shell .desk-label { color: var(--focus); }
.dialog-heading { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.dialog-heading h2 { margin: 4px 0 0; font-size: 22px; }
.dialog-heading h2:focus { outline: 0; }
.dialog-heading h2:focus-visible { text-decoration: underline; text-decoration-color: var(--focus); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.help-dialog-heading {
  position: sticky;
  z-index: 2;
  top: -22px;
  margin: -22px -22px 0;
  padding: 18px 22px 16px;
  border-bottom: 1px solid var(--border);
  background: #111825f2;
  backdrop-filter: blur(14px);
}
.help-dialog-heading h2 { font-size: clamp(22px, 3vw, 30px); }
.dialog-shell p { color: var(--text-secondary); line-height: 1.6; }
.help-intro { max-width: 74ch; margin: 22px 0 18px; font-size: 16px; }
.help-intro strong { color: var(--text); }
.help-signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.help-signal-grid > div { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; }
.help-signal-grid span { display: block; margin-bottom: 7px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.help-signal-grid strong { display: block; font-size: 17px; }
.help-signal-grid p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; }
.help-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--border); }
.help-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.help-section-number { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #4d5c71; border-radius: 50%; color: var(--accent); font: 800 12px/1 Aptos, "SF Pro Text", system-ui, sans-serif; }
.help-section-heading h3 { margin: 2px 0 0; font-size: 20px; }
.help-eyebrow { margin: 0 !important; color: var(--text-secondary); font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1.2 !important; text-transform: uppercase; }
.help-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: help-step; }
.help-steps li { position: relative; display: grid; gap: 3px; padding: 12px 12px 12px 48px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; counter-increment: help-step; }
.help-steps li::before { content: counter(help-step); position: absolute; top: 12px; left: 12px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: white; font-weight: 800; }
.help-steps span { color: var(--text-secondary); font-size: 13px; line-height: 1.4; }
.rating-principle { padding: 16px; border-left: 4px solid var(--accent); border-radius: 0 7px 7px 0; background: #1b1617; }
.rating-principle strong { font-size: 16px; }
.rating-principle p { margin: 6px 0 0; }
.help-bullets { display: grid; gap: 9px; margin: 14px 0 0; padding-left: 22px; color: var(--text-secondary); line-height: 1.5; }
.help-bullets li::marker { color: var(--accent); }
.help-history { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.help-history article { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; }
.help-history time { display: block; margin-bottom: 10px; color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.help-history strong { display: block; font-size: 15px; }
.help-history p { margin: 7px 0 0; font-size: 13px; line-height: 1.5; }
.history-note,
.violent-definition { margin: 12px 0 0; padding: 12px 14px; border-radius: 7px; background: #171f2c; font-size: 13px; }
.history-note strong,
.violent-definition strong { color: var(--text); }
.scale-note { margin: 0 0 12px; font-size: 13px; }
.ef-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 7px; }
.ef-table-wrap:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.ef-scale-table { width: 100%; min-width: 720px; border-collapse: collapse; background: #0c111a; font-size: 13px; }
.ef-scale-table th,
.ef-scale-table td { padding: 10px 12px; border-bottom: 1px solid #2f3949; text-align: left; vertical-align: top; line-height: 1.4; }
.ef-scale-table thead th { position: sticky; top: 0; background: #171f2c; color: var(--text-secondary); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.ef-scale-table tbody tr:last-child th,
.ef-scale-table tbody tr:last-child td { border-bottom: 0; }
.ef-scale-table td:nth-child(2),
.ef-scale-table td:nth-child(3) { white-space: nowrap; }
.ef-badge { min-width: 66px; display: inline-flex; justify-content: center; padding: 4px 7px; border: 1px solid #526077; border-radius: 999px; background: #202a3a; color: var(--text); font-size: 11px; font-weight: 800; }
.ef-0,
.ef-1 { border-color: #4f91a7; background: #173545; }
.ef-2,
.ef-3 { border-color: #c89951; background: #46351d; }
.ef-4,
.ef-5 { border-color: #e76661; background: #521f23; }
.ef-unknown { color: var(--text-secondary); }
.official-references { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 14px 0; padding: 14px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; font-size: 13px; }
.official-references strong { width: 100%; }
.official-references a { color: #8fc9ff; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.official-references a:hover { color: white; }
.shortcut-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.shortcut-guide span { display: flex; align-items: center; gap: 7px; color: var(--text-secondary); font-size: 12px; }
.shortcut-guide kbd { min-width: 30px; min-height: 30px; display: grid; place-items: center; border: 1px solid #5b687c; border-radius: 5px; background: #0c111a; color: var(--text); font-weight: 800; }
.map-key-guide { margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--border); }
.map-key-guide h3 { margin: 0 0 10px; font-size: 15px; }
.map-key-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.map-key-grid > span { min-width: 0; display: grid; gap: 7px; padding: 10px; border: 1px solid var(--border); border-radius: 7px; background: #0c111a; }
.map-key-grid b { color: var(--text-secondary); font-size: 12px; }
.key-combo { display: flex; flex-wrap: wrap; gap: 4px; }
.key-combo kbd { min-width: 28px; min-height: 28px; display: inline-grid; place-items: center; padding: 0 6px; border: 1px solid #5b687c; border-radius: 5px; background: #171f2c; color: var(--text); font: 800 12px/1 Aptos, "SF Pro Text", system-ui, sans-serif; box-shadow: inset 0 -2px 0 #080b10; }
.source-details { margin: 14px 0; border-top: 1px solid var(--border); }
.source-details summary { min-height: 44px; display: flex; align-items: center; color: var(--text-secondary); font-weight: 700; cursor: pointer; }
.source-facts { display: grid; grid-template-columns: 1fr auto; gap: 7px 18px; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.source-facts dt { color: var(--text-secondary); }
.source-facts dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.dialog-close { width: 100%; margin-top: 6px; }
.feedback-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 16px; background: #03050ae8; }
.feedback-modal { width: min(580px, 100%); max-height: calc(100vh - 32px); overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); box-shadow: 0 24px 70px #000d; }
.feedback-modal-header { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.feedback-modal-header h2 { margin: 3px 0 0; font-size: 20px; }
.feedback-survey { display: block; width: 100%; height: min(72vh, 580px); border: 0; background: white; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 980px) {
  :root { --rail-width: 300px; }
  :root { --right-rail-width: 330px; }
  :root { --bottom-tray-height: 300px; }
  .map-header h1 { font-size: 19px; }
  .action-button { min-height: 40px; padding: 0 10px; font-size: 12px; }
  .action-label-wide { display: none; }
  .action-label-short { display: inline; }
  .map-legend { width: 230px; }
  .map-player { right: 12px; bottom: 164px; left: 12px; grid-template-columns: auto minmax(180px, 1fr); }
  .map-player-options { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-player-options select,
  .map-player-options label:first-child select { width: 100%; min-width: 0; }
}

@media (max-width: 760px) {
  .app-shell,
  .app-shell.left-collapsed,
  .app-shell.right-collapsed { --left-column: 44px; --right-column: 44px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .control-rail { grid-column: 1; }
  .center-stage { grid-column: 2; width: 100%; height: 100%; --bottom-tray-height: min(52vh, 390px); }
  .center-stage.bottom-collapsed { --bottom-tray-height: 48px; }
  .map-stage { width: 100%; height: 100%; }
  .detail-rail { grid-column: 3; }
  .control-rail,
  .detail-rail { z-index: 25; }
  .app-shell:not(.left-collapsed) .control-rail,
  .app-shell:not(.right-collapsed) .detail-rail { position: fixed; top: 0; bottom: 0; width: min(88vw, 380px); height: 100%; box-shadow: 0 0 28px #03050ad9; }
  .app-shell:not(.left-collapsed) .control-rail { left: 0; }
  .app-shell:not(.right-collapsed) .detail-rail { right: 0; }
  .rail-heading { height: 64px; }
  .rail-scroll { height: calc(100% - 64px); padding-bottom: max(18px, env(safe-area-inset-bottom)); }
  .rail-resizer { display: none; }
  .left-collapsed .control-rail .rail-heading,
  .right-collapsed .detail-rail .rail-heading { height: 64px; }
  .collapsed-rail-label { height: calc(100% - 64px); padding-top: 16px; }
  .rail-scrim:not([hidden]) { position: fixed; z-index: 24; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; background: #03050aa8; cursor: default; }
  .map-header { min-height: 162px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px; align-content: start; }
  .map-header h1 { font-size: 17px; }
  .map-header p { max-width: 230px; margin-top: 3px; font-size: 10px; line-height: 1.35; }
  .hub-return { min-height: 20px; margin-bottom: 2px; }
  .map-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .map-actions > .feedback-group { display: none; }
  .action-button { min-width: 0; min-height: 44px; padding: 0 5px; font-size: 10px; }
  .keyboard-help-button kbd { min-width: 20px; min-height: 20px; font-size: 10px; }
  [data-mode="compare"] .map-grid { display: block; }
  .map-pane { position: absolute; inset: 0; display: block !important; opacity: 0; pointer-events: none; border: 0; transition: opacity 150ms ease-out; }
  .map-pane.active { opacity: 1; pointer-events: auto; }
  [data-mode="explore"] .pane-a { opacity: 1; pointer-events: auto; }
  [data-mode="explore"] .pane-b { visibility: hidden !important; }
  .pane-label { top: 166px; left: 10px; }
  .map-kpi { top: 210px; left: 10px; width: calc(100% - 20px); }
  .map-kpi dd { font-size: clamp(17px, 5.5vw, 22px); }
  .map-navigation { top: 352px; right: 8px; }
  .map-navigation button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  [data-mode="compare"] .pane-label { display: none; }
  [data-mode="compare"] .mobile-scenario-switch { display: grid; top: 166px; }
  .map-legend { left: 8px; bottom: 10px; width: min(230px, calc(100% - 16px)); padding: 9px 10px; }
  .map-player { right: 8px; bottom: 196px; left: 8px; grid-template-columns: auto minmax(0, 1fr); gap: 7px; padding: 7px; }
  .map-player-primary { grid-template-columns: repeat(3, 44px); }
  .map-player-button,
  .map-player-step { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .map-player-options { gap: 4px; }
  .map-player-options label { font-size: 8px; }
  .map-player-options select { min-height: 32px; padding: 3px 18px 3px 5px; font-size: 9px; }
  .map-player-timeline output { font-size: 11px; }
  .map-player-timeline p { display: none; }
  .basemap-control { right: 8px; bottom: 350px; }
  .basemap-toggle { min-height: 44px; padding: 7px 9px; font-size: 10px; }
  .map-attribution { right: 8px; bottom: 392px; max-width: 180px; }
  .bottom-tray-heading { height: 48px; padding: 3px 6px; }
  .bottom-tray-toggle { width: 44px; height: 44px; min-height: 44px; }
  .bottom-tray-heading .desk-label { display: none; }
  .bottom-tray-hint { display: none; }
  .storm-table-panel { height: calc(100% - 48px); }
  .storm-table-toolbar { align-items: stretch; flex-direction: column; gap: 7px; padding: 7px 8px; }
  .storm-table-actions { align-items: stretch; flex-direction: column; }
  .download-button { width: 100%; }
  .storm-table-pages { justify-content: space-between; }
  .storm-table-pages output { min-width: 54px; }
  .top20-tour-caption { bottom: 14px; width: calc(100% - 20px); padding: 20px 18px; border-left-width: 6px; }
  .top20-tour-caption h2 { font-size: clamp(38px, 11vw, 58px); }
  .top20-tour-caption p { margin-top: 10px; font-size: clamp(22px, 6.4vw, 32px); }
  .top20-tour-caption[data-phase="national"] { width: calc(100% - 20px); grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; }
  .top20-tour-caption[data-phase="national"] h2 { font-size: clamp(58px, 18vw, 82px); }
  .top20-tour-caption[data-phase="national"] p { margin: 0 0 2px; font-size: clamp(23px, 7vw, 34px); }
  .tour-capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .tour-capability-grid span { min-height: 42px; font-size: clamp(13px, 3.8vw, 18px); }
  .tour-end-card { padding: 34px 20px; }
  .tour-end-card p { font-size: clamp(24px, 7vw, 34px); }
  .tour-end-card h2 { font-size: clamp(48px, 15vw, 74px); }
  .tour-end-card span { font-size: clamp(17px, 5vw, 24px); }
  .preset-list { grid-template-columns: 1fr 1fr; }
  .preset-list button { min-height: 48px; }
  #aboutDialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  .help-dialog-shell { max-height: calc(100vh - 16px); padding: 16px; }
  .help-dialog-heading { top: -16px; margin: -16px -16px 0; padding: 14px 16px; }
  .help-signal-grid,
  .help-history { grid-template-columns: 1fr; }
  .help-section { margin-top: 20px; padding-top: 18px; }
  .help-section-heading { align-items: flex-start; }
}

@media (max-width: 430px) {
  .map-header p { max-width: 185px; }
  .ef-grid { grid-template-columns: repeat(4, 1fr); }
  .preset-list { grid-template-columns: 1fr; }
  .shortcut-guide { grid-template-columns: 1fr; }
  .map-key-grid { grid-template-columns: 1fr; }
  .encoding-actions { grid-template-columns: 1fr; }
  .map-player-options label:first-child select { min-width: 0; }
  #mapKeysDialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 80px);
    margin: 64px 8px auto;
  }
  .storm-table-pages label { display: none; }
  .storm-table-pages button { padding-inline: 8px; }
}

@media (hover: none) {
  .map-hover-tooltip { display: none !important; }
}

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

/* Hurricane Tracks overrides — the header must stay one line so it never
   collides with the fixed position of the visible-totals panel. */
.map-header > div:first-child { min-width: 0; }
.map-header h1 { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.map-header h1 b { font-size: 12px; font-weight: 700; color: var(--accent); }
.map-header p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-actions { flex-wrap: wrap; justify-content: flex-end; }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--text-secondary); font-size: 12px; }
.checkbox-row input { width: 16px; height: 16px; }
.storm-evidence h3 { margin: 0 0 4px; font-size: 19px; }
.storm-evidence h3 b { color: var(--accent); font-weight: 700; }
.evidence-lead { margin: 0 0 12px; color: var(--text-secondary); font-size: 12px; }
.evidence-narrative { margin: 14px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.65; }
.storm-table tbody tr { cursor: pointer; }
.storm-table tbody tr.is-selected { background: #1d2740; color: var(--text); }
.storm-table th button { border: 0; padding: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.storm-table th button:hover { color: var(--text); }
@media (max-width: 1080px) { .map-kpi { display: none; } }