/* Instrument skin. Existing tokens live in home.css, gym.css, today.css and
   design-tokens.css. This opt-in layer leaves those fallback declarations intact.
   Remove data-skin from html to restore the existing cascade. */
html[data-skin="instrument"] {
  --instrument-bg: #050506;
  --instrument-surface: #0d0d0f;
  --instrument-raised: #141416;
  --instrument-text: #f5f5f7;
  --instrument-muted: #a1a1aa;
  --instrument-gold: #ffba08;
  --instrument-rule: rgba(255,255,255,.14);
  --instrument-grid: rgba(255,255,255,.024);
  --instrument-mono: 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --instrument-display: 'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --bg-2: var(--instrument-bg);
  --card: var(--instrument-surface);
  --elev: var(--instrument-raised);
  --line-2: var(--instrument-rule);
  --faint: var(--instrument-muted);
  --font-mono: var(--instrument-mono);
  --font-display: var(--instrument-display);
  --load: var(--instrument-gold);
  --good: var(--instrument-gold);
  --green: var(--instrument-gold);
  --green-light: var(--instrument-gold);
  --warn: var(--instrument-gold);
  --blue: var(--instrument-gold);
  --blue-strong: var(--instrument-gold);
  --acc: var(--instrument-gold);
  --amber: var(--instrument-gold);
  --shell-top: var(--instrument-bg);
  --shell-bot: var(--instrument-bg);
  --hud-top: var(--instrument-surface);
  --hud-bot: var(--instrument-surface);
  --bg: var(--instrument-bg);
  --bg-app: var(--instrument-bg);
  --paper: var(--instrument-bg);
  --surface: var(--instrument-surface);
  --surface-2: var(--instrument-raised);
  --bg-surface: var(--instrument-surface);
  --sheet-bg: var(--instrument-surface);
  --panel: var(--instrument-surface);
  --text: var(--instrument-text);
  --ink: var(--instrument-text);
  --navy: var(--instrument-text);
  --slate: var(--instrument-text);
  --muted: var(--instrument-muted);
  --line: var(--instrument-rule);
  --line-strong: var(--instrument-rule);
  --action: var(--instrument-gold);
  --action-hover: var(--instrument-gold);
  --on-action: var(--instrument-bg);
  --action-ink: var(--instrument-gold);
  --teal-ink: var(--instrument-gold);
  --accent: var(--instrument-gold);
  --accent-cyan: var(--instrument-gold);
  --accent-magenta: var(--instrument-gold);
  --cy: var(--instrument-gold);
  --cy-deep: var(--instrument-gold);
  --mono: var(--instrument-mono);
  --serif: var(--instrument-display);
  --r: 0px;
  --r-sm: 0px;
  color-scheme: dark;
}
html[data-skin="instrument"] body {
  background-color: var(--instrument-bg);
  background-image: linear-gradient(var(--instrument-grid) 1px,transparent 1px),linear-gradient(90deg,var(--instrument-grid) 1px,transparent 1px);
  background-size: 40px 40px;
  color: var(--instrument-text);
}
html[data-skin="instrument"] :is(h1,.wordmark) { font-family: var(--instrument-display); }
html[data-skin="instrument"] :is(nav,.topnav,.lab,label,button,.btn,.dv-tag,.dv-eyebrow,.readout-tag,.price,.price-amt,.v,.u,.dv-target,.readiness-badge,.s2-chip-num,.instrument-row-index) {
  font-family: var(--instrument-mono);
  font-variant-numeric: tabular-nums;
}
html[data-skin="instrument"] :is(nav,.topnav,.lab,label,.dv-tag,.dv-eyebrow,.readout-tag) { text-transform: uppercase; }
html[data-skin="instrument"] :is(.hero,.device-screen,.device-frame,.readout,.panel,.today-out,.price-card,.card,.num,.upnext,.sheet,.instrument-card) {
  background-color: var(--instrument-surface);
  background-image: linear-gradient(var(--instrument-gold),var(--instrument-gold)),linear-gradient(var(--instrument-gold),var(--instrument-gold)),linear-gradient(var(--instrument-gold),var(--instrument-gold)),linear-gradient(var(--instrument-gold),var(--instrument-gold));
  background-size: 12px 1px,1px 12px,12px 1px,1px 12px;
  background-position: left top,left top,right bottom,right bottom;
  background-repeat: no-repeat;
  border-color: var(--instrument-rule);
  border-radius: 0;
  box-shadow: none;
  color: var(--instrument-text);
}
html[data-skin="instrument"] :is(.btn-primary,.btn-buy,.dv-action,.log-btn) {
  background: var(--instrument-gold);
  color: var(--instrument-bg);
  border-color: var(--instrument-gold);
  box-shadow: none;
}
html[data-skin="instrument"] :is(.topbar,hr,.readout-rows li,.data-stream-chip,.instrument-row) { border-color: var(--instrument-rule); }
html[data-skin="instrument"] :is(.s2-chip-num,.instrument-row-index) { color: var(--instrument-gold); }
html[data-skin="instrument"] :is(.readiness-badge,.metabolic-tag,.instrument-readiness) {
  font-family: var(--instrument-mono);
  font-variant-numeric: tabular-nums;
  border-color: var(--instrument-rule);
  color: var(--instrument-text);
  border-radius: 0;
}
/* The reusable gauge occupies existing readout boxes; it creates no new fold. */
html[data-skin="instrument"] :is(.dv-target,.tachometer-wrap) { position: relative; }
.instrument-gauge { display: none; }
html[data-skin="instrument"] .instrument-gauge {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: var(--instrument-text);
}
html[data-skin="instrument"] .instrument-gauge-arc,
html[data-skin="instrument"] .instrument-gauge-tick { fill: none; stroke: var(--instrument-muted); stroke-width: 1; }
html[data-skin="instrument"] .instrument-gauge-needle { stroke: var(--instrument-gold); stroke-width: 2; stroke-linecap: round; }
html[data-skin="instrument"] .dv-target { color: var(--instrument-text); text-align: center; }
html[data-skin="instrument"] .instrument-gauge { opacity: .5; }
html[data-skin="instrument"] #nReps .tachometer-svg { visibility: hidden; }
html[data-skin="instrument"] .hero::before,
html[data-skin="instrument"] .device-frame::after { background: none; }
html[data-skin="instrument"] :is(.hero-sub,.hero-free,.hero-eyebrow,.dv-tag,.dv-step,.readout-k) { color: var(--instrument-text); }
html[data-skin="instrument"] :is(.ae-kicker,.eyebrow,.hero-kicker) { color: var(--instrument-muted); }
html[data-skin="instrument"] :is(.dot,.live-dot) { background-color: var(--instrument-gold); box-shadow: none; }

html[data-skin="instrument"] .dv-eff { color: var(--instrument-text); border-color: var(--instrument-rule); }
html[data-skin="instrument"] .dv-eff.on { color: var(--instrument-text); background: var(--instrument-raised); border-color: var(--instrument-gold); }
html[data-skin="instrument"] .free-banner strong { color: var(--instrument-text); }