:root {
  --bg: #ffffff;
  --fg: #1f2933;
  --muted: #5f6b7a;
  --border: #d5dbe3;
  --row-alt: #f6f8fa;
  --head-bg: #eef2f6;
  --link: #0b5cad;
  --code-bg: #f1f3f5;
  --complete: #1f845a;
  --in-progress: #b07d00;
  --superseded: #8a5a00;
  --abandoned: #a33a3a;
  --brainstorm: #6b4fbb;
  --warn-bg: #fff4e5;
  --warn-border: #e0a040;
  --jw-bg: #fdd;
  --jw-fg: #3b1c1c;
  --jw-border: #d9534f;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14181d;
    --fg: #e4e8ee;
    --muted: #9aa5b3;
    --border: #2f3843;
    --row-alt: #1a2027;
    --head-bg: #202833;
    --link: #6cb2ff;
    --code-bg: #222a33;
    --complete: #4bce97;
    --in-progress: #e2b203;
    --superseded: #f1a94e;
    --abandoned: #f08a8a;
    --brainstorm: #b9a3ff;
    --warn-bg: #2b2313;
    --warn-border: #a37a2d;
    --jw-bg: #3a1f22;
    --jw-fg: #f4c9c6;
    --jw-border: #e5615c;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wrap { max-width: 1440px; margin: 0 auto; padding: 24px 16px 64px; }
.wrap.note { max-width: 860px; }

a { color: var(--link); }

header.site {
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  padding-bottom: 12px;
}
header.site h1 { margin: 0 0 4px; font-size: 1.7rem; }
header.site p { margin: 0; color: var(--muted); }
header.site nav { margin-top: 8px; font-size: 0.95rem; }
header.site nav a { margin-right: 14px; }

h1, h2, h3 { line-height: 1.25; }
h2 { margin-top: 2em; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
h3 { margin-top: 1.6em; }

code {
  background: var(--code-bg);
  padding: 1px 5px;
  border-radius: 4px;
  font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.table-scroll { overflow-x: auto; margin: 12px 0 24px; border: 1px solid var(--border); border-radius: 6px; }

table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
thead th { background: var(--head-bg); position: sticky; top: 0; }
tbody tr:nth-child(even) { background: var(--row-alt); }
tbody tr:last-child td { border-bottom: none; }

td.num, th.num { text-align: right; white-space: nowrap; }
table.notes td.date { white-space: nowrap; }
table.notes td.desc { min-width: 300px; }
table.notes td.kw { min-width: 150px; color: var(--muted); }
table.notes td.link { white-space: nowrap; font-weight: 600; }
table.notes th:last-child { min-width: 120px; }

table.compact { width: auto; }
table.compact td, table.compact th { padding: 5px 10px; }

.status { font-weight: 600; white-space: nowrap; }
.status.complete { color: var(--complete); }
.status.in-progress { color: var(--in-progress); }
.status.superseded { color: var(--superseded); }
.status.abandoned { color: var(--abandoned); }
.status.brainstorm { color: var(--brainstorm); }
.status.under-dev { color: var(--in-progress); }
.status.done { color: var(--complete); }

.meta { color: var(--muted); font-size: 0.95rem; margin: 4px 0 18px; }
.meta strong { color: var(--fg); }

.callout {
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  border-radius: 6px;
  padding: 10px 14px;
  margin: 16px 0;
}
/* A note that was reopened and completed again, when its author did not say so at the top (build_notes.py). */
.revised-box { background: var(--jw-bg); color: var(--jw-fg); border: 2px solid var(--jw-border); border-radius: 6px; padding: 12px 16px; margin: 16px 0; }
.revised-box a { color: inherit; text-decoration: underline; }
.callout strong.tag { text-transform: uppercase; letter-spacing: 0.03em; }

pre { background: var(--code-bg); padding: 12px 14px; border-radius: 6px; overflow-x: auto; font-size: 0.88rem; line-height: 1.45; }
pre code { background: none; padding: 0; font-size: inherit; }

figure { margin: 18px 0; }
figure img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 4px; background: #fff; }
figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }
/* A picture whose caption is its own paragraph (not inside the brackets of the Markdown image) is a plain
   image in a paragraph, not a figure. Scale it to the column like a figure's image; without this it shows at
   its natural size and the note scrolls sideways. */
/* Formulas in a note ($...$ and $$...$$ in the Markdown) are drawn by the browser as MathML (pandoc --mathml). */
.note math { font-size: 1.05em; }
.note math[display="block"] { margin: 0.8em 0; overflow-x: auto; overflow-y: hidden; }
.note p > img, .note p > a > img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 4px; background: #fff; }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }

ul.repo li { margin-bottom: 6px; }

footer { margin-top: 48px; padding-top: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }

/* Jupyter-style DeprecationWarning box: the red-tinted stderr block a notebook shows for a warning. */
pre.jupyter-warning {
  background: var(--jw-bg);
  color: var(--jw-fg);
  border-left: 4px solid var(--jw-border);
  border-radius: 2px;
  padding: 10px 14px;
  margin: 10px 0 14px;
  font: 0.88rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}
p.caption { color: var(--muted); font-size: 0.9rem; margin: 14px 0 0; }
details { margin: 4px 0 18px; }
details summary { cursor: pointer; color: var(--link); }

/* Outline of section links at the top of a note. */
nav.outline { border: 1px solid var(--border); background: var(--row-alt); border-radius: 6px; padding: 8px 14px; margin: 14px 0 6px; font-size: 0.95rem; }
nav.outline ol { margin: 4px 0 2px; padding-left: 22px; columns: 2; column-gap: 28px; }
nav.outline li { break-inside: avoid; }
@media (max-width: 720px) { nav.outline ol { columns: 1; } }
h2[id] { scroll-margin-top: 12px; }

/* Icons for the AI agent links. Each is a mask, so it takes its color from the page and works in dark mode.
   The files are in img/agents/ (see the README there for their sources and licenses). */
.ico {
  display: inline-block; width: 1.3em; height: 1.3em; vertical-align: -0.28em; flex: none;
  background-color: var(--ico, currentColor);
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
}
.ico-claude     { --mask: url(img/agents/claude.svg);        --ico: #d97757; }
.ico-claudecode { --mask: url(img/agents/claudecode.svg);    --ico: #d97757; }
.ico-gemini     { --mask: url(img/agents/googlegemini.svg);  --ico: #8e75b2; }
.ico-perplexity { --mask: url(img/agents/perplexity.svg);    --ico: #1fb8cd; }
.ico-cursor     { --mask: url(img/agents/cursor.svg); }
.ico-github     { --mask: url(img/agents/github.svg); }
.ico-copilot    { --mask: url(img/agents/githubcopilot.svg); }
.ico-chat       { --mask: url(img/agents/chat.svg); }
.ico-terminal   { --mask: url(img/agents/terminal.svg); }
.ico-assistant  { --mask: url(img/agents/assistant.svg); }

/* The "AI Agents" button at the top right of the front page: a collage of the agents' icons */
header.site { position: relative; }
a.agent-link {
  position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 8px; border: 1px solid var(--border); border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: 1.05rem; background: var(--bg);
}
a.agent-link:hover, a.agent-link:focus-visible { border-color: var(--link); background: var(--head-bg); }
.agent-stack { display: inline-flex; align-items: center; }
.agent-stack .badge {
  display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem;
  margin-left: -0.7rem; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 1px var(--border);
  color: var(--fg);
}
.agent-stack .badge:first-child { margin-left: 0; }
.agent-stack .badge .ico { width: 1.4rem; height: 1.4rem; vertical-align: 0; }
@media (max-width: 640px) {
  a.agent-link { position: static; margin-bottom: 8px; }
}

/* The red "Routine maintenance" box on the front page */
:root { --maint-bg: #fdecec; --maint-border: #b3261e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --maint-bg: #381c1e; --maint-border: #f08a8a; }
}
.maintenance-box {
  background: var(--maint-bg); border: 2px solid var(--maint-border); border-left-width: 8px;
  border-radius: 6px; padding: 10px 16px; margin: 14px 0 20px;
}
.maintenance-box .mb-title {
  margin: 0 0 4px; font-weight: 800; color: var(--maint-border);
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem;
}
.maintenance-box p { margin: 0 0 6px; }
.maintenance-box p:last-child { margin-bottom: 0; }

/* student guides table on the front page: compact rows, with a few flowers in the corners */
.garden { position: relative; padding: 52px 0 56px; margin: 4px 0 8px; }
.garden::before, .garden::after { content: ""; position: absolute; left: 0; right: 0; height: 48px; pointer-events: none; background-repeat: no-repeat; }
.garden::before { top: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23f48fb1'%3E%3Ccircle cx='24' cy='11' r='9'/%3E%3Ccircle cx='36.5' cy='20' r='9'/%3E%3Ccircle cx='31.7' cy='34.7' r='9'/%3E%3Ccircle cx='16.3' cy='34.7' r='9'/%3E%3Ccircle cx='11.5' cy='20' r='9'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7' fill='%23ffd54f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23b39ddb'%3E%3Ccircle cx='24' cy='11' r='9'/%3E%3Ccircle cx='36.5' cy='20' r='9'/%3E%3Ccircle cx='31.7' cy='34.7' r='9'/%3E%3Ccircle cx='16.3' cy='34.7' r='9'/%3E%3Ccircle cx='11.5' cy='20' r='9'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7' fill='%23fff176'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='24' cy='11' r='9'/%3E%3Ccircle cx='36.5' cy='20' r='9'/%3E%3Ccircle cx='31.7' cy='34.7' r='9'/%3E%3Ccircle cx='16.3' cy='34.7' r='9'/%3E%3Ccircle cx='11.5' cy='20' r='9'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7' fill='%23ffca28'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3C/svg%3E"); background-size: 26px 26px, 44px 44px, 32px 32px, 22px 22px, 28px 28px, 20px 20px; background-position: right 128px bottom 4px, right 70px bottom 2px, right 34px bottom 4px, right 0 bottom 6px, right 190px bottom 4px, right 238px bottom 6px; }
.garden::after { bottom: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23ffb74d'%3E%3Ccircle cx='24' cy='11' r='9'/%3E%3Ccircle cx='36.5' cy='20' r='9'/%3E%3Ccircle cx='31.7' cy='34.7' r='9'/%3E%3Ccircle cx='16.3' cy='34.7' r='9'/%3E%3Ccircle cx='11.5' cy='20' r='9'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7' fill='%238d6e63'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='24' cy='11' r='9'/%3E%3Ccircle cx='36.5' cy='20' r='9'/%3E%3Ccircle cx='31.7' cy='34.7' r='9'/%3E%3Ccircle cx='16.3' cy='34.7' r='9'/%3E%3Ccircle cx='11.5' cy='20' r='9'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7' fill='%23ffca28'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='%23b39ddb'%3E%3Ccircle cx='24' cy='11' r='9'/%3E%3Ccircle cx='36.5' cy='20' r='9'/%3E%3Ccircle cx='31.7' cy='34.7' r='9'/%3E%3Ccircle cx='16.3' cy='34.7' r='9'/%3E%3Ccircle cx='11.5' cy='20' r='9'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='7' fill='%23fff176'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3C/svg%3E"); background-size: 26px 26px, 44px 44px, 30px 30px, 22px 22px, 28px 28px, 20px 20px; background-position: left 128px top 4px, left 70px top 2px, left 34px top 4px, left 0 top 6px, left 190px top 4px, left 238px top 6px; }
.garden .table-scroll { position: relative; z-index: 1; margin: 0; background: var(--bg); }
table.guides { font-size: 0.92rem; }
table.guides tbody tr:nth-child(even) { background: transparent; }
table.guides tbody tr:last-child td { border-bottom: none; }
table.guides tr.group th { background: var(--head-bg); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 3px 10px; position: static; border-bottom: 1px solid var(--border); }
table.guides td { vertical-align: middle; padding: 7px 10px; }
table.guides tbody tr:not(.group):hover { background: var(--row-alt); }
table.guides .gnum { width: 2.4rem; text-align: center; }
table.guides .badge { display: inline-block; min-width: 1.5rem; padding: 0; border-radius: 999px; background: var(--link); color: var(--bg); font-weight: 700; font-size: 0.8rem; line-height: 1.5rem; }
table.guides .gtitle a { font-weight: 600; line-height: 1.3; }
table.guides .gdesc { display: block; color: var(--muted); font-size: 0.8rem; line-height: 1.3; margin-top: 3px; }
table.guides .gtime { white-space: nowrap; color: var(--muted); font-size: 0.82rem; }
table.guides .gsys { white-space: nowrap; }
table.guides .tag { display: inline-block; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--code-bg); font-size: 0.72rem; color: var(--fg); }
table.guides .tag.any { background: transparent; color: var(--muted); }
@media (max-width: 640px) { .garden { padding: 48px 0 52px; } table.guides .gsys { white-space: normal; } table.guides th:nth-child(3), table.guides td.gtime { display: none; } }
@media print { .garden::before, .garden::after { display: none; } }
:root {
  --fl-op: 0.8;
  --fl-strip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 34'%3E%3Cpath transform='translate(4.0 10.0) scale(0.417)' d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3Ccircle cx='40.0' cy='10.0' r='4.9' fill='%23f48fb1'/%3E%3Ccircle cx='46.8' cy='14.8' r='4.9' fill='%23f48fb1'/%3E%3Ccircle cx='44.2' cy='22.8' r='4.9' fill='%23f48fb1'/%3E%3Ccircle cx='35.8' cy='22.8' r='4.9' fill='%23f48fb1'/%3E%3Ccircle cx='33.2' cy='14.8' r='4.9' fill='%23f48fb1'/%3E%3Ccircle cx='40.0' cy='17.0' r='3.8' fill='%23ffd54f'/%3E%3Cpath transform='translate(76.0 12.0) scale(-0.333 0.333)' d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3Ccircle cx='86.0' cy='15.7' r='3.0' fill='%23b39ddb'/%3E%3Ccircle cx='90.2' cy='18.7' r='3.0' fill='%23b39ddb'/%3E%3Ccircle cx='88.6' cy='23.6' r='3.0' fill='%23b39ddb'/%3E%3Ccircle cx='83.4' cy='23.6' r='3.0' fill='%23b39ddb'/%3E%3Ccircle cx='81.8' cy='18.7' r='3.0' fill='%23b39ddb'/%3E%3Ccircle cx='86.0' cy='20.0' r='2.3' fill='%23fff176'/%3E%3Cpath transform='translate(100.0 8.0) scale(0.417)' d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3Ccircle cx='136.0' cy='10.5' r='4.5' fill='%23ffb74d'/%3E%3Ccircle cx='142.2' cy='15.0' r='4.5' fill='%23ffb74d'/%3E%3Ccircle cx='139.8' cy='22.4' r='4.5' fill='%23ffb74d'/%3E%3Ccircle cx='132.2' cy='22.4' r='4.5' fill='%23ffb74d'/%3E%3Ccircle cx='129.8' cy='15.0' r='4.5' fill='%23ffb74d'/%3E%3Ccircle cx='136.0' cy='17.0' r='3.5' fill='%238d6e63'/%3E%3Cpath transform='translate(168.0 14.0) scale(-0.292 0.292)' d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3Ccircle cx='176.0' cy='14.7' r='3.0' fill='%23ffffff'/%3E%3Ccircle cx='180.2' cy='17.7' r='3.0' fill='%23ffffff'/%3E%3Ccircle cx='178.6' cy='22.6' r='3.0' fill='%23ffffff'/%3E%3Ccircle cx='173.4' cy='22.6' r='3.0' fill='%23ffffff'/%3E%3Ccircle cx='171.8' cy='17.7' r='3.0' fill='%23ffffff'/%3E%3Ccircle cx='176.0' cy='19.0' r='2.3' fill='%23ffca28'/%3E%3Cpath transform='translate(190.0 9.0) scale(0.375)' d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3Ccircle cx='222.0' cy='11.0' r='4.1' fill='%23b39ddb'/%3E%3Ccircle cx='227.7' cy='15.2' r='4.1' fill='%23b39ddb'/%3E%3Ccircle cx='225.5' cy='21.9' r='4.1' fill='%23b39ddb'/%3E%3Ccircle cx='218.5' cy='21.9' r='4.1' fill='%23b39ddb'/%3E%3Ccircle cx='216.3' cy='15.2' r='4.1' fill='%23b39ddb'/%3E%3Ccircle cx='222.0' cy='17.0' r='3.2' fill='%23fff176'/%3E%3Cpath transform='translate(254.0 12.0) scale(-0.333 0.333)' d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3C/svg%3E");
  --fl-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 28'%3E%3Cpath transform='translate(2.0 8.0) scale(0.375)' d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3Ccircle cx='30.0' cy='7.6' r='3.8' fill='%23f48fb1'/%3E%3Ccircle cx='35.2' cy='11.3' r='3.8' fill='%23f48fb1'/%3E%3Ccircle cx='33.2' cy='17.5' r='3.8' fill='%23f48fb1'/%3E%3Ccircle cx='26.8' cy='17.5' r='3.8' fill='%23f48fb1'/%3E%3Ccircle cx='24.8' cy='11.3' r='3.8' fill='%23f48fb1'/%3E%3Ccircle cx='30.0' cy='13.0' r='2.9' fill='%23ffd54f'/%3E%3Cpath transform='translate(58.0 4.0) scale(-0.292 0.292)' d='M4 44C4 20 20 4 44 4 44 28 28 44 4 44Z' fill='%2357a773'/%3E%3Ccircle cx='54.0' cy='13.2' r='2.6' fill='%23b39ddb'/%3E%3Ccircle cx='57.6' cy='15.8' r='2.6' fill='%23b39ddb'/%3E%3Ccircle cx='56.2' cy='20.1' r='2.6' fill='%23b39ddb'/%3E%3Ccircle cx='51.8' cy='20.1' r='2.6' fill='%23b39ddb'/%3E%3Ccircle cx='50.4' cy='15.8' r='2.6' fill='%23b39ddb'/%3E%3Ccircle cx='54.0' cy='17.0' r='2.0' fill='%23fff176'/%3E%3C/svg%3E");
  --fl-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24.0' cy='12.1' r='8.2' fill='%23f48fb1'/%3E%3Ccircle cx='35.5' cy='20.3' r='8.2' fill='%23f48fb1'/%3E%3Ccircle cx='31.1' cy='33.8' r='8.2' fill='%23f48fb1'/%3E%3Ccircle cx='16.9' cy='33.8' r='8.2' fill='%23f48fb1'/%3E%3Ccircle cx='12.5' cy='20.3' r='8.2' fill='%23f48fb1'/%3E%3Ccircle cx='24.0' cy='24.0' r='6.4' fill='%23ffd54f'/%3E%3C/svg%3E");
  --fl-lav: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24.0' cy='12.1' r='8.2' fill='%23b39ddb'/%3E%3Ccircle cx='35.5' cy='20.3' r='8.2' fill='%23b39ddb'/%3E%3Ccircle cx='31.1' cy='33.8' r='8.2' fill='%23b39ddb'/%3E%3Ccircle cx='16.9' cy='33.8' r='8.2' fill='%23b39ddb'/%3E%3Ccircle cx='12.5' cy='20.3' r='8.2' fill='%23b39ddb'/%3E%3Ccircle cx='24.0' cy='24.0' r='6.4' fill='%23fff176'/%3E%3C/svg%3E");
  --fl-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24.0' cy='12.1' r='8.2' fill='%23ffb74d'/%3E%3Ccircle cx='35.5' cy='20.3' r='8.2' fill='%23ffb74d'/%3E%3Ccircle cx='31.1' cy='33.8' r='8.2' fill='%23ffb74d'/%3E%3Ccircle cx='16.9' cy='33.8' r='8.2' fill='%23ffb74d'/%3E%3Ccircle cx='12.5' cy='20.3' r='8.2' fill='%23ffb74d'/%3E%3Ccircle cx='24.0' cy='24.0' r='6.4' fill='%238d6e63'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fl-op: 0.6; } }

/* Flower motif: the front page and the guide pages (not the notes). Decoration only: hidden from screen readers
   and when printing, muted by --fl-op, and never behind text or code. */
body.home header.site, .guide header.site { position: relative; padding-bottom: 42px; }
body.home header.site::after, .guide header.site::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 34px; pointer-events: none;
  background: var(--fl-strip) repeat-x left center / auto 34px; opacity: var(--fl-op);
}
body.home footer::before, .guide footer::before {
  content: ""; display: block; height: 34px; margin: -6px 0 10px; pointer-events: none;
  background: var(--fl-strip) repeat-x left center / auto 34px; opacity: var(--fl-op);
}
body.home h2::before, .guide h2::before {
  content: ""; display: inline-block; width: 22px; height: 22px; margin-right: 8px; vertical-align: -4px;
  background: var(--fl-rose) center / contain no-repeat; opacity: var(--fl-op);
}
body.home h2:nth-of-type(3n+2)::before, .guide h2:nth-of-type(3n+2)::before { background-image: var(--fl-lav); }
body.home h2:nth-of-type(3n)::before, .guide h2:nth-of-type(3n)::before { background-image: var(--fl-gold); }
.maintenance-box { position: relative; }
.maintenance-box::after {
  content: ""; position: absolute; top: 6px; right: 8px; width: 64px; height: 28px; pointer-events: none;
  background: var(--fl-corner) no-repeat right top / contain; opacity: calc(var(--fl-op) * 0.6);
}
@media (max-width: 640px) { body.home header.site::after, .guide header.site::after { height: 26px; background-size: auto 26px; } }
@media (max-width: 640px) { .maintenance-box::after { display: none; } }
@media print {
  header.site::after, footer::before, h2::before, .maintenance-box::after { display: none !important; }
  body.home header.site, .guide header.site { padding-bottom: 12px; }
}

/* The small "latest" link that notes-pins.js adds after a link pinned to a commit */
.pin-note { font-size: 0.85em; color: var(--muted); margin-left: 0.25em; white-space: nowrap; }
.pin-note a { font-weight: 600; }

/* Copy button on the code blocks of a student note (notes-copy.js). */
.code-wrap { position: relative; }
.code-wrap .copy-btn { position: absolute; top: 6px; right: 6px; font: inherit; font-size: 0.78rem; padding: 2px 8px; border: 1px solid var(--border, #bbb); border-radius: 4px; background: var(--bg, #fff); color: inherit; cursor: pointer; opacity: 0.75; }
.code-wrap .copy-btn:hover, .code-wrap .copy-btn:focus { opacity: 1; }