/*
Theme Name: Skersvejis Signals
Theme URI: https://skersvejis.xyz
Author: Skersvejis
Description: A dark, live dashboard for small planetary and cosmic signals.
Version: 2.1.7
Text Domain: skersvejis-signals
*/

:root {
  color-scheme: dark;
  --ink: #e9f8f2;
  --muted: #81938e;
  --dim: #53635f;
  --surface: rgba(11, 19, 19, .86);
  --line: rgba(139, 255, 213, .13);
  --green: #7cffc4;
  --cyan: #6ee7ff;
  --violet: #b69cff;
  --amber: #ffcc66;
  --red: #ff6f78;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { background: #050808; scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(38, 139, 108, .15), transparent 34rem),
    radial-gradient(circle at 92% 14%, rgba(83, 69, 166, .14), transparent 30rem),
    #050808;
  font: 400 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .28;
  background-image:
    linear-gradient(rgba(124, 255, 196, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 255, 196, .035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 82%);
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.shell { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 78px;
  border-bottom: 1px solid var(--line);
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .18em;
  text-decoration: none;
}
.brand-mark {
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid var(--green);
  border-radius: 50%;
  box-shadow: inset 0 0 12px rgba(124,255,196,.2), 0 0 16px rgba(124,255,196,.12);
}
.brand-mark::before,
.brand-mark::after {
  position: absolute;
  background: var(--green);
  content: "";
}
.brand-mark::before { top: 3px; bottom: 3px; left: 11px; width: 1px; }
.brand-mark::after { top: 11px; right: 3px; left: 3px; height: 1px; }
.statusline { display: flex; align-items: center; gap: 22px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.status { display: flex; align-items: center; gap: 8px; }
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green);
  animation: breathe 2.4s ease-in-out infinite;
}
.status-dot.offline { background: var(--red); box-shadow: 0 0 12px var(--red); }

.hero {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  padding: 58px 0 48px;
  align-items: center;
}
.eyebrow {
  margin: 0;
  color: var(--green);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.intro {
  max-width: 450px;
  margin: 0;
  color: #a9b9b4;
  font: 400 15px/1.75 ui-sans-serif, system-ui, sans-serif;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 18px;
}
.section-head h2 { margin: 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; }
.refresh {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  border: 0;
  color: var(--muted);
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.refresh:hover { color: var(--green); }
.refresh svg { width: 14px; height: 14px; }
.refresh.loading svg { animation: spin 1s linear infinite; }

.metrics {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.metric {
  --accent: var(--green);
  position: relative;
  display: flex;
  grid-column: span 3;
  min-height: 270px;
  padding: 24px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(145deg, rgba(17, 28, 27, .93), rgba(7, 12, 12, .94));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: border-color .2s ease, transform .2s ease;
}
.metric:hover { border-color: color-mix(in srgb, var(--accent) 32%, transparent); transform: translateY(-2px); }
.metric::after {
  position: absolute;
  right: -60px;
  bottom: -70px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--accent);
  content: "";
  filter: blur(95px);
  opacity: .065;
}
.metric[data-metric="radiation"], .metric[data-metric="schumann"] { grid-column: span 6; }
.metric[data-accent="cyan"] { --accent: var(--cyan); }
.metric[data-accent="violet"] { --accent: var(--violet); }
.metric[data-accent="amber"] { --accent: var(--amber); }
.metric[data-accent="red"] { --accent: var(--red); }
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.metric-label { color: var(--muted); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.metric-state {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: 99px;
  color: var(--accent);
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.metric-reading { display: flex; align-items: baseline; gap: 9px; margin: 29px 0 6px; }
.metric-value { color: var(--accent); font: 500 clamp(38px, 5vw, 59px)/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.055em; }
.metric-unit { color: var(--muted); font-size: 12px; }
.metric-detail { min-height: 48px; margin: 4px 0 18px; color: #b4c4bf; font: 400 13px/1.5 ui-sans-serif, system-ui, sans-serif; }
.sparkline { width: 100%; height: 42px; margin: auto 0 17px; overflow: visible; }
.sparkline path { fill: none; stroke: var(--accent); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.sparkline .fill { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: none; }
.metric-foot { display: flex; justify-content: space-between; gap: 10px; color: var(--dim); font-size: 9px; letter-spacing: .07em; text-transform: uppercase; }
.metric-source { color: var(--muted); text-decoration: none; }
.metric-source:hover { color: var(--accent); }
.skeleton { display: inline-block; width: 90px; height: .82em; border-radius: 4px; background: linear-gradient(90deg, #17211f, #22302d, #17211f); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

.gcp-live-panel {
  --accent: var(--amber);
  grid-column: 1 / -1;
  min-height: 0;
}
.gcp-map-shell {
  position: relative;
  height: 500px;
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #17201c;
}
.gcp-map-shell #gcp-map {
  width: 100%;
  height: 100%;
}
.gcp-map-readout {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  padding: 7px 10px;
  border: 1px solid rgba(237, 193, 113, .7);
  border-radius: 2px;
  color: #f0dfbc;
  background: rgba(23, 19, 15, .88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.gcp-map-shell .maplibregl-ctrl-group {
  border: 1px solid #8d6a3e;
  border-radius: 2px;
  background: #ead9b8;
}
.gcp-map-shell .maplibregl-popup-content {
  padding: 8px 11px;
  color: #302318;
  background: #f0dfbc;
  font: 12px/1.4 'Courier New', monospace;
}
.gcp-map-shell .maplibregl-popup-tip { border-top-color: #f0dfbc; }
.gcp-map-shell .maplibregl-ctrl-attrib {
  color: #3b3024;
  font-size: 9px;
}
.gcp-coherence-key {
  margin: 0 0 18px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  scrollbar-color: #9b7742 #211a12;
  scrollbar-width: thin;
}
.gcp-coherence-key img {
  display: block;
  width: 100%;
  min-width: 720px;
  height: auto;
}
.gcp-coherence-panel {
  --accent: var(--violet);
  grid-column: 1 / -1;
  min-height: 0;
}
.gcp-gauge-shell {
  display: flex;
  justify-content: center;
  margin: 18px 0 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: radial-gradient(ellipse at 50% 90%, #44335e, #101225 68%);
}
#gcp-coherence-gauge {
  display: block;
  width: min(100%, 760px);
  height: auto;
}
#gcp-gauge-bands path {
  fill: none;
  stroke-width: 44;
  stroke-linecap: butt;
  opacity: .92;
}
#gcp-gauge-labels text {
  fill: #f0dfbc;
  font: 600 12px/1 'Courier New', monospace;
  letter-spacing: .06em;
  text-anchor: middle;
  text-transform: uppercase;
}
#gcp-gauge-needle {
  stroke: #f7ead0;
  stroke-width: 5;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .75));
  transition: x2 .7s ease, y2 .7s ease;
}
.gcp-gauge-hub {
  fill: #261c2f;
  stroke: #edc171;
  stroke-width: 5;
}
.gcp-gauge-value {
  fill: #fff3d6;
  font: 500 46px/1 Georgia, serif;
}
.gcp-explainer-link {
  align-self: center;
  margin: 10px 0 20px;
  color: #d9bd87;
  font-size: 10px;
  letter-spacing: .08em;
  text-align: center;
  text-underline-offset: 4px;
  text-transform: uppercase;
}
.gcp-explainer-link:hover { color: #fff0cd; }
.bom-tec-panel {
  --accent: var(--cyan);
  grid-column: 1 / -1;
  min-height: 0;
}
.bom-tec-map {
  display: block;
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}
.bom-tec-map img {
  display: block;
  width: 100%;
  height: auto;
}
.oulu-monitor-panel {
  --accent: var(--violet);
  grid-column: 1 / -1;
  min-height: 0;
}
.oulu-monitor-chart {
  display: flex;
  justify-content: center;
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}
.oulu-monitor-chart img {
  display: block;
  width: min(100%, 760px);
  height: auto;
}
.astrowin-panel {
  --accent: var(--amber);
  grid-column: 1 / -1;
  min-height: 0;
  scroll-margin-top: 18px;
}
.astrowin-frame-shell {
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
}
.astrowin-frame {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  background: #fff;
}

.metric[data-metric="radiation"] {
  --needle-angle: -160deg;
  border-color: rgba(124, 255, 196, .22);
  background:
    linear-gradient(135deg, rgba(255,255,255,.035), transparent 18%),
    linear-gradient(145deg, #17201c, #0a100e 72%);
  box-shadow:
    inset 0 0 0 3px #090d0b,
    inset 0 0 0 4px rgba(124,255,196,.08),
    inset 0 1px rgba(255,255,255,.08);
}
.metric[data-metric="radiation"]::before {
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(124,255,196,.08);
  border-radius: 12px;
  content: "";
  pointer-events: none;
}
.metric[data-metric="radiation"] .metric-reading { margin-top: 19px; }
.metric[data-metric="radiation"] .metric-detail { min-height: auto; margin-bottom: 12px; }
.geiger-console {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 86px;
  gap: 16px;
  align-items: stretch;
  min-height: 104px;
  margin: auto 0 17px;
}
.geiger-dial {
  position: relative;
  min-height: 104px;
  overflow: hidden;
  border: 1px solid #303b35;
  border-radius: 8px;
  background:
    repeating-conic-gradient(from 290deg at 50% 92%, rgba(217,231,221,.72) 0deg .7deg, transparent .8deg 7deg),
    radial-gradient(ellipse at 50% 92%, transparent 0 52%, #090c0a 52.5% 60%, transparent 60.5%),
    linear-gradient(#0b0e0c, #050605);
  box-shadow: inset 0 0 18px #000, 0 1px rgba(255,255,255,.04);
}
.geiger-dial::after {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.035);
  border-radius: 5px;
  content: "";
}
.gauge-number {
  position: absolute;
  z-index: 2;
  color: #76847c;
  font-size: 7px;
  line-height: 1;
}
.gauge-zero { bottom: 17px; left: 12px; }
.gauge-fifty { top: 26px; left: 25%; }
.gauge-hundred { top: 14px; left: 50%; transform: translateX(-50%); }
.gauge-max { top: 26px; right: 18px; }
.gauge-caption {
  position: absolute;
  top: 47px;
  left: 50%;
  z-index: 2;
  color: #46534d;
  font-size: 6px;
  letter-spacing: .17em;
  transform: translateX(-50%);
  white-space: nowrap;
}
.geiger-needle {
  position: absolute;
  bottom: 8px;
  left: 50%;
  z-index: 3;
  width: 44%;
  height: 1px;
  background: var(--red);
  box-shadow: 0 0 5px rgba(255,111,120,.55);
  transform: rotate(var(--needle-angle));
  transform-origin: 0 50%;
  transition: transform 900ms cubic-bezier(.2,.8,.25,1);
}
.geiger-hub {
  position: absolute;
  bottom: 3px;
  left: 50%;
  z-index: 4;
  width: 11px;
  height: 11px;
  border: 2px solid #83948b;
  border-radius: 50%;
  background: #111814;
  box-shadow: 0 1px 4px #000;
  transform: translateX(-50%);
}
.geiger-hardware {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 9px;
  flex-direction: column;
  border: 1px solid #303b35;
  border-radius: 8px;
  background: linear-gradient(145deg, #111814, #090d0b);
  box-shadow: inset 0 0 12px #050706;
}
.geiger-lamp {
  display: flex;
  gap: 6px;
  align-items: center;
  color: #5f6d66;
  font-size: 6px;
  letter-spacing: .14em;
}
.geiger-lamp i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: geiger-click 1.7s steps(1) infinite;
}
.geiger-speaker {
  width: 54px;
  height: 43px;
  opacity: .65;
  background-image: radial-gradient(circle, #536159 0 1px, transparent 1.4px);
  background-size: 7px 7px;
}
.geiger-model { color: #3f4a44; font-size: 6px; letter-spacing: .2em; }

.metric[data-metric="schumann"] {
  --accent: #89ff74;
  border-color: rgba(154, 182, 96, .3);
  background:
    linear-gradient(135deg, rgba(255,255,255,.05), transparent 16%),
    linear-gradient(145deg, #283023, #12170f 72%);
  box-shadow:
    inset 0 0 0 3px #0c100a,
    inset 0 0 0 4px rgba(180,204,125,.09),
    inset 0 1px rgba(255,255,255,.09);
}
.metric[data-metric="schumann"]::before {
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(180,204,125,.1);
  border-radius: 12px;
  content: "";
  pointer-events: none;
}
.metric[data-metric="schumann"] .metric-label { color: #99a88c; }
.metric[data-metric="schumann"] .metric-reading { margin-top: 19px; }
.metric[data-metric="schumann"] .metric-detail { min-height: auto; margin-bottom: 12px; }
.metric[data-metric="schumann"] .metric-state { color: #98ff86; border-color: rgba(137,255,116,.3); }
.metric[data-metric="schumann"] .metric-state:not(:empty) { text-shadow: 0 0 7px rgba(137,255,116,.45); }
.crt-console {
  display: grid;
  grid-template-columns: minmax(205px, 1fr) 77px;
  gap: 12px;
  align-items: stretch;
  min-height: 104px;
  margin: auto 0 17px;
  padding: 6px;
  border: 1px solid #0a0d08;
  border-radius: 7px;
  background: #414a32;
  box-shadow:
    inset 0 1px rgba(255,255,255,.12),
    inset 0 -1px rgba(0,0,0,.6),
    0 2px 6px rgba(0,0,0,.45);
}
.crt-bezel {
  position: relative;
  min-height: 98px;
  padding: 7px 9px;
  border-radius: 5px;
  background: linear-gradient(145deg, #22291b, #0d110b);
  box-shadow: inset 0 0 0 1px #070906, 0 1px rgba(255,255,255,.08);
}
.crt-screw {
  position: absolute;
  z-index: 4;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #74805d;
  box-shadow: inset 1px 0 #22271c;
}
.screw-tl { top: 4px; left: 4px; }
.screw-tr { top: 4px; right: 4px; }
.screw-bl { bottom: 4px; left: 4px; }
.screw-br { right: 4px; bottom: 4px; }
.crt-screen {
  position: relative;
  height: 84px;
  overflow: hidden;
  border: 1px solid #1b3a1c;
  border-radius: 17px / 10px;
  background:
    repeating-linear-gradient(0deg, rgba(130,255,111,.05) 0 1px, transparent 1px 3px),
    linear-gradient(rgba(73,255,72,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(73,255,72,.055) 1px, transparent 1px),
    radial-gradient(ellipse at center, #102c12 0, #071408 75%, #030804 100%);
  background-size: auto, 100% 16px, 24px 100%, auto;
  box-shadow:
    inset 0 0 20px #010401,
    inset 0 0 7px rgba(117,255,100,.18),
    0 0 5px rgba(82,255,75,.08);
}
.crt-screen::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255,255,255,.055), transparent 24%);
  content: "";
  pointer-events: none;
}
.crt-channel,
.crt-range {
  position: absolute;
  z-index: 3;
  color: rgba(137,255,116,.55);
  font-size: 5px;
  letter-spacing: .13em;
  text-shadow: 0 0 5px rgba(137,255,116,.55);
}
.crt-channel { top: 7px; left: 12px; }
.crt-range { right: 11px; bottom: 5px; left: 11px; display: flex; justify-content: space-between; }
.crt-range b { font-weight: 400; letter-spacing: .16em; }
.crt-screen .sparkline {
  position: absolute;
  inset: 13px 8px 8px;
  z-index: 2;
  width: calc(100% - 16px);
  height: 62px;
  margin: 0;
  filter: drop-shadow(0 0 3px rgba(137,255,116,.65));
}
.crt-screen .sparkline path { stroke: #89ff74; stroke-width: 1.25; }
.crt-screen .sparkline .fill { fill: rgba(92,255,78,.07); stroke: none; }
.crt-controls {
  display: flex;
  align-items: center;
  padding: 7px 5px;
  flex-direction: column;
  border-left: 1px solid rgba(0,0,0,.45);
  color: #171c12;
}
.crt-plate {
  width: 100%;
  padding: 4px 2px;
  border: 1px solid rgba(16,20,12,.55);
  color: #1a2014;
  font-size: 5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .13em;
  text-align: center;
}
.crt-led {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 9px 0 auto;
  font-size: 5px;
  letter-spacing: .1em;
}
.crt-led i {
  width: 6px;
  height: 6px;
  border: 1px solid #152211;
  border-radius: 50%;
  background: #89ff74;
  box-shadow: 0 0 8px #68ff56;
  animation: crt-flicker 3.2s linear infinite;
}
.crt-knob {
  position: relative;
  width: 27px;
  height: 27px;
  border: 2px solid #171b12;
  border-radius: 50%;
  background: repeating-conic-gradient(#1b2116 0 8deg, #596344 8deg 13deg);
  box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.crt-knob::after {
  position: absolute;
  top: 3px;
  left: 50%;
  width: 1px;
  height: 8px;
  background: #a4b484;
  content: "";
  transform: rotate(28deg);
  transform-origin: 0 10px;
}
.crt-knob-label { margin-top: 3px; font-size: 5px; letter-spacing: .13em; }

.metric[data-metric="solar_wind"] {
  --speed-angle: -160deg;
  border-color: rgba(110,231,255,.19);
  background:
    linear-gradient(145deg, rgba(39,143,165,.075), transparent 48%),
    rgba(7, 15, 16, .93);
}
.metric[data-metric="solar_wind"] .metric-reading { margin-top: 19px; }
.metric[data-metric="solar_wind"] .metric-detail { min-height: auto; margin-bottom: 7px; }
.wind-speedometer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 105px;
  margin: auto 0 12px;
  overflow: hidden;
  border: 1px solid rgba(110,231,255,.13);
  border-radius: 8px;
  background:
    linear-gradient(rgba(110,231,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,231,255,.03) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 100%, rgba(21,108,126,.15), transparent 65%),
    #050a0b;
  background-size: 14px 14px, 14px 14px, auto, auto;
  box-shadow: inset 0 0 18px #020606;
}
.speedo-dial {
  position: relative;
  width: min(100%, 205px);
  height: 105px;
}
.speedo-dial svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.speedo-track,
.speedo-safe,
.speedo-fast {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.speedo-track { stroke: rgba(110,231,255,.12); stroke-width: 8; }
.speedo-safe { stroke: var(--cyan); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(110,231,255,.5)); }
.speedo-fast { stroke: var(--amber); stroke-width: 2; filter: drop-shadow(0 0 3px rgba(255,204,102,.45)); }
.speedo-ticks { fill: none; stroke: rgba(207,247,255,.6); stroke-width: 1; vector-effect: non-scaling-stroke; }
.speedo-numbers { fill: rgba(160,202,209,.62); font: 7px ui-monospace, monospace; }
.speedo-needle {
  position: absolute;
  bottom: 13px;
  left: 50%;
  z-index: 2;
  width: 43%;
  height: 2px;
  border-radius: 2px;
  background: #f4fbff;
  box-shadow: 0 0 6px var(--cyan);
  transform: rotate(var(--speed-angle));
  transform-origin: 0 50%;
  transition: transform 1.1s cubic-bezier(.2,.8,.24,1);
}
.speedo-hub {
  position: absolute;
  bottom: 8px;
  left: 50%;
  z-index: 3;
  width: 12px;
  height: 12px;
  border: 2px solid #91dbea;
  border-radius: 50%;
  background: #071113;
  box-shadow: 0 0 7px rgba(110,231,255,.55);
  transform: translateX(-50%);
}
.speedo-caption {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  color: rgba(110,231,255,.42);
  font-size: 5px;
  letter-spacing: .16em;
  text-align: center;
}

.market-section { margin-top: 64px; }
.market-currency {
  color: var(--dim);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.metal-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.metal-card {
  --accent: var(--green);
  position: relative;
  display: flex;
  min-height: 236px;
  padding: 19px;
  overflow: hidden;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 3%, transparent), transparent 44%),
    rgba(8, 14, 14, .92);
}
.metal-card[data-accent="cyan"] { --accent: var(--cyan); }
.metal-card[data-accent="violet"] { --accent: var(--violet); }
.metal-card[data-accent="amber"] { --accent: var(--amber); }
.metal-card[data-accent="red"] { --accent: var(--red); }
.metal-mark {
  position: absolute;
  top: 23px;
  right: 13px;
  color: var(--accent);
  font: 500 50px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.08em;
  opacity: .055;
}
.metal-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metal-name { color: var(--muted); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.metal-state {
  color: var(--accent);
  font-size: 7px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.metal-reading { margin-top: 27px; }
.metal-price {
  color: var(--accent);
  font: 500 clamp(25px, 2.8vw, 38px)/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.045em;
}
.metal-price::before { content: "$"; margin-right: 2px; font-size: .55em; vertical-align: .55em; opacity: .68; }
.metal-unit { margin-top: 7px; color: var(--dim); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.metal-change { margin-top: 10px; color: var(--muted); font-size: 9px; }
.metal-change.up { color: var(--green); }
.metal-change.down { color: var(--red); }
.metal-card .sparkline { height: 34px; margin: auto 0 13px; }
.metal-card .metric-foot { font-size: 7px; }
.metal-source { color: var(--muted); text-decoration: none; }
.metal-source:hover { color: var(--accent); }

.small-signals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 64px 0 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tiny { padding: 23px 18px; border-right: 1px solid var(--line); }
.tiny:first-child { padding-left: 0; }
.tiny:last-child { border-right: 0; }
.tiny-label { display: block; margin-bottom: 8px; color: var(--dim); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.tiny-value { color: #b8cac4; font-size: 13px; }
.moon-reading { display: flex; align-items: center; gap: 13px; margin-top: -2px; }
.moon-image {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: #050807;
  box-shadow:
    0 0 0 1px rgba(185, 211, 201, .12),
    0 0 18px rgba(190, 220, 210, .08);
}
.tiny-moon { padding-top: 16px; padding-bottom: 16px; }
.tiny-moon .tiny-label { margin-bottom: 2px; }

.footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 0 44px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@keyframes breathe { 50% { opacity: .45; transform: scale(.76); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes geiger-click {
  0%, 7%, 21%, 24%, 58%, 61%, 100% { opacity: .22; }
  8%, 20%, 25%, 57%, 62%, 99% { opacity: 1; }
}
@keyframes crt-flicker {
  0%, 18%, 20%, 64%, 66%, 100% { opacity: 1; }
  19%, 65% { opacity: .35; }
}

@media (max-width: 860px) {
  .hero { gap: 28px; }
  .metric, .metric[data-metric="radiation"], .metric[data-metric="schumann"] { grid-column: span 6; }
  .metal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .small-signals { grid-template-columns: 1fr 1fr; }
  .tiny:nth-child(2) { border-right: 0; }
  .tiny:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 580px) {
  .shell { width: min(100% - 24px, 1180px); }
  .topbar { min-height: 64px; }
  .brand { font-size: 11px; letter-spacing: .12em; }
  .statusline .sync-label { display: none; }
  .hero { align-items: flex-start; flex-direction: column; padding: 40px 0 38px; }
  .metrics { gap: 10px; }
  .metric, .metric[data-metric="radiation"], .metric[data-metric="schumann"] { grid-column: span 12; min-height: 246px; padding: 21px; }
  .gcp-live-panel { grid-column: 1 / -1; min-height: 0; }
  .gcp-coherence-panel { grid-column: 1 / -1; min-height: 0; }
  .bom-tec-panel { grid-column: 1 / -1; min-height: 0; }
  .oulu-monitor-panel { grid-column: 1 / -1; min-height: 0; }
  .astrowin-panel { grid-column: 1 / -1; min-height: 0; }
  .astrowin-frame { height: 520px; }
  .gcp-map-shell { height: 420px; }
  .gcp-map-readout { right: 8px; bottom: 22px; max-width: calc(100% - 16px); }
  #gcp-gauge-labels text { font-size: 10px; }
  .gcp-gauge-value { font-size: 40px; }
  .geiger-console { grid-template-columns: minmax(170px, 1fr) 76px; }
  .crt-console { grid-template-columns: minmax(175px, 1fr) 70px; }
  .market-section { margin-top: 48px; }
  .metal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metal-card { min-height: 218px; padding: 16px; }
  .metal-price { font-size: clamp(24px, 8vw, 34px); }
  .small-signals { margin-top: 48px; }
  .tiny { padding: 18px 12px; }
  .tiny:first-child { padding-left: 12px; }
  .tiny-value { font-size: 11px; }
  .moon-reading { gap: 9px; }
  .moon-image { width: 38px; height: 38px; flex-basis: 38px; }
  .footer { flex-direction: column; }
}

@media (max-width: 380px) {
   .metal-grid { grid-template-columns: 1fr; }
}

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