:root {
  color-scheme: dark;
  --color-bg: #06100e;
  --color-bg-deep: #030907;
  --color-surface: rgba(13, 29, 25, 0.78);
  --color-surface-strong: rgba(16, 36, 31, 0.92);
  --color-surface-soft: rgba(17, 40, 34, 0.5);
  --color-border: rgba(156, 255, 219, 0.12);
  --color-border-strong: rgba(156, 255, 219, 0.22);
  --color-text: #f0f8f5;
  --color-text-muted: #8ca59c;
  --color-text-soft: #b7c9c2;
  --color-mint: #42f5b3;
  --color-mint-soft: #a1ffdc;
  --color-cyan: #68d9ff;
  --color-violet: #a58cff;
  --color-amber: #ffc96b;
  --color-danger: #ff7c91;
  --color-danger-soft: #ffd4db;
  --color-danger-border: rgba(255, 124, 145, 0.25);
  --color-danger-surface: rgba(255, 124, 145, 0.045);
  --color-mint-glow: rgba(66, 245, 179, 0.35);
  --color-mint-glow-strong: rgba(66, 245, 179, 0.55);
  --color-mint-glow-soft: rgba(66, 245, 179, 0.3);
  --color-mint-surface: rgba(66, 245, 179, 0.045);
  --color-mint-hover: rgba(66, 245, 179, 0.07);
  --color-mint-nav: rgba(149, 255, 217, 0.1);
  --color-mint-orbit: rgba(137, 255, 213, 0.055);
  --color-cyan-surface: rgba(104, 217, 255, 0.11);
  --color-white-025: rgba(255, 255, 255, 0.025);
  --color-white-055: rgba(255, 255, 255, 0.055);
  --color-white-060: rgba(255, 255, 255, 0.06);
  --color-panel-top: rgba(21, 44, 38, 0.82);
  --color-panel-bottom: rgba(8, 22, 19, 0.78);
  --chart-color-1: var(--color-mint);
  --chart-color-2: var(--color-cyan);
  --chart-color-3: var(--color-violet);
  --chart-grid-color: rgba(208, 255, 238, 0.08);
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-size-xs: 0.72rem;
  --font-size-sm: 0.84rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.18rem;
  --font-size-xl: clamp(1.45rem, 2vw, 2.15rem);
  --font-size-2xl: 2rem;
  --font-size-display: clamp(2.7rem, 6vw, 6rem);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.85rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;
  --shadow-panel: 0 1.5rem 5rem rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.025);
  --shadow-focus: 0 0 0 3px rgba(66, 245, 179, 0.28);
  --duration-fast: 160ms;
  --duration-normal: 320ms;
  --ease-out: cubic-bezier(0.2, 0.72, 0.2, 1);
  --z-atmosphere: -1;
  --z-header: 20;
  --container: 90rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-bg-deep); }
body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(8, 27, 23, 0.2), transparent 28rem),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
:focus { outline: 2px solid var(--color-mint); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
.skip-link { position: fixed; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); z-index: 100; transform: translateY(-200%); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--color-mint); color: var(--color-bg-deep); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }

.atmosphere { position: fixed; inset: 0; z-index: var(--z-atmosphere); overflow: hidden; pointer-events: none; }
.atmosphere::after { content: ""; position: absolute; inset: 0; opacity: 0.19; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.orb { position: absolute; display: block; border-radius: 50%; filter: blur(6rem); opacity: 0.15; animation: drift 16s ease-in-out infinite alternate; }
.orb-a { width: 36rem; height: 36rem; inset-block-start: -12rem; inset-inline-end: -7rem; background: var(--color-mint); }
.orb-b { width: 28rem; height: 28rem; inset-block-start: 38rem; inset-inline-start: -12rem; background: var(--color-violet); animation-delay: -7s; }
.grid-glow { position: absolute; width: 70rem; height: 46rem; inset-block-start: 10rem; inset-inline-start: 50%; transform: translateX(-50%) perspective(42rem) rotateX(62deg); transform-origin: center top; background-image: linear-gradient(var(--chart-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--chart-grid-color) 1px, transparent 1px); background-size: 3rem 3rem; mask-image: linear-gradient(to bottom, black, transparent 80%); opacity: 0.42; }

.topbar { position: sticky; inset-block-start: 0; z-index: var(--z-header); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); min-height: 4.75rem; padding-inline: clamp(var(--space-4), 4vw, var(--space-10)); border-block-end: 1px solid var(--color-border); background: rgba(4, 14, 12, 0.76); backdrop-filter: blur(1.5rem) saturate(130%); }
.brand { display: inline-flex; align-items: center; gap: var(--space-3); width: max-content; text-decoration: none; }
.brand > span:last-child { display: grid; gap: 0.1rem; }
.brand strong { font-size: var(--font-size-sm); letter-spacing: -0.01em; }
.brand small { color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.16em; }
.brand-mark { display: grid; gap: 0.2rem; width: 1.6rem; transform: skewX(-12deg); }
.brand-mark span { height: 0.22rem; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-mint), var(--color-cyan)); box-shadow: 0 0 1rem var(--color-mint-glow); }
.brand-mark span:nth-child(2) { transform: translateX(-0.3rem); }
.view-nav { display: flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-white-025); }
.view-nav ul, .view-nav li { display: contents; margin: 0; padding: 0; list-style: none; }
.nav-chip, .segmented button { border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted); cursor: pointer; transition: color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); }
.nav-chip { padding: 0.55rem var(--space-4); font-size: var(--font-size-xs); font-weight: 700; }
.nav-chip:hover, .nav-chip.is-active { background: var(--color-mint-nav); color: var(--color-text); }
.nav-chip:active, .icon-button:active { transform: scale(0.96); }
.top-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-3); }
.live-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.25rem; padding-inline: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-mint-surface); color: var(--color-text-soft); font-family: var(--font-mono); font-size: var(--font-size-xs); }
.live-pill i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--color-mint); box-shadow: 0 0 0 0.25rem rgba(66, 245, 179, 0.08), 0 0 1rem var(--color-mint); animation: pulse 2.4s infinite; }
.icon-button { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-surface-soft); color: var(--color-text-soft); cursor: pointer; transition: border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast); }
.icon-button:hover { border-color: var(--color-border-strong); color: var(--color-mint-soft); }
.icon-button svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.is-loading svg { animation: spin 0.85s linear infinite; }

.shell { width: min(var(--container), calc(100% - clamp(2rem, 8vw, 7rem))); margin-inline: auto; }
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr); align-items: center; gap: clamp(var(--space-8), 7vw, 8rem); min-height: 38rem; padding-block: clamp(var(--space-12), 9vw, 8rem); }
.eyebrow, .kicker { margin: 0; color: var(--color-mint-soft); font-family: var(--font-mono); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: var(--space-2); }
.eyebrow > span { width: 1.8rem; height: 1px; background: linear-gradient(90deg, var(--color-mint), transparent); }
h1 { max-width: 12ch; margin: var(--space-5) 0 var(--space-6); font-size: var(--font-size-display); font-weight: 640; letter-spacing: -0.065em; line-height: 0.94; text-wrap: balance; }
.hero-intro { max-width: 43rem; margin: 0; color: var(--color-text-soft); font-size: clamp(var(--font-size-base), 1.6vw, var(--font-size-lg)); line-height: 1.75; }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); margin-block-start: var(--space-8); padding-block-start: var(--space-5); border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-xs); }
.hero-meta strong { color: var(--color-text-soft); font-weight: 600; }
.health-orbit { position: relative; display: grid; justify-items: center; align-content: center; min-height: 23rem; margin: 0; }
.orbit-ring { position: absolute; width: min(21rem, 90%); aspect-ratio: 1; border: 1px solid var(--color-border); border-radius: 50%; box-shadow: inset 0 0 6rem rgba(66, 245, 179, 0.035), 0 0 6rem rgba(66, 245, 179, 0.035); animation: slow-spin 30s linear infinite; }
.orbit-ring::before, .orbit-ring::after { content: ""; position: absolute; inset: 12%; border: 1px dashed rgba(137, 255, 213, 0.11); border-radius: 50%; }
.orbit-ring::after { inset: -8%; border-style: solid; border-color: var(--color-mint-orbit); }
.orbit-ring i { position: absolute; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--color-mint); box-shadow: 0 0 1rem var(--color-mint); }
.orbit-ring i:nth-child(1) { inset-block-start: 12%; inset-inline-start: 18%; }
.orbit-ring i:nth-child(2) { inset-block-end: 7%; inset-inline-end: 28%; background: var(--color-cyan); }
.orbit-ring i:nth-child(3) { inset-block-start: 45%; inset-inline-end: -0.2rem; background: var(--color-violet); }
.score-dial { position: relative; display: grid; place-items: center; width: 12rem; aspect-ratio: 1; }
.score-dial svg { width: 100%; transform: rotate(-90deg); }
.score-dial circle { fill: none; stroke-width: 6; }
.dial-track { stroke: var(--color-white-060); }
.dial-value { stroke: var(--color-mint); stroke-linecap: round; stroke-dasharray: 452.39; stroke-dashoffset: 452.39; filter: drop-shadow(0 0 0.5rem var(--color-mint-glow-strong)); transition: stroke-dashoffset 1.1s var(--ease-out); }
.score-copy { position: absolute; display: flex; align-items: baseline; gap: 0.15rem; }
.score-copy span { font-size: 3.1rem; font-weight: 640; letter-spacing: -0.07em; }
.score-copy small { color: var(--color-text-muted); font-family: var(--font-mono); }
.health-caption { display: grid; justify-items: center; gap: var(--space-1); margin-block-start: var(--space-2); }
.health-caption span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.health-caption strong { color: var(--color-mint-soft); font-size: var(--font-size-xl); font-weight: 590; text-transform: capitalize; }
.health-caption small { margin-block-start: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }

.signal-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-block-end: var(--space-12); }
.signal-card, .panel, .metric-card, .source-card { position: relative; overflow: hidden; border: 1px solid var(--color-border); background: linear-gradient(145deg, var(--color-panel-top), var(--color-panel-bottom)); box-shadow: var(--shadow-panel); }
.signal-card { min-height: 10.5rem; padding: var(--space-5); border-radius: var(--radius-lg); }
.signal-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent, var(--color-mint)), transparent); opacity: 0.65; }
.accent-mint { --accent: var(--color-mint); }.accent-cyan { --accent: var(--color-cyan); }.accent-violet { --accent: var(--color-violet); }.accent-amber { --accent: var(--color-amber); }
.signal-head { display: flex; justify-content: space-between; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.signal-head span { font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.signal-head i { font-family: var(--font-mono); font-style: normal; }
.signal-card > strong { display: block; margin-block-start: var(--space-5); font-size: clamp(1.65rem, 3vw, 2.4rem); font-weight: 590; letter-spacing: -0.05em; }
.signal-card > small { color: var(--color-text-muted); }
.micro-track { position: absolute; inset-inline: var(--space-5); inset-block-end: var(--space-4); height: 0.18rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-white-060); }
.micro-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); box-shadow: 0 0 0.8rem var(--accent); transition: width 1s var(--ease-out); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.75fr); gap: var(--space-4); margin-block: var(--space-4) var(--space-16); }
.panel { padding: clamp(var(--space-5), 3vw, var(--space-8)); border-radius: var(--radius-xl); }
.panel-heading, .section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); }
.panel-heading h2, .section-heading h2 { margin: var(--space-2) 0 0; font-size: var(--font-size-xl); font-weight: 580; letter-spacing: -0.035em; }
.kicker { color: var(--color-text-muted); }
.segmented { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-pill); }
.segmented button { padding: 0.48rem var(--space-3); font-size: var(--font-size-xs); }
.segmented button:hover, .segmented button.is-active { background: var(--color-cyan-surface); color: var(--color-text); }
.chart-summary { display: flex; align-items: baseline; gap: var(--space-3); margin-block: var(--space-8) var(--space-3); }
.chart-summary strong { font-size: var(--font-size-2xl); font-weight: 580; letter-spacing: -0.045em; }
.chart-summary span { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-xs); }
.line-chart { min-height: 15rem; }
.line-chart svg { display: block; width: 100%; height: 15rem; overflow: visible; }
.line-chart .grid-line { stroke: var(--chart-grid-color); stroke-width: 1; }
.line-chart .area { fill: url(#chartGradient); }
.line-chart .line { fill: none; stroke: var(--chart-color-1); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 0.4rem var(--color-mint-glow-soft)); }
.line-chart .point { fill: var(--color-bg); stroke: var(--chart-color-1); stroke-width: 2; opacity: 0; transition: opacity var(--duration-fast); }
.line-chart svg:hover .point { opacity: 1; }
.line-chart .empty-chart { fill: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.8rem; text-anchor: middle; }
.chart-axis { display: flex; justify-content: space-between; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 0.65rem; }
.data-alternative { margin-block-start: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.data-alternative summary { cursor: pointer; }
.data-alternative table { width: 100%; margin-block-start: var(--space-3); border-collapse: collapse; }
.data-alternative td, .data-alternative th { padding: var(--space-2); border-block-end: 1px solid var(--color-border); text-align: start; }
.count-badge, .text-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding-inline: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-soft); font-family: var(--font-mono); font-size: var(--font-size-xs); }
.count-badge { min-width: 2rem; padding: 0; }
.anomaly-list { display: grid; gap: var(--space-3); margin-block-start: var(--space-8); }
.anomaly-item { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white-025); }
.anomaly-item header { display: flex; justify-content: space-between; gap: var(--space-3); }
.anomaly-item strong { font-size: var(--font-size-sm); }
.anomaly-item span { color: var(--color-amber); font-family: var(--font-mono); font-size: var(--font-size-xs); }
.anomaly-item.critical span { color: var(--color-danger); }
.anomaly-item p { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.55; }
.empty-state { display: grid; place-items: center; min-height: 11rem; padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); text-align: center; }
.empty-state i { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: radial-gradient(circle, rgba(66, 245, 179, 0.2), transparent 70%); box-shadow: inset 0 0 0 1px rgba(66, 245, 179, 0.25); }
.empty-state strong { margin-block-start: var(--space-3); font-size: var(--font-size-sm); }
.empty-state small { margin-block-start: var(--space-1); color: var(--color-text-muted); }
.panel-note { margin: var(--space-5) 0 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.6; }

.section-block, .source-section { margin-block: var(--space-16); padding-block: var(--space-12); border-block: 1px solid var(--color-border); }
.section-heading { align-items: flex-end; margin-block-end: var(--space-8); }
.section-heading > p { max-width: 31rem; margin: 0; color: var(--color-text-muted); line-height: 1.6; }
.economics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.metric-card { min-height: 12.5rem; padding: var(--space-6); border-radius: var(--radius-lg); }
.metric-card > span { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.metric-card > strong { display: block; margin-block-start: var(--space-8); font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 580; letter-spacing: -0.05em; }
.metric-card > em { display: inline-block; margin-block-start: var(--space-2); color: var(--color-mint-soft); font-family: var(--font-mono); font-size: var(--font-size-xs); font-style: normal; }
.metric-card > em.negative { color: var(--color-danger); }
.metric-card > small { position: absolute; inset-inline-start: var(--space-6); inset-block-end: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.primary-metric { background: radial-gradient(circle at 100% 0, rgba(66, 245, 179, 0.12), transparent 55%), linear-gradient(145deg, rgba(21, 44, 38, 0.9), rgba(8, 22, 19, 0.78)); }
.validator-section { margin-block-start: var(--space-16); }
.validator-bars, .health-components { display: grid; gap: var(--space-4); margin-block-start: var(--space-8); }
.validator-row { display: grid; grid-template-columns: minmax(7rem, 0.8fr) minmax(10rem, 2fr) auto; align-items: center; gap: var(--space-4); }
.validator-id { min-width: 0; color: var(--color-text-soft); font-family: var(--font-mono); font-size: var(--font-size-xs); overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 0.48rem; border-radius: var(--radius-pill); background: var(--color-white-055); overflow: hidden; }
.bar-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-violet), var(--color-mint)); box-shadow: 0 0 0.9rem rgba(66, 245, 179, 0.28); transition: width 0.9s var(--ease-out); }
.validator-value { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-xs); text-align: end; }
.component-row { display: grid; gap: var(--space-2); }
.component-row header { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--color-text-soft); font-size: var(--font-size-xs); }
.component-row header span:last-child { font-family: var(--font-mono); }
.component-row .bar-track i { background: linear-gradient(90deg, var(--color-cyan), var(--color-mint)); }

.source-section { border-block-end: 0; }
.export-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.export-actions a { padding: 0.58rem var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-soft); font-size: var(--font-size-xs); font-weight: 700; text-decoration: none; transition: border-color var(--duration-fast), background var(--duration-fast); }
.export-actions a:hover { border-color: var(--color-border-strong); background: var(--color-mint-hover); }
.source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.source-card { padding: var(--space-5); border-radius: var(--radius-lg); }
.source-card header { display: flex; justify-content: space-between; gap: var(--space-3); }
.source-card a { font-weight: 700; text-decoration-color: var(--color-mint-glow); text-underline-offset: 0.25rem; }
.source-card i { width: 0.48rem; height: 0.48rem; margin-block-start: 0.35rem; border-radius: 50%; background: var(--color-mint); box-shadow: 0 0 0.65rem var(--color-mint); }
.source-card p { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.7; }
.source-errors { margin-block-start: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-danger-border); border-radius: var(--radius-lg); background: var(--color-danger-surface); color: var(--color-danger-soft); font-size: var(--font-size-sm); }

footer { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-8); padding: var(--space-8) max(var(--space-4), calc((100vw - var(--container)) / 2)); border-block-start: 1px solid var(--color-border); background: rgba(2, 9, 7, 0.52); color: var(--color-text-muted); font-size: var(--font-size-xs); }
footer > div { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-soft); }
footer p { margin: 0; }
.brand-mark.mini { width: 1.1rem; gap: 0.13rem; }.brand-mark.mini span { height: 0.13rem; }
[data-section].is-hidden { display: none !important; }

@media (max-width: 64rem) {
  .topbar { grid-template-columns: 1fr auto; background: rgba(4, 14, 12, 0.96); backdrop-filter: none; }
  .view-nav { position: fixed; inset-inline: var(--space-4); inset-block-end: var(--space-4); z-index: var(--z-header); justify-content: center; box-shadow: 0 1rem 4rem rgba(0, 0, 0, 0.45); background: rgba(7, 20, 17, 0.94); backdrop-filter: blur(1rem); }
  .top-actions { grid-column: 2; }
  .hero { grid-template-columns: 1fr 20rem; gap: var(--space-8); }
  .signal-strip { grid-template-columns: repeat(2, 1fr); }
  .economics-grid { grid-template-columns: repeat(2, 1fr); }
  footer { grid-template-columns: 1fr; padding-block-end: 6rem; }
}

@media (max-width: 48rem) {
  .shell { width: min(100% - var(--space-6), var(--container)); }
  .topbar { min-height: 4.15rem; padding-inline: var(--space-4); }
  .live-pill { display: none; }
  .hero { grid-template-columns: 1fr; min-height: auto; padding-block: var(--space-16) var(--space-10); }
  h1 { max-width: 10ch; }
  .health-orbit { min-height: 20rem; }
  .signal-strip, .dashboard-grid, .economics-grid, .source-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .panel-heading { flex-direction: column; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
  .validator-row { grid-template-columns: 1fr auto; }
  .validator-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .validator-value { grid-column: 2; grid-row: 1; }
  .view-nav { overflow: hidden; justify-content: stretch; }
  .nav-chip { flex: 1 1 25%; padding-inline: var(--space-2); font-size: 0.64rem; }
}

@media (max-width: 30rem) {
  .brand small { display: none; }
  .hero-meta { display: grid; gap: var(--space-2); }
  .signal-strip { grid-template-columns: 1fr; }
  .health-orbit { transform: scale(0.92); }
  .metric-card { min-height: 11.5rem; }
}

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

@keyframes drift { from { transform: translate3d(-2rem, 0, 0) scale(0.94); } to { transform: translate3d(3rem, 3rem, 0) scale(1.08); } }
@keyframes pulse { 50% { opacity: 0.65; box-shadow: 0 0 0 0.4rem rgba(66, 245, 179, 0.04), 0 0 1.2rem var(--color-mint); } }
@keyframes slow-spin { to { transform: rotate(360deg); } }
@keyframes spin { to { transform: rotate(360deg); } }