:root {
  color-scheme: light;
  --page-white: #ffffff;
  --letter-ink: #202225;
  --quiet-ink: #50545d;
  --notebook-blue: #2445cb;
  --pressed-blue: #1634b0;
  --blue-wash: #edf2ff;
  --line-blue: #bdcaff;
  --body-face: ui-rounded, "Avenir Next", "Segoe UI", sans-serif;
  --round-face: "Arial Rounded MT Bold", ui-rounded, "Avenir Next", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--page-white); scroll-padding-top: 1.5rem; }
body { margin: 0; color: var(--letter-ink); font-family: var(--body-face); font-size: 18px; line-height: 1.65; }
main { display: block; }
a { color: var(--pressed-blue); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 3px; }
button, select, textarea { font: inherit; }
button, a, select, textarea { -webkit-tap-highlight-color: #dce5ff; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--notebook-blue); outline-offset: 5px; }
[hidden] { display: none !important; }
p, h1, h2, h3, ul, ol, figure { margin: 0; }
li { font-size: 18px; }
::selection { color: #ffffff; background: var(--notebook-blue); }
.direction-mark { font-family: Monaco, Consolas, monospace; font-size: 18px; font-weight: 400; }
.context-mark { font-family: Monaco, Consolas, monospace; padding-inline: 0.65rem; }
.skip-reading { position: fixed; z-index: 20; top: 0.7rem; left: 1rem; transform: translateY(-180%); padding: 0.65rem 1rem; min-height: 48px; background: #ffffff; border: 3px solid var(--notebook-blue); }
.skip-reading:focus { transform: none; }
.reading-window { margin-left: 260px; padding: 58px clamp(32px, 5.2vw, 88px) 0; }
.reading-window:focus { outline: none; }
.notebook-leaf { max-width: 1136px; margin-inline: auto; }
.leaf-intro { margin-bottom: 28px; }
.page-context { color: var(--quiet-ink); font-size: 17px; margin-bottom: 22px; }
.page-title { font-family: var(--round-face); font-size: clamp(38px, 4.1vw, 62px); line-height: 1.13; font-weight: 700; max-width: 18ch; letter-spacing: -0.025em; text-wrap: balance; }
.home-title { font-family: var(--round-face); font-size: clamp(42px, 4.4vw, 68px); line-height: 1.09; font-weight: 700; letter-spacing: -0.03em; max-width: 19ch; text-wrap: balance; }
.leaf-paragraph { max-width: 65ch; margin-top: 16px; }
.leaf-section { max-width: 780px; margin-top: 66px; }
.leaf-heading { font-family: var(--round-face); font-size: clamp(26px, 2.4vw, 35px); line-height: 1.25; font-weight: 700; max-width: 30ch; text-wrap: balance; }
.reader-topic { margin-top: 44px; }
.topic-heading { color: var(--pressed-blue); font-family: var(--round-face); font-size: 31px; line-height: 1.3; max-width: 30ch; }
.reader-topic .leaf-heading { font-size: 27px; }
.reader-topic .leaf-section:first-of-type { margin-top: 30px; }
.opening-question { max-width: 58ch; margin-top: 21px; color: var(--quiet-ink); }
.page-link { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: fit-content; min-height: 48px; padding: 9px 0; margin-top: 12px; font-size: 18px; }
.square-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--notebook-blue); color: #ffffff; min-height: 54px; padding: 12px 22px; text-decoration: none; margin-top: 26px; font-size: 18px; }
.square-link:hover { background: var(--pressed-blue); }
.question-choices { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 22px; }
.question-choices .page-link { width: 100%; border-bottom: 2px solid var(--line-blue); padding-block: 18px; margin-top: 0; }
.question-slip { padding: 26px 30px 26px 34px; margin-top: 27px; background: var(--blue-wash); border-radius: 50px 50px 0 0; }
.slip-label { color: var(--pressed-blue); font-size: 16px; }
.slip-question { margin-top: 8px; font-size: 21px; line-height: 1.45; max-width: 46ch; }
.source-strip { margin-top: 64px; padding-top: 26px; border-top: 3px solid var(--notebook-blue); max-width: 780px; }
.source-heading { font-family: var(--round-face); font-size: 22px; line-height: 1.3; }
.source-check { margin-top: 12px; color: var(--quiet-ink); font-size: 16px; }
.source-detail { max-width: 65ch; margin-top: 12px; font-size: 16px; }
.source-links { list-style: none; padding: 0; margin-top: 12px; }
.source-item { margin: 0; }
.source-link { display: inline-flex; align-items: center; min-height: 48px; padding-block: 10px; font-size: 16px; max-width: 100%; overflow-wrap: anywhere; }
.turn-page { display: grid; grid-template-columns: 1fr; gap: 8px; margin-block: 64px 0; padding: 28px 0; max-width: 780px; }
.turn-label { color: var(--quiet-ink); font-size: 16px; }
.turn-link { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 54px; font-size: 26px; line-height: 1.3; font-family: var(--round-face); }
.notebook-footer { margin: 54px auto 0; padding: 30px 0 40px; max-width: 1136px; border-top: 2px solid var(--line-blue); }
.footer-sentence { max-width: 65ch; font-size: 16px; color: var(--quiet-ink); }
.footer-links { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 24px; margin-top: 18px; }
.footer-link { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding-block: 10px; font-size: 16px; }

@media (min-width: 1700px) {
  .reading-window { padding-inline: 96px; }
}
@media (max-width: 950px) {
  body { display: flex; flex-direction: column; }
  .reading-window { margin-left: 0; padding: 26px 24px 0; order: 2; }
  .page-context { font-size: 16px; margin-bottom: 18px; }
  .home-title { font-size: clamp(38px, 8.1vw, 60px); max-width: 20ch; }
  .page-title { font-size: clamp(36px, 7.3vw, 54px); max-width: 19ch; }
  .leaf-section { margin-top: 48px; }
  .question-slip { padding: 25px 23px; border-radius: 38px 38px 0 0; }
  .slip-question { font-size: 20px; }
  .source-strip { margin-top: 48px; }
  .turn-page { margin-top: 44px; }
  .turn-link { font-size: 25px; }
  .notebook-footer { margin-top: 30px; padding-bottom: 30px; }
  .footer-links { display: grid; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media print {
  body { font-size: 12pt; }
  .notebook-margin, .skip-reading, .notebook-footer, .turn-page { display: none !important; }
  .reading-window { margin: 0; padding: 0; }
  .page-title, .home-title { font-size: 28pt; max-width: none; }
  .leaf-section { margin-top: 22pt; break-inside: avoid; }
  .question-slip, .source-strip { break-inside: avoid; }
  a { color: #202225; }
}