@layer overscan {
.ov-bevel {
  background: var(--ov-raised);
  box-shadow: var(--ov-bevel-raise);
  padding: 9px 16px;
  border: 0;
  border-radius: var(--ov-ctl-corner);
  color: var(--ov-ink);
  font: inherit;
  letter-spacing: inherit;
  text-transform: var(--ov-case);
  cursor: pointer;
  transition: box-shadow var(--ov-dur-fast) var(--ov-ease);
}
.ov-bevel--deep { box-shadow: var(--ov-bevel-raise-deep); padding: 11px 18px; }
.ov-bevel:active,
.ov-bevel[aria-pressed="true"] { box-shadow: var(--ov-bevel-sink); }
.ov-bevel--deep:active,
.ov-bevel--deep[aria-pressed="true"] { box-shadow: var(--ov-bevel-sink-deep); }
.ov-bevel--well {
  box-shadow: var(--ov-bevel-sink);
  background: var(--ov-panel);
  cursor: auto;
}
.ov-bevel--well.ov-bevel--deep { box-shadow: var(--ov-bevel-sink-deep); }
.ov-bevel--well:active { box-shadow: var(--ov-bevel-sink); }
.ov-bevel:focus-visible {
  outline: 2px solid var(--ov-accent);
  outline-offset: -4px;
}
.ov-bevel[aria-disabled="true"] {
  box-shadow: none;
  background: var(--ov-panel);
  color: var(--ov-faint);
  cursor: not-allowed;
}
[data-ov-theme="antiseptic"] .ov-bevel {
  border: var(--ov-rule) solid var(--ov-line-strong);
}
[data-ov-theme="antiseptic"] .ov-bevel[aria-pressed="true"],
[data-ov-theme="antiseptic"] .ov-bevel:active {
  background: var(--ov-lit-bg);
  color: var(--ov-lit-fg);
}
[data-ov-theme="antiseptic"] .ov-bevel--well {
  background: var(--ov-panel);
  border-color: var(--ov-line);
}
[data-ov-theme="antiseptic"] .ov-rack {
  border: var(--ov-rule) solid var(--ov-line-strong);
}
.ov-bevel-show .ov-bevel::after {
  content: "";
  position: absolute;
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--ov-accent);
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate:
    calc(var(--ov-light-x) * 22px - 3px)
    calc(var(--ov-light-y) * 22px - 3px);
  opacity: 0.6;
}
.ov-bevel-show .ov-bevel { position: relative; }
.ov-rack {
  --ov-bolt-size: 14px;
  --ov-bolt-inset: 9px;
  background-color: var(--ov-panel);
  background-image: var(--ov-bevel-face-wash);
  box-shadow: var(--ov-bevel-face-raise-deep);
  border-radius: var(--ov-corner);
  padding: calc(var(--ov-pad) + 8px) calc(var(--ov-pad) + 14px);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--ov-gap) + 8px);
  flex-wrap: wrap;
}
.ov-rack--bolted {
  background-image: var(--ov-bevel-bolt), var(--ov-bevel-bolt),
                    var(--ov-bevel-bolt), var(--ov-bevel-bolt),
                    var(--ov-bevel-face-wash);
  background-repeat: no-repeat;
  background-size: var(--ov-bolt-size) var(--ov-bolt-size),
                   var(--ov-bolt-size) var(--ov-bolt-size),
                   var(--ov-bolt-size) var(--ov-bolt-size),
                   var(--ov-bolt-size) var(--ov-bolt-size),
                   auto;
  background-position:
    var(--ov-bolt-inset) var(--ov-bolt-inset),
    calc(100% - var(--ov-bolt-inset)) var(--ov-bolt-inset),
    var(--ov-bolt-inset) calc(100% - var(--ov-bolt-inset)),
    calc(100% - var(--ov-bolt-inset)) calc(100% - var(--ov-bolt-inset)),
    0 0;
}
.ov-rack__legend {
  font-size: var(--ov-size-1);
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--ov-faint);
}
.ov-rack__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-inline-size: 0;
}
.ov-rack__lcd {
  box-shadow: var(--ov-bevel-sink);
  background: var(--ov-field);
  border-radius: var(--ov-ctl-corner);
  padding: 6px 10px;
  min-inline-size: 8ch;
  text-align: end;
  color: var(--ov-accent);
  font-variant-numeric: tabular-nums;
}
.ov-rack__mount {
  border-radius: 50%;
  display: inline-flex;
  padding: 0;
}
.ov-rack__mount ov-dial {
  border-radius: 50%;
  box-shadow: var(--ov-bevel-raise);
  background: var(--ov-raised);
}
.ov-rack__mount ov-dial:active { box-shadow: var(--ov-bevel-sink); }
.ov-rack__slot--fader {
  box-shadow: var(--ov-bevel-sink);
  background: var(--ov-field);
  border-radius: var(--ov-ctl-corner);
  padding: 10px 12px;
  inline-size: 150px;
}
}