/*
  GENERATED by tools/themes.py -- do not edit.
  Every theme below comes from its own file in website/themes/.
*/

/* Fallback layer: the default theme on :root, so a page whose theme attribute
   was never set -- JavaScript disabled -- is still fully themed. */
:root {
  --g-bg: #fcfcfd;
  --g-surface: #f3f5f8;
  --g-surface-alt: #e8ebf1;
  --g-code-bg: #f3f5f8;
  --g-fg: #191c22;
  --g-fg-muted: #565d68;
  --g-fg-faint: #7c8490;
  --g-border: #e1e5ec;
  --g-border-strong: #c6ccd7;
  --g-border-width: 1px;
  --g-rule-width: 1px;
  --g-accent: #2549c9;
  --g-accent-strong: #1b3699;
  --g-accent-text: #2549c9;
  --g-on-accent: #ffffff;
  --g-accent-wash: #e9edfb;
  --g-beginner: #1b7f4e;
  --g-intermediate: #8a5a00;
  --g-advanced: #c02a37;
  --g-trivia: #2549c9;

  --g-font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-display-weight: 600;
  --g-display-tracking: -0.011em;
  --g-display-transform: none;
  --g-h1-size: 2.15rem;
  --g-body-size: 0.96rem;
  --g-line-height: 1.7;
  --g-numeral-size: 2rem;

  --g-radius: 5px;
  --g-radius-lg: 7px;
  --g-shadow: none;
  --g-shadow-raised: 0 2px 10px rgba(25, 28, 34, 0.08);

  --md-code-hl-keyword-color: #a626a4;
  --md-code-hl-string-color: #0a6e4a;
  --md-code-hl-number-color: #1b3699;
  --md-code-hl-comment-color: #7c8490;
  --md-code-hl-function-color: #2549c9;
  --md-code-hl-constant-color: #8a5a00;
  --md-code-hl-operator-color: #565d68;
  --md-code-hl-punctuation-color: #565d68;
  --md-code-hl-name-color: #191c22;
  --md-code-hl-special-color: #c02a37;
  --md-code-hl-variable-color: #191c22;
}

:root { color-scheme: light; }

/* No stored choice: follow the operating system's light/dark setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-grail-theme]) {
  --g-bg: #0f1216;
  --g-surface: #171b21;
  --g-surface-alt: #1e242c;
  --g-code-bg: #171b21;
  --g-fg: #e8ebf0;
  --g-fg-muted: #9aa3b0;
  --g-fg-faint: #727b88;
  --g-border: #252b34;
  --g-border-strong: #39414d;
  --g-border-width: 1px;
  --g-rule-width: 1px;
  --g-accent: #6f9bff;
  --g-accent-strong: #9dbaff;
  --g-accent-text: #8fb2ff;
  --g-on-accent: #0f1216;
  --g-accent-wash: #18243f;
  --g-beginner: #4ec97a;
  --g-intermediate: #e0a94a;
  --g-advanced: #ff8078;
  --g-trivia: #8fb2ff;

  --g-font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-display-weight: 600;
  --g-display-tracking: -0.011em;
  --g-display-transform: none;
  --g-h1-size: 2.15rem;
  --g-body-size: 0.96rem;
  --g-line-height: 1.7;
  --g-numeral-size: 2rem;

  --g-radius: 5px;
  --g-radius-lg: 7px;
  --g-shadow: none;
  --g-shadow-raised: 0 2px 10px rgba(0, 0, 0, 0.55);

  --md-code-hl-keyword-color: #d8a0ff;
  --md-code-hl-string-color: #7fd8a8;
  --md-code-hl-number-color: #8fb2ff;
  --md-code-hl-comment-color: #727b88;
  --md-code-hl-function-color: #8fb2ff;
  --md-code-hl-constant-color: #e0a94a;
  --md-code-hl-operator-color: #9aa3b0;
  --md-code-hl-punctuation-color: #9aa3b0;
  --md-code-hl-name-color: #e8ebf0;
  --md-code-hl-special-color: #ff8078;
  --md-code-hl-variable-color: #e8ebf0;
}
  :root:not([data-grail-theme]) { color-scheme: dark; }
}

/* ===== Light (light) ===== from website/themes/light.css */

/* cpp-grail-theme
name: Light
swatch: #fcfcfd, #2549c9
order: 0
scheme: light
default: true
*/

/*
   The plain one. A cool paper white, graphite ink and one ultramarine, set in
   IBM Plex — a face drawn for technical reading rather than borrowed from the
   operating system. Nothing here evokes anything; it is the theme to read in.

   Everything this theme needs lives in this file: its tokens and any
   appearance rules of its own. See website/themes/README.md for the contract.
*/

[data-grail-theme="light"] body {
  --g-bg: #fcfcfd;
  --g-surface: #f3f5f8;
  --g-surface-alt: #e8ebf1;
  --g-code-bg: #f3f5f8;
  --g-fg: #191c22;
  --g-fg-muted: #565d68;
  --g-fg-faint: #7c8490;
  --g-border: #e1e5ec;
  --g-border-strong: #c6ccd7;
  --g-border-width: 1px;
  --g-rule-width: 1px;
  --g-accent: #2549c9;
  --g-accent-strong: #1b3699;
  --g-accent-text: #2549c9;
  --g-on-accent: #ffffff;
  --g-accent-wash: #e9edfb;
  --g-beginner: #1b7f4e;
  --g-intermediate: #8a5a00;
  --g-advanced: #c02a37;
  --g-trivia: #2549c9;

  --g-font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-display-weight: 600;
  --g-display-tracking: -0.011em;
  --g-display-transform: none;
  --g-h1-size: 2.15rem;
  --g-body-size: 0.96rem;
  --g-line-height: 1.7;
  --g-numeral-size: 2rem;

  --g-radius: 5px;
  --g-radius-lg: 7px;
  --g-shadow: none;
  --g-shadow-raised: 0 2px 10px rgba(25, 28, 34, 0.08);

  --md-code-hl-keyword-color: #a626a4;
  --md-code-hl-string-color: #0a6e4a;
  --md-code-hl-number-color: #1b3699;
  --md-code-hl-comment-color: #7c8490;
  --md-code-hl-function-color: #2549c9;
  --md-code-hl-constant-color: #8a5a00;
  --md-code-hl-operator-color: #565d68;
  --md-code-hl-punctuation-color: #565d68;
  --md-code-hl-name-color: #191c22;
  --md-code-hl-special-color: #c02a37;
  --md-code-hl-variable-color: #191c22;
}

/* -------------------------------------------------------------- garnish */

/* A slashed zero, because half this site is integer arithmetic. */
[data-grail-theme="light"] .md-typeset code,
[data-grail-theme="light"] .md-typeset pre > code {
  font-feature-settings: "zero" 1;
}

/* ===== Dark (dark) ===== from website/themes/dark.css */

/* cpp-grail-theme
name: Dark
swatch: #0f1216, #6f9bff
order: 1
scheme: dark
*/

/*
   The plain one, after dark. The same IBM Plex and the same intent, on a ground
   with a little blue in it rather than a flat neutral black.

   Everything this theme needs lives in this file: its tokens and any
   appearance rules of its own. See website/themes/README.md for the contract.
*/

[data-grail-theme="dark"] body {
  --g-bg: #0f1216;
  --g-surface: #171b21;
  --g-surface-alt: #1e242c;
  --g-code-bg: #171b21;
  --g-fg: #e8ebf0;
  --g-fg-muted: #9aa3b0;
  --g-fg-faint: #727b88;
  --g-border: #252b34;
  --g-border-strong: #39414d;
  --g-border-width: 1px;
  --g-rule-width: 1px;
  --g-accent: #6f9bff;
  --g-accent-strong: #9dbaff;
  --g-accent-text: #8fb2ff;
  --g-on-accent: #0f1216;
  --g-accent-wash: #18243f;
  --g-beginner: #4ec97a;
  --g-intermediate: #e0a94a;
  --g-advanced: #ff8078;
  --g-trivia: #8fb2ff;

  --g-font-display: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-display-weight: 600;
  --g-display-tracking: -0.011em;
  --g-display-transform: none;
  --g-h1-size: 2.15rem;
  --g-body-size: 0.96rem;
  --g-line-height: 1.7;
  --g-numeral-size: 2rem;

  --g-radius: 5px;
  --g-radius-lg: 7px;
  --g-shadow: none;
  --g-shadow-raised: 0 2px 10px rgba(0, 0, 0, 0.55);

  --md-code-hl-keyword-color: #d8a0ff;
  --md-code-hl-string-color: #7fd8a8;
  --md-code-hl-number-color: #8fb2ff;
  --md-code-hl-comment-color: #727b88;
  --md-code-hl-function-color: #8fb2ff;
  --md-code-hl-constant-color: #e0a94a;
  --md-code-hl-operator-color: #9aa3b0;
  --md-code-hl-punctuation-color: #9aa3b0;
  --md-code-hl-name-color: #e8ebf0;
  --md-code-hl-special-color: #ff8078;
  --md-code-hl-variable-color: #e8ebf0;
}

/* -------------------------------------------------------------- garnish */

/* A slashed zero, because half this site is integer arithmetic. */
[data-grail-theme="dark"] .md-typeset code,
[data-grail-theme="dark"] .md-typeset pre > code {
  font-feature-settings: "zero" 1;
}

/* ===== Barry Lyndon (barry-lyndon) ===== from website/themes/barry-lyndon.css */

/* cpp-grail-theme
name: Barry Lyndon
swatch: #f7f5ee, #8c2f3e
order: 10
scheme: light
*/

/*
   Kubrick shot the interiors by candle and the exteriors by daylight, and this
   takes the daylight: a cool ivory ground, sepia ink, claret for emphasis.
   Newsreader carries real optical sizing, so the display cut is drawn for the
   size it is set at. Old-style figures throughout, as a book would set them.

   Everything this theme needs lives in this file: its tokens and any
   appearance rules of its own. See website/themes/README.md for the contract.
*/

[data-grail-theme="barry-lyndon"] body {
  --g-bg: #f7f5ee;
  --g-surface: #efece1;
  --g-surface-alt: #e4e0d1;
  --g-code-bg: #f1eee3;
  --g-fg: #241f1a;
  --g-fg-muted: #5d564a;
  --g-fg-faint: #877f70;
  --g-border: #ddd8c9;
  --g-border-strong: #c3bba8;
  --g-border-width: 1px;
  --g-rule-width: 1px;
  --g-accent: #8c2f3e;
  --g-accent-strong: #5e1e29;
  --g-accent-text: #7a2836;
  --g-on-accent: #f7f5ee;
  --g-accent-wash: #efe2e2;
  --g-beginner: #4a6b34;
  --g-intermediate: #8a5a12;
  --g-advanced: #8c2f3e;
  --g-trivia: #2f5673;

  --g-font-display: Newsreader, ui-serif, Georgia, "Times New Roman", serif;
  --g-font-body: Newsreader, ui-serif, Georgia, "Times New Roman", serif;
  --g-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-display-weight: 600;
  --g-display-tracking: -0.004em;
  --g-display-transform: none;
  --g-h1-size: 2.75rem;
  --g-body-size: 1.06rem;
  --g-line-height: 1.72;
  --g-numeral-size: 3.4rem;

  --g-radius: 2px;
  --g-radius-lg: 3px;
  --g-shadow: none;
  --g-shadow-raised: 0 1px 3px rgba(36, 31, 26, 0.09);

  --md-code-hl-keyword-color: #7a2836;
  --md-code-hl-string-color: #4a6b34;
  --md-code-hl-number-color: #8a5a12;
  --md-code-hl-comment-color: #9a9080;
  --md-code-hl-function-color: #2f5673;
  --md-code-hl-constant-color: #8a5a12;
  --md-code-hl-operator-color: #5d564a;
  --md-code-hl-punctuation-color: #6b6355;
  --md-code-hl-name-color: #241f1a;
  --md-code-hl-special-color: #8c2f3e;
  --md-code-hl-variable-color: #241f1a;
}

/* -------------------------------------------------------------- garnish */

/* Optical sizing and old-style figures: the numerals sit on the baseline like text. */
[data-grail-theme="barry-lyndon"] .md-typeset {
  font-optical-sizing: auto;
  font-feature-settings: "onum" 1, "liga" 1;
}

/* Headings and the entry numeral take lining figures, which hold a line better. */
[data-grail-theme="barry-lyndon"] .md-typeset h1,
[data-grail-theme="barry-lyndon"] .md-typeset h2,
[data-grail-theme="barry-lyndon"] .md-typeset h3,
[data-grail-theme="barry-lyndon"] .entry-number,
[data-grail-theme="barry-lyndon"] .grail-stat__value {
  font-optical-sizing: auto;
  font-feature-settings: "lnum" 1;
}

/* The hook reads as a caption, so it is set in italic. */
[data-grail-theme="barry-lyndon"] .md-typeset .entry-hook {
  font-style: italic;
}

/* ===== Ex Machina (ex-machina) ===== from website/themes/ex-machina.css */

/* cpp-grail-theme
name: Ex Machina
swatch: #ffffff, #0f766e
order: 20
scheme: light
*/

/*
   Glass, cold light and a lot of white. Archivo is a grotesque with more spine
   than the usual neutral sans, and the accent is a clinical teal rather than
   the indigo every product page reaches for. Figures are tabular, so numbers
   line up in columns.

   Everything this theme needs lives in this file: its tokens and any
   appearance rules of its own. See website/themes/README.md for the contract.
*/

[data-grail-theme="ex-machina"] body {
  --g-bg: #ffffff;
  --g-surface: #f3f6f6;
  --g-surface-alt: #e6ecec;
  --g-code-bg: #f3f6f6;
  --g-fg: #12191b;
  --g-fg-muted: #4d5a5d;
  --g-fg-faint: #78868a;
  --g-border: #dfe6e6;
  --g-border-strong: #c2cccc;
  --g-border-width: 1px;
  --g-rule-width: 1px;
  --g-accent: #0f766e;
  --g-accent-strong: #0b544e;
  --g-accent-text: #0f766e;
  --g-on-accent: #ffffff;
  --g-accent-wash: #ddefec;
  --g-beginner: #1a7f37;
  --g-intermediate: #a1620a;
  --g-advanced: #b42318;
  --g-trivia: #0f766e;

  --g-font-display: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-body: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-display-weight: 600;
  --g-display-tracking: -0.022em;
  --g-display-transform: none;
  --g-h1-size: 2.3rem;
  --g-body-size: 0.95rem;
  --g-line-height: 1.68;
  --g-numeral-size: 2.2rem;

  --g-radius: 9px;
  --g-radius-lg: 13px;
  --g-shadow: 0 1px 2px rgba(18, 25, 27, 0.05);
  --g-shadow-raised: 0 6px 20px rgba(18, 25, 27, 0.09);

  --md-code-hl-keyword-color: #0b544e;
  --md-code-hl-string-color: #1a7f37;
  --md-code-hl-number-color: #a1620a;
  --md-code-hl-comment-color: #78868a;
  --md-code-hl-function-color: #0f766e;
  --md-code-hl-constant-color: #a1620a;
  --md-code-hl-operator-color: #4d5a5d;
  --md-code-hl-punctuation-color: #4d5a5d;
  --md-code-hl-name-color: #12191b;
  --md-code-hl-special-color: #b42318;
  --md-code-hl-variable-color: #12191b;
}

/* -------------------------------------------------------------- garnish */

/* Tabular figures and the single-storey alternates: cooler, more instrument-like. */
[data-grail-theme="ex-machina"] .md-typeset {
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ===== Alien (alien) ===== from website/themes/alien.css */

/* cpp-grail-theme
name: Alien
swatch: #070a08, #ffb454
order: 30
scheme: dark
*/

/*
   The Nostromo's terminals. A green-black ground, amber phosphor, everything
   monospaced and uppercase, and a faint glow on the display type where the
   screen would bloom. Slashed zeros, as any real terminal has.

   Everything this theme needs lives in this file: its tokens and any
   appearance rules of its own. See website/themes/README.md for the contract.
*/

[data-grail-theme="alien"] body {
  --g-bg: #070a08;
  --g-surface: #0e1310;
  --g-surface-alt: #151b17;
  --g-code-bg: #0e1310;
  --g-fg: #cfdad2;
  --g-fg-muted: #86958c;
  --g-fg-faint: #66736b;
  --g-border: #1c2620;
  --g-border-strong: #2d3a33;
  --g-border-width: 1px;
  --g-rule-width: 1px;
  --g-accent: #ffb454;
  --g-accent-strong: #ffcf8c;
  --g-accent-text: #ffc26b;
  --g-on-accent: #070a08;
  --g-accent-wash: #241a0b;
  --g-beginner: #7ee787;
  --g-intermediate: #ffb454;
  --g-advanced: #ff8a80;
  --g-trivia: #79c0ff;

  --g-font-display: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-font-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-display-weight: 700;
  --g-display-tracking: 0.045em;
  --g-display-transform: uppercase;
  --g-h1-size: 1.95rem;
  --g-body-size: 0.89rem;
  --g-line-height: 1.72;
  --g-numeral-size: 2rem;

  --g-radius: 0;
  --g-radius-lg: 0;
  --g-shadow: none;
  --g-shadow-raised: none;

  --md-code-hl-keyword-color: #ffb454;
  --md-code-hl-string-color: #7ee787;
  --md-code-hl-number-color: #ff9d6b;
  --md-code-hl-comment-color: #66736b;
  --md-code-hl-function-color: #79c0ff;
  --md-code-hl-constant-color: #ff9d6b;
  --md-code-hl-operator-color: #cfdad2;
  --md-code-hl-punctuation-color: #86958c;
  --md-code-hl-name-color: #cfdad2;
  --md-code-hl-special-color: #ff8a80;
  --md-code-hl-variable-color: #cfdad2;
}

/* -------------------------------------------------------------- garnish */

/* Slashed zeros, as any real terminal has. */
[data-grail-theme="alien"] .md-typeset code,
[data-grail-theme="alien"] .md-typeset pre > code {
  font-feature-settings: "zero" 1;
}

/* The phosphor bloom, kept faint enough to stay crisp. */
[data-grail-theme="alien"] .md-typeset h1,
[data-grail-theme="alien"] .md-typeset h2,
[data-grail-theme="alien"] .md-typeset h3,
[data-grail-theme="alien"] .entry-number,
[data-grail-theme="alien"] .grail-stat__value {
  text-shadow: 0 0 12px rgba(255, 180, 84, 0.28);
}

/* ===== A Clockwork Orange (clockwork-orange) ===== from website/themes/clockwork-orange.css */

/* cpp-grail-theme
name: A Clockwork Orange
swatch: #f7f5f0, #e8341c
order: 40
scheme: light
*/

/*
   Milk white, hard black rules and that orange. Archivo runs expanded and black
   here, so the display type is wide and heavy where every other theme is
   quiet. The fill stays vivid; links take a darker cut of the same hue so the
   theme can shout without becoming unreadable.

   Everything this theme needs lives in this file: its tokens and any
   appearance rules of its own. See website/themes/README.md for the contract.
*/

[data-grail-theme="clockwork-orange"] body {
  --g-bg: #f7f5f0;
  --g-surface: #ffffff;
  --g-surface-alt: #eae6dd;
  --g-code-bg: #ffffff;
  --g-fg: #0a0a0a;
  --g-fg-muted: #33312e;
  --g-fg-faint: #5c5954;
  --g-border: #0a0a0a;
  --g-border-strong: #0a0a0a;
  --g-border-width: 3px;
  --g-rule-width: 3px;
  --g-accent: #e8341c;
  --g-accent-strong: #8f1806;
  --g-accent-text: #b8210c;
  --g-on-accent: #000000;
  --g-accent-wash: #ffe6e1;
  --g-beginner: #0a6b2f;
  --g-intermediate: #b8210c;
  --g-advanced: #0a0a0a;
  --g-trivia: #0033cc;

  --g-font-display: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-body: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --g-display-weight: 800;
  --g-display-tracking: -0.028em;
  --g-display-transform: uppercase;
  --g-h1-size: 2.95rem;
  --g-body-size: 0.97rem;
  --g-line-height: 1.6;
  --g-numeral-size: 4.2rem;

  --g-radius: 0;
  --g-radius-lg: 0;
  --g-shadow: none;
  --g-shadow-raised: 6px 6px 0 #0a0a0a;

  --md-code-hl-keyword-color: #b8210c;
  --md-code-hl-string-color: #0a6b2f;
  --md-code-hl-number-color: #0033cc;
  --md-code-hl-comment-color: #5c5954;
  --md-code-hl-function-color: #0a0a0a;
  --md-code-hl-constant-color: #0033cc;
  --md-code-hl-operator-color: #0a0a0a;
  --md-code-hl-punctuation-color: #33312e;
  --md-code-hl-name-color: #0a0a0a;
  --md-code-hl-special-color: #b8210c;
  --md-code-hl-variable-color: #0a0a0a;
}

/* -------------------------------------------------------------- garnish */

/* Archivo's width axis, pushed wide: the display type is the loudest thing here. */
[data-grail-theme="clockwork-orange"] .md-typeset h1,
[data-grail-theme="clockwork-orange"] .md-typeset h2,
[data-grail-theme="clockwork-orange"] .md-typeset h3,
[data-grail-theme="clockwork-orange"] .entry-number,
[data-grail-theme="clockwork-orange"] .grail-stat__value {
  font-variation-settings: "wdth" 118;
}

/* Each theme tells the browser how to render its own native UI. */
[data-grail-theme="light"] { color-scheme: light; }
[data-grail-theme="dark"] { color-scheme: dark; }
[data-grail-theme="barry-lyndon"] { color-scheme: light; }
[data-grail-theme="ex-machina"] { color-scheme: light; }
[data-grail-theme="alien"] { color-scheme: dark; }
[data-grail-theme="clockwork-orange"] { color-scheme: light; }

/* Picker tiles: each theme previews itself, in its own colors and type. */

.grail-picker__poster[data-theme="light"] {
  background-color: #fcfcfd;
  border-radius: 5px;
  color: #2549c9;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-transform: none;
}

.grail-picker__poster[data-theme="dark"] {
  background-color: #0f1216;
  border-radius: 5px;
  color: #6f9bff;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  text-transform: none;
}

.grail-picker__poster[data-theme="barry-lyndon"] {
  background-color: #f7f5ee;
  border-radius: 2px;
  color: #8c2f3e;
  font-family: Newsreader, ui-serif, Georgia, "Times New Roman", serif;
  text-transform: none;
}

.grail-picker__poster[data-theme="ex-machina"] {
  background-color: #ffffff;
  border-radius: 9px;
  color: #0f766e;
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-transform: none;
}

.grail-picker__poster[data-theme="alien"] {
  background-color: #070a08;
  border-radius: 0;
  color: #ffb454;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  text-transform: uppercase;
}

.grail-picker__poster[data-theme="clockwork-orange"] {
  background-color: #f7f5f0;
  border-radius: 0;
  color: #e8341c;
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-transform: uppercase;
}