:root {
  /* Sidebar dropdown triangle, used as a mask on `.entry-toggle::before` so it
     follows the toggle's color. Two back-to-back right triangles split along the
     triangle's axis; the lower half is masked to ~55% alpha so it reads a touch
     lighter than the upper half. */
  --toggle-triangle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1.5 1L1.5 4L7 4Z'/%3E%3Cpath d='M1.5 4L1.5 7L7 4Z' fill-opacity='.55'/%3E%3C/svg%3E");
  /* WCAG AAA Compliant colors - important that luminance (the l in hsl) is 18% for font colors against the bg's luminance of 96-97% when the font-size is at least 14pt */
  --code-bg: hsl(262 33% 96% / 1);
  --code-color: #000;
  --gray: hsl(0 0% 18% / 1);
  --orange: hsl(25 100% 18% / 1);
  --green: hsl(115 100% 18% / 1);
  --cyan: hsl(190 100% 18% / 1);
  --blue: #05006d;
  --violet: #7c38f5;
  --violet-bg: hsl(262.22deg 87.1% 96%);
  --magenta: #a20031;
  --link-hover-color: #333;
  --link-color: var(--violet);
  --code-link-color: var(--violet);
  --text-color: #000;
  --text-hover-color: var(--violet);
  --body-bg-color: #ffffff;
  --border-color: #717171;
  --faded-color: #4c4c4c;
  --font-sans: -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
  --sidebar-width: clamp(280px, 25dvw, 500px);
  --module-search-height: 56px;
  --module-search-padding-height: 16px;
  --module-search-form-padding-width: 20px;
  /* Total vertical space occupied by #module-search-form (input + form padding + margin-bottom).
     Used both as scroll-padding-top on desktop (sticky form) and padding-top on mobile (fixed form). */
  --module-search-form-height: calc(var(--module-search-height) + 32px);
  --sidebar-bg-color: hsl(from var(--violet-bg) h calc(s * 1.05) calc(l * 0.95));

  /* Semantic size tokens */
  --entry-anchor-offset: 28px; /* space reserved left of entry headings for the permalink anchor */
  --icon-size: 48px;           /* logo, menu-toggle, entry-toggle tap targets */

  /* Semi-transparent tints derived from palette colors */
  --violet-border-subtle: rgb(from var(--violet) r g b / .40);
  --violet-border-hover: rgb(from var(--violet) r g b / .60);
  --gray-border-subtle: rgb(from var(--gray) r g b / .30);

  /* Search input border — distinct from --violet-bg so it's visible on a white background */
  --search-border-color: hsl(262 50% 72%);

  /* Type scale: 1.33x multiplier for clear hierarchy */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.3125rem;
  --font-xl: 1.75rem;
  --font-2xl: 2.3125rem;

  /* Font weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}


a {
  color: var(--violet);
}

table tr th,
table tr td {
  border: 1px solid var(--gray);
  padding: 6px 13px;
}

.logo svg {
  height: var(--icon-size);
  width: var(--icon-size);
  fill: var(--violet);
}

.logo:hover {
  text-decoration: none;
}

.logo svg:hover {
  fill: var(--link-hover-color);
}

.pkg-full-name {
  display: flex;
  align-items: center;
  font-size: var(--font-xl);
  margin: 0 8px;
  font-weight: var(--weight-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Entry signature styling - not a heading element */
.entry-signature {
  font-family: var(--font-mono);
  background-color: var(--violet-bg);
  color: var(--text-color);
  margin-bottom: 16px;
  padding: 12px 16px;
  border-left: 4px solid var(--violet);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: pre-wrap;
  position: relative;
  overflow: visible;
}


.entry-signature-code {
  background: none;
  font-size: inherit;
  flex: 1;
}

.sig-arrow {
  white-space: nowrap;
}

/* Type definition block shown below heading for nominal types (e.g. Try := ...) */
.entry-type-def {
  display: block;
  font-family: var(--font-mono);
  background-color: var(--violet-bg);
  color: var(--text-color);
  padding: 12px 16px;
  margin-bottom: 16px;
  white-space: pre-wrap;
  font-size: var(--font-base);
  line-height: 1.5;
}

/* Match the entry-anchor-offset left margin applied to entry headings (.entry h2-h6) so the
   type definition aligns with the heading name above it. */
.entry > .entry-type-def {
  margin-left: var(--entry-anchor-offset);
}

.entry-signature-code strong {
    color: var(--text-color);
    font-weight: var(--weight-semibold);
}

.entry-anchor {
  visibility: hidden;
  color: var(--violet);
  text-decoration: none;
  user-select: none;
  transition: visibility 6s;
  position: absolute;
  left: calc(-1 * var(--entry-anchor-offset));
  display: flex;
  align-items: center;
  height: 100%;
  top: 0;
}

.entry-anchor .link-icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
  vertical-align: middle;
}

.entry h2,
.entry h3,
.entry h4,
.entry h5,
.entry h6 {
  margin-left: var(--entry-anchor-offset);
  position: relative;
}

.entry-signature:hover .entry-anchor,
.entry h2:hover .entry-anchor,
.entry h3:hover .entry-anchor,
.entry h4:hover .entry-anchor,
.entry h5:hover .entry-anchor,
.entry h6:hover .entry-anchor {
  visibility: visible;
}

.entry-name-link,
.entry-name-link:visited {
  color: inherit;
  text-decoration: none;
}


.entry-group-header {
    color: var(--violet);
    padding: 8px 0;
    margin-top: 0;
}

/* Hierarchical entry layout */
.entry {
    position: relative;
    margin-bottom: 24px;
}

/* Targets of anchor-link navigation (permalink clicks, # references). */
.entry[id],
.entry-group[id] {
  /* Offset so the target lands below the sticky search bar. */
  scroll-margin-top: var(--module-search-form-height);
}

.entry-children-container {
    margin-top: 16px;
    margin-left: var(--entry-anchor-offset);
}

.entry-doc {
    padding-left: 20px;
}

/* Entry type vs value styling */
.entry-type > .entry-signature {
    font-weight: var(--weight-semibold);
    background-color: var(--violet-bg);
    border-left: 4px solid var(--violet);
    font-size: var(--font-base);
    line-height: 1.5;
}

.entry-value > .entry-signature {
    font-weight: var(--weight-normal);
    background-color: transparent;
    border-left: 4px solid rgb(from var(--violet) r g b);
    font-size: var(--font-base);
    line-height: 1.5;
}


.pkg-full-name a {
  padding-top: 12px;
  padding-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a {
  text-decoration: none;
}

a:hover,
a:hover code {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.pkg-and-logo {
  min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  background-color: var(--violet-bg);
  padding: 16px;
}

.pkg-and-logo a,
.pkg-and-logo a:visited {
  color: var(--violet);
}

.pkg-and-logo a:hover {
  color: var(--link-hover-color);
  text-decoration: none;
}

body {
  display: grid;
  grid-template-columns:
      [sidebar] var(--sidebar-width)
      [main-content] 1fr
      [content-end];
  grid-template-rows: 1fr;
  height: 100dvh;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--font-sm);
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--body-bg-color);
  overflow: hidden;
}

main {
  grid-column-start: main-content;
  grid-column-end: content-end;
  box-sizing: border-box;
  position: relative;
  font-size: var(--font-base);
  line-height: 1.6;
  margin-top: 2px;
  padding: 16px;
  padding-top: 0px;
  /* necessary for text-overflow: ellipsis to work in descendants */
  min-width: 0;
  overflow-x: auto;
  /* fixes issues with horizontal scroll in cases where word is too long,
  like in one of the examples at https://www.roc-lang.org/builtins/Num#Dec */
  overflow-y: auto;
  display: grid;
  --main-content-width: clamp(100px, calc(100% - 32px), 70ch);
  grid-template-columns: [main-start] minmax(16px,1fr) [main-content-start] var(--main-content-width) [main-content-end] minmax(16px,1fr) [main-end];
  grid-template-rows: auto 1fr auto;
  scrollbar-color: var(--violet) var(--body-bg-color);
  scrollbar-gutter: stable both-edges;
}

main > * {
    grid-column-start: main-content-start;
    grid-column-end: main-content-end;
}

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

/* Module links on the package index page (/index.html) */
.index-module-links {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: large;
}

section:not(.langref-article) {
  padding: 0px 0px 16px 20px;
}

section blockquote {
  font-style: italic;
  position: relative;
  margin-left: 0;
  margin-right: 0;
}

section blockquote:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: var(--gray);
}


section > *:last-child {
  margin-bottom: 0;
}

section:not(.langref-article) h1,
section:not(.langref-article) h2,
section:not(.langref-article) h3,
section:not(.langref-article) h4,
section:not(.langref-article) p {
padding: 0px 16px;
}

/* Language reference articles reuse the module-page chrome and layout. These
   rules give the converted Markdown block elements (lists, tables, code blocks)
   their horizontal rhythm. Headings and the page title use the page font rather
   than the monospace reserved for code identifiers. */
.module-name.langref-title,
.langref-article h1,
.langref-article h2,
.langref-article h3,
.langref-article h4,
.langref-article h5,
.langref-article h6 {
  font-family: var(--font-sans);
}

.langref-article ul,
.langref-article ol {
  margin: 12px 0;
  padding-left: 40px;
}

.langref-article li {
  margin: 4px 0;
}

.langref-article li > ul,
.langref-article li > ol {
  margin: 4px 0;
}

.langref-article pre {
  margin-left: 16px;
  margin-right: 16px;
}

.langref-article table {
  border-collapse: collapse;
  margin: 16px;
}

#sidebar-nav {
    grid-column-start: sidebar;
    grid-column-end: main-content;
    position: relative;
    display: grid;
    grid-template-rows: min-content 1fr;
    box-sizing: border-box;
    width: 100%;
    background-color: var(--sidebar-bg-color);
    transition: all 1s linear;
}

#sidebar-nav .module-links-container {
    position: relative;
}


#sidebar-nav .module-links {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: var(--violet) var(--sidebar-bg-color);
    scrollbar-gutter: stable;
    padding: 16px 8px;
    transition: all .2s linear;
    list-style: none;
}

p {
  overflow-wrap: break-word;
  margin: 24px 0;
}

footer {
  font-size: var(--font-sm);
  box-sizing: border-box;
  padding: 16px 0px 0px;
}

footer p {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.sidebar-entry ul {
  list-style-type: none;
  margin: 0;
}

.sidebar-entry a {
  box-sizing: border-box;
  min-height: 40px;
  min-width: 48px;
  padding-left: 16px;
  font-family: var(--font-mono);
}

.sidebar-entry a,
.sidebar-entry a:visited {
  color: var(--text-color);
}

.sidebar-sub-entries {
    font-size: var(--font-base);
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}

.active + .sidebar-sub-entries {
    display: block;
}

/* When a module entry is itself nested inside another entry's sub-entry list
   (e.g. the builtin type modules under "Builtin Types"), indent its members so
   they sit underneath their type rather than level with it. Top-level modules
   and types are not descendants of a sub-entry list, so they are unaffected. */
.sidebar-sub-entries .sidebar-entry > .sidebar-sub-entries {
    margin-left: 22px;
}

.sidebar-sub-entries a {
  display: flex;
  align-items: center;
  line-height: 24px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 20px;
  padding-left: 16px;
  /* Transparent by default so the indent is consistent; only values/methods
     (`.sidebar-value`) get a visible bar — nested types, type-module entries,
     and language-reference links do not. */
  border-left: 4px solid transparent;
  white-space: nowrap;
}

.sidebar-sub-entries a.sidebar-value {
  border-left-color: var(--gray-border-subtle);
  padding-left: 20px;
}

.sidebar-sub-entries > li:first-child > a {
    margin-top: 8px;
    padding-top: 0;
}

.sidebar-sub-entries > li:last-child > a {
    margin-bottom: 8px;
    padding-bottom: 0;
}

.sidebar-sub-entries a:hover {
    color: var(--violet);
    text-decoration: none;
}

.sidebar-sub-entries a.sidebar-value:hover {
    border-left-color: var(--violet-border-hover);
}

/* Builtin docs only (the langref-enabled site): the "Builtin Types" and
   "Language Reference" sidebar entries, and the langref article links, are
   prose labels rather than code identifiers, so they use the page font instead
   of the monospace used elsewhere in the sidebar. Inline `code` inside a
   langref article link keeps its monospace styling via the `code` rule. */
.pkg-full-name.prose-label,
.sidebar-module-link.prose-label,
.langref-articles a {
  font-family: var(--font-sans);
}

.sidebar-type {
    margin-left: 0;
}

.sidebar-type-name {
    font-weight: var(--weight-medium);
    font-size: var(--font-base);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: inline-block;
    padding-left: 16px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

.sidebar-type-name:hover {
    color: var(--violet);
}

.sidebar-type > .sidebar-sub-entries {
    max-height: 0;
    overflow: hidden;
    margin-left: 0;
    transition: max-height 200ms ease-out;
}

.sidebar-type.expanded > .sidebar-sub-entries {
    max-height: 10000px;
    transition: max-height 200ms ease-in;
}

.module-name {
  font-size: var(--font-2xl);
  line-height: 1.2;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  margin-top: 36px;
  color: var(--violet);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
}

h1 {
  margin-bottom: 30px;
}

h2 {
  font-size: var(--font-xl);
  margin-bottom: 0;
}

h3 {
  font-size: var(--font-lg);
  margin-bottom: 0;
}

h4 {
  font-size: var(--font-base);
  margin-bottom: 0;
  margin-top: 23px;
}

h5 {
  font-size: var(--font-base);
  margin-bottom: 0;
  margin-top: 23px;
}

h6 {
  font-size: var(--font-base);
  margin-bottom: 0;
  margin-top: 23px;
}

.module-name a,
.module-name a:visited {
color: inherit;
}

.module-name a:hover {
  color: var(--link-hover-color);
}

a.sidebar-module-link {
  box-sizing: border-box;
  font-size: var(--font-base);
  line-height: 1.5;
  font-family: var(--font-mono);
  font-weight: var(--weight-normal);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-module-link:hover {
    text-decoration: none;

    span:hover {
        color: var(--violet);
    }
}

.sidebar-module-link span {
    display: inline-block;
    flex-grow: 1;
}

.sidebar-module-link.active {
  font-weight: var(--weight-bold);
}

.sidebar-module-link > .entry-toggle {
    background-color: transparent;
    appearance: none;
    border: none;
    color: transparent;
    color: rgba(from var(--text-color) r g b / .5);
    transition: all 80ms linear;
    text-decoration: none;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 8px 16px;

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

/* The triangle itself: a single SVG (`--toggle-triangle`) masked by the toggle's
   current color, so it tracks the gray/hover-violet transitions. */
.entry-toggle::before {
    content: "";
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: var(--toggle-triangle) center / contain no-repeat;
    mask: var(--toggle-triangle) center / contain no-repeat;
}

.sidebar-entry:hover > a > .entry-toggle,
.sidebar-module-link:hover > .entry-toggle {
    color: var(--text-color);
}

/* Nested module toggles (e.g. the builtin types under "Builtin Types") sit in a
   smaller-font line and read a touch low; nudge them up to center on the label.
   `top` offsets the box before the `rotate` spins it, so both states stay aligned. */
.sidebar-sub-entries .entry-toggle {
    position: relative;
    top: -2px;
}

.active .entry-toggle {
    rotate: 90deg;
}

a,
a:visited {
  color: var(--link-color);
}


code {
  font-family: var(--font-mono);
  color: var(--code-color);
  background-color: var(--code-bg);
  display: inline-block;
}

p code {
  padding: 0 4px;
}

/* Inline code in headings should blend in with the heading, not look like a
   highlighted code chip. */
h1 code,
h2 code,
h3 code,
h4 code,
h5 code,
h6 code {
  background-color: transparent;
  padding: 0;
}

code a,
a code {
  text-decoration: none;
  color: var(--code-link-color);
  background: none;
  padding: 0;
  font-weight: bold; /* Important for AAA compliance while keeping color distinct */
}

code a .type,
code a:hover .type,
code a:visited .type {
  color: var(--green) !important;
}

code a:visited,
a:visited code {
  color: var(--code-link-color);
}

/* Language-reference sidebar links are prose, so inline `code` in a langref
   article title (e.g. the "`if` / `else`" heading) should read as part of the
   link text rather than as a code link — inherit the link's own color instead
   of the violet `--code-link-color`. Placed after the rules above so it wins
   the specificity tie with `a:visited code` on source order. */
.langref-articles a code,
.langref-articles a:visited code {
  color: inherit;
}

pre {
  margin: 36px 0;
  padding: 8px 16px;
  box-sizing: border-box;
  background-color: var(--code-bg);
  position: relative;
  word-wrap: normal;
}

pre>code {
    overflow-x: auto;
    display: block;
    scrollbar-color: var(--violet) var(--code-bg);
    scrollbar-width: thin;
    scrollbar-gutter: stable;
}

.hidden {
  /* Use !important to win all specificity fights. */
  display: none !important;
}

#module-search-form {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  box-sizing: border-box;
  padding: 12px 0;
  background-color: var(--body-bg-color);
  top: 0;
  z-index: 1;
  margin-bottom: 8px;
}


.menu-toggle {
    display: none;
    margin-right: 8px;
    appearance: none;
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--violet);
    padding: 0;
    cursor: pointer;
}

.menu-toggle svg {
    height: var(--icon-size);
    width: var(--icon-size);
    fill: var(--violet);
}


#module-search,
#module-search-nojs,
#module-search:focus {
  opacity: 1;
  padding: 12px 16px;
  height: var(--module-search-height);
}

#module-search,
#module-search-nojs {
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  font-size: var(--font-base);
  line-height: 18px;
  color: var(--text-color);
  background-color: var(--body-bg-color);
  font-family: var(--font-sans);
  border: 2px solid var(--search-border-color);
}

/* Hidden when JS is enabled. The <noscript><style> in #module-search-form
   re-enables it (and hides #module-search) when JS is disabled. */
#module-search-nojs {
  display: none;
}

#module-search::placeholder,
#module-search-nojs::placeholder {
  color: var(--faded-color);
  opacity: 1;
}

#module-search:focus, #module-search:hover {
  outline: 2px solid var(--violet);
}

#search-type-ahead {
  font-family: var(--font-mono);
  display: flex;
  gap: 0px;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  box-sizing: border-box;
  z-index: 100;
  background-color: var(--body-bg-color);
  border: 2px solid var(--violet);
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  max-height: 60vh;
}

#search-type-ahead .type-ahead-link {
  font-size: var(--font-base);
  color: var(--text-color);
  line-height: 2em;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 4px 8px;

  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;


  span {
    margin: 0px;
  }

  .type-ahead-module-name, .type-ahead-def-name {
    color: var(--violet);
    font-size: var(--font-base);
  }
}

#search-type-ahead .type-ahead-link.type-ahead-langref {
  font-family: var(--font-sans);
}

#search-type-ahead .type-ahead-link.type-ahead-langref,
#search-type-ahead .type-ahead-link.type-ahead-langref .type-ahead-langref-context {
  color: var(--text-color);
}

#search-type-ahead .type-ahead-link.type-ahead-langref .type-ahead-langref-title {
  color: var(--text-color);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
}

#search-type-ahead li {
  box-sizing: border-box;
  position: relative;
}

#search-type-ahead a:focus {
  outline: none;
  background: var(--violet-bg);
}


@media (prefers-color-scheme: dark) {
  :root {
      /* WCAG AAA Compliant colors */
    --code-bg: hsl(228.95deg 37.25% 15%);
    --gray: hsl(0 0% 70% / 1);
    --orange: hsl(25 98% 70% / 1);
    --green: hsl(115 40% 70% / 1);
    --cyan: hsl(176 84% 70% / 1);
    --blue: hsl(243 43% 80% / 1);
    --violet: #caadfb;
    --violet-bg: hsl(262 25% 15% / 1);
    --magenta: hsl(348 79% 80% / 1);
      --link-hover-color: #fff;

      --link-color: var(--violet);
      --code-link-color: var(--violet);
      --text-color: #eaeaea;
      --body-bg-color: hsl(from var(--violet-bg) h s calc(l * .5));
      --border-color: var(--gray);
      --code-color: #eeeeee;
      --logo-solid: #8f8f8f;
      --faded-color: #bbbbbb;
      --sidebar-bg-color: hsl(from var(--violet-bg) h calc(s * 1.1) calc(l * 0.75));
      --search-border-color: hsl(262 35% 40%);
  }

  html {
      scrollbar-color: #8f8f8f #2f2f2f;
  }

  /* In dark mode "lighter" means more of the near-white text color, i.e. a
     higher alpha (the opposite of light mode, where lighter means fading toward
     the light background). */
  .sidebar-module-link > .entry-toggle {
      color: rgba(from var(--text-color) r g b / .8);
  }
}

@media only screen and (max-width: 768px) {
    :root {
        --sidebar-width: clamp(280px, 50dvw, 385px);
    }
    body {
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
    }

    html {
        scroll-padding-top: var(--module-search-form-height);
    }

    #sidebar-nav {
        left: calc(-1 * var(--sidebar-width));
        top: 0;
        bottom: 0;
        position: fixed;
        z-index: 2;
        transition: all .2s linear;
    }

    .entry-toggle {
        height: var(--icon-size);
        width: var(--icon-size);
    }

    body.sidebar-open #sidebar-nav {
        left: 0;
    }

    main {
        display: flex;
        flex-direction: column;
        margin: 0;
        min-height: 100dvh;
        --main-content-width: minmax(calc(100% - 32px), 60ch);
    }

    main > .main-content {
        flex: 1;
    }

    #module-search-form {
        padding: 16px 16px;
        height: auto;
        margin-bottom: 16px;
        grid-column-start: main-content-start;
        grid-column-end: main-content-end;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        justify-content: flex-start;
    }

    #module-search-form:has(#module-search:focus) .menu-toggle {
        max-width: 0;
        margin-left: 0;
        opacity: 0;
    }

    .entry-anchor {
        display: none;
    }

    .entry-signature {
        padding-left: 8px;
        padding-right: 8px;
    }

    .menu-toggle {
        display: block;
        flex-shrink: 0;
        max-width: var(--icon-size);
        overflow: hidden;
        margin-left: 16px;
        appearance: none;
        background-color: transparent;
        outline: none;
        border: none;
        color: var(--violet);
        padding: 0;
        cursor: pointer;
        touch-action: manipulation;
        transition: max-width 0.2s ease, margin-left 0.2s ease, opacity 0.2s ease;
    }

    #module-search,
    #module-search-nojs {
        flex: 1;
        width: auto;
    }

    .pkg-full-name {
        font-size: 20px;
        padding-bottom: 14px;
    }

    .pkg-full-name a {
        vertical-align: middle;
        padding: 18px 0;
    }

    .logo {
        width: 50px;
        height: 54px;
    }

    .module-name {
        font-size: var(--font-2xl);
        margin-top: 8px;
        margin-bottom: 8px;
        /* Align with the left border of #module-search-form's input.
           main now has no margin and padding-left: 18px, so content starts at x=18;
           the fixed search form's input border sits at x=16 (form padding-left). */
        margin-left: -2px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Reduce section's desktop 20px left padding on mobile. */
    section {
        padding-left: 7px;
    }

    /* Reduce var(--entry-anchor-offset) left margins that reserve space for .entry-anchor
       (which is hidden on mobile). Applies to entry headings, the type-def
       block aligned with them, and the children container nested below. */
    .entry h2,
    .entry h3,
    .entry h4,
    .entry h5,
    .entry h6,
    .entry > .entry-type-def,
    .entry-children-container {
        margin-left: 8px;
    }

    /* Full-bleed code blocks */
    pre {
        margin-left: -24px;
        margin-right: -24px;
    }

    main {
        padding: 18px;
        font-size: var(--font-base);
        padding-top: var(--module-search-form-height);
    }

    #sidebar-nav {
        margin-top: 0;
        padding-left: 0;
        width: var(--sidebar-width);
    }

    h3 {
        font-size: 18px;
        margin: 0;
        padding: 0;
    }

    h4 {
        font-size: var(--font-base);
    }

    body {
        margin: 0;
        min-width: 320px;
        max-width: 100dvw;
    }

    .pkg-and-logo {
        padding-block: 4px;
    }

    .pkg-full-name {
        flex-grow: 1;
    }

    .pkg-full-name a {
        padding-top: 24px;
        padding-bottom: 12px;
    }
}

/* Comments `#` and Documentation comments `##` */
samp .comment,
code .comment {
  color: var(--green);
}

/* Number, String, Tag literals */
samp .storage.type,
code .storage.type,
samp .string,
code .string,
samp .string.begin,
code .string.begin,
samp .string.end,
code .string.end,
samp .constant,
code .constant,
samp .literal,
code .literal {
  color: var(--cyan);
}

/* Keywords and punctuation */
samp .keyword,
code .keyword,
samp .punctuation.section,
code .punctuation.section,
samp .punctuation.separator,
code .punctuation.separator,
samp .punctuation.terminator,
code .punctuation.terminator,
samp .kw,
code .kw {
    color: var(--magenta);
}

/* Operators */
samp .op,
code .op,
samp .keyword.operator,
code .keyword.operator {
  color: var(--orange);
}

/* Delimieters */
samp .delimiter,
code .delimiter {
  color: var(--gray);
}

/* Variables modules and field names */
samp .function,
code .function,
samp .meta.group,
code .meta.group,
samp .meta.block,
code .meta.block,
samp .lowerident,
code .lowerident {
  color: var(--blue);
}

/* Types, Tags, and Modules */
samp .type,
code .type,
samp .meta.path,
code .meta.path,
samp .upperident,
code .upperident {
  color: var(--green);
}

samp .dim,
code .dim {
  opacity: 0.55;
}

.button-container {
  position: absolute;
  top: 0;
  right: 0;
}

.copy-button {
  background: var(--code-bg);
  border: 1px solid var(--magenta);
  color: var(--magenta);
  display: inline-block;
  cursor: pointer;
  margin: 8px;
}

.copy-button:hover {
  border-color: var(--link-hover-color);
  color: var(--link-hover-color);
}

/* Docs soft navigation */
#docs-loader {
    display: block;
    height: 24px;
    margin: 32px 0 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease-out;
    width: 100%;
}

#docs-loader::before {
    background: var(--cyan);
    content: "";
    display: block;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0s linear;
    width: 100%;
}

#docs-loader.is-loading {
    opacity: 1;
}

#docs-loader.is-loading::before {
    transform: scaleX(0.7);
    transition: transform 2s cubic-bezier(0.1, 0.8, 0.2, 1);
}

#docs-loader.is-done {
    opacity: 1;
}

#docs-loader.is-done::before {
    transform: scaleX(1);
    transition: transform 160ms ease-out;
}

main > .main-content[tabindex="-1"]:focus {
    outline: none;
}

main > .main-content[aria-busy="true"] {
    cursor: progress;
}

/* Search container and input styling */