/*
 * Musicat docs theme — dark only, drawn on the same design system as musicat.fm.
 *
 * Someone who follows a help link from musicat.fm should not feel they have
 * left the site: the same near-black page, the same three surfaces, the same
 * Poppins type scale and one accent, purple.
 *
 * Rules that come with the system and hold here too:
 *   - sentence case everywhere: no capitalised labels, no label over a heading;
 *   - green only for growth or done, red only for something destructive;
 *   - one white pill per screen, the one thing to do;
 *   - Roboto Mono only for figures and code; nothing smaller than 12 px;
 *   - focus is a 2 px outline in --accent-text;
 *   - motion only in answer to an action, and none under reduced motion.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

/*
 * Copied from the musicat.fm design system, not linked to it: the docs build
 * on their own and must not depend on the web app. When a value changes
 * there, change it here as well. Names match the web's custom properties, so
 * a rule reads the same in both places.
 */
:root {
  /* Raw palette — only for colours that are named, like a status icon. */
  --color-gray-950: #0c0a09;
  --color-gray-900: #1c1917;
  --color-gray-800: #292524;
  --color-gray-600: #57534d;
  --color-gray-500: #79716b;
  --color-gray-400: #a6a09b;
  --color-gray-300: #d6d3d1;
  --color-gray-200: #e7e5e4;
  --color-purple-950: #341539;
  --color-purple-900: #58305f;
  --color-purple-700: #7e408b;
  --color-purple-600: #9750a9;
  --color-purple-500: #b36fc6;
  --color-purple-400: #cb98da;
  --color-purple-300: #dfbfe8;
  --color-almost-black: #080404;
  --color-white: #fafafa;
  --color-orange: #f39c12;
  --color-red: #eb2f06;
  --color-red-soft: #f06b6b;
  --color-blue: #3f86de;
  --color-green-600: #14a547;
  --color-lime: #b8f04a;

  /* What a colour is for. */
  --page: var(--color-almost-black);
  --raised: var(--color-gray-950);
  --card: var(--color-gray-900);
  --line: var(--color-gray-900);
  --line-strong: var(--color-gray-800);
  --text: var(--color-white);
  --text-secondary: var(--color-gray-400);
  --text-muted: var(--color-gray-500);
  --text-on-light: var(--color-almost-black);
  --accent: var(--color-purple-500);
  --accent-text: var(--color-purple-300);
  --accent-soft: var(--color-purple-950);
  --up: var(--color-lime);
  --down: var(--color-red-soft);
  --same: var(--color-gray-500);
  --shadow: rgba(0, 0, 0, 0.55);
  --scrim: rgba(8, 4, 4, 0.55);

  /* Space on a 4 px grid. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --top-bar: 56px;
  --top-bar-lg: 64px;
  --content-width: 1200px;

  /* Type: Poppins for words, Roboto Mono only for figures and code. */
  --font-sans: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --type-caption: 400 12px/1.4 var(--font-sans);
  --type-small: 400 13px/1.45 var(--font-sans);
  --type-body: 400 15px/1.5 var(--font-sans);
  --type-label: 600 14px/1.3 var(--font-sans);
  --type-item: 600 15px/1.3 var(--font-sans);
  --type-section: 600 18px/1.3 var(--font-sans);
  --type-title: 700 22px/1.2 var(--font-sans);
  --type-title-tracking: -0.015em;
  --type-display: 700 30px/1.08 var(--font-sans);
  --type-display-tracking: -0.025em;
  --type-display-md: 700 44px/1.05 var(--font-sans);
  --type-display-md-tracking: -0.03em;
  --type-display-lg: 700 64px/1 var(--font-sans);
  --type-display-lg-tracking: -0.035em;
  --type-figure-sm: 400 12px/1.3 var(--font-mono);
  --type-figure-md: 500 15px/1.3 var(--font-mono);
  --type-figure: 500 20px/1.2 var(--font-mono);

  /* Docs only: the measure an article is set to, and the leading it reads at. */
  --measure: 62ch;
  --prose-leading: 1.7;
  --prose: var(--color-gray-300);
}

/* Material reads its own variables; point every one of them at a token. */
[data-md-color-scheme="slate"] {
  color-scheme: dark;

  --md-hue: 0;
  --md-default-bg-color: var(--page);
  --md-default-bg-color--light: var(--raised);
  --md-default-bg-color--lighter: var(--card);
  --md-default-bg-color--lightest: var(--line-strong);
  --md-default-fg-color: var(--text);
  --md-default-fg-color--light: var(--text-secondary);
  --md-default-fg-color--lighter: var(--text-muted);
  --md-default-fg-color--lightest: var(--line-strong);

  --md-primary-fg-color: var(--page);
  --md-primary-fg-color--light: var(--raised);
  --md-primary-fg-color--dark: var(--page);
  --md-primary-bg-color: var(--text);
  --md-primary-bg-color--light: var(--text-secondary);

  --md-accent-fg-color: var(--accent-text);
  --md-accent-fg-color--transparent: var(--accent-soft);
  --md-accent-bg-color: var(--page);
  --md-accent-bg-color--light: var(--text-secondary);

  --md-typeset-color: var(--prose);
  --md-typeset-a-color: var(--accent-text);
  --md-typeset-mark-color: var(--accent-soft);
  --md-typeset-table-color: var(--line-strong);
  --md-typeset-table-color--light: var(--card);
  --md-admonition-fg-color: var(--prose);
  --md-admonition-bg-color: var(--raised);

  --md-code-fg-color: var(--text);
  --md-code-bg-color: var(--card);
  --md-code-hl-color: var(--accent-soft);
  --md-code-hl-color--light: var(--accent-soft);

  --md-footer-fg-color: var(--text);
  --md-footer-fg-color--light: var(--text-secondary);
  --md-footer-fg-color--lighter: var(--text-muted);
  --md-footer-bg-color: var(--page);
  --md-footer-bg-color--dark: var(--page);

  --md-shadow-z1: none;
  --md-shadow-z2: 0 8px 24px var(--shadow);
  --md-shadow-z3: 0 8px 24px var(--shadow);
}

body {
  background-color: var(--page);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--accent-soft);
  color: var(--text);
}

/* One focus ring for everything that can be reached by keyboard. */
:focus-visible,
.md-typeset :focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   2. Typography and the article
   ========================================================================== */

.md-typeset {
  color: var(--prose);
  font: var(--type-body);
  line-height: var(--prose-leading);
}

/*
 * The article is set to a measure a line can be followed across. Tables,
 * notes and tabs keep to the same column, so the page has one left and one
 * right edge.
 */
.md-content__inner {
  max-width: var(--measure);
}

.md-content__inner::before {
  height: 0;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol,
.md-typeset dl,
.md-typeset blockquote,
.md-typeset pre,
.md-typeset .highlight,
.md-typeset .md-typeset__scrollwrap,
.md-typeset .admonition,
.md-typeset details,
.md-typeset .tabbed-set,
.md-typeset .grid {
  margin-block: 0 var(--space-4);
}

.md-typeset strong {
  color: var(--text);
  font-weight: 600;
}

/* Headings: the page title is display type; sections step down the scale. */
.md-typeset h1 {
  color: var(--text);
  font: var(--type-display);
  letter-spacing: var(--type-display-tracking);
  margin: 0 0 var(--space-6);
}

.md-typeset h2 {
  color: var(--text);
  font: var(--type-title);
  letter-spacing: var(--type-title-tracking);
  margin: var(--space-12) 0 var(--space-3);
}

.md-typeset h3 {
  color: var(--text);
  font: var(--type-section);
  margin: var(--space-8) 0 var(--space-3);
}

.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--text);
  font: var(--type-item);
  letter-spacing: 0;
  margin: var(--space-6) 0 var(--space-2);
  text-transform: none;
}

/* A heading straight after another needs no extra air between them. */
.md-typeset h2 + h3 {
  margin-top: var(--space-4);
}

/* The permalink waits beside its heading, quietly. */
.md-typeset .headerlink {
  color: var(--text-muted);
  font-weight: 400;
}

.md-typeset .headerlink:focus,
.md-typeset .headerlink:hover,
.md-typeset :target > .headerlink {
  color: var(--accent-text);
}

/* Room for the sticky bar (and the tabs under it) when a heading is linked to. */
.md-typeset :target {
  --md-scroll-margin: calc(var(--top-bar) + var(--space-6));
}

@media screen and (min-width: 76.25em) {
  .md-header--lifted ~ .md-container .md-typeset :target,
  .md-typeset :target {
    --md-scroll-margin: calc(var(--top-bar-lg) + var(--space-6));
  }
}

/*
 * Links in running text keep a thin underline. The accent and the prose grey
 * are almost as light as each other, so colour alone would not tell a link
 * from the words around it.
 */
.md-typeset a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.md-typeset a:focus,
.md-typeset a:hover {
  color: var(--text);
  text-decoration-color: currentcolor;
}

.md-typeset .headerlink,
.md-typeset a.md-button {
  text-decoration: none;
}

/* Lists */
.md-typeset ul,
.md-typeset ol {
  padding-left: 0;
}

.md-typeset ul li,
.md-typeset ol li {
  margin-bottom: var(--space-2);
  margin-left: var(--space-6);
}

.md-typeset ul li::marker,
.md-typeset ol li::marker {
  color: var(--text-muted);
}

.md-typeset ol li::marker {
  font: var(--type-figure-md);
}

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

.md-typeset li ul,
.md-typeset li ol {
  margin: var(--space-2) 0 0;
}

/* A ticked task is a done thing, so it takes the green. */
.md-typeset [type="checkbox"]:checked + .task-list-indicator::before {
  background-color: var(--up);
}

/* Definition lists: the term as an item title, its meaning under it. */
.md-typeset dt {
  color: var(--text);
  font: var(--type-item);
  margin-top: var(--space-4);
}

.md-typeset dd {
  margin: var(--space-1) 0 0;
}

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

/* Quotes are the app's own words, set off by an accent line. */
.md-typeset blockquote {
  border-left: 2px solid var(--accent);
  color: var(--text-secondary);
  padding: 0 0 0 var(--space-4);
}

.md-typeset blockquote > :last-child {
  margin-bottom: 0;
}

.md-typeset hr {
  border-bottom: 1px solid var(--line-strong);
  margin: var(--space-8) 0;
}

/* Screenshots sit on the page like the web's images: rounded, no frame. */
.md-typeset img {
  border-radius: var(--radius-md);
}

/* --------------------------------------------------------------------------
   Code
   -------------------------------------------------------------------------- */

.md-typeset code,
.md-typeset kbd,
.md-typeset pre {
  font-family: var(--font-mono);
}

.md-typeset code {
  background-color: var(--card);
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
}

/* Inside a heading the code is the heading — no chip behind it. */
.md-typeset h1 code,
.md-typeset h2 code,
.md-typeset h3 code,
.md-typeset h4 code {
  background: none;
  font-size: 0.92em;
  font-weight: 500;
  padding: 0;
}

.md-typeset pre > code {
  background: none;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.6;
  padding: var(--space-4);
  padding-right: calc(var(--space-4) + var(--space-10));
}

.md-typeset .highlight {
  background-color: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.md-typeset .highlight pre,
.md-typeset .highlight code {
  background-color: transparent;
}

.md-typeset pre {
  margin: 0;
}

/*
 * The copy button is a small round button, always visible: a phone has no
 * hover to reveal it.
 */
.md-typeset .md-code__nav {
  background: none;
  padding: 0;
  right: var(--space-2);
  top: var(--space-2);
}

.md-typeset .md-code__button {
  align-items: center;
  background-color: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-sizing: border-box;
  color: var(--text-secondary);
  display: inline-flex;
  height: var(--space-8);
  justify-content: center;
  transition: none;
  width: var(--space-8);
}

.md-typeset .md-code__button::after {
  height: 16px;
  width: 16px;
}

.md-typeset .md-code__button:hover,
.md-typeset .md-code__button.focus-visible {
  border-color: var(--text-muted);
  color: var(--text);
}

.md-typeset .md-code__button:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* "Copied" is news, not the thing to do, so it is a raised pill rather than a white one. */
.md-dialog {
  background-color: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px var(--shadow);
  color: var(--text);
  font: var(--type-label);
  padding: var(--space-3) var(--space-4);
}

/* --------------------------------------------------------------------------
   Tables: one group divided by lines, like a list of rows in the app
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  background-color: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: none;
  color: var(--prose);
  font: var(--type-small);
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: var(--card);
  color: var(--text);
  font: var(--type-label);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--line-strong);
  padding: var(--space-3) var(--space-4);
  vertical-align: top;
}

.md-typeset table:not([class]) td strong {
  font-weight: 600;
}

/* A row is not a link, so it does not light up under the pointer. */
.md-typeset table:not([class]) tr:hover {
  background-color: transparent;
  box-shadow: none;
}

.md-typeset__table {
  padding: 0;
}

.md-typeset__scrollwrap {
  margin: 0 0 var(--space-4);
}

/* An icon leads its cell, sized to the line it sits on. */
.md-typeset table .twemoji {
  --md-icon-size: 20px;
  vertical-align: -0.3em;
}

/* The gap goes after the icon, so a name that wraps under it starts flush. */
.md-typeset table td .twemoji {
  margin-right: var(--space-1);
}

/*
 * Status colours, as the app shows them. Done is green; a check that failed
 * is red, the same red that marks a position going down.
 */
.md-typeset .st-ok svg {
  fill: var(--up);
}

.md-typeset .st-bad svg {
  fill: var(--down);
}

.md-typeset .st-warn svg {
  fill: var(--color-orange);
}

.md-typeset .st-info svg {
  fill: var(--color-blue);
}

.md-typeset .st-mute svg {
  fill: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Formulas (the ranking page)
   -------------------------------------------------------------------------- */

.md-typeset .arithmatex {
  color: var(--text);
}

.md-typeset div.arithmatex {
  background-color: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  margin: 0 0 var(--space-4);
  overflow-x: auto;
  padding: var(--space-4);
}

.md-typeset div.arithmatex mjx-container[display="true"] {
  margin: 0;
}

/* ==========================================================================
   3. Material elements
   ========================================================================== */

/* --------------------------------------------------------------------------
   Notes (admonitions) and collapsible sections

   A note is a raised card; its meaning is carried by the icon and a tint of
   the same colour, never by a coloured title bar:
     note, info  — neutral, the page's own greys
     tip         — the accent: a better way to do something
     warning     — orange: be careful
     danger      — red: something cannot be undone
     success     — green: done
   -------------------------------------------------------------------------- */

.md-typeset .admonition[class],
.md-typeset details[class] {
  --mc-note: var(--text-secondary);
  --mc-note-line: var(--line-strong);
  --mc-note-fill: var(--raised);

  background-color: var(--mc-note-fill);
  border: 1px solid var(--mc-note-line);
  border-radius: var(--radius-lg);
  box-shadow: none;
  color: var(--prose);
  font: var(--type-body);
  line-height: 1.6;
  padding: var(--space-4);
}

.md-typeset .admonition[class] > :last-child,
.md-typeset details[class] > :last-child {
  margin-bottom: 0;
}

.md-typeset .admonition[class] > .admonition-title,
.md-typeset details[class] > summary {
  background: none;
  border: 0;
  color: var(--text);
  font: var(--type-item);
  margin: 0 0 var(--space-2);
  padding: 0 0 0 calc(20px + var(--space-3));
  position: relative;
}

.md-typeset .admonition[class] > .admonition-title::before,
.md-typeset details[class] > summary::before {
  background-color: var(--mc-note);
  height: 20px;
  left: 0;
  top: 0;
  width: 20px;
}

.md-typeset .admonition[class].tip,
.md-typeset details[class].tip,
.md-typeset .admonition[class].hint,
.md-typeset details[class].hint {
  --mc-note: var(--accent-text);
  --mc-note-line: color-mix(in srgb, var(--accent) 35%, transparent);
  --mc-note-fill: color-mix(in srgb, var(--accent-soft) 45%, var(--raised));
}

.md-typeset .admonition[class].warning,
.md-typeset details[class].warning,
.md-typeset .admonition[class].caution,
.md-typeset details[class].caution,
.md-typeset .admonition[class].attention,
.md-typeset details[class].attention {
  --mc-note: var(--color-orange);
  --mc-note-line: color-mix(in srgb, var(--color-orange) 35%, transparent);
  --mc-note-fill: color-mix(in srgb, var(--color-orange) 7%, var(--raised));
}

.md-typeset .admonition[class].danger,
.md-typeset details[class].danger,
.md-typeset .admonition[class].error,
.md-typeset details[class].error,
.md-typeset .admonition[class].failure,
.md-typeset details[class].failure,
.md-typeset .admonition[class].bug,
.md-typeset details[class].bug {
  --mc-note: var(--down);
  --mc-note-line: color-mix(in srgb, var(--down) 35%, transparent);
  --mc-note-fill: color-mix(in srgb, var(--down) 7%, var(--raised));
}

.md-typeset .admonition[class].success,
.md-typeset details[class].success,
.md-typeset .admonition[class].check,
.md-typeset details[class].check,
.md-typeset .admonition[class].done,
.md-typeset details[class].done {
  --mc-note: var(--up);
  --mc-note-line: color-mix(in srgb, var(--up) 30%, transparent);
  --mc-note-fill: color-mix(in srgb, var(--up) 5%, var(--raised));
}

/* A collapsible section opens like a row in the app: the chevron turns over. */
.md-typeset details[class] {
  padding-block: 0;
}

.md-typeset details[class] > summary {
  cursor: pointer;
  margin: 0 calc(-1 * var(--space-4));
  padding: var(--space-4) calc(var(--space-4) + 20px + var(--space-3));
}

.md-typeset details[class] > summary::before {
  left: var(--space-4);
  top: var(--space-4);
}

.md-typeset details[class] > summary::after {
  background-color: var(--text-muted);
  height: 20px;
  right: var(--space-4);
  top: var(--space-4);
  transform: rotate(90deg);
  transition: transform 0.2s ease;
  width: 20px;
}

.md-typeset details[class][open] > summary::after {
  transform: rotate(-90deg);
}

.md-typeset details[class][open] {
  padding-bottom: var(--space-4);
}

.md-typeset details[class][open] > summary {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Content tabs (iPhone / Android): the app's two-way switch
   -------------------------------------------------------------------------- */

.md-typeset .tabbed-set {
  border-radius: 0;
}

.md-typeset .tabbed-labels {
  align-self: flex-start;
  background-color: var(--card);
  border-radius: var(--radius-pill);
  box-shadow: none;
  display: inline-flex;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
  max-width: 100%;
  padding: var(--space-1);
}

/* The sliding underline is replaced by the filled option. */
.js .md-typeset .tabbed-labels::before {
  display: none;
}

.md-typeset .tabbed-labels > label {
  align-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  display: inline-flex;
  font: var(--type-label);
  height: var(--space-8);
  margin: 0;
  padding: 0 var(--space-3);
  transition: none;
  width: auto;
}

.md-typeset .tabbed-labels > label:hover {
  color: var(--text);
}

.md-typeset .tabbed-set > input:nth-child(1):checked ~ .tabbed-labels > :nth-child(1),
.md-typeset .tabbed-set > input:nth-child(2):checked ~ .tabbed-labels > :nth-child(2),
.md-typeset .tabbed-set > input:nth-child(3):checked ~ .tabbed-labels > :nth-child(3),
.md-typeset .tabbed-set > input:nth-child(4):checked ~ .tabbed-labels > :nth-child(4),
.md-typeset .tabbed-set > input:nth-child(5):checked ~ .tabbed-labels > :nth-child(5),
.md-typeset .tabbed-set > input:nth-child(6):checked ~ .tabbed-labels > :nth-child(6) {
  background-color: var(--text);
  color: var(--text-on-light);
}

.md-typeset .tabbed-set > input:focus-visible ~ .tabbed-labels > label:focus-visible,
.md-typeset .tabbed-labels > label:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.md-typeset .tabbed-content {
  padding: 0;
}

.md-typeset .tabbed-block > :first-child {
  margin-top: 0;
}

.md-typeset .tabbed-block > :last-child {
  margin-bottom: 0;
}

/* Material's scroll arrows for long tab rows; two options never need them. */
.md-typeset .tabbed-control {
  display: none;
}

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

/* On a wide screen the field is a pill in the bar, as on musicat.fm. */
@media screen and (min-width: 60em) {
  .md-search__inner {
    width: 15rem;
  }

  .md-search__form {
    background-color: var(--scrim);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    box-shadow: none;
    height: var(--space-10);
  }

  .md-search__form:hover {
    background-color: var(--scrim);
    border-color: var(--text-muted);
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__form {
    background-color: var(--raised);
    border-color: var(--line-strong);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: none;
  }

  [data-md-toggle="search"]:checked ~ .md-header .md-search__inner {
    width: 30rem;
  }

  /* Material gives the results a width of their own; they follow the panel instead. */
  .md-search__scrollwrap {
    width: 100%;
  }

  .md-search__output {
    border: 1px solid var(--line-strong);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: 0;
    box-shadow: 0 16px 40px var(--shadow);
    overflow: hidden;
  }

  .md-search__input {
    font: var(--type-body);
    padding-left: var(--space-10);
  }

  .md-search__icon[for="__search"] {
    left: var(--space-3);
  }
}

.md-search__input {
  color: var(--text);
  font: var(--type-body);
}

.md-search__input::placeholder {
  color: var(--text-secondary);
}

.md-search__icon {
  color: var(--text-secondary);
}

.md-search__suggest {
  color: var(--text-secondary);
  font: var(--type-body);
}

.md-search__scrollwrap,
.md-search-result {
  background-color: var(--raised);
}

/* The count of matches is a quiet caption, not a band. */
.md-search-result__meta {
  background-color: transparent;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-secondary);
  font: var(--type-small);
  line-height: 1.45;
  padding: var(--space-3) var(--space-4);
}

.md-search-result__item {
  box-shadow: none;
}

.md-search-result__item + .md-search-result__item {
  border-top: 1px solid var(--line-strong);
}

.md-search-result__link {
  border-radius: 0;
}

.md-search-result__link:focus,
.md-search-result__link:hover {
  background-color: var(--card);
}

.md-search-result__article {
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-12);
}

.md-search-result__icon {
  color: var(--text-muted);
  left: var(--space-4);
  top: var(--space-3);
}

.md-search-result__title,
.md-search-result__article--document .md-search-result__title {
  color: var(--text);
  font: var(--type-item);
  margin: 0;
}

.md-search-result__teaser {
  color: var(--text-secondary);
  font: var(--type-small);
  line-height: 1.45;
  margin-top: var(--space-1);
  -webkit-line-clamp: 2;
}

/* A match is marked by weight and colour; a fill would read as a button. */
.md-search-result mark,
.md-search-result em {
  background: none;
  color: var(--accent-text);
  font-style: normal;
  font-weight: 600;
  text-decoration: none;
}

.md-search-result__more > summary {
  color: var(--accent-text);
  font: var(--type-small);
}

.md-search-result__more > summary > div {
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-12);
}

/* On a phone the search takes the whole screen under the bar. */
@media screen and (max-width: 59.984375em) {
  .md-search__overlay {
    background-color: var(--page);
  }

  .md-search__inner {
    background-color: var(--page);
  }

  .md-search__form {
    background-color: var(--page);
    border-bottom: 1px solid var(--line-strong);
    box-shadow: none;
    height: var(--top-bar);
  }

  .md-search__input {
    font-size: 16px;
  }

  .md-search__scrollwrap,
  .md-search-result {
    background-color: var(--page);
  }
}

/* --------------------------------------------------------------------------
   Language
   -------------------------------------------------------------------------- */

/*
 * The list opens under its button as a raised panel with every language in
 * view — nine fit without a scrollbar — and marks the one you are reading.
 * It is anchored to the button's right edge so it never runs off a phone.
 */
[dir] .md-select__inner,
.md-select:focus-within .md-select__inner,
.md-select:hover .md-select__inner {
  background-color: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px var(--shadow);
  color: var(--text);
  left: auto;
  margin-top: var(--space-2);
  max-height: none;
  min-width: 13rem;
  padding: var(--space-1);
  right: 0;
  transform: none;
}

.md-select__inner::after {
  display: none;
}

.md-select__list {
  border-radius: 0;
  font: var(--type-body);
  max-height: none;
  overflow: visible;
}

.md-select__item {
  line-height: 1.3;
}

.md-select__link {
  align-items: center;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
}

.md-select__link:focus,
.md-select__link:hover {
  background-color: var(--card);
  color: var(--text);
}

.md-select__link[aria-current] {
  color: var(--text);
  font-weight: 600;
}

.md-select__link svg {
  fill: var(--accent-text);
  flex: none;
  height: 18px;
  width: 18px;
}

/* Closed lists stay out of the layout, so they cannot widen a phone's page. */
.md-select:not(:focus-within):not(:hover) .md-select__inner {
  visibility: hidden;
}

/* ==========================================================================
   4. The page frame
   ========================================================================== */

/* --------------------------------------------------------------------------
   Top bar
   -------------------------------------------------------------------------- */

.md-header {
  background-color: var(--page);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  color: var(--text);
}

.md-header--shadow {
  box-shadow: none;
}

.mc-bar {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  height: var(--top-bar);
  margin: 0 auto;
  max-width: none;
  padding: 0 var(--space-4);
}

@media screen and (min-width: 900px) {
  .mc-bar {
    gap: var(--space-3);
    height: var(--top-bar-lg);
    padding: 0 var(--space-6);
  }
}

/* The logo and the site's name, together one link home. */
.mc-bar__home {
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--text);
  display: inline-flex;
  flex: none;
  gap: var(--space-3);
  text-decoration: none;
}

.mc-bar__logo {
  display: block;
  height: var(--space-10);
  width: auto;
}

.mc-bar__name {
  font: var(--type-section);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.mc-bar__end {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

/* Words for a screen reader on a button that shows only its icon. */
.mc-sr-only {
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Round bar buttons, all one size, the border inside the size. */
.mc-round,
.md-header .md-select > .md-header__button {
  align-items: center;
  background-color: var(--scrim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-sizing: border-box;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: var(--space-10);
  justify-content: center;
  margin: 0;
  padding: 0;
  width: var(--space-10);
}

.mc-round:hover,
.md-header .md-select > .md-header__button:hover {
  border-color: var(--text-muted);
  opacity: 1;
}

.mc-round svg,
.md-header .md-select > .md-header__button svg {
  fill: currentcolor;
  height: 20px;
  width: 20px;
}

.md-header__option {
  margin: 0;
}

.md-header__option > .md-select {
  position: relative;
}

/* The search button is a phone's: on a wide screen the field is in the bar. */
@media screen and (min-width: 60em) {
  .mc-bar .mc-round[for="__search"] {
    display: none;
  }
}

/* The menu lists the sections; from 1220 px they are beside the page. */
@media screen and (min-width: 76.25em) {
  .mc-bar .mc-round[for="__drawer"] {
    display: none;
  }
}

/* Pills: white for the one thing to do, outlined for the rest. */
.mc-pill {
  align-items: center;
  background-color: var(--scrim);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-sizing: border-box;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font: var(--type-label);
  gap: var(--space-2);
  height: var(--space-10);
  padding: 0 var(--space-4);
  text-decoration: none;
  white-space: nowrap;
}

.mc-pill:hover,
.md-typeset .mc-pill,
.md-typeset .mc-pill:hover {
  color: var(--text);
  text-decoration: none;
}

.mc-pill:hover {
  border-color: var(--color-gray-600);
}

.mc-pill--primary,
.mc-pill--primary:hover,
.md-typeset .mc-pill--primary,
.md-typeset .mc-pill--primary:hover {
  background-color: var(--text);
  border-color: var(--text);
  color: var(--text-on-light);
}

.mc-pill svg {
  fill: currentcolor;
  height: 16px;
  width: 16px;
}

/* The way back to musicat.fm. A phone has no room for it in the bar; it is in the menu and the footer. */
.mc-bar__site {
  display: none;
}

@media screen and (min-width: 600px) {
  .mc-bar__site {
    display: inline-flex;
  }
}

/* --------------------------------------------------------------------------
   Section tabs: under the bar, the same tabs the web puts under a page title
   -------------------------------------------------------------------------- */

.md-tabs {
  background-color: var(--page);
  border-bottom: 1px solid var(--line);
  color: var(--text);
  display: block;
  overflow: visible;
}

.md-tabs > .md-grid {
  max-width: var(--content-width);
  padding: 0 var(--space-1);
}

@media screen and (min-width: 900px) {
  .md-tabs > .md-grid {
    padding: 0 var(--space-3);
  }
}

.md-tabs__list {
  gap: var(--space-1);
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.md-tabs__list::-webkit-scrollbar {
  display: none;
}

.md-tabs__item {
  height: auto;
  padding: 0;
}

/* The tabs never fade out here, so they have to keep answering a press while they show. */
.md-tabs[hidden] {
  pointer-events: auto;
}

.md-tabs__link,
.md-tabs[hidden] .md-tabs__link {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--text-secondary);
  display: flex;
  font: var(--type-label);
  margin: 0;
  opacity: 1;
  padding: var(--space-3);
  position: relative;
  transform: none;
  transition: none;
}

.md-tabs__link:hover {
  color: var(--color-gray-200);
}

.md-tabs__item--active .md-tabs__link {
  color: var(--text);
}

.md-tabs__item--active .md-tabs__link::after {
  background-color: var(--accent);
  border-radius: var(--radius-xs);
  bottom: 0;
  content: "";
  height: 2px;
  left: var(--space-3);
  position: absolute;
  right: var(--space-3);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.md-main {
  overflow-x: clip;
}

.md-main__inner {
  margin-top: 0;
  max-width: var(--content-width);
}

.md-content__inner {
  margin: 0 var(--space-4) var(--space-12);
  padding-top: var(--space-8);
}

@media screen and (min-width: 900px) {
  .md-content__inner {
    margin: 0 var(--space-6) var(--space-16);
    padding-top: var(--space-10);
  }
}

.md-sidebar {
  padding: var(--space-10) 0;
  top: var(--top-bar);
}

@media screen and (min-width: 900px) {
  .md-sidebar {
    top: var(--top-bar-lg);
  }
}

/* --------------------------------------------------------------------------
   Section navigation (left, from 1220 px)
   -------------------------------------------------------------------------- */

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-sidebar__inner {
    padding-left: var(--space-6);
  }

  .md-sidebar--primary .md-nav {
    font: var(--type-body);
    font-size: 14px;
  }

  /* Material indents every level and pulls it back again; the rail does the indenting here. */
  [dir] .md-sidebar--primary .md-nav__list,
  [dir] .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item > .md-nav {
    margin: 0;
    padding: 0;
  }

  .md-sidebar--primary .md-nav__item {
    padding: 0;
  }

  /*
   * The section's name heads the list, in sentence case. Material pins it
   * with a block of page colour and a shadow under it; the list is short
   * enough not to need either.
   */
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
    background: none;
    border: 0;
    box-shadow: none;
    margin: 0 0 var(--space-3);
    padding: 0;
    position: static;
  }

  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link > a,
  .md-sidebar--primary .md-nav--lifted > .md-nav__list > .md-nav__item--active > a.md-nav__link {
    border: 0;
    color: var(--text);
    font: var(--type-label);
    margin: 0;
    padding: 0;
  }

  /* The pages of the section hang off one rail; the page you are on lights its stretch of it. */
  .md-sidebar--primary .md-nav__item--active > .md-nav > .md-nav__list {
    border-left: 1px solid var(--line-strong);
  }

  .md-sidebar--primary .md-nav__item--active > .md-nav .md-nav__link {
    border-left: 2px solid transparent;
    color: var(--text-secondary);
    margin: 0 0 0 -1px;
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
  }

  .md-sidebar--primary .md-nav__item--active > .md-nav .md-nav__link:hover {
    color: var(--text);
  }

  .md-sidebar--primary .md-nav__item--active > .md-nav .md-nav__link--active,
  .md-sidebar--primary .md-nav__item--active > .md-nav .md-nav__link--active:hover {
    border-left-color: var(--accent);
    color: var(--text);
    font-weight: 600;
  }

  /* The page's own headings, which Material folds in under the current page, stay out of it. */
  .md-sidebar--primary .md-nav--secondary {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   The menu (drawer) on narrower screens
   -------------------------------------------------------------------------- */

@media screen and (max-width: 76.234375em) {
  .md-sidebar--primary {
    background-color: var(--raised);
    border-right: 1px solid var(--line-strong);
  }

  /* A section's title, with Material's back arrow in the room above it. */
  .md-nav--primary .md-nav__title {
    background-color: var(--raised);
    box-shadow: none;
    color: var(--text);
    font: var(--type-section);
    height: auto;
    padding: var(--space-12) var(--space-4) var(--space-3);
  }

  /* The menu's own title has no arrow: the logo heads it instead. */
  .md-nav--primary .md-nav__title[for="__drawer"] {
    padding-top: var(--space-4);
  }

  .md-nav--primary .md-nav__title .md-nav__button.md-logo {
    margin: 0 0 var(--space-2);
    padding: 0;
    position: static;
  }

  .md-nav--primary .md-nav__title .md-nav__button.md-logo img {
    height: var(--space-10);
    width: auto;
  }

  .md-nav--primary .md-nav__title[for="__drawer"],
  .md-nav--primary .md-nav__title {
    border-bottom: 1px solid var(--line-strong);
  }

  .md-nav--primary .md-nav__item {
    border-top: 1px solid var(--line);
  }

  .md-nav--primary .md-nav__link {
    color: var(--text-secondary);
    font: var(--type-body);
    padding: var(--space-3) var(--space-4);
  }

  .md-nav--primary .md-nav__link--active {
    box-shadow: inset 2px 0 0 var(--accent);
    color: var(--text);
    font-weight: 600;
  }

  .md-nav__source {
    display: none;
  }

  .md-nav--primary .mc-nav-site .md-nav__link {
    align-items: center;
    color: var(--text);
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
  }

  .md-nav--primary .mc-nav-site svg {
    fill: var(--text-secondary);
    flex: none;
    height: 18px;
    width: 18px;
  }
}

/* Beside the page the bar already has the link; the menu's copy is a phone's. */
@media screen and (min-width: 76.25em) {
  .mc-nav-site {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   On this page (right)
   -------------------------------------------------------------------------- */

/*
 * Quiet by design: the headings of the page in the secondary grey, the one
 * you are reading in full contrast with a short accent line beside it.
 */
.md-nav--secondary .md-nav__title {
  background: none;
  box-shadow: none;
  color: var(--text);
  font: var(--type-label);
  letter-spacing: 0;
  margin: 0 0 var(--space-2);
  padding: 0 0 0 var(--space-3);
  text-transform: none;
}

[dir] .md-sidebar--secondary .md-nav__list {
  padding: 0;
}

.md-sidebar--secondary .md-nav__link {
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  font: var(--type-small);
  margin: 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-3);
}

.md-sidebar--secondary .md-nav__list .md-nav__list .md-nav__link {
  padding-left: var(--space-6);
}

.md-sidebar--secondary .md-nav__link:hover {
  color: var(--text);
}

.md-sidebar--secondary .md-nav__link--active,
.md-sidebar--secondary .md-nav__link--passed.md-nav__link--active {
  border-left-color: var(--accent);
  color: var(--text);
}

.md-sidebar--secondary .md-nav__link--passed {
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.md-footer {
  background-color: var(--page);
  border-top: 1px solid var(--line-strong);
  color: var(--text);
}

/* Previous and next: two rows of a list, each a card you can press. */
.md-footer__inner:not([hidden]) {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
  max-width: var(--content-width);
  padding: var(--space-8) var(--space-4) 0;
}

@media screen and (min-width: 600px) {
  .md-footer__inner:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 900px) {
  .md-footer__inner:not([hidden]) {
    padding: var(--space-10) var(--space-6) 0;
  }
}

[dir] .md-footer__link {
  align-items: center;
  background-color: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--text);
  display: flex;
  gap: var(--space-3);
  margin: 0;
  opacity: 1;
  padding: var(--space-4);
  transition: none;
  width: auto;
}

.md-footer__link:hover,
.md-footer__link:focus {
  background-color: var(--card);
  opacity: 1;
}

.md-footer__link--next {
  grid-column: -2;
  justify-content: flex-end;
  text-align: right;
}

/* Material hides the previous page's title on a phone; a full-width card has room for it. */
.md-footer__link--prev .md-footer__title {
  display: block;
}

@media screen and (max-width: 599px) {
  .md-footer__link--next {
    grid-column: auto;
  }
}

.md-footer__link svg {
  transform: none;
}

.md-footer__button {
  color: var(--text-secondary);
  margin: 0;
  padding: 0;
}

.md-footer__title {
  font: var(--type-item);
  margin: 0;
  padding: 0;
}

.md-footer__direction {
  color: var(--text-secondary);
  display: block;
  font: var(--type-small);
  margin-bottom: var(--space-1);
  opacity: 1;
  position: static;
}

.md-footer-meta {
  background-color: transparent;
}

.md-footer-meta__inner {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  max-width: var(--content-width);
  padding: var(--space-8) var(--space-4) var(--space-10);
}

@media screen and (min-width: 900px) {
  .md-footer-meta__inner {
    padding: var(--space-10) var(--space-6) var(--space-12);
  }
}

.md-copyright {
  color: var(--text-secondary);
  font: var(--type-small);
  margin: 0;
  padding: 0;
  width: auto;
}

.md-copyright__highlight {
  color: var(--text);
}

.md-typeset .md-copyright a {
  color: var(--text-secondary);
  text-decoration: none;
}

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

.mc-stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.mc-stores__link {
  border-radius: var(--radius-sm);
  display: inline-flex;
}

.mc-stores img {
  border-radius: 0;
  display: block;
  height: var(--space-10);
  width: auto;
}

.mc-footer-end {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

@media screen and (min-width: 600px) {
  .mc-footer-end {
    justify-items: end;
  }
}

.md-typeset .mc-site {
  color: var(--text-secondary);
  font: var(--type-body);
  text-decoration: none;
}

.md-typeset .mc-site:hover {
  color: var(--text);
}

.mc-updated {
  color: var(--text-secondary);
  font: var(--type-small);
}

/*
 * The date keeps the body face with even-width digits: one figure in the
 * footer is not worth fetching the mono face on every page for.
 */
.mc-updated time {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Back to top: a round bar button, floating. */
.md-top {
  background-color: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  box-shadow: 0 8px 24px var(--shadow);
  color: var(--text);
  font: var(--type-label);
  padding: var(--space-2) var(--space-4);
}

.md-top:hover,
.md-top:focus {
  background-color: var(--card);
  color: var(--text);
}

/* ==========================================================================
   5. Home and 404
   ========================================================================== */

/* --------------------------------------------------------------------------
   Home: the services as tiles, everything else as lists of rows
   -------------------------------------------------------------------------- */

/* The chevron at the end of a row, as in the app's lists. */
:root {
  --mc-chevron: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59 16.58 13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg>');
}

.md-typeset .grid.cards {
  gap: var(--space-3);
}

.md-typeset .grid.cards > ul {
  display: contents;
}

/* Every card is one link: the action inside it stretches over the whole card. */
.md-typeset .grid.cards > ul > li {
  background-color: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: none;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  font: var(--type-small);
  margin: 0;
  padding: var(--space-5);
  position: relative;
  transition: none;
}

.md-typeset .grid.cards > ul > li:hover {
  background-color: var(--card);
  border-color: var(--line-strong);
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li:focus-within {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

.md-typeset .grid.cards > ul > li > hr {
  display: none;
}

.md-typeset .grid.cards > ul > li > p {
  margin: 0;
}

/*
 * The card's name, with its icon in a small tile. The source puts a
 * non-breaking space between the two; setting the line's own size to zero
 * takes it out, and the gap does the spacing.
 */
.md-typeset .grid.cards > ul > li > p:first-child {
  align-items: center;
  color: var(--text);
  display: flex;
  font-size: 0;
  margin-bottom: var(--space-2);
}

.md-typeset .grid.cards > ul > li > p:first-child strong {
  font: var(--type-section);
}

.md-typeset .grid.cards > ul > li > p:first-child .twemoji {
  align-items: center;
  background-color: var(--card);
  border-radius: var(--radius-md);
  color: var(--text);
  display: inline-flex;
  flex: none;
  height: var(--space-10);
  justify-content: center;
  margin-right: var(--space-3);
  width: var(--space-10);
}

.md-typeset .grid.cards > ul > li > p:first-child .twemoji svg {
  height: 22px;
  max-height: none;
  width: 22px;
}

.md-typeset .grid.cards > ul > li:hover > p:first-child .twemoji {
  background-color: var(--line-strong);
}

/* The arrow in front of the action: the card itself is the arrow now. */
.md-typeset .grid.cards a .twemoji {
  display: none;
}

.md-typeset .grid.cards a {
  color: var(--accent-text);
  font: var(--type-label);
  text-decoration: none;
}

.md-typeset .grid.cards a::after {
  border-radius: var(--radius-lg);
  content: "";
  inset: 0;
  position: absolute;
}

.md-typeset .grid.cards a:focus-visible {
  outline: none;
}

.md-typeset .grid.cards > ul > li > p:last-child {
  margin-top: auto;
  padding-top: var(--space-4);
}

/*
 * The first group is the services you connect — the doors into the rest of
 * the docs — so on a wide screen they stand as tiles side by side, the icon
 * above the name. The groups after it are lists: one panel divided by lines,
 * a row per page.
 */
@media screen and (min-width: 900px) {
  .md-typeset .grid.cards:not(.grid.cards ~ .grid.cards) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md-typeset .grid.cards:not(.grid.cards ~ .grid.cards) > ul > li > p:first-child {
    align-items: flex-start;
    flex-direction: column;
  }

  .md-typeset .grid.cards:not(.grid.cards ~ .grid.cards) > ul > li > p:first-child .twemoji {
    margin: 0 0 var(--space-4);
  }
}

.md-typeset .grid.cards ~ .grid.cards {
  background-color: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}

.md-typeset .grid.cards ~ .grid.cards > ul > li {
  border: 0;
  border-radius: 0;
  justify-content: center;
  min-height: calc(var(--space-10) + 2 * var(--space-3));
  padding: var(--space-3) calc(var(--space-4) + 20px + var(--space-3)) var(--space-3)
    calc(var(--space-4) + var(--space-10) + var(--space-3));
}

.md-typeset .grid.cards ~ .grid.cards > ul > li + li {
  border-top: 1px solid var(--line-strong);
}

.md-typeset .grid.cards ~ .grid.cards > ul > li:focus-within {
  outline-offset: -2px;
}

.md-typeset .grid.cards ~ .grid.cards > ul > li > p:first-child {
  margin-bottom: var(--space-1);
}

.md-typeset .grid.cards ~ .grid.cards > ul > li > p:first-child strong {
  font: var(--type-label);
}

.md-typeset .grid.cards ~ .grid.cards > ul > li > p:first-child .twemoji {
  left: var(--space-4);
  margin: calc(-1 * var(--space-10) / 2) 0 0;
  position: absolute;
  top: 50%;
}

/*
 * In a row the whole row is the link. Its words are set at no size, so they
 * still name the link for a screen reader without repeating the row's title.
 */
.md-typeset .grid.cards ~ .grid.cards > ul > li > p:last-child {
  line-height: 0;
  padding: 0;
}

.md-typeset .grid.cards ~ .grid.cards a {
  font-size: 0;
}

.md-typeset .grid.cards ~ .grid.cards > ul > li::after {
  background-color: var(--text-muted);
  content: "";
  height: 20px;
  margin-top: -10px;
  -webkit-mask: var(--mc-chevron) center / contain no-repeat;
  mask: var(--mc-chevron) center / contain no-repeat;
  position: absolute;
  right: var(--space-4);
  top: 50%;
  width: 20px;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.mc-status {
  padding: var(--space-6) 0 var(--space-16);
  position: relative;
}

.mc-status h1 {
  margin-bottom: var(--space-2);
}

.mc-status__code {
  color: var(--text-secondary);
  font: var(--type-small);
  margin: 0 0 var(--space-3);
}

.mc-status__body {
  color: var(--text-secondary);
  margin: 0 0 var(--space-6);
  max-width: 60ch;
}

.mc-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.md-typeset .mc-status__actions .mc-pill {
  text-decoration: none;
}

.md-typeset .mc-status__actions .mc-pill:not(.mc-pill--primary) {
  color: var(--text);
}

/* The same purple light the web's error screens start under. */
.mc-status::before {
  background: radial-gradient(
    60rem 28rem at 15% -6rem,
    color-mix(in srgb, var(--color-purple-700) 30%, transparent),
    transparent 70%
  );
  content: "";
  height: 32rem;
  left: -50vw;
  pointer-events: none;
  position: absolute;
  right: -50vw;
  top: calc(-1 * var(--space-16));
  z-index: -1;
}

/*
 * A layer of its own, so the light can sit under the page's text but over its ground.
 * Isolation alone, never `position`: a positioned container becomes the tabs' offset
 * parent, the theme then reads them as scrolled away and stops them taking clicks.
 */
.md-container {
  isolation: isolate;
}