@layer overscan {
ov-map {
  position: relative;
  display: block;
  aspect-ratio: auto;
  background: var(--ov-panel);
  border: var(--ov-bezel) solid var(--ov-line-strong);
}
.ov-map__svg { inline-size: 100%; aspect-ratio: 16 / 10; display: block; }
.ov-map__grid { stroke: var(--ov-line); stroke-width: 0.3; }
.ov-map__grid-l {
  fill: var(--ov-faint);
  font-family: var(--ov-font-mono);
  font-size: 3px;
}
.ov-map__naive {
  fill: none;
  stroke: var(--ov-alarm);
  stroke-width: 0.5;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}
.ov-map__true {
  fill: none;
  stroke: var(--ov-accent);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.ov-map__mark { fill: var(--ov-accent-2); }
.ov-map__label {
  fill: var(--ov-ink);
  font-family: var(--ov-font-mono);
  font-size: 3.2px;
}
.ov-map__key {
  display: flex;
  padding: 6px 8px;
  border-block-start: var(--ov-rule) solid var(--ov-line);
  flex-direction: column;
  gap: 2px;
  font-size: var(--ov-size-1);
  color: var(--ov-dim);
}
.ov-map__key i {
  display: inline-block;
  inline-size: 12px;
  block-size: 2px;
  margin-inline-end: 7px;
  vertical-align: middle;
}
.ov-map__key i.is-naive { background: var(--ov-alarm); }
.ov-map__key i.is-true { background: var(--ov-accent); }
.ov-map__unplaced {
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ov-alarm);
}
ov-wave {
  position: relative;
  display: block;
  block-size: var(--ov-wave-height, 110px);
  background: var(--ov-panel);
  border: var(--ov-bezel) solid var(--ov-line-strong);
}
.ov-wave__svg { inline-size: 100%; block-size: 100%; display: block; }
.ov-wave__trace {
  fill: none;
  stroke: var(--ov-accent);
  stroke-width: 1.2;
}
.ov-wave__note {
  position: absolute;
  inset-block-end: 3px;
  inset-inline-start: 7px;
  font-size: var(--ov-size-1);
  color: var(--ov-dim);
  font-variant-numeric: tabular-nums;
}
.ov-vertical {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.6;
}
.ov-vertical--upright { text-orientation: upright; }
.ov-tcy { text-combine-upright: all; }
.ov-var {
  font-family: var(--ov-font-var, var(--ov-font-mono));
  font-variation-settings:
    "MONO" var(--ov-axis-mono, 1),
    "CASL" var(--ov-axis-casl, 0),
    "wght" var(--ov-axis-wght, 400);
}
.ov-var[data-ov-nofont] { text-decoration: underline dotted var(--ov-alarm); }
.ov-elbow {
  --ov-elbow-arm: 46px;
  --ov-elbow-bar: 26px;
  --ov-elbow-r: 30px;
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--ov-accent);
  clip-path: polygon(
    0 0,
    100% 0,
    100% var(--ov-elbow-bar),
    calc(var(--ov-elbow-arm) + var(--ov-elbow-r)) var(--ov-elbow-bar),
    var(--ov-elbow-arm) calc(var(--ov-elbow-bar) + var(--ov-elbow-r)),
    var(--ov-elbow-arm) 100%,
    0 100%
  );
}
.ov-elbow--alt { background: var(--ov-accent-2); }
.ov-elbow-bay {
  display: grid;
  grid-template-columns:
    clamp(calc(var(--ov-elbow-arm, 46px) + var(--ov-elbow-r, 30px)), 38%, 200px)
    minmax(0, 1fr);
  grid-template-rows: 84px minmax(0, 1fr);
  gap: 0;
  block-size: 100%;
}
.ov-elbow-bay > .ov-elbow { grid-area: 1 / 1 / 3 / 2; }
.ov-elbow-bay > .ov-elbow-head { grid-area: 1 / 2; padding: 8px 12px; }
.ov-elbow-bay > .ov-elbow-body { grid-area: 2 / 2; padding: 12px; min-block-size: 0; }
}