/* Vectorglow: six themes, one kit. Set data-vg="emitter|trace|deepfield|isotope|isotherm|chimera" on <html> or any wrapper.
   Generated from tokens.json. Do not hand-edit token values here; change tokens.json and regenerate. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wdth,wght@0,62..125,100..900;1,62..125,100..900&family=Chakra+Petch:wght@600&family=Jost:wght@300..700&family=Marcellus+SC&family=Martian+Mono:wdth,wght@75..112.5,100..800&family=Michroma&family=Righteous&family=Share+Tech+Mono&display=swap");

@font-face { font-family: "Hershey"; src: url("../fonts/AVHersheySimplexLight.otf") format("opentype"); font-weight: 100 400; font-display: swap; }
@font-face { font-family: "Hershey"; src: url("../fonts/AVHersheySimplexMedium.otf") format("opentype"); font-weight: 401 900; font-display: swap; }

/* ---------- Theme tokens ---------- */
/* 01 Emitter: Reference 6, the radial rod-and-disc array */
:root, [data-vg="emitter"] {
  --vg-void: #0d0d0e;
  --vg-panel: #151517;
  --vg-inset: #070708;
  --vg-frame: #2c2d33;
  --vg-frame-hi: #50525c;
  --vg-ink: #f6e7d3;
  --vg-ink-dim: #bdae9d;
  --vg-ink-faint: #8b8177;
  --vg-wire: #45aaf2;
  --vg-wire-2: #4fe38a;
  --vg-wire-3: #ffd3a3;
  --vg-signal: #ff3320;
  --vg-on-signal: #0d0d0e;
  --vg-ok: #4fe38a;
  --vg-warn: #ffa630;
  --vg-danger: #ff3320;
  --vg-ramp-1: #3a2ad0;
  --vg-ramp-2: #2a5bea;
  --vg-ramp-3: #1fa3d8;
  --vg-ramp-4: #2fd6b0;
  --vg-ramp-5: #7df29a;
  --vg-font-display: "Michroma", "Eurostile Extended", "Arial Black", sans-serif;
  --vg-font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vg-font-label: "Martian Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --vg-font-data: "Martian Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --vg-display-weight: 400;
  --vg-display-track: 0.04em;
  --vg-display-case: uppercase;
  --vg-display-scale: 0.74;
  --vg-label-weight: 500;
  --vg-label-style: normal;
  --vg-label-track: 0.08em;
  --vg-label-case: uppercase;
  --vg-label-prefix: "";
  --vg-body-stretch: 100%;
  --vg-radius: 999px;
  --vg-radius-panel: 18px;
  --vg-cut: 0px;
  --vg-skew: 0deg;
  --vg-stroke: 1.5px;
  --vg-glow: 1.0;
}

/* 02 Trace: Reference 1, the green and amber circuit board */
[data-vg="trace"] {
  --vg-void: #1b1511;
  --vg-panel: #231b15;
  --vg-inset: #130e0b;
  --vg-frame: #3d3023;
  --vg-frame-hi: #6a5436;
  --vg-ink: #e9f5d8;
  --vg-ink-dim: #adbc97;
  --vg-ink-faint: #84916f;
  --vg-wire: #22e04c;
  --vg-wire-2: #f0a83a;
  --vg-wire-3: #35a6cc;
  --vg-signal: #f5b041;
  --vg-on-signal: #1b1511;
  --vg-ok: #22e04c;
  --vg-warn: #f5b041;
  --vg-danger: #ff5a3c;
  --vg-ramp-1: #0d6b29;
  --vg-ramp-2: #14a838;
  --vg-ramp-3: #22e04c;
  --vg-ramp-4: #a4ea5c;
  --vg-ramp-5: #f5d04a;
  --vg-font-display: "Chakra Petch", "Share Tech Mono", sans-serif;
  --vg-font-body: "Jost", Futura, "Century Gothic", sans-serif;
  --vg-font-label: "Share Tech Mono", "SFMono-Regular", Menlo, monospace;
  --vg-font-data: "Share Tech Mono", "SFMono-Regular", Menlo, monospace;
  --vg-display-weight: 600;
  --vg-display-track: 0.08em;
  --vg-display-case: uppercase;
  --vg-display-scale: 1.0;
  --vg-label-weight: 400;
  --vg-label-style: normal;
  --vg-label-track: 0.12em;
  --vg-label-case: uppercase;
  --vg-label-prefix: "";
  --vg-body-stretch: 100%;
  --vg-radius: 0px;
  --vg-radius-panel: 0px;
  --vg-cut: 9px;
  --vg-skew: 0deg;
  --vg-stroke: 1px;
  --vg-glow: 0.9;
}

/* 03 Deep Field: Reference 2, the geodesic and voxel study in a bounding box */
[data-vg="deepfield"] {
  --vg-void: #040d33;
  --vg-panel: #081648;
  --vg-inset: #030926;
  --vg-frame: #1c3299;
  --vg-frame-hi: #3157de;
  --vg-ink: #e1ebff;
  --vg-ink-dim: #a3b8ec;
  --vg-ink-faint: #7890d2;
  --vg-wire: #5fd4ff;
  --vg-wire-2: #3a74ff;
  --vg-wire-3: #ff3fae;
  --vg-signal: #ff5a1f;
  --vg-on-signal: #040d33;
  --vg-ok: #35e8a0;
  --vg-warn: #ffc21a;
  --vg-danger: #ff2f5e;
  --vg-ramp-1: #2038c8;
  --vg-ramp-2: #3a74ff;
  --vg-ramp-3: #ff3fae;
  --vg-ramp-4: #ff5a1f;
  --vg-ramp-5: #ffc21a;
  --vg-font-display: "Jost", Futura, "Century Gothic", sans-serif;
  --vg-font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vg-font-label: "Jost", Futura, "Century Gothic", sans-serif;
  --vg-font-data: "Martian Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --vg-display-weight: 500;
  --vg-display-track: 0.18em;
  --vg-display-case: uppercase;
  --vg-display-scale: 0.86;
  --vg-label-weight: 600;
  --vg-label-style: normal;
  --vg-label-track: 0.18em;
  --vg-label-case: uppercase;
  --vg-label-prefix: "";
  --vg-body-stretch: 100%;
  --vg-radius: 0px;
  --vg-radius-panel: 0px;
  --vg-cut: 0px;
  --vg-skew: 0deg;
  --vg-stroke: 1px;
  --vg-glow: 1.1;
}

/* 04 Isotope: Reference 3, the contaminated-zone plate */
[data-vg="isotope"] {
  --vg-void: #2c1433;
  --vg-panel: #371a3f;
  --vg-inset: #221027;
  --vg-frame: #5e2c60;
  --vg-frame-hi: #93407a;
  --vg-ink: #ffe9d6;
  --vg-ink-dim: #d9adb9;
  --vg-ink-faint: #ae8399;
  --vg-wire: #ff4763;
  --vg-wire-2: #ffc94d;
  --vg-wire-3: #8479ff;
  --vg-signal: #3dffa2;
  --vg-on-signal: #221027;
  --vg-ok: #3dffa2;
  --vg-warn: #ffc94d;
  --vg-danger: #ff4763;
  --vg-ramp-1: #8a2476;
  --vg-ramp-2: #c8234f;
  --vg-ramp-3: #ff4a3a;
  --vg-ramp-4: #ff8a3a;
  --vg-ramp-5: #ffd35a;
  --vg-font-display: "Marcellus SC", Copperplate, serif;
  --vg-font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vg-font-label: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vg-font-data: "Martian Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --vg-display-weight: 400;
  --vg-display-track: 0.1em;
  --vg-display-case: uppercase;
  --vg-display-scale: 0.92;
  --vg-label-weight: 800;
  --vg-label-style: italic;
  --vg-label-track: 0.03em;
  --vg-label-case: lowercase;
  --vg-label-prefix: "// ";
  --vg-body-stretch: 100%;
  --vg-radius: 0px;
  --vg-radius-panel: 0px;
  --vg-cut: 0px;
  --vg-skew: -12deg;
  --vg-stroke: 1.5px;
  --vg-glow: 0.8;
}

/* 05 Isotherm: References 4 and 5, the contour map and the thermal terrain */
[data-vg="isotherm"] {
  --vg-void: #050506;
  --vg-panel: #0d0c11;
  --vg-inset: #000000;
  --vg-frame: #2a2433;
  --vg-frame-hi: #4d3f66;
  --vg-ink: #f1f3e4;
  --vg-ink-dim: #b9acc9;
  --vg-ink-faint: #857b98;
  --vg-wire: #ff4226;
  --vg-wire-2: #c79bff;
  --vg-wire-3: #4a50ff;
  --vg-signal: #ffb020;
  --vg-on-signal: #050506;
  --vg-ok: #86f0c8;
  --vg-warn: #ffe14a;
  --vg-danger: #ff2a4f;
  --vg-ramp-1: #2a2cff;
  --vg-ramp-2: #8a2be2;
  --vg-ramp-3: #e0188f;
  --vg-ramp-4: #ff4226;
  --vg-ramp-5: #ffb020;
  --vg-font-display: "Righteous", "Arial Rounded MT Bold", sans-serif;
  --vg-font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vg-font-label: "Martian Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --vg-font-data: "Martian Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --vg-display-weight: 400;
  --vg-display-track: 0.03em;
  --vg-display-case: uppercase;
  --vg-display-scale: 1.0;
  --vg-label-weight: 500;
  --vg-label-style: normal;
  --vg-label-track: 0.06em;
  --vg-label-case: uppercase;
  --vg-label-prefix: "";
  --vg-body-stretch: 100%;
  --vg-radius: 0px;
  --vg-radius-panel: 0px;
  --vg-cut: 0px;
  --vg-skew: 0deg;
  --vg-stroke: 1px;
  --vg-glow: 1.0;
}

/* 06 Chimera: chimera-vocal-synth.vercel.app, tokens read from its stylesheet */
[data-vg="chimera"] {
  --vg-void: #000000;
  --vg-panel: #000000;
  --vg-inset: #000000;
  --vg-frame: #133954;
  --vg-frame-hi: #1f5f8c;
  --vg-ink: #effbff;
  --vg-ink-dim: #a9cfe2;
  --vg-ink-faint: #6a9dbd;
  --vg-wire: #4fb6f2;
  --vg-wire-2: #5be381;
  --vg-wire-3: #ff73cf;
  --vg-signal: #ffb340;
  --vg-on-signal: #1d1a10;
  --vg-ok: #5be381;
  --vg-warn: #ffb340;
  --vg-danger: #ff5d40;
  --vg-ramp-1: #1f5f8c;
  --vg-ramp-2: #3487c4;
  --vg-ramp-3: #4fb6f2;
  --vg-ramp-4: #eef6f8;
  --vg-ramp-5: #ffb340;
  --vg-font-display: "Hershey", "Archivo", system-ui, sans-serif;
  --vg-font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --vg-font-label: "Hershey", "Archivo", system-ui, sans-serif;
  --vg-font-data: "Hershey", "Archivo", system-ui, sans-serif;
  --vg-display-weight: 300;
  --vg-display-track: 0.3em;
  --vg-display-case: uppercase;
  --vg-display-scale: 0.8;
  --vg-label-weight: 600;
  --vg-label-style: normal;
  --vg-label-track: 0.16em;
  --vg-label-case: uppercase;
  --vg-label-prefix: "";
  --vg-body-stretch: 87%;
  --vg-radius: 0px;
  --vg-radius-panel: 0px;
  --vg-cut: 0px;
  --vg-skew: 0deg;
  --vg-stroke: 1px;
  --vg-glow: 1.2;
}

/* ---------- Derived tokens: recomputed wherever a theme is set, so themes can be scoped to any element ---------- */
:root, [data-vg] {
  color-scheme: dark;
  --vg-s1: 4px; --vg-s2: 8px; --vg-s3: 12px; --vg-s4: 16px; --vg-s5: 24px; --vg-s6: 32px; --vg-s7: 48px; --vg-s8: 72px;
  --vg-t-xs: 11px; --vg-t-sm: 13px; --vg-t-md: 15px; --vg-t-lg: 19px; --vg-t-xl: 26px; --vg-t-2xl: 38px;
  --vg-clip: polygon(var(--vg-cut) 0, 100% 0, 100% calc(100% - var(--vg-cut)), calc(100% - var(--vg-cut)) 100%, 0 100%, 0 var(--vg-cut));
  --vg-ramp: var(--vg-ramp-1), var(--vg-ramp-2), var(--vg-ramp-3), var(--vg-ramp-4), var(--vg-ramp-5);
  --vg-glow-wire: 0 0 calc(var(--vg-glow) * 2px) color-mix(in srgb, var(--vg-wire) 90%, transparent), 0 0 calc(var(--vg-glow) * 9px) color-mix(in srgb, var(--vg-wire) 40%, transparent);
  --vg-glow-signal: 0 0 calc(var(--vg-glow) * 2px) color-mix(in srgb, var(--vg-signal) 90%, transparent), 0 0 calc(var(--vg-glow) * 10px) color-mix(in srgb, var(--vg-signal) 45%, transparent);
  --vg-dots: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--vg-frame) 80%, transparent) 1px, transparent 1.6px);
}
[data-vg] {
  background-color: var(--vg-void);
  color: var(--vg-ink);
  font: 400 var(--vg-t-md)/1.55 var(--vg-font-body);
  font-stretch: var(--vg-body-stretch);
}

/* ---------- Type roles ---------- */
.vg-display {
  font-family: var(--vg-font-display); font-weight: var(--vg-display-weight); font-stretch: normal;
  letter-spacing: var(--vg-display-track); text-transform: var(--vg-display-case);
  line-height: 1.04; text-wrap: balance; margin: 0;
}
.vg-label {
  font: var(--vg-label-style) var(--vg-label-weight) var(--vg-t-xs)/1.3 var(--vg-font-label); font-stretch: normal;
  letter-spacing: var(--vg-label-track); text-transform: var(--vg-label-case); color: var(--vg-ink-dim);
}
.vg-label::before, .vg-btn .t::before { content: var(--vg-label-prefix); }
.vg-data { font-family: var(--vg-font-data); font-stretch: normal; font-variant-numeric: tabular-nums; }
.vg-glow { text-shadow: var(--vg-glow-wire); color: var(--vg-wire); }

/* ---------- Frame: a 1px outline that follows the theme's corner (round, chamfered or square) ---------- */
.vg-panel { position: relative; isolation: isolate; padding: var(--vg-s5); min-width: 0; }
.vg-panel::before, .vg-panel::after { content: ""; position: absolute; clip-path: var(--vg-clip); pointer-events: none; }
.vg-panel::before { inset: 0; z-index: -2; background: var(--vg-frame); border-radius: var(--vg-radius-panel); }
.vg-panel::after { inset: 1px; z-index: -1; background: var(--vg-panel); border-radius: calc(var(--vg-radius-panel) - 1px); }
.vg-panel--inset::after { background: var(--vg-inset); }
.vg-panel--hot::before { background: var(--vg-frame-hi); }
[data-vg="isotherm"] .vg-panel--hot::before, [data-vg="isotherm"].vg-panel--hot::before { background: linear-gradient(135deg, var(--vg-ramp)); }
/* Corner brackets, for plates and selections */
.vg-brackets {
  --b: var(--vg-ink-dim); --l: 14px;
  background-image:
    linear-gradient(var(--b), var(--b)), linear-gradient(var(--b), var(--b)), linear-gradient(var(--b), var(--b)), linear-gradient(var(--b), var(--b)),
    linear-gradient(var(--b), var(--b)), linear-gradient(var(--b), var(--b)), linear-gradient(var(--b), var(--b)), linear-gradient(var(--b), var(--b));
  background-repeat: no-repeat;
  background-size: var(--l) 1px, 1px var(--l), var(--l) 1px, 1px var(--l), var(--l) 1px, 1px var(--l), var(--l) 1px, 1px var(--l);
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}

/* ---------- Buttons ---------- */
.vg-btn {
  --c: var(--vg-ink-faint); --fill: var(--vg-void); --fg: var(--vg-ink);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 20px; border: 0; background: none; color: var(--fg); cursor: pointer; white-space: nowrap;
  font: var(--vg-label-style) var(--vg-label-weight) 12px/1 var(--vg-font-label); font-stretch: normal;
  letter-spacing: var(--vg-label-track); text-transform: var(--vg-label-case); text-decoration: none;
  transform: skewX(var(--vg-skew));
  filter: drop-shadow(0 0 calc(var(--vg-glow) * 4px) color-mix(in srgb, var(--c) 40%, transparent));
  transition: filter .15s ease;
}
.vg-btn > * { display: inline-block; transform: skewX(calc(var(--vg-skew) * -1)); }
.vg-btn::before, .vg-btn::after { content: ""; position: absolute; clip-path: var(--vg-clip); border-radius: var(--vg-radius); }
.vg-btn::before { inset: 0; z-index: -2; background: var(--c); }
.vg-btn::after { inset: var(--vg-stroke); z-index: -1; background: var(--fill); }
.vg-btn:hover { filter: drop-shadow(0 0 calc(var(--vg-glow) * 9px) color-mix(in srgb, var(--c) 85%, transparent)) brightness(1.1); }
.vg-btn:active { filter: brightness(.9); }
.vg-btn:focus-visible, .vg-input:focus-visible, .vg-seg button:focus-visible, .vg-tabs button:focus-visible, .vg-knob:focus-visible {
  outline: 2px solid var(--vg-ink); outline-offset: 3px;
}
.vg-btn--primary { --c: var(--vg-signal); --fill: var(--vg-signal); --fg: var(--vg-on-signal); font-weight: 700; }
.vg-btn--wire { --c: var(--vg-wire); --fg: var(--vg-wire); }
.vg-btn--ghost { --c: transparent; --fill: transparent; --fg: var(--vg-ink-dim); filter: none; }
.vg-btn--ghost:hover { --fg: var(--vg-ink); filter: none; }
.vg-btn--danger { --fg: var(--vg-danger); --c: var(--vg-danger); }
.vg-btn--danger::before { background: repeating-linear-gradient(45deg, var(--vg-danger) 0 5px, transparent 5px 9px); }
.vg-btn--sm { min-height: 30px; padding: 0 14px; font-size: 11px; }
.vg-btn--icon { padding: 0; width: 40px; }
.vg-btn:disabled, .vg-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; filter: none; }
.vg-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Form controls ---------- */
.vg-field { display: grid; gap: 6px; min-width: 0; }
.vg-input {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 16px; background: var(--vg-inset); color: var(--vg-ink);
  border: var(--vg-stroke) solid var(--vg-ink-faint); border-radius: var(--vg-radius);
  font: 400 14px/1 var(--vg-font-data); font-stretch: normal; letter-spacing: .02em;
}
.vg-input::placeholder { color: var(--vg-ink-faint); }
.vg-input:hover { border-color: var(--vg-wire); }
.vg-input:focus { border-color: var(--vg-wire); box-shadow: var(--vg-glow-wire); outline: none; }
select.vg-input {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--vg-wire) 50%), linear-gradient(135deg, var(--vg-wire) 50%, transparent 50%);
  background-size: 6px 6px, 6px 6px; background-position: calc(100% - 20px) 17px, calc(100% - 14px) 17px; background-repeat: no-repeat;
}
.vg-hint { font-size: var(--vg-t-sm); color: var(--vg-ink-dim); }
.vg-hint--bad { color: var(--vg-danger); }

.vg-range { appearance: none; width: 100%; height: 24px; margin: 0; background: none; cursor: pointer; --v: 50%; }
.vg-range::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--vg-wire) var(--v), var(--vg-frame-hi) var(--v)); }
.vg-range::-moz-range-track { height: 2px; background: linear-gradient(90deg, var(--vg-wire) var(--v), var(--vg-frame-hi) var(--v)); }
.vg-range::-webkit-slider-thumb {
  appearance: none; width: 10px; height: 22px; margin-top: -10px; background: var(--vg-void);
  border: var(--vg-stroke) solid var(--vg-wire); border-radius: var(--vg-radius); box-shadow: var(--vg-glow-wire);
}
.vg-range::-moz-range-thumb {
  width: 8px; height: 20px; background: var(--vg-void);
  border: var(--vg-stroke) solid var(--vg-wire); border-radius: var(--vg-radius); box-shadow: var(--vg-glow-wire);
}
.vg-range:focus-visible { outline: 2px solid var(--vg-ink); outline-offset: 3px; }

.vg-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.vg-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vg-check .box {
  flex: none; width: 18px; height: 18px; box-sizing: border-box; border: var(--vg-stroke) solid var(--vg-ink-faint);
  border-radius: min(var(--vg-radius), 4px); display: grid; place-items: center; transform: skewX(var(--vg-skew));
}
.vg-check input[type="radio"] + .box { border-radius: 50%; transform: none; }
.vg-check .box::after { content: ""; width: 8px; height: 8px; background: var(--vg-signal); border-radius: inherit; opacity: 0; box-shadow: var(--vg-glow-signal); }
.vg-check input:checked + .box { border-color: var(--vg-signal); }
.vg-check input:checked + .box::after { opacity: 1; }
.vg-check input:focus-visible + .box { outline: 2px solid var(--vg-ink); outline-offset: 3px; }

.vg-toggle { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.vg-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vg-toggle .track {
  flex: none; position: relative; width: 44px; height: 22px; box-sizing: border-box; border: var(--vg-stroke) solid var(--vg-ink-faint);
  border-radius: var(--vg-radius); transform: skewX(var(--vg-skew)); transition: border-color .15s;
}
.vg-toggle .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: calc(100% - 6px); background: var(--vg-ink-faint);
  border-radius: var(--vg-radius); transition: transform .15s, background .15s;
}
.vg-toggle input:checked + .track { border-color: var(--vg-wire); box-shadow: var(--vg-glow-wire); }
.vg-toggle input:checked + .track::after { transform: translateX(calc(44px - 20px - 2 * var(--vg-stroke))); background: var(--vg-wire); }
.vg-toggle input:focus-visible + .track { outline: 2px solid var(--vg-ink); outline-offset: 3px; }

.vg-seg { display: inline-flex; border: var(--vg-stroke) solid var(--vg-frame-hi); border-radius: var(--vg-radius); padding: 3px; gap: 3px; transform: skewX(var(--vg-skew)); max-width: 100%; }
.vg-seg button {
  border: 0; background: none; color: var(--vg-ink-dim); cursor: pointer; padding: 7px 14px; border-radius: var(--vg-radius);
  font: var(--vg-label-style) var(--vg-label-weight) 11px/1 var(--vg-font-label); letter-spacing: var(--vg-label-track); text-transform: var(--vg-label-case);
}
.vg-seg button[aria-pressed="true"] { background: var(--vg-wire); color: var(--vg-void); font-weight: 700; }

.vg-tabs { display: flex; gap: var(--vg-s5); border-bottom: 1px solid var(--vg-frame); overflow-x: auto; }
.vg-tabs button {
  border: 0; background: none; color: var(--vg-ink-dim); cursor: pointer; padding: 10px 0; margin-bottom: -1px; border-bottom: 2px solid transparent; white-space: nowrap;
  font: var(--vg-label-style) var(--vg-label-weight) 12px/1 var(--vg-font-label); letter-spacing: var(--vg-label-track); text-transform: var(--vg-label-case);
}
.vg-tabs button[aria-selected="true"] { color: var(--vg-signal); border-bottom-color: var(--vg-signal); text-shadow: var(--vg-glow-signal); }

.vg-knob { display: grid; justify-items: center; gap: 6px; cursor: ns-resize; touch-action: none; user-select: none; border-radius: 8px; }
.vg-knob svg { width: 72px; height: 72px; overflow: visible; }
.vg-knob .ring { fill: none; stroke: var(--vg-frame-hi); stroke-width: 1.5; }
.vg-knob .arc { fill: none; stroke: var(--k, var(--vg-wire)); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 calc(var(--vg-glow) * 3px) var(--k, var(--vg-wire))); }
.vg-knob .hand { stroke: var(--k, var(--vg-wire)); stroke-width: 2; stroke-linecap: round; }
.vg-knob .tick { stroke: var(--vg-ink-faint); stroke-width: 1; }
.vg-knob output { font: 400 20px/1 var(--vg-font-data); font-variant-numeric: tabular-nums; color: var(--k, var(--vg-wire)); }

/* ---------- Status and feedback ---------- */
.vg-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid currentColor; border-radius: var(--vg-radius); white-space: nowrap;
  font: var(--vg-label-style) var(--vg-label-weight) 10.5px/1.2 var(--vg-font-label); letter-spacing: var(--vg-label-track); text-transform: var(--vg-label-case);
}
.vg-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.vg-pill--ok { color: var(--vg-ok); }
.vg-pill--warn { color: var(--vg-warn); }
.vg-pill--warn::before { background: none; border: 1.5px solid currentColor; box-sizing: border-box; box-shadow: none; }
.vg-pill--danger { color: var(--vg-danger); border-style: dashed; }
.vg-pill--danger::before { border-radius: 0; width: 8px; height: 8px; background: linear-gradient(45deg, transparent 42%, currentColor 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, currentColor 42% 58%, transparent 58%); box-shadow: none; }
.vg-pill--idle { color: var(--vg-ink-dim); }
.vg-pill--idle::before { background: none; border: 1px solid currentColor; box-sizing: border-box; box-shadow: none; }

.vg-alert { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--a); border-radius: min(var(--vg-radius-panel), 12px); background: color-mix(in srgb, var(--a) 7%, var(--vg-void)); font-size: 14px; }
.vg-alert svg { width: 18px; height: 18px; fill: none; stroke: var(--a); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 2px; }
.vg-alert b { color: var(--a); font-weight: 600; }
.vg-alert--ok { --a: var(--vg-ok); } .vg-alert--warn { --a: var(--vg-warn); } .vg-alert--danger { --a: var(--vg-danger); border-style: dashed; }

.vg-meter { height: 8px; background: var(--vg-inset); border: 1px solid var(--vg-frame-hi); border-radius: var(--vg-radius); overflow: hidden; transform: skewX(var(--vg-skew)); }
.vg-meter > i { display: block; height: 100%; width: var(--v, 50%); background: linear-gradient(90deg, var(--vg-ramp)); background-size: calc(100% * 100 / var(--n, 50)) 100%; }

.vg-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.vg-bars > i {
  flex: 1; min-width: 6px; height: var(--v); background: linear-gradient(to top, var(--vg-ramp)); background-size: 100% 120px; background-position: bottom;
  -webkit-mask-image: repeating-linear-gradient(to top, #000 0 4px, transparent 4px 6px); mask-image: repeating-linear-gradient(to top, #000 0 4px, transparent 4px 6px);
}

.vg-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vg-table th { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--vg-frame-hi); font: var(--vg-label-style) var(--vg-label-weight) 10.5px/1.2 var(--vg-font-label); letter-spacing: var(--vg-label-track); text-transform: var(--vg-label-case); color: var(--vg-ink-dim); white-space: nowrap; }
.vg-table td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--vg-frame); font-family: var(--vg-font-data); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vg-table .num { text-align: right; }
.vg-table tr:hover td { background: color-mix(in srgb, var(--vg-wire) 6%, transparent); }

.vg-tip { position: relative; display: inline-block; padding: 7px 11px; background: var(--vg-ink); color: var(--vg-void); font: 500 12px/1.3 var(--vg-font-body); border-radius: min(var(--vg-radius-panel), 6px); }
.vg-tip::after { content: ""; position: absolute; left: 18px; bottom: -5px; width: 10px; height: 10px; background: var(--vg-ink); transform: rotate(45deg); }

.vg-stat { display: grid; gap: 6px; }
.vg-stat .v { font: 400 var(--vg-t-2xl)/1 var(--vg-font-data); font-variant-numeric: tabular-nums; color: var(--vg-wire); text-shadow: var(--vg-glow-wire); }
.vg-stat .v small { font-size: 13px; color: var(--vg-ink-dim); text-shadow: none; margin-left: 4px; }

/* ---------- Line graphics: stroke roles for inline SVG ---------- */
.vg-gfx { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.vg-gfx .w1 { stroke: var(--vg-wire); } .vg-gfx .w2 { stroke: var(--vg-wire-2); } .vg-gfx .w3 { stroke: var(--vg-wire-3); }
.vg-gfx .sg { stroke: var(--vg-signal); } .vg-gfx .wn { stroke: var(--vg-warn); } .vg-gfx .ok { stroke: var(--vg-ok); } .vg-gfx .dg { stroke: var(--vg-danger); }
.vg-gfx .ik { stroke: var(--vg-ink-dim); } .vg-gfx .fr { stroke: var(--vg-frame-hi); }
.vg-gfx .r1 { stroke: var(--vg-ramp-1); } .vg-gfx .r2 { stroke: var(--vg-ramp-2); } .vg-gfx .r3 { stroke: var(--vg-ramp-3); } .vg-gfx .r4 { stroke: var(--vg-ramp-4); } .vg-gfx .r5 { stroke: var(--vg-ramp-5); }
.vg-gfx .dash { stroke-dasharray: 3 3; } .vg-gfx .thick { stroke-width: 3.5; } .vg-gfx .thin { stroke-width: .8; }
.vg-gfx .fsg { fill: var(--vg-signal); stroke: none; }
.vg-gfx--glow { filter: drop-shadow(0 0 calc(var(--vg-glow) * 2.5px) color-mix(in srgb, var(--vg-wire) 55%, transparent)); }

.vg-icon { width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid var(--vg-wire); border-radius: 10px; color: var(--vg-wire); box-shadow: inset 0 0 calc(var(--vg-glow) * 8px) color-mix(in srgb, var(--vg-wire) 18%, transparent); }
.vg-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vg-icon--signal { border-color: var(--vg-signal); color: var(--vg-signal); box-shadow: inset 0 0 calc(var(--vg-glow) * 8px) color-mix(in srgb, var(--vg-signal) 18%, transparent); }

@media (prefers-reduced-motion: reduce) { .vg-btn, .vg-toggle .track, .vg-toggle .track::after { transition: none; } }