.docs-page {
  --docs-line: #ffffff24;
  --docs-panel: #15131b;
  --docs-link: #d2baff;

  & .site-header {
    z-index: 5;
  }

  & .header-inner {
    max-width: none;
    width: min(1600px, calc(100% - 56px));
  }

  & .main-nav {
    & a {
      &[aria-current="page"] {
        color: var(--pink);
      }
    }
  }
}

.docs-shell {
  display: grid;
  grid-template-columns: minmax(240px, 264px) minmax(0, 1fr) minmax(184px, 212px);
  gap: clamp(24px, 3vw, 52px);
  max-width: 1600px;
  margin: 0 auto;
  padding: 32px 28px 96px;
}

.docs-navigation,
.docs-outline {
  align-self: start;
  position: sticky;
  top: 105px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

.docs-navigation {
  border-right: 1px solid var(--docs-line);
  padding-right: 16px;

  & > summary {
    display: none;
  }

  & .docs-nav {
    display: block;
  }
}

.docs-nav-group {
  margin-bottom: 8px;

  & > summary {
    cursor: pointer;
    margin: 0 0 7px;
    color: var(--quiet);
    font: 700 11px/1.5 var(--body-font);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    padding: 7px 3px;

    &:hover {
      color: var(--ink);
    }
  }

  & ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  & a {
    display: block;
    padding: 6px 10px;
    border-radius: 5px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;

    &:hover,
    &[aria-current="page"] {
      color: var(--ink);
      background: #fff1;
    }

    &[aria-current="page"] {
      box-shadow: inset 2px 0 var(--pink);
    }
  }
}

.docs-main {
  min-width: 0;
}

.docs-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--quiet);
  font-size: 12px;
  margin: 7px 0 42px;

  & a {
    &:hover {
      color: var(--pink);
    }
  }
}

.docs-article {
  max-width: 78ch;
}

.docs-kicker {
  color: var(--pink);
  font: 700 11px/1.5 var(--code-font);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}

.docs-article h1,
.docs-not-found h1 {
  font: 600 clamp(32px, 4vw, 52px)/1.1 var(--body-font);
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}

.docs-lead {
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
  margin-bottom: 34px;
}

.docs-article h2,
.docs-article h3,
.docs-article h4 {
  font-family: var(--body-font);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
  scroll-margin-top: 105px;
}

.docs-article h2 {
  font-size: 26px;
  margin: 48px 0 16px;
  padding-top: 18px;
  border-top: 1px solid var(--docs-line);
}

.docs-article h3 {
  font-size: 19px;
  margin: 34px 0 12px;
}

.docs-article p,
.docs-article ul,
.docs-article ol {
  margin: 0 0 18px;
}

.docs-article ul,
.docs-article ol {
  padding-left: 24px;
}

.docs-article li {
  margin: 6px 0;
}

.docs-article a:not(.button) {
  color: var(--docs-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.docs-article strong {
  color: var(--ink);
}

.docs-article blockquote {
  border-left: 3px solid var(--purple);
  padding: 12px 20px;
  margin: 22px 0;
  background: var(--docs-panel);
  color: var(--muted);
}

.docs-article pre {
  position: relative;
  max-width: 100%;
  overflow-x: auto;
  background: #17151d;
  border: 1px solid var(--docs-line);
  border-radius: 8px;
  margin: 24px 0;
  padding: 26px 18px 18px;
}

.docs-article pre code {
  background: none;
  padding: 0;
  white-space: pre;
}

.docs-article code,
.docs-article pre {
  font: 13px/1.65 var(--code-font);
}

.docs-article :not(pre) > code {
  padding: 0.1em 0.25em;
  background: #ffffff14;
  border-radius: 3px;
  overflow-wrap: anywhere;
}

.docs-article .token.comment {
  color: #9ba5b9;
}

.docs-article .token.keyword,
.docs-article .token.builtin {
  color: #dcb2ff;
}

.docs-article .token.string {
  color: #b8e5b4;
}

.docs-article .token.number,
.docs-article .token.boolean {
  color: #ffd19c;
}

.docs-article .token.function,
.docs-article .token.class-name {
  color: #9ccaff;
}

.docs-article .token.property,
.docs-article .token.variable {
  color: #8cdbdf;
}

.docs-article .token.operator,
.docs-article .token.regex {
  color: #f4a6c9;
}

.docs-article .token.punctuation {
  color: #bcb7c8;
}

.docs-code-copy {
  position: absolute;
  right: 8px;
  top: 6px;
  border: 1px solid var(--docs-line);
  background: #24202c;
  color: var(--ink);
  border-radius: 4px;
  font: 11px/1.3 var(--body-font);
  padding: 4px 8px;
  cursor: pointer;
}

.docs-article table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 13px;
}

.docs-article th,
.docs-article td {
  border-bottom: 1px solid var(--docs-line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}

.docs-article th {
  color: var(--pink);
}

.docs-article hr {
  border: 0;
  border-top: 1px solid var(--docs-line);
  margin: 40px 0;
}

.docs-outline {
  border-left: 1px solid var(--docs-line);
  padding-left: 18px;
  font-size: 12px;

  & .table-of-contents {
    color: var(--quiet);
  }

  & ul {
    list-style: none;
    padding-left: 0;
    margin: 0;

    & ul {
      padding-left: 12px;
    }
  }

  & a {
    display: block;
    padding: 5px 0;

    &:hover,
    &[aria-current="location"] {
      color: var(--pink);
    }
  }
}

.docs-inline-outline {
  display: none;
}

.docs-pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 78ch;
  border-top: 1px solid var(--docs-line);
  margin-top: 70px;
  padding-top: 20px;

  & a {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 1px solid var(--docs-line);
    border-radius: 6px;
    padding: 14px;
    min-width: 0;
    flex: 1;
  }

  & small {
    color: var(--quiet);
  }

  & span {
    color: var(--pink);
  }
}

.docs-search-row {
  display: flex;
  gap: 8px;
  margin: 8px 0 18px;

  & input {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--docs-line);
    border-radius: 5px;
    background: var(--docs-panel);
    color: var(--ink);
    padding: 10px 12px;
    font: inherit;
  }
}

.docs-search-results {
  list-style: none;
  padding: 0 !important;

  & li {
    border-bottom: 1px solid var(--docs-line);
    padding: 12px 0;
  }

  & a {
    display: block;
    font-weight: 600;
  }

  & p {
    color: var(--muted);
    font-size: 13px;
    margin: 4px 0;
  }
}

.docs-not-found {
  max-width: 700px;
  margin: 90px auto;
  padding: 0 24px;
}

.uttori-example {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  border: 1px solid var(--docs-line);
  background: var(--docs-panel);
  border-radius: 8px;
  padding: 16px;
  margin: 26px 0;
}

.uttori-example-input,
.uttori-example-output {
  min-width: 0;
}

.uttori-example label,
.uttori-example strong {
  display: block;
  color: var(--muted);
  font: 600 12px/1.4 var(--body-font);
  margin-bottom: 8px;
}

.uttori-example textarea,
.uttori-example output {
  display: block;
  width: 100%;
  min-height: 140px;
  border: 1px solid var(--docs-line);
  border-radius: 5px;
  background: #09080c;
  color: var(--ink);
  padding: 12px;
  font: 13px/1.6 var(--code-font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.uttori-example textarea {
  resize: vertical;
}

.uttori-example-editor {
  position: relative;
  min-width: 0;

  & textarea {
    position: relative;
    z-index: 1;
    white-space: pre;
    overflow-wrap: normal;
    overflow: auto;
  }

  &.is-highlighted {
    & textarea {
      background: transparent;
      color: transparent;
      caret-color: var(--ink);

      &::selection {
        background: #77549c80;
        color: transparent;
      }
    }
  }
}

.uttori-example .uttori-example-highlight {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 12px;
  overflow: hidden;
  pointer-events: none;
  border-color: transparent;
  background: #09080c;
  font: 13px/1.6 var(--code-font);
  white-space: pre;
}

.uttori-example-highlight {
  & code {
    padding: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    white-space: pre;
  }
}

.uttori-example-status {
  color: var(--muted);
  font-size: 12px;
  margin: 8px 0 0 !important;
}

.uttori-example-controls {
  display: none;
  grid-column: 1 / -1;
  gap: 8px;
}

.uttori-example.is-enhanced .uttori-example-controls {
  display: flex;
  align-items: center;
}

.uttori-example-controls button,
.uttori-example-cpu select {
  border: 1px solid var(--docs-line);
  border-radius: 4px;
  background: #30263e;
  color: var(--ink);
  font: 600 12px/1.4 var(--body-font);
  padding: 7px 12px;
  cursor: pointer;
}

.uttori-example-controls .uttori-example-cpu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font: 600 12px/1.4 var(--body-font);
}

.uttori-example-cpu {
  & select {
    background: #09080c;
    font-family: var(--code-font);
  }
}

.uttori-example-controls button:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (width <= 1100px) {
  .docs-shell {
    grid-template-columns: minmax(220px, 250px) minmax(0, 1fr);
  }

  .docs-outline {
    display: none;
  }

  .docs-inline-outline {
    display: block;
    border: 1px solid var(--docs-line);
    border-radius: 6px;
    margin: 0 0 28px;
    padding: 0 16px;

    & summary {
      cursor: pointer;
      padding: 10px 0;
      color: var(--muted);
      font-size: 13px;
    }

    & .table-of-contents {
      padding: 0 0 12px;
      font-size: 13px;

      & ul {
        margin: 0;
        padding-left: 18px;
      }
    }
  }
}

@media (width <= 760px) {
  .docs-page {
    & .header-inner {
      width: calc(100% - 32px);
    }
  }

  .docs-shell {
    display: block;
    padding: 16px 20px 64px;
  }

  .docs-navigation {
    position: static;
    max-height: none;
    border: 1px solid var(--docs-line);
    border-radius: 6px;
    padding: 0;
    margin-bottom: 24px;

    & > summary {
      display: block;
      padding: 11px 14px;
      font-weight: 600;
    }

    &:not([open]) {
      & .docs-nav {
        display: none;
      }
    }
  }

  .docs-nav {
    max-height: 45vh;
    overflow: auto;
    padding: 12px 14px;
    border-top: 1px solid var(--docs-line);
  }

  .docs-breadcrumbs {
    margin-bottom: 26px;
  }

  .uttori-example {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 460px) {
  .docs-page {
    & .main-nav {
      & a {
        &:first-child,
        &:last-child {
          display: none;
        }
      }
    }
  }

  .docs-article {
    & h1 {
      font-size: 32px;
    }
  }

  .docs-lead {
    font-size: 17px;
  }

  .docs-search-row {
    flex-direction: column;
  }
}

/* A visual is a full-width extension of the existing editable example, including on mobile. */
.uttori-example-visual {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid var(--docs-line);
  padding-top: 16px;

  & input {
    &[type="range"] {
      width: 100%;
      accent-color: #c59bff;
    }
  }

  & canvas {
    display: block;
    width: min(512px, 100%);
    height: auto;
    margin: 12px auto;
    image-rendering: pixelated;
    background: #000;
  }

  & p {
    font-size: 12px;
    color: var(--muted);
  }
}

.docs-article img[src$="boot-logo-layer.png"] {
  width: min(512px, 100%);
  height: auto;
  image-rendering: pixelated;
}

.docs-diagram {
  margin: 28px 0;
  overflow-x: auto;
  border: 1px solid var(--docs-line);
  border-radius: 8px;
  padding: 16px;
  background: var(--docs-panel);

  & svg {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }

  & summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 12px;
    padding-top: 12px;
  }
}

/* Articles use the main site header width while sharing the rich Markdown styles. */
.articles-page {
  & .header-inner {
    width: min(1120px, calc(100% - 80px));
  }
}

@media (width <= 760px) {
  .articles-page {
    & .header-inner {
      width: calc(100% - 40px);
    }
  }
}