:root { color-scheme: dark; --ink: #ecf4ef; --muted: #8fa8a5; --teal: #5de1c2; --line: rgba(193, 226, 217, .13); }
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font-family: Inter, Avenir, "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(circle at 75% -10%, #164a52 0, transparent 38%), linear-gradient(145deg, #061821, #0a2530 60%, #071b24);
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E"); }
main { width: min(1120px, calc(100% - 40px)); margin: auto; padding: 48px 0 32px; }
header, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
h1, h2, p { margin: 0; } h1 { font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.06em; font-weight: 500; } h2 { font-size: 1.35rem; font-weight: 500; }
.eyebrow, .label { color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-size: .67rem; font-weight: 600; margin-bottom: 8px; }
.status { border: 1px solid var(--line); border-radius: 99px; padding: 9px 14px; display: flex; gap: 9px; align-items: center; font-size: .72rem; color: var(--muted); }
.status span { width: 7px; height: 7px; border-radius: 50%; background: #e3af59; box-shadow: 0 0 12px #e3af59; }.status.live span { background: var(--teal); box-shadow: 0 0 12px var(--teal); }.status.error span { background: #ed796c; box-shadow: 0 0 12px #ed796c; }
.current, .history { position: relative; overflow: hidden; border: 1px solid var(--line); background: rgba(6, 24, 33, .5); box-shadow: 0 24px 80px rgba(0,0,0,.18); backdrop-filter: blur(12px); }
.current { min-height: 290px; margin: 42px 0 18px; padding: clamp(28px, 6vw, 64px); display: flex; align-items: center; border-radius: 28px; }
.height { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: clamp(4.8rem, 13vw, 9rem); letter-spacing: -.09em; line-height: .95; color: #fff; }
.height small { font-family: inherit; margin-left: .22em; font-size: .14em; letter-spacing: .02em; color: var(--teal); }
.updated { color: var(--muted); font-size: .76rem; margin-top: 18px; }
.wave { position: absolute; width: 48%; height: 70%; right: -3%; bottom: -12%; opacity: .2; }.wave svg { width: 100%; height: 100%; }.wave path:first-child { fill: var(--teal); }.wave path:last-child { fill: none; stroke: #fff; stroke-width: 1.5; }
.history { border-radius: 28px; padding: clamp(24px, 4vw, 42px); }
.ranges { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 12px; }.ranges button { color: var(--muted); background: none; border: 0; border-radius: 8px; padding: 8px 12px; cursor: pointer; font: 500 .72rem inherit; }.ranges button:hover, .ranges button.active { color: var(--ink); background: rgba(93, 225, 194, .12); }
.chart-wrap { position: relative; min-height: 330px; margin-top: 26px; }#chart { display: block; width: 100%; height: auto; overflow: visible; }.empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: .82rem; }.empty.hidden { display: none; }
.grid { stroke: var(--line); stroke-width: 1; }.axis-text { fill: var(--muted); font: 11px ui-monospace, monospace; }.area { fill: url(#area-gradient); }.plot { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(93,225,194,.35)); }
footer { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 0 0 38px; color: #63807e; font-size: .66rem; letter-spacing: .08em; text-align: center; }
@media (max-width: 600px) { main { width: min(100% - 24px, 1120px); padding-top: 26px; }.current { min-height: 240px; margin-top: 28px; }.section-heading { align-items: flex-start; flex-direction: column; }.ranges { width: 100%; }.ranges button { flex: 1; }.chart-wrap { min-height: 240px; overflow: hidden; } }
@media (prefers-reduced-motion: no-preference) { .wave { animation: drift 7s ease-in-out infinite alternate; } @keyframes drift { to { transform: translateX(-3%) translateY(-4%); } } }