@layer overscan {
.ov-desk {
  position: relative;
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
}
ov-window {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: flex;
  flex-direction: column;
  background: var(--ov-panel);
  border: var(--ov-bezel) solid var(--ov-line-strong);
  color: var(--ov-ink);
  font-family: var(--ov-font-mono);
  font-size: var(--ov-size-2);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--ov-corner)),
    calc(100% - var(--ov-corner)) 100%,
    0 100%);
}
.ov-window__bar {
  flex: 0 0 auto;
  padding: 6px 10px;
  background: var(--ov-raised);
  border-block-end: var(--ov-rule) solid var(--ov-line-strong);
  color: var(--ov-dim);
  font-size: var(--ov-size-1);
  letter-spacing: calc(var(--ov-track) + 1px);
  text-transform: uppercase;
  cursor: grab;
  user-select: none;
}
.ov-window__bar:focus-visible {
  outline: 2px solid var(--ov-accent);
  outline-offset: -2px;
  color: var(--ov-accent);
}
.ov-window__body {
  flex: 1 1 auto;
  min-block-size: 0;
  padding: var(--ov-pad);
  padding-inline-end: calc(var(--ov-pad) + var(--ov-corner));
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: var(--ov-gap);
}
.ov-window__grip {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: 16px;
  block-size: 16px;
  cursor: nwse-resize;
  background: linear-gradient(
    135deg, transparent 0 46%, var(--ov-line-strong) 46% 54%, transparent 54%);
}
.ov-snapguide {
  position: absolute;
  z-index: 9;
  display: none;
  pointer-events: none;
  background: var(--ov-accent);
  opacity: 0.55;
}
.ov-snapguide--x { inset-block: 0; inline-size: 1px; inset-inline-start: 0; }
.ov-snapguide--y { inset-inline: 0; block-size: 1px; inset-block-start: 0; }
ov-window[data-ov-snapped] > .ov-window__bar {
  border-block-end-color: var(--ov-accent);
}
}