:root {
  color-scheme: dark;
  --ink: #eaf3f6;
  --muted: #93aab4;
  --dim: #607a85;
  --gold: #d9ab56;
  --gold-soft: rgba(217,171,86,.14);
  --cyan: #61d7d7;
  --cyan-soft: rgba(97,215,215,.12);
  --bg: #061019;
  --bg-deep: #03090e;
  --panel: rgba(10, 28, 39, .78);
  --panel-solid: #0b202c;
  --line: rgba(151, 190, 201, .14);
  --line-strong: rgba(151, 190, 201, .25);
  --danger: #ff8d7b;
  --radius: 22px;
  --shadow: 0 24px 80px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg-deep); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 5%, rgba(44,121,132,.18), transparent 28rem),
    radial-gradient(circle at 10% 45%, rgba(125,85,25,.08), transparent 26rem),
    linear-gradient(180deg, #07141e 0%, #061019 40%, #03090e 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.ambient { position: fixed; inset: auto; pointer-events: none; filter: blur(90px); opacity: .2; z-index: -1; }
.ambient-a { width: 20rem; height: 20rem; background: #1bb6be; right: -6rem; top: 25rem; }
.ambient-b { width: 18rem; height: 18rem; background: #b77825; left: -10rem; top: 70rem; }
.masthead {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 14px clamp(16px,4vw,58px);
  background: rgba(3, 12, 18, .82); backdrop-filter: blur(22px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); background: none; border: 0; cursor: pointer; padding: 0; text-align: left; }
.brand-mark { width: 43px; height: 43px; color: var(--cyan); filter: drop-shadow(0 0 18px rgba(97,215,215,.25)); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; letter-spacing: .09em; }
.brand-copy b { font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; letter-spacing: .08em; }
.brand-copy small { margin-top: 5px; color: var(--gold); font-size: .58rem; letter-spacing: .18em; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.freshness { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .78rem; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.live-dot.loading { animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink); background: rgba(255,255,255,.03); border-radius: 50%; cursor: pointer; }
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.spinning svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.desk-nav {
  position: sticky; top: 72px; z-index: 19;
  display: flex; gap: 8px; padding: 11px clamp(16px,4vw,58px);
  overflow-x: auto; scrollbar-width: none;
  background: rgba(5, 17, 25, .92); border-bottom: 1px solid var(--line);
}
.desk-nav::-webkit-scrollbar { display: none; }
.desk-nav button {
  white-space: nowrap; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--muted); padding: 9px 13px; cursor: pointer; font-size: .8rem;
  transition: .2s ease;
}
.desk-nav button span { margin-right: 6px; }
.desk-nav button:hover { color: var(--ink); border-color: var(--line); }
.desk-nav button.active { background: var(--gold-soft); color: #f3cf8e; border-color: rgba(217,171,86,.28); }
main { width: min(1240px, calc(100% - 28px)); margin: 0 auto; }
.hero { min-height: 410px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 3rem; padding: 64px 18px 48px; border-bottom: 1px solid var(--line); }
.eyebrow, .section-kicker { margin: 0 0 10px; color: var(--gold); font-size: .69rem; font-weight: 750; letter-spacing: .2em; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 32px; height: 1px; background: var(--gold); }
.hero h1 { margin: 0; font: 500 clamp(2.85rem, 7vw, 6.7rem)/.94 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.hero h1 em { color: var(--cyan); font-style: italic; text-shadow: 0 0 38px rgba(97,215,215,.14); }
.hero-lede { max-width: 700px; color: #b6c8cf; font-size: clamp(1rem, 2vw, 1.22rem); }
.hero-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-top: 24px; }
.divider { width: 36px; height: 1px; background: var(--line-strong); }
.globe-shell { width: min(330px, 70vw); aspect-ratio: 1; justify-self: center; position: relative; display: grid; place-items: center; }
.globe-grid { position: absolute; inset: 10%; border: 1px solid rgba(97,215,215,.32); border-radius: 50%; background: repeating-radial-gradient(circle at center, transparent 0 21px, rgba(97,215,215,.065) 22px 23px), linear-gradient(90deg, transparent 49.5%, rgba(97,215,215,.15) 50%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, rgba(97,215,215,.15) 50%, transparent 50.5%); box-shadow: inset 0 0 60px rgba(61,185,194,.12), 0 0 70px rgba(61,185,194,.08); }
.globe-grid::before, .globe-grid::after { content:""; position:absolute; inset: 18% 0; border:1px solid rgba(97,215,215,.18); border-radius:50%; }
.globe-grid::after { inset: 0 25%; }
.globe-orbit { position:absolute; inset: 2%; border:1px solid rgba(217,171,86,.22); border-radius:50%; transform: rotate(24deg); }
.orbit-two { inset: 20%; transform: rotate(-36deg); border-color: rgba(97,215,215,.16); }
.globe-pulse { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 10px rgba(217,171,86,.09),0 0 24px var(--gold); right:26%; top:29%; animation:pulse 2.4s ease-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 24px rgba(217,171,86,0),0 0 24px var(--gold); } }
.globe-label { position:relative; text-align:center; color:var(--muted); font-size:.62rem; letter-spacing:.23em; line-height:1.4; }
.globe-label b { color:var(--ink); font:500 1.65rem Georgia,serif; letter-spacing:.08em; }
.view { display:none; padding: 42px 0 80px; }
.active-view { display:block; }
.panel, .overview-card { background: linear-gradient(145deg, rgba(13,36,49,.88), rgba(7,23,33,.84)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.overview-card { position:relative; overflow:hidden; padding: clamp(22px,4vw,42px); margin-bottom:24px; }
.overview-card::after { content:""; position:absolute; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle,rgba(97,215,215,.11),transparent 68%); right:-70px; top:-100px; pointer-events:none; }
.section-title-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.section-title-row h2, .desk-header h2 { margin:0; font:500 clamp(1.7rem,3vw,2.6rem) Georgia,serif; letter-spacing:-.02em; }
.status-chip { color:var(--cyan); border:1px solid rgba(97,215,215,.22); background:var(--cyan-soft); border-radius:999px; padding:7px 11px; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }
.overview-copy { margin-top:25px; max-width:950px; color:#d5e2e6; font:400 clamp(1.04rem,1.7vw,1.22rem)/1.8 Georgia,serif; }
.overview-copy p { margin:.2em 0 1em; }
.citation-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.citation-row a { color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:6px 9px; text-decoration:none; font-size:.68rem; }
.skeleton { background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(255,255,255,.09),rgba(255,255,255,.03)); background-size:220% 100%; animation:shimmer 1.3s infinite; border-radius:7px; }
.skeleton.line { height:16px; width:70%; margin:12px 0; }.skeleton.line.wide{width:96%}.skeleton.line.medium{width:82%}
@keyframes shimmer { to { background-position:-220% 0; } }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px; align-items:start; }
.panel { padding: clamp(18px,3vw,28px); }
.story-stack { margin-top:10px; }
.story-card { display:grid; grid-template-columns:44px 1fr; gap:16px; padding:22px 0; border-bottom:1px solid var(--line); }
.story-card:last-child { border-bottom:0; }
.story-number { color:rgba(217,171,86,.5); font:italic 1.15rem Georgia,serif; padding-top:3px; }
.story-meta { display:flex; flex-wrap:wrap; gap:7px; align-items:center; color:var(--dim); font-size:.69rem; text-transform:uppercase; letter-spacing:.08em; }
.story-meta .source { color:var(--gold); }
.story-theme { color:#b8eeee; border:1px solid rgba(97,215,215,.18); background:rgba(97,215,215,.07); border-radius:999px; padding:2px 7px; letter-spacing:.06em; }
.story-card h3 { margin:7px 0 8px; color:#edf5f7; font:500 clamp(1.08rem,1.8vw,1.35rem)/1.28 Georgia,serif; }
.story-card p { margin:0 0 12px; color:var(--muted); font-size:.89rem; }
.story-card a { color:var(--cyan); text-decoration:none; font-size:.78rem; font-weight:650; }
.story-card a:hover { text-decoration:underline; }
.story-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.clean-overview-button { border:0; background:transparent; color:var(--cyan); padding:0; cursor:pointer; font-size:.78rem; font-weight:750; }
.clean-overview-button::after { content:" ✦"; color:var(--gold); }
.clean-overview-button:hover { text-decoration:underline; }
.clean-overview-button:disabled { color:var(--dim); cursor:wait; text-decoration:none; }
.clean-overview-button.loading::after { display:inline-block; animation:spin .8s linear infinite; }
.article-overview { margin-top:18px; padding:18px; border:1px solid rgba(97,215,215,.2); border-radius:15px; background:rgba(3,16,24,.72); }
.article-overview[hidden] { display:none; }
.article-overview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); color:var(--gold); font-size:.62rem; font-weight:800; letter-spacing:.12em; }
.article-overview-head button { width:28px; height:28px; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.03); color:var(--muted); cursor:pointer; font-size:1.1rem; line-height:1; }
.article-overview-copy { padding-top:14px; }
.article-overview-copy h4 { margin:19px 0 7px; color:#b8eeee; font-size:.7rem; letter-spacing:.12em; }
.article-overview-copy h4:first-child { margin-top:0; }
.story-card .article-overview-copy p { margin:0 0 10px; color:#c7d7dc; line-height:1.65; }
.story-card .article-overview-copy .overview-bullet { display:grid; grid-template-columns:14px 1fr; gap:5px; }
.article-warning small { display:block; margin-top:6px; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; }
.overview-bullet span { color:var(--gold); }
.article-warning { margin:14px 0 0; padding:11px 12px; border-radius:10px; background:rgba(217,171,86,.08); border:1px solid rgba(217,171,86,.2); color:#d9c49a; font-size:.75rem; }
.article-citations { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.article-citations a { border:1px solid var(--line); border-radius:999px; padding:5px 8px; color:var(--muted); font-size:.66rem; }
.article-overview-loading { min-height:95px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:var(--muted); }
.article-overview-loading span { width:22px; height:22px; margin-bottom:10px; border:2px solid var(--line-strong); border-top-color:var(--cyan); border-radius:50%; animation:spin .8s linear infinite; }
.article-overview-loading b { color:#cfdee2; font-size:.82rem; }
.article-overview-loading small { margin-top:5px; color:var(--dim); }
.quiet-label { color:var(--dim); font-size:.75rem; }
.side-rail { display:grid; gap:18px; position:sticky; top:135px; }
.mini-heading { display:flex; align-items:center; gap:12px; }
.mini-heading>span { font-size:1.4rem; width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.04); border:1px solid var(--line); }
.mini-heading div { display:flex; flex-direction:column; }.mini-heading small{color:var(--gold);font-size:.58rem;letter-spacing:.15em}.mini-heading b{font:500 1.12rem Georgia,serif}
.mini-loading { color:var(--muted); font-size:.8rem; margin-top:18px; }
.weather-now { display:grid; grid-template-columns:1fr auto; align-items:end; margin-top:20px; }
.weather-now strong { font:500 3.3rem/1 Georgia,serif; }.weather-now span { color:var(--muted); font-size:.8rem; text-align:right; }
.alert-badge { margin-top:16px; padding:10px 12px; border-radius:12px; background:rgba(255,141,123,.1); border:1px solid rgba(255,141,123,.25); color:#ffc0b5; font-size:.76rem; }
.quake-list-mini { display:grid; gap:10px; margin-top:18px; }.quake-item-mini { display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:center; }.quake-mag { width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--gold-soft);color:#f2c77e;font-weight:800;font-size:.78rem}.quake-place{font-size:.77rem;color:#cedbdf}.quake-place small{display:block;color:var(--dim);margin-top:2px}
.health-list { margin-top:17px; display:grid; gap:9px; }.health-row{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:.72rem}.health-row i{width:8px;height:8px;border-radius:50%;background:var(--dim)}.health-row.ok i{background:var(--cyan);box-shadow:0 0 8px rgba(97,215,215,.7)}.health-row.warn i{background:var(--gold)}.health-row.error i{background:var(--danger)}
.desk-header { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; padding:12px 4px 26px; border-bottom:1px solid var(--line); }.desk-header p:not(.section-kicker){color:var(--muted);margin:8px 0 0}.refresh-desk{border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--ink);border-radius:999px;padding:10px 15px;cursor:pointer}.refresh-desk.loading span{display:inline-block;animation:spin .8s linear infinite}
.desk-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-top:24px; }.desk-content .story-card { display:block; padding:25px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(13,36,49,.76),rgba(7,23,33,.75)); }.desk-content .story-number{display:none}.desk-content .story-card h3{font-size:1.25rem}
.empty-desk { grid-column:1/-1; text-align:center; padding:60px 22px; border:1px dashed var(--line-strong); border-radius:18px; color:var(--muted); }.empty-desk b{display:block;color:var(--ink);font:500 1.4rem Georgia,serif;margin-bottom:8px}.retry-button{margin-top:18px;border:1px solid rgba(217,171,86,.35);background:var(--gold-soft);color:#f4cf8b;border-radius:999px;padding:10px 15px;cursor:pointer}
.weather-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }.forecast-card{padding:20px;border:1px solid var(--line);border-radius:17px;background:rgba(11,31,43,.7)}.forecast-card h3{font:500 1.1rem Georgia,serif;margin:0 0 14px}.forecast-card strong{font:500 2rem Georgia,serif}.forecast-card p{color:var(--muted);font-size:.78rem}.weather-alerts{grid-column:1/-1}.weather-alert{padding:18px;border:1px solid rgba(255,141,123,.22);background:rgba(255,141,123,.07);border-radius:15px;margin-bottom:10px}.weather-alert h3{margin:0;color:#ffc1b6}.weather-alert p{color:#d5b4ae;font-size:.85rem}
.quake-table { grid-column:1/-1; overflow:hidden; border:1px solid var(--line); border-radius:18px; }.quake-row{display:grid;grid-template-columns:80px 1fr 110px 110px;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line);align-items:center}.quake-row:last-child{border-bottom:0}.quake-row.header{background:rgba(255,255,255,.035);color:var(--dim);text-transform:uppercase;font-size:.65rem;letter-spacing:.1em}.quake-row a{color:var(--ink);text-decoration:none}.quake-row .mag{color:#f1c77d;font-weight:800}
footer { width:min(1240px,calc(100% - 28px)); margin:20px auto 0; padding:30px 0 46px; border-top:1px solid var(--line); display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; color:var(--dim); font-size:.7rem; }footer div{display:flex;flex-direction:column}footer b{font-family:Georgia,serif;color:var(--ink);letter-spacing:.08em}footer span{color:var(--gold);font-size:.58rem;letter-spacing:.1em;margin-top:4px}footer p{max-width:580px;text-align:right;margin:0}
@media (max-width: 900px){.dashboard-grid{grid-template-columns:1fr}.side-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.desk-health{grid-column:1/-1}.hero{grid-template-columns:1fr;min-height:auto;padding-top:48px}.globe-shell{position:absolute;right:-110px;top:165px;opacity:.25;width:320px}.hero-copy{position:relative;z-index:1}.desk-content{grid-template-columns:1fr}.weather-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 620px){.masthead{padding:11px 14px}.brand-mark{width:37px;height:37px}.brand-copy b{font-size:.93rem}.freshness{display:none}.desk-nav{top:60px;padding:8px 10px}.desk-nav button{padding:8px 10px;font-size:.74rem}main{width:min(100% - 20px,1240px)}.hero{padding:44px 5px 34px}.hero h1{font-size:3.18rem}.hero-lede{font-size:.94rem;max-width:90%}.hero-meta{font-size:.65rem;gap:8px}.globe-shell{top:170px;right:-150px}.view{padding-top:24px}.overview-card,.panel{border-radius:17px}.section-title-row{align-items:flex-start}.status-chip{font-size:.59rem;padding:6px 8px}.side-rail{grid-template-columns:1fr}.desk-health{grid-column:auto}.story-card{grid-template-columns:34px 1fr;gap:10px}.desk-header{align-items:flex-start;flex-direction:column}.desk-content{gap:12px}.desk-content .story-card{padding:19px}.article-overview{padding:15px;margin-left:-4px;margin-right:-4px}.weather-grid{grid-template-columns:1fr}.quake-row{grid-template-columns:58px 1fr 70px}.quake-row>*:last-child{display:none}.quake-row.header span:nth-child(4){display:none}footer{align-items:flex-start;flex-direction:column}footer p{text-align:left}.overview-copy{font-size:1rem;line-height:1.7}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}