/* «На пальцах» — a Russian school exercise book: squared paper, red margin,
   blue ballpoint ink, teacher's red pen, printed textbook excerpts. */

:root {
  --paper: #FAFCFF;
  --grid: #DDE7F4;
  --margin: #EC7480;
  --ink: #2437B8;
  --ink-deep: #172384;
  --red: #D7262E;
  --text: #1D2235;
  --muted: #586079;
  --line: #C6D3E8;
  --marker: rgba(255, 236, 92, .85);
  --cover: #1E5A49;
  --cover-ink: #E3EFE8;

  --cell: 24px;
  --mx: 96px;          /* distance from the page edge to the red margin line */
  --gap: 28px;         /* from the margin line to the text */
  --pr: 48px;

  --f-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  --f-print: 'PT Serif', Georgia, 'Times New Roman', serif;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  font: 400 17px/24px var(--f-sans);
  color: var(--text);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: -1px -1px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

html.bead-hover, html.bead-hover body { cursor: pointer; }

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* The exercise-book sheet: centred on wide screens, margin line inside it. */
.sheet {
  position: relative;
  max-width: 1560px;
  margin: 0 auto;
}

.margin-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--mx);
  width: 2px;
  background: var(--margin);
  opacity: .75;
  z-index: 1;
  pointer-events: none;
}

.wrap {
  position: relative;
  z-index: 2;
  padding: 0 var(--pr) 0 calc(var(--mx) + var(--gap));
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 3px solid rgba(36, 55, 184, .5);
  outline-offset: 3px;
  border-radius: 6px;
}

p { margin: 0; }

/* ---------------------------------------------------------------- header */

.top {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -.01em;
  color: var(--text);
  text-decoration: none;
}
.logo-mark { width: 40px; height: 40px; margin-top: -6px; }
.logo-mark path { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.logo-mark text { font: 700 24px var(--f-hand); fill: var(--red); text-anchor: middle; }

.lang {
  display: inline-flex;
  padding: 3px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
}
.lang button {
  font: 600 13px/18px var(--f-sans);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ---------------------------------------------------------------- buttons */

.btn {
  --shadow: var(--ink-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 17px/24px var(--f-sans);
  padding: 12px 22px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease, color .15s ease;
  user-select: none;
}
.btn.primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 4px 0 var(--shadow);
}
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--shadow); }
.btn.primary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--shadow); }
.btn.ghost { background: rgba(255, 255, 255, .85); color: var(--ink); }
.btn.ghost:hover { background: #fff; box-shadow: 0 3px 0 rgba(36, 55, 184, .25); transform: translateY(-1px); }
.btn.big { font-size: 19px; padding: 16px 30px; }
.btn.tiny { font-size: 14px; line-height: 20px; padding: 5px 12px; border-width: 1.5px; border-radius: 999px; }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }

/* ---------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: min(calc(100svh - 72px), 820px);
  padding: 24px 0 72px;
}

.hero h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(40px, 4.9vw, 68px);
  line-height: 1.06;
  letter-spacing: -.028em;
  text-wrap: balance;
}

.hero-note {
  position: relative;
  display: inline-block;
  margin: 18px 0 0 34%;
  font: 700 clamp(28px, 2.6vw, 38px)/1 var(--f-hand);
  color: var(--red);
  transform: rotate(-4deg);
}
.hero-note svg {
  position: absolute;
  left: -4%;
  bottom: -14px;
  width: 108%;
  height: 16px;
  overflow: visible;
}
.hero-note path { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; }

.lede {
  margin-top: 36px;
  max-width: 34em;
  font-size: 19px;
  line-height: 30px;
  color: #2E3550;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 36px;
}
.aside { max-width: 22em; font-size: 15px; line-height: 22px; color: var(--muted); }

.stage { position: relative; }
.hero-stage { height: min(68vh, 640px); min-height: 320px; }

.stage-hint {
  position: absolute;
  left: 4%;
  bottom: 2%;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  font: 600 24px/1 var(--f-hand);
  color: var(--ink);
  transform: rotate(-3deg);
  pointer-events: none;
}
.stage-hint svg { width: 46px; height: 32px; order: 2; margin-bottom: 10px; }
.stage-hint path { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: none) { .stage-hint { display: none; } }
.no-3d .stage-hint, .no-3d .desk-side { display: none; }
@media (max-width: 860px) { .no-3d .hero-stage { display: none; } }

/* ---------------------------------------------------------------- desk layout */

.desk {
  display: grid;
  grid-template-columns: minmax(0, 700px) minmax(300px, 1fr);
  gap: 56px;
  align-items: start;
}
.desk-side { align-self: stretch; }
.side-sticky { position: sticky; top: 96px; }
.side-stage { height: min(52vh, 440px); }
.side-caption {
  display: grid;
  gap: 2px;
  margin-top: -8px;
  padding-left: 18%;
  font: 600 22px/26px var(--f-hand);
  color: var(--ink);
  transform: rotate(-2deg);
}

/* ---------------------------------------------------------------- form steps */

.work { padding-top: 24px; }

.step { position: relative; margin: 0 0 72px; }

.step > h2 {
  position: relative;
  margin: 0 0 24px;
  font-weight: 800;
  font-size: 30px;
  line-height: 48px;
  letter-spacing: -.015em;
}
.step > h2 small {
  margin-left: 8px;
  font: 600 24px var(--f-hand);
  color: var(--muted);
  letter-spacing: 0;
}

/* Hand-circled red number sitting in the margin, like a teacher's mark. */
.num {
  position: absolute;
  top: 50%;
  left: calc(-1 * var(--gap) - var(--mx) / 2);
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
}
.num svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.num path { fill: none; stroke: var(--red); stroke-width: 2.4; stroke-linecap: round; }
.num b { font: 700 30px/1 var(--f-hand); color: var(--red); margin-top: -2px; }

/* drop zone */
.drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 40px 24px 32px;
  text-align: center;
  background: rgba(255, 255, 255, .72);
  border: 2px dashed #A9B9D6;
  border-radius: 18px;
  transition: border-color .2s ease, background-color .2s ease;
}
.drop.is-over { border-color: var(--ink); background: rgba(232, 238, 255, .9); }
.drop-title { font: 700 34px/36px var(--f-hand); color: var(--ink); }
.drop-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.drop .hint { font-size: 14px; line-height: 20px; color: var(--muted); }
.btn.cam { display: none; }
@media (pointer: coarse) { .btn.cam { display: inline-flex; } }

.thumbs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 28px 24px;
}
.thumbs:not(:empty) { margin-top: 36px; }

.thumb {
  position: relative;
  padding: 6px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(29, 34, 53, .12), 0 12px 22px -12px rgba(29, 34, 53, .4);
  transform: rotate(var(--r, 0deg));
}
.thumb::before { /* a strip of tape */
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 58px;
  height: 22px;
  margin-left: -29px;
  background: rgba(255, 232, 120, .72);
  transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  z-index: 1;
}
.thumb img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.thumb-label {
  position: absolute;
  left: 10px;
  bottom: -30px;
  font: 700 22px/24px var(--f-hand);
  color: var(--red);
}
.thumb-remove {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.thumb-remove:hover { border-color: var(--red); color: var(--red); }
.thumb.is-loading img { opacity: .3; }

/* grade ruler */
.grade-read {
  display: flex;
  align-items: baseline;
  gap: 12px;
  height: 72px;
}
.grade-big {
  display: inline-block;
  min-width: 1ch;
  font: 700 72px/72px var(--f-hand);
  color: var(--red);
}
.grade-big.is-word { font-size: 52px; }
.grade-word { font-weight: 700; font-size: 24px; }
.grade-age { color: var(--muted); }

.ruler {
  --pad: 20px;
  position: relative;
  height: 92px;
  margin-top: 12px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 40%),
    linear-gradient(180deg, rgba(205, 222, 250, .78), rgba(190, 210, 245, .6));
  border: 1px solid rgba(36, 55, 184, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 20px -14px rgba(36, 55, 184, .5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.ticks { position: absolute; top: 0; bottom: 0; left: var(--pad); right: var(--pad); }
.tick { position: absolute; top: 0; width: 1px; height: 10px; background: rgba(23, 35, 132, .5); }
.tick.mid { height: 16px; }
.tick.major { height: 26px; width: 1.5px; background: var(--ink-deep); }
.tick-label {
  position: absolute;
  top: 30px;
  transform: translateX(-50%);
  font: 600 15px/18px var(--f-sans);
  color: var(--ink-deep);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.tick-label small { display: block; font: 600 16px/14px var(--f-hand); color: var(--muted); }
.tick-label.is-on { color: var(--red); }

.ruler input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: grab;
}
.ruler input[type="range"]:active { cursor: grabbing; }
.ruler input[type="range"]:focus-visible { outline-offset: 4px; border-radius: 10px; }
.ruler input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.ruler input[type="range"]::-moz-range-track { height: 100%; background: transparent; }
.ruler input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 40px;
  height: 92px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 92'%3E%3Cpath d='M20 0v66' stroke='%23D7262E' stroke-width='2.5'/%3E%3Ccircle cx='20' cy='76' r='11' fill='%23D7262E'/%3E%3Ccircle cx='20' cy='76' r='4' fill='%23fff'/%3E%3C/svg%3E") center / 40px 92px no-repeat;
  cursor: grab;
}
.ruler input[type="range"]::-moz-range-thumb {
  width: 40px;
  height: 92px;
  border: 0;
  border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 92'%3E%3Cpath d='M20 0v66' stroke='%23D7262E' stroke-width='2.5'/%3E%3Ccircle cx='20' cy='76' r='11' fill='%23D7262E'/%3E%3Ccircle cx='20' cy='76' r='4' fill='%23fff'/%3E%3C/svg%3E") center / 40px 92px no-repeat;
  cursor: grab;
}

/* details */
.field { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.field > label, .field > legend {
  display: block;
  padding: 0;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 15px;
}
.field input[type="text"], .field textarea, .ask textarea {
  display: block;
  width: 100%;
  font: 400 17px/24px var(--f-sans);
  color: var(--text);
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  resize: vertical;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input[type="text"]:focus, .field textarea:focus, .ask textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(36, 55, 184, .14);
}
::placeholder { color: #8C93A8; }

.styles { display: flex; flex-wrap: wrap; gap: 10px; }
.styles legend { width: 100%; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  padding: 8px 16px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  font-weight: 500;
  font-size: 15px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid rgba(36, 55, 184, .5); outline-offset: 3px; }

.submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.form-msg { color: var(--red); font-weight: 500; }

/* ---------------------------------------------------------------- result */

.result { padding: 96px 0 24px; scroll-margin-top: 24px; }

.result-title { margin: 0 0 12px; font-weight: 800; font-size: 36px; line-height: 48px; letter-spacing: -.02em; }

/* Only the status pill follows the reader (while text streams in), so it never hides the text. */
.status {
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 6px 6px 16px;
  background: rgba(250, 252, 255, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 8px 18px -12px rgba(29, 34, 53, .35);
}
.status.is-live { position: sticky; top: 12px; }
.status-text { font-size: 15px; color: var(--muted); }
.status-text.is-busy::after {
  content: "";
  display: inline-block;
  width: 1.4em;
  text-align: left;
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; }
}
.status-text.is-error { color: var(--red); }

.out { margin-top: 12px; }

.overview { font-size: 19px; line-height: 30px; max-width: 36em; color: #2E3550; }
.overview p + p { margin-top: 12px; }

/* Margin label: a teacher's red-pen note left of the margin line. */
.mlabel {
  position: absolute;
  top: 0;
  left: calc(-1 * var(--gap) - var(--mx) / 2);
  transform: translateX(-50%) rotate(-6deg);
  font: 700 23px/24px var(--f-hand);
  color: var(--red);
  white-space: nowrap;
}

.page-group { margin-top: 72px; }
.page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.page-head img {
  width: 54px;
  height: 72px;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(29, 34, 53, .15), 0 8px 14px -8px rgba(29, 34, 53, .4);
  transform: rotate(-4deg);
}
.page-head span { font: 700 32px/36px var(--f-hand); color: var(--ink); }

.task { margin-top: 48px; }
.task:first-child { margin-top: 24px; }
.task > h3 {
  margin: 0 0 20px;
  font-weight: 800;
  font-size: 26px;
  line-height: 36px;
  letter-spacing: -.015em;
}

.question {
  position: relative;
  margin: 0 0 28px;
  padding: 20px 24px 22px;
  max-width: 40em;
  background: #fff;
  border: 1px solid #E2E8F3;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(29, 34, 53, .04), 0 14px 26px -18px rgba(29, 34, 53, .45);
  transform: rotate(-.4deg);
}
.question::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 30px;
  width: 64px;
  height: 20px;
  background: rgba(255, 232, 120, .7);
  transform: rotate(-3deg);
}
.q-label { display: block; margin-bottom: 8px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
.q-body { font: 400 18px/27px var(--f-print); color: #1A1E2C; }
.q-body p + p { margin-top: 4px; }
.q-body p, .answer-body p { white-space: pre-wrap; }
.q-body strong { font-weight: 700; }

.idea, .mistake, .check, .tip, .answer { position: relative; max-width: 38em; }
.idea { margin: 0 0 32px; font-weight: 500; font-size: 18px; line-height: 27px; }
.idea p + p, .mistake p + p, .check p + p, .tip p + p { margin-top: 8px; }

.steps { list-style: none; margin: 0; padding: 0; }
.step-item { position: relative; padding: 0 0 32px; max-width: 38em; }
.step-item .num { top: 12px; }
.step-title { margin: 0 0 6px; font-weight: 700; font-size: 19px; line-height: 24px; }
.step-body p { margin: 0 0 6px; }
.step-body ul, .idea ul, .mistake ul, .tip ul, .q-body ul { margin: 4px 0 8px; padding-left: 20px; }

.say { margin-top: 12px; }
.say-label { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--muted); }
.say-text {
  margin: 2px 0 0;
  font: 600 28px/34px var(--f-hand);
  color: var(--ink);
}
.say-text .hl {
  background-image: linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mistake { margin: 8px 0 28px; }
.mistake::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--red);
  opacity: .8;
}

.answer { margin: 0 0 28px; }
.answer-body {
  font: 600 26px/40px var(--f-hand); /* room under each line for double underlines */
  color: var(--ink);
  filter: blur(7px);
  user-select: none;
  transition: filter .35s ease;
}
.answer-body p + p { margin-top: 2px; }
.answer.is-open .answer-body { filter: none; user-select: text; }
.answer-toggle { margin-bottom: 10px; }

/* ---------------------------------------------------------------- while the model thinks */

.reading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 24px 36px;
  margin: 16px 0 32px;
  padding: 18px 0 8px;
  overflow: hidden;
}
.reading.is-small { grid-template-columns: minmax(0, 1fr); margin: 8px 0 16px; padding: 4px 0; }
.reading-photos { display: flex; padding: 14px 0 6px 6px; }
.reading-photo {
  position: relative;
  width: 124px;
  aspect-ratio: 3 / 4;
  margin: 0 0 0 -30px;
  padding: 6px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(29, 34, 53, .12), 0 16px 28px -16px rgba(29, 34, 53, .5);
  transform: rotate(var(--r, 0deg));
}
.reading-photo:first-child { margin-left: 0; }
.reading-photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.reading-photo::before { /* tape */
  content: "";
  position: absolute;
  z-index: 2;
  top: -10px;
  left: 50%;
  width: 52px;
  height: 20px;
  margin-left: -26px;
  background: var(--tape, rgba(255, 232, 120, .72));
  transform: rotate(-4deg);
}
/* A highlighter strip moving over the page, line by line. */
.reading-photo .scan {
  position: absolute;
  left: 6px;
  right: 6px;
  top: -8%;
  height: 12%;
  background: linear-gradient(transparent, var(--marker) 35%, var(--marker) 70%, transparent);
  mix-blend-mode: multiply;
  opacity: .8;
  pointer-events: none;
}
.pen-mark { position: absolute; z-index: 3; width: 46px; height: 36px; overflow: visible; pointer-events: none; }
.pen-mark path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.reading-stage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font: 700 32px/38px var(--f-hand);
  color: var(--ink);
}
.stage-text { display: inline-block; }
.ink-dots { display: inline-flex; gap: 5px; }
.ink-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: ink-dots 1.2s ease-in-out infinite; }
.ink-dots i:nth-child(2) { animation-delay: .15s; }
.ink-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ink-dots {
  0%, 60%, 100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-7px); opacity: 1; }
}
.reading-sub { margin-top: 6px; max-width: 30em; color: var(--muted); }
.reading-time { margin-top: 10px; font: 600 15px/20px var(--f-sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.reading.is-small .reading-stage { font-size: 26px; line-height: 32px; }

/* The pen nib at the end of the text being written. */
.is-writing > p:last-child::after,
.is-writing > ul:last-child > li:last-child::after,
h3.is-writing::after,
.hl.is-writing::after {
  content: "";
  display: inline-block;
  width: .42em;
  height: .42em;
  margin-left: .3em;
  border-radius: 50%;
  background: var(--ink);
  vertical-align: .05em;
  animation: nib .9s ease-in-out infinite;
}
@keyframes nib {
  0%, 100% { transform: scale(.55); opacity: .45; }
  50% { transform: scale(1); opacity: 1; }
}

/* The teacher's red 5 once the explanation is done. */
.result-headline { display: flex; align-items: center; gap: 14px; }
.stamp { position: relative; display: grid; place-items: center; width: 58px; height: 58px; margin-top: -6px; transform: rotate(-10deg); }
.stamp svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stamp path { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; }
.stamp b { margin-top: -4px; font: 700 40px/1 var(--f-hand); color: var(--red); }

/* Exercise-book marks, drawn in the teacher's red so they stand out from the ink. */
/* Lines are painted as backgrounds at the bottom of the letter box, so one and two lines sit at
   fixed, clearly separate heights whatever the font. Vertical padding on inline text does not
   change the line height. */
.mk {
  --mk: var(--red);
  --t: max(2.5px, .11em);   /* line thickness */
  --g: max(3px, .14em);     /* gap between the two lines of <uu> */
  padding-bottom: .06em;
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mk-u { background-image: linear-gradient(var(--mk), var(--mk)); background-size: 100% var(--t); background-position: 0 100%; }
.mk-uu {
  padding-bottom: calc(.06em + var(--t) + var(--g));
  background-image: linear-gradient(var(--mk), var(--mk)), linear-gradient(var(--mk), var(--mk));
  background-size: 100% var(--t), 100% var(--t);
  background-position: 0 100%, 0 calc(100% - var(--t) - var(--g));
}
.mk-dash {
  background-image: repeating-linear-gradient(90deg, var(--mk) 0 .3em, transparent .3em .45em);
  background-size: 100% var(--t); background-position: 0 100%;
}
.mk-dotdash {
  background-image: repeating-linear-gradient(90deg, var(--mk) 0 .32em, transparent .32em .44em, var(--mk) .44em .52em, transparent .52em .64em);
  background-size: 100% var(--t); background-position: 0 100%;
}
.mk-wave {
  background: none;
  text-decoration: underline wavy var(--mk);
  text-decoration-thickness: max(2px, .08em);
  text-underline-offset: .22em;
  text-decoration-skip-ink: none;
}
.mk-o { background: none; padding: 0 .18em; margin: 0 .04em; border: max(2px, .09em) solid var(--mk); border-radius: 50%; }

.check { margin: 0 0 12px; }
.peek {
  font: inherit;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1.5px dashed rgba(36, 55, 184, .5);
  padding: 0 2px;
  cursor: pointer;
  filter: blur(4px);
  transition: filter .3s ease;
}
.peek.is-open { filter: none; cursor: text; border-bottom-color: transparent; }

.tip { margin-top: 72px; font-size: 18px; line-height: 27px; }

.error {
  margin: 24px 0;
  padding: 12px 16px;
  max-width: 38em;
  border-left: 3px solid var(--red);
  background: rgba(255, 236, 236, .9);
  color: #8A1C22;
  border-radius: 0 10px 10px 0;
}

.fu { margin-top: 72px; }
.fu-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 8px; }
.fu-q span:first-child { font-size: 13px; font-weight: 600; color: var(--muted); }
.fu-q q { font: 700 28px/32px var(--f-hand); color: var(--ink); quotes: "«" "»"; }

.ask { margin-top: 96px; max-width: 40em; }
.ask h3 { margin: 0; font-weight: 800; font-size: 26px; line-height: 36px; }
.ask-lede { color: var(--muted); margin-bottom: 20px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ask-chips .btn { font-weight: 500; }
.ask-row { display: flex; gap: 12px; align-items: flex-end; }
.ask-row textarea { flex: 1; }

/* ---------------------------------------------------------------- footer: the back cover */

.cover {
  position: relative;
  z-index: 3;
  margin-top: 144px;
  color: var(--cover-ink);
  background-color: var(--cover);
  background-image:
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px),
    radial-gradient(rgba(0, 0, 0, .06) 1px, transparent 1.2px);
  background-size: 5px 5px, 7px 7px;
  background-position: 0 0, 2px 3px;
}
.cover-inner {
  padding: 72px var(--pr) 56px calc(var(--mx) + var(--gap));
  max-width: 1560px;
  margin: 0 auto;
}
.cover-title { margin: 0 0 24px; font-weight: 700; font-size: 17px; line-height: 24px; color: #fff; }
.times {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 24px 16px;
  max-width: 1040px;
  font-size: 14px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}
.times div { padding-top: 8px; border-top: 1px solid rgba(227, 239, 232, .28); }
.times span { display: block; white-space: nowrap; }
.cover-meta {
  display: grid;
  gap: 6px;
  margin-top: 56px;
  max-width: 44em;
  font-size: 14px;
  line-height: 21px;
  color: rgba(227, 239, 232, .82);
}
.cover-brand { font-weight: 800; font-size: 17px; color: #fff; margin-bottom: 4px; }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1180px) {
  .desk { grid-template-columns: minmax(0, 720px); }
  .desk-side { display: none; }
}

@media (max-width: 860px) {
  :root { --mx: 52px; --gap: 18px; --pr: 20px; }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-top: 0;
    gap: 0;
  }
  .hero-stage { order: -1; height: 44vh; min-height: 240px; max-height: 360px; }
  .hero-note { margin-left: 24%; }
  .times { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  :root { --mx: 40px; --gap: 14px; --pr: 16px; }
  body { font-size: 16px; }
  .top { height: 64px; }
  .hero h1 { font-size: 36px; }
  .lede { font-size: 17px; line-height: 26px; margin-top: 28px; }
  .hero-note { margin-left: 16%; font-size: 28px; }
  .step > h2 { font-size: 24px; line-height: 36px; }
  .num { width: 36px; height: 36px; }
  .num b { font-size: 24px; }
  .drop { padding: 28px 16px 24px; }
  .drop-title { font-size: 28px; }
  .thumbs { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 28px 16px; }
  .ruler { --pad: 16px; }
  .tick-label { font-size: 13px; }
  .tick-label small { font-size: 14px; }
  .result-title { font-size: 28px; line-height: 36px; }
  .status { border-radius: 18px; }
  .say-text { font-size: 25px; line-height: 30px; }
  .answer-body { font-size: 24px; line-height: 38px; }
  .reading { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .reading-photo { width: 96px; }
  .reading-stage { font-size: 27px; line-height: 32px; }
  .ask-row { flex-direction: column; align-items: stretch; }
  .times { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cover-inner { padding-top: 48px; }

  /* The margin is too narrow for words: margin labels move above their text. */
  .mlabel { position: static; display: block; transform: rotate(-2deg); transform-origin: left; margin-bottom: 2px; }
  .mistake::before { left: -10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
  #scene, .margin-line, .top, .hero, .work, .desk-side, .status, .ask, .cover { display: none !important; }
  body { background: #fff; }
  .wrap { padding: 0; }
  .result { padding: 0; }
  .answer-body, .peek { filter: none !important; }
  .mlabel { position: static; display: block; transform: none; }
}