:root {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: #f0eee9;
  --text: #1d1d1f;
  --muted: #6b6b70;
  --border: #e2dfd8;
  --accent: #2f5bd3;
  --accent-soft: #e8eefc;
  --good: #1c7d45;
  --good-soft: #e6f4ec;
  --bad: #c2362f;
  --bad-soft: #fbeceb;
  --warn: #985f00;
  --warn-soft: #fbf1dd;
  --lvl-A0-ink: #145ab4;
  --lvl-A0-tint: #e5f0fe;
  --lvl-A0-strong: #007aff;
  --lvl-A0-pill: #a6d0ff;
  --lvl-A0-pill-ink: #0b54ad;
  --lvl-A1-ink: #256585;
  --lvl-A1-tint: #ddf2ff;
  --lvl-A1-strong: #32ade6;
  --lvl-A1-pill: #b7e2f6;
  --lvl-A1-pill-ink: #256585;
  --lvl-A2-ink: #14702d;
  --lvl-A2-tint: #dbf8de;
  --lvl-A2-strong: #34c759;
  --lvl-A2-pill: #b8ebc5;
  --lvl-A2-pill-ink: #14702d;
  --lvl-B1-ink: #51670c;
  --lvl-B1-tint: #e8f5d3;
  --lvl-B1-strong: #a8d600;
  --lvl-B1-pill: #e1f1a6;
  --lvl-B1-pill-ink: #51670c;
  --lvl-B2-ink: #735a00;
  --lvl-B2-tint: #faeecd;
  --lvl-B2-strong: #ffcc00;
  --lvl-B2-pill: #ffeda6;
  --lvl-B2-pill-ink: #735a00;
  --lvl-C1-ink: #874c00;
  --lvl-C1-tint: #fdebdb;
  --lvl-C1-strong: #ff9500;
  --lvl-C1-pill: #ffdaa6;
  --lvl-C1-pill-ink: #874c00;
  --lvl-C2-ink: #a32920;
  --lvl-C2-tint: #fee9e6;
  --lvl-C2-strong: #ff3b30;
  --lvl-C2-pill: #ffbab7;
  --lvl-C2-pill-ink: #a0251d;
  --lvm-fill: rgba(118, 118, 128, 0.12);
  --lvm-off: rgba(118, 118, 128, 0.2);
  --lvm-text: #5c5c62;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #1c1c1f;
    --surface-2: #26262a;
    --text: #ececef;
    --muted: #9a9aa2;
    --border: #33333a;
    --accent: #7ea2ff;
    --accent-soft: #1f2a48;
    --good: #5cc98a;
    --good-soft: #17301f;
    --bad: #ff7a72;
    --bad-soft: #3a1d1b;
    --warn: #f0b545;
    --warn-soft: #3a2c12;
    --lvl-A0-ink: #a8ceff;
    --lvl-A0-tint: #17273c;
    --lvl-A0-strong: #3792fd;
    --lvl-A0-pill: #325f96;
    --lvl-A0-pill-ink: #bedaff;
    --lvl-A1-ink: #73dee9;
    --lvl-A1-tint: #012d31;
    --lvl-A1-strong: #11c8d8;
    --lvl-A1-pill: #1e7a83;
    --lvl-A1-pill-ink: #d3fbff;
    --lvl-A2-ink: #9bdda8;
    --lvl-A2-tint: #152d1a;
    --lvl-A2-strong: #47c86e;
    --lvl-A2-pill: #3a7a4e;
    --lvl-A2-pill-ink: #c6ffd1;
    --lvl-B1-ink: #c2d58a;
    --lvl-B1-tint: #242a0f;
    --lvl-B1-strong: #b6d431;
    --lvl-B1-pill: #718030;
    --lvl-B1-pill-ink: #ffffff;
    --lvl-B2-ink: #e4c87c;
    --lvl-B2-tint: #2f2509;
    --lvl-B2-strong: #facb39;
    --lvl-B2-pill: #937b34;
    --lvl-B2-pill-ink: #ffffff;
    --lvl-C1-ink: #feb98b;
    --lvl-C1-tint: #372010;
    --lvl-C1-strong: #fe8c2c;
    --lvl-C1-pill: #955c2d;
    --lvl-C1-pill-ink: #ffe5d5;
    --lvl-C2-ink: #feb5ae;
    --lvl-C2-tint: #3a1d1b;
    --lvl-C2-strong: #f75d59;
    --lvl-C2-pill: #924444;
    --lvl-C2-pill-ink: #ffc8c2;
    --lvm-fill: rgba(118, 118, 128, 0.24);
    --lvm-off: rgba(118, 118, 128, 0.32);
    --lvm-text: #9a9aa2;
    --shadow: none;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #1c1c1f;
  --surface-2: #26262a;
  --text: #ececef;
  --muted: #9a9aa2;
  --border: #33333a;
  --accent: #7ea2ff;
  --accent-soft: #1f2a48;
  --good: #5cc98a;
  --good-soft: #17301f;
  --bad: #ff7a72;
  --bad-soft: #3a1d1b;
  --warn: #f0b545;
  --warn-soft: #3a2c12;
  --lvl-A0-ink: #a8ceff;
  --lvl-A0-tint: #17273c;
  --lvl-A0-strong: #3792fd;
  --lvl-A0-pill: #325f96;
  --lvl-A0-pill-ink: #bedaff;
  --lvl-A1-ink: #73dee9;
  --lvl-A1-tint: #012d31;
  --lvl-A1-strong: #11c8d8;
  --lvl-A1-pill: #1e7a83;
  --lvl-A1-pill-ink: #d3fbff;
  --lvl-A2-ink: #9bdda8;
  --lvl-A2-tint: #152d1a;
  --lvl-A2-strong: #47c86e;
  --lvl-A2-pill: #3a7a4e;
  --lvl-A2-pill-ink: #c6ffd1;
  --lvl-B1-ink: #c2d58a;
  --lvl-B1-tint: #242a0f;
  --lvl-B1-strong: #b6d431;
  --lvl-B1-pill: #718030;
  --lvl-B1-pill-ink: #ffffff;
  --lvl-B2-ink: #e4c87c;
  --lvl-B2-tint: #2f2509;
  --lvl-B2-strong: #facb39;
  --lvl-B2-pill: #937b34;
  --lvl-B2-pill-ink: #ffffff;
  --lvl-C1-ink: #feb98b;
  --lvl-C1-tint: #372010;
  --lvl-C1-strong: #fe8c2c;
  --lvl-C1-pill: #955c2d;
  --lvl-C1-pill-ink: #ffe5d5;
  --lvl-C2-ink: #feb5ae;
  --lvl-C2-tint: #3a1d1b;
  --lvl-C2-strong: #f75d59;
  --lvl-C2-pill: #924444;
  --lvl-C2-pill-ink: #ffc8c2;
  --lvm-fill: rgba(118, 118, 128, 0.24);
  --lvm-off: rgba(118, 118, 128, 0.32);
  --lvm-text: #9a9aa2;
  --shadow: none;
}

/* The page base; its colours and shadows come from tokens.json (tokens.ts), set before this file */

:root {
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The level mark (level-mark.css): a mark's capsule as the pointer rests on it. */
  --lvm-hover: rgba(118, 118, 128, 0.2);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lvm-hover: rgba(118, 118, 128, 0.36);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --lvm-hover: rgba(118, 118, 128, 0.36);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Chrome's macOS system font places a stress mark (U+0301) beside Cyrillic е and о instead of over them,
   so Ukrainian text skips it; Safari keeps the system font through -apple-system. */
:lang(uk) {
  --font: -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
[lang="uk"] {
  font-family: var(--font);
}

button {
  font: inherit;
  color: inherit;
}

/* Switches: the grouping, and the level and variety in their panels */
.seg {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 8px;
  padding: 2px;
}
.seg button {
  border: 0;
  background: transparent;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--muted);
}
.seg button.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* Level buttons: each code in its level's colour; levels.css tints the buttons from the lowest level
   up to the chosen one, the levels the page shows, and the chosen one stands out */
.seg button[data-set-level] {
  color: var(--lvl);
  font-weight: 600;
}
.seg button[data-set-level].on {
  background: var(--level-strong);
  color: var(--text);
}

/* Page head: the flag and title, the property line, the actions, the view tabs with the level and
   variety chips; the sidebar head; the home page's head and language cards */

.doc-head {
  margin: 12px 0 22px;
}
.title-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.page-icon {
  flex-shrink: 0;
  font-size: 34px;
  line-height: 1.15;
}
.doc .doc-head h1 {
  margin: 0;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.props {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}
.props .lvl {
  margin: 0;
}
/* A property that opens a page: the track's cheatsheets, a topic's section cheatsheet. */
.props a.prop {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}
.props a.prop:hover {
  color: var(--text);
  text-decoration-color: currentColor;
}

/* Badges */

.badge {
  display: inline-flex;
  border-radius: 999px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.6;
  vertical-align: middle;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* A level badge is one pill, (A1), or two joined halves, (A1][B1): the rounded badge clips its
   halves, and each half writes its level's code in its pill ink (--level-pill-ink) on its pill colour
   (--level-pill), both set per level and theme in levels.css. --badge-pad sizes the halves. */
.lvl {
  margin-left: 8px;
}
.lvl > .half {
  padding: var(--badge-pad, 1px 7px);
  background: var(--level-pill);
  color: var(--level-pill-ink);
}
.lvl > .half:first-child {
  border-radius: 999px 0 0 999px;
}
.lvl > .half:last-child {
  border-radius: 0 999px 999px 0;
}
.lvl > .half:only-child {
  border-radius: 999px;
}
.blk-level {
  margin: 0 0 6px;
}
.blk-level .lvl {
  margin: 0;
}
td .lvl,
li > .lvl,
p > .lvl {
  margin: 0 6px 0 0;
}

/* Document */

.doc h1 {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* A table cell with forms of each variety holds a copy per variety; the Variety switch shows one. */
.cell-variety {
  display: block;
}

.doc > blockquote:first-of-type {
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  font-size: 17px;
  color: var(--muted);
}

.doc h2 {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.doc h3 {
  font-size: 16px;
  margin: 24px 0 8px;
}
.doc h4 {
  font-size: 14px;
  margin: 18px 0 6px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.doc h5 {
  font-size: 13px;
  margin: 14px 0 6px;
}

.doc p,
.doc ul {
  margin: 8px 0;
}
.doc ul {
  padding-left: 20px;
}
.doc li {
  margin: 3px 0;
}
/* Marks (CONVENTIONS.md §12): the form or word a rule is about shows in bold; a sound, a meaning or a
   translation is muted; every other mark reads as its text. */
.doc
  :is(
    [data-mark="target"],
    [data-mark="aux"],
    [data-mark="subj"],
    [data-mark="verb"],
    [data-mark="ending"],
    [data-mark="stress"],
    [data-mark="term"],
    [data-mark="letter"],
    [data-mark="signal"]
  ) {
  color: var(--accent);
  font-weight: 650;
}
.doc :is([data-mark="sound"], [data-mark="gloss"], [data-mark="l1"], [data-mark="translation"]) {
  color: var(--muted);
}
.doc a {
  color: var(--accent);
}
/* A link to a topic without a page yet. */
.doc .missing {
  color: var(--muted);
  text-decoration: underline dotted;
  cursor: help;
}
.doc code {
  font: 13px var(--mono);
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Tables and cheatsheet pages */

.table-wrap {
  overflow-x: auto;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
.doc th,
.doc td {
  padding: 7px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.doc th {
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.doc tr:last-child td {
  border-bottom: 0;
}
.doc td.key {
  font-weight: 550;
}
.doc th.group,
.doc th.group-start {
  border-left: 1px solid var(--border);
}
.doc thead tr:first-child th[rowspan],
.doc th.group {
  border-bottom: 1px solid var(--border);
}
.doc thead th[rowspan] {
  vertical-align: middle;
}
/* Tables with merged cells list one word per row: tight rows keep each list together. */
.doc table.compact :is(th, td):not(.gap) {
  padding-left: 8px;
  padding-right: 8px;
}
.doc table.compact td.center {
  white-space: nowrap;
}
.doc table.compact td {
  padding-top: 2px;
  padding-bottom: 2px;
  line-height: 1.35;
}
/* Every column after the first has a line on its left; a merged cell at the bottom edge leaves it to the box. */
.doc table.compact td:not(.key),
.doc table.compact thead tr + tr th,
.doc table.compact th.group {
  border-left: 1px solid var(--border);
}
.doc table.compact td.end {
  border-bottom: 0;
}
/* Gaps: an empty column between groups, an empty row between blocks; their edges close the boxes around them. */
.doc :is(th, td).gap,
.doc tr.gap-row td {
  padding: 0;
  background: var(--bg);
}
.doc :is(th, td).gap {
  width: 12px;
  min-width: 12px;
  border-top: 0;
  border-bottom: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.doc tr.gap-row td {
  height: 12px;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.doc :is(th, td).center {
  text-align: center;
  vertical-align: middle;
}

.doc table.errors td:nth-child(1) {
  color: var(--bad);
  background: var(--bad-soft);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--bad) 45%, transparent);
}
.doc table.errors td:nth-child(2) {
  background: var(--good-soft);
}

.empty {
  margin-top: 40px;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

/* Sheets */

.sheet h2 {
  font-size: 22px;
}
.sheet h3 {
  font-size: 17px;
  margin-top: 28px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 860px) {
  /* Panels open as sheets along the bottom */
  .panel[popover],
  .panel[popover]:not([style*="top"]) {
    inset: auto 0 0;
    width: auto;
    max-width: none;
    height: auto;
    margin: 0;
    padding: 16px 16px calc(22px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
  }
  .panel[popover]::backdrop {
    background: rgba(0, 0, 0, 0.28);
  }
  .panel .seg {
    max-width: 100%;
    overflow-x: auto;
  }
  .page-icon {
    font-size: 28px;
  }
  .doc .doc-head h1 {
    font-size: 28px;
  }
}

/* Print */

@media print {
  @page {
    size: A4;
    margin: 16mm;
  }

  .rail {
    display: none;
  }
  body {
    background: #fff;
    font-size: 11pt;
  }
  .table-wrap {
    box-shadow: none;
    break-inside: avoid;
  }
  .doc h2,
  .doc h3 {
    break-after: avoid;
  }
  .doc {
    max-width: none;
  }
  .lanes {
    display: block;
  }
}

/* Static pages */

.seg a {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.seg a.on {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.doc h2 a,
.doc h3 a {
  color: inherit;
  text-decoration: none;
}
.doc h2 a:hover,
.doc h3 a:hover {
  color: var(--accent);
}

/* A view whose content all sits above the level filter shows its note instead */
.filter-empty {
  display: none;
  margin: 28px 0;
  padding: 20px 24px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
}
.filter-empty p {
  margin: 0 0 12px;
}
.filter-empty button {
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Order: by category or along the study path (client.ts); the lists of the other order hide */
html:not([data-order="path"]) [data-order="path"],
html[data-order="path"] [data-order="categories"] {
  display: none;
}
/* On the study path the menu highlights the step being read alone (client.ts) */
.nav-list[data-order="path"] a.on:not([aria-current="step"]) {
  background: none;
  color: var(--text);
  font-weight: inherit;
}

/* Phones: keep the page at screen width; wide tables scroll inside their box */

@media (max-width: 860px) {
  .doc h1 {
    font-size: 24px;
    overflow-wrap: anywhere;
  }
  .doc p,
  .doc li {
    overflow-wrap: anywhere;
  }
}

/* A topic at a single level shows its level once, in the header */
.doc.one-level .sections > section > h2 .lvl {
  display: none;
}

/* Lanes: a page reads in one 820px column; once the content area is 1200px wide, its lanes take
   the full width and hold as many columns of at least --lane as fit. Each block goes, in order, to
   the top of the shortest column (grid-lanes; client.ts lays out the same placement on a grid of
   4px rows where grid-lanes is missing). --lane-gap spaces blocks within a column. */
.doc {
  max-width: 820px;
}
.lanes {
  --lane: 560px;
  --lane-gap: 0px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--lane)), 1fr));
  gap: var(--lane-gap) var(--lane-col-gap, 48px);
  align-items: start;
}
.lanes.js-lanes {
  grid-auto-rows: 4px;
  row-gap: 0;
}
@supports (display: grid-lanes) {
  .lanes {
    display: grid-lanes;
  }
}
@container (min-width: 1200px) {
  .doc:has(.lanes) {
    max-width: none;
  }
}
@keyframes lanes-shown {
  to {
    visibility: visible;
  }
}

/* Topic rail: On this page and Up next, beside the content once the window is 1400px wide */
.rail {
  display: none;
}
@media (min-width: 1400px) {
  .rail {
    display: block;
    position: sticky;
    top: 53px;
    height: calc(100vh - 53px);
    overflow-y: auto;
    padding: 28px 20px 40px 0;
  }
}
.rail h4 {
  margin: 0 0 8px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}
.next {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
}
.next:hover {
  box-shadow: inset 0 0 0 1px var(--border);
}
.next strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.3;
}
.next .summary {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.sections > .part {
  scroll-margin-top: 72px;
}

/* The frame: pages that draw their own body (layout.ts body, html[data-frame]) sit on a grouped background in
   the iOS greys, with glass buttons over them and an up button to the parent page in the top corner */
html[data-frame] {
  --pg-bg: #f2f2f7;
  --pg-fill: rgba(118, 118, 128, 0.12);
  --pg-sep: rgba(60, 60, 67, 0.29);
  --pg-chev: rgba(60, 60, 67, 0.3);
  --pg-on-accent: #ffffff;
  --pg-on-accent-fill: rgba(255, 255, 255, 0.22);
  --glass-bg: rgba(250, 250, 252, 0.92);
  --glass-border: rgba(0, 0, 0, 0.06);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
@media (prefers-color-scheme: dark) {
  html[data-frame]:not([data-theme="light"]) {
    --pg-bg: #000000;
    --pg-fill: rgba(118, 118, 128, 0.24);
    --pg-sep: rgba(84, 84, 88, 0.6);
    --pg-chev: rgba(235, 235, 245, 0.3);
    --pg-on-accent: #10131a;
    --pg-on-accent-fill: rgba(16, 19, 26, 0.16);
    --glass-bg: rgba(40, 40, 44, 0.92);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}
html[data-frame][data-theme="dark"] {
  --pg-bg: #000000;
  --pg-fill: rgba(118, 118, 128, 0.24);
  --pg-sep: rgba(84, 84, 88, 0.6);
  --pg-chev: rgba(235, 235, 245, 0.3);
  --pg-on-accent: #10131a;
  --pg-on-accent-fill: rgba(16, 19, 26, 0.16);
  --glass-bg: rgba(40, 40, 44, 0.92);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html[data-frame] body {
  margin: 0;
  background: var(--pg-bg);
  color: var(--text);
  font: 17px/1.35 var(--font);
}
/* Resets below every page's own rules, which set their margins and colours by class */
:where(html[data-frame]) :where(h1, h2, p) {
  margin: 0;
}
:where(html[data-frame]) a {
  color: var(--accent);
  text-decoration: none;
}
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  border: 0.5px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.pg-up {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--text) !important;
}
.pg-up:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The missing page (pages/home.ts notFoundPage): a 404 whose 0 is the languages glyph, the heading, the
   title in the other languages as a soft line, and a chip per language leading to its home page */
html[data-page="404"] {
  --nf-d: 210px;
}
.nf-main {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 1000px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 88px 32px 56px;
  text-align: center;
}
.nf-num {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  line-height: 1;
  transform: rotate(-3deg);
}
.nf-four {
  display: block;
  font-size: var(--nf-d);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.nf-zero {
  position: relative;
  top: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: calc(var(--nf-d) * 0.72);
  height: calc(var(--nf-d) * 0.72);
  margin: 0 calc(var(--nf-d) * 0.03);
  border: calc(var(--nf-d) * 0.1224) solid var(--accent);
  border-radius: 999px;
}
.nf-zero svg {
  display: block;
  width: calc(var(--nf-d) * 0.36);
  height: calc(var(--nf-d) * 0.36);
}
.nf-heading {
  margin-top: 26px !important;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.nf-others {
  max-width: 640px;
  margin-top: 14px !important;
  font-size: 15px;
  line-height: 1.7;
  color: var(--muted);
}
.nf-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 900px;
  margin-top: 28px;
}
.nf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text) !important;
  font-size: 15px;
}
.nf-chip:hover {
  filter: brightness(0.96);
}
.nf-chip b {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.nf-chip.here {
  background: var(--accent);
  color: var(--pg-on-accent) !important;
}
.nf-chip.here b {
  background: var(--pg-on-accent-fill);
  color: var(--pg-on-accent);
}
.nf-chip.here:hover {
  filter: brightness(1.08);
}
.nf-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 860px) {
  html[data-page="404"] {
    --nf-d: 128px;
  }
  .nf-main {
    padding: 96px 20px 32px;
  }
  .nf-others {
    font-size: 14px;
    line-height: 1.6;
  }
  .nf-chips {
    gap: 7px;
  }
  .nf-chip {
    font-size: 14px;
  }
}

/* The narrowest phones (375px and below): the 404 and the chips shrink so the page keeps to one screen */
@media (max-width: 400px) {
  html[data-page="404"] {
    --nf-d: 104px;
  }
  .nf-main {
    padding: 84px 16px 24px;
  }
  .nf-heading {
    margin-top: 20px !important;
    font-size: 26px;
  }
  .nf-others {
    margin-top: 10px !important;
    font-size: 13px;
    line-height: 1.5;
  }
  .nf-chips {
    gap: 6px;
    margin-top: 20px;
  }
  .nf-chip {
    gap: 6px;
    padding: 5px 12px 5px 6px;
    font-size: 13px;
  }
  .nf-chip b {
    font-size: 10px;
    padding: 2px 6px;
  }
}

/* The Home (pages/home.ts) in the frame (frame.css): the brand and a card per language to learn: its flag and name,
   "Up to" with its top level, and the "Explained in" line (xl-line) */
html[data-frame] {
  --hm-bg: #f2f2f7;
  --hm-fill: rgba(118, 118, 128, 0.12);
  --hm-sep: rgba(60, 60, 67, 0.18);
  --hm-body: #3c3c43;
  --hm-on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  html[data-frame]:not([data-theme="light"]) {
    --hm-bg: #000000;
    --hm-fill: rgba(118, 118, 128, 0.24);
    --hm-sep: rgba(84, 84, 88, 0.6);
    --hm-body: rgba(235, 235, 245, 0.75);
    --hm-on-accent: #10131a;
  }
}
html[data-frame][data-theme="dark"] {
  --hm-bg: #000000;
  --hm-fill: rgba(118, 118, 128, 0.24);
  --hm-sep: rgba(84, 84, 88, 0.6);
  --hm-body: rgba(235, 235, 245, 0.75);
  --hm-on-accent: #10131a;
}
html[data-frame] [hidden] {
  display: none !important;
}
html[data-page="home"] a {
  color: inherit;
  text-decoration: none;
}

/* The Home and the course index span the window, 20px from each side */
.hm-main {
  padding: 20px 20px 40px;
}
.hm-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.hm-brand svg {
  display: block;
  border-radius: 7px;
}

/* Courses: a card per language to learn; its name is a link stretched over the whole card, the "Explained in" line above it */
.hm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 16px;
  align-items: start;
}
.hm-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 22px;
  background: var(--surface);
}
.hm-course {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hm-course-a {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text);
}
.hm-flag {
  font-size: 30px;
  line-height: 1;
}
.hm-name {
  margin: 0;
  flex-grow: 1;
  min-width: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hm-course-a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
}
.hm-upto {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.hm-pill {
  --badge-pad: 0 7px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
}
.hm-row .lvm {
  flex-shrink: 0;
  margin: 0;
}
/* The "Explained in" line (xl-line, languages-lines.css) sits above the card's link */
.hm-explained {
  position: relative;
  z-index: 1;
}
.hm-course-a:focus-visible {
  outline: none;
}
.hm-course-a:focus-visible::after {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.hm-row:focus-visible,
.hm-close:focus-visible,
.hm-more:focus-visible,
.hm-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Courses none of the reader's languages explains sit under their own heading (client-languages-lines.ts); a search
   leaves them out */
.hm-home .xl-other .hm-grid {
  margin-top: 0;
}
html.hm-query .hm-home .xl-other {
  display: none;
}
/* Close ends a search, so the field carries no clear button of its own */
.hm-home .hm-clear {
  display: none;
}

/* The Home's search results (pages/home.ts, client-home.ts): "Topics · N" under the filters, then the results in one
   card; the view for no results, with four topics to try in the same card. */
.hm-heading {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.hm-rows {
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
}
/* A result: its title a link over the whole row, its level mark a button above it, its caption and its lead */
.hm-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
}
.hm-row + .hm-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 0.5px;
  background: var(--hm-sep);
}
.hm-row:hover {
  background: var(--hm-fill);
}
.hm-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hm-row-a {
  flex-grow: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm-row-a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.hm-row .lvm-b {
  position: relative;
  z-index: 1;
}
/* A result's mark shows every level its topic holds, whatever level the filter stops at */
.hm-row .lvm > i.on {
  opacity: 1 !important;
}
.hm-row-flag {
  margin-right: 8px;
}
.hm-row-cap,
.hm-row-text {
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}
.hm-row-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-row-text b {
  font-weight: 700;
  color: var(--text);
}
/* No results: centred under the filters, the query named, then "Try one of these" over four topics */
.hm-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 420px;
  margin: 56px auto 0;
  padding: 0 20px;
  text-align: center;
}
.hm-none[hidden] {
  display: none;
}
.hm-none-i {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
}
.hm-none-t {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
}
.hm-none-s {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--muted);
}
.hm-sugg {
  margin-top: 40px;
}
.hm-sugg .hm-heading {
  margin-bottom: 12px;
}
@media (min-width: 861px) {
  /* On a wide screen a result has a 17px title that wraps beside its flag, a 15px lead in the body colour, the hit on a soft accent */
  .hm-row {
    gap: 5px;
    padding: 14px 16px;
  }
  .hm-row-a {
    display: flex;
    align-items: flex-start;
    font-size: 17px;
    line-height: 22px;
    white-space: normal;
    overflow: visible;
  }
  .hm-row-flag {
    flex-shrink: 0;
  }
  .hm-row-text {
    font-size: 15px;
    line-height: 1.35;
    color: var(--hm-body);
  }
  .hm-row-text b {
    padding: 0 1px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    font-weight: 650;
  }
}

/* The filters of the Home's search (search-filters.ts, client-search-filters.ts): chips 34px high on the fill,
   wrapping onto a second line when needed; a chosen one fills with the accent and shows ✕ in place of its chevron;
   a chip's menu opens under it. */
.hm-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}
.hm-fchip {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--hm-fill);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
}
.hm-fchip[hidden] {
  display: none;
}
.hm-fchip-l {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hm-fchip[aria-pressed="true"] {
  background: var(--accent);
  color: #ffffff;
}
.hm-fchip-clear,
.hm-fchip[aria-pressed="true"] .hm-fchip-open {
  display: none;
}
.hm-fchip[aria-pressed="true"] .hm-fchip-clear {
  display: block;
}
.hm-fmenu {
  right: auto;
  width: 280px;
}
.hm-fmenu a.ix-item {
  color: inherit;
  text-decoration: none;
}

/* The Home's toolbar (pages/home.ts, client-home.ts) */
/* The toolbar: glass on its controls, the content solid */
.hm-bar {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hm-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 260px;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 17px;
  transition: width 0.2s ease;
}
.hm-search input {
  flex: 1;
  width: 0;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--text);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.hm-search input::placeholder {
  color: var(--muted);
  opacity: 1;
}
.hm-search input::-webkit-search-cancel-button,
.hm-search input::-webkit-search-decoration {
  -webkit-appearance: none;
}
.hm-clear {
  display: flex;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hm-group {
  position: relative;
  display: flex;
  height: 44px;
  border-radius: 999px;
  color: var(--text);
}
.hm-close {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
}
.hm-searching .hm-search {
  width: 420px;
  max-width: calc(100vw - 100px);
}
.hm-searching .hm-group {
  display: none;
}
.hm-searching .hm-close {
  display: flex;
}

/* The Home on a wide screen (pages/home.ts): the header line holds the brand, the search centred up to 520 wide and
   More, which is fixed at the top right; the cards stand in two columns, three from 1280px; the results in a column of
   664px centred under the field */
@media (min-width: 1024px) {
  .hm-home {
    max-width: 1120px;
    margin: 0 auto;
    padding: 20px 32px 56px;
  }
  .hm-home .hm-brand {
    margin: 0;
  }
  .hm-home .hm-main {
    padding: 0;
  }
  .hm-home .hm-head {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 48px;
    padding-right: 180px;
  }
  .hm-home .hm-bar {
    position: static;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
  .hm-home .hm-mid {
    display: flex;
    width: 100%;
    max-width: 520px;
    gap: 12px;
  }
  .hm-home .hm-search,
  html.hm-searching .hm-home .hm-search {
    flex: 1;
    width: auto;
    max-width: none;
  }
  .hm-home .hm-close {
    width: 50px;
    height: 44px;
  }
  .hm-home .ix-search-open {
    display: none;
  }
  .hm-home .hm-group {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 30;
    height: 44px;
  }
  html.hm-searching .hm-home .hm-group {
    display: flex;
  }
  html.hm-query .hm-home .hm-main {
    padding-top: 24px;
  }
  .hm-home .hm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 28px;
  }
  .hm-home .hm-results {
    max-width: 664px;
    margin: 0 auto;
  }
  .hm-home .hm-none {
    margin-top: 72px;
  }
}
@media (min-width: 1280px) {
  .hm-home .hm-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The Home on phones and tablets narrower than 1024px (pages/home.ts): the brand heads the page and the bar floats at
   the bottom, More at the left and Search at the right, the field and Close taking the bar while searching, over a
   fade of the page's colour; a query takes the brand off the page and the filters lead it */
@media (max-width: 1023px) {
  .hm-home {
    max-width: 1120px;
    margin: 0 auto;
    padding: 16px 20px 130px;
  }
  .hm-home .hm-head {
    display: flex;
    align-items: center;
  }
  .hm-home .hm-brand {
    margin: 0;
  }
  .hm-home .hm-main {
    padding: 0;
  }
  .hm-home .hm-grid {
    margin-top: 20px;
  }
  .hm-home .hm-bar {
    top: auto;
    left: 16px;
    right: 16px;
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
    justify-content: space-between;
  }
  .hm-home .hm-mid {
    display: none;
    flex: 1;
    min-width: 0;
    gap: 10px;
  }
  .hm-home .hm-search {
    flex: 1;
    width: auto;
    height: 48px;
  }
  .hm-home .hm-close {
    width: 52px;
    height: 48px;
  }
  .hm-home .hm-group {
    height: 48px;
  }
  .hm-home .hm-more-menu {
    right: 16px;
    left: auto;
  }
  .hm-home .ix-search-open {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 48px;
    padding: 0;
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
  }
  html.hm-searching .hm-home .hm-mid {
    display: flex;
  }
  html.hm-searching .hm-home .hm-group,
  html.hm-searching .hm-home .ix-search-open {
    display: none;
  }
  html.hm-searching .hm-home .hm-bar {
    bottom: max(30px, calc(var(--hm-kb, 0px) + 10px));
  }
  html.hm-searching .hm-home .hm-main {
    padding-bottom: calc(var(--hm-kb, 0px) + 110px);
  }
  .hm-home::after {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    height: 130px;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--hm-bg) 85%, transparent) 60%);
    pointer-events: none;
  }
  /* A query takes the page's brand off a phone, the filters leading the page; no results sit 72px under them */
  html.hm-query .hm-home .hm-brand {
    display: none;
  }
  html.hm-query .hm-home .hm-main {
    padding-top: 0;
  }
  html.hm-query .hm-home .hm-none {
    margin-top: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hm-search {
    transition: none;
  }
}

/* A course (pages/track.ts, pages/topic.ts) in the frame: its colours, the head of the topics column, the grouping
   and the headings of the topics' lists. The column's frame is track-topic.css, its rows track-rows.css */
html[data-frame] {
  --ix-sep: rgba(60, 60, 67, 0.29);
  --ix-chev: rgba(60, 60, 67, 0.45);
  --ix-seg-on: #ffffff;
  --ix-seg-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  --ix-menu-bg: rgba(250, 250, 252, 0.94);
  --ix-menu-sub: rgba(60, 60, 67, 0.6);
  --ix-band: rgba(118, 118, 128, 0.12);
  --ix-fade: rgba(242, 242, 247, 0.85);
}
@media (prefers-color-scheme: dark) {
  html[data-frame]:not([data-theme="light"]) {
    --ix-sep: rgba(84, 84, 88, 0.65);
    --ix-chev: rgba(235, 235, 245, 0.4);
    --ix-seg-on: #636366;
    --ix-seg-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    --ix-menu-bg: rgba(44, 44, 48, 0.94);
    --ix-menu-sub: rgba(235, 235, 245, 0.6);
    --ix-band: rgba(118, 118, 128, 0.24);
    --ix-fade: rgba(0, 0, 0, 0.85);
  }
}
html[data-frame][data-theme="dark"] {
  --ix-sep: rgba(84, 84, 88, 0.65);
  --ix-chev: rgba(235, 235, 245, 0.4);
  --ix-seg-on: #636366;
  --ix-seg-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  --ix-menu-bg: rgba(44, 44, 48, 0.94);
  --ix-menu-sub: rgba(235, 235, 245, 0.6);
  --ix-band: rgba(118, 118, 128, 0.24);
  --ix-fade: rgba(0, 0, 0, 0.85);
}
html:is([data-page="track"], [data-page="topic"]) a {
  color: inherit;
  text-decoration: none;
}

/* The head (course-column.ts): the toolbar line (Home, Level and Group as icon buttons), the course's title on its own
   line, "66 topics · Explained in: English ›". A phone: Home, the title and the count share a row, the line under it
   (track-phone.css). While the field searches, the toolbar line gives way: Home beside the title, the count out */
.cl-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "home . tools"
    "name name name"
    "line line line";
  align-items: center;
}
.cl-home,
.cl-back {
  grid-area: home;
}
.cl-head :is(.cl-back, .cl-topic, .cl-count) {
  display: none;
}
.cl-tools {
  grid-area: tools;
  height: 44px;
}
.cl-name {
  grid-area: name;
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 16px 0 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cl-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ix-flag {
  margin-right: 8px;
}
.cl-topic {
  grid-area: name;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cl-line {
  grid-area: line;
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--muted);
}
.cl-line .xl-line {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cl-line .xl-line b {
  font-weight: 600;
  color: var(--text);
}
.cl-line .xl-line::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--cl-chev, 8px);
  vertical-align: -2px;
  background: var(--ix-chev);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5L6.5 7l-5 5.5'/%3E%3C/svg%3E")
    center / 8px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5L6.5 7l-5 5.5'/%3E%3C/svg%3E")
    center / 8px 14px no-repeat;
}
.cl-line .xl-line:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ix-count {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--muted);
}

/* The grouping: the list of the chosen order shows */
.ix-flow[data-order="path"],
html[data-order="path"] .ix-flow[data-order="categories"] {
  display: none;
}
html[data-order="path"] .ix-flow[data-order="path"] {
  display: block;
}
.ix-sec {
  break-inside: avoid;
  margin-bottom: 28px;
}
.ix-h {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px 20px;
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.45px;
  break-after: avoid;
}
.ix-ht {
  flex-grow: 1;
  min-width: 0;
}
.ix-num {
  margin-right: 10px;
  font:
    600 17px ui-monospace,
    Menlo,
    monospace;
  letter-spacing: -0.02em;
  color: var(--muted);
}
.ix-h:has(.lvm) {
  align-items: center;
}
.ix-h .lvm {
  margin: 0;
}
/* A level's heading on the study path: its mark and name; each heading ends with its count */
.ix-lv-name {
  flex-grow: 1;
  min-width: 0;
}
.ix-sec-n {
  font-weight: inherit;
}

/* A course's topics: inset lists, a row per topic with its title and a chevron (track-parts.ts); the topic the page
   shows is tinted, its title in the accent colour */
.ix-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
}
.ix-rows li {
  position: relative;
}
.ix-rows li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 20px;
  height: 0.5px;
  background: var(--ix-sep);
}
.ix-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  box-sizing: border-box;
  padding: 0 16px 0 20px;
}
/* The topic's link covers the row */
.ix-cover {
  display: flex;
  flex-grow: 1;
  min-width: 0;
  color: inherit;
}
.ix-cover::after {
  content: "";
  position: absolute;
  inset: 0;
}
.ix-row:has(.ix-cover:hover) {
  background: var(--hm-fill);
}
.ix-cover:focus-visible,
.ix-up:focus-visible,
.ix-btn:focus-visible,
.ix-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ix-name {
  flex-grow: 1;
  min-width: 0;
  padding: 14px 0;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
}
.ix-chev {
  flex-shrink: 0;
  color: var(--ix-chev);
}
/* Show more (track-more.ts): the last row of a list the chosen level partly hides, a topic row tall, its count in the
   accent colour and the next level's pill at the end; the level filter shows the row of the level chosen (levels.css) */
.ix-more,
.ix-sec-more {
  display: none;
}
.ix-sec-more {
  break-inside: avoid;
  margin-bottom: 28px;
}
.ix-more-b {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 52px;
  padding: 0 16px 0 20px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ix-more-b:hover {
  background: var(--hm-fill);
}
.ix-more-b:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.ix-more-t {
  flex-grow: 1;
  min-width: 0;
  padding: 14px 0;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
}
.ix-more .badge {
  --badge-pad: 0 7px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}
.ix-more .lvl > .half {
  opacity: 1 !important;
}
.ix-rows li[data-current] .ix-row {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}
.ix-rows li[data-current] .ix-name {
  color: var(--accent);
  font-weight: 600;
}

/* A course's up link, toolbar buttons and menus (course-column.ts, track-parts.ts) */
/* The up link: a glass circle starting the head (track.css) */
.ix-up {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--text);
}

/* The toolbar's own buttons beside the Home's: the level and the variety, in the group's style */
.ix-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 17px;
  white-space: nowrap;
  cursor: pointer;
}

/* Menus: glass, radius 22, grown from the toolbar (below it from 1024px) */
.ix-menu {
  position: fixed;
  inset: auto;
  top: 74px;
  right: 20px;
  box-sizing: border-box;
  width: 320px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 100px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0.5px solid var(--glass-border);
  border-radius: 22px;
  background: var(--ix-menu-bg);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  color: var(--text);
}
.ix-menu-variety {
  width: 240px;
}
.ix-hint {
  margin: 0;
  padding: 12px 16px 10px 40px;
  font-size: 13px;
  line-height: 17px;
  color: var(--ix-menu-sub);
}
.ix-band {
  height: 8px;
  background: var(--ix-band);
}
.ix-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 16px 11px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ix-item:hover {
  background: var(--hm-fill);
}
.ix-hint + .ix-item::before,
.ix-item + .ix-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 0.5px;
  background: var(--ix-sep);
}
.ix-tick {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 18px;
  visibility: hidden;
}
.ix-item[aria-checked="true"] .ix-tick {
  visibility: visible;
}
.ix-text {
  flex-grow: 1;
  min-width: 0;
}
.ix-title {
  display: block;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
}
.ix-sub {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  line-height: 17px;
  color: var(--ix-menu-sub);
}
.ix-item .badge {
  --badge-pad: 0 7px;
  flex-shrink: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}
.ix-fade {
  display: none;
}

/* A level the course or topic lacks */
.ix-item[data-absent] .ix-title {
  color: var(--muted);
}
.ix-item[data-absent] .badge {
  opacity: 0.55;
}

/* Group by: a heading and the two groupings, under the head's toolbar line (at the bar's right while the field searches) */
.ix-menu-group {
  top: 72px;
  right: auto;
  left: 20px;
  width: 240px;
  padding: 4px 0;
}
html.hm-searching .ix-menu-group {
  right: 20px;
  left: auto;
}
.ix-menu-h {
  margin: 10px 16px 4px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ix-menu-group .ix-item {
  min-height: 48px;
}
.ix-menu-group .ix-tick {
  color: var(--accent);
}
.ix-btn[aria-expanded="true"] {
  background: var(--hm-fill);
}
.ix-menu-group .ix-menu-h + .ix-item::before {
  display: none;
}
.ix-menu-group .ix-item + .ix-item::before {
  left: 42px;
}

/* A course on phones (below 1024px): the index is one column, the title row (Home, the course, the count), the line, the
   topics, and the toolbar at the bottom: Level, Variety, Group and More as icons in one glass bar, a fade under it, and
   the round Search button at the right end, which opens the field across the bar with Close. The bar hides while the
   reader scrolls down (the public client sets html.bar-hidden). A topic page keeps the bar and the results alone of the
   column. The reading is topic-phone.css's */
@media screen and (max-width: 1023px) {
  .cl[data-cl="track"] .cl-main {
    display: none;
  }
  .cl-side {
    padding: max(16px, calc(env(safe-area-inset-top) + 8px)) 20px 130px;
  }
  .cl-head {
    grid-template-areas:
      "home name count"
      "line line line";
    column-gap: 12px;
  }
  .cl-name {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
  }
  .cl-head .cl-count {
    display: block;
    grid-area: count;
  }
  .cl-line {
    margin: 2px 0 18px 56px;
  }
  .cl-n,
  .cl-dot,
  .cl-tools {
    display: none;
  }
  .cl-list {
    margin-top: 0;
  }
  .ix-btn {
    width: 52px;
    padding: 0;
  }
  .ix-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ix-menu {
    top: auto;
    right: 16px;
    bottom: calc(max(12px, calc(env(safe-area-inset-bottom) + 8px)) + 62px);
    width: 300px;
    max-height: calc(100vh - 180px);
  }
  .ix-menu-variety,
  .ix-menu-group {
    left: 16px;
    right: auto;
  }
  .ix-menu-variety {
    bottom: calc(max(12px, calc(env(safe-area-inset-bottom) + 8px)) + 88px);
    width: 300px;
  }
  .ix-menu-group {
    width: 240px;
  }
  .hm-more-menu {
    left: 16px;
    right: auto;
    top: auto;
    bottom: calc(max(12px, calc(env(safe-area-inset-bottom) + 8px)) + 62px);
  }
  .cl-nav {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
    z-index: 30;
    justify-content: space-between;
    gap: 10px;
    transition: transform 0.25s ease;
  }
  .cl-bar {
    height: 48px;
  }
  .cl-bar .hm-more {
    display: flex;
    width: 52px;
  }
  .cl-nav .hm-search {
    display: none;
  }
  html.hm-searching .cl-nav .hm-search {
    display: flex;
    flex: 1;
    width: auto;
    height: 48px;
  }
  html.hm-searching .cl-nav .hm-close {
    display: flex;
    width: 48px;
    height: 48px;
  }
  html.hm-searching .cl-bar {
    display: none;
  }
  html .cl-nav .ix-search-open {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 48px;
    padding: 0;
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
  }
  html.hm-searching .cl-nav .ix-search-open {
    display: none;
  }
  html.hm-searching .cl-nav {
    bottom: max(30px, calc(var(--hm-kb, 0px) + 10px));
  }
  .ix-fade {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    height: 130px;
    background: linear-gradient(to bottom, transparent, var(--ix-fade) 60%);
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  html.bar-hidden:not(.hm-searching) .cl-nav:not(:has(:popover-open)) {
    transform: translateY(calc(100% + 60px));
  }
  html.bar-hidden:not(.hm-searching) .ix-fade {
    opacity: 0;
  }
  /* With a query the filters lead the page and the results sit above the field */
  html.hm-query .cl-head {
    display: none;
  }
  html.hm-query .cl-side {
    padding-top: 20px;
  }
  html.hm-searching .cl-side {
    padding-bottom: calc(var(--hm-kb, 0px) + 110px);
  }
  html.hm-query .cl-side .hm-none {
    margin-top: 72px;
  }
  /* A topic page: the column gives way to the reading, keeping the bar, the fade and the results */
  .cl[data-cl="topic"] .cl-side {
    display: contents;
  }
  .cl-top {
    display: contents;
  }
  .cl[data-cl="topic"] .cl-side > :not(.cl-top, .hm-results, .ix-fade),
  .cl[data-cl="topic"] .cl-head {
    display: none;
  }
  .cl[data-cl="topic"] .hm-results {
    padding: 20px 20px calc(var(--hm-kb, 0px) + 120px);
  }
  html.hm-query .cl[data-cl="topic"] .cl-main {
    display: none;
  }
}
@media screen and (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .cl-nav,
  .ix-fade {
    transition: none;
  }
}

/* A course's search field and glass bar (course-column.ts; client-home.ts sets html.hm-searching while the field is in
   use and html.hm-query once it holds a query). From 1024px the field and Close share a row under the head and the bar
   sits at the window's top right: Variety and More, with Level and Group too while the field searches. A phone shows
   the bar at the bottom, the round Search button at its right end opening the field across the bar (track-phone.css) */
.cl-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cl-nav .hm-close,
.cl-nav .ix-search-open,
.cl-nav .hm-clear {
  display: none;
}
@media (min-width: 1024px) {
  .cl-nav {
    margin-top: 14px;
  }
  html .cl-nav .hm-search {
    flex: 1;
    width: auto;
    max-width: none;
    height: 44px;
  }
  html.hm-searching .cl-nav .hm-close {
    display: flex;
  }
  .cl-tools .ix-btn {
    width: 50px;
    padding: 0;
  }
  .cl-tools .ix-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .cl-bar {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 30;
    height: 44px;
  }
  .cl-bar .cl-lv,
  .cl-bar .cl-gr {
    display: none;
  }
  html.hm-searching .cl-bar {
    display: flex;
  }
  html.hm-searching .cl-bar :is(.cl-lv, .cl-gr) {
    display: flex;
  }
  .cl-bar .hm-more {
    display: flex;
    width: 50px;
  }
  /* Searching: Home beside the title, the toolbar line and the count gone; a topic page shows Back to the course with the
     topic's title; the results take the list's place */
  html.hm-searching .cl-head {
    grid-template-areas:
      "home name"
      "line line";
    grid-template-columns: auto minmax(0, 1fr);
  }
  html.hm-searching :is(.cl-tools, .cl-n, .cl-dot) {
    display: none;
  }
  html.hm-searching .cl-name {
    margin: 0 0 0 12px;
  }
  html.hm-searching .cl[data-cl="topic"] :is(.cl-home, .cl-name, .cl-line) {
    display: none;
  }
  html.hm-searching .cl[data-cl="topic"] .cl-back {
    display: flex;
  }
  html.hm-searching .cl[data-cl="topic"] .cl-topic {
    display: block;
    margin-left: 12px;
  }
  html.hm-query .cl-side .hm-results {
    padding-top: 16px;
  }
  .cl-side .hm-none {
    margin-top: 72px;
  }
}

/* A course's two columns (course-column.ts, pages/track.ts, pages/topic.ts). From 1024px the topics column sticks to the
   window's left, 248px wide with the compact scale (rows 15, the line 13; the course title 28 at every width), 320px from 1280px at full size,
   with its own scroll; the page's reading takes the rest and scrolls with the window. Below 1024px the page is one
   column: the course index alone, or the topic's reading (track-phone.css, topic-phone.css) */
.cl-side {
  --cl-up: 40px;
  --cl-name: 28px;
  --cl-name-lh: 34px;
  --cl-line: 13px;
  --cl-line-lh: 18px;
  --cl-h: 17px;
  --cl-h-lh: 22px;
  --cl-h-x: 16px;
  --cl-n: 13px;
  --cl-pad: 16px;
  --cl-row: 15px;
  --cl-row-lh: 20px;
  --cl-row-ls: -0.3px;
  box-sizing: border-box;
}
.cl-choose {
  display: none;
}
@media (min-width: 1024px) {
  /* The head and the search stay at the top of the column while the topics scroll under them */
  .cl-top {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 calc(var(--cl-pad) * -1 + 1px) 0 calc(var(--cl-pad) * -1);
    padding: var(--cl-pad) calc(var(--cl-pad) - 1px) 14px var(--cl-pad);
    background: var(--pg-bg);
  }
  .cl {
    display: flex;
    align-items: flex-start;
  }
  .cl-side {
    position: sticky;
    top: 0;
    z-index: 5;
    --cl-chev: 2px;
    flex: none;
    width: 248px;
    height: 100vh;
    height: 100dvh;
    padding: 0 var(--cl-pad) 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    box-shadow: inset -0.5px 0 0 var(--pg-sep);
  }
  .cl-main {
    flex: 1;
    min-width: 0;
  }
  .cl-side .ix-up {
    width: var(--cl-up);
    height: var(--cl-up);
  }
  .cl-name {
    font-size: var(--cl-name);
    line-height: var(--cl-name-lh);
  }
  .cl-line {
    font-size: var(--cl-line);
    line-height: var(--cl-line-lh);
  }
  .cl-side .ix-h {
    margin-left: var(--cl-h-x);
    font-size: var(--cl-h);
    line-height: var(--cl-h-lh);
  }
  .cl-side .ix-sec-n {
    font-size: var(--cl-n);
  }
  .cl-side .ix-row,
  .cl-side .ix-more-b {
    padding: 0 var(--cl-row-r, 12px) 0 var(--cl-h-x);
  }
  .cl-side .ix-rows li + li::before {
    left: var(--cl-h-x);
  }
  .cl-side .ix-name,
  .cl-side .ix-more-t {
    font-size: var(--cl-row);
    line-height: var(--cl-row-lh);
    letter-spacing: var(--cl-row-ls);
  }
  /* "Choose a topic" fills the reading's window until a topic is chosen */
  .cl-choose {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 40px;
    text-align: center;
    color: var(--muted);
  }
  .cl-choose-t {
    margin: 6px 0 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    color: var(--text);
  }
  .cl-choose-s {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
  }
}
@media (min-width: 1280px) {
  .cl-side {
    --cl-up: 44px;
    --cl-line: 15px;
    --cl-line-lh: 20px;
    --cl-h: 20px;
    --cl-h-lh: 25px;
    --cl-h-x: 20px;
    --cl-n: 15px;
    --cl-pad: 20px;
    --cl-chev: 8px;
    --cl-row: 17px;
    --cl-row-lh: 22px;
    --cl-row-ls: -0.43px;
    --cl-row-r: 16px;
    width: 320px;
  }
}

/* The menus of the toolbars (toolbar.ts): More (client-more.ts) holds Languages I know, Theme, Credits and the brand's
   pages, 260px wide */
.hm-more[aria-expanded="true"] {
  background: var(--hm-fill);
}
.ix-menu-theme {
  width: 260px;
}
/* More ends every toolbar: its menu opens under it at the top right, upward from the bottom bar on a phone */
.hm-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.hm-more-menu {
  width: 260px;
  padding: 4px 0;
}
.hm-more-menu .ix-item {
  min-height: 48px;
  padding: 8px 16px 8px 12px;
  color: inherit;
  text-decoration: none;
}
.hm-more-menu .ix-item + .ix-item::before {
  left: 42px;
}
.hm-back {
  color: var(--accent);
}
.hm-back .ix-tick {
  visibility: visible;
}
@media (max-width: 1023px) {
  .hm-more {
    width: 52px;
  }
  .hm-more-menu {
    top: auto;
    left: auto;
    right: 16px;
    bottom: calc(max(12px, calc(env(safe-area-inset-bottom) + 8px)) + 62px);
  }
}

/* The credits page (pages/credits.ts) in the frame: the product's card, its links and the grouped cards in one
   centred column of at most 680px on every screen, the Home button sharing the heading's row */
.cr-main {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 20px 56px;
}
.cr-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 16px;
}
.cr-head .pg-up {
  position: static;
  flex-shrink: 0;
}
.cr-heading {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cr-card {
  background: var(--surface);
  border-radius: 22px;
  overflow: hidden;
}
.cr-h2 {
  margin: 28px 0 8px 4px !important;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cr-app {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 16px;
}
.cr-mark {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}
.cr-mark svg {
  display: block;
}
.cr-name {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
}
.cr-tag {
  margin-top: 3px !important;
  font-size: 15px;
  line-height: 1.3;
  color: var(--muted);
}
.cr-version {
  margin: 8px 16px 0 !important;
  font-size: 13px;
  color: var(--muted);
}
.cr-links {
  margin-top: 16px;
}

/* Rows: a tile, a title with its description, a value and the trailing mark; the separator starts at the title */
.cr-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  line-height: 22px;
  color: var(--text) !important;
}
.cr-row + .cr-row::before {
  content: "";
  position: absolute;
  left: 58px;
  right: 0;
  top: 0;
  height: 0.5px;
  background: var(--pg-sep);
}
.cr-row:hover {
  background: var(--pg-fill);
}
.cr-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--pg-fill);
  color: var(--accent);
}
.cr-tile svg {
  display: block;
}
.cr-text {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}
.cr-sub {
  font-size: 15px;
  line-height: 20px;
  color: var(--muted);
}
.cr-row:has(.cr-value) .cr-text {
  flex: 0 0 auto;
  white-space: nowrap;
}
.cr-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--muted);
}
.cr-trail {
  display: flex;
  flex-shrink: 0;
  color: var(--pg-chev);
}
.cr-trail svg {
  display: block;
}

/* The credits page's cards: the authors, how to credit with the copy button, the note and the closing line */
.cr-people {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
}
.cr-people p {
  line-height: 1.35;
}
.cr-how {
  padding: 14px 16px;
}
.cr-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 12px 11px 14px;
  border-radius: 12px;
  background: var(--pg-fill);
}
.credit-line {
  flex-grow: 1;
  min-width: 0;
  font:
    500 14px/1.4 ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  overflow-wrap: anywhere;
  user-select: all;
}
.cr-copy {
  position: relative;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--accent);
  cursor: pointer;
}
.cr-copy svg {
  display: block;
}
.cr-copy .cr-copy-done {
  display: none;
}
.cr-copy.done .cr-copy-on {
  display: none;
}
.cr-copy.done .cr-copy-done {
  display: block;
}
.cr-changes {
  margin-top: 12px !important;
  line-height: 1.35;
}
.cr-note {
  margin: 8px 16px 0 !important;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.cr-lead {
  margin: 0 0 4px;
  font-size: 19px;
  line-height: 1.4;
  font-weight: 600;
}
.cr-card > .cr-para {
  padding: 14px 16px;
  line-height: 1.45;
}
.cr-card > .cr-para + .cr-para {
  padding-top: 0;
}
.cr-updated {
  margin: 20px 16px 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.cr-made {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 32px !important;
  font-size: 14px;
  color: var(--muted);
}
.cr-heart {
  flex-shrink: 0;
}
.cr-main a:focus-visible,
.cr-copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cr-row:focus-visible {
  outline-offset: -2px;
  border-radius: 22px;
}

@media (max-width: 400px) {
  .cr-value {
    font-size: 14px;
  }
  .cr-row {
    gap: 10px;
  }
  .cr-row:has(.cr-value) .cr-trail {
    display: none;
  }
}
@media (max-width: 860px) {
  .cr-main {
    padding-top: 16px;
  }
}

/* The Languages I know page (pages/languages.ts) in the credits' column (credits.css): the ranked list, the languages
   to add and, on the first-run page, Continue. A row holds every control and the list it sits in shows its own. */
.ml-intro {
  margin: 0 4px 14px;
  font-size: 17px;
  line-height: 24px;
  color: color-mix(in srgb, var(--text) 85%, var(--pg-bg));
}
.ml-mark {
  display: flex;
  flex-shrink: 0;
  line-height: 0;
}
.ml-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ml-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 16px;
  box-shadow: inset 0 -0.5px 0 var(--pg-sep);
  background: var(--surface);
}
.ml-row:last-child {
  box-shadow: none;
}
.ml-rank {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--pg-fill);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.ml-rank.ml-1 {
  background: var(--accent);
  color: #fff;
}
.ml-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  text-align: left;
}
.ml-name span {
  font-size: 17px;
  line-height: 22px;
}
.ml-name small {
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}
.ml-grip,
.ml-remove,
.ml-add {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}
.ml-grip {
  width: 36px;
  height: 36px;
  margin-right: -6px;
  color: var(--pg-chev);
  cursor: grab;
  touch-action: none;
}
.ml-remove {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--pg-fill);
  color: var(--muted);
}
.ml-add {
  order: -1;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #34c759;
  color: #fff;
}
.ml-grip:focus-visible,
.ml-remove:focus-visible,
.ml-add:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ml-ranked .ml-add,
.ml-others .ml-rank,
.ml-others .ml-remove,
.ml-others .ml-grip {
  display: none;
}
.ml-add:disabled,
.ml-remove:disabled,
.ml-grip:disabled {
  opacity: 0.4;
  cursor: default;
}
.ml-row.ml-lift {
  z-index: 2;
  border-radius: 14px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.18),
    0 0 0 0.5px var(--pg-sep);
  transform: translateY(var(--ml-dy, 0)) scale(1.03);
}
.ml-hint {
  margin: 8px 4px 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}
.ml-label {
  margin: 22px 4px 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.ml-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff !important;
  font-size: 17px;
  font-weight: 600;
}
.ml-foot {
  margin-top: 24px;
}
/* On a phone Continue rests at the foot of the screen, over a fade of the page's ground */
@media (max-width: 599px) {
  .ml-page[data-first] {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    box-sizing: border-box;
  }
  .ml-foot {
    position: sticky;
    bottom: 34px;
    margin: auto -20px 0;
    padding: 0 20px;
  }
  .ml-foot::before {
    content: "";
    position: absolute;
    inset: -40px 0 -34px;
    z-index: -1;
    background: linear-gradient(to bottom, transparent, var(--pg-bg) 60%);
  }
}

/* Where the reader's languages show in a page (client-languages-lines.ts): the "Explained in" line with its fallback
   mark, a course with none of the reader's languages, the Home's section for those courses, a topic's tag and the
   note of a topic in a fallback language. The chevron takes the board's shade on every page. */
:root {
  --xl-chev: rgba(60, 60, 67, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --xl-chev: rgba(235, 235, 245, 0.4);
  }
}
:root[data-theme="dark"] {
  --xl-chev: rgba(235, 235, 245, 0.4);
}
.xl-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  line-height: 20px;
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}
.xl-line b {
  font-weight: 600;
  color: var(--text);
}
.xl-line:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.xl-line::after {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-left: auto;
  background: var(--xl-chev);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.xl-fb {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--pg-fill);
  font-size: 12px;
  color: var(--muted);
}
.xl-source {
  color: var(--text);
}
.xl-dim {
  opacity: 0.48;
}
.xl-other[hidden] {
  display: none;
}
.xl-other h2 {
  margin: 28px 0 4px;
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
}
.xl-other p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}
/* A topic in another language than the course's: its code on the row and on the header */
[data-xl-tag] {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--pg-fill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}
[data-xl-tag][hidden] {
  display: none;
}
[data-xl-note] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--surface);
  font-size: 15px;
  line-height: 21px;
  color: var(--text);
}
[data-xl-note][hidden] {
  display: none;
}
[data-xl-note] p {
  margin: 0;
}
[data-xl-note] .xl-fb {
  margin-top: 1px;
}
.xl-change {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
}

/* The Explanation language sheet (client-languages-sheet.ts): a bottom sheet on a phone, a centred one of 460px on
   larger screens */
.xl-sheet {
  position: fixed;
  inset: auto 0 0;
  width: auto;
  max-width: none;
  max-height: calc(100dvh - 60px);
  margin: 0;
  padding: 8px 16px 34px;
  overflow-y: auto;
  border: 0;
  border-radius: 28px 28px 0 0;
  background: var(--pg-bg);
  color: var(--text);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.18);
}
.xl-sheet::backdrop {
  background: rgba(0, 0, 0, 0.28);
}
.xl-grab {
  display: block;
  width: 36px;
  height: 5px;
  margin: 0 auto 10px;
  border-radius: 3px;
  background: var(--pg-chev);
}
.xl-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin-bottom: 6px;
}
.xl-head h2 {
  flex: 1;
  margin: 0;
  font-size: 20px;
  line-height: 26px;
  font-weight: 700;
  text-align: center;
}
.xl-gap {
  width: 44px;
}
.xl-close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
}
.xl-course {
  margin: -4px 0 10px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.xl-sheet .ml-label {
  margin: 18px 4px 8px;
}
.xl-card {
  margin: 0;
}
.xl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 -0.5px 0 var(--pg-sep);
  background: var(--surface);
  font: inherit;
  color: var(--text);
  cursor: pointer;
}
.xl-row:last-child {
  box-shadow: none;
}
.xl-row:disabled {
  opacity: 0.48;
  cursor: default;
}
.xl-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.xl-tick {
  display: flex;
  flex-shrink: 0;
  color: var(--accent);
}
@media (min-width: 600px) {
  .xl-sheet {
    inset: 50% auto auto 50%;
    width: 460px;
    padding: 16px 16px 20px;
    border-radius: 24px;
    transform: translate(-50%, -50%);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  }
  .xl-grab {
    display: none;
  }
}

/* The level mark (level-mark.ts): seven bars in a grey capsule and the range in words; levels.css lights each level's
   bar in its colour and dims the bars above the level filter. The level popover it opens is level-popover.css. */
.lvm {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  box-sizing: border-box;
  padding: 4px 7px;
  border: 0;
  border-radius: 999px;
  background: var(--lvm-fill);
  color: inherit;
  font: inherit;
  line-height: 0;
  vertical-align: middle;
}
.lvm > i {
  display: block;
  width: 5px;
  height: 12px;
  border-radius: 2px;
  background: var(--lvm-off);
}
.lvm-sm {
  gap: 1.5px;
  padding: 3px 5px;
}
.lvm-sm > i {
  width: 4px;
  height: 9px;
  border-radius: 1.5px;
}
.lvm-t {
  margin-left: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 12px;
  letter-spacing: -0.1px;
  color: var(--lvm-text);
  white-space: nowrap;
}
.lvm-sm > .lvm-t {
  margin-left: 5px;
  font-size: 11px;
}
.lvm-b {
  cursor: pointer;
}
.lvm-b:hover {
  background: var(--lvm-hover);
}
.lvm-b[aria-expanded="true"] {
  box-shadow: 0 0 0 2px var(--accent);
}

/* The level popover (level-popover.ts, client-levels.ts): a glass panel under its mark on a wide screen, 380px wide;
   on a phone a sheet from the bottom, 8px from the edges, over a dimmed page, with a close button in its head */
.lv-pop {
  position: fixed;
  inset: auto;
  box-sizing: border-box;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0.5px solid var(--glass-border);
  border-radius: 22px;
  background: var(--ix-menu-bg, var(--glass-bg));
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  color: var(--text);
}
.lv-pop-x {
  display: none;
}
/* On a phone the page holds still while a popover, a menu or a sheet is open: a drag scrolls what is open, or nothing */
@media (max-width: 1023px) {
  html:has([popover]:popover-open) {
    overflow: hidden;
  }
  .lv-pop {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 80px);
  }
  .lv-pop::backdrop {
    background: var(--tp-back, rgba(0, 0, 0, 0.18));
  }
  .lv-pop-x {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 36px;
    height: 36px;
    margin: -4px -6px -4px 2px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--lvm-fill);
    color: inherit;
    cursor: pointer;
  }
}
.lv-pop-h {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 4px;
}
.lv-pop-t {
  flex-grow: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 22px;
  letter-spacing: -0.43px;
}
/* The head shows every level its element holds, whatever level the filter stops at */
.lv-pop .lvm > i.on,
.lv-pop .lvl > .half {
  opacity: 1 !important;
}
.lv-pop-r:empty {
  display: none;
}
.lv-pop .badge {
  --badge-pad: 0 7px;
  flex-shrink: 0;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}
.lv-pop-note {
  margin: 0;
  padding: 12px 16px 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--ix-menu-sub, var(--muted));
}
.lv-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding: 8px 16px 8px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.lv-row:hover {
  background: var(--hm-fill, var(--pg-fill));
}
.lv-pop-note + .lv-rows > .lv-row:first-child::before,
.lv-row + .lv-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 42px;
  right: 16px;
  height: 0.5px;
  background: var(--ix-sep, var(--pg-sep));
}
.lv-tick {
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  width: 18px;
  color: var(--accent);
  visibility: hidden;
}
.lv-row[aria-checked="true"] .lv-tick {
  visibility: visible;
}
.lv-text {
  flex-grow: 1;
  min-width: 0;
}
.lv-name {
  display: block;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
}
.lv-sub {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  line-height: 17px;
  color: var(--ix-menu-sub, var(--muted));
}
/* A level the element lacks */
.lv-off,
.lv-off:hover {
  background: transparent;
  cursor: default;
}
.lv-off .lv-name {
  color: var(--muted);
}
.lv-off .lv-sub {
  opacity: 0.6;
}
.lv-off .badge {
  opacity: 0.55;
}

/* A topic page (pages/topic.ts) in the frame: its colours, level pills and glass. Every rule holds on topic pages
   alone, :where() keeping its own specificity */
html[data-frame] {
  --tp-sec: rgba(60, 60, 67, 0.6);
  --tp-mute: rgba(60, 60, 67, 0.45);
  --tp-hair: rgba(60, 60, 67, 0.29);
  --tp-body: #3c3c43;
  --tp-caps: #6e6e73;
  --tp-note: rgba(118, 118, 128, 0.08);
  --tp-dash: rgba(60, 60, 67, 0.33);
  --tp-back: rgba(0, 0, 0, 0.18);
  --tp-current: rgba(47, 91, 211, 0.08);
  --tp-bad: #c2362f;
  --tp-good: #1c7d45;
}
@media (prefers-color-scheme: dark) {
  html[data-frame]:not([data-theme="light"]) {
    --tp-sec: rgba(235, 235, 245, 0.6);
    --tp-mute: rgba(235, 235, 245, 0.45);
    --tp-hair: rgba(84, 84, 88, 0.65);
    --tp-body: rgba(235, 235, 245, 0.85);
    --tp-caps: rgba(235, 235, 245, 0.55);
    --tp-note: rgba(118, 118, 128, 0.18);
    --tp-dash: rgba(235, 235, 245, 0.3);
    --tp-back: rgba(0, 0, 0, 0.5);
    --tp-current: rgba(126, 162, 255, 0.14);
    --tp-bad: #ff7a72;
    --tp-good: #5cc98a;
  }
}
html[data-frame][data-theme="dark"] {
  --tp-sec: rgba(235, 235, 245, 0.6);
  --tp-mute: rgba(235, 235, 245, 0.45);
  --tp-hair: rgba(84, 84, 88, 0.65);
  --tp-body: rgba(235, 235, 245, 0.85);
  --tp-caps: rgba(235, 235, 245, 0.55);
  --tp-note: rgba(118, 118, 128, 0.18);
  --tp-dash: rgba(235, 235, 245, 0.3);
  --tp-back: rgba(0, 0, 0, 0.5);
  --tp-current: rgba(126, 162, 255, 0.14);
  --tp-bad: #ff7a72;
  --tp-good: #5cc98a;
}

html[data-page="topic"] a {
  color: inherit;
  text-decoration: none;
}
html[data-page="topic"] button {
  font: inherit;
}
:where(html[data-page="topic"]) .tp-caps {
  margin: 0 0 8px 8px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tp-caps);
}
:where(html[data-page="topic"]) .tp-n {
  flex: none;
  font:
    600 17px ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  letter-spacing: -0.02em;
  color: var(--tp-mute);
}
:where(html[data-page="topic"]) .tp-chev {
  flex: none;
  color: var(--tp-mute);
}
:where(html[data-page="topic"]) .tp-card {
  position: relative;
  margin: 0 0 18px;
  border-radius: 22px;
  background: var(--surface);
  overflow: hidden;
}
:where(html[data-page="topic"]) a:focus-visible,
:where(html[data-page="topic"]) button:focus-visible,
:where(html[data-page="topic"]) summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Levels: one pill, or two joined halves */
html[data-page="topic"] .badge {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
  --badge-pad: 0 7px;
  flex: none;
}
html[data-page="topic"] .lvl {
  margin: 0;
}
html[data-page="topic"] .tp-li > .lvl,
html[data-page="topic"] .doc p > .lvl {
  margin: 0 8px 0 0;
  vertical-align: 2px;
}

/* The back links of a phone's title row (the head, topic-page.css) */
:where(html[data-page="topic"]) .tp-back {
  flex: none;
  color: var(--text);
}

/* The variety menu: 300px wide, under the bar's right edge on a wide screen (a phone: track-phone.css) */
:where(html[data-page="topic"]) .ix-menu-variety {
  width: 300px;
  padding: 4px 0;
}
:where(html[data-page="topic"]) .ix-menu-variety .ix-item {
  min-height: 48px;
}
:where(html[data-page="topic"]) .ix-menu-variety .ix-item + .ix-item::before {
  left: 42px;
}

/* The page: the lesson (the reading) in the course's right column (topic-wide.css), a head over its sections */
:where(html[data-page="topic"]) .tp-wrap {
  display: block;
}
:where(html[data-page="topic"]) .tp-col {
  min-width: 0;
}
:where(html[data-page="topic"]) .tp-outline {
  display: none;
}
:where(html[data-page="topic"]) .tp-head {
  min-width: 0;
}
:where(html[data-page="topic"]) .tp-main {
  min-width: 0;
  container-type: inline-size;
}
:where(html[data-page="topic"]) .tp-main .doc {
  max-width: none;
}
:where(html[data-page="topic"]) .tp-head .title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
}
:where(html[data-page="topic"]) .tp-head h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}
:where(html[data-page="topic"]) .tp-head .doc-head {
  margin: 0;
}
:where(html[data-page="topic"]) .tp-head .props {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  font-size: 15px;
  line-height: 22px;
  color: var(--tp-sec);
}
:where(html[data-page="topic"]) .tp-head .props > :not(:first-child)::before {
  content: "·";
  margin-right: 8px;
  color: var(--tp-mute);
}
:where(html[data-page="topic"]) .tp-head .props a.prop {
  color: var(--accent);
  text-decoration: none;
}
:where(html[data-page="topic"]) .tp-head .props .prop {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
:where(html[data-page="topic"]) .tp-head .props .prop svg {
  flex: none;
}
:where(html[data-page="topic"]) .tp-main .doc > blockquote:first-of-type {
  margin: 0;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: -0.43px;
  color: var(--tp-body);
}
:where(html[data-page="topic"]) .tp-main .doc > blockquote p {
  margin: 0;
}

/* Sections: a number, the title, the range pill. The head, the lead, the headings and a card's caption follow one
   another with no gap of their own; a block's bottom margin parts it from the next */
:where(html[data-page="topic"]) .tp-main .sections > .part {
  scroll-margin-top: 20px;
  min-width: 0;
}
:where(html[data-page="topic"]) .tp-main .doc h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.45px;
}
:where(html[data-page="topic"]) .tp-main .doc h2 .lvm {
  margin-left: auto;
}
:where(html[data-page="topic"]) .tp-main .sections > .part > h2::before {
  content: attr(data-n);
  flex: none;
  margin: 0;
  font:
    600 17px ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  letter-spacing: -0.02em;
  color: var(--tp-mute);
}
:where(html[data-page="topic"]) .doc.one-level .sections > section > h2 .lvl {
  display: none;
}
:where(html[data-page="topic"]) .tp-main .doc .blk {
  margin: 0;
}
:where(html[data-page="topic"]) .blk-level {
  margin: 0 0 8px;
}
:where(html[data-page="topic"]) .tp-main .doc p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: -0.43px;
}
:where(html[data-page="topic"]) .tp-main .doc p:has(> .tp-ex) {
  margin-bottom: 14px;
}

/* Lists: a rule, a note, an example */
:where(html[data-page="topic"]) .tp-main .doc ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
:where(html[data-page="topic"]) .tp-main .doc li {
  display: flex;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: -0.43px;
}
:where(html[data-page="topic"]) .tp-li {
  flex: 1;
  min-width: 0;
}
:where(html[data-page="topic"]) .tp-main .doc li[data-type="rule"]::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 10px 0 0 4px;
  border-radius: 999px;
  background: var(--tp-mute);
}
:where(html[data-page="topic"]) .tp-main .doc li[data-type="note"] {
  gap: 10px;
  padding: 10px 14px 10px 12px;
  border-radius: 14px;
  background: var(--tp-note);
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.3px;
  color: var(--tp-body);
}
:where(html[data-page="topic"]) .tp-main .doc li[data-type="note"]::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: var(--tp-sec);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8.5' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M10 9v5' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6' r='1.1' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8.5' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M10 9v5' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='6' r='1.1' fill='black'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
:where(html[data-page="topic"]) .tp-main .doc li[data-type="example"] {
  margin-left: 4px;
}
:where(html[data-page="topic"]) .tp-ex {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}
:where(html[data-page="topic"]) .tp-ex::before {
  content: "";
  flex: none;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.55;
}
:where(html[data-page="topic"]) .tp-ex-body {
  flex: 1;
  min-width: 0;
  color: var(--text);
}
:where(html[data-page="topic"]) .tp-main .doc li[data-type="note"] .tp-ex-body {
  font-size: 17px;
  line-height: 25px;
  letter-spacing: -0.43px;
}
:where(html[data-page="topic"]) li[data-type="example"] .tp-li > .tp-ex:first-child {
  margin-top: 0;
}
:where(html[data-page="topic"]) .tp-tr {
  display: block;
  margin-top: 1px;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.2px;
}

/* A slot table as cards by tense and sentence type: the tense a line, its sentence types captioned over their cards */
:where(html[data-page="topic"]) .tp-main .doc .tp-slot-cards .tp-tense {
  margin: 0;
  font-size: 17px;
  line-height: 22px;
}
:where(html[data-page="topic"]) .tp-main .doc p.tp-caps {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 0.04em;
}
:where(html[data-page="topic"]) .tp-main .doc .tp-slot-cards p.tp-caps {
  margin: 0 0 0 8px;
}
:where(html[data-page="topic"]) .tp-slot-cards .tp-card {
  margin: 4px 0 10px;
}
:where(html[data-page="topic"]) .tp-main .tp-slot-cards .tp-card td {
  font-size: 15px;
  line-height: 21px;
}
:where(html[data-page="topic"]) .tp-main .tp-slot-cards .tp-card th {
  font-size: 12px;
  line-height: 16px;
}

/* Marks: bold accent for the form a rule is about, muted italic for a sound or a meaning, IPA in mono */
:where(html[data-page="topic"]) .doc em[data-mark] {
  font-style: italic;
  color: var(--tp-sec);
}
:where(html[data-page="topic"]) .doc [data-mark="ipa"] {
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}
:where(html[data-page="topic"]) .doc strong [data-mark="ipa"] {
  color: inherit;
}
:where(html[data-page="topic"]) .doc .sl {
  font-style: normal;
  color: color-mix(in srgb, var(--text) 35%, transparent);
}
:where(html[data-page="topic"]) .doc strong .sl {
  color: inherit;
  opacity: 0.5;
}
:where(html[data-page="topic"]) .doc .nw {
  white-space: nowrap;
}
:where(html[data-page="topic"]) .doc [data-mark="variant"][data-variety] {
  color: var(--tp-sec);
}
:where(html[data-page="topic"]) .doc .vl {
  font-weight: 600;
}
:where(html[data-page="topic"]) .tp-vtag {
  display: block;
  width: fit-content;
  margin-top: 3px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--hm-fill);
  color: var(--tp-sec);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.6;
}
:where(html[data-page="topic"]) .blk-level .tp-vtag {
  display: inline-block;
  margin: 0 0 0 6px;
}
:where(html[data-page="topic"]) .doc .j {
  font-style: normal;
  color: var(--tp-mute);
}
:where(html[data-page="topic"]) .doc a[data-mark="link"] {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 3px;
}
:where(html[data-page="topic"]) .doc [data-mark="slot"] {
  padding: 1px 7px;
  border-radius: 7px;
  background: var(--hm-fill);
  color: var(--tp-sec);
  font-size: 0.9em;
  white-space: nowrap;
}
:where(html[data-page="topic"]) .doc [data-mark="optional"] {
  color: var(--tp-sec);
}
:where(html[data-page="topic"]) .doc [data-mark="intonation"] {
  color: var(--accent);
  font-weight: 700;
}
:where(html[data-page="topic"]) .doc [data-mark="gap"] {
  color: var(--tp-mute);
  letter-spacing: 0.12em;
}
:where(html[data-page="topic"]) .doc [data-mark="variety"] {
  display: inline-block;
  margin-right: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--hm-fill);
  color: var(--tp-sec);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 1px;
  white-space: nowrap;
}

/* Tables: a card with a header row, hairlines between rows and the level pill in a last narrow column */
:where(html[data-page="topic"]) .tp-card .table-wrap {
  overflow-x: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
:where(html[data-page="topic"]) .tp-main .tp-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 17px;
  line-height: 23px;
  letter-spacing: -0.3px;
}
:where(html[data-page="topic"]) .tp-main .tp-card th {
  padding: 12px 10px 8px;
  border: 0;
  background: none;
  font-size: 13px;
  line-height: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tp-caps);
  text-align: left;
  vertical-align: bottom;
}
:where(html[data-page="topic"]) .tp-main .tp-card th:has([data-mark]) {
  text-transform: none;
  letter-spacing: -0.3px;
  font-size: 15px;
  color: var(--text);
}
:where(html[data-page="topic"]) .tp-main .tp-card td {
  padding: 11px 10px;
  border: 0;
  border-top: 0.5px solid var(--tp-hair);
  vertical-align: middle;
}
:where(html[data-page="topic"]) .tp-main .tp-card tr:last-child td {
  border-bottom: 0;
}
:where(html[data-page="topic"]) .tp-main .tp-card :is(th, :where(html[data-page="topic"]) td):first-child {
  padding-left: 20px;
}
:where(html[data-page="topic"]) .tp-main .tp-card td.key {
  font-weight: 600;
}
:where(html[data-page="topic"]) .tp-main .tp-card table.errors td.key {
  font-weight: 400;
}
:where(html[data-page="topic"]) .tp-mono {
  font:
    600 17px ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
:where(html[data-page="topic"]) .tp-letter {
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
:where(html[data-page="topic"]) .tp-main .tp-card .tp-lvl {
  width: 1%;
  padding-right: 16px;
  text-align: right;
  white-space: nowrap;
}
:where(html[data-page="topic"]) .tp-main .tp-card td .lvm {
  vertical-align: middle;
}
:where(html[data-page="topic"])
  .tp-main
  .tp-card
  table[data-type="comparison"]
  :is(th, :where(html[data-page="topic"]) td):not(:first-child, :where(html[data-page="topic"]) .tp-lvl) {
  border-left: 0.5px solid var(--tp-hair);
}
:where(html[data-page="topic"]) .tp-main .tp-card td.tp-none {
  color: var(--tp-mute);
}
:where(html[data-page="topic"]) .tp-main .tp-card .tp-trcol {
  font-style: italic;
  color: var(--tp-sec);
}
:where(html[data-page="topic"]) .tp-main .tp-card td .tp-tr {
  margin-top: 2px;
  font-size: 15px;
  line-height: 19px;
}
:where(html[data-page="topic"]) .tp-main .tp-card td .cell-variety {
  display: block;
}

/* A slot paradigm, compact: grouped two-row header, centred cells, lines between columns, merged words, a pill per tense */
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 20px;
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact th {
  padding: 9px 5px 6px;
  font-size: 11.5px;
  line-height: 15px;
  text-align: center;
  white-space: nowrap;
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact th:first-child {
  padding-left: 14px;
  text-align: left;
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact th.group {
  border-left: 0;
  border-bottom: 0.5px solid var(--tp-hair);
  color: var(--accent);
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact thead tr + tr th {
  border-left: 0.5px solid var(--tp-hair);
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact thead tr + tr th.group-start {
  border-left: 0;
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact td {
  padding: 5px 6px;
  border: 0;
  border-left: 0.5px solid var(--tp-hair);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 20px;
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact td.key {
  padding-left: 14px;
  text-align: left;
  border-left: 0;
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact td:first-child:not(.key) {
  padding-left: 6px;
  border-left: 0;
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact td.key + td,
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact td.gap + td {
  border-left: 0;
}
:where(html[data-page="topic"])
  .tp-main
  .tp-slot-wide
  table.compact
  tr:not(.tp-first):not(.gap-row)
  td:not([rowspan], :where(html[data-page="topic"]) .gap) {
  border-top: 0.5px solid var(--tp-hair);
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact :is(th, :where(html[data-page="topic"]) td).gap {
  width: 8px;
  min-width: 8px;
  padding: 0;
  border: 0;
  background: var(--hm-bg);
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact tr.gap-row td {
  height: 8px;
  padding: 0;
  border: 0;
  background: var(--hm-bg);
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact td.tp-lvl {
  padding: 5px 12px 5px 5px;
  border: 0;
}
:where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact th.tp-lvl {
  padding-right: 12px;
  border: 0;
}
:where(html[data-page="topic"]) .tp-slot-cards {
  display: none;
}
:where(html[data-page="topic"]) .tp-tense {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 8px 8px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}
:where(html[data-page="topic"]) .tp-tense span:first-child {
  flex-grow: 1;
}
:where(html[data-page="topic"]) .tp-slot .tp-caps {
  margin: 4px 0 6px 8px;
}
:where(html[data-page="topic"]) .tp-slot .tp-card {
  margin-bottom: 8px;
}
:where(html[data-page="topic"]) .tp-main .tp-slot .tp-card td {
  padding: 9px 10px;
  font-size: 16px;
  line-height: 22px;
}
:where(html[data-page="topic"]) .tp-main .tp-slot .tp-card tbody tr:first-child td {
  border-top: 0;
}
:where(html[data-page="topic"]) .tp-main .tp-slot .tp-card td[rowspan] {
  border-top: 0;
}
:where(html[data-page="topic"]) .tp-main .tp-slot .tp-card td:first-child {
  padding-left: 10px;
}
:where(html[data-page="topic"]) .tp-main .tp-slot .tp-card td.c0 {
  padding-left: 20px;
}

/* Errors: the wrong form in red under a cross, the right one in green under a check, then the rule */
:where(html[data-page="topic"]) .tp-main .tp-card table.errors td:nth-child(1) {
  background: none;
  color: var(--tp-bad);
}
:where(html[data-page="topic"]) .tp-main .tp-card table.errors td:nth-child(2) {
  background: none;
  color: var(--tp-good);
}
:where(html[data-page="topic"]) .tp-main .tp-card table.errors td:nth-child(3):not(.tp-lvl) {
  color: var(--tp-sec);
}
:where(html[data-page="topic"]) .tp-main .tp-card table.errors td:nth-child(1)::before,
:where(html[data-page="topic"]) .tp-main .tp-card table.errors td:nth-child(2)::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 8px;
  vertical-align: -1px;
}
:where(html[data-page="topic"]) .tp-main .tp-card table.errors td:nth-child(1)::before {
  background: var(--tp-bad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
:where(html[data-page="topic"]) .tp-main .tp-card table.errors td:nth-child(2)::before {
  background: var(--tp-good);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M1.5 7.5l4.5 4.5L14.5 1.5' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M1.5 7.5l4.5 4.5L14.5 1.5' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
:where(html[data-page="topic"]) .tp-main .tp-card table.errors td.tp-lvl::before {
  display: none;
}

/* When the level filter leaves a view nothing: a dashed box and a button that shows the level */
:where(html[data-page="topic"]) .tp-main .filter-empty {
  margin: 0;
  padding: 22px 20px 20px;
  border: 1.5px dashed var(--tp-dash);
  border-radius: 22px;
  background: none;
  text-align: center;
  color: var(--tp-body);
}
:where(html[data-page="topic"]) .tp-main .filter-empty p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 25px;
  letter-spacing: -0.43px;
}
:where(html[data-page="topic"]) .tp-main .filter-empty button {
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--hm-on-accent);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.3px;
  cursor: pointer;
}

/* The end of the lesson: Up next, then the study path, a line per level the topic is a step of */
:where(html[data-page="topic"]) .tp-end {
  margin-top: 40px;
}
:where(html[data-page="topic"]) .tp-end .tp-caps {
  margin: 0 0 4px;
}
:where(html[data-page="topic"]) .up-next + .tp-study,
:where(html[data-page="topic"]) .up-next + .up-next {
  margin-top: 22px;
}
:where(html[data-page="topic"]) .up-next a.next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 16px 20px;
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
}
:where(html[data-page="topic"]) .up-next a.next:hover {
  box-shadow: none;
  background: color-mix(in srgb, var(--surface) 94%, var(--text));
}
:where(html[data-page="topic"]) .up-next a.next strong {
  display: block;
  margin: 0;
  font-size: 20px;
  line-height: 25px;
  font-weight: 700;
  letter-spacing: -0.45px;
}
:where(html[data-page="topic"]) .up-next a.next .summary {
  grid-column: 1 / -1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.3px;
  color: var(--tp-body);
}
:where(html[data-page="topic"]) .up-next a.next .lvm {
  grid-column: 2;
  grid-row: 1;
}
:where(html[data-page="topic"]) .up-next a.next .tp-chev {
  grid-column: 3;
  grid-row: 1;
}
:where(html[data-page="topic"]) .tp-study .tp-card {
  margin: 0;
}
:where(html[data-page="topic"]) .tp-path-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 16px 12px 20px;
}
:where(html[data-page="topic"]) .tp-path-row + .tp-path-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  height: 0.5px;
  background: var(--tp-hair);
}
:where(html[data-page="topic"]) .tp-path-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--tp-sec);
}
:where(html[data-page="topic"]) .tp-path-h .lvm {
  flex: none;
}
:where(html[data-page="topic"]) .tp-path-n {
  display: flex;
  gap: 16px;
  margin: 0;
  font-size: 16px;
  line-height: 22px;
}
:where(html[data-page="topic"]) .tp-path-n a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  color: var(--accent);
}
:where(html[data-page="topic"]) .tp-path-n .tp-nx {
  margin-left: auto;
}

/* The contents page of a phone (pages/topic.ts, topic-phone.css): "Contents" over a card of the parts, each row its
   number, title and a chevron, the part last read tinted; there are no level marks */
:where(html[data-page="topic"]) .tp-parts {
  margin-top: 36px;
}
:where(html[data-page="topic"]) .tp-parts .tp-caps {
  margin: 0 0 8px 4px;
}
:where(html[data-page="topic"]) .tp-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
:where(html[data-page="topic"]) .tp-list li {
  position: relative;
}
:where(html[data-page="topic"]) .tp-list li + li::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 20px;
  height: 0.5px;
  background: var(--tp-hair);
}
:where(html[data-page="topic"]) .tp-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px 0 20px;
  color: var(--text);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.43px;
}
:where(html[data-page="topic"]) .tp-list a:hover {
  background: var(--hm-fill);
}
:where(html[data-page="topic"]) .tp-list a.on {
  background: var(--tp-current);
  color: var(--accent);
  font-weight: 600;
}
:where(html[data-page="topic"]) .tp-list .tp-n {
  width: 24px;
  font-size: 15px;
  color: var(--tp-sec);
}
:where(html[data-page="topic"]) .tp-list a.on .tp-n {
  color: var(--accent);
}
:where(html[data-page="topic"]) .tp-list .name {
  flex: 1;
  min-width: 0;
  padding: 11px 0;
}

/* The topic page from 1024px (pages/topic.ts, track-topic.css for the course's column): the reading 32px from the
   column and 24px from the window's right, with the topic's parts pinned at its top right as an outline, 220px wide from
   1280px and 168px under it; the bar's buttons fixed at the window's top right, the head 84px under the top. A table
   wider than the reading scrolls sideways inside its card (client-topic.ts); in a narrow reading a table of five or more
   columns keeps its first column fixed, and on a phone a slot table becomes cards */
@media (min-width: 1024px) {
  :where(html[data-page="topic"]) .tp-wrap {
    padding: 84px 16px 48px 24px;
  }
  :where(html[data-page="topic"]) .tp-cols {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }
  :where(html[data-page="topic"]) .tp-col {
    flex: 1;
  }
  :where(html[data-page="topic"]) .tp-back,
  :where(html[data-page="topic"]) .tp-parts {
    display: none;
  }
  :where(html[data-page="topic"]) .tp-main .lanes {
    --lane-col-gap: 32px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card th:last-child,
  :where(html[data-page="topic"]) .tp-main .tp-card td:last-child {
    padding-right: 16px;
  }
  :where(html[data-page="topic"]) .tp-main .sections > .part {
    scroll-margin-top: 84px;
  }
  /* The outline follows the window's scroll: it sticks under the bar, the part in view marked with an accent rule */
  :where(html[data-page="topic"]) .tp-outline {
    display: block;
    position: sticky;
    top: 84px;
    flex: none;
    box-sizing: border-box;
    width: 168px;
    max-height: calc(100vh - 104px);
    max-height: calc(100dvh - 104px);
    padding-left: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  :where(html[data-page="topic"]) .tp-outline .tp-caps {
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.06em;
  }
  :where(html[data-page="topic"]) .tp-outline a {
    display: flex;
    gap: 8px;
    padding: 5px 10px 5px 12px;
    border-left: 2px solid var(--tp-hair);
    font-size: 13px;
    line-height: 18px;
    color: var(--tp-body);
  }
  :where(html[data-page="topic"]) .tp-outline a:hover {
    color: var(--text);
  }
  :where(html[data-page="topic"]) .tp-outline b {
    flex: none;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--tp-sec);
  }
  :where(html[data-page="topic"]) .tp-outline a.on {
    border-left-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
  }
  :where(html[data-page="topic"]) .tp-outline a.on b {
    color: var(--accent);
  }
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html:where([data-page="topic"]) {
    scroll-behavior: smooth;
  }
}
@media (min-width: 1280px) {
  :where(html[data-page="topic"]) .tp-wrap {
    padding: 84px 24px 48px 32px;
  }
  :where(html[data-page="topic"]) .tp-cols {
    gap: 28px;
  }
  :where(html[data-page="topic"]) .tp-outline {
    width: 220px;
  }
}
/* A narrow lesson column (a phone, the right pane of a tablet): a table of five or more columns scrolls sideways with
   its first column fixed; on a phone's width a slot table becomes cards by tense and sentence type */
@container (max-width: 420px) {
  :where(html[data-page="topic"]) .tp-slot-wide {
    display: none;
  }
  :where(html[data-page="topic"]) .tp-slot-cards {
    display: block;
  }
}
@container (max-width: 640px) {
  :where(html[data-page="topic"]) .tp-wide table {
    min-width: 540px;
  }
  :where(html[data-page="topic"]) .tp-scroll :is(th, :where(html[data-page="topic"]) td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface);
  }
}
:where(html[data-page="topic"]) .tp-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(to right, transparent, var(--surface));
  pointer-events: none;
  transition: opacity 0.15s;
  display: none;
}
@container (max-width: 640px) {
  :where(html[data-page="topic"]) .tp-scroll::after {
    display: block;
  }
}
:where(html[data-page="topic"]) .tp-scroll.tp-end-reached::after {
  opacity: 0;
}

/* A topic on phones (below 1024px): two pages in one document. The contents page: Back to the course, the title with
   the topic's levels, the lead, and the parts as rows with chevrons (topic-pagers.css). Once the address names a part
   (#part) the reading takes its place: Back to the contents, the head and the lead, then the sections, the browser
   having scrolled to the part. The bottom bar, the fade and the results are the course column's (track-phone.css) */
@media screen and (max-width: 1023px) {
  :where(html[data-page="topic"]) .tp-wrap {
    display: block;
    padding: 0 20px 130px;
  }
  /* The title row, Back and the title, stays at the top while the page scrolls (the head's boxes give way so its
     containing block is the whole page) and the part the address names opens right under it; the summary opens at the
     top of the page, its head in view */
  :where(html[data-page="topic"]) :is(.tp-head, .doc-head) {
    display: contents;
  }
  :where(html[data-page="topic"]) .tp-head .title-row {
    position: sticky;
    top: 0;
    z-index: 10;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0 -20px;
    padding: max(16px, calc(env(safe-area-inset-top) + 8px)) 20px 8px;
    background: var(--pg-bg);
  }
  :where(html[data-page="topic"]) .tp-main .sections > .part {
    scroll-margin-top: 76px;
  }
  :where(html[data-page="topic"]) .tp-main .sections > .part.summary {
    scroll-margin-top: 2000px;
  }
  :where(html[data-page="topic"]) .tp-back-r,
  html:where([data-page="topic"]):has(.tp-body :target) .tp-back-c,
  html:where([data-page="topic"]):has(.tp-body :target) .tp-parts {
    display: none;
  }
  html:where([data-page="topic"]):has(.tp-body :target) .tp-back-r {
    display: flex;
  }
  html:where([data-page="topic"]):not(:has(.tp-body :target)) .tp-body {
    display: none;
  }
}

/* Phones, continued: the lesson's tables */
@media screen and (max-width: 1023px) {
  :where(html[data-page="topic"]) .tp-main .tp-card table {
    font-size: 15px;
    line-height: 21px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card td {
    padding: 9px 8px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card :is(th, :where(html[data-page="topic"]) td):first-child {
    padding-left: 20px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card th {
    padding: 12px 8px 8px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card td .tp-tr {
    font-size: 14px;
    line-height: 19px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card .table-wrap {
    -webkit-overflow-scrolling: touch;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card table.errors,
  :where(html[data-page="topic"]) .tp-main .tp-card table.errors tbody {
    display: block;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card table.errors thead {
    display: none;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card table.errors tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 11px 16px 11px 20px;
    border-top: 0.5px solid var(--tp-hair);
  }
  :where(html[data-page="topic"]) .tp-main .tp-card table.errors tr:first-child {
    border-top: 0;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card table.errors td {
    display: block;
    grid-column: 1;
    padding: 0;
    border: 0;
    font-size: 17px;
    line-height: 25px;
    letter-spacing: -0.43px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card table.errors td:nth-child(3):not(.tp-lvl) {
    margin: 2px 0 0 22px;
    font-size: 15px;
    line-height: 20px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card table.errors td.tp-lvl {
    grid-column: 2;
    grid-row: 1 / span 3;
    padding: 0 0 0 12px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-card table.errors td.tp-lvl:nth-child(3) {
    grid-row: 1 / span 2;
  }
}

/* Print: A4, one column, the chrome hidden, square cards with hairline borders, pills as outlines */
@media print {
  @page {
    size: A4;
    margin: 16mm;
    @bottom-left {
      font: 11px sans-serif;
      color: #6e6e73;
    }
    @bottom-right {
      content: counter(page) " / " counter(pages);
      font: 11px sans-serif;
      color: #6e6e73;
    }
  }
  :where(html[data-page="topic"]) .cl-side,
  :where(html[data-page="topic"]) .tp-back,
  :where(html[data-page="topic"]) .tp-parts,
  :where(html[data-page="topic"]) .tp-outline,
  :where(html[data-page="topic"]) .tp-end,
  :where(html[data-page="topic"]) .tp-slot-cards {
    display: none !important;
  }
  html[data-page="topic"] body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }
  :where(html[data-page="topic"]) .tp-wrap {
    display: block;
    max-width: none;
    padding: 0;
  }
  :where(html[data-page="topic"]) .tp-main .sections.lanes {
    display: block;
  }
  :where(html[data-page="topic"]) .tp-card {
    border-radius: 0;
    background: #fff;
    border: 0.75px solid #8a8a8e;
    box-shadow: none;
    break-inside: avoid;
  }
  html[data-page="topic"] .lvl > .half {
    background: #fff;
    box-shadow: inset 0 0 0 0.75px var(--lvl);
  }
  :where(html[data-page="topic"]) .doc [data-mark="slot"],
  :where(html[data-page="topic"]) .tp-main .doc li[data-type="note"] {
    background: #eeeeef;
  }
  :where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact td {
    padding: 4px 4px;
    font-size: 12px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact td.tp-lvl {
    padding: 4px 6px 4px 2px;
  }
  :where(html[data-page="topic"]) .tp-main .tp-slot-wide table.compact th {
    padding-left: 3px;
    padding-right: 3px;
    font-size: 10.5px;
  }
  :where(html[data-page="topic"]) .tp-main .doc h2,
  :where(html[data-page="topic"]) .tp-slot h3 {
    break-after: avoid;
  }
  :where(html[data-page="topic"]) .tp-head .props a.prop {
    color: #1f3f9c;
  }
}