@layer overscan {
ov-watchdog {
  --ov-wd-ring: 48px;
  --ov-wd-gap: 14px;
  --ov-wd-glow: calc(var(--ov-bloom, .2) * 12px);
  display: grid;
  gap: 8px;
  min-inline-size: 0;
  font-family: var(--ov-font-mono);
  font-size: var(--ov-size-1, 10px);
  color: var(--ov-ink);
}
.ov-watchdog__since { letter-spacing: .1em; }
.ov-watchdog__foot:empty { display: none; }
.ov-watchdog__stages,
.ov-watchdog__pagerow {
  display: grid;
  gap: var(--ov-wd-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ov-watchdog__stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--ov-wd-ring) minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  color: var(--ov-accent);
}
.ov-watchdog__stage:not([data-ov-beat="live"], [data-ov-beat="page"]) { color: var(--ov-alarm); }
.ov-watchdog__ring {
  inline-size: var(--ov-wd-ring);
  block-size: var(--ov-wd-ring);
  overflow: visible;
  filter: drop-shadow(0 0 var(--ov-wd-glow) currentColor);
}
.ov-watchdog__ringtrack {
  fill: color-mix(in srgb, currentColor 7%, var(--ov-field));
  stroke: var(--ov-line);
  stroke-width: 3;
}
.ov-watchdog__ringarc {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
}
.ov-watchdog__ringmark {
  stroke: var(--ov-ink);
  stroke-width: 1.5;
  opacity: .7;
}
.ov-watchdog__ringseq {
  fill: var(--ov-ink);
  font: 8.5px var(--ov-font-mono);
  text-anchor: middle;
}
.ov-watchdog__stage:is([data-ov-beat="late"], [data-ov-beat="shared"]) .ov-watchdog__ringarc { stroke-dasharray: 5 3; }
.ov-watchdog__stage[data-ov-beat="stalled"] .ov-watchdog__ringtrack { stroke: currentColor; stroke-dasharray: 1 3; }
.ov-watchdog__stage:is([data-ov-beat="none"], [data-ov-beat="uncounted"], [data-ov-beat="shared"]) .ov-watchdog__ringtrack {
  stroke: currentColor;
  stroke-dasharray: 2 4;
}
.ov-watchdog__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 1.2ch;
}
.ov-watchdog__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  color: var(--ov-ink);
  letter-spacing: .12em;
  overflow-wrap: anywhere;
}
.ov-watchdog__period,
.ov-watchdog__age {
  color: var(--ov-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ov-watchdog__word {
  padding: 0 5px;
  border: var(--ov-rule, 1px) solid currentColor;
  letter-spacing: .12em;
  white-space: nowrap;
}
.ov-watchdog__stage[data-ov-beat="late"] .ov-watchdog__word { border-style: dashed; }
.ov-watchdog__stage[data-ov-beat="stalled"] .ov-watchdog__word { border: 3px double currentColor; }
.ov-watchdog__stage:is([data-ov-beat="none"], [data-ov-beat="uncounted"], [data-ov-beat="shared"]) .ov-watchdog__word { border-style: dotted; }
.ov-watchdog__trace {
  display: block;
  inline-size: 100%;
  block-size: 40px;
  margin-block-start: 4px;
  overflow: visible;
  filter: drop-shadow(0 0 var(--ov-wd-glow) currentColor);
}
.ov-watchdog__trace path { fill: none; vector-effect: non-scaling-stroke; }
.ov-watchdog__base { stroke: var(--ov-line); stroke-width: 1; }
.ov-watchdog__moved { stroke: currentColor; stroke-width: 1.8; }
.ov-watchdog__held { stroke: currentColor; stroke-width: 1.8; }
.ov-watchdog__none { stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 2 2; }
.ov-watchdog__flat { stroke: var(--ov-alarm); stroke-width: 3; }
.ov-watchdog__expected { stroke: var(--ov-alarm); stroke-width: 1; stroke-dasharray: 3 3; }
.ov-watchdog__missing { fill: color-mix(in srgb, var(--ov-alarm) 7%, transparent); }
.ov-watchdog__now { stroke: var(--ov-faint); stroke-width: 1; }
.ov-watchdog__why {
  display: block;
  margin-block-start: 2px;
  color: var(--ov-faint);
  line-height: 1.35;
}
.ov-watchdog__why:empty { display: none; }
.ov-watchdog__stage:not([data-ov-beat="live"], [data-ov-beat="page"]) .ov-watchdog__why { color: var(--ov-alarm); }
.ov-watchdog__conduit {
  position: absolute;
  inset-inline-start: calc(var(--ov-wd-ring) / 2 - 1px);
  inset-block-start: var(--ov-wd-ring);
  inset-block-end: calc(-1 * var(--ov-wd-gap));
  inline-size: 2px;
  background: color-mix(in srgb, currentColor 40%, transparent);
}
.ov-watchdog__stage:is([data-ov-beat="late"], [data-ov-beat="none"], [data-ov-beat="shared"]) .ov-watchdog__conduit {
  background: repeating-linear-gradient(to bottom, currentColor 0 3px, transparent 3px 7px);
}
.ov-watchdog__pulse {
  position: absolute;
  inset-inline-start: -3px;
  inset-block-start: 0;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 calc(var(--ov-wd-glow) + 4px) currentColor;
  opacity: 0;
}
.ov-watchdog__sink {
  position: relative;
  display: grid;
  gap: 3px;
  min-block-size: 16px;
  padding-inline-start: calc(var(--ov-wd-ring) + 12px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ov-alarm);
}
.ov-watchdog__sink[hidden] { display: none; }
ov-watchdog[data-ov-path="live"] .ov-watchdog__sink { color: var(--ov-accent); }
.ov-watchdog__sink::before {
  content: '';
  position: absolute;
  inset-inline-start: calc(var(--ov-wd-ring) / 2 - 6px);
  inset-block-start: 1px;
  inline-size: 10px;
  block-size: 10px;
  border: 2px solid currentColor;
  rotate: 45deg;
  box-shadow: 0 0 var(--ov-wd-glow) currentColor;
}
.ov-watchdog__pagerow {
  padding-block-start: 8px;
  border-block-start: var(--ov-rule, 1px) dashed var(--ov-line);
}
.ov-watchdog__page { color: var(--ov-faint); }
.ov-watchdog__page .ov-watchdog__ringtrack { stroke-dasharray: 2 3; }
.ov-watchdog__dial { stroke: var(--ov-line); stroke-width: 1.5; }
.ov-watchdog__hand { stroke: var(--ov-ink); stroke-width: 2; stroke-linecap: round; }
.ov-watchdog__page .ov-watchdog__moved { stroke: var(--ov-faint); stroke-width: 1.2; }
.ov-watchdog__foot {
  letter-spacing: .1em;
  color: var(--ov-alarm);
}
.ov-watchdog__say,
.ov-watchdog__desc {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-ov-unproven] {
  position: relative;
  outline: 2px dashed var(--ov-alarm);
  outline-offset: 3px;
  margin-block-end: calc(2.6em + 10px);
}
[data-ov-unproven]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(135deg,
    transparent 0 7px,
    color-mix(in srgb, var(--ov-alarm) 16%, transparent) 7px 9px);
}
[data-ov-unproven]::after {
  content: attr(data-ov-unproven);
  position: absolute;
  inset-block-start: calc(100% + 5px);
  inset-inline: -3px;
  z-index: 1;
  padding: 3px 6px;
  pointer-events: none;
  font: var(--ov-size-1, 10px)/1.3 var(--ov-font-mono);
  letter-spacing: .12em;
  color: var(--ov-alarm);
  background: var(--ov-field);
  border: var(--ov-rule, 1px) dashed var(--ov-alarm);
}
}