/* Build a Tiny LLM — shared look
   Idea: a student's notebook. Ruled paper with a red margin, handwritten
   headings with pen underlines, and highlighters that each mean one thing:
     yellow = a new word      green = right / goes up
     pink   = mistake / down  blue  = code you type
     orange = the open question */

:root {
  --paper: #FFFDF6;
  --rule: #DCE7F3;
  --margin: #F2A7AE;
  --ink: #1D2238;
  --pencil: #626A7E;
  --pen: #2B4FD8;
  --redpen: #D2283A;
  --good: #1E8F4E;
  --card: #FFFFFF;

  --hl-yellow: #FFE45C;
  --hl-green: #9EF0B4;
  --hl-pink: #FFB1C8;
  --hl-blue: #B7D7FF;
  --hl-orange: #FFC380;
  --highlight: var(--hl-yellow);
  --on-hl: #1D2238;

  --note-yellow: #FFF4B3;
  --note-pink: #FFE0EA;
  --note-blue: #DDEBFF;
  --note-green: #DDF7E5;
  --note-orange: #FFE6CC;
  --tape: rgba(255, 214, 120, 0.6);

  --code-bg: #232842;
  --code-ink: #EEF0F8;
  --code-comment: #A9B6DA;

  /* lesson pen colour for heading underlines (each lesson sets its own) */
  --ul: var(--pen);

  /* old names still used by some pages */
  --grid: var(--rule);

  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --hand: "Kalam", "Comic Sans MS", cursive;
  --head: "Patrick Hand", "Kalam", cursive;

  --measure: 66ch;
  --radius: 6px;
  --line: 32px;
}

/* Dark: a notebook under a desk lamp. Off by default; the moon button in the top bar turns it on. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1A1C25; --rule: #252A38; --margin: #5A2F3A;
  --ink: #EEEBE2; --pencil: #A7ABBA; --pen: #8EA6FF; --redpen: #FF8A96; --good: #5FD68F;
  --card: #222532;
  --hl-yellow: #F2D33A; --hl-green: #63D98A; --hl-pink: #FF8DB0; --hl-blue: #7DB4FF; --hl-orange: #FFAA55;
  --note-yellow: #2E2B1E; --note-pink: #33232A; --note-blue: #202A3C; --note-green: #1F3027; --note-orange: #33281D;
  --tape: rgba(242, 211, 58, 0.35);
  --code-bg: #12141C;
}

* { box-sizing: border-box; }

/* Comfortable text on laptops (about 90% of the old 19px). Phones keep the normal size. */
html { font-size: 17px; }
@media (max-width: 600px) { html { font-size: 16px; } }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  color: var(--ink);
  background-color: var(--paper);
  /* ruled lines */
  background-image: linear-gradient(transparent calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px));
  background-size: 100% var(--line);
  font-family: var(--body);
  font-size: 1.15rem;
  line-height: 1.6;
}
/* the red margin line, on wider screens */
@media (min-width: 760px) {
  body::before {
    content: ""; position: fixed; top: 0; bottom: 0; left: 56px; width: 2px;
    background: var(--margin); pointer-events: none; z-index: 0;
  }
}

/* Each lesson has its own pen colour */
body[data-pen="blue"]   { --ul: #2B4FD8; }
body[data-pen="green"]  { --ul: #1E8F4E; }
body[data-pen="purple"] { --ul: #7A3FD1; }
body[data-pen="orange"] { --ul: #E0701B; }
body[data-pen="pink"]   { --ul: #D2287A; }
:root[data-theme="dark"] body[data-pen="blue"]   { --ul: #8EA6FF; }
:root[data-theme="dark"] body[data-pen="green"]  { --ul: #5FD68F; }
:root[data-theme="dark"] body[data-pen="purple"] { --ul: #B794FF; }
:root[data-theme="dark"] body[data-pen="orange"] { --ul: #FFAA55; }
:root[data-theme="dark"] body[data-pen="pink"]   { --ul: #FF8DC4; }
}

a { color: var(--pen); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; border-radius: 3px; }

/* ---------- Handwritten headings with a pen underline ---------- */
h1, h2, h3 { font-family: var(--head); font-weight: 400; line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); }
h1 .swash {
  background: linear-gradient(transparent 58%, var(--hl-yellow) 58%, var(--hl-yellow) 92%, transparent 92%);
  padding: 0 0.1em;
}
h2 {
  font-size: 2.1rem;
  text-decoration: underline wavy var(--ul);
  text-decoration-thickness: 2px;
  text-underline-offset: 10px;
  margin-bottom: 0.8em;
}
h3 { font-size: 1.45rem; }
p { margin: 0 0 1em; }

/* ---------- Highlighters ---------- */
mark, .hl, .hl-yellow, .hl-green, .hl-pink, .hl-blue, .hl-orange {
  color: var(--on-hl);
  padding: 0.02em 0.25em;
  border-radius: 0.3em 0.15em 0.35em 0.2em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
mark, .hl, .hl-yellow { background: var(--hl-yellow); }
.hl-green { background: var(--hl-green); }
.hl-pink { background: var(--hl-pink); }
.hl-blue { background: var(--hl-blue); }
.hl-orange { background: var(--hl-orange); }
/* hand-drawn underline for emphasis */
.ul { text-decoration: underline var(--ul); text-decoration-thickness: 2px; text-underline-offset: 4px; }

code, .mono { font-family: var(--mono); font-size: 0.86em; }
:not(pre) > code {
  background: color-mix(in srgb, var(--hl-blue) 45%, transparent);
  padding: 0.05em 0.35em; border-radius: 4px;
}

pre {
  background: var(--code-bg); color: var(--code-ink);
  padding: 1rem 1.2rem; border-radius: var(--radius);
  overflow-x: auto; font-size: 0.85rem; line-height: 1.6; margin: 0 0 1.4em;
}
pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
pre .c { color: var(--code-comment); }

/* ---------- Layout ---------- */
.wrap { max-width: 1060px; margin: 0 auto; padding: 0 16px; position: relative; z-index: 1; }
@media (min-width: 760px) { .wrap { padding-left: 88px; } }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; flex-wrap: wrap; }
.topbar .home { font-family: var(--head); font-size: 1.35rem; color: var(--ink); text-decoration: none; }
.topbar .where { color: var(--pencil); font-size: 0.95rem; }
.topbar .tools { display: flex; gap: 8px; flex-wrap: wrap; }
.theme-toggle { margin-left: auto; padding: 2px 9px; font-size: 1.05rem; line-height: 1.4; }
.theme-toggle:hover { background: var(--hl-yellow); color: var(--on-hl); }

section.part { padding: 28px 0 12px; scroll-margin-top: 16px; }

/* Red-pen margin note from the teacher */
.note {
  font-family: var(--hand); color: var(--redpen); font-size: 1.1rem; line-height: 1.4;
  border-left: 3px solid var(--redpen); padding-left: 12px; margin: 24px 0 16px;
}
.note::before { content: "✎ "; }

/* ---------- Buttons ---------- */
button, .btn {
  font: inherit; font-size: 0.95rem; font-weight: 700;
  border: 2px solid var(--ink); background: var(--card); color: var(--ink);
  padding: 8px 14px; border-radius: 8px 6px 9px 5px;
  cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--hl-yellow); color: var(--on-hl); }
button.primary, .btn.primary { background: var(--ink); color: var(--paper); }
button.primary:hover, .btn.primary:hover { background: var(--pen); border-color: var(--pen); color: #fff; }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.small, .btn.small { padding: 4px 10px; font-size: 0.85rem; }

/* ---------- Activity: a sticky note taped onto the page ---------- */
.activity {
  position: relative;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 4px;
  box-shadow: 0 10px 24px -14px rgba(20, 24, 50, 0.35), 0 2px 0 rgba(20, 24, 50, 0.05);
  padding: 30px 22px 22px; margin: 36px 0 32px;
}
.activity::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 110px; height: 26px;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--tape); border-left: 2px dotted rgba(0,0,0,0.06); border-right: 2px dotted rgba(0,0,0,0.06);
}
.activity .do { font-family: var(--head); font-size: 1.35rem; margin-bottom: 16px; line-height: 1.3; }
.activity .row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* "Still unclear?": a folded paper corner */
details.unclear {
  position: relative; background: var(--note-blue);
  padding: 12px 18px; margin: 0 0 1.4em; border-radius: 3px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
details.unclear::after {
  content: ""; position: absolute; top: 0; right: 0; width: 18px; height: 18px;
  background: linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--pen) 25%, var(--note-blue)) 50%);
}
details.unclear summary { cursor: pointer; font-weight: 700; color: var(--pen); }
details.unclear[open] summary { margin-bottom: 10px; }

/* The open question: orange highlighter */
.open-question {
  background: var(--note-orange); border-left: 6px solid var(--hl-orange);
  padding: 22px 24px; border-radius: 4px; margin: 28px 0 24px;
}
.open-question .big {
  font-family: var(--head); font-size: 1.7rem; line-height: 1.25; margin: 6px 0 12px;
}
.open-question .big { background: var(--hl-orange); color: var(--on-hl); display: inline; padding: 0 0.2em; border-radius: 0.3em 0.15em 0.35em 0.2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.open-question > div:first-child { color: var(--pencil); font-size: 0.95rem; margin-bottom: 4px; }
.open-question > div:last-child { margin-top: 14px; }
.open-question .llm-path { margin-top: 18px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.8rem; line-height: 1.6; }
.llm-path-label { color: var(--pencil); margin-right: 4px; }
.llm-step { white-space: nowrap; color: var(--pencil); }
.llm-step.done { color: var(--good, #1E8F4E); font-weight: 600; }
.llm-step.next { background: var(--hl-orange); color: var(--on-hl); font-weight: 700; padding: 0 6px; border-radius: 4px; }
.llm-arrow { color: color-mix(in srgb, var(--pencil) 60%, transparent); }

/* Tables */
table.plain { border-collapse: collapse; width: 100%; margin: 0 0 1.2em; font-size: 0.95rem; }
table.plain th, table.plain td { border-bottom: 1px solid var(--rule); padding: 6px 8px; text-align: left; }
table.plain th { color: var(--pencil); }
.tablewrap { overflow-x: auto; }

.up { color: var(--good); font-weight: 700; }
.down { color: var(--redpen); font-weight: 700; }

.done-toggle[aria-pressed="true"] { background: var(--hl-green); border-color: var(--good); color: var(--on-hl); }
footer.site { color: var(--pencil); font-size: 0.9rem; padding: 32px 0 48px; }

/* ================= One part per screen ================= */
.paged-head { padding: 8px 0 0; }
.paged-head h1 { margin: 10px 0 14px; }

/* Progress: a row of tick boxes */
.progress { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; }
.progress .seg {
  width: 26px; height: 26px; padding: 0; border: 2px solid var(--ink); border-radius: 4px 3px 5px 3px;
  background: var(--card); cursor: pointer; font-size: 0.9rem; line-height: 1; color: var(--good);
  display: grid; place-items: center;
}
.progress .seg.seen::after { content: "✓"; font-weight: 700; }
.progress .seg.now { background: var(--hl-yellow); }
.progress .seg:hover { background: var(--hl-yellow); }

main[data-paged] { max-width: var(--measure); }
main[data-paged] section.part { padding-top: 26px; }

.pagebar { margin: 8px 0 40px; }
.pagebar .inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pagebar [data-page-label] { display: none; }
.pagebar button {
  background: none; border: 0; border-radius: 0; padding: 4px 0; box-shadow: none;
  font-family: var(--head); font-weight: 400; font-size: 1.35rem; color: var(--ink);
}
.pagebar button:hover { background: none; color: var(--pen); }
.pagebar [data-page-next] { margin-left: auto; }
.pagebar [data-page-back]:disabled { visibility: hidden; }

.say { font-size: 1.25rem; line-height: 1.5; max-width: 100%; margin-bottom: 1em; text-wrap: pretty; }

/* Number tiles */
.tiles { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.tile {
  min-width: 3.4em; padding: 10px 8px; text-align: center;
  font-family: var(--mono); font-size: 1.15rem; font-weight: 600;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink); border-radius: 7px 5px 8px 4px;
}
.tile .idx { display: block; font-size: 0.7rem; color: var(--pencil); font-weight: 400; }
.tile.flash { background: var(--hl-yellow); color: var(--on-hl); }
.tile.flash .idx { color: var(--on-hl); }
input.tile { width: 4.2em; }
button.tile { cursor: pointer; }
button.tile:hover { background: var(--hl-yellow); color: var(--on-hl); }

.out {
  font-family: var(--mono); font-size: 0.92rem; background: var(--code-bg); color: var(--code-ink);
  padding: 10px 12px; border-radius: var(--radius); min-height: 2.6em; white-space: pre-wrap; margin-top: 12px;
}
.out .c { color: var(--code-comment); }
.out .err { color: #FF9AAE; }

/* Quiz: right answer circled in green pen, wrong crossed out in pink */
.quiz { padding: 4px 0; margin: 32px 0; }
.quiz .q { font-family: var(--head); font-size: 1.4rem; line-height: 1.35; margin-bottom: 14px; }
.quiz .q code { font-size: 0.75em; }
.quiz .options { display: flex; flex-wrap: wrap; gap: 12px; }
.quiz .options button { font-family: var(--mono); font-weight: 600; position: relative; background: var(--card); }
.quiz .options button.right { border-color: var(--good); background: var(--hl-green); color: var(--on-hl); border-radius: 50% 45% 50% 48% / 60% 55% 62% 58%; }
.quiz .options button.wrong { border-color: var(--redpen); color: var(--pencil); text-decoration: line-through 3px var(--redpen); background: var(--card); }
.quiz .feedback { margin-top: 12px; min-height: 1.5em; font-family: var(--hand); font-size: 1.15rem; }
.quiz .feedback.good { color: var(--good); }
.quiz .feedback.bad { color: var(--redpen); }

/* Grid of numbers */
.grid2d { display: inline-grid; gap: 6px; margin: 10px 0; }
.grid2d .lab { font-family: var(--mono); font-size: 0.8rem; color: var(--pencil); display: grid; place-items: center; }
.grid2d button.lab { border: 0; background: none; padding: 0; text-decoration: underline; color: var(--pen); cursor: pointer; font-weight: 400; }

/* Soft cards for lists of points */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0 36px; }
.card { background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 4px; padding: 22px; box-shadow: 0 10px 24px -16px rgba(20,24,50,.35); }
.card h3 { margin-bottom: 14px; }
.items { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.items li { display: grid; grid-template-columns: 1.7em 1fr; align-items: start; }
.items .ico { font-weight: 700; font-family: var(--head); font-size: 1.2rem; line-height: 1.3; }
.items .ico.yes { color: var(--good); }
.items .ico.no { color: var(--redpen); }
.items b { display: block; }
.items small { color: var(--pencil); font-size: 0.9rem; line-height: 1.45; display: block; margin-top: 2px; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }

/* ---------- Teach mode (press T): big text for a projector ---------- */
body.teach { font-size: 1.4rem; }
body.teach .say { font-size: 1.45rem; }
body.teach pre { font-size: 0.8rem; }

/* ================= Slides with thumbnails on the right ================= */
.thumbs, .thumbs-toggle { display: none; }

@media (min-width: 1000px) {
  body.has-thumbs .thumbs {
    display: block; position: fixed; top: 54px; right: 0; bottom: 0; width: 232px; z-index: 3;
    overflow: hidden; padding: 8px 14px 12px; background: var(--paper);
    border-left: 2px solid var(--ink);
  }
  body.has-thumbs .thumbs-toggle {
    display: block; position: fixed; top: 12px; right: 14px; z-index: 5;
    padding: 4px 12px; font-size: 0.8rem; border-width: 1px;
  }
  body.has-thumbs.thumbs-off .thumbs { display: none; }

  /* Presenting space: everything left of the strip. It scrolls as one piece,
     so the scrollbar sits quietly against the strip. Content is centred in it. */
  body.has-thumbs { overflow: hidden; }
  body.has-thumbs .wrap {
    position: fixed; top: 0; bottom: 0; left: 0; right: 232px;
    max-width: none; margin: 0; padding: 0 40px 0 88px;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent;
  }
  body.has-thumbs .wrap::-webkit-scrollbar { width: 6px; }
  body.has-thumbs .wrap::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 3px; }
  body.has-thumbs .wrap::-webkit-scrollbar-track { background: transparent; }
  body.has-thumbs.thumbs-off .wrap { right: 0; }
  body.has-thumbs main[data-paged] { margin: 0 auto; }
  body.has-thumbs .topbar { padding-right: 0; }
  body.has-thumbs.thumbs-off .topbar { padding-right: 130px; }

  /* The strip replaces the tick boxes */
  body.has-thumbs .progress { display: none; }

  /* Each part is a slide that fits the screen; long ones scroll inside */
  /* The lesson title moves into the top bar, so each slide gets the full height */
  body.has-thumbs .paged-head { display: none; }
  body.has-thumbs .topbar .where { font-family: var(--head); font-size: 1.3rem; color: var(--ink); }
  body.has-thumbs:not(.thumbs-off) .thumbs-toggle { right: 14px; }
  body.has-thumbs .thumbs-toggle { background: var(--paper); }

  .thumb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--tgap, 10px); }
  .thumb {
    display: block; width: 100%; padding: 6px; text-align: left; font-weight: 400;
    background: var(--card); border: 2px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 6px;
  }
  .thumb:hover { background: var(--card); border-color: var(--pen); }
  .thumb.now { border: 3px solid var(--ink); background: var(--hl-yellow); box-shadow: 4px 4px 0 var(--ink); }
  .thumb-frame {
    position: relative; width: var(--fw, 186px); height: var(--fh, 116px); overflow: hidden;
    background: var(--paper); border-radius: 3px; pointer-events: none;
  }
  .thumb-inner { width: 930px; transform: scale(var(--sc, 0.2)); transform-origin: 0 0; padding: 10px 24px; }
  .thumb-inner section.part { max-height: none !important; overflow: visible !important; padding-top: 0 !important; }
  .thumb-cap { display: block; margin-top: 6px; font-family: var(--head); font-size: 0.95rem; line-height: 1.2; color: var(--ink); }
  .thumb.now .thumb-cap { color: var(--on-hl); }
  .thumb.seen .thumb-cap b::after { content: " ✓"; color: var(--good); }
  .thumb-cap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Not enough height for previews: just the slide names */
  .thumbs.compact .thumb-frame { display: none; }
  .thumbs.compact .thumb-cap { margin-top: 0; }

  /* All lessons as headings; the current lesson's slides indented below */
  .toc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .toc > li { min-width: 0; }
  /* When the list is taller than the screen, it scrolls on its own */
  body.has-thumbs .thumbs { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }
  body.has-thumbs .thumbs::-webkit-scrollbar { width: 6px; }
  body.has-thumbs .thumbs::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 3px; }
  .toc-lesson { display: flex; gap: 8px; align-items: baseline; padding: 3px 4px; border-radius: 4px;
    font-family: var(--head); font-size: 1rem; line-height: 1.25; color: var(--ink); text-decoration: none; }
  .toc-lesson .toc-t { min-width: 0; }
  .toc-n { flex: 0 0 1.3em; text-align: right; color: var(--pencil); font-size: 0.9em; }
  a.toc-lesson:hover { background: var(--hl-yellow); color: var(--on-hl); }
  .toc-lesson.done .toc-n { color: var(--good); font-weight: 700; }
  .toc-lesson.here { font-weight: 700; text-decoration: underline; text-decoration-color: var(--ul); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .toc-lesson.here .toc-n { color: var(--ink); }
  .toc-lesson.soon { color: color-mix(in srgb, var(--pencil) 70%, transparent); cursor: default; }
  .toc .thumb-list { margin: 6px 0 10px 1.6em; --tgap: 6px; grid-template-columns: minmax(0, 1fr); }
  .toc .thumb { min-width: 0; box-sizing: border-box; }
  .toc .thumb { padding: 4px 8px; }
  .toc .thumb-cap { font-size: 0.92rem; }
  .thumbs.tight .toc-lesson { padding: 1px 4px; font-size: 0.95rem; }
  .thumbs.tight .toc .thumb-list { --tgap: 3px; margin: 3px 0 6px 1.6em; }
  .thumbs.tight .toc .thumb { padding: 2px 8px; }
  .thumbs.tighter .toc-lesson { font-size: 0.85rem; padding: 0 4px; }
  .thumbs.tighter .toc .thumb-cap { font-size: 0.82rem; }
  .thumbs.tighter .toc .thumb { padding: 1px 6px; border-width: 1px; }
}
@media (min-width: 1280px) { body.has-thumbs .topbar .where[data-full] { font-size: 0; } body.has-thumbs .topbar .where[data-full]::after { content: attr(data-full); font-size: 1.3rem; } }

/* Previous / Next: in the bottom corners, at the end of each page (they scroll with it, not fixed).
   A short page pushes them down to the bottom of the screen. */
@media (min-width: 1000px) {
  body.has-thumbs .wrap { display: flex; flex-direction: column; }
  body.has-thumbs .wrap > main[data-paged] { flex: 1 0 auto; width: 100%; }
  body.has-thumbs .pagebar { position: static; margin: 12px -12px 0; padding-bottom: 12px; }
  body.has-thumbs main[data-paged] section.part { padding-bottom: 12px; }
}

/* ↺ Reset: quiet text in the top-right corner of every activity */
.reset {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; padding: 2px 4px; box-shadow: none;
  font-family: var(--head); font-weight: 400; font-size: 1.05rem; color: var(--pencil);
}
.reset:hover { background: none; color: var(--pen); }
.quiz { position: relative; }
.quiz-reset { position: static; margin-top: 4px; }
.activity .do { padding-right: 84px; }

/* No up/down spinner arrows on number boxes anywhere: just type */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Copy button: quiet text in the code block's corner */
pre { position: relative; }
pre .copy {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 1px solid rgba(255,255,255,0.25); border-radius: 6px;
  padding: 2px 10px; font-family: var(--body); font-size: 0.75rem; font-weight: 700; color: var(--code-comment);
}
pre .copy:hover { background: rgba(255,255,255,0.08); color: #fff; }
.run-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.muted-note { color: var(--pencil); font-size: 0.9rem; }

/* Hidden answers: "# ?" until Show output is pressed */
pre .ans .show { display: none; }
pre.answers-on .ans .hide { display: none; }
pre.answers-on .ans .show { display: inline; color: #FFE45C; }
pre .show-out { right: 74px; }

/* ▶ Run and the terminal that shows the output */
.run-area { margin: -0.6em 0 1.4em; }
.run-code {
  background: none; border: 0; padding: 4px 0; box-shadow: none;
  font-family: var(--head); font-weight: 400; font-size: 1.3rem; color: var(--pen);
}
.run-code:hover { background: none; color: var(--ink); }
.terminal { margin-top: 8px; border-radius: var(--radius); overflow: hidden; border: 1px solid #0d0f17; }
.term-bar {
  background: #2d3146; color: #a9b0c8; font-family: var(--mono); font-size: 0.75rem;
  padding: 5px 12px; letter-spacing: 0.02em;
}
.term-bar::before { content: "● ● ●  "; color: #5b6180; }
pre.term-out { margin: 0; border-radius: 0; background: #0f111a; color: #d7f5dd; font-size: 0.85rem; }
pre.term-out .prompt { color: #7f88a8; }

/* Neo: a little sticky note with a face, and a speech bubble */
.neo { display: flex; gap: 14px; align-items: flex-start; margin: 4px 0 26px; }
.neo-face { flex: 0 0 auto; width: 58px; height: 58px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-4deg); }
.neo-face .neo-note { fill: var(--note-yellow); }
.neo-face .neo-fold { fill: #F2E39A; }
.neo-face .neo-eye { fill: var(--ink); stroke: none; }
.neo-face .neo-line { stroke: var(--hl-blue); }
.neo-bubble {
  position: relative; background: var(--card); border: 2px solid var(--ink);
  border-radius: 16px 18px 16px 14px; padding: 10px 16px 12px; max-width: 46ch;
  font-family: var(--hand); font-size: 1.15rem; line-height: 1.4; color: var(--ink);
  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ink) 15%, transparent);
}
.neo-bubble::before {
  content: ""; position: absolute; left: -11px; top: 18px; width: 18px; height: 18px;
  background: var(--card); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
.neo-name { display: block; font-family: var(--head); font-size: 0.95rem; color: var(--pen); margin-bottom: 2px; }
.neo-bubble code { font-size: 0.8em; }
.neo-writing {
  display: block; margin-top: 8px; padding: 6px 10px; background: var(--paper);
  border: 1px dashed var(--pencil); border-radius: 6px; font-family: var(--mono); font-size: 0.85rem;
}
.activity > .neo { margin-top: 18px; }

/* ================= Reading the code: Python words and Step through ================= */
pre .pyword {
  display: inline; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font: inherit; font-weight: inherit; color: inherit; cursor: help;
  text-decoration: underline dotted color-mix(in srgb, currentColor 60%, transparent); text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
pre .pyword:hover, pre .pyword:focus-visible { background: rgba(255, 228, 92, 0.18); color: inherit; }
.pyword-card {
  position: fixed; z-index: 10001; padding: 14px 16px 12px; background: var(--card); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink); font-size: 0.95rem;
}
.pyword-card[hidden] { display: none; }
.pyword-card p { margin: 6px 0 10px; line-height: 1.45; }
.pyword-card pre { margin: 0 0 8px; padding: 8px 10px; font-size: 0.8rem; }
.pyword-card .pyword-out { background: #0f111a; color: #d7f5dd; }
.pyword-title code { font-size: 1.05rem; font-weight: 700; background: var(--hl-yellow); color: var(--on-hl); padding: 1px 6px; border-radius: 4px; }
.pyword-label { font-size: 0.75rem; color: var(--pencil); margin-bottom: 3px; }
.pyword-x { position: absolute; top: 6px; right: 6px; border: 0; background: none; padding: 2px 6px; font-size: 0.9rem; box-shadow: none; }

.step-start {
  background: none; border: 0; padding: 4px 0; margin-left: 22px; box-shadow: none;
  font-family: var(--head); font-weight: 400; font-size: 1.3rem; color: var(--pen);
}
.step-start:hover { background: none; color: var(--ink); }
body.walking-code main[data-paged] { max-width: min(1180px, 100%); }
.walk-wrap.walking { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; align-items: start; margin-bottom: 1.4em; }
.walk-wrap.walking > pre { margin: 0; }
pre .ln.now { background: rgba(255, 228, 92, 0.22); box-shadow: -1.2rem 0 0 rgba(255, 228, 92, 0.22), 1.2rem 0 0 rgba(255, 228, 92, 0.22); border-left: 0; }
pre .ln { display: inline-block; min-width: 100%; }
.walk-panel {
  position: sticky; top: 12px; max-height: calc(100vh - 90px); overflow-y: auto;
  background: var(--card); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink);
  padding: 12px 14px 14px; font-size: 0.92rem;
}
.walk-panel[hidden] { display: none; }
.walk-top { display: flex; justify-content: space-between; align-items: center; color: var(--pencil); font-size: 0.85rem; }
.walk-close { border: 0; background: none; box-shadow: none; padding: 2px 6px; }
.walk-controls { display: flex; gap: 6px; margin: 8px 0 10px; }
.walk-controls button { padding: 6px 10px; font-size: 0.85rem; }
.walk-controls .walk-next { flex: 1; }
.walk-say { margin: 0 0 12px; padding: 8px 10px; background: var(--note-yellow, #FFF6C7); border-left: 4px solid var(--hl-yellow); border-radius: 4px; line-height: 1.45; font-size: 0.95rem; max-width: none; }
.walk-vars-title { font-size: 0.75rem; color: var(--pencil); margin: 8px 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.walk-vars table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.78rem; }
.walk-vars th { text-align: left; font-weight: 600; padding: 3px 8px 3px 0; vertical-align: top; white-space: nowrap; width: 1%; }
.walk-vars td { padding: 3px 4px; word-break: break-word; }
.walk-vars tr { border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.walk-vars tr.hot { background: var(--hl-yellow); color: var(--on-hl); }
.walk-empty { color: var(--pencil); margin: 6px 0; font-size: 0.85rem; }
.walk-out-label { font-size: 0.75rem; color: var(--pencil); margin: 12px 0 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.walk-out { margin: 0; flex: 0 0 auto; min-height: 7em; max-height: 16em; overflow-y: auto; background: #0f111a; color: #d7f5dd; font-size: 0.85rem; line-height: 1.5; padding: 10px 12px; border-radius: 6px; }
.walk-out .fresh { background: rgba(255, 228, 92, 0.25); }
@media (max-width: 900px) {
  .walk-wrap.walking { grid-template-columns: 1fr; }
  .walk-panel { position: sticky; top: auto; bottom: 8px; max-height: 50vh; }
}
.pyword-card pre, .walk-out { white-space: pre-wrap; word-break: break-word; }
pre .ln.now { background: rgba(255, 228, 92, 0.3); box-shadow: -1.2rem 0 0 rgba(255, 228, 92, 0.3), 1.2rem 0 0 rgba(255, 228, 92, 0.3); }
.walk-ret { margin: 4px 0 8px; padding: 6px 8px; background: var(--hl-green); color: var(--on-hl); border-radius: 4px; font-size: 0.85rem; }
.walk-ret code { font-family: var(--mono); font-size: 0.8rem; background: none; }
.walk-vars td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
.walk-vars tr { cursor: pointer; }
.walk-vars tr.hot td, .walk-vars tr.full td { white-space: normal; max-width: none; }
/* Controls and explanation stay put; only the variables scroll */
.walk-panel { display: flex; flex-direction: column; overflow: hidden; }
.walk-panel[hidden] { display: none; }
.walk-vars { flex: 1 1 auto; min-height: 90px; overflow-y: auto; }
/* While stepping, the code and the panel share one screen; the code scrolls inside its box */
.walk-wrap.walking > pre { max-height: calc(100vh - 120px); overflow: auto; }
.walk-panel { max-height: calc(100vh - 120px); }
@media (max-width: 900px) { .walk-wrap.walking > pre { max-height: 50vh; } .walk-panel { max-height: 45vh; } }
/* Tables (2-D tensors) in Step through */
.walk-vars tr.grid-row { display: none; cursor: default; }
.walk-vars tr.grid-row.open { display: table-row; }
.walk-vars tr.grid-row > td { padding: 4px 0 8px; max-width: none; white-space: normal; }
.walk-grid-wrap { overflow-x: auto; }
table.walk-grid { border-collapse: collapse; font-size: 0.62rem; width: auto; }
table.walk-grid th { color: var(--pencil); font-weight: 600; padding: 0 2px; text-align: center; width: auto; white-space: nowrap; }
table.walk-grid td { min-width: 1.7em; height: 1.6em; padding: 0 1px; text-align: center; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  white-space: nowrap; max-width: none; overflow: visible;
  background: color-mix(in srgb, var(--hl-orange) calc(var(--heat) * 85%), var(--card)); }
table.walk-grid td.neg { background: color-mix(in srgb, var(--hl-blue) calc(var(--heat) * 90%), var(--card)); }
table.walk-grid td.zero { color: color-mix(in srgb, var(--pencil) 50%, transparent); }
table.walk-grid td.now { outline: 2px solid var(--ink); outline-offset: -2px; font-weight: 700; background: var(--hl-yellow); }
.walk-vars tr.hot table.walk-grid, .walk-vars tr.grid-row table.walk-grid { color: var(--ink); }
.walk-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 3px; font-family: var(--mono); font-size: 0.74rem; }
.walk-pairs span { padding: 2px 5px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 3px; white-space: pre; background: var(--card); }
.walk-pairs span.now { background: var(--hl-yellow); color: var(--on-hl); border-color: var(--ink); font-weight: 700; }
.walk-pairs { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.walk-vars td span.now { background: var(--ink); color: var(--hl-yellow); border-radius: 3px; padding: 0 2px; font-weight: 700; }
.walk-vars td span.kv { white-space: pre; }
/* "What comes next" demo on a lesson's last page */
.next-demo { font-family: var(--mono); font-size: 1.5rem; margin: 4px 0 18px; display: flex; align-items: center; gap: 10px; }
.next-demo code { font-size: inherit; background: none; padding: 0; }
.next-box-sm { display: inline-grid; place-items: center; width: 1.3em; height: 1.5em; border: 2px dashed var(--ink); border-radius: 4px; font-family: var(--head); font-size: 1.1rem; color: var(--pencil); }
.say code { white-space: nowrap; }
/* A key equation, boxed inside the text: <b class="eqbox">gradient = chance − goal</b> */
.eqbox { display: inline-block; max-width: 100%; font-family: var(--mono); font-size: 0.9em; font-weight: 600; line-height: 1.35; padding: 1px 10px; margin: 1px 2px; border: 2px solid var(--ink); border-radius: var(--radius, 8px); background: var(--note-yellow); color: var(--ink); }
/* "Next:" line at the end of a page, so every page leads into the next */
.hook { font-family: var(--hand); color: var(--pencil); font-size: 1.05rem; margin: 26px 0 0; }
/* No "Next" label here: the one Next link is in the corner */
/* The closing line sits just above Next, in the corner */
main[data-paged] .hook { display: none; }
.pagebar .next-side { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; max-width: min(420px, 70%); }
.pagebar .next-soon { font-family: var(--hand); color: var(--pencil); font-size: 1.1rem; white-space: nowrap; }
.pagebar .next-hint { font-family: var(--hand); color: var(--pencil); font-size: 0.95rem; line-height: 1.3; text-align: right; }
.pagebar .inner { align-items: flex-end; }
.pagebar button { white-space: nowrap; }
/* Links to another lesson's page */
a.xref { color: inherit; text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a.xref:hover { color: var(--pen); }
footer.site .made { display: block; margin-top: 6px; }
footer.site .made a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
footer.site .made a:hover { color: var(--pen); }
footer.site .heart { color: var(--redpen); }
/* "Step a) Predict": a small label on its own line above the explanation */
.step-label { font-family: var(--head); font-size: 1.05rem; color: var(--ul); letter-spacing: 0.02em; margin: 0 0 4px; }

/* "Our text": the training text, shown right where a page talks about it */
.our-text { margin: 6px 0 18px; max-width: none; line-height: 1.9; }
.our-text .our-label { color: var(--pencil); font-size: 0.9rem; margin-right: 4px; }
.our-text .our-line { font-family: var(--mono); font-size: 0.95rem; }
.our-text mark.pair { background: var(--hl-yellow); color: var(--ink); padding: 1px 0; border-radius: 2px; }
.our-text .our-note { color: var(--pencil); font-size: 0.85rem; white-space: nowrap; }

/* Peek: more detail on hover or tap (see setupPeeks in common.js) */
[data-peek], [data-peek-from] { border-bottom: 1.5px dotted currentColor; cursor: help; }
[data-peek]:focus-visible, [data-peek-from]:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; border-radius: 2px; }
.peek-pop { position: fixed; z-index: 10000; padding: 10px 12px; font-size: 0.92rem; line-height: 1.45;
  background: var(--note-yellow); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 2px 2px 6px 2px; box-shadow: 0 12px 22px -12px rgba(20,24,50,.5); }
.peek-pop[hidden] { display: none; }

/* Doubt: a small 🤔 beside a box. Hover or tap it for the answer to a question only some readers will have.
   <button class="doubt" type="button" data-peek-from="someId" aria-label="What about spaces?">🤔</button>
   Put it inside the box it belongs to, so the guide treats it as part of that box. */
.doubt { position: absolute; top: 10px; right: -50px; width: 38px; height: 38px; padding: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.25rem; line-height: 1; cursor: help;
  background: var(--paper); border: 1.5px solid var(--rule); box-shadow: none; }
.doubt[data-peek], .doubt[data-peek-from] { border-bottom: 1.5px solid var(--rule); }
.doubt:hover, .doubt:focus-visible { background: var(--note-yellow); border-color: var(--pen); }
@media (max-width: 760px) {
  .doubt { top: -19px; right: auto; left: 12px; }
  /* Beside plain text (not a box), sit above its right end, so it never covers the words */
  :not(.activity) > .doubt { width: 32px; height: 32px; font-size: 1.05rem; top: -30px; left: auto; right: 0; }
}
/* Opt-in: wrap the line a 🤔 explains, so the 🤔 sits right beside it:
   <span class="near">Then it repeats, 300 times.<button class="doubt" ...>🤔</button></span> */
.near { position: relative; display: inline-block; }
@media (min-width: 761px) { .near .doubt { top: -4px; right: -46px; } }
@media (max-width: 760px) { .near .doubt { position: static; display: inline-grid; vertical-align: middle; margin-left: 8px; } }

/* Notebook-style slider: an ink line with a yellow dot. <input type="range" class="ink"> */
input.ink { -webkit-appearance: none; appearance: none; height: 4px; background: var(--ink); border-radius: 2px; accent-color: var(--ink); }
input.ink::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--hl-yellow); border: 2px solid var(--ink); cursor: grab; }
input.ink::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--hl-yellow); border: 2px solid var(--ink); cursor: grab; }

/* ---------- Link previews (see setupLinkPreviews in common.js) ---------- */
.xref-box { position: fixed; z-index: 10001; background: var(--card); border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink); overflow: hidden; }
.xref-box.sheet { left: 0; right: 0; bottom: 0; border-radius: 14px 14px 0 0; border-bottom: 0; box-shadow: 0 -8px 24px -10px rgba(20,24,50,.45); }
.xref-bar { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--grid, #dfe4ee); }
.xref-name { flex: 1; min-width: 0; font-family: var(--head); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xref-go { font-weight: 700; font-size: 0.9rem; color: var(--pen); text-decoration: none; white-space: nowrap; }
.xref-go:hover { text-decoration: underline; }
.xref-close { border: 0; background: none; box-shadow: none; padding: 2px 6px; color: var(--pencil); font-size: 1rem; }
.xref-view { position: relative; overflow: hidden; background: var(--paper); cursor: grab; touch-action: none; user-select: none; }
.xref-view:active { cursor: grabbing; }
.xref-size { position: relative; overflow: hidden; }
.xref-zoom { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--pencil); font-family: var(--mono); }
.xref-zoom button { width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 1rem; line-height: 1; display: grid; place-items: center; }
.xref-pct { min-width: 3.2em; text-align: center; }
.xref-view iframe { border: 0; transform-origin: 0 0; display: block; background: var(--paper); position: absolute; left: 0; top: 0; pointer-events: none; }   /* look only */
.xref-wait { position: absolute; inset: 0; display: grid; place-items: center; color: var(--pencil); font-size: 0.9rem; }

/* A page shown inside a preview: content only */
html.embed .topbar, html.embed .paged-head, html.embed .pagebar, html.embed .thumbs, html.embed .thumbs-toggle,
html.embed .pen-tools, html.embed .pen-layer, html.embed .sticky-layer, html.embed .pen-guide-hint, html.embed .guide-toggle, html.embed .guide-bar,
html.embed .guide-glow, html.embed footer, html.embed .done-toggle { display: none !important; }
html.embed body.has-thumbs .wrap { position: static; right: auto; padding: 16px 24px 24px; max-width: none; overflow: visible; }
html.embed body.guiding section.part > * { opacity: 1 !important; }
html.embed body { padding-bottom: 0 !important; }
html.embed body.has-thumbs { overflow: auto !important; }   /* the page scrolls inside the preview */

/* ---------- Split screen: this page on the left, a linked page on the right (wide screens) ---------- */
.split-view { position: fixed; inset: 0; z-index: 10002; display: grid; grid-template-columns: 1fr 8px 1fr; background: var(--paper); }
.split-view iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--paper); min-width: 0; }
.split-bar { background: var(--ink); cursor: col-resize; opacity: 0.85; }
.split-bar:hover { opacity: 1; }
.split-right { min-width: 0; overflow: hidden; }
.split-inner { display: flex; flex-direction: column; height: 100%; width: 100%; }
.split-view.sliding { transition: grid-template-columns 0.45s cubic-bezier(.4, 0, .2, 1); }
.split-inner iframe { flex: 1; height: auto; }
.split-head { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--grid, #dfe4ee); background: var(--card); }
.split-name { flex: 1; min-width: 0; font-family: var(--head); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split-view.dragging iframe, .split-view.sliding iframe { pointer-events: none; }
html.split-open body { overflow: hidden; }

/* ---------- Lesson test ---------- */
.quiz .options button.chosen { border-color: var(--pen); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pen) 30%, transparent); }
.quiz-reveal { margin-top: 10px; }
.quiz .quiz-back { display: block; margin-top: 6px; font-family: var(--body, inherit); font-size: 0.9rem; color: var(--pencil); }
.test .quiz { border-top: 1px dashed var(--rule, #d6dbe6); padding-top: 22px; margin: 22px 0; }
.test .quiz .q small { display: block; font-family: var(--body, inherit); font-size: 0.8rem; color: var(--pencil); margin-bottom: 4px; letter-spacing: 0.02em; }
.test-result { margin: 26px 0 8px; padding: 12px 16px; border: 2px solid var(--ink); border-radius: 10px; background: var(--card); line-height: 1.6; }
.test-result.passed { border-color: var(--good); background: color-mix(in srgb, var(--hl-green) 35%, var(--card, #fff)); }
.test-gate { margin: 0 0 22px; padding: 12px 16px; border: 2px dashed var(--pen); border-radius: 10px; background: var(--card); line-height: 1.6; }
.test-gate-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.test .quiz .q .q-code { font-size: 0.9rem; margin: 10px 0 0; }
.test .quiz .q .q-code code { font-size: 1em; }

/* Show me how: game-style bubbles inside an activity */
.tour-btn { position: absolute; top: 10px; right: 96px; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--pen); background: none; box-shadow: none; color: var(--pen);
  font-family: var(--head); font-weight: 400; font-size: 1.05rem; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.tour-btn:hover { background: var(--pen); color: var(--paper); }
.activity.has-tour .do { padding-right: 130px; }
.tour-on { position: relative; z-index: 3; outline: 3px solid var(--pen) !important; outline-offset: 3px; border-radius: 6px;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--hl-yellow) 45%, transparent); transition: box-shadow 0.2s; }
.tour-bubble { position: fixed; z-index: 10001; background: var(--note-yellow); color: var(--ink); border: 0;
  border-radius: 2px 2px 16px 2px; padding: 18px 16px 12px; font-size: 1rem; line-height: 1.45; transform: rotate(-0.8deg);
  box-shadow: 0 2px 0 rgba(0,0,0,0.05), 4px 8px 18px -6px rgba(29,34,56,0.35); }
.tour-bubble::after { content: ""; position: absolute; top: -11px; left: var(--tapeX, 50%); width: 84px; height: 22px; transform: translateX(-50%) rotate(2deg);
  background: var(--tape); border-left: 2px dotted rgba(0,0,0,0.06); border-right: 2px dotted rgba(0,0,0,0.06); }
.tour-bubble::before { content: ""; position: absolute; top: -7px; left: calc(var(--arrow, 30px) - 7px); width: 14px; height: 14px;
  background: var(--note-yellow); transform: rotate(45deg); }
.tour-bubble[data-side="above"]::before { top: auto; bottom: -7px; }
.tour-bubble[data-side="right"]::before { top: calc(var(--arrowY, 30px) - 7px); left: -7px; }
.tour-bubble[data-side="left"]::before { top: calc(var(--arrowY, 30px) - 7px); left: auto; right: -7px; }
.tour-say { font-family: var(--hand); font-size: 1.12rem; line-height: 1.4; }
.tour-say b { font-weight: 700; }
.tour-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tour-n { font-family: var(--head); font-size: 0.95rem; color: var(--pen); }
.tour-x { background: none; border: 0; box-shadow: none; padding: 0 2px; color: var(--pencil); font-size: 1rem; cursor: pointer; }
.tour-say code { font-size: 0.8em; background: color-mix(in srgb, var(--card) 70%, transparent); }
.tour-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.tour-nav button { padding: 4px 12px; font-size: 0.9rem; }
.tour-nav .tour-next.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: none; }
.tour-skip, .tour-back { background: none; box-shadow: none; border: 0; color: var(--pencil); padding-left: 0 !important; }
.tour-wait { margin-left: auto; font-family: var(--head); color: var(--pen); }
.tour-doit { font-size: 0.8rem !important; padding: 4px 8px !important; }
@media print { .tour-btn, .tour-bubble { display: none; } }
body.touring .guide-bar { display: none !important; }   /* one guide at a time */
.tour-dim { opacity: 0.25; transition: opacity 0.25s; }   /* Show me how: only the part being explained stays bright */
.tour-say table { border-collapse: collapse; margin: 8px 0 4px; font-family: var(--mono); font-size: 0.78rem; }
.tour-say th, .tour-say td { padding: 2px 7px; text-align: right; border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); }
.tour-say th { font-weight: 600; color: var(--pencil); }
.tour-say td:first-child, .tour-say th:first-child { text-align: left; font-family: var(--body, inherit); }
.tour-say tr.tot td { border-top: 2px solid var(--ink); font-weight: 700; }
.tour-say tr.hi td { background: color-mix(in srgb, var(--hl-yellow) 55%, transparent); }

/* Support note on a lesson's last page (common.js): a quiet pencil line, or a taped card when the course is done */
.support-note { margin: -22px 0 40px; text-align: right; font-family: var(--hand); font-size: 0.95rem; }
.support-note a { color: var(--pencil); text-decoration: none; border-bottom: 1px dashed currentColor; }
.support-note a:hover { color: var(--pen); }
.support-note.card {
  position: relative; max-width: 440px; margin: 0 auto 48px; padding: 26px 24px 22px; text-align: center;
  background: var(--card); border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); border-radius: 4px;
  box-shadow: 0 10px 24px -16px rgba(20, 24, 50, 0.35); font-family: inherit; font-size: 1rem;
}
.support-note.card::before {
  content: ""; position: absolute; top: -11px; left: 50%; width: 92px; height: 22px; margin-left: -46px;
  background: rgba(255, 214, 120, 0.7); transform: rotate(-2deg);
}
.support-note.card h3 { margin: 0 0 6px; }
.support-note.card p { margin: 0 0 14px; }
.support-note.card a.support-btn { display: inline-block; padding: 8px 18px; border: 2px solid currentColor; border-radius: 8px; color: var(--pen); border-bottom-width: 2px; border-bottom-style: solid; font-family: var(--hand); }
body.teach .support-note, html.embed .support-note { display: none !important; }

/* All on one page */
.view-toggle { margin-left: auto; padding: 2px 9px; font-size: 1.05rem; line-height: 1.4; }
.view-toggle:hover { background: var(--hl-yellow); color: var(--on-hl); }
.view-toggle + .theme-toggle { margin-left: 0; }
.all-end { display: none; }
body.view-all .all-end { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 24px 0 48px; }
body.view-all main[data-paged] .hook { display: block; margin: 14px 0 0; text-align: right; font-family: var(--hand); color: var(--pencil); font-size: 0.95rem; line-height: 1.3; }
body.view-all .pagebar, body.view-all .support-note { display: none; }
body.view-all main[data-paged] section.part { margin-top: 18px; padding-top: 26px; border-top: 2px dashed var(--grid); }
body.view-all main[data-paged] section.part:first-of-type { margin-top: 0; border-top: 0; }