@layer overscan {
.ov-example {
  padding-inline: 26px;
  padding-block: 10px;
}
.ov-code {
  margin-block: 18px;
  border: 1px solid var(--ov-line-strong);
  background: var(--ov-raised);
}
.ov-code__cap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  color: var(--ov-dim);
  font: var(--ov-size-1)/1.4 var(--ov-font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.ov-code__cap::-webkit-details-marker { display: none; }
.ov-code__cap::before {
  content: '\25B8';
  color: var(--ov-accent);
  inline-size: 1em;
  flex: 0 0 auto;
}
.ov-code[open] > .ov-code__cap::before { content: '\25BE'; }
.ov-code[open] > .ov-code__cap { border-block-end: 1px solid var(--ov-line); }
.ov-code__cap:hover { color: var(--ov-ink); }
.ov-code__cap:focus-visible {
  outline: 2px solid var(--ov-accent);
  outline-offset: -2px;
}
.ov-code__pre {
  margin: 0;
  padding: 10px;
  overflow-x: auto;
  color: var(--ov-ink);
  font: var(--ov-size-2)/1.55 var(--ov-font-mono);
  tab-size: 2;
}
.ov-code .ov-tabs { border-block-end: 1px solid var(--ov-line); }
.ov-code__panel[hidden] { display: none; }
.ov-code .t-name, [data-ov-code] .t-name  { color: var(--ov-code-name, var(--ov-accent)); }
.ov-code .t-str, [data-ov-code] .t-str   { color: var(--ov-code-str, var(--ov-dim)); }
.ov-code .t-kw, [data-ov-code] .t-kw    { color: var(--ov-code-kw, var(--ov-ink)); font-weight: 600; }
.ov-code .t-punct, [data-ov-code] .t-punct { color: var(--ov-code-punct, var(--ov-faint)); }
.ov-code .t-you, [data-ov-code] .t-you {
  color: var(--ov-dim);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
}