@layer overscan {
ov-balance {
  --ov-b-glow: calc(var(--ov-bloom, .2) * 10px);
  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-balance__label {
  grid-column: 1 / -1;
  font-size: var(--ov-size-1, 10px);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}
.ov-balance__rulebox {
  color: var(--ov-faint);
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ov-balance__word {
  font-size: calc(var(--ov-size-2, 12px) * 1.5);
  letter-spacing: .1em;
  text-shadow: 0 0 var(--ov-b-glow) currentColor;
}
.ov-balance__why { color: var(--ov-ink); letter-spacing: .06em; line-height: 1.45; overflow-wrap: anywhere; }
.ov-balance__why:empty { display: none; }
ov-balance[data-ov-state="disputed"] .ov-balance__why { color: var(--ov-alarm); }
.ov-balance__body {
  display: grid;
  grid-template-columns: minmax(120px, 34%) 1fr;
  gap: 12px;
  align-items: stretch;
}
.ov-balance__vessel { display: grid; grid-template-rows: 1fr auto; gap: 5px; min-inline-size: 0; }
.ov-balance__shell {
  position: relative;
  min-block-size: 190px;
  border: var(--ov-rule, 1px) solid var(--ov-line-strong);
  border-block-start-width: 2px;
  background: var(--ov-field);
  overflow: hidden;
}
.ov-balance__shell[data-ov-undeclared] {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ov-alarm) 25%, transparent) 0 1px, transparent 1px 5px);
}
.ov-balance__unmeasured {
  position: absolute;
  inset-inline: 0;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--ov-dim) 55%, transparent) 0 1px, transparent 1px 5px);
  border-block: var(--ov-rule, 1px) dashed color-mix(in srgb, var(--ov-dim) 70%, transparent);
}
.ov-balance__span {
  position: absolute;
  inset-inline: 0;
  border-block: var(--ov-rule, 1px) solid color-mix(in srgb, var(--ov-accent) 60%, transparent);
  background: color-mix(in srgb, var(--ov-accent) 5%, transparent);
}
.ov-balance__fill {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--ov-accent) 55%, transparent) 0%,
      color-mix(in srgb, var(--ov-accent) 34%, transparent) 70%,
      color-mix(in srgb, var(--ov-accent) 26%, transparent) 100%);
  border-block-start: 2px solid var(--ov-accent);
}
.ov-balance__fill::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: -3px;
  block-size: 5px;
  background: radial-gradient(120% 150% at 50% 120%,
    transparent 60%, color-mix(in srgb, var(--ov-accent) 75%, transparent) 100%);
  pointer-events: none;
}
.ov-balance__fill::after {
  content: "";
  position: absolute;
  inset-inline: -20%;
  inset-block-start: -2px;
  block-size: 3px;
  background: linear-gradient(90deg,
    transparent 0%, color-mix(in srgb, var(--ov-accent) 90%, transparent) 35%,
    color-mix(in srgb, var(--ov-accent) 90%, transparent) 65%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}
ov-balance[data-ov-moving] .ov-balance__fill::after {
  opacity: .85;
  animation: ov-balance-swell 2.6s linear infinite;
}
@keyframes ov-balance-swell {
  from { transform: translateX(-18%); }
  to { transform: translateX(18%); }
}
@media (prefers-reduced-motion: reduce) {
  ov-balance[data-ov-moving] .ov-balance__fill::after { animation: none; }
}
.ov-balance__gap {
  position: absolute;
  inset-inline: 0;
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--ov-alarm) 45%, transparent) 0 1px, transparent 1px 4px);
}
.ov-balance__gap[hidden] { display: none; }
.ov-balance__mark {
  position: absolute;
  inset-inline: 0;
  block-size: 0;
  border-block-start: 2px solid var(--ov-accent);
  pointer-events: none;
}
.ov-balance__mark[hidden] { display: none; }
.ov-balance__mark b {
  position: absolute;
  inset-block-start: 0;
  padding: 0 3px;
  max-inline-size: 100%;
  box-sizing: border-box;
  font-size: 8px;
  font-weight: normal;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: color-mix(in srgb, var(--ov-case, #000) 82%, transparent);
  color: var(--ov-accent);
  font-variant-numeric: tabular-nums;
}
.ov-balance__mark--level b { inset-inline-start: 0; }
.ov-balance__mark--exp b { inset-inline-end: 0; }
.ov-balance__mark[data-ov-place="on"] b { translate: 0 -50%; }
.ov-balance__mark[data-ov-place="above"] b { translate: 0 -100%; }
.ov-balance__mark[data-ov-place="below"] b { translate: 0 0; }
.ov-balance__mark--exp { border-block-start-style: dashed; border-block-start-color: var(--ov-alarm); }
.ov-balance__mark--exp b { color: var(--ov-alarm); }
.ov-balance__mark--exp[data-ov-pinned] { border-block-start-width: 3px; }
.ov-balance__mark--exp[data-ov-pinned] b { border: var(--ov-rule, 1px) solid var(--ov-alarm); }
.ov-balance__mark--level[data-ov-outside] { border-block-start-style: dotted; }
.ov-balance__mark--level[data-ov-outside] b { color: var(--ov-alarm); }
.ov-balance__spanlabel {
  color: var(--ov-faint);
  font-size: 8px;
  letter-spacing: .08em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.ov-balance__sums { margin: 0; display: grid; align-content: start; gap: 7px; min-inline-size: 0; }
.ov-balance__sums > div {
  display: grid;
  gap: 1px;
  padding-inline-start: 7px;
  border-inline-start: 3px solid var(--ov-line);
}
.ov-balance__sums dt { color: var(--ov-faint); letter-spacing: .14em; }
.ov-balance__sums dd {
  margin: 0;
  font-size: var(--ov-size-2, 12px);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.ov-balance__sums > div:nth-child(1) { border-inline-start-color: var(--ov-accent); }
.ov-balance__sums > div:nth-child(2) { border-inline-start-style: dashed; border-inline-start-color: var(--ov-alarm); }
.ov-balance__frommeters[data-ov-above] { color: var(--ov-alarm); }
.ov-balance__residual[data-ov-over] { color: var(--ov-alarm); }
.ov-balance__sums > div:nth-child(3):has([data-ov-over]) { border-inline-start-color: var(--ov-alarm); }
.ov-balance__streams { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ov-balance__streams[hidden] { display: none; }
.ov-balance__stream {
  display: grid;
  grid-template-columns: 1.5ch 3.5ch 1fr auto minmax(0, 12ch);
  align-items: baseline;
  gap: 1ch;
  padding: 2px 5px;
  border-inline-start: 3px solid var(--ov-line);
  font-variant-numeric: tabular-nums;
}
.ov-balance__stream[data-ov-dir="out"] .ov-balance__arrow { rotate: 180deg; display: inline-block; }
.ov-balance__dir { color: var(--ov-faint); letter-spacing: .1em; }
.ov-balance__sid { letter-spacing: .08em; overflow-wrap: anywhere; }
.ov-balance__sword { letter-spacing: .1em; text-align: end; }
.ov-balance__stream[data-ov-status="reading"] { border-inline-start-color: var(--ov-accent); }
.ov-balance__stream:is([data-ov-status="unknown"], [data-ov-status="failed"]) {
  border-inline-start-style: dotted;
  border-inline-start-color: var(--ov-alarm);
  color: var(--ov-alarm);
}
.ov-balance__foot { color: var(--ov-alarm); letter-spacing: .08em; overflow-wrap: anywhere; }
.ov-balance__foot:empty { display: none; }
.ov-balance__say {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@container (max-width: 400px) {
  .ov-balance__body { grid-template-columns: 1fr; }
  .ov-balance__shell { min-block-size: 150px; }
  .ov-balance__stream { grid-template-columns: 1.5ch 3.5ch 1fr; }
  .ov-balance__rate, .ov-balance__sword { grid-column: 3; text-align: start; }
  .ov-balance__word { font-size: var(--ov-size-2, 12px); }
}
}