/* eclipser.app — the eclipse design language.
   Four audited palettes, the fixed sky, the eclipse stage and the darkness gauge. Page-agnostic:
   every public page links this before its own stylesheet; the privacy page reaches it at the stable
   /eclipse.css path. The engine (`eclipse.js`) scrubs the keyframes below through the Web Animations
   API, so nothing here depends on scroll-driven animation support. No framework, no font, no request
   beyond two data-URI star tiles. */

/* ── palettes ─────────────────────────────────────────────────────────────────────────────────
   Day is the stylesheet default, so the first paint is bright before any script runs. Text and
   background are never cross-faded between steps: each block is a complete set that passes AA on its
   own (site/lib/eclipse-palette.mjs refuses the build otherwise). Totality is today's dark design. */
:root {
  color-scheme: only light;
  --ink: #f7f9fc;
  --graphite: #ffffff;
  --raise: #e9eef5;
  --line: #b6c1ce;
  --line-strong: #6b7686;
  --line-soft: #d5dce5;
  --frost: #0b0e14;
  --body: #3a4452;
  --slate: #465060;
  --lede: #2f3844;
  --aqua: #0a5751;
  --amber: #6e4610;
  --trial-text: #5f4318;
  --ring: #536071;
  --veil: rgb(247 249 252 / .82);
  --panel: rgb(255 255 255 / .82);
  --card-veil: rgb(255 255 255 / .72);
  --chrome: #e9eef5;
  --chrome-dot: #b6c1ce;
  --thead: #e9eef5;
  --hover-row: rgb(15 20 28 / .04);
  --shadow: rgb(15 23 42 / .14);
  --shadow-deep: rgb(15 23 42 / .22);
  --pool-aqua: rgb(115 209 201 / .14);
  --pool-amber: rgb(231 167 93 / .12);
  --aqua-fill: #73d1c9;
  --on-aqua: #062522;
  --moon: #0b0e14;
}
html[data-eclipse="dusk"] {
  color-scheme: only light;
  --ink: #d6dee9;
  --graphite: #e6ebf2;
  --raise: #cbd4df;
  --line: #aab5c4;
  --line-strong: #66717f;
  --line-soft: #b9c3d0;
  --frost: #0b0e14;
  --body: #3a4452;
  --slate: #465060;
  --lede: #2f3844;
  --aqua: #0a5751;
  --amber: #6e4610;
  --trial-text: #5f4318;
  --ring: #536071;
  --veil: rgb(214 222 233 / .84);
  --panel: rgb(230 235 242 / .84);
  --card-veil: rgb(230 235 242 / .76);
  --chrome: #cbd4df;
  --chrome-dot: #aab5c4;
  --thead: #cbd4df;
  --hover-row: rgb(11 14 20 / .05);
  --shadow: rgb(11 14 20 / .26);
  --shadow-deep: rgb(11 14 20 / .34);
  --pool-aqua: rgb(115 209 201 / .14);
  --pool-amber: rgb(231 167 93 / .12);
  --aqua-fill: #73d1c9;
  --on-aqua: #062522;
  --moon: #0b0e14;
}
html[data-eclipse="night"] {
  color-scheme: dark;
  --ink: #2c3542;
  --graphite: #242c37;
  --raise: #323b49;
  --line: #4a5566;
  --line-strong: #8894a4;
  --line-soft: #3d4756;
  --frost: #eef2f7;
  --body: #b9c3d1;
  --slate: #a3adbb;
  --lede: #ccd5e2;
  --aqua: #73d1c9;
  --amber: #e7a75d;
  --trial-text: #d9c7ad;
  --ring: #7f8b9b;
  --veil: rgb(44 53 66 / .8);
  --panel: rgb(36 44 55 / .84);
  --card-veil: rgb(36 44 55 / .74);
  --chrome: #1f2732;
  --chrome-dot: #46515f;
  --thead: #222a35;
  --hover-row: rgb(238 242 247 / .03);
  --shadow: rgb(0 0 0 / .45);
  --shadow-deep: rgb(0 0 0 / .5);
  --pool-aqua: rgb(115 209 201 / .10);
  --pool-amber: rgb(231 167 93 / .07);
  --aqua-fill: #73d1c9;
  --on-aqua: #062522;
  --moon: #0b0e14;
}
html[data-eclipse="totality"] {
  color-scheme: dark;
  --ink: #0b0e14;
  --graphite: #141a23;
  --raise: #1b222d;
  --line: #262f3d;
  --line-strong: #536071;
  --line-soft: #1e2735;
  --frost: #eef2f7;
  --body: #b9c3d1;
  --slate: #7f8b9b;
  --lede: #ccd5e2;
  --aqua: #73d1c9;
  --amber: #e7a75d;
  --trial-text: #d9c7ad;
  --ring: #536071;
  --veil: rgb(11 14 20 / .78);
  --panel: rgb(20 26 35 / .82);
  --card-veil: rgb(20 26 35 / .72);
  --chrome: #10151d;
  --chrome-dot: #2f3846;
  --thead: #111720;
  --hover-row: rgb(238 242 247 / .025);
  --shadow: rgb(0 0 0 / .4);
  --shadow-deep: rgb(0 0 0 / .55);
  --pool-aqua: rgb(115 209 201 / .10);
  --pool-amber: rgb(231 167 93 / .07);
  --aqua-fill: #73d1c9;
  --on-aqua: #062522;
  --moon: #0b0e14;
}
/* A reader without JavaScript gets the finished dark design and no inert controls. `:root` here
   out-specifies the day `:root` above by source order; an `html` selector would lose to it. */
@media (scripting: none) {
  :root {
    color-scheme: dark;
    --ink: #0b0e14;
    --graphite: #141a23;
    --raise: #1b222d;
    --line: #262f3d;
    --line-strong: #536071;
    --line-soft: #1e2735;
    --frost: #eef2f7;
    --body: #b9c3d1;
    --slate: #7f8b9b;
    --lede: #ccd5e2;
    --aqua: #73d1c9;
    --amber: #e7a75d;
    --trial-text: #d9c7ad;
    --ring: #536071;
    --veil: rgb(11 14 20 / .78);
    --panel: rgb(20 26 35 / .82);
    --card-veil: rgb(20 26 35 / .72);
    --chrome: #10151d;
    --chrome-dot: #2f3846;
    --thead: #111720;
    --hover-row: rgb(238 242 247 / .025);
    --shadow: rgb(0 0 0 / .4);
    --shadow-deep: rgb(0 0 0 / .55);
    --pool-aqua: rgb(115 209 201 / .10);
    --pool-amber: rgb(231 167 93 / .07);
    --aqua-fill: #73d1c9;
    --on-aqua: #062522;
    --moon: #0b0e14;
  }
  /* One extra type selector: the component rules below share the class specificity and come later. */
  html .eclipse-stage, html .eclipse-gauge, html .eclipse-sky, html .skip--eclipse, html .eclipse-mini { display: none; }
}

/* ── canvas ───────────────────────────────────────────────────────────────────────────────── */
html { scroll-padding-top: 80px; }
/* The sky is the only viewport-sized painted layer; body keeps a SOLID token background so Safari's
   tab tint (sampled from body) and every contrast audit read a real colour, never a gradient. */
body { background-color: var(--ink); isolation: isolate; }
.eclipse-sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.eclipse-sky > i { position: absolute; inset: 0; display: block; }
.eclipse-sky__pools { background:
  radial-gradient(900px 520px at 78% -8%, var(--pool-aqua), transparent 70%),
  radial-gradient(760px 460px at 6% 4%, var(--pool-amber), transparent 68%); }
.eclipse-sky__dusk { opacity: 0; will-change: opacity; animation-name: eclipse-sky-dusk;
  background: radial-gradient(140% 100% at 50% -20%, #c9d2de 0%, #d6dee9 55%, #dfe5ee 100%); }
html[data-eclipse="night"] .eclipse-sky__dusk, html[data-eclipse="totality"] .eclipse-sky__dusk { visibility: hidden; }
.eclipse-sky__stars { opacity: 0; will-change: opacity; animation-name: eclipse-stars;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23eef2f7'%3E%3Ccircle cx='12' cy='30' r='.8'/%3E%3Ccircle cx='41' cy='9' r='.6'/%3E%3Ccircle cx='70' cy='44' r='1.1'/%3E%3Ccircle cx='96' cy='18' r='.7'/%3E%3Ccircle cx='131' cy='36' r='.9'/%3E%3Ccircle cx='150' cy='72' r='.6'/%3E%3Ccircle cx='23' cy='88' r='1'/%3E%3Ccircle cx='58' cy='101' r='.7'/%3E%3Ccircle cx='88' cy='79' r='.6'/%3E%3Ccircle cx='114' cy='110' r='.9'/%3E%3Ccircle cx='140' cy='131' r='.7'/%3E%3Ccircle cx='9' cy='139' r='.6'/%3E%3Ccircle cx='47' cy='150' r='.9'/%3E%3Ccircle cx='77' cy='127' r='.6'/%3E%3Ccircle cx='104' cy='152' r='.8'/%3E%3Ccircle cx='126' cy='93' r='.6'/%3E%3Ccircle cx='33' cy='60' r='.7'/%3E%3Ccircle cx='157' cy='12' r='.8'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='%23eef2f7'%3E%3Ccircle cx='12' cy='30' r='.8'/%3E%3Ccircle cx='41' cy='9' r='.6'/%3E%3Ccircle cx='70' cy='44' r='1.1'/%3E%3Ccircle cx='96' cy='18' r='.7'/%3E%3Ccircle cx='131' cy='36' r='.9'/%3E%3Ccircle cx='150' cy='72' r='.6'/%3E%3Ccircle cx='23' cy='88' r='1'/%3E%3Ccircle cx='58' cy='101' r='.7'/%3E%3Ccircle cx='88' cy='79' r='.6'/%3E%3Ccircle cx='114' cy='110' r='.9'/%3E%3Ccircle cx='140' cy='131' r='.7'/%3E%3Ccircle cx='9' cy='139' r='.6'/%3E%3Ccircle cx='47' cy='150' r='.9'/%3E%3Ccircle cx='77' cy='127' r='.6'/%3E%3Ccircle cx='104' cy='152' r='.8'/%3E%3Ccircle cx='126' cy='93' r='.6'/%3E%3Ccircle cx='33' cy='60' r='.7'/%3E%3Ccircle cx='157' cy='12' r='.8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px, 260px 260px; background-position: 0 0, 80px 40px; }

/* ── the eclipse stage ────────────────────────────────────────────────────────────────────────
   Geometry follows the brand mark: sun r 52, moon r 51, orbit ring r 56 stroke 8. `--R` is the sun
   radius; every length is a multiple of it, so the same markup serves the hero and the page headers.
   The stage is physically LTR on every locale: astronomy and the logo do not mirror. */
.eclipse-stage { --R: clamp(40px, 4.5vw, 64px); position: relative; width: calc(var(--R) * 5.5);
  max-width: 100%; height: calc(var(--R) * 2.6); margin: 28px 0 26px; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; }
.eclipse-orbit { position: absolute; left: var(--R); top: calc(var(--R) * .3);
  width: calc(var(--R) * 2); height: calc(var(--R) * 2); }
/* Zero-specificity base so each layer's own rule below always wins. */
:where(.eclipse-orbit > i) { position: absolute; inset: 0; margin: auto; display: block; border-radius: 50%; }
.eclipse-glow { inset: -10% -35%; pointer-events: none; animation-name: eclipse-glow;
  background: radial-gradient(ellipse closest-side, rgb(115 209 201 / .45), rgb(231 167 93 / .16) 48%, transparent 74%); }
.eclipse-sun { cursor: pointer; background:
  radial-gradient(circle closest-side, transparent 55%, rgb(0 0 0 / .14) 100%),
  radial-gradient(circle closest-side, #dff7f3 0 28%, #73d1c9 60%, #4fb3aa 100%); }
.eclipse-corona { inset: -10% -40%; opacity: 0; transform: scale(.62); pointer-events: none;
  will-change: transform, opacity; animation-name: eclipse-corona; }
.eclipse-corona > b { position: absolute; display: block; }
.eclipse-corona__glow { inset: 0; border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgb(238 242 247 / .7) 28%, rgb(115 209 201 / .32) 44%, transparent 68%); }
/* The mask stays on the square, non-rotating box; only the conic streamers turn, and only at night. */
.eclipse-corona__rays { left: 50%; top: 50%; width: calc(var(--R) * 3.4); height: calc(var(--R) * 3.4);
  margin: calc(var(--R) * -1.7) 0 0 calc(var(--R) * -1.7); border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 36%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 36%, transparent 100%); }
.eclipse-corona__rays::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, rgb(238 242 247 / .5) 0 2.5deg, transparent 5deg 16deg);
  animation: eclipse-turn 140s linear infinite; animation-play-state: paused; }
html[data-eclipse="night"] .eclipse-corona__rays::before,
html[data-eclipse="totality"] .eclipse-corona__rays::before { animation-play-state: running; }
.eclipse-moon { width: calc(100% * 51 / 52); height: calc(100% * 51 / 52); cursor: grab;
  touch-action: pan-y; will-change: transform; animation-name: eclipse-moon;
  transform: translate3d(122.35%, 0, 0);
  background: radial-gradient(circle at 38% 34%, #2a3240, var(--moon) 72%);
  box-shadow: inset 0 0 0 1px rgb(238 242 247 / .08), inset 0 0 calc(var(--R) * .3) rgb(255 255 255 / .05); }
.eclipse-moon:active, .eclipse-stage.is-dragging .eclipse-moon { cursor: grabbing; }
@media (pointer: coarse) { .eclipse-moon::after { content: ""; position: absolute; inset: -12px; } }
.eclipse-beads { font-size: var(--R); width: .12em; height: .12em; inset: auto; top: 50%; left: -.06em;
  margin: 0; translate: 0 -50%; opacity: 0; pointer-events: none; animation-name: eclipse-beads;
  box-shadow: 0 -.34em 0 .02em #fff, -.05em -.18em 0 .025em #fff, -.07em 0 0 .03em #fffbe8,
    -.05em .17em 0 .02em #fff, 0 .32em 0 .015em #fff; }
.eclipse-diamond { font-size: var(--R); width: .6em; height: .6em; inset: auto; left: -.3em; top: 50%;
  margin: 0; translate: 0 -50%; opacity: 0; pointer-events: none; animation-name: eclipse-diamond;
  background: radial-gradient(circle, #fff 0 20%, rgb(255 244 214 / .85) 40%, transparent 70%); }
.eclipse-ring { inset: calc(var(--R) * -8 / 52); border: calc(var(--R) * 8 / 52) solid var(--ring);
  pointer-events: none; }
.eclipse-horizon { position: absolute; inset: auto 0 0 0; height: 46%; opacity: 0; pointer-events: none;
  animation-name: eclipse-horizon;
  background: linear-gradient(to top, rgb(231 167 93 / .4), rgb(231 167 93 / .1) 50%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 28%, #000 72%, transparent); }
.eclipse-hint { position: absolute; top: 100%; inset-inline-start: 0; margin: 6px 0 0; font-size: 12.5px;
  color: var(--slate); text-align: start; pointer-events: none; animation-name: eclipse-hint; visibility: hidden; }
html[data-eclipse-ready] .eclipse-hint { visibility: visible; }
.eclipse-stage.is-manual .eclipse-hint { visibility: hidden; }

/* The miniature: sun, moon and orbit ring at the brand mark's proportions inside any square box
   (the masthead wordmark). It covers the canonical mark image beneath it and equals it at 100 %. */
.eclipse-mini { position: absolute; inset: 0; display: block; }
.eclipse-mini > b { position: absolute; display: block; border-radius: 50%; }
.eclipse-mini__sun { inset: 9.375%; background: radial-gradient(circle closest-side, #dff7f3 0 28%, #73d1c9 60%, #4fb3aa 100%); }
.eclipse-mini__moon { inset: 9.375%; width: calc(81.25% * 51 / 52); height: calc(81.25% * 51 / 52); margin: auto;
  background: var(--moon); animation-name: eclipse-moon; transform: translate3d(122.35%, 0, 0); }
.eclipse-mini__ring { inset: 3.125%; border: calc(100% * 8 / 128) solid var(--ring); }

/* ── choreography (percent = eclipse progress; scrubbed by eclipse.js) ─────────────────────── */
.eclipse-moon, .eclipse-glow, .eclipse-corona, .eclipse-beads, .eclipse-diamond, .eclipse-horizon,
.eclipse-hint, .eclipse-sky__dusk, .eclipse-sky__stars, .eclipse-gauge__carrier, .eclipse-gauge__fill,
.eclipse-gauge__mini, .eclipse-mini__moon {
  animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both;
  animation-play-state: paused; }
@keyframes eclipse-moon { 0% { transform: translate3d(122.35%, 0, 0); } 88% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-23.53%, 0, 0); } }
@keyframes eclipse-glow { 0%, 40% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes eclipse-sky-dusk { 0%, 12% { opacity: 0; } 88%, 100% { opacity: 1; } }
@keyframes eclipse-beads { 0%, 80% { opacity: 0; } 84% { opacity: 1; } 87.5%, 100% { opacity: 0; } }
@keyframes eclipse-diamond { 0%, 85% { opacity: 0; transform: scale(.4); } 87% { opacity: 1; transform: scale(1); } 89%, 100% { opacity: 0; transform: scale(1.7); } }
@keyframes eclipse-corona { 0%, 84% { opacity: 0; transform: scale(.62); } 95%, 100% { opacity: 1; transform: scale(1); } }
@keyframes eclipse-stars { 0%, 88% { opacity: 0; } 100% { opacity: .5; } }
@keyframes eclipse-horizon { 0%, 80% { opacity: 0; } 92%, 100% { opacity: 1; } }
@keyframes eclipse-hint { 0%, 20% { opacity: 1; } 30%, 100% { opacity: 0; } }
@keyframes eclipse-needle { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -100%, 0); } }
@keyframes eclipse-fill { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
@keyframes eclipse-turn { to { transform: rotate(360deg); } }

/* ── the darkness gauge ───────────────────────────────────────────────────────────────────────
   A native vertical range is the accessible object; the rail, thumb (a live miniature eclipse) and
   needle are decoration. Hidden until the engine reports ready, so a blocked script never leaves an
   inert control on the page. */
.eclipse-gauge { --e: 0; --rail-h: min(46vh, 340px); --travel: calc(var(--rail-h) - 22px);
  position: fixed; top: 50%; inset-inline-end: 12px; z-index: 3; width: 44px; translate: 0 -50%;
  display: grid; justify-items: center; gap: 8px; contain: layout; visibility: hidden; }
html[data-eclipse-ready] .eclipse-gauge { visibility: visible; }
.eclipse-gauge__rail { position: relative; display: block; width: 4px; height: var(--rail-h);
  border-radius: 2px; background: var(--line-strong); }
.eclipse-gauge__fill { position: absolute; inset: 0; display: block; border-radius: 2px; background: var(--aqua);
  transform-origin: bottom; transform: scaleY(0); will-change: transform; animation-name: eclipse-fill; }
.eclipse-gauge__tick { position: absolute; left: -4px; display: block; width: 12px; height: 1px;
  background: var(--slate); bottom: calc(11px + var(--at) * var(--travel)); }
.eclipse-gauge__carrier { position: absolute; left: 50%; bottom: 0; display: block; width: 22px;
  height: var(--travel); margin-left: -11px; will-change: transform; pointer-events: none;
  animation-name: eclipse-needle; }
.eclipse-gauge__thumb { position: absolute; left: 0; bottom: 0; display: block; width: 22px; height: 22px;
  border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--graphite), 0 0 0 3px var(--ring);
  background: radial-gradient(circle closest-side, #dff7f3 0 28%, #73d1c9 60%, #4fb3aa 100%); }
.eclipse-gauge__mini { position: absolute; inset: 0; margin: auto; display: block;
  width: calc(22px * 51 / 52); height: calc(22px * 51 / 52); border-radius: 50%; background: var(--moon);
  animation-name: eclipse-moon; transform: translate3d(122.35%, 0, 0); }
.eclipse-gauge__needle { position: absolute; bottom: 10px; inset-inline-end: 100%; display: block;
  width: 10px; height: 2px; background: var(--frost); }
.eclipse-gauge__phase { position: absolute; bottom: calc(11px + var(--e) * var(--travel));
  inset-inline-end: calc(100% + 14px); translate: 0 50%; padding: 3px 8px; border: 1px solid var(--line-strong);
  border-radius: 6px; background: var(--graphite); color: var(--frost);
  font: 600 11.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap;
  opacity: 0; pointer-events: none; }
.eclipse-gauge:hover .eclipse-gauge__phase, .eclipse-gauge:focus-within .eclipse-gauge__phase,
.eclipse-gauge.is-dragging .eclipse-gauge__phase { opacity: 1; }
.eclipse-gauge__read { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums; color: var(--slate); }
.eclipse-gauge__reset { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line-strong);
  border-radius: 50%; background: var(--graphite); color: var(--frost); font-size: 13px; line-height: 1;
  cursor: pointer; }
.eclipse-gauge__reset:hover { border-color: var(--aqua); color: var(--aqua); }
.eclipse-gauge__range { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: var(--rail-h);
  margin: 0; opacity: 0; writing-mode: vertical-lr; direction: rtl; cursor: ns-resize; touch-action: none; }
.eclipse-gauge:has(.eclipse-gauge__range:focus-visible) .eclipse-gauge__rail {
  outline: 2px solid var(--aqua); outline-offset: 10px; border-radius: 2px; }
/* On touch screens only the rail column is the target, so a thumb resting at the screen edge to
   scroll is never swallowed; the 24 px column still meets WCAG 2.5.8. */
@media (pointer: coarse) { .eclipse-gauge__range { left: 50%; width: 24px; translate: -50% 0; } }
@media (max-width: 900px) { .eclipse-gauge { width: 34px; inset-inline-end: 0; --rail-h: min(40vh, 220px); } }
@media (max-height: 360px) { .eclipse-gauge { display: none; } }

/* ── preferences ──────────────────────────────────────────────────────────────────────────── */
/* Colour and opacity are not motion (WCAG 2.3.3): the palette steps and the gauge stay; the moon is
   posed by the engine instead of tweened, and the sparkle layers are gone. */
@media (prefers-reduced-motion: reduce) {
  .eclipse-corona__rays::before { animation: none; }
  .eclipse-diamond, .eclipse-beads { display: none; }
}
@media (prefers-contrast: more) {
  :root, html[data-eclipse="dusk"] { --line: #6b7686; --line-soft: #8894a4; }
  html[data-eclipse="night"], html[data-eclipse="totality"] { --line: #8894a4; --line-soft: #6b7686; }
  .eclipse-sky__dusk, .eclipse-sky__pools { display: none; }
  .eclipse-gauge__phase { opacity: 1; }
}
@media (prefers-reduced-transparency: reduce) { .eclipse-sky__dusk { display: none; } }
@media (forced-colors: active) {
  .eclipse-sky, .eclipse-stage { display: none; }
  .eclipse-gauge__rail { background: CanvasText; }
  .eclipse-gauge__fill, .eclipse-gauge__thumb { background: Highlight; }
  .eclipse-gauge__thumb { border: 1px solid CanvasText; }
  .eclipse-gauge__needle { background: CanvasText; }
}
/* Visually hidden helper for the gauge description (the page stylesheet is not guaranteed here). */
.eclipse-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }