@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@400;600;700&family=Kalam:wght@400;700&family=Noto+Sans+TC:wght@400;700&family=LXGW+WenKai+TC:wght@400;700&display=swap');

/* Head First feel: book serif body, plain sans labels, handwriting for titles and notes, thin-ruled boxes */
:root {
  --paper: #fcfcf9;
  --ink: #141414;
  --muted: #5c5c57;
  --rule: #d4d3cc;
  --edge: #141414;        /* box borders and header strips */
  --pencil: #f2f1ec;      /* quiet fills: Brain Power, row headers */
  --hand: #2346e8;        /* pen-blue handwriting */
  --link: #2346e8;
  --fr: #c9361e;          /* clickable French */
  --box: #ffffff;
  --hi: #ffc21a;          /* highlighter */
  --hi-soft: #fff7d6;     /* blank to fill in */
  --brain: #5c5c57;
  --watch: #c9361e;
  --zh: #0f7a55;
  --quebec: #2346e8;
  --quebec-bg: #eef2ff;
  --exam: #5b3fd1;
  --bubble-r: #fff4f1;
  --bp-bg: #141414;
  --bp-ink: #fcfcf9;
  --bp-fr: #ffab9a;
  --right: #1f7a35;
  --wrong: #c62828;
  --accent-miss: #a85a00;
  --body: 'Libre Baskerville', Baskerville, Georgia, serif;
  --head: 'Source Sans 3', 'Myriad Pro', 'Noto Sans TC', sans-serif;
  --handf: 'Kalam', 'LXGW WenKai TC', 'Comic Sans MS', cursive; /* WenKai covers the Chinese in handwritten notes */
  --zhf: 'Libre Baskerville', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif; /* Latin (jyutping/pinyin) from Baskerville, Han from Noto */
  --on-accent: #ffffff;
  color-scheme: light;
}
/* dark: the system setting, unless the reader picked light with the nav button; or whenever they picked dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #161614;
    --ink: #edebe4;
    --muted: #a5a39b;
    --rule: #3a3936;
    --edge: #8a8880;
    --pencil: #22221f;
    --hand: #93abff;
    --link: #93abff;
    --fr: #ff8a73;
    --box: #1f1f1c;
    --hi: #f2b705;
    --hi-soft: #2e2a1a;
    --brain: #a5a39b;
    --watch: #ff7a5c;
    --zh: #3fc48f;
    --quebec: #93abff;
    --quebec-bg: #1c2140;
    --exam: #a996ff;
    --bubble-r: #2a1d1a;
    --bp-bg: #2a2a26;
    --bp-ink: #edebe4;
    --bp-fr: #ff8a73;
    --right: #66bb6a;
    --wrong: #ef5350;
    --accent-miss: #ffb74d;
    --on-accent: #161614;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #161614;
  --ink: #edebe4;
  --muted: #a5a39b;
  --rule: #3a3936;
  --edge: #8a8880;
  --pencil: #22221f;
  --hand: #93abff;
  --link: #93abff;
  --fr: #ff8a73;
  --box: #1f1f1c;
  --hi: #f2b705;
  --hi-soft: #2e2a1a;
  --brain: #a5a39b;
  --watch: #ff7a5c;
  --zh: #3fc48f;
  --quebec: #93abff;
  --quebec-bg: #1c2140;
  --exam: #a996ff;
  --bubble-r: #2a1d1a;
  --bp-bg: #2a2a26;
  --bp-ink: #edebe4;
  --bp-fr: #ff8a73;
  --right: #66bb6a;
  --wrong: #ef5350;
  --accent-miss: #ffb74d;
  --on-accent: #161614;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1rem/1.75 var(--body);
}
html:lang(zh-Hant) body { font-family: var(--zhf); }
html:lang(zh-Hant) .lede { font-style: normal; } /* no fake italics on Han */
main { max-width: 44rem; margin: 0 auto; padding: 1rem 16px 4rem; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); }
mark { color: inherit; background: linear-gradient(transparent 55%, var(--hi) 55%, var(--hi) 92%, transparent 92%); }

h1, h2, h3 { font-family: var(--head); font-weight: 700; line-height: 1.2; }
h1 { font: 700 clamp(2.4rem, 7vw, 3.4rem)/1.15 var(--handf); margin: .5rem 0 0; }
h2 { font-size: 1.75rem; margin: 3rem 0 .75rem; border-bottom: 2px solid var(--ink); padding-bottom: .2rem; }
h3 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
.chapter-no { font: 600 .95rem var(--head); color: var(--muted); text-transform: uppercase; letter-spacing: .15em; margin: 2rem 0 0; }
.lede { font-size: 1.25rem; font-style: italic; color: var(--muted); }

/* handwriting */
.hand, .note { font-family: var(--handf); color: var(--hand); font-size: 1.45rem; line-height: 1.2; }
.note { display: block; margin: .5rem 0 1rem 1.5rem; transform: rotate(-1.5deg); }
.note::before { content: '\2190  '; }
@media (min-width: 72rem) {
  .note { float: right; clear: right; width: 13rem; margin: 0 -16rem 1rem 0; transform: rotate(-2deg); }
  .note::before { content: '\2190  '; }
}

/* clickable French */
.fr { color: var(--fr); cursor: pointer; border-bottom: 2px dotted currentColor; }
.fr:hover, .fr:focus-visible { background: color-mix(in srgb, var(--fr) 12%, transparent); outline: none; }
.fr.speaking { background: color-mix(in srgb, var(--fr) 22%, transparent); }
button.fr { font: inherit; background: var(--box); border: 2px solid var(--fr); border-radius: 2rem; padding: .15rem .8rem; }
.zh, [lang^="zh"] { font-family: var(--zhf); }

/* annotated sentence: native <ruby> with notes under the words */
.annot { font-size: 1.8rem; text-align: center; margin: 2rem 0; line-height: 3.2; }
.annot ruby { ruby-position: under; margin: 0 .2rem; }
.annot .fr { border-bottom: 0; } /* the dotted line would cut through the notes */
.annot rt { font-family: var(--handf); color: var(--hand); font-size: .55em; line-height: 1.1; }

/* comic scene: speech bubbles */
.scene { display: grid; gap: .8rem; margin: 1.5rem 0 2rem; }
.scene p { margin: 0; max-width: 85%; padding: .6rem 1rem; border: 2px solid var(--ink); border-radius: 18px 18px 18px 4px; background: var(--box); position: relative; }
.scene p.r { justify-self: end; border-radius: 18px 18px 4px 18px; background: var(--bubble-r); }
.scene b { font: 600 .8rem var(--head); display: block; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* boxes: --edge is the border and header strip colour */
aside { margin: 2.5rem 0; padding: 1.1rem 1.3rem; background: var(--box); border: 2px solid var(--edge); border-radius: 4px; }
aside > h4:first-child {
  display: flex; align-items: center; gap: .6rem;
  margin: -1.1rem -1.3rem 1rem; padding: .35rem 1.3rem; border-radius: 2px 2px 0 0;
  font: 700 1.6rem/1.2 var(--handf);
  color: var(--paper); background: var(--edge);
}
aside > h4:first-child::before { flex: none; }
/* icon boxes: a stroke icon painted in the header's text colour */
.sharpen > h4:first-child::before, .brain-power > h4:first-child::before, .watch-it > h4:first-child::before,
.quebec > h4:first-child::before, .exam > h4:first-child::before, .fireside > h4:first-child::before {
  content: ''; width: 1em; height: 1em; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
/* tag boxes: a letter in a small frame */
.no-dumb > h4:first-child::before, .zh-note > h4:first-child::before, .en-note > h4:first-child::before {
  font: 700 .6em/1 var(--head); padding: .2em .35em; border: 2px solid currentColor; border-radius: 3px;
}

.sharpen { --edge: var(--hi); }
.sharpen > h4:first-child { color: #141414; }
.sharpen { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1-5L16 4l4 4L9 19z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E"); }

.brain-power { border: 2px dashed var(--brain); background: var(--pencil); }
.brain-power > h4:first-child { background: none; color: var(--ink); margin: 0 0 .8rem; padding: 0; }
.brain-power { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }

.no-dumb > h4:first-child::before { content: '?'; }
.no-dumb dt { font-weight: 600; margin-top: 1rem; }
.no-dumb dt:first-child { margin-top: 0; }
.no-dumb dt::before { content: 'Q: '; font-family: var(--head); font-weight: 700; }
.no-dumb dd { margin: .2rem 0 0 0; }
.no-dumb dd::before { content: 'A: '; font-family: var(--head); font-weight: 700; }

.watch-it { --edge: var(--watch); }
.watch-it > h4:first-child { color: var(--on-accent); }
.watch-it { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3L2 20h20z'/%3E%3Cpath d='M12 10v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }

.zh-note { --edge: var(--zh); font-family: var(--body); }
.zh-note > h4:first-child { color: var(--on-accent); font-size: 1.35rem; }
.zh-note > h4:first-child::before { content: '\4E2D'; font-family: var(--zhf); }
.zh-note p, .zh-note li { font-family: var(--zhf); }

.en-note > h4:first-child { background: none; color: var(--ink); margin: 0 0 .8rem; padding: 0; }
.en-note > h4:first-child::before { content: 'EN'; background: var(--ink); color: var(--paper); border-color: var(--ink); }

.quebec { border-color: var(--quebec); background: var(--quebec-bg); box-shadow: none; }
.quebec > h4:first-child { background: none; color: var(--quebec); margin: 0 0 .8rem; padding: 0; }
.quebec { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='M4 7l16 10'/%3E%3Cpath d='M20 7L4 17'/%3E%3C/svg%3E"); }

.exam { --edge: var(--exam); }
.exam > h4:first-child { color: var(--on-accent); }
.exam { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l3 2'/%3E%3Cpath d='M9 2h6'/%3E%3C/svg%3E"); }

.bullet-points { background: var(--bp-bg); color: var(--bp-ink); border-color: var(--bp-bg); padding: 1.3rem 1.5rem; }
.bullet-points > h4:first-child {
  width: fit-content; margin: 0 0 1rem; padding: 0 0 .3rem; border-radius: 0;
  background: none; color: var(--bp-ink); font: 700 1.5rem var(--head); letter-spacing: .15em; text-transform: uppercase; border-bottom: 2px solid var(--hi);
}
.bullet-points ul { list-style: square; padding-left: 1.2rem; }
.bullet-points li::marker { color: var(--hi); }
.bullet-points .fr { color: var(--bp-fr); }

/* fireside chat */
.fireside dl { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1rem; margin: 0; }
.fireside dt { font-family: var(--head); font-weight: 700; }
.fireside dd { margin: 0; }
.fireside { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 4 6 5.5 6 11a6 6 0 0 1-12 0c0-3 1.5-4.5 3-6 0 2 1 3.5 2.5 3.5C11.5 9 11 6 12 3z'/%3E%3C/svg%3E"); }

/* tables */
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
th, td { border: 1px solid var(--rule); padding: .5rem .75rem; text-align: left; vertical-align: top; }
th { font-family: var(--head); font-weight: 600; background: var(--pencil); }
thead th { border-bottom: 2px solid var(--ink); }
.table-wrap { overflow-x: auto; }
.table-wrap table.wide { min-width: 40rem; } /* scrolls sideways on phones instead of squashing */

/* exercises */
input, select[data-answer] {
  font: inherit; color: var(--ink); background: var(--hi-soft);
  border: 0; border-bottom: 2px solid var(--ink); padding: 0 .4rem; min-width: 5rem; max-width: 100%; min-height: 2.2rem;
}
select[data-answer] { border: 2px solid var(--ink); border-radius: 4px; }
select[data-answer] option { color: var(--ink); background: var(--paper); } /* the popup would inherit the see-through .right/.wrong tint */
.right { border-color: var(--right) !important; background: color-mix(in srgb, var(--right) 14%, transparent) !important; }
.wrong { border-color: var(--wrong) !important; background: color-mix(in srgb, var(--wrong) 14%, transparent) !important; }
.accent { border-color: var(--accent-miss) !important; border-style: dashed !important; background: color-mix(in srgb, var(--accent-miss) 16%, transparent) !important; }
ol.ex li { margin: .6rem 0; }
button.check, button.done, button.rec {
  font: 600 1rem var(--head); letter-spacing: .03em;
  background: var(--hi); color: #141414; border: 2px solid #141414; border-radius: 4px;
  padding: .4rem 1.1rem; min-height: 44px; cursor: pointer; margin-top: .5rem;
}
button.check:hover, button.done:hover, button.rec:hover { filter: brightness(.95); }
button.done, button.rec { background: var(--box); color: var(--ink); }
button.rec.on { background: var(--wrong); color: #ffffff; }
details.answer { margin-top: 1rem; border-top: 2px dashed var(--rule); padding-top: .5rem; }
details.answer summary { cursor: pointer; font-family: var(--handf); font-size: 1.35rem; color: var(--hand); }

/* nav injected by book.js */
nav.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 16px; background: var(--box); border-bottom: 2px solid var(--ink); font: 600 .95rem var(--head); }
nav.top a { color: var(--ink); text-decoration: none; }
nav.top a:first-child { font: 700 1.4rem/1.2 var(--handf); }
nav.top .tools a { display: inline-flex; align-items: center; min-height: 40px; border: 1px solid var(--ink); border-radius: 4px; padding: 0 .8rem; }
nav.top .tools { display: flex; align-items: center; gap: .5rem; }
button.theme { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; color: var(--ink); background: var(--box); border: 1px solid var(--ink); border-radius: 4px; cursor: pointer; }
button.theme:hover, nav.top .tools a:hover { background: var(--hi); color: #141414; }
button.theme svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
nav.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1rem; border-top: 2px solid var(--ink); font: 600 1rem var(--head); }
nav.pager a { text-decoration: none; }

body > footer { text-align: center; padding: 1.5rem 16px 2rem; font-size: .85rem; color: var(--muted); border-top: 1px solid var(--rule); }

/* cover + toc */
.cover { text-align: center; padding: 2rem 0 1rem; }
.cover img { width: min(100%, 20rem); border-radius: .2rem; box-shadow: 0 .6rem 1.6rem rgb(0 0 0 / .3); transform: rotate(-2deg); margin-bottom: 1.5rem; }
.cover h1 { font-size: clamp(2.8rem, 11vw, 4.5rem); margin: 0; }
@media (min-width: 44rem) {
  .cover { display: grid; grid-template-columns: 17rem 1fr; gap: 2.5rem; align-items: center; text-align: left; }
  .cover img { margin: 0; }
}
.cover .hand { font-size: 2rem; display: inline-block; transform: rotate(-3deg); }
#toc h3 { border-bottom: 2px solid var(--ink); padding-bottom: .2rem; }
#toc ol { list-style: none; padding: 0; }
#toc li { display: flex; gap: .8rem; padding: .3rem 0; border-bottom: 1px solid var(--rule); }
#toc .n { font-family: var(--head); font-weight: 600; color: var(--muted); min-width: 2rem; }
#toc .soon { color: var(--muted); }
#toc .tick { color: var(--right); }