:root { color-scheme: dark; background: transparent; --hairline-plate: #0d0f13; --hairline-hi: #efd3a0; --hairline-edge: #b39c73; --hairline-mid: #78664a; --hairline-lo: #443929; }
:root[data-theme="light"] { color-scheme: light; --hairline-plate: #f8f9fb; --hairline-hi: #233954; --hairline-edge: #8997ac; --hairline-mid: #b0bdce; --hairline-lo: #d4dce7; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; overflow: hidden; }
body { padding: 3px; }
#stage { width: 100%; outline-offset: -3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

#stage[data-hairline="twin-gauges"] { position: relative; }
.gaugeState { position: absolute; bottom: 12px; left: 0; width: 100%; text-align: center; font: 11px/1.4 system-ui, sans-serif; color: var(--hairline-edge); letter-spacing: .02em; pointer-events: none; }