/* Alchemy's Doxygen theme, the whole stylesheet: it replaces doxygen.css
   (HTML_STYLESHEET), and header.html loads neither tabs.css, navtree.css
   nor search.css.

   Four themes, chosen in the masthead and set on the root element as
   data-theme (header.html applies the reader's choice before the first
   paint). Every rule reads the tokens below; each theme only sets them.

   Weyard Day and Weyard Night are the progress images' look
   (alchemy-devtools/src/progress) with Golden Sun's own letters, one game pixel
   to the CSS pixel: sizes are in rem with the root at 16px, so one game
   pixel is 0.0625rem and every length is a whole number of them, and the
   pixel fonts stay crisp. All text is white with the images' half-black
   shadow, kept for the period look at its lower contrast. Raised panels
   (tables, members, notes) and sunken wells (the sidebar, code, the search
   field) are the images' bevels, as nine-slice pictures.

   Modern Day and Modern Night are an ordinary documentation look: the
   system's fonts, smoothed, no shadow, thin borders and rounded corners,
   at least 4.5:1 contrast.

   Weyard fonts. "Weyard Sans" (kerned) and "Weyard Mono" (one cell per
   glyph), each Regular, Bold, Italic and Bold Italic, picked only by the
   page's own font-style and font-weight (synthesis off): upright faces are
   the menu letters (games/tbs/src/graphics/ui/window_tiles.png), italic
   faces the text-box font (games/tbs/src/graphics/font/text.png), bold the
   game's double strike. Japanese is the game's Japanese text font
   (font/text_ja.png), part of Weyard Mono. The emoji (🌋, ☀️ and ⚓️) are
   SerenityOS's, as the colour font Weyard Emoji (weyard-emoji-source.txt).

   Nothing animates, in any theme. */

/* Weyard Emoji draws only its emoji and the emoji presentation selector,
   so ☀️ and ⚓️ do not fall through to the system's emoji. */
@font-face { font-family: "Weyard Emoji"; src: url("weyard-emoji.otf") format("opentype"); font-display: block; unicode-range: U+2600, U+2693, U+1F30B, U+FE0F; }
@font-face { font-family: "Weyard Sans"; src: url("weyard-sans.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: block; unicode-range: U+0000-00FF, U+2000-27FF; }
@font-face { font-family: "Weyard Sans"; src: url("weyard-sans-bold.otf") format("opentype"); font-style: normal; font-weight: 700; font-display: block; unicode-range: U+0000-00FF, U+2000-27FF; }
@font-face { font-family: "Weyard Sans"; src: url("weyard-sans-italic.otf") format("opentype"); font-style: italic; font-weight: 400; font-display: block; unicode-range: U+0000-00FF, U+2000-27FF; }
@font-face { font-family: "Weyard Sans"; src: url("weyard-sans-bold-italic.otf") format("opentype"); font-style: italic; font-weight: 700; font-display: block; unicode-range: U+0000-00FF, U+2000-27FF; }
@font-face { font-family: "Weyard Mono"; src: url("weyard-mono.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: block; unicode-range: U+0000-00FF, U+2000-27FF; }
@font-face { font-family: "Weyard Mono"; src: url("weyard-mono-bold.otf") format("opentype"); font-style: normal; font-weight: 700; font-display: block; unicode-range: U+0000-00FF, U+2000-27FF; }
@font-face { font-family: "Weyard Mono"; src: url("weyard-mono-italic.otf") format("opentype"); font-style: italic; font-weight: 400; font-display: block; unicode-range: U+0000-00FF, U+2000-27FF; }
@font-face { font-family: "Weyard Mono"; src: url("weyard-mono-bold-italic.otf") format("opentype"); font-style: italic; font-weight: 700; font-display: block; unicode-range: U+0000-00FF, U+2000-27FF; }
/* Japanese, upright in every style. */
@font-face { font-family: "Weyard Mono"; src: url("weyard-mono-ja.otf") format("opentype"); font-style: normal; font-weight: 400; font-display: block; unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: "Weyard Mono"; src: url("weyard-mono-ja.otf") format("opentype"); font-style: italic; font-weight: 400; font-display: block; unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: "Weyard Mono"; src: url("weyard-mono-ja-bold.otf") format("opentype"); font-style: normal; font-weight: 700; font-display: block; unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: "Weyard Mono"; src: url("weyard-mono-ja-bold.otf") format("opentype"); font-style: italic; font-weight: 700; font-display: block; unicode-range: U+3000-303F, U+3040-309F, U+30A0-30FF, U+4E00-9FFF, U+FF00-FFEF; }

/* Anything the Weyard fonts lack: a system face scaled down to the pixel
   faces' letter height, so a stray character keeps to the line instead of
   standing twice as tall. The pages are checked for such characters. */
@font-face { font-family: "Weyard Fallback"; src: local("HiraginoSans-W3"), local("Hiragino Sans W3"), local("Hiragino Kaku Gothic ProN W3"), local("Noto Sans CJK JP"), local("Noto Sans JP"), local("Arial Unicode MS"), local("Helvetica"), local("Arial"); size-adjust: 75%; }

/* ---- Themes ----------------------------------------------------------- */

/* Weyard Day, also the default before a theme is set. */
:root {
  font-size: 16px;
  color-scheme: light;
  /* colour: the base and its steps, 15% lighter and darker */
  --base: #70959d;
  --raise: #81abb4;
  --sink: #5f7f85;
  --ink: #ffffff;
  --muted: #ffffff;
  --rule: #70959d;
  --shadow: 0.0625rem 0.0625rem 0 rgba(0, 0, 0, 0.5);
  /* panels: the images' bevels, nine-slice */
  --raised: url("panel-raised.svg") 8 fill / 0.5rem stretch;
  --sunken: url("panel-side.svg") 8 fill / 0.5rem stretch;
  --raised-edge: url("panel-raised.svg") 8 / 0.5rem stretch; /* the bevel alone, for a control that paints its own face */
  --panel-border: 0.25rem solid transparent;
  --panel-fill: transparent;
  --well-fill: transparent;
  --radius: 0;
  --chip-clip: polygon(0.0625rem 0, calc(100% - 0.0625rem) 0, 100% 0.0625rem, 100% calc(100% - 0.0625rem), calc(100% - 0.0625rem) 100%, 0.0625rem 100%, 0 calc(100% - 0.0625rem), 0 0.0625rem);
  /* type and rhythm */
  --text: "Weyard Emoji", "Weyard Sans", "Weyard Mono", "Weyard Fallback", serif;
  --mono: "Weyard Emoji", "Weyard Mono", "Weyard Fallback", monospace;
  --size: 1rem;
  --line: 1rem;
  --code-size: 1rem;
  --code-line: 0.75rem;
  --row: 1rem; /* a sidebar row */
  --mast: 2rem; /* the masthead */
  --smoothing: none;
  --side: 15rem; /* the sidebar, 240 pixels */
  /* icons: the pixel pictures, white with their shadow */
  --caret-closed: url("caret-closed.svg");
  --caret-open: url("caret-open.svg");
  --close: url("close.svg");
  --diamond: url("diamond.svg");
}
:root[data-theme="weyard-night"] {
  color-scheme: dark;
  --base: #1d3f47;
  --raise: #26515b;
  --sink: #15323a;
  --rule: #1d3f47;
  --raised: url("panel-raised-night.svg") 8 fill / 0.5rem stretch;
  --sunken: url("panel-side-night.svg") 8 fill / 0.5rem stretch;
  --raised-edge: url("panel-raised-night.svg") 8 / 0.5rem stretch;
}
:root[data-theme^="modern"] {
  --shadow: none;
  --raised: none;
  --raised-edge: none;
  --sunken: none;
  --panel-border: 0.0625rem solid var(--rule);
  --panel-fill: var(--raise);
  --well-fill: var(--sink);
  --radius: 0.375rem;
  --chip-clip: none;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --size: 0.9375rem;
  --line: 1.5rem;
  --code-size: 0.8125rem;
  --code-line: 1.25rem;
  --row: 1.75rem;
  --mast: 3rem;
  --smoothing: auto;
  --side: 17rem;
  /* icons: plain shapes as masks, in the text's colour */
  --caret-closed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3l6 5-6 5z'/%3E%3C/svg%3E");
  --caret-open: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5h10l-5 6z'/%3E%3C/svg%3E");
  --close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  --diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3l5 5-5 5-5-5z'/%3E%3C/svg%3E");
}
:root[data-theme="modern-day"] {
  color-scheme: light;
  --base: #ffffff;
  --raise: #f6f8fa;
  --sink: #f0f3f5;
  --ink: #1f2328;
  --muted: #59636e;
  --rule: #d1d9e0;
  --accent: #0b6779;
}
:root[data-theme="modern-night"] {
  color-scheme: dark;
  --base: #0e1517;
  --raise: #162024;
  --sink: #111a1d;
  --ink: #e4eced;
  --muted: #9aabae;
  --rule: #2c3a3e;
  --accent: #6cc3d3;
}

/* ---- Page ------------------------------------------------------------- */

*,
*::before,
*::after {
  transition: none !important;
  animation: none !important;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  margin: 0;
  scroll-behavior: auto;
  background: var(--base);
}
body {
  overflow: hidden;
  font-family: var(--text);
  font-size: var(--size);
  line-height: var(--line);
  color: var(--ink);
  text-shadow: var(--shadow);
  /* No smoothing in the Weyard themes: the closest each browser offers
     (Firefox on macOS has no off switch). */
  -webkit-font-smoothing: var(--smoothing);
  font-smooth: never;
  font-synthesis: none;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
}
:root[data-theme^="modern"] body {
  font-smooth: auto;
  font-synthesis: weight style;
}
input,
button,
select,
table,
h1, h2, h3, h4, h5, h6 {
  font: inherit;
  color: inherit;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  text-decoration: underline 0.0625rem;
  text-underline-offset: 0.125rem;
  margin: 0.75rem 0 0.25rem;
}
:root[data-theme^="modern"] :is(h1, h2, h3, h4, h5, h6) {
  text-decoration: none;
  line-height: 1.3;
  margin: 1.5rem 0 0.5rem;
}
:root[data-theme^="modern"] h1 {
  font-size: 1.75rem;
}
:root[data-theme^="modern"] h2 {
  font-size: 1.3125rem;
  padding-bottom: 0.25rem;
  border-bottom: 0.0625rem solid var(--rule);
}
:root[data-theme^="modern"] h3 {
  font-size: 1.0625rem;
}
p,
dl,
ul,
ol {
  margin: 0 0 0.5rem;
}
:root[data-theme^="modern"] :is(p, dl, ul, ol) {
  margin-bottom: 0.875rem;
}
p,
li,
dd {
  max-width: 76ch;
}
ul,
ol {
  padding-left: 0.75rem;
}
:root[data-theme^="modern"] :is(ul, ol) {
  padding-left: 1.5rem;
}
img {
  image-rendering: pixelated;
}
a {
  color: inherit;
  text-decoration: underline 0.0625rem;
  text-underline-offset: 0.125rem;
}
a:hover {
  text-decoration-thickness: 0.125rem;
}
:root[data-theme^="modern"] a {
  color: var(--accent);
  text-decoration: none;
}
:root[data-theme^="modern"] a:hover {
  text-decoration: underline 0.0625rem;
}
:focus-visible {
  outline: 0.0625rem solid var(--ink);
  outline-offset: 0.0625rem;
}
:root[data-theme^="modern"] :focus-visible {
  outline: 0.125rem solid var(--accent);
  border-radius: 0.125rem;
}
::selection {
  background: var(--ink);
  color: var(--sink);
  text-shadow: none;
}
.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -2rem;
  z-index: 100;
  padding: 0.25rem 0.5rem;
  background: var(--sink);
}
.skip-link:focus {
  top: 0.25rem;
}
.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hidden,
.ttc,
.inherit {
  display: none;
}
/* Weyard Emoji is the Weyard themes'; the modern ones use the system's. */
:root[data-theme^="modern"] .mark {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

/* ---- Masthead, theme, search and breadcrumb --------------------------- */

/* The masthead and the search field share one row, so neither can cover
   the other at any width. */
#top {
  display: flex;
  align-items: center;
}
:root[data-theme^="modern"] #top {
  border-bottom: 0.0625rem solid var(--rule);
}
#titlearea {
  flex: 1;
  min-width: 0;
}
#main-nav {
  flex: none;
  padding-right: 0.5rem;
}
.masthead {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--mast);
  padding: 0.125rem 0.75rem 0.125rem 0.5rem;
}
:root[data-theme^="modern"] .masthead {
  padding-left: 1rem;
}
.masthead a {
  text-decoration: none;
  white-space: nowrap;
}
:root[data-theme^="modern"] .masthead-name {
  color: var(--ink);
  font-weight: 600;
}
.masthead .mark {
  margin-right: 0.25rem;
}
.masthead-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  white-space: nowrap;
}
/* The theme and light-or-dark dropdowns: native selects. In the Weyard
   themes each stands out like a button, a raised panel with the open caret
   at its right; in the modern ones each is a plain bordered box with the
   system's arrow. */
.look-select {
  height: 1.5rem;
  padding: 0 1.125rem 0 0.25rem;
  border: var(--panel-border);
  border-image: var(--raised-edge);
  border-radius: var(--radius);
  /* the caret over the panel's face: a filled border image would cover it */
  background: var(--caret-open) no-repeat right 0.25rem center, var(--raise);
  background-clip: padding-box;
  text-shadow: var(--shadow);
  appearance: none;
  cursor: pointer;
}
:root[data-theme^="modern"] .look-select {
  height: 2rem;
  padding: 0 0.5rem;
  font-size: 0.875rem;
  background: var(--panel-fill);
  appearance: auto;
}
.look-select option {
  background: var(--sink);
  color: var(--ink);
}
/* Doxygen's index menu stays, so that it writes the search's settings;
   only its search field shows, at the masthead's right. */
#main-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#main-nav li {
  display: none;
}
#main-nav li:has(#MSearchBox) {
  display: block;
}
#MSearchBox {
  width: 12rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  padding: 0 0.0625rem;
  border: var(--panel-border);
  border-image: var(--sunken);
  border-radius: var(--radius);
  background: var(--well-fill);
}
:root[data-theme^="modern"] #MSearchBox {
  height: 2rem;
  padding: 0 0.5rem;
}
#MSearchBox .left {
  display: flex;
  align-items: center;
  flex: 1;
}
/* A looking glass before the field: SerenityOS's 🔍 picture at its own
   size in the Weyard themes, a drawn one in the modern ones. (Doxygen's
   own icon, #MSearchSelect, opens its scope menu, so it stays hidden.) */
#MSearchBox .left::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.625rem;
  margin-left: 0.125rem;
  background: url("search-glass.png") no-repeat;
  image-rendering: pixelated;
}
:root[data-theme^="modern"] #MSearchBox .left::before {
  width: 1rem;
  height: 1rem;
  margin-left: 0;
  background: var(--muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M10.25 10.25L13.5 13.5' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 1rem no-repeat;
}
#MSearchSelect {
  display: none;
}
#MSearchField {
  width: 100%;
  height: 1rem;
  margin-left: 0.125rem;
  padding: 0;
  border: 0;
  outline: 0;
  background: none;
  caret-color: var(--ink);
}
:root[data-theme^="modern"] #MSearchField {
  height: 1.5rem;
  font-size: 0.875rem;
}
#MSearchField::placeholder {
  color: var(--muted);
  opacity: 1;
}
#MSearchClose {
  display: none;
  width: 1rem;
  height: 1rem;
  padding: 0.375rem 0 0 0.125rem;
}
.close-icon {
  width: 0.5rem;
  height: 0.5rem;
  background: var(--close) no-repeat;
}
:root[data-theme^="modern"] .close-icon {
  width: 1rem;
  height: 1rem;
  background: var(--muted);
  mask: var(--close) center / 1rem no-repeat;
}
:root[data-theme^="modern"] #MSearchClose {
  padding: 0;
}
#MSearchSelectWindow,
#MSearchResultsWindow {
  display: none;
  position: absolute;
  z-index: 50;
  padding: 0.125rem 0.25rem;
  border: var(--panel-border);
  border-image: var(--raised);
  border-radius: var(--radius);
  background: var(--panel-fill);
}
:root[data-theme^="modern"] #MSearchResultsWindow {
  padding: 0.5rem 0.75rem;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}
#MSearchResultsWindow {
  width: 27.5rem !important;
  height: auto !important;
  max-height: 70vh;
  overflow: auto;
}
.SRResult,
.SRPage .SRChildren {
  display: none;
}
.SRSymbol,
#MSearchSelectWindow a {
  display: block;
  text-decoration: none;
}
.SRScope,
.SRStatus {
  text-decoration: none;
}
.SRChildren {
  padding-left: 0.75rem;
}

/* The breadcrumb, pinned under the masthead above the content. */
#nav-path {
  position: fixed;
  top: var(--mast);
  left: calc(var(--side) + 0.375rem);
  right: 0;
  z-index: 10;
}
#nav-path ul {
  display: flex;
  height: var(--line);
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}
:root[data-theme^="modern"] #nav-path ul {
  height: 2rem;
  align-items: center;
  padding-left: 0.75rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.navelem {
  padding-left: 0.5rem;
}
.navelem + .navelem::before {
  content: "/";
  margin-right: 0.5rem;
}
:root[data-theme^="modern"] .navelem a {
  color: var(--muted);
}

/* ---- Sidebar: Doxygen's navtree.js, in a recessed panel --------------- */

#side-nav {
  position: absolute;
  left: 0;
  width: calc(var(--side) + 0.375rem) !important;
  overflow: hidden;
}
#doc-content {
  display: block;
  overflow: auto;
  margin: var(--line) 0 0 calc(var(--side) + 0.375rem) !important;
}
:root[data-theme^="modern"] #doc-content {
  margin-top: 2rem !important;
}
#splitbar,
#nav-sync,
#nav-tree-contents > ul > li > .item /* Doxygen's root above Alchemy and the two games */ {
  display: none !important;
}
#nav-tree {
  height: 100%;
  margin-left: 0.25rem;
  padding: 0.125rem 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--base) transparent;
  border: var(--panel-border);
  border-image: var(--sunken);
  background: var(--well-fill);
}
:root[data-theme^="modern"] #nav-tree {
  margin-left: 0;
  padding: 0.5rem 0;
  border-width: 0 0.0625rem 0 0;
  border-radius: 0;
  scrollbar-color: var(--rule) transparent;
}
#nav-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#nav-tree-contents > ul > li > ul {
  margin-left: -1rem;
}
#nav-tree .item {
  display: flex;
  align-items: center;
  height: var(--row);
  white-space: nowrap;
}
:root[data-theme^="modern"] #nav-tree .item {
  font-size: 0.875rem;
}
/* The caret sits in its own link; centring that link keeps it on the
   label's line at every row height. */
#nav-tree .item > a {
  display: flex;
  align-items: center;
  align-self: stretch;
}
#nav-tree .selected {
  background: var(--base);
}
:root[data-theme^="modern"] #nav-tree .selected {
  background: var(--raise);
  box-shadow: inset 0.1875rem 0 0 var(--accent);
}
:root[data-theme^="modern"] #nav-tree .selected a {
  color: var(--ink);
  font-weight: 600;
}
#nav-tree .label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nav-tree a {
  text-decoration: none;
}
:root[data-theme^="modern"] #nav-tree a {
  color: var(--ink);
}
#nav-tree .item:hover .label a {
  text-decoration: underline 0.0625rem;
  text-underline-offset: 0.125rem;
}
/* The carets, each centred in the 16-pixel cell before its label;
   navtree.js indents with inline padding (and sizes a leaf's empty cell
   with an inline width). The Weyard themes draw the white pixel pictures,
   the modern ones a plain triangle in the muted text colour. */
.arrow {
  display: inline-block;
  box-sizing: content-box;
  flex: none;
  width: 1rem;
  height: 1rem;
  vertical-align: top;
  cursor: pointer;
  background: no-repeat content-box;
}
.arrowhead {
  display: none;
}
.arrow:has(.closed) {
  background-image: var(--caret-closed);
  background-position: 0.375rem 0.25rem;
}
.arrow:has(.opened) {
  background-image: var(--caret-open);
  background-position: 0.25rem 0.375rem;
}
:root[data-theme^="modern"] .arrow:has(.closed),
:root[data-theme^="modern"] .arrow:has(.opened) {
  background: var(--muted);
  background-clip: content-box;
  mask-origin: content-box;
  mask-clip: content-box;
  mask-position: center;
  mask-size: 1rem;
  mask-repeat: no-repeat;
}
:root[data-theme^="modern"] .arrow:has(.closed) {
  mask-image: var(--caret-closed);
}
:root[data-theme^="modern"] .arrow:has(.opened) {
  mask-image: var(--caret-open);
}

/* ---- Content ---------------------------------------------------------- */

div.header,
div.contents {
  padding: 0 0.75rem;
  max-width: 70rem;
}
:root[data-theme^="modern"] :is(div.header, div.contents) {
  padding: 0 2rem;
  max-width: 64rem;
}
div.contents {
  padding-bottom: 1rem;
}
:root[data-theme^="modern"] div.contents {
  padding-bottom: 3rem;
}
/* A README page's own h1 is its title; Doxygen's copy of it goes. */
div.header:has(+ div.contents > .textblock > h1:first-child) .headertitle {
  display: none;
}
div.summary {
  float: right;
  padding-top: 0.5rem;
}
:root[data-theme^="modern"] div.summary {
  font-size: 0.8125rem;
}
.textblock li::marker {
  color: inherit;
}
hr {
  height: 0.0625rem;
  border: 0;
  background: var(--sink);
}
:root[data-theme^="modern"] hr {
  background: var(--rule);
}
dl.section dt {
  font-weight: bold;
}
/* Doxygen's ◆ link before each member, drawn as our diamond. */
.permalink a {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  overflow: hidden;
  color: transparent;
  text-shadow: none;
  background: var(--diamond);
}
:root[data-theme^="modern"] .permalink a {
  width: 0.75rem;
  height: 0.75rem;
  background: var(--muted);
  mask: var(--diamond) center / 0.75rem no-repeat;
}

/* Raised panels */
table.memberdecls,
table.markdownTable,
table.fieldtable,
table.directory,
.memitem,
dl.section,
blockquote,
.game-banner,
ul.game-index li,
#powerTip {
  margin: 0.25rem 0 0.5rem;
  padding: 0.125rem 0.25rem;
  border: var(--panel-border);
  border-image: var(--raised);
  border-radius: var(--radius);
  background: var(--panel-fill);
}
:root[data-theme^="modern"] :is(table.memberdecls, table.markdownTable, table.fieldtable, table.directory, .memitem, dl.section, blockquote, .game-banner, ul.game-index li, #powerTip) {
  margin: 0.5rem 0 1rem;
  padding: 0.25rem 0.5rem;
}
:root[data-theme^="modern"] :is(dl.section, blockquote, .game-banner) {
  padding: 0.75rem 1rem;
}
table.memberdecls,
table.markdownTable,
table.fieldtable,
table.directory {
  border-collapse: separate;
  border-spacing: 0;
}
table.memberdecls,
table.directory {
  width: 100%;
}
td,
th {
  padding: 0.125rem 0.375rem;
  border-bottom: 0.0625rem solid var(--rule);
  text-align: left;
  vertical-align: top;
}
:root[data-theme^="modern"] :is(td, th) {
  padding: 0.375rem 0.625rem;
}
tr:last-child > td,
tr:last-child > th {
  border-bottom: 0;
}
.memItemLeft {
  text-align: right;
  white-space: nowrap;
}
.memItemRight {
  width: 100%;
}
.memberdecls tr.heading td,
.memberdecls tr.heading h2 {
  margin: 0.125rem 0;
}
:root[data-theme^="modern"] .memberdecls tr.heading h2 {
  border-bottom: 0;
  font-size: 1rem;
}
.mdescLeft,
.memItemLeft:has(+ .memItemRight) {
  border-bottom-color: transparent;
}
:root[data-theme^="modern"] .mdescRight {
  color: var(--muted);
}
h2.memtitle {
  margin: 0.75rem 0 0;
}
:root[data-theme^="modern"] h2.memtitle {
  margin-top: 2rem;
  border-bottom: 0;
  font-size: 1.0625rem;
}
.memitem {
  width: 100%;
}
.memproto {
  margin: 0.125rem;
  padding: 0 0.25rem;
  border: var(--panel-border);
  border-image: var(--sunken);
  border-radius: var(--radius);
  background: var(--well-fill);
}
:root[data-theme^="modern"] .memproto {
  margin: 0.25rem 0;
  padding: 0.5rem 0.75rem;
}
table.memname td {
  padding: 0;
  border: 0;
}
.memdoc {
  padding: 0.25rem 0.375rem;
}
:root[data-theme^="modern"] .memdoc {
  padding: 0.5rem 0.25rem;
}
table.directory td.entry {
  white-space: nowrap;
}
table.directory tr {
  background: none;
}
.spacer {
  display: inline-block;
  width: 1rem;
}
/* The listing is always open: each folder takes the open caret. */
table.directory a[href^="dir_"]::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.3125rem;
  margin: 0 0.1875rem 0.125rem 0;
  background: var(--caret-open);
}
:root[data-theme^="modern"] table.directory a[href^="dir_"]::before {
  width: 1rem;
  height: 1rem;
  margin: 0 0.125rem -0.1875rem 0;
  background: var(--muted);
  mask: var(--caret-open) center / 1rem no-repeat;
}
.doc-icon,
.folder-icon {
  display: inline-block;
  margin-right: 0.25rem;
  background: var(--ink);
  box-shadow: var(--shadow);
}
.doc-icon {
  width: 0.4375rem;
  height: 0.5625rem;
}
.folder-icon {
  width: 0.5625rem;
  height: 0.4375rem;
}
:root[data-theme^="modern"] :is(.doc-icon, .folder-icon) {
  background: var(--muted);
  border-radius: 0.0625rem;
}
#powerTip {
  display: none;
  position: absolute;
  z-index: 100;
  max-width: 35rem;
}

/* ---- Code, sunken, in the mono family --------------------------------- */

div.fragment,
pre.fragment,
.memproto,
.memItemLeft,
.memItemRight,
.memname,
.paramname,
.fieldtable .fieldtype,
.fieldtable .fieldname,
code,
span.tt {
  font-family: var(--mono);
  font-kerning: none;
}
:root[data-theme^="modern"] :is(div.fragment, pre.fragment, .memproto, .memItemLeft, .memItemRight, .memname, .paramname, .fieldtable .fieldtype, .fieldtable .fieldname, code, span.tt) {
  font-size: var(--code-size);
}
div.fragment,
pre.fragment {
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  margin: 0.25rem 0 0.5rem;
  padding: 0.125rem 0.25rem;
  border: var(--panel-border);
  border-image: var(--sunken);
  border-radius: var(--radius);
  background: var(--well-fill);
}
:root[data-theme^="modern"] :is(div.fragment, pre.fragment) {
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 1rem;
}
div.line {
  min-height: var(--code-line);
  line-height: var(--code-line);
  white-space: pre; /* 80 columns scroll sideways rather than wrap */
}
span.lineno {
  display: inline-block;
  width: 2.1875rem; /* five 7-pixel digits */
  margin-right: 0.5rem;
  padding-right: 0.25rem;
  border-right: 0.0625rem solid var(--rule);
  text-align: right;
}
:root[data-theme^="modern"] span.lineno {
  width: 3rem;
  margin-right: 0.75rem;
  padding-right: 0.5rem;
  color: var(--muted);
}
span.lineno a {
  text-decoration: none;
}
:root[data-theme^="modern"] span.lineno a {
  color: var(--muted);
}
/* Inline code: a sunken chip, two pixels of padding and one-pixel stepped
   corners in the Weyard themes; the line keeps its height. */
code,
span.tt {
  padding: 0 0.125rem;
  white-space: nowrap;
  background: var(--sink);
  border-radius: var(--radius);
  clip-path: var(--chip-clip);
}
:root[data-theme^="modern"] :is(code, span.tt) {
  padding: 0.125rem 0.375rem;
  font-size: 0.85em;
  white-space: normal;
  border-radius: 0.25rem;
}
:root[data-theme^="modern"] :is(div.fragment, pre.fragment) code {
  padding: 0;
  background: none;
}

/* ---- Footer: the project, the tools and the credits ------------------ */

.site-footer {
  max-width: 70rem;
  margin-top: 1rem;
  padding: 0.5rem 0.75rem 1rem;
  border-top: 0.0625rem solid var(--rule);
}
:root[data-theme^="modern"] .site-footer {
  max-width: 64rem;
  margin-top: 2rem;
  padding: 1rem 2rem 2rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
:root[data-theme^="modern"] .site-footer a {
  color: var(--muted);
  text-decoration: underline 0.0625rem;
}

/* ---- The games' banners ----------------------------------------------- */

.game-banner .mark,
ul.game-index .mark {
  margin-right: 0.25rem;
}
ul.game-index {
  display: flex;
  gap: 0.5rem;
  padding: 0;
  list-style: none;
}

/* ---- Small screens: the sidebar goes ---------------------------------- */

@media (max-width: 47.5rem) {
  #side-nav {
    display: none !important;
  }
  /* The page scrolls as a whole, the breadcrumb (last in the page) moved up
     to the top of the content, as on wide screens. */
  body {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  #nav-path {
    order: 1;
    position: static;
    margin-top: 0.25rem;
  }
  #container {
    order: 2;
  }
  #doc-content {
    height: auto !important;
    overflow: visible;
    margin: 0 !important;
  }
  #top {
    flex-wrap: wrap;
  }
  #titlearea,
  #main-nav {
    flex-basis: 100%;
  }
  #main-nav {
    padding: 0 0.5rem 0.25rem;
  }
  #MSearchBox {
    width: 100%;
  }
  div.header,
  div.contents {
    padding: 0 0.5rem !important;
  }
  div.summary {
    float: none;
  }
}