/* Arcade: shared type, palette, header and the red power-up button for the home page, the mod page, the marketplace and the book.
   Sizes use px because the book's root is 10px. Pixel type is set only at whole multiples of its 8px grid (16, 24, 32, 48, 64). */
@font-face { font-family: "Silkscreen"; font-weight: 400; font-display: swap; src: url("/assets/fonts/silkscreen-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Silkscreen"; font-weight: 700; font-display: swap; src: url("/assets/fonts/silkscreen-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }

:root {
  --sans: "Archivo", system-ui, sans-serif;
  --pixel: "Silkscreen", ui-monospace, monospace;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  /* Phosphor black and the warm raised surfaces of a cabinet at night. */
  --ground: #0b0708;
  --raise: #151011;
  --raise-2: #211919;
  --line: #2e2423;
  --line-strong: #4c3c39;
  --ink: #f6eee7;
  --soft: #d8ccc3;
  --quiet: #ab9d93;
  /* The one accent, derived from the icon's fill. */
  --red-hover: color-mix(in oklab, var(--cinnabar-red) 86%, #ff8a6e);
  --red-press: color-mix(in oklab, var(--cinnabar-red) 74%, #000);
  --red-deep: color-mix(in oklab, var(--cinnabar-red) 38%, #000);
  --red-line: color-mix(in oklab, var(--cinnabar-red) 70%, #ffb199);
  --red-text: color-mix(in oklab, var(--cinnabar-red) 44%, #ffb199);
  /* The single gold pixel edge along the top of the power-up. */
  --gold: #f2c35c;
  /* The dark rim around red pixel keys and the face of the warning panel. */
  --rim: #140405;
  --warning-face: #120b0b;
  --focus: var(--red-line);
  --gutter: clamp(16px, 4vw, 64px);
  --page: 1360px;
  --site-header-height: 64px;
  /* Two whole 2px steps cut from each corner of a pixel box, and the single step inside its 2px edge. */
  --step-2: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
  --step-1: polygon(0 2px, 2px 2px, 2px 0, calc(100% - 2px) 0, calc(100% - 2px) 2px, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 2px calc(100% - 2px), 0 calc(100% - 2px));
  /* Neutral pixel boxes as nine-slice frames: a 2px edge with stepped corners around a solid face. */
  --box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23151011' d='M4 2h4v8H4zM2 4h8v4H2z'/%3E%3Cpath fill='%234c3c39' d='M4 0h4v2H4zM4 10h4v2H4zM0 4h2v4H0zM10 4h2v4h-2zM2 2h2v2H2zM8 2h2v2H8zM2 8h2v2H2zM8 8h2v2H8z'/%3E%3C/svg%3E");
  --box-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23211919' d='M4 2h4v8H4zM2 4h8v4H2z'/%3E%3Cpath fill='%23ab9d93' d='M4 0h4v2H4zM4 10h4v2H4zM0 4h2v4H0zM10 4h2v4h-2zM2 2h2v2H2zM8 2h2v2H8zM2 8h2v2H2zM8 8h2v2H8z'/%3E%3C/svg%3E");
  --box-quiet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%230b0708' d='M4 2h4v8H4zM2 4h8v4H2z'/%3E%3Cpath fill='%232e2423' d='M4 0h4v2H4zM4 10h4v2H4zM0 4h2v4H0zM10 4h2v4h-2zM2 2h2v2H2zM8 2h2v2H8zM2 8h2v2H2zM8 8h2v2H8z'/%3E%3C/svg%3E");
  /* The cabinet frame: a stepped outer edge, a dark channel, an inner edge and a rivet at each inner corner. Slice 10. */
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%230b0708' d='M4 2h16v20H4zM2 4h20v16H2z'/%3E%3Cpath fill='%23151011' d='M8 8h8v8H8z'/%3E%3Cpath fill='%234c3c39' d='M4 0h16v2H4zM4 22h16v2H4zM0 4h2v16H0zM22 4h2v16h-2zM2 2h2v2H2zM20 2h2v2h-2zM2 20h2v2H2zM20 20h2v2h-2z'/%3E%3Cpath fill='%233a2d2b' d='M6 6h12v2H6zM6 16h12v2H6zM6 8h2v8H6zM16 8h2v8h-2z'/%3E%3Cpath fill='%23ab9d93' d='M6 6h2v2H6zM16 6h2v2h-2zM6 16h2v2H6zM16 16h2v2h-2z'/%3E%3C/svg%3E");
  /* The select-screen frame: an ink edge around a raised face. */
  --box-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23211919' d='M4 2h4v8H4zM2 4h8v4H2z'/%3E%3Cpath fill='%23f6eee7' d='M4 0h4v2H4zM4 10h4v2H4zM0 4h2v4H0zM10 4h2v4h-2zM2 2h2v2H2zM8 2h2v2H8zM2 8h2v2H2zM8 8h2v2H8z'/%3E%3C/svg%3E");
  --box-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' shape-rendering='crispEdges'%3E%3Cpath fill='%23f6eee7' d='M4 2h4v8H4zM2 4h8v4H2z'/%3E%3Cpath fill='%23f6eee7' d='M4 0h4v2H4zM4 10h4v2H4zM0 4h2v4H0zM10 4h2v4h-2zM2 2h2v2H2zM8 2h2v2H8zM2 8h2v2H2zM8 8h2v2H8z'/%3E%3C/svg%3E");
}

html { scrollbar-color: var(--line-strong) var(--ground); scroll-padding-top: calc(var(--site-header-height) + 24px); }
::selection { background: var(--red-press); color: #fff; }
input, textarea { caret-color: var(--red-line); }

/* Header: the cabinet's marquee strip. The brand and nav are pixel caps; the current page carries the menu cursor. */
.site-header { box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--site-header-height); padding-inline: var(--gutter); border-bottom: 2px solid transparent; }
.site-header a { box-sizing: border-box; transition: color .12s steps(2, end), background-color .12s steps(2, end); }
.site-header .brand-home { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-right: 4px; color: var(--ink); font: 700 16px/1 var(--pixel); letter-spacing: 0; text-transform: uppercase; text-decoration: none; -webkit-font-smoothing: none; }
.site-header .brand-home img { width: 28px; height: 28px; }
.site-header .socials { display: flex; align-items: center; gap: 4px; margin-right: -12px; }
.site-header .socials a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; color: var(--soft); font: 400 16px/1 var(--pixel); text-transform: uppercase; text-decoration: none; white-space: nowrap; -webkit-font-smoothing: none; }
.site-header .socials svg { width: 20px; height: 20px; fill: currentColor; }
.site-header .socials .github, .site-header .socials .discord { width: 44px; padding: 0; }
.site-header .github span, .site-header .discord span { display: none; }
.site-header .socials a:hover { background: #ffffff14; color: var(--ink); }
.site-header .socials a:active { background: #ffffff0a; }
.site-header .socials a[aria-current="page"] { padding-left: 24px; color: var(--ink); }
/* The arcade menu cursor: a stepped triangle drawn in whole 2px pixels. */
.site-header .socials a[aria-current="page"]::before { content: ""; position: absolute; left: 10px; top: 50%; width: 6px; height: 10px; margin-top: -5px; background: var(--red-line); clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px); }
.site-header a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* On the home and mod pages the header floats over the scene, then turns solid past it. */
.site .site-header { position: fixed; inset: 0 0 auto; z-index: 50; animation: header-solid linear both; animation-timeline: scroll(root); animation-range: calc(var(--solid-at) - 96px) var(--solid-at); }
@keyframes header-solid { to { background: var(--ground); border-bottom-color: var(--line); } }
@supports not (animation-timeline: scroll()) { .site .site-header { background: var(--ground); border-bottom-color: var(--line); } }

/* The power-up: a red pixel key with a 2px dark rim, a one-pixel gold edge on top and a pressed-in shade below. */
.cta, a.download { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 24px 4px; border: 0; border-radius: 0; background: none; color: #fff; font: 400 16px/1 var(--pixel); letter-spacing: 0; text-transform: uppercase; text-decoration: none; text-shadow: 0 2px var(--red-deep); cursor: pointer; -webkit-font-smoothing: none; }
.cta::before, a.download::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--rim); clip-path: var(--step-2); }
.cta::after, a.download::after { content: ""; position: absolute; inset: 2px; z-index: -1; background: var(--cinnabar-red); box-shadow: inset 0 2px var(--gold), inset 0 4px color-mix(in oklab, var(--cinnabar-red) 70%, var(--gold)), inset 0 -4px var(--red-press); clip-path: var(--step-1); }
.cta svg, a.download svg { width: 16px; height: 16px; flex: none; fill: currentColor; filter: drop-shadow(0 2px var(--red-deep)); }
.cta:hover::after, a.download:hover::after { background: var(--red-hover); }
.cta:active, a.download:active { padding-bottom: 0; transform: translateY(2px); }
.cta:active::after, a.download:active::after { inset: 2px 2px 4px; box-shadow: inset 0 2px var(--red-press); }
.cta:focus-visible, a.download:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Phosphor glow, for pixel titles only and never prose. It switches off with the effects and on pages without them. */
:root[data-fx="on"] .glow { text-shadow: 0 0 1px color-mix(in oklab, var(--ink) 55%, transparent), 0 0 10px color-mix(in oklab, var(--cinnabar-red) 60%, transparent), 0 0 26px color-mix(in oklab, var(--cinnabar-red) 28%, transparent); }
/* The cabinet title rule: a pixel line ending in a red block on each side of the title. */
.rule-title { display: flex; align-items: center; justify-content: center; gap: 24px; text-align: center; }
.rule-title::before, .rule-title::after { content: ""; flex: 1 1 0; min-width: 24px; height: 8px; background: linear-gradient(var(--red-line) 0 0) right center / 8px 8px no-repeat, linear-gradient(var(--line-strong) 0 0) left center / calc(100% - 12px) 2px no-repeat; }
.rule-title::after { transform: scaleX(-1); }
/* On a phone the rules run full width above and below a title that wraps. */
@media (max-width: 640px) {
  .rule-title { flex-wrap: wrap; gap: 14px; }
  .rule-title::before, .rule-title::after { flex-basis: 100%; }
}
.nav-short { display: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Split download: the start key and its mode-select key, two separate keys on one panel. */
.split { position: relative; display: inline-flex; gap: 4px; max-width: 100%; }
#download { min-width: 0; }
#channel-toggle { flex: none; gap: 8px; min-width: 56px; padding-inline: 16px; }
#channel-toggle .mode { font: 400 16px/1 var(--pixel); }
#channel-toggle svg { width: 10px; height: 6px; fill: currentColor; transition: transform .12s steps(2, end); }
#channel-toggle[aria-expanded="true"] svg { transform: scaleY(-1); }

/* Mode select: the channel menu reads like a cabinet's mode screen, with a cursor on the focused row and a lit pixel on the chosen one. */
.channel-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; width: 340px; max-width: calc(100vw - 2 * var(--gutter)); padding: 4px; border: 4px solid; border-image: var(--box) 4 fill / 4px stretch; text-align: left; filter: drop-shadow(0 18px 24px #000c); }
.channel-menu[hidden] { display: none; }
.channel-option { position: relative; display: block; width: 100%; min-height: 60px; padding: 12px 12px 12px 48px; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 400 16px/1 var(--pixel); text-align: left; text-transform: uppercase; -webkit-font-smoothing: none; }
.channel-option:hover, .channel-option:focus-visible { background: var(--raise-2); }
.channel-option:active { background: var(--line); }
.channel-option:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
/* The chosen channel shows a lit pixel inside a pixel socket. */
.channel-option::before { content: ""; position: absolute; left: 16px; top: 14px; width: 14px; height: 14px; background: var(--line-strong); clip-path: var(--step-1); box-shadow: inset 0 0 0 2px var(--line-strong), inset 0 0 0 7px var(--raise); }
.channel-option[aria-checked="true"]::before { background: var(--red-line); box-shadow: inset 0 0 0 2px var(--red-line), inset 0 0 0 4px var(--raise); }
.channel-option .hint { display: block; margin-top: 8px; color: var(--soft); font: 400 14px/1.4 var(--sans); text-transform: none; }

@media (max-width: 480px) {
  .site-header { gap: 4px; padding-inline: 12px; }
  .site-header .brand-home span { display: none; }
  .site-header .socials { gap: 0; margin-right: 0; }
  .site-header .socials { min-width: 0; }
  /* The mode key shrinks to its chevron so the product's label keeps one line. */
  #channel-toggle { min-width: 52px; padding-inline: 0; }
  #channel-toggle .mode { display: none; }
  #download { white-space: nowrap; padding-inline: 12px; gap: 10px; }
  /* Pixel caps stay at 16px on a phone; long labels drop to their short form so every link keeps a 44px target. */
  .site-header .socials a { padding: 0 6px; }
  .site-header .nav-long { display: none; }
  .site-header .nav-short { display: inline; }
  .site-header .socials a[aria-current="page"] { padding-left: 18px; }
  .site-header .socials a[aria-current="page"]::before { left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-iteration-count: 1 !important; }
  :is(a, button, label, .shot):is(:hover, :active) { transform: none !important; }
}
/* Override every built-in theme so a saved mdBook preference keeps the site's palette. */
:root, .navy, .light, .rust, .coal, .ayu {
    --main-font: var(--sans);
    --mono-font: var(--mono);
    --cinnabar-red: #B8281E;
    --color-scheme: dark;
    --content-max-width: 64ch;
    --sidebar-target-width: 288px;
    --sidebar-resize-indicator-width: 6px;
    --menu-bar-height: 44px;
    --page-padding: 32px;
    --code-font-size: .875em;
    --bg: var(--ground);
    --fg: #ece8e2;
    --sidebar-bg: var(--ground);
    --sidebar-fg: var(--soft);
    --sidebar-active: var(--ink);
    --sidebar-non-existant: var(--quiet);
    --sidebar-spacer: var(--line);
    --sidebar-header-border-color: var(--line);
    --scrollbar: var(--line-strong);
    --icons: var(--soft);
    --icons-hover: var(--ink);
    --links: var(--red-text);
    --inline-code-color: var(--ink);
    --theme-popup-bg: var(--raise);
    --theme-popup-border: var(--line-strong);
    --theme-hover: var(--raise-2);
    --quote-bg: var(--raise);
    --quote-border: var(--line);
    --table-border-color: var(--line);
    --table-header-bg: var(--raise);
    --table-alternate-bg: transparent;
    --searchbar-border-color: var(--line-strong);
    --searchbar-bg: var(--raise);
    --searchbar-fg: var(--ink);
    --searchbar-shadow-color: transparent;
    --searchresults-header-fg: var(--soft);
    --searchresults-border-color: var(--line);
    --searchresults-li-bg: var(--raise);
    --search-mark-bg: var(--red-press);
    --copy-button-filter: invert(82%) sepia(6%) saturate(180%) hue-rotate(350deg);
    --copy-button-filter-hover: invert(100%);
    --footnote-highlight: var(--red-text);
    --warning-border: var(--red-text);
    --blockquote-note-color: var(--soft);
    --blockquote-tip-color: var(--soft);
    --blockquote-important-color: var(--ink);
    --blockquote-warning-color: var(--red-text);
    --blockquote-caution-color: var(--red-text);
}

html, body { font-family: var(--main-font); -webkit-font-smoothing: antialiased; }
body { font-size: 17px; }
a:focus-visible, button:focus-visible, label:focus-visible, input:focus-visible, pre:focus-visible, .table-wrapper:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 0; }

/* A fixed full-width header carries the brand, the native sidebar and search controls, and the navigation. */
.page { margin-block-start: 0; padding: 0 var(--page-padding); }
.page-wrapper { padding-top: var(--site-header-height); }
.site-header { position: fixed; inset: 0 0 auto; z-index: 200; background: var(--ground); border-bottom-color: var(--line); }
html .page #mdbook-menu-bar { position: fixed; top: 0 !important; left: calc(var(--gutter) + 156px); z-index: 201; display: flex; align-items: center; width: auto; height: var(--site-header-height); margin: 0; border: 0; background: transparent; }
#mdbook-menu-bar .left-buttons { display: flex; align-items: center; gap: 8px; margin: 0; }
#mdbook-menu-bar .icon-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 0; color: var(--soft); line-height: 1; transition: color .15s ease-out, background-color .15s ease-out, border-color .15s ease-out, transform .08s steps(1, end); }
#mdbook-menu-bar .icon-button:hover { background: #ffffff1a; color: var(--ink); }
#mdbook-menu-bar .icon-button:active { background: #ffffff0f; transform: translateY(1px); }
#mdbook-menu-bar .fa-svg { padding: 0; line-height: 1; font-size: 16px; }
#mdbook-menu-bar-hover-placeholder, #mdbook-menu-bar .menu-title,
#mdbook-menu-bar #mdbook-theme-toggle, #mdbook-theme-list, #mdbook-menu-bar .right-buttons, .nav-wide-wrapper { display: none; }

/* Wide headers draw the search toggle as a field with its shortcut. */
@media (min-width: 1000px) {
    #mdbook-menu-bar #mdbook-search-toggle { justify-content: flex-start; gap: 10px; width: 264px; height: 44px; padding: 0 8px 0 12px; border: 1px solid var(--line-strong); background: var(--raise); color: var(--quiet); }
    #mdbook-menu-bar #mdbook-search-toggle:hover { border-color: var(--quiet); background: var(--raise); color: var(--soft); }
    #mdbook-menu-bar #mdbook-search-toggle::before { content: "Search"; order: 1; font: 400 15px/1 var(--sans); }
    #mdbook-menu-bar #mdbook-search-toggle::after { content: "/"; order: 2; display: grid; place-items: center; width: 22px; height: 22px; margin-left: auto; border: 1px solid var(--line-strong); border-radius: 0; font: 400 12px/1 var(--mono); }
}

/* Sidebar. */
.sidebar { top: var(--site-header-height); z-index: 150; border-right: 1px solid var(--line); font-size: 15px; }
.sidebar .sidebar-scrollbox { padding: 24px 12px 64px; scrollbar-width: thin; }
.sidebar-resize-handle .sidebar-resize-indicator { opacity: 0; }
.chapter { line-height: 1.4; }
.chapter li.chapter-item { margin-block-start: 1px; line-height: 1.4; }
.chapter li.part-title { margin: 28px 10px 8px; color: var(--ink); font: 700 14px/1.3 var(--sans); }
.chapter li.part-title:first-child { margin-top: 0; }
.chapter-link-wrapper { display: flex; }
.chapter li a { position: relative; display: block; flex: 1; padding: 7px 10px; border-radius: 0; line-height: 1.35; transition: background-color .12s ease-out, color .12s ease-out; }
.chapter li a:hover { background: var(--raise); }
.chapter li a:active { background: var(--raise-2); }
.chapter li a.active { background: var(--raise-2); font-weight: 500; }
.chapter li > span > a.active::after { content: ""; position: absolute; top: 50%; right: 10px; width: 6px; height: 6px; margin-top: -3px; border-radius: 0; background: var(--red-line); }
.chapter a.current-header { background: transparent; }
.on-this-page { margin: 4px 0 8px 14px; padding-left: 4px; border-inline-start: 1px solid var(--line); font-size: 14px; }
.on-this-page li a { padding-block: 5px; }
.spacer { height: 1px; margin: 16px 10px; }
.section { padding-inline-start: 14px; }

/* Reading column. */
.content { padding: 56px 0 64px; overflow-y: visible; font-size: 16px; line-height: 1.65; }
.content main { max-width: var(--content-max-width); color: var(--fg); }
.content p, .content ol, .content ul { line-height: 1.68; }
.content li { margin-block: 6px; }
.content li::marker { color: var(--quiet); }
:target { scroll-margin-top: calc(var(--site-header-height) + 24px); }
h1:target::before, h2:target::before, h3:target::before, h4:target::before, h5:target::before, h6:target::before, dt:target::before { display: none; }
.content h1, .content h2, .content h3, .content h4, .content h5 { color: var(--ink); font-family: var(--sans); text-wrap: balance; }
.content h1 { margin: 0 0 16px; font-size: clamp(30px, 2.8vw, 38px); font-weight: 700; line-height: 1.08; letter-spacing: -.032em; }
.content h1 + p { color: var(--soft); font-size: 17px; line-height: 1.55; }
.content h2 { margin-block: 56px 16px; padding-top: 40px; border-top: 1px solid var(--line); font-size: 24px; font-weight: 700; line-height: 1.18; letter-spacing: -.022em; }
.content h3 { margin-block: 40px 12px; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.014em; }
.content h4, .content h5 { margin-block: 32px 8px; font-size: 16px; font-weight: 700; line-height: 1.3; }
.content .header:hover::after, .content .header:focus-visible::after { content: "#"; margin-left: .35em; color: var(--quiet); font-weight: 400; }
.content a:not(.header):not(.mobile-nav-chapters) { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--red-text) 35%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s ease-out; }
.content a:not(.header):not(.mobile-nav-chapters):hover { text-decoration-color: currentColor; }
.content hr { height: 1px; margin-block: 40px; border: 0; background: var(--line); }

/* Code. */
.content code { font-family: var(--mono-font); font-size: .86em; }
.content :not(pre) > code, .content :not(pre) > .hljs { padding: .14em .36em; border: 1px solid var(--line); border-radius: 0; background: var(--raise); color: var(--ink); overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.content a > code { color: inherit !important; }
.content .header code, .content .header .hljs { padding: 0; border: 0; background: none; font-size: .92em; font-weight: 500; letter-spacing: -.02em; }
.content pre { margin-block: 20px 24px; border: 1px solid var(--line); border-radius: 0; background: var(--raise); }
.content pre > code, .content pre > .hljs { display: block; padding: 18px 20px; overflow-x: auto; border-radius: 0; background: transparent; color: #e6e1da; font-size: 13.5px; line-height: 1.65; scrollbar-width: thin; }
pre > .buttons { top: 6px; right: 6px; padding: 0; }
pre:focus-within > .buttons { visibility: visible; opacity: 1; }
pre > .buttons button { width: 32px; height: 32px; margin: 0 0 0 4px; padding: 0; border-color: var(--line-strong); border-radius: 0; background: var(--raise-2); font-size: 15px; line-height: 1; }
pre > .buttons button.clip-button { padding: 0; }
pre > .buttons button.clip-button::before { display: block; width: 21px; margin: 0 auto; transform: scale(.76); }
.content .boring { opacity: .62; }
.content .hljs-comment, .content .hljs-quote { color: #a39d96; }
.content .hljs-keyword, .content .hljs-selector-tag, .content .hljs-literal,
.content .hljs-variable, .content .hljs-template-variable, .content .hljs-deletion { color: var(--red-text); }
.content .hljs-string, .content .hljs-regexp, .content .hljs-addition { color: #dcc9a3; }
.content .hljs-number, .content .hljs-symbol, .content .hljs-bullet,
.content .hljs-params, .content .hljs-meta, .content .hljs-link { color: #efb7a4; }
.content .hljs-title, .content .hljs-section, .content .hljs-attribute, .content .hljs-built_in { color: var(--ink); font-weight: 500; }
.content .hljs-type, .content .hljs-name, .content .hljs-attr,
.content .hljs-selector-id, .content .hljs-selector-class { color: #c9c3bb; }

/* Tables and notes. */
.table-wrapper { margin-block: 20px 24px; border: 1px solid var(--line); border-radius: 0; scrollbar-width: thin; }
.content table { width: 100%; margin: 0; font-size: 15px; line-height: 1.5; }
.content table thead { background: var(--raise); }
.content table thead tr { border: 0; }
.content table th, .content table thead th { padding: 10px 16px; border-bottom: 1px solid var(--line-strong); color: var(--ink); font-weight: 500; text-align: left; white-space: nowrap; }
.content table td { padding: 11px 16px; border: 0; border-top: 1px solid var(--line); vertical-align: top; }
.content table tbody tr:first-child td { border-top: 0; }
.content table td code { white-space: nowrap; overflow-wrap: normal; }
.content blockquote, .content .blockquote-tag { margin-block: 24px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 0; background: var(--raise); color: var(--fg); }
.content blockquote > :first-child { margin-top: 0; }
.content blockquote > :last-child { margin-bottom: 0; }
.blockquote-tag-title { margin-top: 0; font-weight: 700; }
.content .warning { margin-inline: 0; padding: 14px 20px; border: 1px solid var(--line-strong); border-radius: 0; }
.content .warning::before { display: none; }
kbd { padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--raise-2); box-shadow: inset 0 -1px #0006; color: var(--ink); font-family: var(--mono-font); font-size: .84em; line-height: 1.5; }
mark { color: #fff; }

/* Search. */
#mdbook-search-wrapper { padding-top: 32px; }
.searchbar-outer, .searchresults-outer { max-width: var(--content-max-width); }
#mdbook-searchbar { box-sizing: border-box; height: 52px; margin-block-start: 0; padding: 0 16px; border-radius: 0; font: 400 17px/1.4 var(--sans); }
#mdbook-searchbar::placeholder { color: var(--quiet); }
#mdbook-searchbar:focus { border-color: var(--quiet); outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: none; }
.spinner-wrapper { margin-block-start: 0; top: 4px; right: 4px; bottom: 4px; padding: 10px; border-radius: 0; background: var(--raise); }
.searchresults-header { padding: 20px 0 4px; color: var(--soft); font-weight: 500; }
.searchresults-outer { padding-bottom: 16px; border-block-end: 1px solid var(--line); }
ul#mdbook-searchresults { padding: 0; }
ul#mdbook-searchresults li { margin: 2px 0; padding: 10px 12px; border-radius: 0; transition: background-color .12s ease-out; }
ul#mdbook-searchresults li:hover { background: var(--raise); }
#mdbook-searchresults a { color: var(--ink); font-weight: 500; }
ul#mdbook-searchresults span.teaser { margin: 4px 0 0; color: var(--soft); font-size: 15px; line-height: 1.5; }
ul#mdbook-searchresults span.teaser em { color: var(--ink); font-weight: 500; }

/* Previous and next stay in the reading flow at every width. */
.nav-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: var(--content-max-width); margin: 56px auto 0; padding-top: 32px; border-top: 1px solid var(--line); }
.nav-wrapper > div { display: none; }
.mobile-nav-chapters, .mobile-nav-chapters:visited { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: center; gap: 2px 12px; text-align: left; float: none; width: auto; min-height: 72px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: 500 16px/1.2 var(--sans); text-decoration: none; transition: background-color .15s ease-out, border-color .15s ease-out, transform .08s steps(1, end); }
.content a.mobile-nav-chapters:link, .content a.mobile-nav-chapters:visited { color: var(--ink); }
.mobile-nav-chapters .fa-svg { grid-row: 1 / span 2; color: var(--quiet); font-size: 14px; }
.mobile-nav-chapters .chapter-name { grid-area: 2 / 2; overflow-wrap: anywhere; }
.mobile-nav-chapters::after { grid-area: 1 / 2; color: var(--quiet); font: 400 13px/1.3 var(--sans); }
.mobile-nav-chapters:hover { border-color: var(--line-strong); background: var(--raise); }
.mobile-nav-chapters:active { transform: translateY(1px); }
.mobile-nav-chapters.previous { grid-column: 1; }
.mobile-nav-chapters.previous::after { content: "Previous"; }
.mobile-nav-chapters.next { grid-column: 2; grid-template-columns: minmax(0, 1fr) auto; right: auto; text-align: right; }
.mobile-nav-chapters.next .fa-svg { grid-column: 2; }
.mobile-nav-chapters.next .chapter-name, .mobile-nav-chapters.next::after { grid-column: 1; }
.mobile-nav-chapters.next::after { content: "Next"; }

/* Below the wide layout the sidebar is a drawer over the page, under the fixed header. */
@media (max-width: 1079px) {
    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper { margin-inline-start: 0; transform: none; }
    #mdbook-sidebar-toggle-anchor:checked ~ .page-wrapper::before { content: ""; position: fixed; inset: var(--site-header-height) 0 0; z-index: 140; background: #0b0a09b3; pointer-events: none; }
    .sidebar { box-shadow: 24px 0 48px -24px #000c; }
}
@media (max-width: 700px) {
    :root, .navy, .light, .rust, .coal, .ayu { --page-padding: 20px; }
    .content { padding-top: 36px; font-size: 16px; }
    .content h1 + p { font-size: 17px; }
    .content h2 { margin-top: 44px; padding-top: 32px; font-size: 22px; }
    .content pre { margin-inline: -8px; }
    .table-wrapper { margin-inline: -8px; }
}
@media (max-width: 480px) {
    html .page #mdbook-menu-bar { left: 44px; }
    #mdbook-menu-bar .left-buttons { gap: 0; }
    .mobile-nav-chapters, .mobile-nav-chapters:visited { padding: 0 16px; }
}
@media (pointer: coarse) {
    .chapter li a { padding: 12px 10px; }
    pre > .buttons button { width: 44px; height: 44px; padding: 0; }
}

@media print {
    .site-header, #mdbook-menu-bar { display: none; }
    .page-wrapper { padding-top: 0; }
}

/* mdBook hides this checkbox, which leaves its sidebar toggle out of the keyboard order. */
#mdbook-sidebar-toggle-anchor.hidden { display: block !important; position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
#mdbook-sidebar-toggle-anchor:focus-visible ~ .page-wrapper #mdbook-sidebar-toggle { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Long code lines scroll inside their block; the visible bar says there is more. */
.content pre, .content pre > code { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* ---------- Arcade layer: the world owns the frame; the reading column stays calm, in the grotesk, with no scanlines. ---------- */
html, body { background: var(--ground); }
.site-header { border-bottom-width: 2px; }
.sidebar { border-right: 2px solid var(--line); }
/* Part titles in the rail are the book's section openers, set in pixel caps. */
.chapter li.part-title { margin: 32px 10px 10px; color: var(--quiet); font: 400 16px/1.2 var(--pixel); text-transform: uppercase; letter-spacing: 0; -webkit-font-smoothing: none; }
.chapter li a.active { background: var(--raise-2); }
/* The current chapter carries the same pixel menu cursor as the header. */
.chapter li > span > a.active::after { top: 50%; right: 12px; width: 6px; height: 10px; margin-top: -5px; background: var(--red-line); clip-path: polygon(0 0, 2px 0, 2px 2px, 4px 2px, 4px 4px, 6px 4px, 6px 6px, 4px 6px, 4px 8px, 2px 8px, 2px 10px, 0 10px); transform: scaleX(-1); }
.on-this-page { border-inline-start-width: 2px; }
.content h1 { font-weight: 800; font-stretch: 108%; letter-spacing: -.024em; }
.content h2 { border-top: 2px dashed var(--line-strong); font-weight: 700; }
.content :not(pre) > code, .content :not(pre) > .hljs { border-width: 1px; }
.content pre, .table-wrapper, .content blockquote, .content .blockquote-tag, .content .warning { border: 4px solid; border-image: var(--box) 4 fill / 4px stretch; background: none; }
.content pre > code, .content pre > .hljs { padding: 16px 18px; }
.content table thead { background: var(--raise-2); }
.content table th, .content table thead th { font: 400 16px/1.2 var(--pixel); text-transform: uppercase; -webkit-font-smoothing: none; }
.content .warning { position: relative; padding-left: 40px; }
.content .warning::before { display: block !important; content: ""; position: absolute; left: 16px; top: 22px; width: 8px; height: 8px; background: var(--red-line); }
kbd { border-width: 2px; border-bottom-width: 4px; box-shadow: none; }
#mdbook-searchbar { border-width: 2px; }
.mobile-nav-chapters, .mobile-nav-chapters:visited { border: 4px solid; border-image: var(--box) 4 fill / 4px stretch; }
.mobile-nav-chapters:hover { border-image-source: var(--box-hover); background: none; }
.mobile-nav-chapters::after { font: 400 16px/1.2 var(--pixel) !important; text-transform: uppercase; -webkit-font-smoothing: none; }
@media (min-width: 1000px) {
    #mdbook-menu-bar #mdbook-search-toggle { border-width: 2px; }
    #mdbook-menu-bar #mdbook-search-toggle::after { border-width: 2px; font: 400 16px/1 var(--pixel); }
}