/* Calm page */
.gauges { display: grid; gap: 18px; max-width: 820px; margin: 0 auto; }
.gauge { padding: 1.1rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,0.025); }
.g-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 0.7rem; color: #c3ccd4; }
.g-top b { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; color: #f0f4f6; }
.g-top small { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-left: 0.4rem; }
.g-bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }
.g-bar i { display: block; height: 100%; border-radius: 4px; background: var(--glow); transform-origin: left; }
.js .gauges.reveal .g-bar i { transform: scaleX(0); transition: transform 2.4s var(--ease) 0.3s; }
.js .gauges.reveal.in .g-bar i { transform: none; }
html.is-still .gauges .g-bar i { transition-duration: 0.01s; }

.live-split { align-items: stretch; }
.meter { display: grid; gap: 14px; align-content: start; padding: 1.2rem; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: rgba(255,255,255,0.025); }
.meter canvas { width: 100%; height: auto; aspect-ratio: 2 / 1; border-radius: 12px; background: #0f1215; }
.readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; text-align: center; }
.readout .k { display: block; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.readout b { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; color: #eef2f5; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .live-split .stage { aspect-ratio: 16 / 9; } }

.pacer { position: relative; width: min(260px, 70vw); aspect-ratio: 1; margin-inline: auto; }
.pacer .ring { position: absolute; inset: 14%; border-radius: 50%; border: 1.5px solid rgba(127,230,210,0.7); box-shadow: 0 0 60px -6px rgba(127,230,210,0.5), inset 0 0 50px -10px rgba(127,230,210,0.35); transform: scale(calc(0.78 + 0.22 * var(--breath, 0))); }
.pacer .ring.r2 { inset: 4%; border-color: rgba(185,168,244,0.4); box-shadow: 0 0 80px -10px rgba(185,168,244,0.4); transform: scale(calc(0.9 + 0.1 * var(--breath, 0))); }