:root {
  --docs-reading: 35rem;
  --docs-margin: 16rem;
  --docs-gutter: clamp(2rem, 5vw, 4rem);
  --docs-page: 84rem;
}

.docs-header.content,
main.content,
.docs-footer.content {
  display: grid;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [reading-start] minmax(0, var(--docs-reading))
    [reading-end] var(--docs-gutter)
    [margin-start] minmax(14rem, var(--docs-margin))
    [margin-end] minmax(0, 1fr)
    [full-end];
  width: min(100%, var(--docs-page));
  max-width: none;
  margin-inline: auto;
  padding-inline: var(--site-inset);
}

:is(.docs-header, main, .docs-footer) > * {
  grid-column: reading;
  min-width: 0;
}

.docs-header > .site-nav {
  grid-column: full;
  justify-self: center;
  width: 100%;
  max-width: var(--site-wide);
}

main.content {
  padding-block: 2.75rem 4rem;
}

.docs-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.35rem;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

.docs-breadcrumb code {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
}

.docs-breadcrumb [aria-current="page"] {
  color: var(--ink);
}

.zen-role-reading {
  grid-column: reading;
}

.zen-role-wide {
  grid-column: reading-start / margin-end;
}

.zen-role-full {
  grid-column: full;
}

.zen-role-margin {
  grid-column: margin;
}

.docs-sidenote,
.docs-margin-figure {
  display: block;
  align-self: start;
  min-width: 0;
  margin: 0.2rem 0 1.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--rule-bold);
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}

.docs-sidenote-container,
.docs-margin-figure-container,
.zen-role-container {
  margin: 0;
}

#documentation :is(h1, h2, h3, h4) > code {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: var(--face-mono);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: baseline;
}

main > h1,
main > h2,
main > h3,
main > h4,
main > h5,
main > p,
main > ul,
main > ol,
main > blockquote,
main :not(pre) > code,
main a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

main a[href^="?docs-record="],
main a[href^="?docs-record-canonical="] {
  display: none;
}

main.content > h2 {
  margin-top: 2.7rem;
}

main > h3[id] {
  margin-top: 2.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-bold);
  scroll-margin-top: 1rem;
}

main > h2[id$=":reference"] ~ h3[id] {
  margin-top: 1.35rem;
  padding-top: 0.75rem;
  border-top-color: var(--rule);
}

main > h4 {
  margin-top: 1.6rem;
  margin-bottom: 0.55rem;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

main > h5 {
  margin-top: 1.4rem;
  margin-bottom: 0.45rem;
  font-size: 1rem;
}

#documentation :is(.zen-source-listing, .zen-code-longform) {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

#documentation :is(.zen-source-listing, .zen-code-longform) .zen-code {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

#documentation :is(.zen-source-listing, .zen-code-longform) .zen-code-line {
  position: relative;
  grid-template-columns: 2.4rem max-content;
  width: max-content;
  min-width: 100%;
}

#documentation .zen-source-listing .zen-code-line > [id]:empty {
  position: absolute;
  inset: 0 auto auto 0;
}

#documentation :is(.zen-source-listing, .zen-code-longform).zen-code-no-lines
  .zen-code-line,
#documentation :is(.zen-source-listing, .zen-code-longform)
  .zen-code-no-lines .zen-code-line {
  grid-template-columns: max-content;
}

#documentation :is(.zen-source-listing, .zen-code-longform)
  .zen-code-line-source {
  white-space: pre;
}

.docs-index-family {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 0.35rem 1.75rem;
  padding: 1rem 1rem 1rem 2.25rem;
  border-block: 1px solid var(--rule);
}

.docs-index-module {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 2rem;
  padding: 1rem 1rem 1rem 2.25rem;
  border-block: 1px solid var(--rule);
}

.docs-index-family li,
.docs-index-module li {
  min-width: 0;
  margin-block: 0.15rem;
  overflow-wrap: anywhere;
}

.zen-contents {
  width: auto;
  max-width: none;
  margin: 1.5rem 0;
  padding: 1rem;
  border-block: 1px solid var(--rule);
}

.zen-contents ul {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 0.3rem 1.5rem;
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.zen-contents li {
  min-width: 0;
  margin-left: 0 !important;
  overflow-wrap: anywhere;
}

.zen-contents a,
.docs-index-family a,
.docs-index-module a {
  text-decoration-line: none;
}

.zen-contents a:is(:hover, :focus-visible),
.docs-index-family a:is(:hover, :focus-visible),
.docs-index-module a:is(:hover, :focus-visible) {
  text-decoration-line: underline;
}

.docs-audit-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.docs-verification-source code {
  font-size: 0.9em;
}

p.docs-verification-freshness {
  grid-column: reading-start / margin-end;
  margin: 0.75rem 0 1.5rem;
  padding: 0.85rem 1rem;
  border-left: 0.25rem solid var(--rule-bold);
  background: var(--paper-sunk);
}

p.docs-verification-freshness-local {
  border-left-color: var(--accent-ink);
}

#documentation figure {
  width: 100%;
  margin: 1.5rem 0;
}

#documentation .docs-call-map {
  margin-block: 1.75rem 2rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

#documentation .docs-call-map > .zen-ego {
  max-height: none;
}

#documentation .docs-call-map > .zen-ego.zen-ego-leaf {
  display: block;
  width: min(100%, 40rem);
  margin-inline: auto;
}

#documentation .zen-media-block {
  margin-block: 1.5rem;
  line-height: 0;
}

#documentation :is(img, object, video, svg, canvas) {
  max-width: 100%;
}

#documentation :is(img, video, svg, canvas) {
  height: auto;
}

#documentation figure > :is(img, object, video, svg, canvas) {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
}

#documentation object[data-zen-motion-live] {
  display: block;
  width: 100%;
  max-height: 72vh;
}

#documentation img[data-zen-motion-src][hidden] {
  display: none;
}

#documentation figcaption {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}

#documentation .docs-margin-figure {
  margin-top: 0.2rem;
}

#documentation .docs-margin-figure figcaption {
  font-size: 0.8rem;
}

.docs-footer.content {
  padding-block: 0 2rem;
}

.docs-footer .docs-sidenote {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-family: var(--face-mono);
  font-size: 0.72rem;
  line-height: 1.5;
}

@media (max-width: 60rem) {
  .docs-header.content,
  main.content,
  .docs-footer.content {
    grid-template-columns:
      [full-start reading-start margin-start] minmax(0, 1fr)
      [reading-end margin-end full-end];
  }

  .docs-sidenote,
  .docs-margin-figure {
    margin: 0.75rem 0 1.5rem;
    padding: 0.75rem 1rem;
    border-top: 0;
    border-left: 2px solid var(--rule-bold);
    background: var(--paper-sunk);
  }

  #documentation .docs-call-map > .zen-ego {
    width: 36rem;
    max-width: none;
  }

  .docs-index-module {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 44rem) {
  main.content {
    padding-block: 2.25rem 3rem;
  }

  main > h3[id] {
    margin-top: 1.9rem;
  }

  .docs-index-family,
  .zen-contents ul {
    grid-template-columns: minmax(0, 1fr);
  }
}