:root {
  --quake-ink: #070913;
  --quake-panel: rgba(12, 15, 34, .72);
  --quake-line: rgba(201, 245, 0, .18);
  --quake-text: #f5f7fa;
  --quake-muted: rgba(235, 239, 247, .54);
  --quake-signal: #c9f500;
  --quake-critical: #ff735d;
}

.earthquake-page {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--quake-ink);
}

.earthquake-page [data-site-header] { position: relative; z-index: 30; }
.earthquake-page .site-header {
  background: rgba(7, 9, 19, .88);
  color: #fff;
  border-bottom-color: rgba(255,255,255,.1);
  backdrop-filter: blur(16px);
}
.earthquake-page .site-brand,
.earthquake-page .site-nav a,
.earthquake-page .lang-toggle { color: #fff; }
.earthquake-page .site-brand img { mix-blend-mode: screen; filter: invert(1) brightness(1.8) saturate(.7); }

.quake-shell { min-height: 100svh; padding-top: var(--header); background: var(--quake-ink); }
.quake-dashboard {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(200px, 18vw) minmax(480px, 1fr) minmax(260px, 23vw);
  grid-template-rows: auto minmax(460px, 1fr) auto;
  min-height: calc(100svh - 76px);
  overflow: hidden;
  color: var(--quake-text);
  background:
    radial-gradient(circle at 51% 48%, rgba(37, 42, 99, .25), transparent 34%),
    radial-gradient(circle at 52% 110%, rgba(201,245,0,.055), transparent 34%),
    #070913;
}
.quake-dashboard::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7,9,19,.96) 0, transparent 20%, transparent 76%, rgba(7,9,19,.98) 100%);
}
.quake-grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(125,139,181,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,139,181,.13) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.quake-masthead {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(24px, 2.6vw, 44px) clamp(24px, 3.4vw, 58px) 20px;
}
.quake-kicker,
.quake-feed-heading,
.quake-footer,
.quake-status-line,
.quake-facts,
.quake-globe-instruction,
.quake-detail > p {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: 10px;
}
.quake-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; color: var(--quake-muted); }
.quake-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--quake-signal); box-shadow: 0 0 18px var(--quake-signal); animation: quake-live 2s ease-in-out infinite; }
.quake-masthead h1 { margin: 0; font-size: clamp(27px, 2.6vw, 46px); font-weight: 430; line-height: 1; letter-spacing: -.045em; }
.quake-masthead-meta { display: flex; align-items: center; gap: 22px; color: var(--quake-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.quake-icon-button { display: flex; align-items: center; gap: 14px; padding: 10px 0 10px 14px; color: #fff; border: 0; border-left: 1px solid rgba(255,255,255,.18); background: none; cursor: pointer; }
.quake-icon-button i { color: var(--quake-signal); }

.quake-summary,
.quake-feed { position: relative; z-index: 4; align-self: center; }
.quake-summary { padding: 0 10px 0 clamp(24px, 3.4vw, 58px); }
.quake-status-line { display: flex; align-items: center; justify-content: space-between; max-width: 220px; padding: 0 0 13px; color: var(--quake-muted); border-bottom: 1px solid rgba(255,255,255,.16); }
.quake-status-line i { display: block; width: 34px; height: 1px; background: var(--quake-signal); box-shadow: 0 0 9px var(--quake-signal); }
.quake-status-line.is-error i { background: var(--quake-critical); box-shadow: 0 0 9px var(--quake-critical); }
.quake-stat { margin: clamp(28px, 4vh, 52px) 0 36px; }
.quake-stat-number { display: block; margin-left: -4px; font-size: clamp(70px, 8vw, 132px); font-weight: 300; line-height: .82; letter-spacing: -.09em; }
.quake-stat > span:last-child { display: block; margin-top: 15px; color: var(--quake-muted); font-size: 11px; letter-spacing: .12em; }
.quake-facts { max-width: 220px; margin: 0; }
.quake-facts div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.09); }
.quake-facts dt { color: var(--quake-muted); }
.quake-facts dd { margin: 0; color: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.quake-filter { display: flex; gap: 1px; width: min(100%, 220px); margin-top: 26px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); }
.quake-filter button { flex: 1; display: grid; gap: 2px; min-width: 0; padding: 10px 4px 9px; color: var(--quake-muted); border: 0; background: #090c1a; cursor: pointer; }
.quake-filter button b { font-size: 10px; font-weight: 550; }
.quake-filter button span { font-size: 8px; letter-spacing: .12em; }
.quake-filter button.is-active { color: var(--quake-ink); background: var(--quake-signal); }

.quake-globe-stage { position: relative; z-index: 2; min-width: 0; min-height: 460px; }
.quake-globe { position: absolute; inset: -12% -10%; cursor: grab; touch-action: none; }
.quake-globe:active { cursor: grabbing; }
.quake-globe canvas { display: block; width: 100%; height: 100%; }
.quake-orbit { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(65vw, 860px); aspect-ratio: 1; border: 1px solid rgba(116,128,178,.11); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.quake-orbit-a { transform: translate(-50%, -50%) rotateX(68deg) rotateZ(-18deg); }
.quake-orbit-b { width: min(72vw, 960px); transform: translate(-50%, -50%) rotateX(76deg) rotateZ(27deg); }
.quake-globe-instruction { position: absolute; left: 50%; bottom: 12px; z-index: 3; margin: 0; color: var(--quake-muted); transform: translateX(-50%); white-space: nowrap; }

.quake-feed { max-height: min(520px, 57vh); margin-right: clamp(24px, 3.4vw, 58px); overflow: hidden; }
.quake-feed-heading { display: flex; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.2); }
.quake-feed-heading > span { color: #fff; }
.quake-feed-heading small { color: var(--quake-signal); font: inherit; }
.quake-event-list { display: grid; }
.quake-event {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 13px;
  align-items: center;
  min-width: 0;
  padding: 15px 0;
  color: inherit;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: transparent;
  cursor: pointer;
  transition: color .2s, padding .2s;
}
.quake-event:hover,
.quake-event.is-selected { padding-left: 7px; color: var(--quake-signal); }
.quake-event-mag { font: 400 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: -.07em; }
.quake-event.is-major .quake-event-mag { color: var(--quake-critical); text-shadow: 0 0 16px rgba(255,115,93,.35); }
.quake-event-copy { min-width: 0; }
.quake-event-copy b { display: block; overflow: hidden; color: currentColor; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.quake-event-copy span { display: block; margin-top: 4px; color: var(--quake-muted); font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
.quake-event > i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.quake-loading { padding: 24px 0; color: var(--quake-muted); font-size: 12px; }

.quake-detail { position: absolute; z-index: 10; right: clamp(24px, 3.4vw, 58px); bottom: 62px; width: min(360px, calc(100vw - 48px)); padding: 22px; color: #fff; border: 1px solid rgba(201,245,0,.28); background: rgba(8,11,25,.94); box-shadow: 0 24px 80px rgba(0,0,0,.42); backdrop-filter: blur(18px); transform: translateY(12px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.quake-detail[aria-hidden="false"] { opacity: 1; transform: none; pointer-events: auto; }
.quake-detail > button { position: absolute; top: 12px; right: 14px; color: var(--quake-muted); border: 0; background: none; font-size: 24px; cursor: pointer; }
.quake-detail > p { margin: 0 0 18px; color: var(--quake-signal); }
.quake-detail > strong { display: block; padding-right: 24px; font-size: 20px; font-weight: 480; line-height: 1.3; }
.quake-detail > div { display: flex; gap: 18px; align-items: baseline; margin: 22px 0; color: var(--quake-muted); font: 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.quake-detail > div b { color: #fff; font-size: 34px; font-weight: 400; }
.quake-detail > a { color: #fff; font-size: 11px; border-bottom: 1px solid rgba(255,255,255,.3); }

.quake-footer { grid-column: 1 / -1; z-index: 5; display: grid; gap: 12px; padding: 12px clamp(24px, 3.4vw, 58px) 16px; color: var(--quake-muted); border-top: 1px solid rgba(255,255,255,.1); background: rgba(7,9,19,.74); }
.quake-footer p { margin: 0; }
.quake-prediction-tape { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 20px; min-width: 0; }
.quake-prediction-title { color: var(--quake-signal); white-space: nowrap; }
.quake-prediction-window { min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.quake-prediction-track { display: flex; width: max-content; animation: quake-ticker 42s linear infinite; }
.quake-prediction-group { display: flex; align-items: center; }
.quake-prediction-item { display: inline-flex; gap: 8px; align-items: baseline; margin-right: 34px; white-space: nowrap; }
.quake-prediction-item b { color: #fff; font-weight: 520; }
.quake-prediction-item i { color: var(--quake-signal); font-style: normal; }
.quake-prediction-item em { color: var(--quake-muted); font: normal 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.quake-footer-meta { display: flex; justify-content: flex-end; gap: 24px; }
.quake-separator { margin: 0 12px; color: rgba(255,255,255,.2); }

@keyframes quake-live { 50% { opacity: .42; box-shadow: 0 0 5px var(--quake-signal); } }
@keyframes quake-ticker { to { transform: translateX(-50%); } }

@media (max-width: 1050px) {
  .quake-dashboard { grid-template-columns: 190px minmax(420px, 1fr) 250px; }
  .quake-feed { margin-right: 24px; }
  .quake-summary { padding-left: 24px; }
  .quake-masthead, .quake-footer { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 820px) {
  .quake-dashboard { display: block; min-height: calc(100svh - 70px); overflow: visible; }
  .quake-masthead { padding-top: 28px; }
  .quake-masthead-meta > span { display: none; }
  .quake-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 10px 22px 0; }
  .quake-status-line, .quake-stat { grid-column: 1; }
  .quake-stat { margin: 22px 0 14px; }
  .quake-stat-number { font-size: 76px; }
  .quake-facts { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .quake-filter { grid-column: 1 / -1; width: 100%; max-width: none; margin-top: 20px; }
  .quake-globe-stage { min-height: 520px; }
  .quake-globe { inset: -7% -20%; }
  .quake-feed { max-height: none; margin: 0 22px 30px; }
  .quake-event-list { grid-template-columns: 1fr 1fr; gap: 0 20px; }
  .quake-detail { position: fixed; bottom: 18px; }
  .quake-footer { padding: 14px 22px 22px; }
  .quake-footer-meta { display: grid; }
}

@media (max-width: 540px) {
  .quake-masthead { align-items: center; padding-left: 18px; padding-right: 18px; }
  .quake-masthead h1 { font-size: 28px; }
  .quake-icon-button { padding-left: 10px; }
  .quake-summary { padding-left: 18px; padding-right: 18px; }
  .quake-globe-stage { min-height: 440px; }
  .quake-globe { inset: -2% -36%; }
  .quake-globe-instruction { bottom: 5px; font-size: 8px; }
  .quake-feed { margin-left: 18px; margin-right: 18px; }
  .quake-event-list { grid-template-columns: 1fr; }
  .quake-event:nth-child(n+6) { display: none; }
  .quake-footer { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .quake-live-dot { animation: none; }
  .quake-prediction-track { animation: none; }
}