:root {
  color-scheme: light;
  --page: #faf9f5;
  --surface: #fffefa;
  --ink: #18332e;
  --secondary-ink: #43574f;
  --muted: #53635c;
  --line: #d9ded4;
  --cobalt: #2b49ba;
  --cobalt-dark: #203687;
  --soft-blue: #ebedfc;
  --amber: #e58a48;
  --radius: 14px;
  --display: "DM Serif Text", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "Avenir Next", Avenir, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; scroll-padding-top: 18px; }
body { margin: 0; min-height: 100vh; background: var(--page); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a, input, select, summary { touch-action: manipulation; }
button { border: 0; background: none; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid #be561d; outline-offset: 4px; }
a { color: var(--cobalt); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--cobalt-dark); }
button, a { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
[hidden] { display: none !important; }
.wrap { width: min(1100px, calc(100% - 64px)); margin-inline: auto; }
.sitehead { background: #fffefa; border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 0; color: var(--ink); font-family: var(--display); font-size: 1.52rem; font-weight: 700; letter-spacing: -.045em; line-height: 1; text-decoration: none; white-space: nowrap; }
.brandmark { position: relative; width: 36px; height: 36px; display: inline-grid; place-items: center; flex: none; border-radius: 10px; background: var(--ink); color: #fffefa; font: 700 1.1rem/1 var(--sans); letter-spacing: -.04em; }
.brandmark:empty::before, .brandmark:empty::after { content: ""; position: absolute; width: 5px; height: 20px; background: #ffdf8e; border-radius: 2px 2px 0 0; transform: rotate(33deg); }
.brandmark:empty::before { left: 12px; top: 6px; }
.brandmark:empty::after { width: 3px; height: 15px; left: 20px; top: 13px; }
.bar nav { display: flex; align-items: center; gap: 3px; }
.bar nav button, .bar nav a { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 13px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font: 650 .88rem/1.25 var(--sans); text-decoration: none; }
.bar nav button:hover, .bar nav a:hover { background: #f1f2ed; color: var(--ink); }
.bar nav .active, .bar nav [aria-current=page] { background: #e9eee7; color: var(--ink); }
main.wrap { padding-top: clamp(24px, 4vw, 48px); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { color: var(--ink); text-wrap: pretty; }
h1, h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.05em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 1.025; }
h2 { font-size: clamp(1.65rem, 3vw, 2.38rem); line-height: 1.12; }
h3 { font: 700 1.06rem/1.35 var(--sans); letter-spacing: -.025em; }
.kicker { color: var(--cobalt-dark); font: 750 .71rem/1.4 var(--sans); text-transform: uppercase; letter-spacing: .16em; }
.kicker + h1, .kicker + h2, .kicker + h3 { margin-top: 12px; }
.lede { color: var(--secondary-ink); max-width: 55ch; font-size: 1.03rem; line-height: 1.55; }
h1 + .lede, h2 + .lede { margin-top: 14px; }
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); border: 1px solid #cfd7c6; border-radius: 18px; background: #edf0e7; overflow: hidden; }
.hero-text { position: relative; z-index: 1; align-self: center; min-width: 0; padding: clamp(28px, 4.2vw, 54px); }
.hero-text .kicker { color: #415647; }
.hero-text h1 { max-width: 17ch; }
.hero-text p:not(.kicker):not(.meta) { max-width: 45ch; }
.hero-text .primary, .hero-text .actions { margin-top: 22px; }
.hero-text .actions .primary { margin: 0; }
.hero-text .meta { margin-top: 12px; }
.meta, .subtle { color: var(--muted); font-size: .9rem; }
.meta { font-size: .81rem; font-weight: 550; }
.meta span + span { margin-left: 7px; }
.art { position: relative; align-self: stretch; min-height: 270px; overflow: hidden; container-type: inline-size; background: #e1e7df; font-size: clamp(12px,1.45vw,17px); pointer-events: none; }
.art-grid { position: absolute; inset: -10%; transform: rotate(-7deg) scale(1.1); opacity: .65; background-image: linear-gradient(#becbc0 1px,transparent 1px),linear-gradient(90deg,#becbc0 1px,transparent 1px); background-size: 1.25em 1.25em; }
.notebook { position: absolute; width: 10.7em; height: 13.8em; left: 47%; top: 49%; background: #3958c5; border: 2px solid #213e9b; border-radius: .17em .62em .62em .17em; transform: translate(-50%,-50%) rotate(-15deg); box-shadow: .12em .22em 0 #fffae9, .19em .3em 0 #a2a899, .23em .45em 0 #fcf6dd, .32em .55em 0 #6c785d, .63em .87em 0 rgba(26,53,37,.12); }
.binding { position: absolute; top: -2px; left: -.1em; bottom: -2px; width: 1.14em; border-right: .12em solid #1e3997; background: repeating-linear-gradient(0deg,transparent 0 .29em,rgba(255,255,255,.08) .29em .34em),#2d4591; }
.cover-label { position: absolute; left: 26%; right: 17%; top: 19%; height: 32%; background: #f5efcf; border-radius: .13em; box-shadow: .12em .14em 0 #223c96; }
.cover-label::before { content: ""; position: absolute; inset: .38em; border: 1px solid #c5b991; }
.cover-label::after { content: ""; position: absolute; left: 20%; right: 20%; top: 40%; height: .7em; border-block: .1em solid #77775f; }
.cover-lines { position: absolute; left: 28%; right: 24%; bottom: 17%; height: .38em; border-block: 1px solid #9da9da; }
.ruler { position: absolute; left: 71%; top: 61%; height: 10.4em; width: 1.85em; border: 1.5px solid #a4612c; border-radius: .12em; background: repeating-linear-gradient(to bottom, transparent 0 .48em, #945529 .48em .55em) left .1em top .18em / .42em 100% no-repeat, repeating-linear-gradient(to bottom,transparent 0 1.03em,#8c5129 1.03em 1.12em) left .08em top .18em / .72em 100% no-repeat,#edb978; transform: translate(-50%,-50%) rotate(30deg); box-shadow: .19em .23em 0 rgba(76,61,36,.12); }
.pencil { position: absolute; left: 30%; top: 62%; width: .61em; height: 11.5em; border-radius: .14em .14em 0 0; transform: translate(-50%,-50%) rotate(32deg); background: linear-gradient(to bottom,#e8a3a2 0 .8em, #aab5b1 .8em 1.36em, transparent 1.36em),linear-gradient(90deg,#985225 0 14%,#ed934d 14% 45%,#ffd185 45% 69%,#d67a39 69%); box-shadow: .12em .14em 0 rgba(38,53,37,.14); }
.pencil::after { content: ""; position: absolute; top: 99%; width: 100%; height: 1.06em; background: linear-gradient(to bottom,#dfbb8c 68%,#354037 68%); clip-path: polygon(0 0,100% 0,48% 100%); }
.spark { position: absolute; top: 14%; left: 79%; width: 1.4em; height: 1.4em; background: #e29148; clip-path: polygon(50% 0,59% 35%,86% 14%,68% 42%,100% 50%,66% 57%,86% 86%,57% 68%,50% 100%,43% 66%,14% 86%,32% 58%,0 50%,34% 42%,14% 14%,42% 34%); }
.primary, .secondary, .plain { display: inline-flex; justify-content: center; align-items: center; gap: 8px; max-width: 100%; border: 1px solid transparent; border-radius: 8px; padding: 11px 17px; min-height: 44px; font: 700 .925rem/1.35 var(--sans); text-decoration: none; }
.primary { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.primary:hover { color: #fff; background: var(--cobalt-dark); border-color: var(--cobalt-dark); }
.secondary { background: var(--surface); color: var(--ink); border-color: #bdc9bd; }
.secondary:hover { background: #ecf0e8; border-color: #849781; }
.plain { color: var(--cobalt); padding-inline: 6px; }
.plain:hover { text-decoration: underline; text-underline-offset: 3px; }
button:disabled { opacity: .6; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.section-head { margin: 34px 0 16px; display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 9px 18px; }
.section-head h2 { flex: 0 1 auto; }
.section-head p { margin-top: 5px; }
.tile-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 5px; min-width: 0; min-height: 140px; padding: 17px 15px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.tile:hover { border-color: #9aa99a; box-shadow: 0 3px 9px #2236230b; }
.glyph { display: inline-grid; place-items: center; min-width: 37px; height: 37px; padding-inline: 5px; margin-bottom: 7px; border-radius: 9px; color: #2f4799; background: #e7eafd; font: 700 1.12rem/1 var(--display); letter-spacing: -.06em; }
.tile:nth-child(2) .glyph { background: #fcdfc5; color: #924d26; }
.tile:nth-child(3) .glyph { background: #dcead6; color: #3c673d; }
.tile:nth-child(4) .glyph { background: #f6e9b9; color: #795713; }
.tile:nth-child(5) .glyph { background: #e9e0f1; color: #654382; }
.tile-title { font-size: 1rem; font-weight: 720; line-height: 1.35; letter-spacing: -.018em; }
.tile-desc { color: #56645b; font-size: .84rem; line-height: 1.42; }
.columns { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 20px; margin-top: 24px; align-items: start; }
.panel, .next-card, .quizcard { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); }
.panel, .next-card { padding: clamp(19px,2.3vw,29px); }
.panel > :is(h2,h3) + p, .next-card > :is(h2,h3) + p { margin-top: 7px; }
.panel > .actions, .next-card > .actions { margin-top: 17px; }
.panel .section-head { margin: 0 0 12px; }
.list-row { display: flex; gap: 13px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #e1e5dd; }
.list-row:first-child { padding-top: 0; }
.list-row:last-child { padding-bottom: 0; border-bottom: 0; }
.list-row > :not(.circle) { min-width: 0; }
.list-row .subtle { display: block; margin-top: 2px; }
.circle { width: 30px; height: 30px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid #cbd5d3; background: #eef2ed; color: #354d40; font: 700 .78rem/1 var(--sans); }
.pill { display: inline-flex; align-items: center; border-radius: 1rem; background: #edf0e8; color: #405542; padding: 4px 10px; font-size: .78rem; font-weight: 700; line-height: 1.35; }
.quizcard { width: min(100%,790px); margin: 18px auto; padding: clamp(20px,4vw,42px); }
.quizcard .section-head { margin: 0 0 16px; }
.quizcard h1, .quizcard h2 { font-size: clamp(1.55rem,3.3vw,2.25rem); line-height: 1.2; letter-spacing: -.032em; }
.quizcard h3 { font-size: 1.18rem; }
.track { height: 7px; overflow: hidden; border-radius: 10px; background: #e3e7df; }
.track .fill { display: block; height: 100%; background: var(--cobalt); border-radius: inherit; transition: width .22s; }
.passage { display: block; margin: 18px 0; padding: 16px 19px; border-left: 3px solid #a8b9a4; border-radius: 0 8px 8px 0; background: #f3f4ed; font: 1.04rem/1.65 var(--display); color: #2d4034; white-space: pre-line; }
.choices { display: grid; gap: 10px; margin: 19px 0; }
.choice { width: 100%; display: flex; align-items: center; gap: 13px; padding: 12px 15px; min-height: 52px; text-align: left; border: 1.3px solid #cbd2c7; border-radius: 9px; background: var(--surface); font: 550 .98rem/1.48 var(--sans); }
.choice:hover:not(:disabled) { border-color: #8d9bba; background: #f4f5fb; }
.letter { width: 28px; height: 28px; display: inline-grid; place-items: center; flex: none; border: 1px solid #cdd5cb; border-radius: 7px; background: #f6f7f1; color: #506352; font: 700 .8rem/1 var(--sans); }
.choice.selected { background: #eff0ff; border-color: var(--cobalt); box-shadow: inset 0 0 0 .5px var(--cobalt); }
.choice.selected .letter { color: #fff; border-color: var(--cobalt); background: var(--cobalt); }
.choice.correct { border-color: #447551; background: #ecf4e9; }
.choice.correct .letter { color: #fff; border-color: #3d6b49; background: #3d6b49; }
.choice.wrong { border-color: #b5694e; background: #fff0e9; }
.choice.wrong .letter { color: #fff; border-color: #94513a; background: #94513a; }
.choice:disabled { opacity: 1; }
.explain { margin: 16px 0; padding: 15px 18px; border: 1px solid #d3dfcb; border-radius: 10px; background: #f0f4ec; color: #2e4934; }
.explain p { margin-top: 4px; }
.date-field { display: inline-flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-block: 10px; }
input[type=date], input[type=number], select { max-width: 100%; border: 1px solid #bac5b8; border-radius: 7px; color: var(--ink); background: #fff; padding: 8px 10px; min-height: 42px; }
.stats { display: flex; flex-wrap: wrap; gap: 9px 21px; align-items: stretch; margin: 14px 0; }
.stats strong { color: var(--ink); }
.review-item { border-block-end: 1px solid var(--line); padding-block: 15px; overflow-wrap: anywhere; }
.review-item:last-child { border-block-end: 0; }
.review-item summary { font-weight: 650; cursor: pointer; }
.review-item p { margin-top: 6px; }
footer { padding-block: 30px; margin-top: 45px; color: var(--muted); font-size: .82rem; }
footer.wrap, footer .wrap { border-top: 1px solid var(--line); }
footer .wrap { padding-top: 20px; }
@media (max-width: 880px) {
  .wrap { width: calc(100% - 44px); }
  .tile-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .tile { min-height: 115px; }
  .hero { grid-template-columns: minmax(0,1.35fr) minmax(0,.9fr); }
}
@media (max-width: 690px) {
  .wrap { width: calc(100% - 32px); }
  .bar { flex-wrap: wrap; min-height: 0; gap: 9px; padding-block: 14px 10px; }
  .bar nav { gap: 2px; flex-wrap: wrap; }
  .bar nav button, .bar nav a { padding: 8px 9px; min-height: 38px; font-size: .845rem; }
  .brand { font-size: 1.35rem; }
  .brandmark { width: 32px; height: 32px; }
  .hero { grid-template-columns: minmax(0,1fr); border-radius: 13px; }
  .hero-text { padding: 24px; }
  .art { min-height: 126px; order: -1; font-size: 9.2px; }
  .notebook { left: 51%; top: 48%; transform: translate(-50%,-50%) rotate(-69deg); }
  .pencil { left: 29%; top: 59%; transform: translate(-50%,-50%) rotate(55deg); }
  .ruler { left: 74%; top: 53%; transform: translate(-50%,-50%) rotate(60deg); }
  .spark { top: 20%; left: 84%; }
  .columns { grid-template-columns: minmax(0,1fr); gap: 14px; }
  h1 { font-size: clamp(2.25rem,8vw,3.1rem); }
  .section-head { margin-top: 26px; }
  .lede { font-size: 1rem; }
}
@media (max-width: 470px) {
  .bar { gap: 12px; }
  .bar nav { width: 100%; }
  main.wrap { padding-top: 18px; }
  .art { min-height: 108px; font-size: 8.5px; }
  .hero-text { padding: 22px 20px; }
  .hero-text .primary, .hero-text .actions { margin-top: 16px; }
  .tile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
  .tile { min-height: 111px; padding: 14px 12px; }
  .choice { padding: 10px; gap: 10px; }
  .quizcard { padding: 19px 15px; }
  .quizcard .actions { gap: 7px; }
  .passage { padding: 12px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
.skip-link { position: absolute; z-index: 9; inset: 5px auto auto 8px; transform: translateY(-160%); padding: 10px 14px; background: var(--ink); color: white; border-radius: 6px; }
.skip-link:focus { transform: none; color: #fff; }
footer #save-status { display: inline-block; margin-left: 8px; }
.page-intro { margin: 0 0 26px; }
.page-intro .lede { max-width: 64ch; }
.quizcard .track { margin: 6px 0 22px; }
.panel + .panel, .columns + .panel, .panel + .actions { margin-top: 20px; }
.columns .panel + .panel { margin-top: 0; }
.panel .list-row { justify-content: space-between; }
.panel .list-row h3 { margin: 3px 0 4px; }
.panel > p + p, .panel > p + button, .panel > button + p, .panel > h2 + label { margin-top: 12px; }
.review-item summary span { display: block; }
.review-item summary .kicker { margin-bottom: 4px; }
.review-item summary { padding-left: 3px; }
.review-item summary::marker { color: var(--cobalt); }
.mix-row { display:flex;justify-content:flex-end; }
.mix-row .plain { font-size: .85rem; }
main:focus { outline: none; }