/* Variant: Gauges — a car-style instrument cluster. Dark. */
:root {
  --bg: #0b0d12; --surface: #14171e; --muted: #0f1218; --ink: #f1f3f7; --ink-2: #99a0ad; --line: #232731;
  --accent: #ff5a36; --accent-ink: #1a0802; --accent-soft: #3a1a14; --green-soft: #1a1d26; --amber-soft: #2e2418;
  --night: #14171e; --night-2: #1c2029; --night-line: rgba(255, 255, 255, 0.08); --night-ink: #f1f3f7; --night-ink-2: #99a0ad;
  --ui-bg: #1a1d25; --ui-line: #2a2e38; --ui-fill: #363b47; --ui-fill-2: #20232c; --ui-strong: #f1f3f7; --ui-accent: #ff5a36; --ui-img: #3a1a14;
  --ui-tint-a: #4a2018; --ui-tint-b: #1f2f4a; --ui-tint-c: #3a3218;
  color-scheme: dark;
}
.gg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.5vw, 18px); padding: clamp(18px, 3vw, 32px); border-radius: 999px / 50%; background: radial-gradient(ellipse at 50% 120%, #1e222c, #07080b 70%); box-shadow: inset 0 0 0 2px #22262f, 0 40px 80px -40px rgba(255, 90, 54, 0.35); }
@media (max-width: 40em) { .gg { border-radius: 28px; } }
.gg-g { display: grid; justify-items: center; gap: 0.6rem; text-align: center; font-size: clamp(0.6875rem, 1vw, 0.875rem); color: var(--ink-2); }
.gg-g:nth-child(2) { transform: scale(1.12); }
.gg-dial { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #10131a 58%, transparent 59%), conic-gradient(from -135deg, #ff5a36 0deg 60deg, #ffb13a 60deg 150deg, #3a8bff 150deg 270deg, transparent 270deg); }
.gg-dial::after { content: ""; position: absolute; inset: 6%; border-radius: 50%; background: repeating-conic-gradient(from -135deg, rgba(255, 255, 255, 0.55) 0 1.5deg, transparent 1.5deg 13.5deg); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 62%, #000 63%, #000 70%, transparent 71%); }
.gg-dial b { position: relative; z-index: 1; margin-top: 30%; font-size: clamp(1.25rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: -0.03em; color: #ffffff; }
.gg-needle { position: absolute; left: 50%; top: 50%; width: 3px; height: 40%; margin-left: -1.5px; transform-origin: 50% 0; border-radius: 2px; background: #ff5a36; box-shadow: 0 0 10px rgba(255, 90, 54, 0.8); rotate: 180deg; }
.gg-needle::before { content: ""; position: absolute; left: 50%; top: -6px; width: 14px; height: 14px; translate: -50% 0; border-radius: 50%; background: #f1f3f7; }
.gg-needle--1 { --to: 300deg; } .gg-needle--2 { --to: 230deg; } .gg-needle--3 { --to: 155deg; }
.gg-needle { rotate: var(--to); }
@media (prefers-reduced-motion: no-preference) { .gg-needle { animation: gg-sweep 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; } @keyframes gg-sweep { from { rotate: 45deg; } to { rotate: var(--to); } } }
.tile--dark { background: linear-gradient(160deg, #3a1a14, #14171e 70%); }