@layer overscan {
ov-mosaic {
  --ov-m-glow: calc(var(--ov-bloom, .2) * 10px);
  --ov-m-gap: color-mix(in srgb, var(--ov-dim) 60%, transparent);
  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-mosaic__label {
  grid-column: 1 / -1;
  font-size: var(--ov-size-1, 10px);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}
.ov-mosaic__rulebox {
  color: var(--ov-faint);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ov-mosaic__agev {
  font-size: calc(var(--ov-size-2, 12px) * 2.2);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 var(--ov-m-glow) currentColor;
}
.ov-mosaic__agewhat { letter-spacing: .1em; overflow-wrap: anywhere; }
.ov-mosaic__agev[data-ov-dashed] { font-size: calc(var(--ov-size-2, 12px) * 1.5); letter-spacing: .2em; }
.ov-mosaic__compiled {
  color: var(--ov-faint);
  letter-spacing: .08em;
  margin-block-start: -4px;
}
.ov-mosaic__plot {
  position: relative;
  aspect-ratio: 8 / 5;
  min-block-size: 120px;
  border: var(--ov-rule, 1px) solid var(--ov-line-strong);
  background: var(--ov-field);
  overflow: hidden;
}
.ov-mosaic__grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--ov-mosaic-cols, 1), 1fr);
  grid-template-rows: repeat(var(--ov-mosaic-rows, 1), 1fr);
}
.ov-mosaic__grid > i { display: block; min-inline-size: 0; }
.ov-mosaic__grid > i[data-v="0"] { background: color-mix(in srgb, var(--ov-accent) 4%, transparent); }
.ov-mosaic__grid > i[data-v="1"] { background: color-mix(in srgb, var(--ov-accent) 16%, transparent); }
.ov-mosaic__grid > i[data-v="2"] { background: color-mix(in srgb, var(--ov-accent) 32%, transparent); }
.ov-mosaic__grid > i[data-v="3"] { background: color-mix(in srgb, var(--ov-accent) 52%, transparent); }
.ov-mosaic__grid > i[data-v="4"] { background: color-mix(in srgb, var(--ov-accent) 74%, transparent); }
.ov-mosaic__grid > i[data-v="5"] { background: var(--ov-accent); }
.ov-mosaic__grid > i[data-aged] {
  background-image: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--ov-alarm) 60%, transparent) 0 1px, transparent 1px 4px);
}
.ov-mosaic__grid > i[data-cover="out-of-range"],
.ov-mosaic__swatch[data-cover="out-of-range"] {
  background:
    repeating-linear-gradient(90deg, var(--ov-m-gap) 0 1px, transparent 1px 5px);
}
.ov-mosaic__grid > i[data-cover="blocked"],
.ov-mosaic__swatch[data-cover="blocked"] {
  background:
    repeating-linear-gradient(135deg, var(--ov-m-gap) 0 1.5px, transparent 1.5px 4px);
}
.ov-mosaic__grid > i[data-cover="cone"],
.ov-mosaic__swatch[data-cover="cone"] {
  background:
    repeating-linear-gradient(45deg, var(--ov-m-gap) 0 1.5px, transparent 1.5px 4px);
}
.ov-mosaic__grid > i[data-cover="site-down"],
.ov-mosaic__swatch[data-cover="site-down"] {
  background:
    repeating-linear-gradient(45deg, color-mix(in srgb, var(--ov-alarm) 55%, transparent) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--ov-alarm) 55%, transparent) 0 1.5px, transparent 1.5px 5px);
}
.ov-mosaic__grid > i[data-cover="awaited"],
.ov-mosaic__swatch[data-cover="awaited"] {
  background:
    radial-gradient(circle at 50% 50%, var(--ov-m-gap) 0 .8px, transparent .9px) 0 0 / 4px 4px;
}
.ov-mosaic__grid > i[data-cover="not-selected"],
.ov-mosaic__swatch[data-cover="not-selected"] {
  background: color-mix(in srgb, var(--ov-dim) 12%, transparent);
}
.ov-mosaic__edges {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
}
.ov-mosaic__edges path {
  fill: none;
  stroke: var(--ov-line-strong);
  stroke-width: 1;
}
.ov-mosaic__tags { position: absolute; inset: 0; pointer-events: none; }
.ov-mosaic__tag {
  position: absolute;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  padding: 1px 4px;
  font-size: 8px;
  line-height: 1.25;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--ov-ink);
  background: color-mix(in srgb, var(--ov-case, #000) 78%, transparent);
  border: var(--ov-rule, 1px) solid var(--ov-line-strong);
  font-variant-numeric: tabular-nums;
}
.ov-mosaic__tag b { letter-spacing: .12em; }
.ov-mosaic__tag[data-aged] { color: var(--ov-alarm); border-color: var(--ov-alarm); border-style: dashed; }
.ov-mosaic__tag[data-undated] { color: var(--ov-alarm); border-color: var(--ov-alarm); border-style: dotted; }
.ov-mosaic__void {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  letter-spacing: .2em;
  color: var(--ov-alarm);
  background: var(--ov-field);
  border: var(--ov-rule, 1px) dashed var(--ov-alarm);
}
.ov-mosaic__void[hidden] { display: none; }
.ov-mosaic__probe {
  min-block-size: 1.4em;
  color: var(--ov-accent);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  border-block-end: var(--ov-rule, 1px) dotted var(--ov-line);
}
.ov-mosaic__probe:empty::before {
  content: "POINT AT A REGION FOR ITS OWN SOURCE AND AGE";
  color: var(--ov-faint);
  letter-spacing: .1em;
}
.ov-mosaic__srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ov-mosaic__src {
  display: grid;
  grid-template-columns: minmax(5ch, auto) minmax(0, 13ch) 1fr auto;
  align-items: baseline;
  gap: 1ch;
  padding: 2px 5px;
  border-inline-start: 3px solid var(--ov-line);
  font-variant-numeric: tabular-nums;
}
.ov-mosaic__sid { letter-spacing: .12em; }
.ov-mosaic__sage { color: var(--ov-faint); }
.ov-mosaic__sword { letter-spacing: .1em; }
.ov-mosaic__scells { color: var(--ov-faint); }
.ov-mosaic__src[data-ov-status="up"] { border-inline-start-color: var(--ov-accent); }
.ov-mosaic__src[data-ov-status="aged"] {
  border-inline-start-color: var(--ov-alarm);
  border-inline-start-style: dashed;
  color: var(--ov-alarm);
}
.ov-mosaic__src[data-ov-status="undated"] {
  border-inline-start-color: var(--ov-alarm);
  border-inline-start-style: dotted;
  color: var(--ov-alarm);
}
.ov-mosaic__src[data-ov-status="down"] { border-inline-start: 3px double var(--ov-alarm); color: var(--ov-alarm); }
.ov-mosaic__src:is([data-ov-status="awaited"], [data-ov-status="idle"], [data-ov-status="not-selected"]) { color: var(--ov-dim); }
.ov-mosaic__src[data-ov-status="expired"] { color: var(--ov-dim); text-decoration: line-through; }
.ov-mosaic__gaps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ov-mosaic__gap {
  display: grid;
  grid-template-columns: 12px minmax(0, 16ch) auto 1fr;
  align-items: center;
  gap: 1ch;
  color: var(--ov-faint);
  font-variant-numeric: tabular-nums;
}
.ov-mosaic__swatch {
  inline-size: 12px;
  block-size: 12px;
  box-sizing: border-box;
  border: var(--ov-rule, 1px) solid var(--ov-line-strong);
}
.ov-mosaic__swatch[data-fills] { border-style: dashed; }
.ov-mosaic__gword { letter-spacing: .1em; color: var(--ov-ink); }
.ov-mosaic__gclass { letter-spacing: .12em; text-align: end; }
.ov-mosaic__gap:not([data-fills]) .ov-mosaic__gclass { color: var(--ov-alarm); }
.ov-mosaic__foot { color: var(--ov-alarm); letter-spacing: .08em; overflow-wrap: anywhere; }
.ov-mosaic__foot:empty { display: none; }
.ov-mosaic__say {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@container (max-width: 380px) {
  .ov-mosaic__src { grid-template-columns: 1fr auto; }
  .ov-mosaic__sage { grid-column: 1 / -1; }
  .ov-mosaic__gap { grid-template-columns: 12px 1fr; }
  .ov-mosaic__gn, .ov-mosaic__gclass { grid-column: 2; text-align: start; }
  .ov-mosaic__agev { font-size: calc(var(--ov-size-2, 12px) * 1.7); }
}
}