/* Paper notes: white page, hand-drawn look (page.md). */
@font-face { font-family: "Virgil"; src: url("vendor/Virgil.woff2") format("woff2"); font-display: block; }

:root {
  --ink: #262626; --pencil: #5b5b5b; --faint: #9a9a9a;
  --blue: #1c5fd6; --red: #d6336c; --green: #2b8a3e; --orange: #e8590c; --violet: #7048e8;
  --paper: #ffffff; --wash-blue: rgba(28, 95, 214, .06); --wash-red: rgba(214, 51, 108, .07);
  --wash-green: rgba(43, 138, 62, .07); --wash-yellow: rgba(255, 214, 10, .28);
  --hand: "Virgil", "Segoe Print", "Comic Sans MS", cursive;
  --print: Charter, "Bitstream Charter", "Iowan Old Style", Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --body: var(--print);
}
body.hand { --body: var(--hand); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 19.5px/1.62 var(--body); }
body.hand { font-size: 20px; }
p, li { margin: 12px 0; }

.sheet { max-width: 820px; margin: 0 auto; padding: 40px 24px 140px; }
h1, h2, h3, .hand, nav, .sk, .term-pop, .gloss, .bar, figure figcaption, .quiz summary, .more summary { font-family: var(--ui); }
h1 { font-size: 40px; line-height: 1.2; font-weight: normal; margin: 0 0 6px; }
h2 { font-size: 34px; font-weight: normal; margin: 0 0 14px; display: inline-block; padding-bottom: 6px;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.2 C 60 3.4, 120 6.4, 180 4.6 S 262 3.6, 298 5' stroke='%231c5fd6' stroke-width='2.2' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom / 100% 8px no-repeat; }
h3 { font-size: 25px; font-weight: normal; color: var(--blue); margin: 30px 0 8px; }
p { margin: 10px 0; }
ul, ol { margin: 8px 0; padding-left: 26px; }
li { margin: 4px 0; }
strong { font-weight: 600; color: var(--red); }
body.hand strong { font-weight: normal; }
em { font-style: italic; }
a { color: var(--blue); }
code { font-family: var(--ui); background: var(--wash-yellow); padding: 0 4px; border-radius: 3px; }
code { font-family: ui-monospace, Menlo, monospace; font-size: .88em; }

/* header */
.byline { color: var(--pencil); margin: 0 0 4px; font-family: var(--ui); font-size: 18px; }
.meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-family: var(--ui); font-size: 18px; margin: 10px 0 18px; }
.meta .time { background: var(--wash-yellow); padding: 0 8px; border-radius: 6px; }
.bar { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1.5px dashed rgba(0,0,0,.12);
       display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 8px 24px; font-size: 17px; }
.bar .grow { flex: 1; }
.seg { display: inline-flex; border: 1.5px solid rgba(0,0,0,.25); border-radius: 9px; overflow: hidden; }
.seg button { font: inherit; font-size: 16px; border: 0; background: none; padding: 2px 10px; cursor: pointer; color: var(--pencil); }
.seg button.on { background: var(--wash-yellow); color: var(--ink); }
.bar .label { color: var(--pencil); }
.btn { font: 16px var(--ui); background: #fff; border: 1.5px solid rgba(0,0,0,.25); border-radius: 9px; padding: 2px 10px; cursor: pointer; color: var(--ink); }
.btn:hover { background: var(--wash-yellow); }

/* contents */
.contents { margin: 8px 0 40px; font-family: var(--ui); }
.contents ol { padding-left: 24px; }
.contents a { text-decoration: none; font-size: 20px; }
.contents a:hover { text-decoration: underline wavy; }
.contents .mins { color: var(--faint); font-size: 16px; margin-left: 8px; }

section.chapter { margin: 0 0 80px; scroll-margin-top: 60px; }
.chap-no { color: var(--faint); font-family: var(--ui); font-size: 18px; margin: 0; }

/* source pills */
.src { font: 13px var(--ui); color: var(--pencil); border: 1px solid rgba(0,0,0,.2); border-radius: 8px; padding: 0 5px;
       margin-left: 3px; white-space: nowrap; vertical-align: 2px; cursor: help; }

/* terms */
.term { border-bottom: 2px dotted rgba(28, 95, 214, .55); cursor: help; }
.term.intro { font-style: italic; }
.term-pop { position: absolute; z-index: 40; max-width: 360px; background: #fff; border: 1.5px solid rgba(0,0,0,.25);
            border-radius: 10px; box-shadow: 0 6px 22px rgba(0,0,0,.14); padding: 10px 14px; font-size: 16px; line-height: 1.45; }
.term-pop .t { font-size: 19px; }
.term-pop .alt { color: var(--pencil); }
.term-pop .q { margin-top: 6px; color: var(--pencil); font-style: italic; font-family: var(--print); font-size: 15px; }
.term-pop .w { color: var(--faint); font-size: 14px; }
.term-pop .lossy { color: var(--orange); font-size: 14px; margin-top: 4px; }

/* glossary panel */
.gloss { position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: #fff; z-index: 50;
         border-left: 1.5px solid rgba(0,0,0,.15); box-shadow: -6px 0 24px rgba(0,0,0,.08); padding: 18px 18px 40px;
         overflow-y: auto; transform: translateX(105%); transition: transform .25s ease; }
.gloss.open { transform: none; }
.gloss h3 { margin-top: 0; }
.gloss dl { margin: 0; }
.gloss dt { font-size: 19px; margin-top: 14px; }
.gloss dt .alt { color: var(--pencil); font-size: 16px; }
.gloss dd { margin: 2px 0 0; font-size: 16px; line-height: 1.45; }
.gloss dd .q { color: var(--pencil); font-family: var(--print); font-style: italic; font-size: 14px; margin-top: 3px; }
.gloss dd a { font-size: 14px; }
.gloss .close { float: right; }

/* boxes (rough borders drawn by notes.js) */
.box, .tip, .trap, .open-q { position: relative; padding: 14px 20px; margin: 18px 0; }
.tip { background: var(--wash-blue); } .trap { background: var(--wash-red); } .open-q { background: var(--wash-green); }
.tip::before, .trap::before, .open-q::before { display: block; font: 17px var(--ui); margin-bottom: 2px; }
.tip::before { content: "tip"; color: var(--blue); }
.trap::before { content: "watch out"; color: var(--red); }
.open-q::before { content: "open question (not from the paper)"; color: var(--green); }
.rough-frame { position: absolute; inset: 0; pointer-events: none; overflow: visible; width: 100%; height: 100%; }
.side { color: var(--red); font-family: var(--ui); font-size: 18px; transform: rotate(-1.2deg); margin: 6px 0 6px 28px; }

/* read more + quiz */
details.more, details.quiz { margin: 18px 0; }
details.more > summary, details.quiz > summary { cursor: pointer; font-size: 19px; color: var(--blue); list-style: none; }
details.more > summary::before { content: "+ read more: "; color: var(--pencil); }
details.more[open] > summary::before { content: "- read more: "; }
details.more > .body { border-left: 2px dashed rgba(0,0,0,.15); padding: 2px 0 2px 18px; margin-top: 6px; }
.check { margin: 26px 0 0; }
.check > .hand { color: var(--green); font-size: 20px; }
details.quiz { margin: 8px 0; }
details.quiz > summary { color: var(--ink); }
details.quiz > summary::before { content: "? "; color: var(--green); }
details.quiz > .body { padding: 2px 0 2px 18px; color: var(--pencil); border-left: 2px dashed rgba(43, 138, 62, .4); }

/* paper figures taped in */
figure.paper { margin: 26px auto; background: #fff; padding: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.13); position: relative; transform: rotate(-.4deg); }
figure.paper::before { content: ""; position: absolute; top: -11px; left: 50%; width: 110px; height: 24px; margin-left: -55px;
                       background: rgba(255, 221, 120, .55); transform: rotate(1.5deg); }
figure.paper img { display: block; width: 100%; height: auto; }
figcaption { font-size: 16px; color: var(--pencil); margin-top: 6px; }

/* sketches */
.sk { margin: 22px 0 28px; }
.sk-scroll { overflow-x: auto; padding: 4px 2px 8px; }
.sk-stage { position: relative; margin: 0 auto; }
.sk-grid { position: relative; display: grid; gap: var(--gap, 34px 46px); grid-template-columns: var(--cols); align-items: center; z-index: 1; }
.sk-ink { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.sk-ink.under { z-index: 0; }
.node { position: relative; padding: 12px 14px; text-align: center; font-size: 19px; line-height: 1.3; min-width: 0; }
.node.plain { padding: 2px 6px; }
.node .small { display: block; font-size: 15px; color: var(--pencil); }
.node .big { font-size: 34px; line-height: 1.1; }
.node.lean-left { text-align: left; }
.node .who { font-size: 15px; color: var(--pencil); display: block; margin-bottom: 2px; }
.c-blue { color: var(--blue); } .c-red { color: var(--red); } .c-green { color: var(--green); } .c-orange { color: var(--orange); }
.c-pencil { color: var(--pencil); } .c-violet { color: var(--violet); }
.sk [data-step] { transition: opacity .45s ease; }
.sk .hidden { opacity: 0; }
.sk-base { position: relative; }
.sk-base img { display: block; width: 100%; height: auto; }
.spot { position: absolute; pointer-events: none; }
.sk-caps { min-height: 3.4em; margin: 10px 4px 0; font: 18px/1.5 var(--body); color: var(--ink); }
.sk-caps p { margin: 0; display: none; }
.sk-caps p.on { display: block; }
.sk-ctl { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-family: var(--ui); }
.sk-ctl .count { color: var(--faint); font-size: 15px; margin-left: 4px; }
.sk-ctl .btn.next.pulse { animation: pulse 1.6s ease-in-out 2; }
@keyframes pulse { 50% { background: var(--wash-yellow); } }
.sk-title { font-size: 16px; color: var(--pencil); margin: 0 0 6px; }

@media (max-width: 640px) {
  body { font-size: 18px; }
  .sheet { padding: 24px 16px 120px; }
  h1 { font-size: 32px; } h2 { font-size: 28px; }
  .bar { padding: 6px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sk [data-step] { transition: none; }
  .gloss { transition: none; }
}

/* bar chapter links */
.bar .chap { display: inline-flex; gap: 2px; }
.bar .chap a { text-decoration: none; padding: 0 7px; border-radius: 6px; color: var(--pencil); }
.bar .chap a.here { background: var(--wash-yellow); color: var(--ink); }
@media (max-width: 760px) { .bar .chap, .bar .label { display: none; } .bar { gap: 6px 8px; } .seg button { padding: 2px 7px; } }

/* glossary inside the last chapter */
dl.gloss-inline dt { font-family: var(--ui); font-size: 21px; margin-top: 16px; }
dl.gloss-inline dt .alt { color: var(--pencil); font-size: 17px; }
dl.gloss-inline dd { margin: 2px 0 0 18px; }
dl.gloss-inline dd .q { color: var(--pencil); font-family: var(--print); font-style: italic; font-size: 15px; margin-top: 2px; }

/* parts inside sketch nodes */
.node .field { display: block; border-top: 1.5px dashed rgba(0,0,0,.18); padding: 4px 0 2px; font-size: 17px; }
.node .fk { display: inline-block; min-width: 96px; color: var(--pencil); font-size: 14px; }
.node .barrow { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.node .barrow .lab { width: 170px; flex: none; font-size: 16px; text-align: right; color: var(--pencil); }
.node .barrow .node { padding: 3px 8px; font-size: 17px; text-align: right; }
.lead { font-size: 21px; }

/* narrow screens: grid sketches stack into one column (notes.js, Sketch.layout) */
.sk-stage { max-width: 100%; }
.sk.stack .sk-stage { width: 100% !important; }
.sk.stack .sk-grid { grid-template-columns: 1fr !important; gap: 46px 0 !important; padding-right: 30px; }
.sk.stack .sk-grid > .node { grid-area: auto !important; }
.sk.stack .node .barrow .lab { width: 110px; }
.sk-title .full { font-size: 14px; margin-left: 8px; }
section.chapter > .words-intro { margin-top: 4px; }

/* highlighter: soft marker strokes, one meaning per color (page.md, Look) */
:root { --hl-y: 255, 214, 64; --hl-g: 120, 200, 120; --hl-r: 255, 140, 150; }
mark.hl { color: inherit; padding: 0 .12em; margin: 0 -.06em; border-radius: .25em .6em .35em .5em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(100deg, rgba(var(--c), 0) 0%, rgba(var(--c), .42) 1.2%, rgba(var(--c), .34) 50%, rgba(var(--c), .44) 98.5%, rgba(var(--c), 0) 100%); }
mark.hl-y { --c: var(--hl-y); } mark.hl-g { --c: var(--hl-g); } mark.hl-r { --c: var(--hl-r); }
body.no-hl mark.hl { background: none; padding: 0; margin: 0; }
.hl-key { font: 15px var(--ui); color: var(--pencil); display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; }
body.no-hl .hl-key { display: none; }
.btn.tog { color: var(--pencil); }
.btn.tog.on { background: var(--wash-yellow); color: var(--ink); }
.btn.tog::before { content: "\25CB  "; }
.btn.tog.on::before { content: "\25CF  "; }

/* fonts: hand only for drawn things; reading text in print; controls in sans */
h1, h2, h3 { font-family: var(--print); }
h1 { font-weight: 600; letter-spacing: -.01em; }
h2 { font-weight: 600; font-size: 31px; }
h3 { font-weight: 600; font-size: 23px; }
.term-pop, .gloss dd, .gloss dt, dl.gloss-inline dt, dl.gloss-inline dd, details summary, .tip, .trap, .open-q { font-family: var(--print); }
.gloss dt, dl.gloss-inline dt { font-weight: 600; }
.gloss dt .alt, dl.gloss-inline dt .alt { font-weight: normal; }
.term-pop .t { font-weight: 600; }
.sk .node, .sk-title, .side, .hand, .sk .node .who, .sk .node .small, .node .fk, .node .barrow .lab { font-family: var(--hand); }
.sk-title .src, .sk-title .full { font-family: var(--ui); }
.nowrap { white-space: nowrap; }

/* phone: the toggles fold behind one "settings" button so the bar stays one row */
.opts { display: contents; }
.opts-btn { display: none; }
@media (max-width: 760px) {
  .opts { display: none; }
  .bar.open .opts { display: flex; flex-wrap: wrap; gap: 6px 8px; width: 100%; order: 10; padding: 4px 0 2px; }
  .opts-btn { display: inline-block; }
}

/* source pills that open the paper at their page (page.md, Sources) */
a.src { text-decoration: none; cursor: pointer; }
a.src:hover { background: var(--wash-yellow); color: var(--ink); }

/* icons (page.md, Icons): inline in text at 1em, block above the label inside a sketch box */
.ic { display: inline-block; position: relative; width: var(--ic, 1.05em); height: var(--ic, 1.05em); vertical-align: -.16em; line-height: 0; flex: none; }
.ic > svg { width: 100%; height: 100%; display: block; }
.ic.ti { margin-right: .22em; --ic: .92em; vertical-align: -.1em; }
.node > .ic:not(.inline) { display: block; margin: 0 auto 6px; --ic: 44px; width: var(--ic); height: var(--ic); }
.ic .badge { position: absolute; right: -28%; bottom: -14%; width: 58%; height: 58%; --ic: auto; }
.ic .badge > svg { filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff); }

/* guess first (page.md, Guess first) */
.predict { position: relative; padding: 14px 20px 12px; margin: 22px 0; background: var(--wash-blue); }
.predict > .hand { color: var(--blue); font-size: 20px; font-family: var(--hand); }
.predict .pq { margin: 4px 0 10px; }
.predict .opts { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.predict .opt { font: 17px/1.35 var(--print); background: #fff; border: 1.5px solid rgba(0,0,0,.28); border-radius: 10px; padding: 6px 12px; cursor: pointer; color: var(--ink); text-align: left; }
.predict .opt:hover:not(:disabled) { background: var(--wash-yellow); }
.predict .opt:disabled { cursor: default; color: var(--pencil); }
.predict .opt.right { border-color: var(--green); background: rgba(43, 138, 62, .12); color: var(--ink); }
.predict .opt.wrong { border-color: var(--red); background: var(--wash-red); text-decoration: line-through; text-decoration-color: rgba(214, 51, 108, .6); }
.predict .opt.chosen { border-width: 2.5px; }
.predict .num { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--ui); }
.predict .num input[type=range] { flex: 1 1 220px; accent-color: var(--blue); }
.predict .num output { font: 26px var(--hand); color: var(--blue); min-width: 2.2em; text-align: right; }
.predict .num .of { color: var(--pencil); font-size: 16px; }
.predict svg.scale { display: block; width: 100%; height: 74px; margin-top: 6px; overflow: visible; }
.predict:not(.answered) svg.scale { display: none; }
.predict .sc-t { font: 15px var(--hand); }
.predict .pafter { margin: 10px 0 0; font: 15px var(--ui); color: var(--pencil); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.predict .skip { font: inherit; background: none; border: 0; padding: 0; color: var(--blue); text-decoration: underline; cursor: pointer; }
.predict .reveal { margin-top: 8px; }
.predict .reveal .yours { color: var(--blue); margin: 0; }
.predict .reveal .yours:empty { display: none; }
.veiled { filter: blur(6px); opacity: .45; user-select: none; pointer-events: none; transition: filter .6s ease, opacity .6s ease; }
@media (prefers-reduced-motion: reduce) { .veiled { transition: none; } }

/* check yourself: write first, then the answer (page.md, Check questions) */
.quiz { margin: 14px 0 18px; }
.quiz .qq { margin: 0 0 6px; font-size: 19px; }
.quiz .qq::before { content: "? "; color: var(--green); font-weight: 600; }
.quiz .try { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; }
.quiz textarea { flex: 1 1 300px; min-width: 0; font: 17px/1.45 var(--print); color: var(--ink); border: 1.5px dashed rgba(43, 138, 62, .55);
                 border-radius: 9px; padding: 5px 10px; resize: none; overflow: hidden; background: #fff; min-height: 2.1em; }
.quiz textarea:focus { outline: 2px solid rgba(43, 138, 62, .35); }
.quiz.nudge textarea { border-color: var(--orange); }
.quiz.nudge textarea::placeholder { color: var(--orange); }
.quiz > .body { padding: 2px 0 2px 18px; color: var(--pencil); border-left: 2px dashed rgba(43, 138, 62, .4); }
.quiz .you-wrote { color: var(--blue); font-style: italic; }

/* end-of-page review box */
.keep { background: var(--wash-yellow); }
.keep .hand { font: 20px var(--hand); color: var(--ink); margin: 0; }
.keep .btn { text-decoration: none; display: inline-block; }

/* the paper alongside (wide screens only) */
.pdf-pane { display: none; }
body.split .sheet { max-width: none; width: 50vw; margin: 0; padding-left: 28px; padding-right: 28px; }
body.split .pdf-pane { display: flex; flex-direction: column; position: fixed; top: var(--bar-h, 52px); right: 0; bottom: 0; width: 50vw;
                       background: #fff; border-left: 1.5px solid rgba(0,0,0,.15); z-index: 15; }
.pdf-pane .pane-bar { display: flex; gap: 14px; align-items: center; padding: 6px 12px; font: 15px var(--ui); color: var(--pencil); border-bottom: 1.5px dashed rgba(0,0,0,.12); }
.pdf-pane .pane-bar span { flex: 1; }
.pdf-pane iframe { flex: 1; width: 100%; border: 0; }
@media (max-width: 1099px) {
  .split-btn { display: none; }
  body.split .pdf-pane { display: none; }
  body.split .sheet { width: auto; max-width: 820px; margin: 0 auto; padding: 40px 24px 140px; }
}

/* review page */
.review .stats { font: 17px var(--ui); color: var(--pencil); margin: 6px 0 14px; }
.review .msg { background: var(--wash-yellow); padding: 6px 12px; border-radius: 8px; font: 16px var(--ui); }
.review .rcard { border: 1.5px solid rgba(0,0,0,.18); border-radius: 12px; padding: 16px 20px; margin: 10px 0 24px; }
.review .rcard .from { font: 15px var(--ui); color: var(--pencil); margin: 0 0 6px; }
.review .rcard .grade { display: flex; gap: 10px; margin-top: 12px; }
.review .rcard .grade .yes { border-color: var(--green); }
.review .rcard .grade .no { border-color: var(--red); }
.review .done-msg { font-family: var(--hand); font-size: 20px; color: var(--green); }
.review .plist .prow { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 8px 0; border-bottom: 1.5px dashed rgba(0,0,0,.1); font-family: var(--ui); font-size: 16px; }
.review .plist .prow .t { flex: 1 1 100%; font-family: var(--print); font-size: 18px; }
.review .plist .prow .t a { text-decoration: none; color: var(--ink); }
.review .anki { margin-top: 22px; font-family: var(--ui); font-size: 15px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.review .src { cursor: default; }
.predict.answered .num { display: none; }

/* skip questions: answers shown, no answer box */
body.skip-q .quiz .try { display: none; }
body.skip-q .quiz .body[hidden] { display: block; }
@media (max-width: 1400px) { .bar .opts .label { display: none; } }
.credit { margin: 4px 0 14px; padding: 8px 12px; border-left: 3px solid var(--blue); background: var(--wash-blue); color: var(--pencil); font-size: 16px; }