/* Grade Placement styles: the SHSAT Placement's (../SHSAT Placement/place.css), plus the grade picker, the
   strand bar, the bonus round cards, the hands-on exercise frame and the vocabulary choices at the end. Tokens, fonts and the graph-paper grid are copied from
   ackacademy-next/app/globals.css; keep them in step with it. */

@font-face { font-family: "CMU Serif"; src: url("fonts/cmu-serif-roman.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CMU Serif"; src: url("fonts/cmu-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "CMU Serif"; src: url("fonts/cmu-serif-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- design tokens (from the website) ---------- */
:root {
  --paper: #fbf8f1;
  --paper-raised: #f4efe3;
  --paper-sunk: #efe8d8;
  --ink: #24211d;
  --ink-soft: #4a453d;
  --muted: #6f695f;
  --rule: #e2dac8;
  /* Apricot is the highlight (fills, underlines, never text); sienna is the colored text. */
  --accent: #f2b400;
  --accent-soft: #fcecb8;
  --accent-ink: #b54a1a;
  --sienna: #c9541e;
  --blue: #2b2f8c;
  --green: #138a78;
  --on-ink: #fbf8f1;
  --art-filter: none;
  --grid-line: rgb(36 33 29 / 0.032);
  --shadow: 0 1px 0 var(--rule), 0 18px 40px -24px rgb(36 33 29 / 0.35);
  --serif: "Newsreader", ui-serif, Georgia, serif;
  --display: "CMU Serif", "Latin Modern Roman", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  color-scheme: light;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--paper); color: var(--ink);
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.5;
  font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font-family: var(--sans); color: inherit; }
::selection { background: var(--accent-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
a { color: inherit; }
.graph-paper {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px;
}
.eyebrow { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 12px; }
.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.01em; line-height: 1.08; margin: 0; }
.display em { font-style: italic; }
.lead { font-size: 1.25rem; line-height: 1.55; color: var(--ink-soft); max-width: 40rem; margin: 18px 0 0; }
.small { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin: 0; }
.center { text-align: center; }

/* ---------- buttons (the website's Button.tsx) ---------- */
.btn-primary, .btn-ghost, .btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 3px; padding: 12px 20px; font-family: var(--sans); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; transition: background 0.2s, filter 0.2s, transform 0.1s; text-decoration: none;
}
.btn-primary { background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); }
.btn-primary:hover { background: var(--ink-soft); }
.btn-ghost { background: var(--paper); color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 80%, transparent); }
.btn-ghost:hover { background: var(--paper-raised); }
.btn-primary:active, .btn-ghost:active { transform: scale(0.98); }
.big { padding: 16px 28px; font-size: 1rem; }

/* ---------- toolbar ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; background-attachment: fixed;
}
/* The logo and wordmark on the left; the Change grade menu, or a test's timer, on the right (chrome.js). */
.header-in { max-width: 76rem; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 64px; }
.h-right { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.header .spacer { flex: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand .mark { width: 40px; height: 40px; filter: var(--art-filter); }
.brand .wordmark { font-family: var(--display); font-size: 1.35rem; line-height: 1; white-space: nowrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative;
  height: 40px; min-width: 42px; padding: 0 12px; border-radius: 3px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.btn:hover:not(:disabled) { background: var(--paper-raised); }
.btn:disabled { opacity: 0.35; cursor: default; }
.btn svg { width: 18px; height: 18px; }
.navgroup, .toolgroup { display: flex; }
.navgroup .btn { width: 48px; border-radius: 0; height: 42px; }
.navgroup .btn:first-child { border-radius: 3px 0 0 3px; }
.navgroup .btn:last-child { border-radius: 0 3px 3px 0; margin-left: -1px; }
.btn.next:not(:disabled) { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn.next:hover:not(:disabled) { background: var(--ink-soft); }
.toolgroup .btn { border-radius: 0; width: 42px; padding: 0; margin-left: -1px; }
.toolgroup .btn:first-child { border-radius: 3px 0 0 3px; margin-left: 0; }
.toolgroup .btn:last-child { border-radius: 0 3px 3px 0; }
.btn.pressed, .btn.pressed:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.timerbox { display: flex; align-items: center; }
.timertext {
  height: 40px; display: flex; align-items: center; padding: 0 12px;
  font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); border-right: 0; border-radius: 3px 0 0 3px; background: var(--paper-raised);
}
.timertext + .btn { border-radius: 0 3px 3px 0; }
.timertext.low { color: var(--sienna); }
@media (hover: hover) {
  [data-tip]:hover::after {
    content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--on-ink); font-family: var(--sans); font-size: 0.75rem; font-weight: 600;
    padding: 5px 8px; border-radius: 3px; white-space: nowrap; z-index: 200; pointer-events: none;
  }
}

/* ---------- breadcrumb bar ---------- */
.crumbs { background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.crumbs-in {
  max-width: 76rem; margin: 0 auto; min-height: 38px; padding: 0 16px; display: flex; align-items: center; flex-wrap: wrap;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink);
}
.crumbs .sep { margin: 0 12px; color: var(--muted); }
.crumbs .spacer { flex: 1; }
.battery { width: 26px; height: 13px; border: 1.5px solid var(--ink-soft); border-radius: 3px; position: relative; padding: 1px; }
.battery::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 4px; background: var(--ink-soft); border-radius: 0 2px 2px 0; }
.battery i { display: block; height: 100%; background: var(--ink-soft); border-radius: 1px; }

/* ---------- pages ---------- */
.stage { position: relative; max-width: 76rem; margin: 0 auto; padding: 36px 16px 96px; }
.card {
  position: relative; max-width: 760px; margin: 0 auto;
  background: var(--card-bg, var(--paper)); color: var(--card-fg, var(--ink));
  border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow); padding: 28px 32px 30px;
}
.card.wide { max-width: 960px; }
.qnum { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; }
.item-body { font-size: 1.1875rem; line-height: 1.55; }
.item-body p { margin: 0 0 14px; }
.item-body img.fig, .modal img.fig { display: block; margin: 8px auto 16px; max-width: 100%; height: auto; filter: var(--art-filter); }
.katex { font-size: 1.08em; }
.choices { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.choice {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 16px 8px 10px;
  width: fit-content; min-width: min(100%, 300px); max-width: 100%;
  border: 1px solid var(--rule); border-radius: 4px; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.choice:hover { background: var(--paper-raised); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .letter {
  flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid color-mix(in srgb, currentColor 70%, transparent); border-radius: 50%;
  font-family: var(--sans); font-size: 0.8125rem; font-weight: 600;
}
.choice.picked { border-color: var(--accent); background: var(--accent-soft); }
.choice.picked .letter { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.choice input:focus-visible + .letter { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice .content p { margin: 0; }
.choice .content img.fig { margin: 4px 0; }
.choice.eliminated { cursor: default; }
.choice.eliminated .content, .choice.eliminated .letter { opacity: 0.4; }
.choice .xmark { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.answer-prompt { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); margin: 18px 0 8px; }
mark.hl-blue, .hl-pop i.hl-blue { background: color-mix(in srgb, var(--blue) 24%, transparent); color: inherit; }
mark.hl-pink, .hl-pop i.hl-pink { background: color-mix(in srgb, var(--accent) 45%, transparent); color: inherit; }

/* ---------- welcome ---------- */
.welcome { padding-top: 56px; }
.welcome h1 { font-size: clamp(2.75rem, 7vw, 4.75rem); }
.signin { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 6px; }
.field-label { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); }
/* The rules and the bonus-round cards share columns: three across, the same gap. */
.rules { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rules li { border-top: 2px solid var(--accent); padding-top: 14px; color: var(--ink-soft); }
.rules b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.35rem; color: var(--ink); margin-bottom: 4px; }
.site-foot { max-width: 76rem; margin: 0 auto; padding: 22px 16px 34px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }
.site-foot a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- section start, loading ---------- */
.section-start { max-width: 420px; margin: 40px auto; text-align: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow); padding: 34px 28px 30px; }
.section-start h2 { font-size: 2.75rem; }
.section-start .count { font-family: var(--sans); font-size: 0.875rem; color: var(--muted); margin: 14px 0 26px; }
.section-start .count b { color: var(--ink); }
.loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--paper) 55%, transparent); z-index: 400; }
.loading .box { width: 280px; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow); text-align: center; padding: 18px 18px 16px; font-family: var(--sans); font-size: 0.875rem; font-weight: 600; }
.loading .bar { height: 3px; background: var(--rule); margin-top: 16px; position: relative; overflow: hidden; border-radius: 2px; }
.loading .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); animation: load 1.2s ease-out forwards; }
@keyframes load { to { width: 100%; } }

/* ---------- results ---------- */
.results h1, .prep-done h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
.strands { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 30px 0 26px; }
.strand { position: relative; padding: 14px 14px 18px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); overflow: hidden; }
.strand b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.6rem; color: var(--ink); margin-top: 4px; }
.strand i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p); background: var(--accent); }
.table-wrap { overflow-x: auto; }
.results table, .prep-done table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 0.875rem; }
.results th, .prep-done th { text-align: left; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0 10px 10px; border-bottom: 1px solid var(--rule); }
.results td, .prep-done td { padding: 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.results tr:last-child td, .prep-done tr:last-child td { border-bottom: 0; }
.results .ok, .prep-done .ok { color: var(--green); font-weight: 600; }
.results .no, .prep-done .no { color: var(--sienna); font-weight: 600; }
.results .why { font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 0.9375rem; min-width: 200px; }
.linkbtn { border: 0; background: none; color: var(--ink); cursor: pointer; font-weight: 600; padding: 0; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- modals ---------- */
.backdrop { position: fixed; inset: 0; background: rgb(36 33 29 / 0.28); z-index: 300; }
.modal { position: fixed; z-index: 310; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.45); overflow: hidden; }
.modal .mhead { display: flex; align-items: center; padding: 14px 18px 12px; border-bottom: 1px solid var(--rule); cursor: move; }
.modal .mhead h3 { margin: 0; flex: 1; font-family: var(--display); font-weight: 400; font-size: 1.4rem; }
.modal .mclose { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; color: var(--muted); }
.modal .mclose:hover { color: var(--ink); }
.modal .mbody { padding: 16px 18px; font-size: 1.0625rem; }
.modal .mfoot { padding: 0 18px 18px; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------- placement ---------- */
.draft-note { font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-soft); background: var(--accent-soft); border-left: 3px solid var(--accent); padding: 8px 12px; border-radius: 3px; margin: 22px 0 0; max-width: 40rem; }
.progress { max-width: 760px; margin: 0 auto 14px; display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }
.progress .track { flex: 1; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.progress .track i { display: block; height: 100%; width: var(--p); background: var(--accent); transition: width 0.4s; }
.strand-tag { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--ink-soft); }
.place-foot { max-width: 760px; margin: 16px auto 0; display: flex; justify-content: flex-end; gap: 10px; }
.place-error { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--sienna); min-height: 1.2em; margin: 10px 0 0; }

.overall { margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.overall div { padding: 20px 16px 20px 0; }
.overall div + div { padding-left: 16px; border-left: 1px solid var(--rule); }
.overall dt { font-family: var(--display); font-size: 2rem; line-height: 1.1; }
.overall dd { margin: 6px 0 0; font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }


.tag { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 8px; border-radius: 3px; white-space: nowrap; }
.tag.broken { color: var(--sienna); border: 1px solid color-mix(in srgb, var(--sienna) 50%, transparent); }
.tag.shaky { color: var(--ink-soft); border: 1px solid var(--accent); background: var(--accent-soft); }
.section-title { font-family: var(--display); font-weight: 400; font-size: 1.9rem; margin: 44px 0 0; }
.section-sub { color: var(--ink-soft); margin: 6px 0 0; }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .header-in { gap: 8px; padding: 8px 12px; }
  .stage { padding: 24px 16px 88px; }
  .card { padding: 20px 18px 22px; }
  .welcome { padding-top: 32px; }
  .rules { grid-template-columns: 1fr; }
  .overall dt { font-size: 1.5rem; }
  .site-foot { flex-direction: column; gap: 6px; }
}

/* ---------- grade placement ---------- */
.eyebrow a { color: inherit; }

.ricon {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); border: 1.5px solid var(--accent);
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
}
.ricon.big { width: 64px; height: 64px; font-size: 1.9rem; }
.round-kinds { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.round-kinds li { display: grid; align-content: start; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding: 16px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 6px; color: var(--ink-soft); font-size: 0.9375rem; }
.round-kinds .ricon { grid-row: 1 / 3; }
.round-kinds b { font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--ink); }

.strandbar { list-style: none; max-width: 960px; margin: 0 auto 18px; padding: 0; display: flex; gap: 6px; }
.strandbar li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--sans); font-size: 0.6875rem; color: var(--muted); }
.strandbar i { display: block; height: 6px; border-radius: 3px; background: var(--rule); transition: background 0.3s; }
.strandbar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strandbar li.started i { background: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.strandbar li.placed i { background: var(--accent); }
.strandbar li.now i { background: var(--ink); }
.strandbar li.now span { color: var(--ink); font-weight: 600; }

.round-tag { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.card.challenge { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
.card.words .qnum, .card.hands .qnum, .card.challenge .qnum { color: var(--accent-ink); }
.prompt { margin-bottom: 4px; }
.prompt .katex { font-size: 1.05em; }
.small-prompt { font-family: var(--sans); font-size: 0.9375rem; color: var(--ink-soft); }
.def { margin: 14px 0 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--paper-raised); border-radius: 3px; font-style: italic; }
.stem { margin: 12px 0 0; font-weight: 600; }
.choices.terms { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.choice.tick .letter { border-radius: 4px; color: transparent; border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
.choice.tick.picked .letter { color: var(--on-ink); }

.round-card { max-width: 520px; margin: 48px auto; text-align: center; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow); padding: 38px 30px 34px; animation: pop 0.35s ease-out; }
.round-card .ricon { margin-bottom: 16px; }
.round-card h2 { font-size: 2.75rem; }
.round-card .round-text { color: var(--ink-soft); margin: 14px 0 10px; }
.round-card .btn-primary { margin-top: 22px; }
@keyframes pop { from { transform: scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .round-card { animation: none; } }


.tag.next { color: var(--blue); border: 1px solid color-mix(in srgb, var(--blue) 50%, transparent); }

@media (max-width: 760px) {
  .round-kinds { grid-template-columns: 1fr; }
  .strandbar span { display: none; }
  .round-card { margin: 24px auto; padding: 28px 18px; }
}

/* ---------- touch questions and keypad (touch.js) ---------- */
.touchq { margin-top: 16px; }
.tq-help { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); margin: 0 0 8px; }
.tq-svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.tq-svg:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.tq-hit { fill: transparent; }
.tq-axis { stroke: var(--ink); stroke-width: 2.5; }
.tq-arrow { fill: var(--ink); }
.tq-tick { stroke: var(--ink-soft); stroke-width: 1.5; }
.tq-tick.big { stroke: var(--ink); stroke-width: 2.5; }
.tq-label { font-family: var(--sans); font-size: 17px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.tq-marker { pointer-events: none; }
.tq-knob { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.tq-stem { stroke: var(--ink); stroke-width: 2.5; }
.tq-dot { fill: var(--sienna); stroke: var(--paper); stroke-width: 2; }
.tq-ring { fill: color-mix(in srgb, var(--accent) 35%, transparent); stroke: var(--accent); stroke-width: 2.5; }
.tq-line { max-width: 640px; }
.tq-grid { margin: 0 auto; }
.tq-gridline { stroke: var(--rule); stroke-width: 1; }
.tq-grid .tq-axis { stroke-width: 2; }
.tq-num { font-family: var(--sans); font-size: 12px; fill: var(--muted); text-anchor: middle; }
.tq-num.end { text-anchor: end; }
.tq-axisname { font-family: var(--display); font-style: italic; font-size: 16px; fill: var(--ink); }
.tq-given { fill: var(--blue); }
.tq-given-line { stroke: var(--blue); stroke-width: 2; }
.tq-name { font-family: var(--sans); font-size: 13px; font-weight: 700; fill: var(--blue); }
.tq-cell { fill: var(--paper); stroke: var(--ink); stroke-width: 2; transition: fill 0.12s; }
.tq-hundred .tq-cell { stroke-width: 1; stroke: var(--ink-soft); }
.tq-cell.on { fill: var(--accent); }
.tq-bar { max-width: 600px; }
.tq-pie { max-width: 280px; margin: 0 auto; }
.tq-hundred { max-width: 360px; margin: 0 auto; }
.tq-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.tq-count { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); margin: 0; }
.tq-clear { padding: 8px 14px; }

/* The answer box (answerbox.js): what is typed shows as math, a fraction stacked with a shaded box for its top and
   its bottom; the box being typed into is lit. The unit sits outside the box. */
.ab-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ab-box { min-width: 150px; min-height: 52px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 3px; cursor: text;
  font-family: var(--sans); font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.ab-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ab-unit { font-family: var(--sans); font-size: 1.25rem; font-weight: 600; color: var(--ink-soft); }
.ab-slot { display: inline-block; min-width: 0.7em; min-height: 1.3em; line-height: 1.3em; padding: 0 3px; border-radius: 3px; text-align: center; }
.ab-slot.empty { min-width: 1.4em; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.ab-w.empty:not(.on) { display: none; }
.ab-slot.on { box-shadow: 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.ab-slot.on::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.12em; background: var(--ink); animation: ab-caret 1s steps(1) infinite; }
.ab-slot.on.empty::after { margin-left: 0; }
@keyframes ab-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ab-slot.on::after { animation: none; } }
.ab-frac { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; font-size: 1.125rem; }
.ab-frac .ab-slot { min-width: 1.6em; }
.ab-bar { display: block; align-self: stretch; height: 2px; background: var(--ink); border-radius: 1px; }
.keypad .key.kfrac { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.keypad .key.kfrac small { font-size: 0.6875rem; font-weight: 600; color: var(--ink-soft); }
.keypad .key svg, .ab-help svg { vertical-align: middle; }
.ki-box { fill: color-mix(in srgb, var(--ink) 10%, transparent); stroke: var(--ink); stroke-width: 1.6; }
.ki-fill { fill: var(--ink); }
.ki-bar { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 340px; margin: 14px 0 10px; }
.keypad .key {
  height: 54px; border-radius: 6px; border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink);
  font-family: var(--sans); font-size: 1.25rem; font-weight: 600; cursor: pointer; touch-action: manipulation;
  transition: background 0.1s, transform 0.08s;
}
.keypad .key.fn { font-size: 0.9375rem; background: var(--paper-sunk); }
.keypad .key:active { background: var(--accent-soft); transform: scale(0.96); }
@media (hover: hover) { .keypad .key:hover { background: var(--paper-sunk); } }
@media (max-width: 760px) {
  .keypad { max-width: none; }
  .keypad .key { height: 58px; }
}

/* ---------- the question's main math, set apart (present.py) ---------- */
.statement { margin: 18px 0 14px; text-align: center; font-size: 1.6rem; line-height: 1.35; overflow-x: auto; }
.statement .katex { font-size: 1em; }
.tiles { list-style: none; margin: 14px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tiles li { min-width: 48px; padding: 8px 14px; text-align: center; font-size: 1.25rem; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 6px; }
.datatable { margin: 14px 0 6px; border-collapse: collapse; font-size: 1.15rem; }
.datatable th, .datatable td { border: 1px solid var(--rule); padding: 8px 16px; text-align: center; min-width: 52px; }
.datatable th { background: var(--paper-raised); font-weight: 600; }
.item-body .prompt + .prompt { margin-top: 12px; }
@media (max-width: 760px) { .statement { font-size: 1.35rem; } }
.blankbox { display: inline-block; width: 1.6em; height: 1.3em; margin: 0 0.35em; vertical-align: middle; border: 2px solid var(--ink-soft); border-radius: 4px; background: var(--paper); }
.tiles .blankbox, .datatable .blankbox { width: 1.3em; height: 1.1em; margin: 0; }

/* ---------- more touch questions (touch.js) ---------- */
.tq-end { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 6px 0; }
.tq-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 420px; }
.tq-tile { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px 6px 12px; background: var(--paper-raised); border: 1.5px solid var(--rule); border-radius: 6px; font-size: 1.3rem; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; position: relative; }
.tq-tile.lifted { z-index: 5; border-color: var(--accent); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.45); cursor: grabbing; }
.tq-grip { color: var(--muted); font-size: 1rem; letter-spacing: -2px; }
.tq-val { flex: 1; }
.tq-mv { width: 40px; height: 40px; border-radius: 4px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft); font-size: 0.8rem; cursor: pointer; }
.tq-mv:disabled { opacity: 0.3; cursor: default; }

.tq-pile { min-height: 64px; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1.5px dashed var(--rule); border-radius: 6px; }
.tq-pilenote { margin: 0; align-self: center; font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }
.tq-bins { display: grid; gap: 10px; margin-top: 12px; }
.tq-bin { min-height: 150px; padding: 8px; background: var(--paper-raised); border: 1.5px solid var(--rule); border-radius: 6px; transition: border-color 0.15s; }
.tq-bin.target { border-color: var(--accent); border-style: dashed; cursor: pointer; }
.tq-binname { margin: 0 0 8px; text-align: center; font-family: var(--sans); font-size: 0.8125rem; font-weight: 700; color: var(--ink); }
.tq-binbody { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.tq-card { min-height: 44px; padding: 8px 12px; border: 1.5px solid var(--ink-soft); border-radius: 6px; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 1.05rem; touch-action: none; cursor: grab; position: relative; }
.tq-card.picked { border-color: var(--accent); background: var(--accent-soft); }
.tq-card.lifted { z-index: 10; box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.45); cursor: grabbing; }

.tq-angle, .tq-clock { margin: 0 auto; max-width: 440px; }
.tq-protractor { fill: var(--paper-raised); stroke: var(--ink-soft); stroke-width: 1.5; }
.tq-ptick { stroke: var(--ink-soft); stroke-width: 1.2; }
.tq-ptick.big { stroke: var(--ink); stroke-width: 2.5; }
.tq-plabel { font-family: var(--sans); font-size: 11px; fill: var(--ink-soft); text-anchor: middle; }
.tq-ray { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.tq-ray.moving { stroke: var(--sienna); }
.tq-anglearc { fill: none; stroke: var(--accent); stroke-width: 3; }
.tq-vertex { fill: var(--ink); }
.tq-rectq { margin: 0 auto; }
.tq-rectfill { fill: color-mix(in srgb, var(--accent) 55%, transparent); stroke: var(--ink); stroke-width: 2.5; }
.tq-face { fill: var(--paper-raised); stroke: var(--ink); stroke-width: 3; }
.tq-clocknum { font-family: var(--sans); font-size: 18px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.tq-hand { stroke-linecap: round; }
.tq-hand.hour { stroke: var(--ink); stroke-width: 7; }
.tq-hand.minute { stroke: var(--sienna); stroke-width: 4; }
.tq-label.small { font-size: 14px; }
.tq-x { font-family: var(--sans); font-size: 24px; font-weight: 700; fill: var(--sienna); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.tq-dots, .tq-barsq { max-width: 600px; margin: 0 auto; }
.tq-bar { fill: var(--accent); stroke: var(--ink); stroke-width: 1.5; }
.tq-student-line { stroke: var(--sienna); stroke-width: 2.5; }
@media (max-width: 760px) { .tq-bin { min-height: 130px; } .tq-card { font-size: 0.95rem; padding: 6px 10px; } }

/* ---------- second batch of touch questions (touch.js) ---------- */
.tq-arraydot { fill: var(--rule); transition: fill 0.12s; }
.tq-arraydot.on { fill: var(--sienna); }
.tq-arrayframe { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tq-shape { fill: color-mix(in srgb, var(--blue) 18%, transparent); stroke: var(--blue); stroke-width: 2; }
.tq-shape.original { stroke-dasharray: 5 4; }
.tq-shape.copy { fill: color-mix(in srgb, var(--accent) 55%, transparent); stroke: var(--sienna); stroke-width: 2.5; pointer-events: none; }
.tq-student-line.dashed { stroke-dasharray: 8 6; }
.tq-movetools { justify-content: flex-start; flex-wrap: wrap; }
.tq-stepper { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--sans); }
.tq-steplabel { min-width: 5.5em; font-size: 0.875rem; font-weight: 600; color: var(--ink-soft); }
.tq-step { width: 48px; height: 48px; border-radius: 6px; border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink); font-size: 1.4rem; font-weight: 600; cursor: pointer; touch-action: manipulation; }
.tq-step:active { background: var(--accent-soft); }
.tq-stepval { min-width: 3.2em; text-align: center; font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.tq-bgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tq-bcol { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; }
.tq-bname { margin: 0; text-align: center; font-family: var(--sans); font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); }
.tq-bpile { min-height: 170px; padding: 6px; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 3px; background: var(--paper-raised); border: 1.5px dashed var(--rule); border-radius: 6px; cursor: pointer; touch-action: manipulation; }
.tq-bbtns { display: flex; align-items: center; justify-content: space-between; gap: 2px; }
.tq-bbtns .tq-step { width: 34px; height: 40px; font-size: 1.1rem; }
.tq-bcount { font-family: var(--sans); font-weight: 700; font-size: 1rem; }
.tq-bgrid i { display: block; background: var(--accent); border: 1px solid var(--ink); }
.tq-ithou { width: 26px; height: 26px; box-shadow: 3px -3px 0 var(--accent-ink); }
.tq-ihund { width: 22px; height: 22px; background-image: linear-gradient(to right, var(--ink) 1px, transparent 1px), linear-gradient(to bottom, var(--ink) 1px, transparent 1px) !important; background-size: 4.4px 4.4px; }
.tq-iten { width: 5px; height: 26px; }
.tq-ione { width: 6px; height: 6px; }
.tq-boxplot { max-width: 600px; margin: 0 auto; }
.tq-bpbox { fill: color-mix(in srgb, var(--accent) 45%, transparent); stroke: var(--ink); stroke-width: 2; }
.tq-bpline { stroke: var(--ink); stroke-width: 2.5; }
.tq-knob.idle { fill: var(--paper); }
.tq-cubes { max-width: 360px; margin: 0 auto; }
.tq-ctop { fill: color-mix(in srgb, var(--accent) 70%, var(--paper)); stroke: var(--ink); stroke-width: 2; }
.tq-cright { fill: color-mix(in srgb, var(--accent) 45%, var(--ink-soft)); stroke: var(--ink); stroke-width: 2; }
.tq-cleft { fill: var(--accent); stroke: var(--ink); stroke-width: 2; }
.tq-cgrid { stroke: var(--ink); stroke-width: 1; opacity: 0.6; }
@media (max-width: 760px) { .tq-bpile { min-height: 150px; } .tq-ithou { width: 20px; height: 20px; } }
.tq-bpile { height: 170px; overflow: hidden; }
.tq-bpile.many .tq-ithou, .tq-bpile.many .tq-ihund { width: 13px; height: 13px; background-size: 2.6px 2.6px; box-shadow: none; }
.tq-bpile.many .tq-iten { width: 3px; height: 18px; }
.tq-bpile.many .tq-ione { width: 4px; height: 4px; }
@media (max-width: 760px) { .tq-bpile { height: 150px; } }
.item-body .prompt.centered { text-align: center; }
.statement > div + div { margin-top: 6px; }

/* ---------- a better-fitting grade (results) ---------- */
.next-test { margin: 34px 0 0; padding: 16px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 4px; }
.next-test b { font-family: var(--display); font-weight: 400; font-size: 1.35rem; }
.next-test p { margin: 4px 0 0; color: var(--ink-soft); }
.next-test a { color: var(--ink); font-weight: 600; text-decoration-color: var(--accent-ink); text-underline-offset: 3px; }
.lead.switched { font-size: 1.05rem; margin-top: 14px; color: var(--ink); }

/* ---------- practice (practice.js) ---------- */
.practice .eyebrow a { color: inherit; }
.pskills { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pskill { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); text-decoration: none; color: var(--ink); transition: border-color 0.15s, transform 0.15s; height: 100%; }
.pskill:hover { border-color: var(--accent); transform: translateY(-1px); }
.pskill.off { opacity: 0.55; cursor: default; }
.pskill.off:hover { border-color: var(--rule); transform: none; }
.pname { font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; }
.psub { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }
.pstat { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-soft); }
.pstat.mastered { color: var(--green); font-weight: 600; }
.pdots { display: inline-flex; gap: 3px; }
.pdots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); }
.pdots i.r { background: var(--green); }
.pdots i.w { background: var(--sienna); }
.phead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; max-width: 760px; margin: 0 auto 18px; }
.display.ptitle { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.practice.skill > .eyebrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.card.locked .item-body { pointer-events: none; }
.pfeedback { min-height: 1.2em; margin: 16px 0 0; padding: 0; font-size: 1.05rem; color: var(--ink-soft); }
.pfeedback.right, .pfeedback.wrong, .pfeedback.shown { padding: 12px 14px; border-radius: 4px; border-left: 3px solid; }
.pfeedback.right { border-color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.pfeedback.wrong { border-color: var(--sienna); background: color-mix(in srgb, var(--sienna) 10%, transparent); }
.pfeedback.shown { border-color: var(--accent); background: var(--accent-soft); }
.pfeedback .how { display: block; margin-top: 4px; color: var(--ink-soft); }
.pfoot { flex-wrap: wrap; }
.wlink { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 3px; }
/* A finished practice question keeps its answer but not the keypad. */
.card.locked #keypad, .card.locked .ab-help { display: none; }
.card.locked .ab-box { cursor: default; }
.card.locked .ab-slot.on { box-shadow: none; background: none; }
.card.locked .ab-slot.on::after { display: none; }

/* ---------- modes: the bar and the welcome cards ---------- */
.modebar { background: var(--paper-raised); border-bottom: 1px solid var(--rule); }
.mb-grade { font-weight: 700; color: var(--ink); }
.pname .tag { margin-left: 6px; vertical-align: 2px; }
.qnum .easy { color: var(--green); }
.mastered-note { display: block; margin-top: 8px; color: var(--ink); }
.mastered-note a, .plan-tip a { color: var(--ink); font-weight: 600; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.plan-tip { margin-top: 26px; }
.section-title.all-skills { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); }
.practice .next-test { margin: 26px 0 0; }
.mb-grade { white-space: nowrap; }


/* ------------------------------------------------------------------ learning map (skillmap.js) */
/* The website's curriculum web colors (ackacademy-next/app/globals.css). */
:root { --s-ops: #2b2f8c; --s-frac: #c9541e; --s-geo: #138a78; --s-meas: #e0a500; --s-num: #7175cc; --s-func: #0e5e53; --web-edge: rgb(36 33 29 / 0.2); }
[data-strand="OPS"] { --strand: var(--s-ops); } [data-strand="FRAC"] { --strand: var(--s-frac); }
[data-strand="GEO"] { --strand: var(--s-geo); } [data-strand="MEAS"] { --strand: var(--s-meas); }
[data-strand="NUM"] { --strand: var(--s-num); } [data-strand="FUNC"] { --strand: var(--s-func); }
.smap-controls { display: flex; gap: 6px; margin-top: 16px; }
.smap-btn { display: grid; place-items: center; height: 36px; min-width: 36px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 3px; background: var(--paper); color: var(--ink); font-size: 0.875rem; cursor: pointer; transition: border-color 0.15s; }
.smap-btn:hover { border-color: var(--ink); }
.smap-stage { position: relative; margin-top: 12px; width: 100%; aspect-ratio: 1; max-height: 70vh; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); background: color-mix(in srgb, var(--paper) 80%, transparent); }
@media (min-width: 640px) { .smap-stage { aspect-ratio: auto; height: min(68vh, 620px); min-height: 420px; } }
.smap-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.smap-tip { position: absolute; z-index: 10; display: none; max-width: 16rem; pointer-events: none; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); border-radius: 3px; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 0.75rem; line-height: 1.35; box-shadow: 0 8px 24px -12px rgb(36 33 29 / 0.4); }
.smap-tip b { display: block; font-weight: 600; }
.smap-tip span { display: block; margin-top: 2px; color: var(--muted); }
/* The chosen skill's popup, beside its dot on the map (a sheet along the bottom on a narrow map). */
.smap-pop { position: absolute; z-index: 12; width: min(290px, calc(100% - 16px)); display: grid; gap: 6px; padding: 14px 16px 16px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow), 0 12px 32px -12px rgb(36 33 29 / 0.35);
  font-family: var(--sans); animation: pop-in 0.16s ease-out; }
.smap-pop[hidden] { display: none; }
.smap-pop.docked { left: 8px; right: 8px; bottom: 8px; top: auto; width: auto; }
.smap-pop-name { padding-right: 24px; font-size: 0.9375rem; line-height: 1.3; color: var(--ink); }
.smap-pop-meta { font-size: 0.8125rem; line-height: 1.4; color: var(--muted); }
.smap-pop .pstat { font-size: 0.8125rem; color: var(--ink-soft); }
.smap-pop .pstat.mastered { color: var(--green); }
.smap-pop .tag { margin-left: 4px; }
.smap-pop .btn-primary { margin-top: 6px; justify-content: center; }
.smap-pop-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 999px;
  background: none; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.smap-pop-x:hover { background: var(--paper-sunk); color: var(--ink); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .smap-pop { animation: none; } }
.smap-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; padding: 0; font-family: var(--sans); font-size: 0.75rem; color: var(--ink-soft); }
.smap-legend li { display: flex; align-items: center; gap: 8px; }
.smap-key { box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: var(--strand); }
.smap-key.earlier { background: none; border: 1.5px solid var(--muted); }
.smap-key.turning { background: none; border: 3px solid var(--ink-soft); }
.smap-key.mastered { width: 12px; height: 12px; background: none; border: 1.6px solid var(--green); }

/* ------------------------------------------------------------------ figures (figures.js) */
.qfig { margin: 14px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qfig figcaption, .fig-pair figcaption { font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft); }
.qfig .fig { max-width: 100%; height: auto; overflow: visible; }
.fig-pair { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 12px 28px; }
.fig-pair > div { display: grid; justify-items: center; gap: 4px; }
.fig-pair span { font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }
.fig path, .fig circle { vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.fig .f-shape { fill: color-mix(in srgb, var(--accent) 14%, var(--paper)); stroke: var(--ink); stroke-width: 1.7; }
.fig .f-side { fill: color-mix(in srgb, var(--accent) 26%, var(--paper)); stroke: none; }
.fig .f-top { fill: color-mix(in srgb, var(--accent) 22%, var(--paper)); stroke: var(--ink); stroke-width: 1.7; }
.fig .f-body { fill: color-mix(in srgb, var(--accent) 14%, var(--paper)); stroke: none; }
.fig .f-soft { fill: color-mix(in srgb, var(--blue) 9%, var(--paper)); stroke: var(--ink-soft); stroke-width: 1.2; }
.fig .f-hole { fill: var(--paper); stroke: var(--ink); stroke-width: 1.7; }
.fig .f-line { fill: none; stroke: var(--ink); stroke-width: 1.7; }
.fig .f-hidden { fill: none; stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 4 4; }
.fig .f-dash { fill: none; stroke: var(--ink-soft); stroke-width: 1.3; stroke-dasharray: 5 4; }
.fig .f-grid { fill: none; stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1; }
.fig .f-axis { fill: none; stroke: var(--ink-soft); stroke-width: 1.4; }
.fig .f-mark { fill: none; stroke: var(--ink-soft); stroke-width: 1.3; }
.fig .f-dot { fill: var(--ink); }
.fig .f-pt { fill: var(--sienna); }
.fig text { font-family: var(--sans); font-size: 13px; paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
.fig .f-lab { fill: var(--ink); font-weight: 500; }
.fig .f-ask { fill: var(--accent-ink); font-weight: 700; }
.fig .f-tick { fill: var(--muted); font-size: 10px; }

/* ------------------------------------------------------------------ page chrome (chrome.js) */
:root { --seg-track: rgb(36 33 29 / 0.07); --seg-thumb: #ffffff; --seg-shadow: 0 1px 2px rgb(36 33 29 / 0.12), 0 6px 14px -4px rgb(36 33 29 / 0.22); }
/* The mode bar: the toggle on the left, the grade in the middle. */
.modebar-in { max-width: 76rem; margin: 0 auto; padding: 8px 16px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; font-family: var(--sans); font-size: 0.875rem; }
.modebar-in .seg { justify-self: start; }
.mb-grade { justify-self: center; font-size: 0.9375rem; }
/* The Evaluation / Practice toggle, as in iOS: a pill track, and a raised glass thumb that slides to the chosen
   side with a little spring, stretching while it moves. */
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--seg-track);
  box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--ink) 10%, transparent); isolation: isolate; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--seg-thumb);
  box-shadow: var(--seg-shadow), inset 0 0.5px 0 rgb(255 255 255 / 0.55); translate: 0 0; scale: 1;
  transition: translate 0.46s cubic-bezier(0.3, 1.32, 0.5, 1), scale 0.22s ease; }
.seg[data-on="1"] .seg-thumb { translate: 100% 0; }
.seg.moving .seg-thumb { scale: 1.1 1.14; }
.seg-opt { position: relative; z-index: 1; padding: 7px 20px; border-radius: 999px; text-align: center; text-decoration: none; white-space: nowrap;
  color: var(--ink-soft); font-weight: 600; font-size: 0.875rem; transition: color 0.3s ease; -webkit-tap-highlight-color: transparent; }
.seg-opt.on { color: var(--ink); }
.seg-opt:not(.on):hover { color: var(--ink); }
.seg-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .seg-thumb, .seg-opt { transition: none; } }
/* The Change grade menu, top right. */
.gmenu { position: relative; }
.gmenu-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: var(--paper); color: var(--ink); font: 600 0.875rem var(--sans);
  transition: border-color 0.15s, background 0.15s; }
.gmenu-btn:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.gmenu-btn svg { transition: transform 0.2s ease; }
.gmenu.open .gmenu-btn svg { transform: rotate(180deg); }
.gm-short { display: none; }
.gmenu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 184px; margin: 0; padding: 6px; list-style: none;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); transform-origin: top right; animation: gm-in 0.18s ease-out; }
.gmenu-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 9px;
  text-decoration: none; color: var(--ink); font: 500 0.9375rem var(--sans); }
.gmenu-list a:hover, .gmenu-list a:focus-visible { background: var(--paper-sunk); outline: none; }
.gmenu-list a.on { font-weight: 700; }
.gmenu-list a.on svg { color: var(--accent-ink); }
.gmenu-list .gm-all { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--rule); }
.gmenu-list .gm-all a { color: var(--ink-soft); font-size: 0.875rem; }
@keyframes gm-in { from { opacity: 0; transform: translateY(-4px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .gmenu-list { animation: none; } }
@media (max-width: 560px) {
  .brand .mark { width: 32px; height: 32px; }
  .brand .wordmark { font-size: 1.1rem; }
  .gm-long { display: none; }
  .gm-short { display: inline; }
  .gmenu-btn { padding: 7px 11px; }
  .seg-opt { padding: 6px 13px; font-size: 0.8125rem; }
  /* Too narrow to center the grade beside the toggle: it sits at the right end, under the grade menu. */
  .modebar-in { grid-template-columns: auto 1fr; }
  .mb-grade { justify-self: end; }
  .mb-end { display: none; }
}

/* The evaluation's welcome: the title on the left, and across from it the name and Start Evaluation. */
.eval-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 40px; align-items: start; }
.eval-hero .signin { margin-top: 4px; }
/* The rules: under the preview note, across the whole page like the bonus-round cards. */
.eval-hero .rules { grid-column: 1 / -1; margin-top: 4px; }
.signin .btn-primary { justify-content: center; }
.welcome .overall { margin-top: 36px; }
@media (max-width: 760px) {
  .eval-hero { grid-template-columns: 1fr; gap: 24px; }
  .eval-hero .signin { margin-top: 0; }
}

/* A question's note ("Use 3.14 for π"): small, italic, on the right under its figure. */
.qnote { margin: 6px 0 0; text-align: right; font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.qnote + .qnote { margin-top: 2px; }

/* "Evaluation Complete" with Retake Evaluation across from it. */
.done-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.done-head h1 { margin: 0; }

/* ------------------------------------------------------------------ home page (renderPicker in place.js) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.home .stage { padding-top: 0; padding-bottom: 0; }
.home [id] { scroll-margin-top: 84px; }
/* The hero is two rows: the headline with the drawing centered beside it, then the text with the steps (or the
   start box) centered beside it. On a phone: headline, drawing, text, then the steps or start box. */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "title art" "body side"; gap: 28px 56px; align-items: center; padding-top: 56px !important; }
.hh-title { grid-area: title; } .hh-art { grid-area: art; } .hh-body { grid-area: body; } .hh-side { grid-area: side; }
.hh-body .draft-note { margin-top: 28px; }
.home-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); max-width: 15ch; }
.home-hero h1 em { color: var(--accent-ink); }
.home-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
/* The three steps on a ruled index card: white stock, faint blue rules every --rg, a red margin line between the
   numbers and the words, and the card's stronger header rule with "How to start" written above it. Every line of
   text is one rule tall, so the words sit on the lines. */
.home-steps {
  --rg: 28px; --head: 46px;
  position: relative; list-style: none; margin: 0; padding: var(--head) 24px 14px; display: grid; gap: var(--rg); border-radius: 3px;
  background:
    linear-gradient(90deg, transparent 62px, rgb(201 84 30 / 0.5) 62px, rgb(201 84 30 / 0.5) 63.5px, transparent 63.5px),
    linear-gradient(180deg, transparent calc(var(--head) - 2px), rgb(43 47 140 / 0.45) calc(var(--head) - 2px), rgb(43 47 140 / 0.45) var(--head), transparent var(--head)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--rg) - 1px), rgb(43 47 140 / 0.14) calc(var(--rg) - 1px) var(--rg)) 0 var(--head) / 100% 100% no-repeat,
    #fffdf8;
  box-shadow: 0 1px 2px rgb(36 33 29 / 0.12), 0 14px 30px -18px rgb(36 33 29 / 0.4);
}
.home-steps::before { content: "How to start"; position: absolute; left: 74px; top: 14px; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); }
.home-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 24px; align-items: start; font-family: var(--sans); font-size: 0.9375rem; color: var(--ink-soft); line-height: var(--rg); }
.home-steps b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: var(--rg); color: var(--ink); }
.home-steps .n { width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-family: var(--display); font-size: 0.95rem; line-height: 1; }

.home-sec { padding-top: 88px !important; }
.home-sec-head { max-width: 44rem; margin-bottom: 30px; }
.home-sec-head h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
.home-sec-head p { font-size: 1.125rem; line-height: 1.55; color: var(--ink-soft); margin: 12px 0 0; }

/* Each grade card has its own muted color, drawn from the website's palette: a band across the top, a faint wash
   of the color on the paper, and the grade's name in it. */
.gcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gcard { --g: #b54a1a; display: flex; flex-direction: column; padding: 24px; background: color-mix(in srgb, var(--g) 5%, var(--paper)); border: 1px solid color-mix(in srgb, var(--g) 20%, var(--rule)); border-top: 4px solid var(--g); border-radius: 6px; box-shadow: var(--shadow); transition: border-color 0.2s, transform 0.2s; }
.gcard[data-g="4"] { --g: #9a6f0a; }
.gcard[data-g="5"] { --g: #2f7d5b; }
.gcard[data-g="6"] { --g: #1f6f7a; }
.gcard[data-g="7"] { --g: #3d4a8f; }
.gcard[data-g="8"] { --g: #7a4a6e; }
.gcard:hover { border-color: color-mix(in srgb, var(--g) 45%, var(--rule)); border-top-color: var(--g); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .gcard, .gcard:hover { transition: none; transform: none; } }
.gcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gcard-name { font-family: var(--display); font-weight: 400; font-size: 2.1rem; line-height: 1; margin: 0; color: var(--g); }
.gbadge { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.gbadge.done { background: color-mix(in srgb, var(--green) 14%, var(--paper)); color: var(--green); }
.gcard-about { font-size: 1.02rem; line-height: 1.5; color: var(--ink-soft); margin: 14px 0 0; }
.gcard-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 14px 0 0; font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }
.gcard-meta span:not(:last-child)::after { content: "·"; margin: 0 8px; }
.gcard-parts { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gcard-parts { gap: 6px 14px; }
.gcard-parts li { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-soft); }
.gcard-parts li i { width: 10px; height: 10px; border-radius: 50%; background: var(--strand); flex: none; }
.gcard-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 22px; }
/* The website's pill buttons (ackacademy-next components/Button.tsx, pillClass): filled in blue for the main
   action, outlined in the same blue beside it. */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 1.5px solid var(--blue); border-radius: 999px; font-family: var(--sans); font-size: 0.9375rem; font-weight: 500; color: var(--blue); text-decoration: none; white-space: nowrap; transition: background 0.2s, filter 0.2s, transform 0.1s; }
.pill:hover { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.pill.on { background: var(--blue); color: var(--on-ink); }
.pill.on:hover { background: var(--blue); filter: brightness(1.1); }
.pill:active { transform: scale(0.98); }
.pill.big { padding: 15px 28px; font-size: 1rem; }
button.pill { background: transparent; cursor: pointer; }
.pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gcard-actions .pill.on { flex: 1; }

.modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mode { padding: 30px; background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 6px; }
.mode-tag { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 8px; }
.mode h3 { font-size: 2rem; }
.mode-lead { font-size: 1.08rem; color: var(--ink-soft); margin: 8px 0 0; }
.ticks { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }
.ticks svg { color: var(--green); margin-top: 2px; }

.ready { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.ready li { border-top: 2px solid var(--accent); padding-top: 16px; font-family: var(--sans); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-soft); }
.ready b { display: block; font-family: var(--display); font-weight: 400; font-size: 1.3rem; color: var(--ink); margin: 10px 0 4px; }
.ricon2 { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft); color: var(--ink); }
.ricon2 svg { width: 22px; height: 22px; }

.parents { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; padding: 40px; background: var(--ink); color: var(--on-ink); border-radius: 6px; }
.parents .eyebrow { color: var(--accent); }
.parents h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); color: var(--on-ink); }
.parents-body p { font-size: 1.08rem; line-height: 1.6; margin: 0 0 14px; color: color-mix(in srgb, var(--on-ink) 86%, transparent); }
.parents-body .small { color: color-mix(in srgb, var(--on-ink) 65%, transparent); margin: 6px 0 0; }

.faq { max-width: 52rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; font-family: var(--display); font-size: 1.3rem; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 1.4rem; color: var(--accent-ink); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.faq details p { margin: 0 0 20px; padding: 0 2px; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); max-width: 44rem; }
.home-end { margin: 44px 0 0; padding-bottom: 0; }

@media (max-width: 960px) {
  .home-hero { grid-template-columns: 1fr; grid-template-areas: "title" "art" "body" "side"; gap: 28px; padding-top: 40px !important; }
  .gcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ready { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parents { grid-template-columns: 1fr; gap: 20px; padding: 30px; }
}
@media (max-width: 640px) {
  .home-sec { padding-top: 64px !important; }
  .gcards, .modes, .ready { grid-template-columns: 1fr; }
  .mode, .parents { padding: 22px; }
  .home-cta .big { flex: 1; padding: 15px 16px; white-space: nowrap; }
  .faq summary { font-size: 1.15rem; }
}

/* ------------------------------------------------------------------ "Inside the evaluation" (QD and playKinds in place.js) */
.qdemo { padding: 28px; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow); }
.qd-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.qd-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.qd-tabs button { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink-soft); cursor: pointer; transition: background 0.2s, color 0.2s; }
.qd-tabs button:hover { border-color: var(--accent); }
.qd-tabs button[aria-current="step"] { background: var(--blue); border-color: var(--blue); color: var(--on-ink); }
.demo-play { padding: 8px 18px; min-width: 80px; flex: none; }
.qd-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 36px; margin-top: 24px; align-items: center; }
.qd-screen { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-raised); overflow: hidden; }
.qd-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--paper); font-family: var(--sans); font-size: 0.75rem; color: var(--muted); }
.qd-n { font-weight: 600; color: var(--ink); white-space: nowrap; }
.qd-parts { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex: 1; min-width: 0; }
.qd-parts li { flex: 1; min-width: 0; height: 6px; border-radius: 3px; background: var(--rule); font-size: 0; transition: background 0.3s; }
.qd-parts li.started { background: color-mix(in srgb, var(--accent) 45%, var(--rule)); }
.qd-parts li.now { background: var(--accent-ink); }
.qd-timer { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); padding: 3px 8px; border: 1px solid var(--rule); border-radius: 3px; }
.qd-card { min-height: 290px; padding: 22px 22px 16px; }
.qd-round { display: inline-block; margin: 0 0 10px; font-family: var(--sans); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); background: var(--accent-soft); padding: 3px 9px; border-radius: 999px; }
.qd-q { font-family: var(--display); font-size: 1.3rem; line-height: 1.35; margin: 0; color: var(--ink); }
.qd-fr { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: 0.8em; line-height: 1.05; margin: 0 2px; }
.qd-fr i { font-style: normal; min-width: 0.7em; }
.qd-fr i:first-child { border-bottom: 1.5px solid currentColor; }
.qd-choices { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.qd-choices li { padding: 11px 14px; border: 1.5px solid var(--rule); border-radius: 4px; background: var(--paper); font-family: var(--sans); font-size: 0.9375rem; transition: border-color 0.2s, background 0.2s; }
.qd-choices li.on { border-color: var(--ink); background: var(--accent-soft); font-weight: 600; }
.qd-ans { margin-top: 16px; }
.qd-box { display: inline-flex; align-items: center; min-width: 150px; height: 44px; padding: 0 12px; border: 1.5px solid var(--ink); border-radius: 3px; background: var(--paper); font-family: var(--sans); font-size: 1.15rem; font-weight: 600; box-shadow: 0 0 0 3px var(--accent-soft); }
.qd-box:empty::after { content: ""; width: 1.5px; height: 22px; background: var(--ink); animation: qd-blink 1s steps(1) infinite; }
@keyframes qd-blink { 50% { opacity: 0; } }
.qd-keys { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; margin-top: 14px; }
.qd-keys span { position: relative; height: 36px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; }
.qd-keys .qd-fr i { width: 9px; height: 7px; border: 1.5px solid currentColor; border-radius: 1px; }
.qd-keys .qd-fr i:first-child { margin-bottom: 2px; }
.qd-line { display: block; width: 100%; max-width: 420px; margin-top: 22px; overflow: visible; }
.qd-line line { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.qd-line text { font-family: var(--sans); font-size: 13px; fill: var(--ink-soft); text-anchor: middle; }
.qd-pt { transition: transform 1.3s cubic-bezier(0.3, 0.7, 0.3, 1); }
.qd-pt circle { fill: var(--accent-ink); stroke: var(--paper); stroke-width: 3; }
.qd-bar { display: grid; grid-template-columns: repeat(10, 1fr); margin-top: 22px; max-width: 420px; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.qd-bar span { height: 40px; background: var(--paper); }
.qd-bar span + span { border-left: 1px solid var(--ink-soft); }
.qd-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--rule); background: var(--paper); }
.qd-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 3px; font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; border: 1px solid var(--rule); color: var(--muted); background: var(--paper); transition: background 0.2s, color 0.2s, border-color 0.2s; }
.qd-btn.ghost { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 70%, transparent); }
.qd-btn.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
/* A tap: a ring that grows and fades where the student touched. */
.qd-choices li, .qd-keys span, .qd-btn { position: relative; }
.tap::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; animation: qd-tap 0.6s ease-out forwards; }
@keyframes qd-tap { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.qd-keys span.tap { animation: qd-key 0.4s ease-out; }
@keyframes qd-key { from { background: var(--accent-soft); } to { background: var(--paper); } }
.qd-card.go > * { animation: qd-in 0.45s ease-out both; }
.qd-card.go > :nth-child(2) { animation-delay: 0.12s; }
.qd-card.go > :nth-child(n + 3) { animation-delay: 0.3s; }
@keyframes qd-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.qd-say .mode-tag { margin-bottom: 8px; }
.qd-say h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
.qd-say p:last-child { font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .qd-card.go > *, .tap::after, .qd-box:empty::after { animation: none; }
  .qd-pt, .qd-parts li, .qd-choices li, .qd-btn { transition: none; }
}
@media (max-width: 760px) {
  .qdemo { padding: 18px; }
  .qd-head { flex-direction: column; align-items: stretch; }
  .qd-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .qd-tabs button { flex: none; }
  .demo-play { align-self: flex-start; }
  .qd-body { grid-template-columns: 1fr; gap: 20px; }
  .qd-say { order: -1; }
  .qd-card { min-height: 0; padding: 18px; }
  .qd-q { font-size: 1.15rem; }
  .qd-choices { grid-template-columns: 1fr; }
  .qd-keys { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ the learning map dropped down from a grade card (wireMaps in place.js) */
.gmap-btn .chev { transition: transform 0.25s; }
.gmap-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.gmap-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.gmap { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.45s ease, opacity 0.3s ease; }
.gmap.open { grid-template-rows: 1fr; opacity: 1; }
.gmap-in { min-height: 0; overflow: hidden; }
.gmap-box { padding: 24px; background: color-mix(in srgb, var(--g, var(--blue)) 4%, var(--paper)); border: 1px solid color-mix(in srgb, var(--g, var(--blue)) 20%, var(--rule)); border-top: 4px solid var(--g, var(--blue)); border-radius: 6px; box-shadow: var(--shadow); margin-bottom: 4px; }
.gmap-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.gmap-head h3 { font-size: 1.7rem; }
.gmap-head p:not(.mode-tag) { margin: 8px 0 0; max-width: 40rem; color: var(--ink-soft); font-size: 1.02rem; line-height: 1.5; }
.gmap .smap-pop .btn-primary { border-radius: 999px; background: var(--blue); border-color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .gmap, .gmap-btn .chev { transition: none; } }
@media (max-width: 640px) { .gmap-box { padding: 16px; } }
.gmap .mode-tag { color: var(--g, var(--accent-ink)); }
/* The home page's picture above the three steps (HERO_ART in place.js). */
.illustration { isolation: isolate; }
.illustration .tint { mix-blend-mode: multiply; }
.hero-art { display: block; width: 100%; max-width: 230px; height: auto; margin: 0 auto; }
@media (max-width: 960px) { .hero-art { max-width: 180px; } }

/* ---------- the website's header pencil and free-week button (PENCIL, FREE_WEEK) ---------- */
/* As on the website (SiteHeader.tsx): the pencil fills the gap between the name and the buttons, and steps aside
   when the gap is too narrow for a whole pencil, instead of sliding under the buttons. */
.h-pencil { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 24px; container-type: inline-size; }
.h-pencil .pencil { display: none; }
@container (min-width: 72px) { .h-pencil .pencil { display: flex; } }
.pencil { display: flex; align-items: stretch; width: 100%; height: 16px; }
.pencil svg { height: 100%; overflow: visible; }
.pencil .pc-end { width: auto; flex: none; }
.pencil .pc-barrel { flex: 1; min-width: 0; margin: 0 -1px; }
.pencil .np-end { width: auto; flex: none; }
.pencil .np-barrel { flex: 1; min-width: 0; margin: 0 -1px; }
.free-week { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 3px; background: #F3A09A; color: #3d1f1c; font-family: var(--sans); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; transition: filter 0.2s, transform 0.1s; }
.free-week:hover { filter: brightness(1.05); }
.free-week:active { transform: scale(0.98); }
/* Phones: no pencil in the header, just the name and the buttons. */
@media (max-width: 640px) { .h-pencil { padding: 0 10px; } .h-pencil .pencil { display: none; } .pencil { height: 12px; } .free-week { padding: 9px 14px; font-size: 0.8rem; } }
@media (max-width: 380px) { .free-week { display: none; } }
/* "Is your child on track?": the heading on the left, the reasons on the right. */
.track { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 48px; padding-top: 28px; border-top: 2px solid var(--accent); }
.track h2 { font-size: clamp(2rem, 4.2vw, 2.9rem); }
.track h2 em { color: var(--accent-ink); }
.track-body p { font-size: 1.125rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px; max-width: 40rem; }
.track-body p:first-child { color: var(--ink); }
.track-body p:last-child { margin-bottom: 0; }
@media (max-width: 960px) { .track { grid-template-columns: 1fr; gap: 18px; } }

/* ---------- the website's menu (sitemenu.js; ackacademy-next components/MobileMenu.tsx) ---------- */
.sm-open { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color 0.2s; }
.sm-open:hover { border-color: var(--ink); }
.sm-open span { display: flex; flex-direction: column; gap: 5px; width: 1.15rem; }
.sm-open i { display: block; height: 1.5px; border-radius: 999px; background: currentColor; }
.sm-panel { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; padding: 0 16px max(2rem, env(safe-area-inset-bottom)); background: var(--paper); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.sm-panel.open { opacity: 1; visibility: visible; }
.sm-bar { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 -16px 24px; padding: 16px; border-bottom: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); }
.sm-bar img { display: block; width: 48px; height: 48px; }
.sm-word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding-top: 6px; font-family: var(--display); font-size: 1.3rem; white-space: nowrap; pointer-events: none; }
.sm-close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; }
.sm-close:hover { border-color: var(--ink); }
.sm-nav { flex: 1; overflow-x: hidden; overflow-y: auto; width: 100%; max-width: calc(44rem + 24px); margin: 0 auto; padding: 0 12px; }
.sm-nav ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.sm-nav > ol > li { border-bottom: 1px solid var(--rule); opacity: 0; transform: translateY(-10px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.sm-panel.open .sm-nav > ol > li { opacity: 1; transform: none; transition-delay: var(--d); }
.sm-row { display: flex; align-items: baseline; gap: 16px; margin: 0 -12px; padding: 16px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.sm-row:hover .sm-art { transform: rotate(-3deg); }
.sm-n { width: 24px; flex: none; font-family: var(--sans); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--muted); }
.sm-label { font-family: var(--display); font-size: 1.85rem; line-height: 1; white-space: nowrap; }
.sm-art { width: 60px; height: auto; margin-left: auto; align-self: center; flex: none; transition: transform 0.3s; }
.sm-kids { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; margin: -4px 0 0; padding: 0 0 16px 40px; }
.sm-kids a { font-family: var(--sans); font-size: 0.95rem; color: var(--ink-soft); text-underline-offset: 4px; }
.sm-kids a:hover { color: var(--ink); }
.sm-foot { width: 100%; max-width: 44rem; margin: 0 auto; padding-top: 32px; display: grid; gap: 16px; }
.sm-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 28px; border-radius: 3px; background: var(--ink); color: var(--on-ink); font-family: var(--sans); font-size: 1rem; font-weight: 600; text-decoration: none; }
.sm-cta:hover { background: var(--ink-soft); }
.sm-foot p { margin: 0; text-align: center; font-family: var(--sans); font-size: 0.875rem; }
.sm-foot p a { color: var(--muted); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 640px) { .sm-panel { padding-left: 32px; padding-right: 32px; } .sm-bar { margin: 0 -32px 24px; padding: 16px 32px; } .sm-label { font-size: 2.1rem; } .sm-art { width: 64px; } }
@media (max-width: 359px) { .sm-label { font-size: 1.5rem; } .sm-art { width: 48px; } }
@media (prefers-reduced-motion: reduce) { .sm-panel, .sm-nav > ol > li, .sm-art { transition: none; } }

/* The website's desktop nav (SiteMenu.nav()), from 1024px; below that, the pencil and the menu button. */
.site-nav { display: none; flex: 1; justify-content: center; min-width: 0; }
.site-nav > ul { list-style: none; display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; }
.site-nav a { display: block; padding: 8px 14px; border-radius: 999px; font-family: var(--sans); font-size: 0.92rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap; transition: color 0.2s; }
.site-nav a:hover { color: var(--ink); }
.sn-menu { position: relative; display: flex; align-items: center; }
.sn-menu > a { padding-right: 6px; }
.sn-arrow { display: grid; place-items: center; width: 24px; height: 32px; margin-left: -4px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); cursor: pointer; }
.sn-arrow:hover { color: var(--ink); }
.sn-arrow svg { transition: transform 0.2s; }
.sn-menu:hover .sn-arrow svg, .sn-menu.open .sn-arrow svg { transform: rotate(180deg); }
.sn-panel { position: absolute; left: 0; top: 100%; z-index: 60; padding-top: 8px; opacity: 0; visibility: hidden; transition: opacity 0.15s, visibility 0.15s; }
.sn-menu:hover .sn-panel, .sn-menu.open .sn-panel { opacity: 1; visibility: visible; }
.sn-panel ul { list-style: none; min-width: 15rem; margin: 0; padding: 6px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); box-shadow: 0 12px 32px -16px rgb(36 33 29 / 0.35); }
.sn-panel a { border-radius: 8px; padding: 8px 12px; }
.sn-panel a:hover { background: color-mix(in srgb, var(--accent-soft) 50%, transparent); }
@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .header .h-pencil, .header .sm-open { display: none; }
}

/* The pencil under the current section (NAV_PENCIL), the width of its name and arrow. */
.sn-l { position: relative; display: inline-block; }
.sn-pencil { position: absolute; left: 12px; right: 2px; bottom: -2px; width: auto; height: 7px; pointer-events: none; }
/* The map panel's close button: a red circle with an x. */
.gmap-close { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: #d8462a; color: #fff; cursor: pointer; box-shadow: 0 2px 6px -2px rgb(36 33 29 / 0.4); transition: filter 0.2s, transform 0.1s; }
.gmap-close:hover { filter: brightness(1.08); }
.gmap-close:active { transform: scale(0.94); }
.gmap-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The current section and page: the pencil under Math, the page shaded in the dropdown and the phone menu. */
.site-nav .sn-menu.on > a { font-weight: 600; color: var(--ink); }
.sn-panel a[aria-current="page"] { background: var(--accent-soft); font-weight: 600; color: var(--ink); }
.sm-row.on { background: var(--accent-soft); padding-top: 8px; padding-bottom: 8px; margin-top: 8px; margin-bottom: 10px; }
.sm-row.on + .sm-kids { margin-top: 0; }
.sm-row.on .sm-n { color: var(--accent-ink); }
.sm-row.on .sm-label { font-style: italic; }
.sm-kids a[aria-current="page"] { font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.track-art { display: block; width: 100%; max-width: 300px; height: auto; margin-top: 24px; }
@media (max-width: 960px) { .track-art { max-width: 220px; margin-top: 16px; } }

/* The two modes as index cards, like the steps card: Evaluation on canary stock, Practice on pale blue. The step and
   title sit above the header rule, then every line (the lead and each tick line) sits on a rule; the ticks hang in
   the margin, left of the red line. */
.modes .mode {
  --rg: 28px; --head: 84px; --margin: 58px; --card: #fff3c2;
  padding: 14px 24px 14px 72px; border: 0; border-radius: 3px;
  background:
    linear-gradient(90deg, transparent var(--margin), rgb(201 84 30 / 0.5) var(--margin), rgb(201 84 30 / 0.5) calc(var(--margin) + 1.5px), transparent calc(var(--margin) + 1.5px)),
    linear-gradient(180deg, transparent calc(var(--head) - 2px), rgb(43 47 140 / 0.45) calc(var(--head) - 2px), rgb(43 47 140 / 0.45) var(--head), transparent var(--head)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--rg) - 1px), rgb(43 47 140 / 0.16) calc(var(--rg) - 1px) var(--rg)) 0 calc(var(--head) - 5px) / 100% 100% no-repeat,
    var(--card);
  box-shadow: 0 1px 2px rgb(36 33 29 / 0.12), 0 14px 30px -18px rgb(36 33 29 / 0.4);
}
.modes .mode + .mode { --card: #e3eef8; }
.modes .mode-tag { line-height: var(--rg); margin: 0; }
.modes .mode h3 { line-height: calc(var(--head) - 14px - var(--rg)); margin: 0; }
.modes .mode-lead { line-height: var(--rg); margin: 0; }
.modes .ticks { margin: var(--rg) 0 0; padding: 0; border: 0; gap: 0; }
.modes .ticks li { grid-template-columns: 22px 1fr; gap: 24px; margin-left: -46px; line-height: var(--rg); }
.modes .ticks svg { margin-top: 5px; }
@media (max-width: 640px) {
  .modes .mode { --margin: 44px; padding: 14px 16px 14px 56px; }
  .modes .ticks li { grid-template-columns: 18px 1fr; gap: 20px; margin-left: -38px; }
}

/* The animated header logo (SiteMenu.brand(); the website's HeaderLogo). Both the name and the mark sit in one grid
   cell. On the way down the name folds (0-300ms), stacks (230-530ms), fades (540ms) and the mark scales in (560ms);
   the un-scrolled delays run it back in reverse. */
.bw-brand { display: grid; align-items: center; justify-items: start; gap: 0; }
.bw-brand > * { grid-area: 1 / 1; }
.bw { font-family: var(--display); font-weight: 400; font-size: 1.4rem; line-height: 1; white-space: nowrap; color: var(--ink); transition: opacity 0.2s 0.15s, filter 0.2s 0.15s; }
.bw-l { display: inline-block; transition: transform 0.3s ease-in-out 0.23s; }
.bw-f { display: inline-block; overflow: hidden; vertical-align: bottom; transition: max-width 0.3s 0.52s, opacity 0.3s 0.52s; }
.bw-dot { max-width: 0.5em; }
.bw-tail { max-width: 6em; }
.bw-mark { width: 48px; height: 48px; opacity: 0; transform: scale(0.9); transition: opacity 0.3s ease-out 0s, transform 0.3s ease-out 0s; filter: var(--art-filter); }
html[data-scrolled] .bw { opacity: 0; filter: blur(1px); transition-delay: 0.54s; }
html[data-scrolled] .bw-l { transform: translate(var(--tx, 0), var(--ty, 0)) scale(0.8); transition-delay: 0s; }
html[data-scrolled] .bw-f { max-width: 0; opacity: 0; transition-delay: 0s; }
html[data-scrolled] .bw-mark { opacity: 1; transform: none; transition-delay: 0.56s; }
@media (min-width: 640px) { .bw { font-size: 1.6rem; } .bw-mark { width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .bw, .bw-l, .bw-f, .bw-mark { transition: none; } }

/* The bookcase (SHELF in sitemenu.js) fills what the links leave of the menu's height, running down it between the
   links and Start a Free Week, as tall as that space allows; where the space is too short for it, it hides. */
.sm-nav { flex: 0 1 auto; }
.sm-shelf { flex: 1 1 0; min-height: 0; width: 100%; max-width: 44rem; margin: 0 auto; padding: 20px 0 4px; display: flex; align-items: stretch; justify-content: center; container-type: size; }
.sm-case-art { display: block; height: 100%; width: auto; max-width: 100%; }
@container (max-height: 150px) { .sm-case-art { display: none; } }
/* It comes in like the menu's rows (.sm-nav li: fade and drop 10px), just after the last of them. */
.sm-shelf { opacity: 0; transform: translateY(-10px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.sm-panel.open .sm-shelf { opacity: 1; transform: none; transition-delay: 330ms; }
@media (prefers-reduced-motion: reduce) { .sm-shelf { transition: none; } }

/* The website's footer (SiteMenu.footer()): on the page's grid paper under an ink rule, the logo, line and email on
   the left, the link columns on the right, and the sign-off with the curled-up cat at the bottom right. */
.sf { max-width: 76rem; margin: 96px auto 0; padding: 0 16px 40px; }
.sf-grid { display: grid; gap: 48px; padding-top: 40px; border-top: 1px solid color-mix(in srgb, var(--ink) 80%, transparent); }
.sf-about { max-width: 24rem; display: grid; gap: 16px; justify-items: start; }
.sf-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--ink); text-decoration: none; }
.sf-logo img { width: 56px; height: 56px; filter: var(--art-filter); }
.sf-logo span { font-family: var(--display); font-size: 1.4rem; line-height: 1; }
.sf-about p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.sf-mail { font-size: 0.95rem; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.sf-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.sf-head { margin: 0 0 16px; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); }
.sf-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sf-cols a { font-size: 0.95rem; color: var(--ink-soft); text-decoration: none; transition: color 0.2s; }
.sf-cols a:hover, .sf-cols a[aria-current="page"] { color: var(--ink); }
.sf-cols a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.sf-sign { margin: 48px 0 0; display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; font-family: var(--sans); font-size: 0.75rem; color: var(--muted); }
.sf-sign span { padding-bottom: 4px; }
.sf-cat { height: 36px; width: auto; overflow: visible; color: var(--ink); }
@media (min-width: 900px) { .sf-grid { grid-template-columns: 1.1fr 2.2fr; } .sf-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* The headline's second half sits to the right on its own two lines, as on the SHSAT page. */
.home-hero h1 .hh-find { display: block; width: fit-content; margin-left: auto; text-align: right; }
@media (min-width: 961px) { .home-hero h1 .hh-find { margin-right: -3em; } }
/* On a phone or tablet the headline is narrower than the screen (15ch); the second half reaches past it to the
   screen's right margin (the page's 16px gutter). */
@media (max-width: 960px) { .home-hero h1 .hh-find { margin-right: min(0px, calc(15ch - (100vw - 32px))); } }
/* "on track?" drops to its own line, a little lower and to the right: slightly off track. */
.track h2 .off-track { display: block; margin: 4px 0 0 3.2em; }
/* On a phone the train sits on the right, under the heading. */
@media (max-width: 960px) { .track-art { margin-left: auto; } }
/* The last call to action: centered on a phone, on the right on a computer. */
.home-end.edge { text-align: center; }
@media (min-width: 761px) { .home-end.edge { text-align: right; } }
/* The curved arrow from "stand in math." to "Then practice" (heroArrow in place.js): drawn on, then the head. */
.home-hero h1 { position: relative; }
.hero-arrow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: var(--accent-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hero-arrow .ha-line { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
.hero-arrow .ha-head { opacity: 0; transform-box: fill-box; transform-origin: right center; transform: scale(0.4); }
.hero-arrow.go .ha-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s cubic-bezier(0.45, 0.05, 0.4, 1) 0.5s; }
.hero-arrow.go .ha-head { opacity: 1; transform: none; transition: opacity 0.15s ease-out 1.95s, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1) 1.95s; }
@media (prefers-reduced-motion: reduce) { .hero-arrow .ha-line { stroke-dashoffset: 0; } .hero-arrow .ha-head { opacity: 1; transform: none; } .hero-arrow.go .ha-line, .hero-arrow.go .ha-head { transition: none; } }

/* ------------------------------------------------------------------ the review at the end (review.js) */
.review { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--rule); text-align: left; }
.rv-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.rv-head h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
.rv-score { margin: 10px 0 0; font-size: 1.1rem; color: var(--ink-soft); }
.rv-score b { color: var(--ink); }
.rv-filter { display: flex; gap: 6px; }
.rv-filter button { font-family: var(--sans); font-size: 0.875rem; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--blue); background: transparent; color: var(--blue); cursor: pointer; }
.rv-filter button[aria-pressed="true"] { background: var(--blue); color: var(--on-ink); }
.rv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.review.only-missed .rv-item.ok { display: none; }
.rv-item { padding: 20px 22px; background: #fffdf8; border: 1px solid var(--rule); border-left: 4px solid var(--green); border-radius: 6px; box-shadow: 0 1px 2px rgb(36 33 29 / 0.06); }
.rv-item.miss { border-left-color: var(--sienna); }
.rv-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: var(--sans); font-size: 0.8125rem; }
.rv-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--on-ink); font-family: var(--display); font-size: 0.95rem; }
.rv-tag { font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.6875rem; color: var(--accent-ink); }
.rv-mark { margin-left: auto; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.rv-mark.ok { color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); }
.rv-mark.miss { color: var(--sienna); background: color-mix(in srgb, var(--sienna) 12%, transparent); }
.rv-q { font-size: 1.05rem; }
.rv-q img.fig, .rv-q figure { max-width: 100%; }
.rv-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.rv-answers > div { padding: 12px 14px; border-radius: 4px; background: var(--paper-raised); }
.rv-answers dt { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rv-answers dd { margin: 0; font-size: 1.05rem; }
.rv-item.miss .rv-answers > div:first-child { background: color-mix(in srgb, var(--sienna) 8%, var(--paper)); }
.rv-right { color: var(--green); font-weight: 600; }
.rv-touch { pointer-events: none; max-width: 420px; }
.rv-solution { margin-top: 16px; padding: 16px 18px; border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 6px; background: var(--paper); }
.rv-sh { margin: 0 0 10px; font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.rv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rv-steps li { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: baseline; }
.rv-step { font-family: var(--sans); font-size: 0.8125rem; font-weight: 600; color: var(--ink-soft); }
.rv-math { overflow-x: auto; }
.rv-final { margin-top: 12px; overflow-x: auto; }
.rv-final .katex-display { margin: 0; text-align: left; }
.rv-final .katex-display > .katex { text-align: left; }
.rv-box { display: inline-block; padding: 6px 14px; border: 1.5px solid var(--ink); font-size: 1.1rem; }
.rv-soon { margin: 0; color: var(--muted); font-style: italic; }
@media (max-width: 640px) { .rv-answers { grid-template-columns: 1fr; } .rv-item { padding: 16px; } .rv-steps li { grid-template-columns: 1fr; gap: 2px; } }
.rv-second { display: block; margin-top: 4px; font-family: var(--sans); font-size: 0.8125rem; color: var(--muted); }

/* Half credit in the review, and the answer-format hint under a typed question. */
.rv-item.half { border-left-color: var(--accent); }
.rv-mark.half { color: var(--accent-ink); background: var(--accent-soft); }
.rv-item.half .rv-answers > div:first-child { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.rv-note { margin: 12px 0 0; font-family: var(--sans); font-size: 0.875rem; color: var(--accent-ink); }
.fmt-hint { margin: 10px 0 6px; font-family: var(--sans); font-size: 0.875rem; color: var(--ink-soft); }
.fmt-hint::before { content: "Format: "; font-weight: 600; color: var(--accent-ink); }

/* The parents panel on light card stock, like the page's index cards (blush), instead of dark ink. */
.parents { background: #fbe4df; color: var(--ink); border: 1px solid color-mix(in srgb, var(--sienna) 18%, #fbe4df); box-shadow: 0 1px 2px rgb(36 33 29 / 0.08), 0 14px 30px -20px rgb(36 33 29 / 0.3); }
.parents .eyebrow { color: var(--accent-ink); }
.parents h2 { color: var(--ink); }
.parents-body p { color: var(--ink-soft); }
.parents-body .small { color: var(--muted); }