:where(canvas.oxled) { display: block; width: 100%; }
.led-host:not(.is-led) > canvas { display: none; }
.led-host.is-led .led { display: none; }

.led {
  --led-c: #F4F4F5; --led-rgb: 244, 244, 245;
  --led-pitch: 3px; --led-hole: 0.62;         --led-size: 1.125rem;
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em;
  margin: 0; padding: 0.9em 1.25em; border-radius: 8px;
  background-color: #070709;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.075) 0 30%, transparent 38%);
  background-size: var(--led-pitch) var(--led-pitch);
  box-shadow: inset 0 0 0 1px #27272A;
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace); font-size: var(--led-size); font-weight: 700;
  line-height: 1.1; letter-spacing: 0.14em; text-transform: uppercase; text-align: center;
  color: var(--led-c);
}
.led > span {
  display: block; max-width: 100%; padding-left: 0.14em;   overflow-wrap: anywhere;
  text-shadow: 0 0 0.3em rgba(var(--led-rgb), 0.8), 0 0 0.9em rgba(var(--led-rgb), 0.35);
}
.led::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(circle at center, transparent 0 40%, rgba(7, 7, 9, var(--led-hole)) 56%);
  background-size: var(--led-pitch) var(--led-pitch);
}
.led--two { gap: 0.35em; }
.led--mini {
  --led-size: 0.75rem; --led-pitch: 2px; --led-hole: 0.55;
  display: inline-flex; max-width: 100%; min-width: 0; gap: 0.2em; padding: 0.5em 0.75em; border-radius: 6px; letter-spacing: 0.1em;
}
.led--mini > span { padding-left: 0.1em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }

.led[data-color="adv"]    { --led-c: var(--sev-adv, #FCD34D);  --led-rgb: var(--sev-adv-rgb, 252, 211, 77); }
.led[data-color="warn"]   { --led-c: var(--sev-warn, #F59E0B); --led-rgb: var(--sev-warn-rgb, 245, 158, 11); }
.led[data-color="crit"]   { --led-c: var(--sev-crit, #F87171); --led-rgb: var(--sev-crit-rgb, 248, 113, 113); }
.led[data-color="ok"]     { --led-c: var(--sev-live, #4ADE80); --led-rgb: var(--sev-live-rgb, 74, 222, 128); }
.led[data-color="accent"] { --led-c: var(--pillar-accent, #CF8BE8); --led-rgb: var(--pillar-accent-rgb, 207, 139, 232); }

@media (max-width: 480px) {
  .led:not(.led--mini) { --led-size: 0.9375rem; padding: 0.8em 0.9em; letter-spacing: 0.1em; }
  .led:not(.led--mini) > span { padding-left: 0.1em; }
}
@media (forced-colors: active) {
  .led::after { display: none; }
  .led > span { text-shadow: none; }
}