@layer overscan {
ov-countdown {
  --ov-countdown-size: var(--ov-size-6, 32px);
  display: inline-grid;
  grid-template-columns: auto minmax(calc(9ch + 9 * .12em + 12px), auto);
  grid-template-areas:
    "read tag"
    "note note";
  align-items: baseline;
  column-gap: 1.2ch;
  row-gap: 4px;
  font-family: var(--ov-font-mono);
  font-size: var(--ov-size-1, 10px);
  color: var(--ov-ink);
  vertical-align: middle;
}
.ov-countdown__read {
  grid-area: read;
  font-size: var(--ov-countdown-size);
  line-height: 1;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ov-accent);
}
.ov-countdown__sign { color: var(--ov-faint); }
.ov-countdown__tag,
.ov-countdown__note {
  font-size: var(--ov-size-1, 10px);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ov-countdown__tag {
  grid-area: tag;
  justify-self: start;
  color: var(--ov-faint);
}
.ov-countdown__note {
  grid-area: note;
  contain: inline-size;
  white-space: normal;
  color: var(--ov-faint);
}
ov-countdown[data-ov-state="holding"] .ov-countdown__read { color: var(--ov-ink); }
ov-countdown[data-ov-state="holding"] .ov-countdown__tag {
  padding: 2px 5px;
  border: var(--ov-rule, 1px) solid var(--ov-ink);
  color: var(--ov-ink);
}
ov-countdown[data-ov-refusal] .ov-countdown__read,
ov-countdown[data-ov-refusal] .ov-countdown__tag { color: var(--ov-alarm); }
ov-countdown[data-ov-state="lost"] .ov-countdown__tag {
  padding: 2px 5px;
  border: var(--ov-rule, 1px) solid var(--ov-alarm);
}
ov-countdown[data-ov-state="holding"][data-ov-clock="lost"] .ov-countdown__note { color: var(--ov-alarm); }
.ov-countdown__say {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
}