/* Study sites — one stylesheet shared by every study site (home page, chapter pages, 404).
   Each site sets --accent-rgb / --accent-2-rgb on <html>; dark mode only redefines tokens. */

:root {
  color-scheme: light;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --bg: #f4f6fb;
  --ink: #0f172a;
  --ink-2: #475569;
  --ink-3: #7b8699;
  --surface: rgba(255, 255, 255, 0.7);
  --surface-2: rgba(255, 255, 255, 0.9);
  --header: rgba(244, 246, 251, 0.78);
  --ring: rgba(15, 23, 42, 0.08);
  --edge: rgba(255, 255, 255, 0.9);
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -14px rgba(15, 23, 42, 0.14);
  --shadow-lift: 0 2px 6px rgba(15, 23, 42, 0.05), 0 24px 50px -22px rgba(15, 23, 42, 0.26);
  --ambient-1: rgba(var(--accent-rgb), 0.28);
  --ambient-2: rgba(139, 92, 246, 0.22);
  --ambient-3: rgba(var(--accent-2-rgb), 0.16);
  --ambient-4: rgba(45, 212, 191, 0.18);
  --inline-code: rgba(15, 23, 42, 0.06);
  --accent-mix-base: #1a1405;
  --accent-mix: 58%;

  --code-bg: #0e1424;
  --code-head: #151c30;
  --code-ink: #dbe3f2;
  --code-dim: #7d89a6;
  --code-ring: rgba(255, 255, 255, 0.06);

  --gotcha: 225, 29, 72;
  --tip: 16, 185, 129;
  --note: 59, 130, 246;
  --interview: 139, 92, 246;
  --adv: 79, 70, 229;
  --adv-ink: 67, 56, 202;

  --topbar-h: 60px;
  --sidebar-w: 290px;
  --radius: 18px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --adv-ink: 165, 160, 255;
    --bg: #080b13;
    --ink: #eef2f8;
    --ink-2: #aab3c5;
    --ink-3: #768099;
    --surface: rgba(24, 30, 48, 0.58);
    --surface-2: rgba(30, 37, 58, 0.78);
    --header: rgba(8, 11, 19, 0.74);
    --ring: rgba(255, 255, 255, 0.08);
    --edge: rgba(255, 255, 255, 0.05);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -16px rgba(0, 0, 0, 0.7);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.3), 0 26px 56px -22px rgba(0, 0, 0, 0.8);
    --ambient-1: rgba(var(--accent-rgb), 0.11);
    --ambient-2: rgba(124, 92, 255, 0.16);
    --ambient-3: rgba(var(--accent-2-rgb), 0.08);
    --ambient-4: rgba(20, 184, 166, 0.08);
    --inline-code: rgba(255, 255, 255, 0.08);
    --accent-mix-base: #ffffff;
    --accent-mix: 82%;
    --code-bg: #0b1020;
    --code-head: #10172b;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --adv-ink: 165, 160, 255;
  --bg: #080b13;
  --ink: #eef2f8;
  --ink-2: #aab3c5;
  --ink-3: #768099;
  --surface: rgba(24, 30, 48, 0.58);
  --surface-2: rgba(30, 37, 58, 0.78);
  --header: rgba(8, 11, 19, 0.74);
  --ring: rgba(255, 255, 255, 0.08);
  --edge: rgba(255, 255, 255, 0.05);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -16px rgba(0, 0, 0, 0.7);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.3), 0 26px 56px -22px rgba(0, 0, 0, 0.8);
  --ambient-1: rgba(var(--accent-rgb), 0.11);
  --ambient-2: rgba(124, 92, 255, 0.16);
  --ambient-3: rgba(var(--accent-2-rgb), 0.08);
  --ambient-4: rgba(20, 184, 166, 0.08);
  --inline-code: rgba(255, 255, 255, 0.08);
  --accent-mix-base: #ffffff;
  --accent-mix: 82%;
  --code-bg: #0b1020;
  --code-head: #10172b;
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--topbar-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

/* Text size (reading settings): every font size is written as "Npx * var(--ts)". --ts is 1 everywhere except
   inside the page content, where it follows the reader's chosen --text-scale. */
:root {
  --ts: 1;
}

main {
  --ts: var(--text-scale, 1);
  font-size: calc(16px * var(--ts));
}

body {
  --accent: rgb(var(--accent-rgb));
  --accent-ink: color-mix(in oklab, var(--accent) var(--accent-mix), var(--accent-mix-base));
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: -20%;
  background:
    radial-gradient(46% 40% at 14% 14%, var(--ambient-1), transparent 70%),
    radial-gradient(44% 38% at 86% 10%, var(--ambient-2), transparent 70%),
    radial-gradient(50% 44% at 62% 70%, var(--ambient-3), transparent 70%),
    radial-gradient(40% 38% at 8% 88%, var(--ambient-4), transparent 70%);
  content: "";
  pointer-events: none;
  animation: drift 40s ease-in-out infinite alternate;
}

/* The drifting background costs GPU time on every frame; keep it still on phones and tablets. */
@media (max-width: 900px), (pointer: coarse) {
  body::before {
    animation: none;
  }
}

@keyframes drift {
  to {
    transform: translate3d(3%, -2%, 0) rotate(4deg) scale(1.05);
  }
}

a {
  color: var(--accent-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
p {
  margin-top: 0;
}

code {
  padding: 0.12em 0.4em;
  border-radius: 6px;
  background: var(--inline-code);
  font-family: var(--font-mono);
  font-size: 0.86em;
}

kbd {
  font-family: var(--font-mono);
}

::selection {
  background: rgba(var(--accent-rgb), 0.3);
}

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
}

.skip:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topbar-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--ring);
  background: var(--header);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: grid;
  flex: none;
  place-items: end end;
  width: 34px;
  height: 34px;
  padding: 3px 5px;
  border-radius: 9px;
  background: var(--accent);
  box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb), 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  color: var(--on-accent, #111);
  font-size: calc(14px * var(--ts));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  white-space: nowrap;
}

.brand-text strong {
  font-size: calc(15px * var(--ts));
  letter-spacing: -0.01em;
}

.brand-text span {
  color: var(--ink-3);
  font-size: calc(12px * var(--ts));
}

/* Study-site switcher */

.site-switcher {
  position: relative;
  flex: none;
  margin-left: -6px;
}

.site-switcher summary {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--ink-3);
  list-style: none;
  cursor: pointer;
}

.site-switcher summary::-webkit-details-marker {
  display: none;
}

.site-switcher summary:hover,
.site-switcher[open] summary {
  background: var(--surface);
  color: var(--ink);
}

.site-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -60px;
  z-index: 45;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--shadow-lift);
}

.site-menu p {
  margin: 4px 10px 6px;
  color: var(--ink-3);
  font-size: calc(11.5px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--ink);
  font-size: calc(14px * var(--ts));
  font-weight: 600;
  text-decoration: none;
}

.site-menu a:hover {
  background: var(--surface);
}

.site-menu a[aria-current="page"] {
  background: rgba(var(--accent-rgb), 0.13);
}

.site-menu a[aria-current="page"]::after {
  margin-left: auto;
  color: var(--ink-3);
  font-size: calc(12px * var(--ts));
  font-weight: 500;
  content: "you’re here";
}

.site-dot {
  display: grid;
  flex: none;
  place-items: end end;
  width: 26px;
  height: 26px;
  padding: 2px 4px;
  border-radius: 7px;
  font-size: calc(10.5px * var(--ts));
  font-weight: 800;
  line-height: 1;
}

.search {
  position: relative;
  flex: 1;
  max-width: 460px;
  margin-left: auto;
}

.search input {
  width: 100%;
  height: 38px;
  padding: 0 34px 0 36px;
  border: 1px solid var(--ring);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: calc(14px * var(--ts));
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search input::-webkit-search-cancel-button {
  display: none;
}

.search input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
}

.search-icon {
  position: absolute;
  top: 11px;
  left: 12px;
  color: var(--ink-3);
  pointer-events: none;
}

.search-kbd {
  position: absolute;
  top: 9px;
  right: 10px;
  min-width: 20px;
  padding: 0 5px;
  border: 1px solid var(--ring);
  border-radius: 6px;
  color: var(--ink-3);
  font-size: calc(12px * var(--ts));
  line-height: 18px;
  text-align: center;
  pointer-events: none;
}

.search input:focus ~ .search-kbd {
  display: none;
}

.search-results {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  max-height: min(70vh, 520px);
  margin: 0;
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: var(--shadow-lift);
  list-style: none;
}

.search-results a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
}

.search-results li[aria-selected="true"] a,
.search-results a:hover {
  background: rgba(var(--accent-rgb), 0.14);
}

.search-results .r-title {
  display: block;
  font-size: calc(14px * var(--ts));
  font-weight: 600;
}

.search-results .r-meta {
  display: block;
  overflow: hidden;
  color: var(--ink-3);
  font-size: calc(12.5px * var(--ts));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-results mark {
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.35);
  color: inherit;
}

.search-results .r-empty {
  padding: 12px;
  color: var(--ink-3);
  font-size: calc(14px * var(--ts));
}

.topbar-progress {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: calc(13px * var(--ts));
  font-variant-numeric: tabular-nums;
}

button.topbar-progress {
  padding: 4px 6px;
  border: 0;
  border-radius: 10px;
  background: none;
  font: inherit;
  font-size: calc(13px * var(--ts));
  cursor: pointer;
}

button.topbar-progress:hover {
  background: var(--surface);
}

.topbar-progress {
  position: relative;
}

.topbar-progress .sync-dot {
  position: absolute;
  top: 4px;
  left: 26px;
  box-shadow: 0 0 0 2px var(--bg);
}

.topbar-progress strong {
  color: var(--ink);
}

.ring-track,
.ring-fill {
  fill: none;
  stroke-width: 4;
}

.ring-track {
  stroke: var(--ring);
}

.ring-fill {
  stroke: var(--accent);
  stroke-dasharray: 94.25;
  stroke-dashoffset: 94.25;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 0.4s ease;
}

.icon-btn {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ring);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}

.icon-btn:hover {
  color: var(--ink);
}

.theme-btn .i-moon,
:root[data-theme="dark"] .theme-btn .i-sun {
  display: none;
}

:root[data-theme="dark"] .theme-btn .i-moon {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .i-sun {
    display: none;
  }
  :root:not([data-theme="light"]) .theme-btn .i-moon {
    display: block;
  }
}

.menu-btn {
  display: none;
}

/* Layout */

.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  padding: 18px 10px 14px 14px;
  overflow-y: auto;
  border-right: 1px solid var(--ring);
  scrollbar-width: thin;
}

.nav,
.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-chapter + .nav-chapter {
  margin-top: 4px;
}

.nav-chapter-link {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  color: var(--ink);
  font-size: calc(14px * var(--ts));
  font-weight: 650;
  text-decoration: none;
}

.nav-chapter-link:hover {
  background: var(--surface);
}

.nav-chapter-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-chapter-row .nav-chapter-link {
  flex: 1;
  min-width: 0;
}

.nav-chapter-link[aria-current="page"] {
  background: rgba(var(--accent-rgb), 0.1);
}

.nav-expand {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}

.nav-expand:hover {
  background: var(--surface);
  color: var(--ink);
}

.nav-expand svg {
  transition: transform 0.2s ease;
}

.nav-chapter.open .nav-expand svg {
  transform: rotate(90deg);
}

.nav-num {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: calc(11.5px * var(--ts));
  font-weight: 500;
}

.nav-chapter-name {
  flex: 1;
}

.nav-count {
  color: var(--ink-3);
  font-size: calc(11.5px * var(--ts));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.nav-count.done {
  color: var(--accent-ink);
}

.nav-chapter ul {
  display: none;
  margin: 2px 0 8px 22px;
  padding-left: 10px;
  border-left: 1px solid var(--ring);
}

.nav-chapter.open ul {
  display: block;
}

.nav-chapter ul a {
  position: relative;
  display: block;
  padding: 4px 10px 4px 12px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: calc(13.5px * var(--ts));
  line-height: 1.4;
  text-decoration: none;
}

.nav-chapter ul a code {
  font-size: 0.9em;
}

.nav-chapter ul a:hover {
  color: var(--ink);
}

.nav-chapter ul a.active {
  background: rgba(var(--accent-rgb), 0.13);
  color: var(--ink);
  font-weight: 600;
}

.nav-chapter ul a.active::before {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: -11px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent);
  content: "";
}

.nav-chapter ul a.is-learned::after {
  margin-left: 6px;
  color: var(--accent-ink);
  font-size: calc(12px * var(--ts));
  content: "✓";
}

.sidebar-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding: 16px 10px 0;
  font-size: calc(12.5px * var(--ts));
}

.sidebar-foot a {
  color: var(--ink-3);
  text-decoration: none;
}

/* Sync */

.sync-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ink-3);
  border-radius: 50%;
  vertical-align: 0;
}

body[data-sync="ok"] .sync-dot {
  border-color: rgb(var(--tip));
  background: rgb(var(--tip));
}

body[data-sync="syncing"] .sync-dot {
  border-color: var(--accent);
  background: var(--accent);
  animation: sync-pulse 0.9s ease-in-out infinite alternate;
}

body[data-sync="error"] .sync-dot,
body[data-sync="offline"] .sync-dot {
  border-color: rgb(var(--gotcha));
  background: rgb(var(--gotcha));
}

body:not([data-sync="ok"]):not([data-sync="syncing"]):not([data-sync="error"]):not([data-sync="offline"]) .topbar-progress .sync-dot {
  display: none;
}

@keyframes sync-pulse {
  to {
    opacity: 0.35;
  }
}

body[data-sync-enabled="false"] .sync-status,
body[data-sync-enabled="false"] .legend-sync {
  display: none;
}

body[data-sync-enabled="false"] button.topbar-progress {
  cursor: default;
}

.sidebar-foot {
  flex-wrap: wrap;
  row-gap: 8px;
}

.sidebar-foot > * {
  white-space: nowrap;
}

.sync-status {
  display: inline-flex;
  flex-basis: 100%;
  align-items: center;
  gap: 7px;
}

.legend-sync {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sync-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--ring);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
}

.sync-dialog::backdrop {
  background: rgba(2, 6, 23, 0.5);
  backdrop-filter: blur(3px);
}

.sync-card {
  padding: 22px 22px 18px;
}

.sync-card h2 {
  margin-bottom: 10px;
  font-size: calc(19px * var(--ts));
  letter-spacing: -0.01em;
}

.sync-card p {
  margin-bottom: 12px;
  color: var(--ink-2);
  font-size: calc(14.5px * var(--ts));
}

.sync-card .sync-fine {
  color: var(--ink-3);
  font-size: calc(12.5px * var(--ts));
}

.sync-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  font-size: calc(13px * var(--ts));
  font-weight: 600;
}

.sync-field input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ring);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  outline: none;
}

.sync-field input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
}

.google-button {
  display: flex;
  justify-content: center;
  min-height: 44px;
  margin: 4px 0 6px;
}

.sync-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 12px !important;
  color: var(--ink-3) !important;
  font-size: 12.5px !important;
}

.sync-or::before,
.sync-or::after {
  flex: 1;
  height: 1px;
  background: var(--ring);
  content: "";
}

.sync-google:not([hidden]) ~ .sync-phrase-intro {
  display: none;
}

.sync-card .sync-id-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: calc(13.5px * var(--ts));
  font-weight: 600;
}

.sync-id {
  padding: 3px 8px;
  border-radius: 7px;
  font-size: calc(15px * var(--ts));
  letter-spacing: 0.12em;
}

.sync-card .sync-hint {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--ink);
  font-size: calc(13.5px * var(--ts));
}

.sync-error {
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(var(--gotcha), 0.1);
  color: rgb(var(--gotcha)) !important;
}

.sync-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.btn {
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent, #111);
  font: inherit;
  font-size: calc(14px * var(--ts));
  font-weight: 650;
  cursor: pointer;
}

.btn-quiet {
  border-color: var(--ring);
  background: transparent;
  color: var(--ink-2);
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.sync-dialog[data-on="true"] .sync-off-view,
.sync-dialog:not([data-on="true"]) .sync-on-view {
  display: none;
}

.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  cursor: pointer;
}

.link-btn:hover,
.sidebar-foot a:hover {
  color: var(--ink);
}

main {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px 40px;
}

/* Hero */

.hero {
  padding: 56px 0 30px;
}

.eyebrow {
  margin-bottom: 14px;
  color: var(--accent-ink);
  font-size: calc(13px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 16ch;
  margin-bottom: 16px;
  font-size: clamp(36px, 6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.hero h1 em {
  background: linear-gradient(100deg, var(--accent-ink), rgb(var(--accent-2-rgb)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

.lede {
  max-width: 60ch;
  color: var(--ink-2);
  font-size: calc(18px * var(--ts));
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 34px;
}

.stats div {
  min-width: 120px;
  padding: 12px 16px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--edge);
}

.stats dt {
  color: var(--ink-3);
  font-size: calc(12px * var(--ts));
}

.stats dd {
  margin: 0;
  font-size: calc(24px * var(--ts));
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.chapter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  overflow: hidden;
  border: 1px solid var(--ring);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.chapter-card:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: var(--shadow-lift), 0 0 0 4px rgba(var(--accent-rgb), 0.08);
  transform: translateY(-2px);
}

.chapter-card-num {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--ts));
  font-weight: 600;
}

.chapter-card-title {
  font-size: calc(16px * var(--ts));
  font-weight: 700;
  letter-spacing: -0.01em;
}

.chapter-card-summary {
  flex: 1;
  color: var(--ink-2);
  font-size: calc(13.5px * var(--ts));
  line-height: 1.5;
}

.chapter-card-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--ink-3);
  font-size: calc(12px * var(--ts));
}

.chapter-card-progress {
  font-variant-numeric: tabular-nums;
}

.chapter-card-progress.done {
  color: var(--accent-ink);
  font-weight: 600;
}

.legend {
  margin-top: 22px;
  color: var(--ink-3);
  font-size: calc(13.5px * var(--ts));
}

.legend-learned {
  color: var(--ink-2);
  font-weight: 600;
}

/* Chapters and topics */

.chapter {
  padding-top: 40px;
}

.chapter-head {
  margin: 0 0 22px;
  padding: 26px 0 0;
  border-top: 1px solid var(--ring);
}

.chapter-num {
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: calc(12.5px * var(--ts));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chapter-head h1,
.chapter-head h2 {
  margin: 6px 0 8px;
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.chapter-head p {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-2);
  font-size: calc(16.5px * var(--ts));
}

.topic {
  margin-bottom: 18px;
  padding: 24px 28px 22px;
  border: 1px solid var(--ring);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
  /* The browser skips layout and painting for topics that are off screen. With 130+ long topics on one
     page this is the difference between smooth and janky scrolling on phones. "auto" makes it remember
     each topic's real height once it has been shown, so the scrollbar settles. */
  content-visibility: auto;
  contain-intrinsic-size: auto var(--hd, 1500px);
}

@media (max-width: 640px) {
  .topic {
    contain-intrinsic-size: auto var(--hm, 3000px);
  }
}

.topic-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.topic-head h2 {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  font-size: calc(22px * var(--ts));
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.topic-head h2 code {
  font-size: 0.85em;
}

.anchor {
  position: absolute;
  left: -20px;
  color: var(--ink-3);
  font-weight: 500;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.topic-head:hover .anchor,
.anchor:focus-visible {
  opacity: 1;
}

.badge-new {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid rgba(var(--interview), 0.3);
  border-radius: 999px;
  background: rgba(var(--interview), 0.1);
  color: rgb(var(--interview));
  font-size: calc(11.5px * var(--ts));
  font-weight: 650;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

:root[data-theme="dark"] .badge-new {
  color: #c4b5fd;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge-new {
    color: #c4b5fd;
  }
}

.learned {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  margin-left: auto;
  padding: 5px 11px 5px 8px;
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: calc(12.5px * var(--ts));
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.learned:hover {
  color: var(--ink);
}

.learned-box {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 5px;
}

.learned[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), 0.5);
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--accent-ink);
}

.learned[aria-pressed="true"] .learned-box,
.dock-learned[aria-pressed="true"] .learned-box {
  border-color: var(--accent);
  background: var(--accent);
}

.learned[aria-pressed="true"] .learned-box::after,
.dock-learned[aria-pressed="true"] .learned-box::after {
  color: var(--on-accent, #111);
  font-size: calc(11px * var(--ts));
  font-weight: 900;
  line-height: 1;
  content: "✓";
}

/* Topic body typography */

.topic-body p code,
.topic-body li code,
.callout code {
  overflow-wrap: anywhere;
}

.topic-body > :last-child {
  margin-bottom: 0;
}

.topic-body p,
.topic-body ul,
.topic-body ol {
  margin: 0 0 14px;
  color: var(--ink);
}

.topic-body ul,
.topic-body ol {
  padding-left: 22px;
}

.topic-body li + li {
  margin-top: 5px;
}

.topic-body li::marker {
  color: var(--ink-3);
}

.topic-body h4 {
  margin: 22px 0 10px;
  font-size: calc(16.5px * var(--ts));
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topic-body h5 {
  margin: 18px 0 8px;
  color: var(--ink-2);
  font-size: calc(14px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.topic-body strong {
  font-weight: 650;
}

.topic-body blockquote {
  margin: 0 0 14px;
  padding: 2px 0 2px 16px;
  border-left: 3px solid rgba(var(--accent-rgb), 0.6);
  color: var(--ink-2);
}

/* Code blocks: always dark so syntax colours read the same in both themes */

.code {
  margin: 0 0 16px;
  overflow: hidden;
  border: 1px solid var(--code-ring);
  border-radius: 14px;
  background: var(--code-bg);
  box-shadow: 0 10px 30px -18px rgba(2, 6, 23, 0.55);
}

.code figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  border-bottom: 1px solid var(--code-ring);
  background: var(--code-head);
  color: var(--code-dim);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--ts));
}

.code figcaption span::before {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
  content: "";
  vertical-align: 1px;
}

.copy-btn {
  padding: 3px 9px;
  border: 1px solid var(--code-ring);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--code-dim);
  font: inherit;
  font-size: calc(11.5px * var(--ts));
  cursor: pointer;
}

.copy-btn:hover {
  color: var(--code-ink);
}

.copy-btn.copied {
  color: #6ee7b7;
}

.code pre {
  margin: 0;
  padding: 14px 16px 16px;
  overflow-x: auto;
  color: var(--code-ink);
  font-family: var(--font-mono);
  font-size: calc(13.5px * var(--ts));
  line-height: 1.6;
  tab-size: 2;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.code code {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* Prism tokens */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6b7a99;
  font-style: italic;
}
.token.punctuation {
  color: #a3aec5;
}
.token.keyword,
.token.important,
.token.atrule {
  color: #c792ea;
}
.token.string,
.token.char,
.token.attr-value,
.token.template-string,
.token.regex {
  color: #a5e075;
}
.token.template-punctuation,
.token.interpolation-punctuation {
  color: #89ddff;
}
.token.number,
.token.boolean,
.token.constant {
  color: #f78c6c;
}
.token.function,
.token.method {
  color: #82aaff;
}
.token.class-name,
.token.builtin {
  color: #ffcb6b;
}
.token.operator,
.token.entity,
.token.url {
  color: #89ddff;
}
.token.tag,
.token.selector {
  color: #f07178;
}
.token.attr-name,
.token.property {
  color: #ffcb6b;
}
.token.parameter {
  color: #e6edf8;
}

/* Callouts */

.callout {
  --c: var(--note);
  position: relative;
  margin: 0 0 16px;
  padding: 14px 16px 14px 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--c), 0.24);
  border-radius: 14px;
  background: rgba(var(--c), 0.07);
}

.callout::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: rgb(var(--c));
  content: "";
}

.callout-gotcha {
  --c: var(--gotcha);
}
.callout-tip {
  --c: var(--tip);
}
.callout-note {
  --c: var(--note);
}
.callout-interview {
  --c: var(--interview);
}

.callout-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: color-mix(in oklab, rgb(var(--c)) var(--accent-mix), var(--accent-mix-base));
  font-size: calc(13px * var(--ts));
  font-weight: 750;
  letter-spacing: 0.02em;
}

.callout-title::before {
  font-size: calc(14px * var(--ts));
  content: "ℹ";
}

.callout-gotcha .callout-title::before {
  content: "⚠";
}
.callout-tip .callout-title::before {
  content: "✦";
}
.callout-interview .callout-title::before {
  content: "💬";
}

.callout > :last-child,
.callout p:last-child {
  margin-bottom: 0;
}

.callout p,
.callout ul,
.callout ol {
  font-size: calc(15px * var(--ts));
}

/* Quiz */

.quiz {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px dashed rgba(var(--accent-rgb), 0.55);
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.06);
}

.quiz-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: calc(14px * var(--ts));
  font-weight: 700;
}

.quiz-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent, #111);
  font-size: calc(12px * var(--ts));
  font-weight: 900;
}

.quiz .code {
  margin-bottom: 10px;
}

.quiz details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: calc(13px * var(--ts));
  font-weight: 650;
  list-style: none;
  cursor: pointer;
}

.quiz details summary::-webkit-details-marker {
  display: none;
}

.quiz details summary::before {
  font-size: calc(10px * var(--ts));
  content: "▶";
  transition: transform 0.15s;
}

.quiz details[open] summary::before {
  transform: rotate(90deg);
}

.quiz details[open] summary {
  margin-bottom: 12px;
}

.quiz-answer > :last-child {
  margin-bottom: 0;
}

/* "What's happening" walkthroughs — sit directly under the code they explain */

.steps {
  margin: 0 0 18px;
  padding: 14px 18px 16px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--surface-2);
}

.code:has(+ .steps) {
  margin-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.code + .steps {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.steps-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--accent-ink);
  font-size: calc(12.5px * var(--ts));
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.steps-title::before {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  content: "";
}

.steps p,
.steps ul,
.steps li {
  font-size: calc(15px * var(--ts));
}

.steps > :last-child {
  margin-bottom: 0;
}

.steps ol {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps ol > li {
  position: relative;
  padding-left: 34px;
  counter-increment: step;
}

.steps ol > li + li {
  margin-top: 9px;
}

.steps ol > li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--accent-ink);
  font-size: calc(12px * var(--ts));
  font-weight: 750;
  content: counter(step);
}

.steps ol:last-child {
  margin-bottom: 0;
}

.quiz .steps,
.col .steps {
  background: transparent;
}

/* Columns */

.cols {
  display: grid;
  gap: 12px;
  margin-bottom: 4px;
}

.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.col > :last-child {
  margin-bottom: 12px;
}

/* Tables */

.table-wrap {
  margin: 0 0 16px;
  overflow-x: auto;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--surface-2);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(14px * var(--ts));
}

th,
td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--ring);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--ink-2);
  font-size: calc(12.5px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

tr:last-child td {
  border-bottom: 0;
}

td code {
  white-space: nowrap;
}

/* Diagrams */

.diagram {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--surface-2);
}

.diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.diagram figcaption {
  margin-top: 10px;
  color: var(--ink-3);
  font-size: calc(13px * var(--ts));
  text-align: center;
}

.diagram text {
  fill: var(--ink);
  font-family: var(--font-sans);
}

.diagram .d-dim {
  fill: var(--ink-3);
}

.diagram .d-mono {
  font-family: var(--font-mono);
}

.diagram .d-box {
  fill: var(--surface);
  stroke: var(--ring);
  stroke-width: 1.5;
}

.diagram .d-accent {
  fill: rgba(var(--accent-rgb), 0.16);
  stroke: rgba(var(--accent-rgb), 0.7);
  stroke-width: 1.5;
}

.diagram .d-violet {
  fill: rgba(var(--interview), 0.12);
  stroke: rgba(var(--interview), 0.6);
  stroke-width: 1.5;
}

.diagram .d-green {
  fill: rgba(var(--tip), 0.12);
  stroke: rgba(var(--tip), 0.6);
  stroke-width: 1.5;
}

.diagram .d-blue {
  fill: rgba(var(--note), 0.12);
  stroke: rgba(var(--note), 0.6);
  stroke-width: 1.5;
}

.diagram .d-line {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.5;
}

.diagram .d-bar-parse {
  fill: rgba(var(--note), 0.55);
}

.diagram .d-bar-fetch {
  fill: rgba(var(--tip), 0.6);
}

.diagram .d-bar-run {
  fill: rgba(var(--gotcha), 0.65);
}

/* Footer and floating button */

.footer {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--ring);
  color: var(--ink-3);
  font-size: calc(13.5px * var(--ts));
}

.footer p {
  margin-bottom: 6px;
}

.footer a {
  color: var(--ink-2);
}

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.scrim {
  display: none;
}

/* Responsive */

@media (max-width: 1080px) {
  .topbar-progress span {
    display: none;
  }
}

@media (max-width: 900px) {
  :root {
    --topbar-h: 56px;
  }

  .layout {
    display: block;
  }

  .menu-btn {
    display: grid;
  }

  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: 0;
    left: 0;
    z-index: 35;
    width: min(320px, 86vw);
    height: auto;
    border-right: 1px solid var(--ring);
    background: var(--bg);
    box-shadow: var(--shadow-lift);
    transform: translateX(-105%);
    transition: transform 0.25s ease;
  }

  body.nav-open .sidebar {
    transform: none;
  }

  .scrim {
    position: fixed;
    inset: var(--topbar-h) 0 0;
    z-index: 34;
    display: block;
    background: rgba(2, 6, 23, 0.4);
  }

  .scrim[hidden] {
    display: none;
  }

  main {
    padding: 0 16px 32px;
  }

  .anchor {
    display: none;
  }
}

@media (max-width: 640px) {
  .topbar {
    gap: 8px;
    padding: 0 12px;
  }

  .brand-text {
    display: none;
  }

  .search {
    max-width: none;
  }

  .search-kbd {
    display: none;
  }

  .topbar-progress {
    display: none;
  }

  .hero {
    padding-top: 34px;
  }

  .lede {
    font-size: calc(16.5px * var(--ts));
  }

  .stats div {
    flex: 1 1 40%;
    min-width: 0;
  }

  .topic {
    padding: 18px 16px 16px;
    border-radius: 16px;
  }

  .topic-head h2 {
    font-size: calc(19px * var(--ts));
  }

  .code {
    margin-right: -6px;
    margin-left: -6px;
  }

  .code pre {
    font-size: calc(12.5px * var(--ts));
  }

  .cols-2,
  .cols-3 {
    grid-template-columns: minmax(0, 1fr);
  }

  .quiz,
  .callout {
    padding-right: 12px;
    padding-left: 12px;
  }

  .steps {
    padding: 12px 14px 14px;
  }

  .quiz .steps,
  .callout .steps {
    padding: 10px 10px 12px;
  }

  .steps ol > li {
    padding-left: 30px;
  }
}

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

@media print {
  body::before,
  .topbar,
  .sidebar,
  .learned,
  .to-top,
  .dock,
  .toc,
  .read-progress,
  .copy-btn {
    display: none !important;
  }
  .layout {
    display: block;
  }
  .topic {
    break-inside: avoid;
    box-shadow: none;
  }
  .quiz details {
    display: block;
  }
}

[hidden] {
  display: none !important;
}

/* Pages: home "continue" card, progress meters, chapter page header, pager, "on this page", reading
   progress, phone dock and page transitions. */

.meter {
  display: block;
  height: 4px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ring);
}

.meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgb(var(--accent-2-rgb)));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s ease;
}

.chapter-card .meter {
  margin-top: 10px;
}

.continue {
  display: grid;
  grid-template-areas: "kicker arrow" "title arrow" "meta arrow";
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  margin: 0 0 22px;
  padding: 18px 22px;
  border: 1px solid rgba(var(--accent-rgb), 0.38);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-2-rgb), 0.07)), var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.continue:hover {
  box-shadow: var(--shadow-lift), 0 0 0 4px rgba(var(--accent-rgb), 0.08);
  transform: translateY(-2px);
}

.continue-kicker {
  grid-area: kicker;
  color: var(--accent-ink);
  font-size: calc(12px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.continue-title {
  grid-area: title;
  margin: 2px 0;
  font-size: calc(19px * var(--ts));
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.continue-meta {
  grid-area: meta;
  color: var(--ink-2);
  font-size: calc(13.5px * var(--ts));
}

.continue-arrow {
  display: grid;
  grid-area: arrow;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), 0.8);
  color: var(--on-accent, #111);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 30px;
  color: var(--ink-3);
  font-size: calc(13px * var(--ts));
}

.crumbs a {
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--accent-ink);
}

.layout-chapter .chapter {
  padding-top: 12px;
}

.layout-chapter .chapter-head {
  margin-bottom: 26px;
  padding-top: 0;
  border-top: 0;
}

.chapter-head h1 {
  font-size: clamp(32px, 5vw, 46px);
}

.chapter-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  color: var(--ink-3);
  font-size: calc(13px * var(--ts));
  font-variant-numeric: tabular-nums;
}

.chapter-progress .meter {
  width: 160px;
}

.chapter-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 30px;
}

.pager-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 18px;
  border: 1px solid var(--ring);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pager-link:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: var(--shadow-lift), 0 0 0 4px rgba(var(--accent-rgb), 0.08);
  transform: translateY(-2px);
}

.pager-next {
  grid-column: 2;
  align-items: flex-end;
  text-align: right;
}

.pager-dir {
  color: var(--accent-ink);
  font-size: calc(12.5px * var(--ts));
  font-weight: 650;
}

.pager-title {
  font-weight: 700;
  line-height: 1.35;
}

.not-found h1 {
  max-width: none;
}

.toc {
  display: none;
}

@media (min-width: 1400px) {
  .layout-chapter {
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr) 250px;
  }

  .toc {
    position: sticky;
    top: var(--topbar-h);
    display: block;
    height: calc(100vh - var(--topbar-h));
    height: calc(100dvh - var(--topbar-h));
    padding: 34px 18px 24px 4px;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  .toc-title {
    margin: 0 0 10px 14px;
    color: var(--ink-3);
    font-size: calc(11.5px * var(--ts));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .toc ol {
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--ring);
    list-style: none;
  }

  .toc a {
    display: block;
    margin-left: -1px;
    padding: 5px 12px;
    border-left: 2px solid transparent;
    color: var(--ink-3);
    font-size: calc(13px * var(--ts));
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
  }

  .toc a:hover {
    color: var(--ink);
  }

  .toc a.active {
    border-left-color: var(--accent);
    color: var(--ink);
    font-weight: 600;
  }

  .toc a.is-learned::after {
    margin-left: 5px;
    color: var(--accent-ink);
    content: "✓";
  }

  .toc a code {
    font-size: 0.9em;
  }
}

/* Thin bar under the top bar that fills as the chapter is read. Driven by scroll position in CSS where
   supported; app.js updates it elsewhere. */
.read-progress {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgb(var(--accent-2-rgb)));
  transform: scaleX(var(--read, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .read-progress {
    animation: read-grow linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes read-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.dock {
  display: none;
}

@media (max-width: 900px) {
  .dock {
    position: fixed;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    left: 10px;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 56px;
    padding: 5px;
    border: 1px solid var(--ring);
    border-radius: 18px;
    background: var(--surface-2);
    box-shadow: var(--shadow-lift);
    backdrop-filter: saturate(1.6) blur(18px);
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
  }

  .dock-btn,
  .dock-title {
    height: 46px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .dock-btn {
    display: grid;
    flex: none;
    place-items: center;
    width: 46px;
  }

  .dock-btn:active,
  .dock-title:active {
    background: rgba(var(--accent-rgb), 0.14);
  }

  .dock-title {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
    text-align: left;
  }

  .dock-kicker {
    color: var(--ink-3);
    font-size: calc(11px * var(--ts));
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
  }

  .dock-name {
    max-width: 100%;
    overflow: hidden;
    font-size: calc(14px * var(--ts));
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .dock-learned {
    color: var(--ink-3);
  }

  .dock-learned .learned-box {
    width: 20px;
    height: 20px;
    border-radius: 6px;
  }

  .dock-learned[aria-pressed="true"] {
    color: var(--accent-ink);
  }

  .layout-chapter main {
    padding-bottom: 96px;
  }

  body[data-page="chapter"] .to-top {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 640px) {
  .chapter-pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .pager-next {
    grid-column: auto;
  }

  .continue {
    padding: 16px 16px 16px 18px;
  }

  .continue-title {
    font-size: calc(17px * var(--ts));
  }
}

/* Moving between pages: the top bar, sidebar and dock stay put while the page content cross-fades and
   settles upward. Supported in Chrome and Safari 18.2+; other browsers simply load the page. */
@view-transition {
  navigation: auto;
}

.topbar {
  view-transition-name: topbar;
}

.dock {
  view-transition-name: dock;
}

@media (min-width: 901px) {
  .sidebar {
    view-transition-name: sidebar;
  }
}

::view-transition-old(root) {
  animation: vt-out 0.14s ease-out both;
}

::view-transition-new(root) {
  animation: vt-in 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes vt-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Optional "Advanced" depth: labelled, and foldable with one switch. */

.badge-advanced {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid rgba(var(--adv), 0.35);
  border-radius: 999px;
  background: rgba(var(--adv), 0.12);
  color: rgb(var(--adv-ink));
  font-size: calc(11px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
}

.advanced {
  margin: 20px 0;
  padding: 14px 16px 4px;
  border: 1px dashed rgba(var(--adv), 0.4);
  border-radius: 14px;
  background: rgba(var(--adv), 0.04);
}

.advanced-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
}

.advanced-title {
  font-size: calc(15px * var(--ts));
  font-weight: 700;
}

.advanced-body > :last-child {
  margin-bottom: 12px;
}

.advanced-show {
  display: none;
  margin-left: auto;
  padding: 3px 12px;
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: calc(12.5px * var(--ts));
  font-weight: 600;
  cursor: pointer;
}

.advanced-show:hover {
  color: var(--ink);
}

/* Hidden: an advanced block shrinks to its one-line header; an advanced topic to its title row. */
.hide-advanced .advanced:not(.reveal) {
  padding-bottom: 0;
}

.hide-advanced .advanced:not(.reveal) .advanced-head {
  margin-bottom: 12px;
}

.hide-advanced .advanced:not(.reveal) .advanced-body,
.hide-advanced .topic-advanced:not(.reveal) .topic-body {
  display: none;
}

.hide-advanced .advanced:not(.reveal) .advanced-show,
.hide-advanced .topic-advanced:not(.reveal) .advanced-show {
  display: inline-flex;
}

.hide-advanced .topic-advanced:not(.reveal) {
  contain-intrinsic-size: auto 80px;
}

.hide-advanced .topic-advanced:not(.reveal) .topic-head {
  margin-bottom: 0;
}

/* A folded topic's row is just title, badge and Show; Learned comes back once it's shown. */
.hide-advanced .topic-advanced:not(.reveal) .learned {
  display: none;
}

.topic-head .advanced-show {
  margin-left: auto;
}

.hide-advanced .nav a[data-adv] {
  opacity: 0.55;
}

.advanced-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 14px;
  color: var(--ink-3);
  font-size: calc(13px * var(--ts));
}

.advanced-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: calc(13.5px * var(--ts));
  font-weight: 600;
  cursor: pointer;
}

.switch-track {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--ring);
  box-shadow: inset 0 0 0 1px var(--ring);
  transition: background 0.2s;
}

.switch-track::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-3);
  content: "";
  transition: transform 0.2s, background 0.2s;
}

.advanced-switch[aria-checked="true"] .switch-track {
  background: rgba(var(--adv), 0.55);
}

.advanced-switch[aria-checked="true"] .switch-track::after {
  background: #fff;
  transform: translateX(14px);
}

@media (max-width: 640px) {
  .advanced {
    margin-right: -4px;
    margin-left: -4px;
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* Highlights: the reader's own marks and notes, the selection toolbar, the note editor and the revision page. */

:root {
  --hl-bg: rgba(250, 204, 21, 0.42);
  --hl-bg-strong: rgba(250, 204, 21, 0.75);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hl-bg: rgba(250, 204, 21, 0.3);
    --hl-bg-strong: rgba(250, 204, 21, 0.6);
  }
}

:root[data-theme="dark"] {
  --hl-bg: rgba(250, 204, 21, 0.3);
  --hl-bg-strong: rgba(250, 204, 21, 0.6);
}

mark.hl {
  padding: 0.05em 0;
  border-radius: 0;
  background: var(--hl-bg);
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  cursor: pointer;
  transition: background 0.2s;
}

/* A highlight is often many <mark> pieces (every coloured word in code is its own element): only the first and
   last pieces get rounded corners, and hover lights up all pieces together (.hl-hover, set by app.js). */
mark.hl.hl-start {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

mark.hl.hl-end {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.hl-list mark.hl {
  border-radius: 3px;
}

mark.hl.hl-hover,
.hl-list mark.hl:hover,
mark.hl-flash {
  background: var(--hl-bg-strong);
}

mark.hl.has-note.hl-end::after {
  margin-left: 2px;
  color: var(--accent-ink);
  font-size: 0.75em;
  vertical-align: super;
  content: "✎";
}

/* Only the last piece of a highlight that spans several elements gets the note marker (.hl-end, set by app.js). */

.hl-toolbar,
.hl-editor {
  position: fixed;
  z-index: 60;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--surface-2);
  box-shadow: var(--shadow-lift);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
}

.hl-toolbar {
  display: flex;
  gap: 2px;
  padding: 4px;
}

.hl-toolbar[hidden],
.hl-editor[hidden] {
  display: none;
}

.hl-toolbar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(14px * var(--ts));
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hl-toolbar button:hover,
.hl-toolbar button:active {
  background: rgba(var(--accent-rgb), 0.14);
}

.hl-editor {
  width: min(360px, calc(100vw - 16px));
  padding: 12px;
}

.hl-editor textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  padding: 9px 11px;
  border: 1px solid var(--ring);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: calc(15px * var(--ts));
  line-height: 1.5;
  resize: vertical;
}

.hl-editor textarea:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  outline: none;
}

.hl-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.hl-delete {
  color: rgb(var(--gotcha));
  font-size: calc(13px * var(--ts));
}

.nav-highlights {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid var(--ring);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: calc(14px * var(--ts));
  font-weight: 650;
  text-decoration: none;
}

.nav-highlights span:nth-child(2) {
  flex: 1;
}

.nav-highlights:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
}

.hl-home {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: -8px 0 22px;
  padding: 14px 18px;
  border: 1px solid var(--ring);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
  color: var(--ink);
  text-decoration: none;
}

.hl-home[hidden] {
  display: none;
}

.hl-home-icon {
  font-size: calc(22px * var(--ts));
}

.hl-home-text {
  display: flex;
  flex-direction: column;
  font-size: calc(13.5px * var(--ts));
  color: var(--ink-2);
}

.hl-home-text strong {
  color: var(--ink);
  font-size: calc(16px * var(--ts));
}

.hl-home .continue-arrow {
  grid-area: auto; /* .continue's named area would push it onto a row of its own */
  width: 36px;
  height: 36px;
}

.layout-highlights .hl-page {
  padding-top: 12px;
}

.layout-highlights .chapter-head {
  padding-top: 0;
  border-top: 0;
}

.hl-summary,
.hl-empty {
  color: var(--ink-2);
}

.hl-chapter {
  margin: 34px 0 6px;
  font-size: calc(21px * var(--ts));
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hl-chapter .chapter-num {
  display: block;
  margin-bottom: 2px;
  font-size: calc(11.5px * var(--ts));
}

.hl-topic {
  margin: 18px 0 8px;
  font-size: calc(15px * var(--ts));
  font-weight: 700;
}

.hl-topic a {
  color: var(--ink);
  text-decoration: none;
}

.hl-item {
  margin-bottom: 10px;
  padding: 12px 16px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: inset 0 1px 0 var(--edge);
}

.hl-quote {
  display: block;
  color: var(--ink);
  line-height: 1.7;
  text-decoration: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hl-note {
  margin: 8px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  color: var(--ink-2);
  font-size: calc(14.5px * var(--ts));
  white-space: pre-wrap;
}

.hl-item-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: calc(13px * var(--ts));
}

@media print {
  .hl-toolbar,
  .hl-editor,
  .nav-highlights {
    display: none !important;
  }
}

/* While landing on a #fragment, every topic is drawn for real so positions are exact (see landOn in app.js). */
.cv-off .topic {
  content-visibility: visible;
}

/* Images on highlight notes: thumbnails (editor and revision page) and a full-screen viewer. */
.hl-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hl-thumbs:empty {
  display: none;
}

.hl-editor .hl-thumbs {
  margin-top: 10px;
}

.hl-item .hl-thumbs {
  margin-top: 10px;
}

.hl-thumb {
  position: relative;
  display: block;
  width: 88px;
  height: 66px;
  overflow: hidden;
  border: 1px solid var(--ring);
  border-radius: 10px;
  background: var(--surface);
}

.hl-item .hl-thumbs {
  flex-direction: column;
  align-items: flex-start;
}

.hl-item .hl-thumb {
  width: 100%;
  max-width: 460px;
  height: auto;
}

.hl-item .hl-thumb img {
  height: auto;
}

.hl-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* show the whole image, never crop a tall screenshot */
  cursor: zoom-in;
}

.hl-thumb-missing::after {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: calc(11px * var(--ts));
  content: "Sign in to view";
}

.hl-thumb-remove {
  position: absolute;
  top: 3px;
  right: 3px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-size: calc(15px * var(--ts));
  line-height: 1;
  cursor: pointer;
}

.hl-editor-msg {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: calc(13px * var(--ts));
}

.hl-editor-msg[hidden] {
  display: none;
}

.hl-attach {
  cursor: pointer;
  font-size: calc(13px * var(--ts));
}

.hl-editor-actions > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.hl-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: block;
  padding: 56px 12px 24px;
  overflow: auto;
  overscroll-behavior: contain;
  background: rgba(2, 6, 23, 0.92);
  text-align: center;
}

.hl-viewer[hidden] {
  display: none;
}

/* Full width (up to the image's own size), natural height: a tall screenshot is read by scrolling. */
.hl-viewer img {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.hl-viewer-close {
  position: fixed;
  top: 14px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: calc(24px * var(--ts));
  cursor: pointer;
}

/* Bigger targets for the highlight toolbar on touch screens. */
@media (pointer: coarse) {
  .hl-toolbar {
    padding: 6px;
    gap: 4px;
  }

  .hl-toolbar button {
    padding: 12px 16px;
    font-size: calc(15px * var(--ts));
  }
}

/* End-of-topic bar: "Mark learned & next" where the reader finishes, plus "Mark learned" on its own. */
.topic-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--ring);
}

.topic-next {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 10px 16px 10px 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-radius: 14px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.topic-next:hover {
  background: rgba(var(--accent-rgb), 0.2);
}

.topic-next:active {
  transform: translateY(1px);
}

.topic-next .learned-box {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--accent-ink);
}

.topic-next[aria-pressed="true"] .learned-box {
  border-color: var(--accent);
  background: var(--accent);
}

.topic-next[aria-pressed="true"] .learned-box::after {
  color: var(--on-accent, #111);
  font-size: calc(12px * var(--ts));
  font-weight: 900;
  line-height: 1;
  content: "✓";
}

.topic-next-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topic-next-action {
  font-size: calc(14.5px * var(--ts));
  font-weight: 700;
}

.topic-next-label {
  overflow: hidden;
  color: var(--ink-2);
  font-size: calc(13px * var(--ts));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topic-next-arrow {
  flex: none;
  color: var(--accent-ink);
  font-size: calc(18px * var(--ts));
  font-weight: 700;
}

.topic-learn-only {
  color: var(--ink-3);
  font-size: calc(13px * var(--ts));
}

.topic-learn-only[aria-pressed="true"] .learned-label::before {
  content: "✓ ";
}

.topic-learn-only[aria-pressed="true"]::after {
  margin-left: 6px;
  color: var(--ink-3);
  font-size: calc(12px * var(--ts));
  content: "(tap to undo)";
}

.hide-advanced .topic-advanced:not(.reveal) .topic-foot {
  display: none;
}

@media (max-width: 640px) {
  .topic-next {
    width: 100%;
  }
}

/* Search on the revision page. */
.hl-search {
  position: relative;
  display: block;
  margin: 4px 0 18px;
}

.hl-search[hidden] {
  display: none;
}

.hl-search svg {
  position: absolute;
  top: 50%;
  left: 14px;
  color: var(--ink-3);
  transform: translateY(-50%);
  pointer-events: none;
}

.hl-search input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: calc(16px * var(--ts)); /* 16px stops iOS zooming in on focus */
}

.hl-search input:focus {
  border-color: rgba(var(--accent-rgb), 0.6);
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}

.hl-match {
  border-radius: 3px;
  background: rgba(var(--accent-rgb), 0.35);
  color: inherit;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.5);
}

/* Text found inside images (OCR): the reading status and the "In image" snippet on a search match. */
.hl-ocr-status {
  margin: -8px 0 14px;
  color: var(--ink-3);
  font-size: calc(13px * var(--ts));
}

.hl-ocr-status[hidden] {
  display: none;
}

.hl-imgtext {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: calc(13.5px * var(--ts));
}

.hl-imgtext span {
  margin-right: 4px;
  color: var(--ink-3);
  font-size: calc(12px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Bookmarks: the ☆/★ button in a topic's header, the ★ in the sidebar and "On this page", and the list on the
   revision page. */
/* ☆ and Learned stay together on the right, and wrap as one unit on narrow screens. */
.topic-actions {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.topic-actions .learned {
  margin-left: 0;
}

.bookmark {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-size: calc(17px * var(--ts));
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.bookmark:hover {
  color: var(--ink);
}

.bookmark[aria-pressed="true"] {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(245, 158, 11, 0.16);
  color: #f59e0b;
}

.hide-advanced .topic-advanced:not(.reveal) .bookmark {
  display: none;
}

.nav-chapter ul a.is-bookmarked::after {
  margin-left: 6px;
  color: #f59e0b;
  font-size: calc(12px * var(--ts));
  content: "★";
}

.nav-chapter ul a.is-bookmarked.is-learned::after {
  content: "★ ✓";
}

.toc a.is-bookmarked::after {
  margin-left: 5px;
  color: #f59e0b;
  content: "★";
}

.toc a.is-bookmarked.is-learned::after {
  content: "★ ✓";
}

.bm-list:empty {
  display: none;
}

.bm-list {
  margin-bottom: 26px;
}

.bm-title {
  margin: 8px 0 10px;
  font-size: calc(19px * var(--ts));
  font-weight: 800;
}

.bm-title span {
  margin-left: 6px;
  color: var(--ink-3);
  font-size: calc(14px * var(--ts));
  font-weight: 600;
}

.bm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 10px 14px;
  border: 1px solid var(--ring);
  border-radius: 12px;
  background: var(--surface);
}

.bm-link {
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.bm-topic {
  font-weight: 650;
}

.bm-topic::before {
  margin-right: 6px;
  color: #f59e0b;
  content: "★";
}

.bm-chapter {
  color: var(--ink-3);
  font-size: calc(12.5px * var(--ts));
}

.bm-item .link-btn {
  flex: none;
  color: var(--ink-3);
  font-size: calc(13px * var(--ts));
}

/* "My explanation" boxes: the reader's own notes and screenshots, shown in the topic under what they highlighted.
   Warm amber, so they never read as part of the course. */
:root {
  --myx: 217, 119, 6;
  --myx-ink: 180, 83, 9;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --myx: 245, 158, 11;
    --myx-ink: 251, 191, 36;
  }
}

:root[data-theme="dark"] {
  --myx: 245, 158, 11;
  --myx-ink: 251, 191, 36;
}

.myx {
  position: relative;
  margin: 0 0 16px;
  padding: 8px 16px 14px 18px;
  overflow: hidden;
  border: 1px solid rgba(var(--myx), 0.3);
  border-radius: 14px;
  background: rgba(var(--myx), 0.07);
}

.myx::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: rgb(var(--myx));
  content: "";
}

.myx.is-folded {
  padding-bottom: 8px;
}

.hide-myx .myx {
  display: none;
}

.myx-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.myx-fold {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.myx-chev::before {
  display: inline-block;
  color: rgb(var(--myx-ink));
  font-size: calc(11px * var(--ts));
  content: "▼";
  transition: transform 0.15s;
}

.is-folded .myx-chev::before {
  transform: rotate(-90deg);
}

.myx-label {
  flex: none;
  color: rgb(var(--myx-ink));
  font-size: calc(13.5px * var(--ts));
  font-weight: 700;
}

.myx-quote {
  min-width: 0;
  overflow: hidden;
  color: var(--ink-3);
  font-size: calc(13px * var(--ts));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.myx-edit {
  flex: none;
  font-size: calc(13px * var(--ts));
}

.myx-body {
  margin-top: 8px;
}

.is-folded .myx-body {
  display: none;
}

/* Long text folds after about 15 lines (in boxes and on the revision page); screenshots never fold. While the
   revision page is searched nothing folds, so every match is visible. */
.myx .myx-text,
.hl-item .myx-text {
  max-height: 15lh;
  overflow: hidden;
}

.myx:not(.is-more) .myx-text:has(+ .myx-more:not([hidden])),
.hl-item:not(.is-more) .myx-text:has(+ .myx-more:not([hidden])) {
  -webkit-mask-image: linear-gradient(#000 75%, transparent);
  mask-image: linear-gradient(#000 75%, transparent);
}

.myx.is-more .myx-text,
.hl-item.is-more .myx-text,
.is-searching .hl-item .myx-text {
  max-height: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.is-searching .myx-more {
  display: none;
}

.myx-more {
  margin-top: 6px;
  font-size: calc(13.5px * var(--ts));
}

.myx-text > :last-child {
  margin-bottom: 0;
}

.myx-text p,
.myx-text ul,
.myx-text ol {
  margin: 0 0 12px;
  color: var(--ink);
}

.myx-text ul,
.myx-text ol {
  padding-left: 22px;
}

.myx-text li + li {
  margin-top: 4px;
}

.myx-text h4 {
  margin: 18px 0 8px;
  font-size: calc(16px * var(--ts));
  font-weight: 700;
}

.myx-text h5 {
  margin: 16px 0 8px;
  color: var(--ink-2);
  font-size: calc(13.5px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.myx-text > h4:first-child,
.myx-text > h5:first-child {
  margin-top: 4px;
}

.myx-text p code,
.myx-text li code {
  overflow-wrap: anywhere;
}

.myx-text blockquote {
  margin: 0 0 12px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid rgba(var(--myx), 0.6);
  color: var(--ink-2);
}

.myx-text .code {
  margin: 4px 0 14px;
}

.myx-text .table-wrap {
  margin: 4px 0 14px;
}

.myx-plain {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.myx-imgs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.myx-more + .myx-imgs,
.myx-text + .myx-imgs {
  margin-top: 12px;
}

.myx .hl-thumb {
  width: 100%;
  max-width: 560px;
  height: auto;
}

.myx .hl-thumb img {
  height: auto;
}

/* The note editor's Preview: wide, in the same warm style as the note's box in the topic, scrolling inside when the
   note is long. Edit mode is a little wider than before too. */
.hl-editor {
  width: min(420px, calc(100vw - 16px));
}

.hl-editor.is-preview {
  display: flex;
  flex-direction: column;
  width: min(680px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  padding: 14px;
}

.hl-editor.is-preview .hl-preview {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  min-height: 0;
}

.hl-editor.is-preview .hl-preview-body {
  flex: 0 1 auto;
  min-height: 0;
}

.hl-editor.is-preview > :not(.hl-preview) {
  flex: none;
}

.hl-editor:focus {
  outline: none;
}

.hl-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--myx), 0.3);
  border-radius: 12px;
  background: linear-gradient(rgba(var(--myx), 0.07), rgba(var(--myx), 0.07)), var(--bg);
}

.hl-preview::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: rgb(var(--myx));
  content: "";
}

.hl-preview-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 11px 16px 9px 18px;
  border-bottom: 1px solid rgba(var(--myx), 0.18);
}

.hl-preview-head .myx-quote {
  font-size: 13px;
}

.hl-preview-body {
  max-height: min(62vh, 560px);
  padding: 14px 18px 16px 18px;
  overflow: auto;
  overscroll-behavior: contain;
  font-size: 15px;
  line-height: 1.65;
}

.hl-preview-body .myx-imgs:not(:empty) {
  margin-top: 12px;
}

.hl-preview-body .myx-text:empty + .myx-imgs {
  margin-top: 0;
}

.hl-preview-body .hl-thumb {
  width: 100%;
  max-width: 640px;
  height: auto;
}

.hl-preview-body .hl-thumb img {
  height: auto;
}

.hl-preview-empty {
  color: var(--ink-3);
}

/* What each mode offers: editing has the text box, image, Preview and Save; the preview has Edit (and Save when
   there are unsaved changes). */
.hl-editor .hl-edit-btn,
.hl-editor.is-preview .hl-attach,
.hl-editor.is-preview .hl-preview-btn,
.hl-editor.is-preview [data-hl-editor-images],
.hl-editor.is-preview:not(.is-dirty) .hl-save-btn {
  display: none;
}

.hl-editor.is-preview .hl-edit-btn {
  display: inline-block;
}

.hl-editor.is-preview.is-dirty .hl-edit-btn {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ring);
  color: var(--ink);
}

.myx-switch[aria-checked="true"] .switch-track {
  background: rgba(var(--myx), 0.7);
}

/* The editor's button row: two groups that never break inside; on a narrow phone the Close/Save group moves to
   its own line, right-aligned. */
.hl-editor-actions {
  flex-wrap: wrap;
}

.hl-editor-actions > span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.hl-editor-actions > span:last-child {
  gap: 8px;
  margin-left: auto;
}

.hl-preview-btn {
  font-size: calc(13px * var(--ts));
}

/* A formatted note on the revision page: laid out like its box in the topic. */
.hl-note-md {
  padding-top: 2px;
  color: var(--ink);
  font-size: calc(15px * var(--ts));
  white-space: normal;
}

.hl-item .myx-more {
  margin: 6px 0 0 12px;
}

/* Revision page: one chapter at a time. Chips wrap on wide screens and scroll sideways in one row on phones. */
.hl-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 20px;
}

.hl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 280px;
  padding: 6px 12px;
  overflow: hidden;
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: calc(13.5px * var(--ts));
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.hl-chip i {
  min-width: 0;
  overflow: hidden;
  font-style: normal;
  text-overflow: ellipsis;
}

.hl-chip b {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: calc(12px * var(--ts));
  font-weight: 600;
}

.hl-chip span {
  flex: none;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ring);
  color: var(--ink-3);
  font-size: calc(12px * var(--ts));
  text-align: center;
}

.hl-chip:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--ink);
}

.hl-chip[aria-pressed="true"] {
  border-color: rgba(var(--accent-rgb), 0.7);
  background: rgba(var(--accent-rgb), 0.16);
  color: var(--ink);
}

.hl-chip[aria-pressed="true"] b,
.hl-chip[aria-pressed="true"] span {
  color: var(--ink);
}

@media (max-width: 640px) {
  .hl-chapters {
    flex-wrap: nowrap;
    margin-right: -16px;
    margin-left: -16px;
    padding: 2px 16px 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .hl-chapters::-webkit-scrollbar {
    display: none;
  }

  .hl-chip {
    flex: none;
    max-width: 220px;
  }
}

/* Home: "Continue" and "Up next" side by side on wide screens. */
.continue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 22px;
}

.continue-row .continue {
  margin: 0;
}

.has-next .continue-row {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.dash-next {
  border-color: var(--ring);
  background: var(--surface);
}

@media (max-width: 720px) {
  .has-next .continue-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Home dashboard. The tiles follow the width they actually get (container queries), not the screen's: with the
   sidebar open on a laptop the content column is narrower than the window. */
.dash {
  margin: 0 0 26px;
  container-type: inline-size;
}

.dash-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 12px;
}

.dash-tile {
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--ring);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow), inset 0 1px 0 var(--edge);
}

.dash-tile p {
  margin: 0;
}

.dash-label {
  color: var(--ink-3);
  font-size: calc(12px * var(--ts));
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dash-big {
  margin: 2px 0 !important;
  font-size: calc(30px * var(--ts));
  font-weight: 780;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.dash-big small {
  color: var(--ink-3);
  font-size: 0.5em;
  font-weight: 650;
  letter-spacing: 0;
}

.dash-sub {
  color: var(--ink-2);
  font-size: calc(13px * var(--ts));
}

.dash-progress {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dash-ring {
  flex: none;
  width: 72px;
  height: 72px;
}

.dash-ring .ring-track,
.dash-ring .ring-fill {
  stroke-width: 5;
}

.dash-ring .ring-fill {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dash-streak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dash-streak > div:first-child {
  min-width: 0;
}

/* 12 weeks × 7 days, a column per week. */
.dash-heat {
  display: grid;
  flex: none;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 10px);
  grid-auto-columns: 10px;
  gap: 3px;
}

.dash-heat i {
  border-radius: 3px;
  background: var(--ring);
}

/* Shades of the theme's readable accent (darker in light mode), so even the faintest day shows on white. */
.dash-heat .l1 {
  background: color-mix(in srgb, var(--accent-ink) 32%, transparent);
}

.dash-heat .l2 {
  background: color-mix(in srgb, var(--accent-ink) 55%, transparent);
}

.dash-heat .l3 {
  background: color-mix(in srgb, var(--accent-ink) 78%, transparent);
}

.dash-heat .l4 {
  background: var(--accent-ink);
}

.dash-heat .today {
  box-shadow: 0 0 0 1.5px var(--ink-2);
}

.dash-heat .future {
  background: transparent;
}

.dash-week-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: calc(14px * var(--ts));
}

.dash-week-list li + li {
  margin-top: 4px;
}

.dash-week-list b {
  color: var(--ink);
  font-size: calc(16px * var(--ts));
  font-variant-numeric: tabular-nums;
}

.dash-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 22px 0 10px;
  font-size: calc(17px * var(--ts));
  font-weight: 700;
}

.dash-h a {
  color: var(--accent-ink);
  font-size: calc(13.5px * var(--ts));
  font-weight: 600;
  text-decoration: none;
}

.dash-recent ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-recent li a {
  display: block;
  padding: 12px 16px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s;
}

.dash-recent li a:hover {
  border-color: rgba(var(--accent-rgb), 0.45);
}

.dash-recent mark.hl {
  border-radius: 3px;
  line-height: 1.6;
}

.dash-where {
  display: block;
  margin-top: 4px;
  color: var(--ink-3);
  font-size: calc(12.5px * var(--ts));
}

.dash-install {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px dashed rgba(var(--accent-rgb), 0.5);
  border-radius: 16px;
  background: rgba(var(--accent-rgb), 0.06);
}

.dash-install-icon {
  font-size: calc(22px * var(--ts));
}

.dash-install-text {
  display: flex;
  flex-direction: column;
  font-size: calc(13.5px * var(--ts));
}

.dash-install-text span {
  color: var(--ink-2);
}

@container (max-width: 820px) {
  .dash-tiles {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .dash-streak {
    grid-column: 1 / -1;
    order: -1;
  }
}

@container (max-width: 400px) {
  .dash-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .dash-heat {
    grid-template-rows: repeat(7, 9px);
    grid-auto-columns: 9px;
    gap: 2.5px;
  }

  .dash-ring {
    width: 60px;
    height: 60px;
  }
}

/* Reading settings ("Aa") */
.reading {
  position: relative;
  flex: none;
}

.reading-btn span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.reading-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  width: 300px;
  padding: 14px 16px;
  border: 1px solid var(--ring);
  border-radius: 16px;
  /* Solid: a blur can't work here (the top bar it sits in already blurs), so the page would show through. */
  background: linear-gradient(var(--surface-2), var(--surface-2)), var(--bg);
  box-shadow: var(--shadow-lift);
}

.reading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reading-row + .reading-row {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ring);
}

.reading-label {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.reading-hint {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 500;
}

.reading-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reading-size output {
  min-width: 44px;
  color: var(--ink-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.reading-step {
  width: 38px;
  height: 34px;
  border: 1px solid var(--ring);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.reading-step:disabled {
  opacity: 0.35;
  cursor: default;
}

.reading-dots {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 8px;
}

.reading-dots i {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  background: var(--ring);
}

.reading-dots i.on {
  background: var(--accent);
}

.reading-offline .btn {
  flex: none;
}

.offline-chip {
  flex: none;
  padding: 4px 10px;
  border: 1px solid rgba(var(--gotcha), 0.4);
  border-radius: 999px;
  background: rgba(var(--gotcha), 0.12);
  color: rgb(var(--gotcha));
  font-size: 12.5px;
  font-weight: 650;
}

@media (max-width: 900px) {
  .reading-panel {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    right: 10px;
    left: 10px;
    width: auto;
  }
}

/* Focus mode: on a wide screen, the sidebar and "On this page" go and the text is centred; on a phone, the top bar
   slides away while scrolling down (.bar-hidden, set by app.js). */
@media (min-width: 901px) {
  .focus .layout,
  .focus .layout-chapter {
    grid-template-columns: minmax(0, 1fr);
  }

  .focus .sidebar,
  .focus .toc {
    display: none;
  }
}

.topbar {
  transition: transform 0.25s ease;
}

.bar-hidden .topbar {
  transform: translateY(-100%);
}

/* Bookmarks on Advanced parts: a smaller ☆ at the right of the part's title bar. */
.bookmark-part {
  width: 28px;
  height: 28px;
  margin-left: auto;
  font-size: calc(15px * var(--ts));
}

.advanced-head .bookmark-part + .advanced-show {
  margin-left: 0;
}

/* The selection toolbar's two actions are separated by a thin line. */
.hl-toolbar button + button {
  position: relative;
}

.hl-toolbar button + button::before {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: -2px;
  width: 1px;
  background: var(--ring);
  content: "";
}

/* Short confirmation at the bottom of the screen ("★ Bookmarked … Undo"). */
.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 11px 16px;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: linear-gradient(var(--surface-2), var(--surface-2)), var(--bg);
  box-shadow: var(--shadow-lift);
  color: var(--ink);
  font-size: 14px;
  transform: translateX(-50%);
  animation: toast-in 0.2s ease;
}

.toast[hidden] {
  display: none;
}

.toast-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-text span {
  color: #f59e0b;
}

.toast-undo {
  flex: none;
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 650;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
}

@media (max-width: 900px) {
  /* Above the phone's bottom bar. */
  .toast {
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none;
  }
}

/* Live examples (:::demo, HTML & CSS site): the code, then the real result rendered in a frame. */
.demo {
  margin: 0 0 16px;
}

.demo-title {
  margin: 0 0 8px;
  color: var(--ink-2);
  font-size: calc(13px * var(--ts));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.demo .code {
  margin-bottom: 10px;
}

.demo-live {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ring);
  border-radius: 14px;
  background: #fff;
}

.demo-live figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid #e5e7eb;
  background: #f6f7f9;
  color: #4b5563;
  font-size: calc(12.5px * var(--ts));
  font-weight: 650;
}

.demo-live figcaption span:first-child::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #22c55e;
  vertical-align: 1px;
  content: "";
}

.demo-note {
  color: #9ca3af;
  font-weight: 500;
}

.demo-frame {
  display: block;
  width: 100%;
  height: 120px;
  border: 0;
  background: #fff;
}

/* Keyboard hint under the note box (computers only: phones keep Enter for new lines). */
.hl-editor-hint {
  margin: 6px 2px 0;
  color: var(--ink-3);
  font-size: 12px;
}

@media (pointer: coarse) {
  .hl-editor-hint {
    display: none;
  }
}

.demo-frame {
  max-width: none;
  transform-origin: 0 0;
}

/* A wide result viewed at full size scrolls sideways inside its box. */
.demo-live.is-actual {
  overflow-x: auto;
}

.demo-size {
  color: var(--accent-ink, #c2410c);
  font-size: inherit;
  font-weight: 650;
}

.demo-live .demo-size {
  color: #c2410c;
}