@layer overscan {
.ov-screen {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template:
    "top    top   top  " auto
    "left   body  right" minmax(0, 1fr)
    "foot   foot  foot " auto
    / auto minmax(0, 1fr) auto;
  gap: var(--ov-gap);
  block-size: 100dvh;
  padding: var(--ov-gap);
  background: var(--ov-field);
  color: var(--ov-ink);
  font-family: var(--ov-font-mono);
  font-size: var(--ov-size-2);
  letter-spacing: var(--ov-track);
}
.ov-screen__top { grid-area: top; }
.ov-screen__left { grid-area: left; inline-size: var(--ov-rail-w, 190px); }
.ov-screen__right { grid-area: right; inline-size: var(--ov-rail-w, 190px); }
.ov-screen__foot { grid-area: foot; }
.ov-screen__body { grid-area: body; min-inline-size: 0; min-block-size: 0; }
.ov-rail {
  position: relative;
  box-sizing: border-box;
  block-size: 100%;
  background: var(--ov-panel);
  border: var(--ov-bezel) solid var(--ov-line-strong);
  padding: var(--ov-pad);
  display: flex;
  flex-direction: column;
  gap: var(--ov-gap);
  min-block-size: 0;
  overflow: auto;
}
.ov-rail > *:not(ov-field):not(.ov-panel__label) { position: relative; z-index: 1; }
.ov-screen__top .ov-rail { padding-block-start: calc(var(--ov-pad) + var(--ov-corner) / 2); }
.ov-screen__foot .ov-rail { padding-block-end: calc(var(--ov-pad) + var(--ov-corner) / 2); }
.ov-screen__left .ov-rail { padding-inline-start: calc(var(--ov-pad) + var(--ov-corner) / 2); }
.ov-screen__right .ov-rail { padding-inline-end: calc(var(--ov-pad) + var(--ov-corner) / 2); }
.ov-screen__top .ov-rail {
  clip-path: polygon(
    var(--ov-corner) 0, calc(100% - var(--ov-corner)) 0,
    100% 100%, 0 100%);
}
.ov-screen__foot .ov-rail {
  clip-path: polygon(
    0 0, 100% 0,
    calc(100% - var(--ov-corner)) 100%, var(--ov-corner) 100%);
}
.ov-screen__left .ov-rail {
  clip-path: polygon(
    0 var(--ov-corner), 100% 0,
    100% 100%, 0 calc(100% - var(--ov-corner)));
}
.ov-screen__right .ov-rail {
  clip-path: polygon(
    0 0, 100% var(--ov-corner),
    100% calc(100% - var(--ov-corner)), 0 100%);
}
.ov-viewport { display: flex; flex-direction: column; justify-content: flex-end; }
.ov-viewport__foot { padding: 0 14px 12px; }
.ov-screen__body .ov-viewport {
  position: relative;
  block-size: 100%;
  background-color: var(--ov-panel);
  border: var(--ov-bezel) solid var(--ov-line-strong);
  --ov-cut-w: var(--ov-bezel);
  --ov-cut-tl: var(--ov-corner);
  --ov-cut-tr: var(--ov-corner);
  --ov-cut-bl: var(--ov-corner);
  --ov-cut-br: var(--ov-corner);
  background-image: var(--ov-cut-img);
  background-size: var(--ov-cut-size);
  background-position: var(--ov-cut-pos);
  clip-path: polygon(
    var(--ov-corner) 0, calc(100% - var(--ov-corner)) 0,
    100% var(--ov-corner), 100% calc(100% - var(--ov-corner)),
    calc(100% - var(--ov-corner)) 100%, var(--ov-corner) 100%,
    0 calc(100% - var(--ov-corner)), 0 var(--ov-corner));
}
.ov-viewport > *:not(ov-field):not(.ov-panel__label):not(ov-reticle) { position: relative; z-index: 1; }
.ov-rail__head {
  font-size: var(--ov-size-1);
  letter-spacing: calc(var(--ov-track) + 1px);
  text-transform: uppercase;
  color: var(--ov-faint);
}
.ov-cluster {
  display: grid;
  gap: var(--ov-gap);
  grid-template-columns: repeat(var(--ov-cluster-cols, 2), minmax(0, 1fr));
  block-size: 100%;
  min-block-size: 0;
}
.ov-cluster > * { min-inline-size: 0; min-block-size: 0; }
ov-split {
  display: flex;
  flex-direction: var(--ov-split-dir, row);
  gap: 0;
  block-size: 100%;
  min-block-size: 0;
}
ov-split > *:not(.ov-split__gutter) { min-inline-size: 0; min-block-size: 0; }
ov-split > *:first-child { flex: 0 0 var(--ov-split-a, 50%); }
ov-split > *:last-child { flex: 1 1 0; }
.ov-split__gutter {
  flex: 0 0 var(--ov-gap);
  background: var(--ov-line);
  cursor: col-resize;
  align-self: stretch;
}
ov-split[direction="vertical"] .ov-split__gutter { cursor: row-resize; }
.ov-split__gutter:hover { background: var(--ov-line-strong); }
.ov-split__gutter:focus-visible {
  outline: 2px solid var(--ov-accent);
  outline-offset: -2px;
}
}