@layer overscan {
.ov-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  color: var(--ov-dim);
  text-transform: var(--ov-case);
}
.ov-check input {
  appearance: none;
  margin: 0;
  inline-size: 14px;
  block-size: 14px;
  flex: 0 0 auto;
  background: var(--ov-panel);
  border: var(--ov-bezel) solid var(--ov-line-strong);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.ov-check input[type="radio"] { border-radius: 50%; }
.ov-check input::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  background: var(--ov-accent);
  transform: scale(0);
  transition: transform var(--ov-dur-fast) var(--ov-ease);
}
.ov-check input[type="radio"]::before { border-radius: 50%; }
.ov-check input:checked::before { transform: scale(1); }
.ov-check input:checked { border-color: var(--ov-accent); }
.ov-check:has(input:checked) { color: var(--ov-ink); }
.ov-check input:focus-visible {
  outline: 2px solid var(--ov-accent);
  outline-offset: 1px;
}
.ov-check[aria-disabled="true"] { color: var(--ov-faint); cursor: not-allowed; }
.ov-select {
  appearance: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: var(--ov-case);
  color: var(--ov-ink);
  background-color: var(--ov-panel);
  border: var(--ov-bezel) solid var(--ov-line-strong);
  padding: 8px 30px 8px 12px;
  cursor: pointer;
  --ov-cut-w: var(--ov-bezel);
  --ov-cut-br: var(--ov-ctl-corner);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%),
                    var(--ov-cut-img);
  background-position: right 14px top 50%, right 9px top 50%,
                       var(--ov-cut-pos);
  background-size: 5px 5px, 5px 5px, var(--ov-cut-size);
  background-repeat: no-repeat;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--ov-ctl-corner)),
    calc(100% - var(--ov-ctl-corner)) 100%,
    0 100%);
}
.ov-progress {
  position: relative;
  block-size: 10px;
  background: var(--ov-panel);
  border: var(--ov-rule) solid var(--ov-line-strong);
  overflow: hidden;
}
.ov-progress__fill {
  block-size: 100%;
  inline-size: var(--ov-progress, 0%);
  background: var(--ov-accent);
  transition: inline-size var(--ov-dur-base) var(--ov-ease);
}
@keyframes ov-indeterminate {
  from { transform: translateX(-100%); }
  to   { transform: translateX(400%); }
}
.ov-progress[data-ov-indeterminate] .ov-progress__fill {
  inline-size: 25%;
  animation: ov-indeterminate 1.5s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ov-progress[data-ov-indeterminate] .ov-progress__fill {
    animation: none;
    inline-size: 100%;
    opacity: 0.4;
  }
}
ov-menu { display: block; }
.ov-menu__bar { display: flex; gap: 2px; }
.ov-menu__item {
  font: inherit;
  letter-spacing: inherit;
  text-transform: var(--ov-case);
  background: none;
  border: 0;
  padding: 7px 14px;
  color: var(--ov-dim);
  cursor: pointer;
}
.ov-menu__item[aria-expanded="true"],
.ov-menu__item:hover { background: var(--ov-lit-bg); color: var(--ov-lit-fg); }
.ov-menu__item:focus-visible { outline: 2px solid var(--ov-accent); outline-offset: -2px; }
.ov-menu__list[hidden] { display: none; }
.ov-menu__list {
  position: absolute;
  z-index: 40;
  min-inline-size: 180px;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--ov-raised);
  border: var(--ov-bezel) solid var(--ov-line-strong);
}
.ov-menu__list [role="menuitem"] {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 6px 14px;
  color: var(--ov-ink);
  text-transform: var(--ov-case);
  cursor: pointer;
}
.ov-menu__list [role="menuitem"]:hover,
.ov-menu__list [role="menuitem"]:focus-visible {
  background: var(--ov-lit-bg);
  color: var(--ov-lit-fg);
  outline: none;
}
.ov-menu__list [role="menuitem"] span { color: var(--ov-faint); }
.ov-menu__list [aria-disabled="true"] { color: var(--ov-faint); cursor: not-allowed; }
ov-modal { display: contents; }
.ov-modal__box {
  position: fixed;
  margin: auto;
  min-inline-size: 320px;
  max-inline-size: min(560px, 92vw);
  background-color: var(--ov-panel);
  color: var(--ov-ink);
  font-family: var(--ov-font-mono);
  font-size: var(--ov-size-2);
  letter-spacing: var(--ov-track);
  border: var(--ov-bezel) solid var(--ov-line-strong);
  --ov-cut-w: var(--ov-bezel);
  --ov-cut-br: var(--ov-corner);
  background-image: var(--ov-cut-img);
  background-size: var(--ov-cut-size);
  background-position: var(--ov-cut-pos);
  padding: calc(var(--ov-pad) + 6px);
  padding-inline-end: calc(var(--ov-pad) + 6px + var(--ov-corner));
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--ov-corner)),
    calc(100% - var(--ov-corner)) 100%,
    0 100%);
}
.ov-modal__box[open] {
  display: flex;
  flex-direction: column;
  gap: var(--ov-gap);
}
.ov-modal__box::backdrop { background: rgb(0 0 0 / 0.66); }
.ov-modal__title {
  font-size: var(--ov-size-1);
  letter-spacing: calc(var(--ov-track) + 1.4px);
  text-transform: uppercase;
  color: var(--ov-accent);
}
.ov-modal__foot { display: flex; gap: 10px; justify-content: flex-end; margin-block-start: 6px; }
}