.led {
  --led-size: 1em;                                
  --led-on: var(--color-text-accent);              
  --led-off: var(--color-border-subtle);           
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  color: var(--led-on);
}
.led { max-width: 100%; }
.led svg { display: block; height: var(--led-size); width: auto; max-width: 100%; overflow: visible; }   
.led .led__on { fill: var(--led-on); }
.led .led__off { fill: var(--led-off); }
.led--sm { --led-size: 0.5em; }
.led--stat { --led-size: var(--font-size-fluid-stat); }

.led:not([data-led-ready]) { font-family: var(--font-family-display); font-weight: var(--font-weight-extrabold); font-feature-settings: var(--font-feature-tabular); }


.led-panel {
  --led-on: var(--color-brand-lilac);
  --led-off: var(--color-alpha-white-8);
  display: inline-grid; gap: var(--space-2); justify-items: center;
  padding: var(--space-4) var(--space-5);
  background: var(--color-brand-black);
  border: var(--border-width-hairline) solid var(--color-alpha-white-10);
  border-radius: var(--radius-sm);
}
.led-panel .led { --led-on: var(--color-brand-lilac); --led-off: var(--color-alpha-white-8); }

@media (forced-colors: active) {
  .led .led__on { fill: CanvasText; }
  .led .led__off { fill: none; }
}