/* The book's design: Material for MkDocs with the game's colours and the game's own font.
 *
 * Every colour below is an entry of one of the game's palettes, as the files on the disk hold
 * it (original/disk/Wings_of_Fury/shapes/), each 4-bit component widened to 8 bits by
 * repeating it.  The comment after each colour names the file and the entry, and
 * book/tools/build.py --check reads those comments and compares every colour with the file.
 * Day is the day mission's palettes and the title's, night the night mission's:
 *
 *   wingspalette    the sky of a day mission             ocean.palette   its sea
 *   night.p         the sky of a night mission           nightocean.p    its sea
 *   wingstitle      the title picture                    iff-dash        the dashboard by day
 *
 * The headings are set in the game's font, newarmyfont, made into fonts/wof-newarmy.woff by
 * book/tools/webfont.py.  One of its pixels is one unit wide and two high, so it stands
 * sharp at 24 and 48 pixels and is used at those sizes only.  The text is a serif of the
 * reader's system, the code the system's monospace: the site loads nothing from elsewhere.
 */

@font-face {
  font-family: "WoF Newarmy";
  src: url("../fonts/wof-newarmy.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --wof-pixel-font: "WoF Newarmy", var(--wof-sans);
  --wof-serif: Charter, "Bitstream Charter", "Iowan Old Style", "Palatino Linotype", Palatino,
    "URW Palladio L", P052, Georgia, serif;
  --wof-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --md-text-font: system-ui;
  --md-code-font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono",
    "DejaVu Sans Mono";
  --wof-measure: 34rem;                 /* the prose's line length */
}

/* ------------------------------------------------------------------ day */

[data-md-color-scheme="default"] {
  --wof-ink: #111122;                   /* wingspalette 6 */
  --wof-paper: #FFFFFF;                 /* wingspalette 31 */
  --wof-header: #003377;                /* ocean.palette 13 */
  --wof-footer: #002255;                /* wingspalette 19 */
  --wof-link: #0066AA;                  /* ocean.palette 10 */
  --wof-hover: #EE6622;                 /* wingspalette 2 */
  --wof-title: #FFBB00;                 /* wingstitle 25 */
  --wof-heading: #003377;               /* ocean.palette 13 */
  --wof-code: #EEEEEE;                  /* wingstitle 31 */
  --wof-dev: #BB7700;                   /* wingstitle 23 */
  --wof-figures: #0088CC;               /* ocean.palette 8 */
  --wof-on-header: #EEEEEE;             /* wingstitle 31 */
}

/* ------------------------------------------------------------------ night */

[data-md-color-scheme="slate"] {
  --wof-ink: #CCCCDD;                   /* night.p 31 */
  --wof-paper: #111122;                 /* night.p 6 */
  --wof-header: #001133;                /* nightocean.p 15 */
  --wof-footer: #002244;                /* night.p 19 */
  --wof-link: #88BBCC;                  /* nightocean.p 2 */
  --wof-hover: #FFAA22;                 /* night.p 11 */
  --wof-title: #FFBB00;                 /* wingstitle 25 */
  --wof-heading: #FFBB00;               /* wingstitle 25 */
  --wof-code: #222233;                  /* night.p 25 */
  --wof-dev: #FFBB00;                   /* wingstitle 25 */
  --wof-figures: #77AACC;               /* wingspalette 22 */
  --wof-on-header: #CCCCDD;             /* night.p 31 */
}

/* Material's colour variables, from the tokens above, in both schemes. */
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--wof-paper);
  --md-default-fg-color: var(--wof-ink);
  --md-default-fg-color--light: color-mix(in srgb, var(--wof-ink) 72%, transparent);
  --md-default-fg-color--lighter: color-mix(in srgb, var(--wof-ink) 40%, transparent);
  --md-default-fg-color--lightest: color-mix(in srgb, var(--wof-ink) 10%, transparent);
  --md-primary-fg-color: var(--wof-header);
  --md-primary-fg-color--light: var(--wof-link);
  --md-primary-fg-color--dark: var(--wof-footer);
  --md-primary-bg-color: var(--wof-on-header);
  --md-primary-bg-color--light: color-mix(in srgb, var(--wof-on-header) 70%, transparent);
  --md-accent-fg-color: var(--wof-hover);
  --md-accent-fg-color--transparent: color-mix(in srgb, var(--wof-hover) 10%, transparent);
  --md-accent-bg-color: var(--wof-paper);
  --md-typeset-a-color: var(--wof-link);
  --md-code-bg-color: var(--wof-code);
  --md-code-fg-color: var(--wof-ink);
  --md-footer-bg-color: var(--wof-footer);
  --md-footer-bg-color--dark: var(--wof-header);
  --md-footer-fg-color: var(--wof-on-header);
}

/* ------------------------------------------------------------------ type */

.md-typeset {
  font-family: var(--wof-serif);
  font-size: .85rem;
  line-height: 1.65;
}

/* The header: the book's title in the game's font and the title's gold; the page's title,
   which takes its place on scrolling, in the same font. */
.md-header__topic {
  font-family: var(--wof-pixel-font);
  font-size: 24px;
  font-weight: normal;
  letter-spacing: 0;
}

.md-header__topic:first-child {
  font-weight: normal;
  color: var(--wof-title);
}

.md-typeset h1,
.md-typeset h2 {
  font-family: var(--wof-pixel-font);
  font-weight: normal;
  letter-spacing: 0;
  color: var(--wof-heading);
}

.md-typeset h1 {
  font-size: 48px;
  line-height: 1.25;
  margin: 0 0 1em;
}

.md-typeset h2 {
  font-size: 24px;
  line-height: 1.5;
  margin: 2em 0 .6em;
}

.md-typeset h3,
.md-typeset h4 {
  font-family: var(--wof-sans);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--wof-heading);
}

.md-typeset .chapter-kicker {
  font-family: var(--wof-sans);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wof-hover);
  margin: 0 0 .4rem;
}

.md-typeset .subtitle {
  font-size: 1.15em;
  font-style: italic;
  color: var(--md-default-fg-color--light);
  margin-top: -.6em;
}

.md-typeset a:hover {
  color: var(--wof-hover);
}

/* The sidebar's own title repeats the header's on a wide screen, where Material shows both;
   it goes there with the hairline under it, and the drawer of a narrow screen keeps it. */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title[for="__drawer"] {
    display: none;
  }
  .md-nav--primary > .md-nav__title ~ .md-nav__list {
    box-shadow: none;
  }
}

/* The prose keeps a book's measure; code, figures, tables and the game take the column. */
.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > dl,
.md-typeset > blockquote,
.md-typeset > h1,
.md-typeset > h2,
.md-typeset > h3,
.md-typeset > h4,
.md-typeset > .admonition {
  max-width: var(--wof-measure);
}

.md-grid {
  max-width: 72rem;
}

/* ------------------------------------------------------------------ code and listings */

/* Material sizes code at .85em of the text; a listing is smaller still, 12.5 pixels at the
   default size, so that the listing's columns fit beside its C. */
.md-typeset pre > code {
  font-size: .625rem;
  line-height: 1.5;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* The assembly beside its C: side by side where the column is wide enough, one under the
   other elsewhere. */
.md-typeset .listing-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: .8rem;
}

.md-typeset .listing-pair > div > :first-child {
  margin-top: 0;
}

@media screen and (min-width: 76.25em) {
  .md-typeset .listing-pair {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
}

/* The lines of re/Wings.lst (hooks/lexer.py): the address, the bytes dimmed, the mnemonic,
   the registers, the numbers, the generated comment. */
.md-typeset .language-wingslst .no { color: var(--wof-link); }
.md-typeset .language-wingslst .cs { color: var(--md-default-fg-color--lighter); font-style: normal; }
.md-typeset .language-wingslst .k  { color: var(--md-code-hl-keyword-color); }
.md-typeset .language-wingslst .nb { color: var(--md-code-hl-constant-color); }
.md-typeset .language-wingslst .mh,
.md-typeset .language-wingslst .mi { color: var(--md-code-hl-number-color); }
.md-typeset .language-wingslst .nl { color: var(--wof-hover); }
.md-typeset .language-wingslst .c1 { color: var(--md-code-hl-comment-color); }

/* ------------------------------------------------------------------ the sidebar and the figures box

   The one sidebar is dev, For the developer.  The figures box, /// figures, gathers the figures
   of a passage into a short table or list, so that the prose keeps only the numbers that carry
   its point. */

:root {
  --md-admonition-icon--figures: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" shape-rendering="crispEdges"><path d="M8 0h2v1h-2zM8 1h2v1h-2zM5 2h2v1h-2zM8 2h2v1h-2zM5 3h2v1h-2zM8 3h2v1h-2zM2 4h2v1h-2zM5 4h2v1h-2zM8 4h2v1h-2zM2 5h2v1h-2zM5 5h2v1h-2zM8 5h2v1h-2zM2 6h2v1h-2zM5 6h2v1h-2zM8 6h2v1h-2zM2 7h2v1h-2zM5 7h2v1h-2zM8 7h2v1h-2zM0 9h10v1h-10z"/></svg>');
  --md-admonition-icon--dev: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" shape-rendering="crispEdges"><path d="M0 0h2v1h-2zM1 1h2v1h-2zM2 2h2v1h-2zM3 3h2v1h-2zM2 4h2v1h-2zM1 5h2v1h-2zM0 6h2v1h-2zM4 8h6v1h-6zM4 9h6v1h-6z"/></svg>');
}

.md-typeset .admonition.dev   { --wof-side: var(--wof-dev); }
.md-typeset .admonition.figures { --wof-side: var(--wof-figures); }

.md-typeset .admonition.dev,
.md-typeset .admonition.figures {
  border: none;
  border-left: .3rem solid var(--wof-side);
  border-radius: 0;
  box-shadow: none;
  background: color-mix(in srgb, var(--wof-side) 6%, transparent);
  font-size: .78rem;
}

.md-typeset .dev > .admonition-title,
.md-typeset .figures > .admonition-title {
  font-family: var(--wof-sans);
  background: color-mix(in srgb, var(--wof-side) 16%, transparent);
  border: none;
}

.md-typeset .dev > .admonition-title::before,
.md-typeset .figures > .admonition-title::before {
  background-color: var(--wof-side);
}

.md-typeset .dev > .admonition-title::before {
  -webkit-mask-image: var(--md-admonition-icon--dev);
  mask-image: var(--md-admonition-icon--dev);
}

.md-typeset .figures > .admonition-title::before {
  -webkit-mask-image: var(--md-admonition-icon--figures);
  mask-image: var(--md-admonition-icon--figures);
}

/* The figures box's table: compact, in the interface's font, the values to the right of
   their labels, no frame of its own inside the box's. */
.md-typeset .figures .md-typeset__table,
.md-typeset .figures table:not([class]) {
  display: table;
  width: 100%;
  margin: .4em 0;
  border: none;
  box-shadow: none;
  font-family: var(--wof-sans);
  font-size: .72rem;
}

.md-typeset .figures table:not([class]) th,
.md-typeset .figures table:not([class]) td {
  padding: .3em .6em;
  border-top: .05rem solid color-mix(in srgb, var(--wof-side) 25%, transparent);
  background: none;
}

.md-typeset .figures table:not([class]) th {
  font-weight: 700;
  color: var(--wof-heading);
}

.md-typeset .figures table:not([class]) td:first-child {
  width: 58%;
}

/* The dev sidebar is the one for the deeper detail: its code may run wide. */
.md-typeset .admonition.dev pre > code {
  font-size: .6rem;
}

/* ------------------------------------------------------------------ figures */

.md-typeset figure {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.6em 0;
  text-align: left;
}

.md-typeset figure > p {
  margin: 0;
}

.md-typeset figure img {
  display: block;
  margin: 0;
  max-width: 100%;
  height: auto;
  background: #000000;                  /* wingspalette 0 */
}

.md-typeset figure figcaption p {
  margin: 0;
}

.md-typeset figure figcaption {
  max-width: var(--wof-measure);
  margin: .6em 0 0;
  font-family: var(--wof-sans);
  font-size: .68rem;
  font-style: normal;
  text-align: left;
  color: var(--md-default-fg-color--light);
}

/* ------------------------------------------------------------------ the game in the page */

.md-typeset .wof-game {
  margin: 1.2em 0;
}

.md-typeset .wof-game iframe {
  display: block;
  width: min(100%, calc((100vh - 8rem) * 1024 / 642));
  aspect-ratio: 1024 / 642;
  border: 0;
  background: #000000;                  /* wingspalette 0 */
}

.md-typeset .wof-game-note {
  font-family: var(--wof-sans);
  font-size: .72rem;
  color: var(--md-default-fg-color--light);
}

/* ------------------------------------------------------------------ the shape browser and the map viewer

   browser.md and maps.md, drawn by javascripts/browser.js and javascripts/maps.js from the data
   of book/tools/elements.py.  The game's art stands on dark grounds in both schemes, as the
   figures do, enlarged without smoothing; the controls and the facts are in the page's colours.
   The shapes' ground is the night sky's grey, next to the contact sheets' own ground. */

.md-typeset .wof-browser,
.md-typeset .wof-maps {
  --wof-ground: #000000;                /* wingspalette 0 */
  --wof-shape-ground: #222233;          /* night.p 25 */
  --wof-mark: #FFBB00;                  /* wingstitle 25 */
  --wof-on-mark: #111122;               /* wingspalette 6 */
  --wof-label: #EEEEEE;                 /* wingstitle 31 */
  --wof-tick: #666677;                  /* wingspalette 27 */
  --wof-land: #DD9966;                  /* wingspalette 17 */
  --wof-deck: #888899;                  /* wingspalette 28 */
  --wof-sea: #0066AA;                   /* ocean.palette 10 */
  --wof-low3: #DD3300;                  /* wingspalette 3 */
  --wof-ship-line: #BBDDEE;             /* wingspalette 23 */
  --wof-carrier-line: #FFEE66;          /* wingspalette 10 */
  --wof-airfield-line: #339933;         /* wingspalette 7 */
  --wof-flag-line: #EE6622;             /* wingspalette 2 */
  margin: 1.2em 0;
  font-family: var(--wof-sans);
  font-size: .72rem;
}

.md-typeset .wof-crop,
.md-typeset .wof-picture img {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.md-typeset .wof-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .6rem;
  margin: 0 0 .6rem;
}

.md-typeset .wof-controls select,
.md-typeset .wof-controls input[type="search"],
.md-typeset .wof-button {
  padding: .3em .5em;
  border: .05rem solid var(--md-default-fg-color--lighter);
  border-radius: .2rem;
  background: var(--wof-paper);
  color: var(--wof-ink);
  font: inherit;
}

.md-typeset .wof-controls input[type="search"] {
  width: 11em;
}

.md-typeset .wof-button {
  cursor: pointer;
}

.md-typeset .wof-button[aria-pressed="true"] {
  border-color: var(--wof-link);
  background: var(--wof-link);
  color: var(--wof-paper);
}

.md-typeset .wof-toggle {
  white-space: nowrap;
  cursor: pointer;
}

.md-typeset .wof-count,
.md-typeset .wof-summary {
  margin: 0;
  color: var(--md-default-fg-color--light);
}

.md-typeset .wof-failed {
  padding: .6rem .8rem;
  border-left: .3rem solid var(--wof-hover);
  background: color-mix(in srgb, var(--wof-hover) 8%, transparent);
}

/* A shape's facts and a record's: the figures box's look, its table in the interface's font. */
.md-typeset .wof-panel,
.md-typeset .wof-inspector {
  padding: .6rem .8rem;
  border-left: .3rem solid var(--wof-figures);
  background: color-mix(in srgb, var(--wof-figures) 6%, transparent);
}

.md-typeset .wof-panel-title {
  margin: 0;
  font-family: var(--md-code-font);
  font-size: .9rem;
  font-weight: 700;
  color: var(--wof-heading);
}

.md-typeset .wof-panel-sub,
.md-typeset .wof-panel-hint {
  margin: 0 0 .5rem;
  color: var(--md-default-fg-color--light);
}

.md-typeset .wof-facts {
  width: 100%;
  margin: .4rem 0 0;
  border-collapse: collapse;
  font-size: .68rem;
}

.md-typeset .wof-facts th,
.md-typeset .wof-facts td {
  padding: .25em .6em .25em 0;
  border-top: .05rem solid color-mix(in srgb, var(--wof-figures) 25%, transparent);
  text-align: left;
  vertical-align: top;
}

.md-typeset .wof-facts th {
  width: 34%;
  font-weight: 700;
  color: var(--wof-heading);
}

/* The browser: the gallery, and beside it on a wide page the chosen shape's panel. */
.md-typeset .wof-browser-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .8rem;
}

@media screen and (min-width: 60em) {
  .md-typeset .wof-browser-body {
    grid-template-columns: minmax(0, 1fr) 19rem;
    grid-template-areas: "gallery panel";
    align-items: start;
  }

  .md-typeset .wof-browser .wof-gallery {
    grid-area: gallery;
  }

  .md-typeset .wof-browser .wof-panel {
    grid-area: panel;
    position: sticky;
    top: 3.4rem;
  }
}

.md-typeset .wof-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .4rem;
}

.md-typeset .wof-shape {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  max-width: 100%;
  min-width: 3rem;
  padding: .3rem;
  border: .1rem solid transparent;
  border-radius: .2rem;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.md-typeset .wof-shape:hover,
.md-typeset .wof-shape:focus-visible {
  border-color: var(--wof-link);
}

.md-typeset .wof-shape.wof-chosen {
  border-color: var(--wof-hover);
}

.md-typeset .wof-crop {
  display: block;
  max-width: 100%;
  background-color: var(--wof-shape-ground);
  background-repeat: no-repeat;
}

.md-typeset .wof-shape-name,
.md-typeset .wof-shape-from {
  font-family: var(--md-code-font);
  font-size: .62rem;
  line-height: 1.2;
}

.md-typeset .wof-shape-from {
  color: var(--md-default-fg-color--light);
}

.md-typeset .wof-stage {
  display: flex;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
  background: var(--wof-shape-ground);
}

.md-typeset .wof-frame {
  position: relative;
  max-width: 100%;
}

.md-typeset .wof-crop.wof-mirrored {
  transform: scaleX(-1);
}

.md-typeset .wof-spot {
  position: absolute;
  outline: .1rem solid var(--wof-mark);
  pointer-events: none;
}

/* The map viewer: the strip scrolls sideways; on it every place is a world x times --z. */
.md-typeset .wof-strip {
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--wof-ground);
}

.md-typeset .wof-strip:focus-visible {
  outline: .1rem solid var(--wof-hover);
}

.md-typeset .wof-world {
  position: relative;
  width: calc(var(--extent) * var(--z) * 1px);
  cursor: crosshair;
}

.md-typeset .wof-picture {
  display: flex;
  height: calc(var(--rows) * var(--z) * 1px);
}

.md-typeset .wof-picture img {
  display: block;
  flex: none;
  width: calc(var(--w) * var(--z) * 1px);
  max-width: none;
  height: calc(var(--rows) * var(--z) * 1px);
}

.md-typeset .wof-at {
  position: absolute;
  top: 0;
  left: calc(var(--x) * var(--z) * 1px);
  width: calc(var(--w) * var(--z) * 1px);
  height: 100%;
}

.md-typeset .wof-ruler {
  position: relative;
  height: 3.1rem;
  color: var(--wof-label);
  font-size: .6rem;
  line-height: 1;
}

.md-typeset .wof-maps.wof-bare .wof-ruler,
.md-typeset .wof-maps.wof-bare .wof-legend {
  display: none;
}

.md-typeset .wof-under,
.md-typeset .wof-ticks,
.md-typeset .wof-spans,
.md-typeset .wof-points {
  position: absolute;
  left: 0;
  right: 0;
}

.md-typeset .wof-under {
  top: 0;
  height: .3rem;
}

.md-typeset .wof-ticks {
  top: .3rem;
  height: .5rem;
  background: linear-gradient(to right, var(--wof-tick) 1px, transparent 1px) 0 0 /
    calc(var(--z) * 8px) 100% repeat-x;
}

.md-typeset .wof-spans {
  top: 1rem;
  height: .9rem;
}

.md-typeset .wof-points {
  top: 2.05rem;
  height: .9rem;
}

.md-typeset .wof-low0 { background: var(--wof-sea); }
.md-typeset .wof-low1 { background: var(--wof-deck); }
.md-typeset .wof-low2 { background: var(--wof-land); }
.md-typeset .wof-low3 { background: var(--wof-low3); }
.md-typeset .wof-mark { background: var(--wof-mark); }

.md-typeset .wof-span {
  box-sizing: border-box;
  padding: .15rem .2rem 0;
  overflow: hidden;
  border: .1rem solid;
  border-bottom: none;
  white-space: nowrap;
}

.md-typeset .wof-span.wof-ship { border-color: var(--wof-ship-line); color: var(--wof-ship-line); }
.md-typeset .wof-span.wof-carrier { border-color: var(--wof-carrier-line); color: var(--wof-carrier-line); }
.md-typeset .wof-span.wof-airfield { border-color: var(--wof-airfield-line); color: var(--wof-airfield-line); }

.md-typeset .wof-point {
  width: auto;
  padding: .15rem .2rem 0;
  border-left: .1rem solid var(--wof-tick);
  white-space: nowrap;
}

.md-typeset .wof-point.wof-flag { border-color: var(--wof-flag-line); color: var(--wof-flag-line); }
.md-typeset .wof-point.wof-start { border-color: var(--wof-label); font-weight: 700; }
.md-typeset .wof-point.wof-x { color: var(--wof-tick); }

.md-typeset .wof-column {
  height: auto;
  bottom: 0;
  background: color-mix(in srgb, var(--wof-label) 22%, transparent);
  outline: 1px solid var(--wof-label);
  pointer-events: none;
}

.md-typeset .wof-box {
  top: calc(var(--top) * var(--z) * 1px);
  height: calc(var(--h) * var(--z) * 1px);
  outline: 2px solid var(--wof-mark);
  pointer-events: none;
}

.md-typeset .wof-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin: .4rem 0 0;
  color: var(--md-default-fg-color--light);
}

.md-typeset .wof-swatch {
  display: inline-block;
  width: .8rem;
  height: .55rem;
  margin-right: .3rem;
  vertical-align: baseline;
}

.md-typeset .wof-swatch.wof-ship { background: var(--wof-ship-line); }
.md-typeset .wof-swatch.wof-airfield { background: var(--wof-airfield-line); }

.md-typeset .wof-inspector {
  margin-top: .6rem;
}

.md-typeset .wof-bits {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .8rem;
  margin: .2rem 0 .4rem;
}

.md-typeset .wof-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}

.md-typeset .wof-group-name {
  color: var(--md-default-fg-color--light);
  font-size: .62rem;
}

.md-typeset .wof-group-bits {
  display: flex;
  gap: 2px;
}

.md-typeset .wof-bit,
.md-typeset .wof-group-value {
  font-family: var(--md-code-font);
  font-size: .62rem;
}

.md-typeset .wof-bit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.25rem;
  border: .05rem solid var(--md-default-fg-color--lighter);
}

.md-typeset .wof-bit.wof-on {
  border-color: var(--wof-ink);
  background: var(--wof-ink);
  color: var(--wof-paper);
}

.md-typeset .wof-bit.wof-on.wof-flagbit {
  border-color: var(--wof-mark);
  background: var(--wof-mark);
  color: var(--wof-on-mark);
}

/* ------------------------------------------------------------------ phone width */

@media screen and (max-width: 44.984375em) {
  .md-typeset {
    font-size: .8rem;
  }

  .md-typeset h1 {
    font-size: 24px;
    line-height: 1.5;
  }

  .md-typeset h2 {
    font-size: 24px;
  }

  .md-typeset pre > code {
    font-size: .6rem;
  }
}