.earthquake-page {
  --eq-teal: #1f6e67;
  --eq-ink: #17372b;
  --eq-muted: #6a7f74;
  --eq-line: #d6e3da;
  --eq-soft: #edf6ef;
  --eq-ocean: #dceff1;
  --eq-land: #b8d5bc;
  --eq-land-stroke: #8fbaa0;
  --eq-accent: #d86b4d;
  --eq-accent-dark: #a94b36;
  --eq-new: #df9229;
  background: #f7faf7;
  color: var(--eq-ink);
}

.earthquake-page .site-header .header-inner { min-height: 60px; }
.earthquake-page .site-header .brand { font-size: 16px; }

.earthquake-page .earthquake-hero {
  padding: 30px 0 24px;
  background: linear-gradient(135deg, #f0f7f2 0%, #e1f0e6 100%);
}

.earthquake-page .earthquake-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}

.earthquake-page .earthquake-hero h1 {
  margin: 0 0 9px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.2;
  letter-spacing: -.08em;
}

.earthquake-page .earthquake-lead {
  max-width: 680px;
  margin: 0;
  color: #60766a;
  font-size: 13px;
}

.earthquake-page .earthquake-hero-note {
  display: grid;
  gap: 4px;
  max-width: 230px;
  padding: 11px 14px;
  border-left: 3px solid var(--eq-teal);
  background: rgba(255, 255, 255, .7);
  color: var(--eq-muted);
  font-size: 11px;
  line-height: 1.7;
}

.earthquake-page .earthquake-hero-note strong { color: var(--eq-teal); font-size: 13px; }

.earthquake-page .earthquake-tool-section {
  display: flex;
  flex-direction: column;
  padding-top: 30px;
  padding-bottom: 40px;
}

.earthquake-page .earthquake-controls { order: 2; }
.earthquake-page .earthquake-layout { order: 3; }
.earthquake-page .earthquake-chart-panel { order: 5; }
.earthquake-page .earthquake-detail { order: 6; }
.earthquake-page .earthquake-notices { order: 7; }

.earthquake-page .map-panel-heading,
.earthquake-page .list-heading,
.earthquake-page .detail-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

.earthquake-page .live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--eq-teal);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.earthquake-page .hero-live-status {
  margin-top: 7px;
}

.earthquake-page .live-status-indicator {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4d9567;
  box-shadow: 0 0 0 4px rgba(77, 149, 103, .14);
}

.earthquake-page .live-status.is-error .live-status-indicator { background: #b75c5c; box-shadow: 0 0 0 4px rgba(183, 92, 92, .14); }
.earthquake-page .live-status.is-offline .live-status-indicator { background: #a4772d; box-shadow: 0 0 0 4px rgba(164, 119, 45, .14); }

.earthquake-page .earthquake-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.earthquake-page .earthquake-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px 15px;
  border: 1px solid var(--eq-line);
  border-radius: 11px;
  background: #fff;
}

.earthquake-page .earthquake-summary span { color: var(--eq-muted); font-size: 10px; }
.earthquake-page .earthquake-summary strong { overflow-wrap: anywhere; font-size: 18px; font-variant-numeric: tabular-nums; }
.earthquake-page .earthquake-summary small { margin-left: 3px; color: var(--eq-muted); font-size: 10px; }
.earthquake-page .earthquake-summary .earthquake-sync-summary strong { white-space: pre-line; font-size: 15px; line-height: 1.45; }
.earthquake-page .earthquake-summary .earthquake-sync-summary small { margin-left: 0; }
.earthquake-page .earthquake-sync-summary.is-sync-ok small { color: #4d805f; }
.earthquake-page .earthquake-sync-summary.is-sync-delayed small { color: #a4772d; }
.earthquake-page .earthquake-sync-summary.is-sync-stale small { color: #a94b36; }
.earthquake-page .earthquake-admin-status {
  padding-top: 22px;
  padding-bottom: 32px;
  border-top: 1px solid var(--eq-line);
}
.earthquake-page .earthquake-admin-status h2 {
  margin: 0 0 11px;
  color: var(--eq-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
}
.earthquake-page .earthquake-admin-status .earthquake-summary { margin-bottom: 0; }
.earthquake-page .earthquake-summary-jma { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.earthquake-page .earthquake-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--eq-line);
  border-radius: 12px;
  background: var(--eq-soft);
}

.earthquake-page [hidden] { display: none !important; }
.earthquake-page .earthquake-mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  padding: 3px;
  border: 1px solid #c8d8cd;
  border-radius: 10px;
  background: rgba(255, 255, 255, .7);
}
.earthquake-page .earthquake-mode-switch button {
  min-height: 32px;
  border-color: transparent;
  background: transparent;
  color: var(--eq-muted);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.earthquake-page .earthquake-mode-switch button[aria-pressed="true"] {
  border-color: #c8d8cd;
  background: #fff;
  color: var(--eq-teal);
  box-shadow: 0 1px 2px rgba(23, 55, 43, .06);
}

.earthquake-page .earthquake-control { display: grid; gap: 5px; }
.earthquake-page .earthquake-control label { color: var(--eq-muted); font-size: 10px; font-weight: 700; }

.earthquake-page select,
.earthquake-page button {
  min-height: 36px;
  border: 1px solid #c8d8cd;
  border-radius: 8px;
  background: #fff;
  color: var(--eq-ink);
  font: inherit;
  font-size: 12px;
}

.earthquake-page select { padding: 0 30px 0 10px; }
.earthquake-page button { padding: 0 12px; cursor: pointer; }
.earthquake-page button:hover,
.earthquake-page button:focus-visible,
.earthquake-page select:focus-visible { border-color: var(--eq-teal); outline: 3px solid rgba(31, 110, 103, .13); outline-offset: 1px; }
.earthquake-page button:disabled { cursor: not-allowed; opacity: .5; }
.earthquake-page .earthquake-secondary-button { color: var(--eq-teal); font-weight: 700; }
.earthquake-page .jma-load-more { display: block; width: 100%; margin-top: 10px; }
.earthquake-page .jma-intensity-detail { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--eq-line); }
.earthquake-page .jma-intensity-detail h4 { margin: 0 0 6px; font-size: 13px; }
.earthquake-page .jma-intensity-detail p { margin: 0 0 8px; color: var(--eq-muted); font-size: 11px; }
.earthquake-page .jma-intensity-detail ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; max-height: 300px; overflow: auto; margin: 0; padding: 0; list-style: none; }
.earthquake-page .jma-intensity-detail li { display: flex; align-items: baseline; gap: 8px; min-width: 0; padding: 7px 9px; border-radius: 7px; background: #f3f8f3; font-size: 10px; }
.earthquake-page .jma-intensity-detail li strong { flex: 0 0 auto; color: var(--eq-accent-dark); }
.earthquake-page .jma-intensity-detail li span { overflow-wrap: anywhere; color: var(--eq-muted); }
.earthquake-page #detail-jma-source { color: var(--eq-teal); text-decoration: underline; text-underline-offset: 2px; }
.earthquake-page .jma-disclaimer { padding: 11px 13px; border-left: 3px solid #b77c44; background: #f3f8f3; }

.earthquake-page .earthquake-playback {
  flex: 1 0 100%;
  display: grid;
  grid-template-columns: minmax(150px, .55fr) auto minmax(190px, 1fr) minmax(112px, auto);
  align-items: center;
  column-gap: 12px;
  row-gap: 0;
  margin-top: 1px;
  padding-top: 8px;
  border-top: 1px solid rgba(201, 219, 207, .9);
}
.earthquake-page .playback-heading,
.earthquake-page .playback-controls,
.earthquake-page .playback-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.earthquake-page .playback-heading,
.earthquake-page .playback-controls,
.earthquake-page .playback-range { grid-column: 1 / -1; }
.earthquake-page .playback-heading { grid-column: 1; }
.earthquake-page .playback-controls { grid-column: 2; flex-wrap: nowrap; }
.earthquake-page .playback-heading strong { display: block; color: var(--eq-ink); font-size: 13px; }
.earthquake-page .playback-kicker { display: block; margin-bottom: 2px; color: var(--eq-teal); font: 700 9px/1.2 "DM Sans", sans-serif; letter-spacing: .16em; }
.earthquake-page #playback-progress-label { color: var(--eq-muted); font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.earthquake-page .playback-controls { justify-content: flex-start; }
.earthquake-page .playback-controls .earthquake-secondary-button { min-height: 30px; }
.earthquake-page .playback-speed-control { display: flex; align-items: center; gap: 5px; margin-left: 0; }
.earthquake-page .playback-speed-control select { min-height: 30px; }
.earthquake-page .playback-range { grid-column: 3; width: 100%; height: 10px; margin: 0; accent-color: var(--eq-teal); cursor: pointer; }
.earthquake-page .playback-range:disabled { cursor: not-allowed; opacity: .5; }
.earthquake-page .playback-scale { grid-column: 4; color: var(--eq-muted); font-size: 9px; font-variant-numeric: tabular-nums; }
.earthquake-page .playback-note { display: none; margin: 0; color: var(--eq-muted); font-size: 9px; line-height: 1.25; text-align: right; }

.earthquake-page .earthquake-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: stretch;
}

.earthquake-page .map-panel,
.earthquake-page .earthquake-list-panel,
.earthquake-page .earthquake-detail {
  min-width: 0;
  border: 1px solid var(--eq-line);
  border-radius: 15px;
  background: #fff;
}

.earthquake-page .map-panel {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}
.earthquake-page .map-panel-heading { padding: 17px 18px 14px; }
.earthquake-page .map-panel-heading h3,
.earthquake-page .list-heading h3,
.earthquake-page .detail-heading h3 { margin: 0; font-size: 20px; letter-spacing: -.04em; }

.earthquake-page .map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.earthquake-page .map-actions button { min-width: 36px; padding: 0 8px; color: var(--eq-teal); font-weight: 700; }
.earthquake-page .map-actions button:last-of-type { padding: 0 9px; font-size: 11px; }
.earthquake-page .map-layer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid #c8d8cd;
  border-radius: 8px;
  background: var(--eq-soft);
  color: var(--eq-teal);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.earthquake-page .map-layer-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--eq-teal); cursor: pointer; }
.earthquake-page .map-layer-toggle:focus-within { border-color: var(--eq-teal); outline: 3px solid rgba(31, 110, 103, .13); outline-offset: 1px; }
.earthquake-page .map-layer-toggle.is-unavailable { cursor: not-allowed; opacity: .58; }
.earthquake-page .map-layer-toggle.is-unavailable input { cursor: not-allowed; }

.earthquake-page .map-stage {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border-top: 1px solid var(--eq-line);
  border-bottom: 1px solid var(--eq-line);
  background: var(--eq-ocean);
  touch-action: none;
  user-select: none;
}

.earthquake-page #world-map,
.earthquake-page #earthquake-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.earthquake-page .maplibre-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #dceff1;
}

.earthquake-page #world-map,
.earthquake-page #earthquake-canvas {
  display: none !important;
}

.earthquake-page .map-loading,
.earthquake-page .map-error,
.earthquake-page .map-zoom-label {
  z-index: 3;
}

.earthquake-page .maplibregl-ctrl-attrib {
  max-width: min(92%, 460px);
  font-size: 10px;
}

.earthquake-page .maplibregl-ctrl-attrib a { color: #245d58; }
.earthquake-page #earthquake-canvas.is-dragging { cursor: grabbing; }
.earthquake-page #map-grid-layer line { stroke: rgba(92, 143, 137, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.earthquake-page .map-country { fill: var(--eq-land); stroke: var(--eq-land-stroke); stroke-width: .6; vector-effect: non-scaling-stroke; }
.earthquake-page .map-fallback-country { fill: var(--eq-land); stroke: var(--eq-land-stroke); stroke-width: 1; vector-effect: non-scaling-stroke; }
.earthquake-page .map-fallback[hidden] { display: none; }

.earthquake-page .map-loading,
.earthquake-page .map-error {
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(88%, 340px);
  padding: 12px 15px;
  transform: translate(-50%, -50%);
  border-radius: 9px;
  background: rgba(255, 255, 255, .88);
  color: var(--eq-muted);
  font-size: 12px;
  text-align: center;
}

.earthquake-page .map-error {
  inset: auto 12px 12px;
  width: auto;
  transform: none;
  color: #984d4d;
  text-align: left;
}
.earthquake-page .map-zoom-label { position: absolute; top: 12px; right: 13px; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .78); color: var(--eq-muted); font-size: 10px; }
.earthquake-page .map-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 10px 14px; }
.earthquake-page .map-legend { display: flex; flex-wrap: wrap; gap: 8px 13px; color: var(--eq-muted); font-size: 10px; }
.earthquake-page .map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.earthquake-page .legend-swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.earthquake-page .map-credit { max-width: 52%; color: var(--eq-muted); font-size: 10px; line-height: 1.5; text-align: right; }

.earthquake-page .earthquake-list-panel { overflow: hidden; }
.earthquake-page .list-heading { align-items: end; padding: 17px 17px 14px; border-bottom: 1px solid var(--eq-line); }
.earthquake-page .list-sort-control { flex: 0 0 auto; }
.earthquake-page .list-sort-control select { min-height: 32px; max-width: 130px; font-size: 11px; }
.earthquake-page .list-map-filter { padding: 9px 15px; border-bottom: 1px solid var(--eq-line); background: var(--eq-soft); }
.earthquake-page .list-map-filter label { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; color: var(--eq-teal); font-size: 11px; font-weight: 700; cursor: pointer; }
.earthquake-page .list-map-filter input { width: 15px; height: 15px; margin: 0; accent-color: var(--eq-teal); cursor: pointer; }
.earthquake-page .list-map-filter label:focus-within { outline: 3px solid rgba(31, 110, 103, .13); outline-offset: 2px; }
.earthquake-page .earthquake-list { max-height: 563px; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.earthquake-page .earthquake-list-item { border-bottom: 1px solid var(--eq-line); }
.earthquake-page .earthquake-list-item:last-child { border-bottom: 0; }
.earthquake-page .earthquake-list-button { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 9px; width: 100%; min-height: 74px; padding: 13px 15px; border: 0; border-radius: 0; text-align: left; }
.earthquake-page .earthquake-list-button:hover { background: #f6faf6; }
.earthquake-page .earthquake-list-button.is-selected { background: var(--eq-soft); box-shadow: inset 3px 0 0 var(--eq-teal); }
.earthquake-page .list-magnitude { color: var(--eq-accent-dark); font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.earthquake-page .list-place { display: block; overflow: hidden; color: var(--eq-ink); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.earthquake-page .list-meta { display: block; margin-top: 4px; color: var(--eq-muted); font-size: 10px; line-height: 1.5; }
.earthquake-page .list-new { color: var(--eq-new); font-weight: 800; }
.earthquake-page .earthquake-list-empty { padding: 30px 16px; color: var(--eq-muted); font-size: 12px; text-align: center; }
.earthquake-page .list-note { margin: 0; padding: 12px 15px; border-top: 1px solid var(--eq-line); color: var(--eq-muted); font-size: 10px; line-height: 1.6; }

.earthquake-page .earthquake-chart-panel {
  min-width: 0;
  margin-top: 16px;
  padding: 20px;
  border: 1px solid var(--eq-line);
  border-radius: 15px;
  background: #fff;
}
.earthquake-page .earthquake-chart-heading,
.earthquake-page .earthquake-chart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.earthquake-page .earthquake-chart-heading { align-items: end; }
.earthquake-page .earthquake-chart-heading h3 { margin: 0; font-size: 20px; letter-spacing: -.04em; }
.earthquake-page .earthquake-chart-description { margin: 6px 0 0; color: var(--eq-muted); font-size: 11px; line-height: 1.6; }
.earthquake-page .earthquake-chart-region { flex: 0 0 230px; }
.earthquake-page .earthquake-chart-region select { width: 100%; }
.earthquake-page .earthquake-chart-toolbar { flex-wrap: wrap; margin-top: 16px; }
.earthquake-page .earthquake-chart-periods { display: inline-flex; gap: 5px; padding: 3px; border-radius: 9px; background: var(--eq-soft); }
.earthquake-page .earthquake-chart-periods button { min-height: 32px; padding: 0 12px; border-color: transparent; background: transparent; color: var(--eq-muted); font-size: 11px; font-weight: 700; }
.earthquake-page .earthquake-chart-periods button[aria-pressed="true"] { border-color: #c8d8cd; background: #fff; color: var(--eq-teal); box-shadow: 0 1px 2px rgba(23, 55, 43, .06); }
.earthquake-page .earthquake-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--eq-muted); font-size: 10px; }
.earthquake-page .earthquake-chart-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.earthquake-page .earthquake-chart-legend i { width: 10px; height: 10px; border-radius: 3px; }
.earthquake-page .chart-legend-m7 { background: #ae3e45; }
.earthquake-page .chart-legend-m6 { background: #d86b4d; }
.earthquake-page .chart-legend-m5 { background: #df9229; }
.earthquake-page .chart-legend-m4 { background: #edbd69; }
.earthquake-page .chart-legend-m3 { background: #86a96f; }
.earthquake-page .chart-legend-m2 { background: #5f9a73; }
.earthquake-page .chart-legend-mlt2 { background: #7d9da3; }
.earthquake-page .chart-legend-m-unknown { background: #777d79; }
.earthquake-page .earthquake-chart-caveat { margin: 8px 0 0; color: var(--eq-muted); font-size: 10px; line-height: 1.5; }
.earthquake-page .earthquake-chart-state { margin: 14px 0 0; padding: 16px; border-radius: 9px; background: #f5f8f5; color: var(--eq-muted); font-size: 12px; text-align: center; }
.earthquake-page .earthquake-chart-state.is-error { background: #fbf1ee; color: var(--eq-accent-dark); }
.earthquake-page .earthquake-chart-plot { width: 100%; margin-top: 12px; }
.earthquake-page .earthquake-chart-plot[hidden] { display: none; }
.earthquake-page #earthquake-chart-svg { display: block; width: 100%; height: 300px; overflow: visible; }
.earthquake-page .chart-grid-line { stroke: #e5ece7; stroke-width: 1; }
.earthquake-page .chart-axis-label { fill: #71847a; font: 10px system-ui, sans-serif; }
.earthquake-page .chart-area-segment { stroke: none; fill-opacity: .84; }
.earthquake-page .chart-area-line { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; pointer-events: none; }
.earthquake-page .chart-area-segment.chart-area-m7 { fill: #ae3e45; }
.earthquake-page .chart-area-line.chart-area-m7 { stroke: #92333a; }
.earthquake-page .chart-area-segment.chart-area-m6 { fill: #d86b4d; }
.earthquake-page .chart-area-line.chart-area-m6 { stroke: #b9553c; }
.earthquake-page .chart-area-segment.chart-area-m5 { fill: #df9229; }
.earthquake-page .chart-area-line.chart-area-m5 { stroke: #b6741f; }
.earthquake-page .chart-area-segment.chart-area-m4 { fill: #edbd69; }
.earthquake-page .chart-area-line.chart-area-m4 { stroke: #bd8b40; }
.earthquake-page .chart-area-segment.chart-area-m3 { fill: #86a96f; }
.earthquake-page .chart-area-line.chart-area-m3 { stroke: #688954; }
.earthquake-page .chart-area-segment.chart-area-m2 { fill: #5f9a73; }
.earthquake-page .chart-area-line.chart-area-m2 { stroke: #477b5a; }
.earthquake-page .chart-area-segment.chart-area-mlt2 { fill: #7d9da3; }
.earthquake-page .chart-area-line.chart-area-mlt2 { stroke: #607f85; }
.earthquake-page .chart-area-segment.chart-area-m-unknown { fill: #777d79; }
.earthquake-page .chart-area-line.chart-area-m-unknown { stroke: #5f6461; }
.earthquake-page .chart-point-hit { fill: transparent; }
.earthquake-page .chart-point-group { cursor: pointer; outline: none; }
.earthquake-page .chart-point-group:focus .chart-point-hit,
.earthquake-page .chart-point-group:hover .chart-point-hit { fill: rgba(31, 110, 103, .07); stroke: var(--eq-teal); stroke-width: 1; }
.earthquake-page .earthquake-chart-tooltip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 15px; min-height: 35px; margin-top: 2px; padding: 9px 11px; border-radius: 8px; background: var(--eq-soft); color: var(--eq-muted); font-size: 10px; line-height: 1.6; }
.earthquake-page .earthquake-chart-tooltip strong { color: var(--eq-ink); font-variant-numeric: tabular-nums; }

.earthquake-page .earthquake-detail { margin-top: 16px; padding: 19px 20px 21px; }
.earthquake-page .detail-heading { align-items: center; margin-bottom: 18px; }
.earthquake-page .detail-badge { padding: 5px 8px; border-radius: 99px; background: var(--eq-soft); color: var(--eq-teal); font-size: 10px; font-weight: 800; }
.earthquake-page .detail-grid { display: grid; grid-template-columns: minmax(170px, .65fr) 1fr; gap: 20px; }
.earthquake-page .detail-primary { display: grid; align-content: start; gap: 7px; min-width: 0; }
.earthquake-page .detail-primary strong { color: var(--eq-accent-dark); font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; }
.earthquake-page .detail-primary span:nth-child(2) { color: var(--eq-ink); font-size: 15px; font-weight: 700; }
.earthquake-page .detail-primary span:nth-child(3) { color: var(--eq-muted); font-size: 11px; }
.earthquake-page .detail-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 0; }
.earthquake-page .detail-facts > div { min-width: 0; padding: 10px 11px; border-radius: 8px; background: #f3f8f3; }
.earthquake-page .detail-facts dt { margin-bottom: 5px; color: var(--eq-muted); font-size: 10px; }
.earthquake-page .detail-facts dd { margin: 0; overflow-wrap: anywhere; color: var(--eq-ink); font-size: 12px; font-weight: 700; }
.earthquake-page .detail-distance { margin-top: 15px; padding: 11px 12px; border-left: 3px solid var(--eq-teal); background: var(--eq-soft); color: var(--eq-muted); font-size: 11px; }
.earthquake-page .earthquake-usgs-link { display: inline-block; margin-top: 16px; color: var(--eq-teal); font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.earthquake-page .earthquake-notices { display: grid; gap: 6px; margin-top: 15px; color: var(--eq-muted); font-size: 11px; line-height: 1.7; }
.earthquake-page .earthquake-notices p { margin: 0; }
.earthquake-page .earthquake-notices strong { color: var(--eq-ink); }

.earthquake-page .earthquake-guide-section { padding: 56px 0 84px; background: #e6f0e9; }
.earthquake-page .earthquake-guide-grid { display: grid; grid-template-columns: .72fr 1fr; gap: 70px; align-items: start; }
.earthquake-page .earthquake-guide-grid h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.25; letter-spacing: -.07em; }
.earthquake-page .earthquake-guide-grid h2 em { color: var(--eq-teal); font-style: normal; }
.earthquake-page .earthquake-guide-summary { margin: 18px 0 0; color: #53685d; font-size: 14px; line-height: 1.9; }
.earthquake-page .earthquake-guide-use-case { margin: 17px 0 0; padding: 13px 15px; border-left: 3px solid var(--eq-teal); background: rgba(255, 255, 255, .6); color: #53685d; font-size: 12px; line-height: 1.85; }
.earthquake-page .earthquake-guide-use-case strong { display: block; margin-bottom: 4px; color: var(--eq-ink); }
.earthquake-page .earthquake-guide-block { padding-top: 17px; border-top: 1px solid #c9dbcf; }
.earthquake-page .earthquake-guide-block + .earthquake-guide-block { margin-top: 19px; }
.earthquake-page .earthquake-guide-block h3 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 11px; color: var(--eq-ink); font-size: 16px; line-height: 1.5; }
.earthquake-page .earthquake-guide-block h3 span { color: var(--eq-teal); font: 700 10px "DM Sans", sans-serif; letter-spacing: .12em; }
.earthquake-page .earthquake-guide-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.earthquake-page .earthquake-guide-list li { position: relative; padding-left: 14px; color: #53685d; font-size: 12px; line-height: 1.85; overflow-wrap: anywhere; }
.earthquake-page .earthquake-guide-list li::before { position: absolute; top: .78em; left: 1px; width: 5px; height: 5px; border-radius: 50%; background: var(--eq-teal); content: ""; }
.earthquake-page .earthquake-guide-list strong { color: var(--eq-ink); }
.earthquake-page .earthquake-disclaimer { margin: 25px 0 0; padding: 15px 17px; border-left: 3px solid #b77c44; background: rgba(255, 255, 255, .6); color: #53685d; font-size: 12px; line-height: 1.85; }
.earthquake-page .earthquake-references { display: flex; flex-wrap: wrap; gap: 9px 18px; align-items: center; margin-top: 21px; color: var(--eq-muted); font-size: 12px; }
.earthquake-page .earthquake-references a { color: var(--eq-teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .earthquake-page .earthquake-layout { grid-template-columns: minmax(0, 1fr) 290px; }
  .earthquake-page .detail-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 760px) {
  .earthquake-page .earthquake-hero { padding: 24px 0 20px; }
  .earthquake-page .earthquake-hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .earthquake-page .earthquake-hero-note { max-width: none; }
  .earthquake-page .earthquake-tool-section { padding-top: 26px; padding-bottom: 32px; }
  .earthquake-page .earthquake-summary { grid-template-columns: repeat(2, 1fr); }
  .earthquake-page .earthquake-summary-jma { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .earthquake-page .earthquake-layout { grid-template-columns: 1fr; align-items: start; }
  .earthquake-page .map-panel { height: auto; }
  .earthquake-page .map-stage { flex: 0 0 auto; min-height: 0; aspect-ratio: 1000 / 520; }
  .earthquake-page .earthquake-chart-heading { align-items: stretch; flex-direction: column; }
  .earthquake-page .earthquake-chart-region { flex: 0 0 auto; width: min(100%, 320px); }
  .earthquake-page .earthquake-chart-toolbar { align-items: start; flex-direction: column; }
  .earthquake-page #earthquake-chart-svg { height: 260px; }
  .earthquake-page .earthquake-list { max-height: 430px; }
  .earthquake-page .earthquake-playback { grid-template-columns: 1fr; row-gap: 6px; }
  .earthquake-page .playback-heading,
  .earthquake-page .playback-controls,
  .earthquake-page .playback-range,
  .earthquake-page .playback-scale,
  .earthquake-page .playback-note { grid-column: 1; }
  .earthquake-page .playback-controls { flex-wrap: wrap; }
  .earthquake-page .playback-speed-control { margin-left: auto; }
  .earthquake-page .playback-note { display: block; text-align: left; }
  .earthquake-page .earthquake-guide-section { padding: 44px 0 68px; }
  .earthquake-page .earthquake-guide-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 480px) {
  .earthquake-page .jma-intensity-detail ul { grid-template-columns: 1fr; }
  .earthquake-page .earthquake-summary strong { font-size: 16px; }
  .earthquake-page .earthquake-summary .earthquake-sync-summary strong { font-size: 13px; }
  .earthquake-page .earthquake-controls { align-items: stretch; }
  .earthquake-page .earthquake-control { flex: 1 1 calc(50% - 10px); }
  .earthquake-page .earthquake-control select { width: 100%; }
  .earthquake-page .earthquake-secondary-button { flex: 1 1 calc(50% - 10px); }
  .earthquake-page .playback-controls { align-items: stretch; }
  .earthquake-page .playback-controls .earthquake-secondary-button { flex: 1 1 calc(50% - 10px); }
  .earthquake-page .playback-speed-control { flex: 1 1 100%; margin-left: 0; }
  .earthquake-page .playback-speed-control select { width: 100%; }
  .earthquake-page .earthquake-playback { grid-template-columns: 1fr; }
  .earthquake-page .playback-scale,
  .earthquake-page .playback-note { grid-column: 1; }
  .earthquake-page .playback-note { text-align: left; }
  .earthquake-page .map-panel-heading { align-items: start; flex-direction: column; gap: 11px; }
  .earthquake-page .map-footer { align-items: start; flex-direction: column; }
  .earthquake-page .map-credit { max-width: 100%; text-align: left; }
  .earthquake-page .earthquake-chart-panel { padding: 15px 12px; }
  .earthquake-page .earthquake-chart-region { width: 100%; }
  .earthquake-page .earthquake-chart-periods { width: 100%; }
  .earthquake-page .earthquake-chart-periods button { flex: 1 1 0; padding-inline: 7px; }
  .earthquake-page .earthquake-chart-legend { gap: 8px 12px; }
  .earthquake-page #earthquake-chart-svg { height: 235px; }
  .earthquake-page .detail-facts { grid-template-columns: repeat(2, 1fr); }
}

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