/* Layout: one column app shell; sticky top bar on computers, bottom tab bar on phones. The test player
   is a full-height split view (passage | question) that stacks on phones. 1.2.0 palette: vivid violet with game colors
   (streak orange, XP gold, gem blue, go green), Bricolage Grotesque headings, chunky pressable buttons. */
:root {
  --bg: #f6f5ff; --surface: #ffffff; --surface-2: #efedfd; --line: #e2e0f3; --line-strong: #c9c5e6;
  --fg: #16123a; --fg-2: #4b4672; --fg-3: #67628c;
  --primary: #5040e0; --primary-ink: #ffffff; --primary-soft: #ebe8fe; --primary-hover: #4132c9; --primary-edge: #3326a8;
  --streak: #f06a00; --streak-soft: #fff0e2; --xp: #e0a400; --xp-soft: #fff6d6; --gem: #0b93d6; --gem-soft: #e1f4fd; --go: #1f9d55; --go-edge: #167a41;
  --lamp: #c47d12; --lamp-soft: #fbefd9; --lamp-glow: rgba(233, 162, 59, .28);
  --good: #1e7a4d; --good-soft: #e1f3e9; --bad: #b3261e; --bad-soft: #fbe6e4; --warn: #8a5a00; --warn-soft: #fbf0d4;
  --mark: #fff0a8; --mark-ink: #171c33;
  --shadow: 0 1px 2px rgba(23, 28, 51, .06), 0 8px 24px rgba(23, 28, 51, .06);
  --f-display: "Bricolage Grotesque", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-text: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 10px; --r-lg: 16px; --tap: 44px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0f0d24; --surface: #19163a; --surface-2: #221e4a; --line: #2f2a5e; --line-strong: #433d7d;
  --fg: #efedff; --fg-2: #bdb8e3; --fg-3: #9b96c4;
  --primary: #a99dff; --primary-ink: #120f2a; --primary-soft: #2b2560; --primary-hover: #c2b9ff; --primary-edge: #6e5fd6;
  --streak: #ff9d3d; --streak-soft: #3b2614; --xp: #ffd23f; --xp-soft: #3a3214; --gem: #4cc3ff; --gem-soft: #12324a; --go: #4fd18b; --go-edge: #2a9a5c;
  --lamp: #f2b552; --lamp-soft: #3a2f1c; --lamp-glow: rgba(242, 181, 82, .22);
  --good: #6fd3a0; --good-soft: #15382a; --bad: #ff9a92; --bad-soft: #43201f; --warn: #f2c66b; --warn-soft: #3a3017;
  --mark: #6b5a12; --mark-ink: #fff8d6;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25); color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0f0d24; --surface: #19163a; --surface-2: #221e4a; --line: #2f2a5e; --line-strong: #433d7d;
  --fg: #efedff; --fg-2: #bdb8e3; --fg-3: #9b96c4;
  --primary: #a99dff; --primary-ink: #120f2a; --primary-soft: #2b2560; --primary-hover: #c2b9ff; --primary-edge: #6e5fd6;
  --streak: #ff9d3d; --streak-soft: #3b2614; --xp: #ffd23f; --xp-soft: #3a3214; --gem: #4cc3ff; --gem-soft: #12324a; --go: #4fd18b; --go-edge: #2a9a5c;
  --lamp: #f2b552; --lamp-soft: #3a2f1c; --lamp-glow: rgba(242, 181, 82, .22);
  --good: #6fd3a0; --good-soft: #15382a; --bad: #ff9a92; --bad-soft: #43201f; --warn: #f2c66b; --warn-soft: #3a3017;
  --mark: #6b5a12; --mark-ink: #fff8d6;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25); color-scheme: dark; }
/* 1.34.0 (Todd): exponents never crowd their base or the next sign. An italic letter leans into its
   superscript, so it gets extra room; the raised digit sits on its own line height so lines stay even. */
sup { font-size: max(12px, .72em); line-height: 0; vertical-align: .45em; margin-left: .04em; margin-right: .08em; font-style: normal; white-space: nowrap; }
i + sup, em + sup { margin-left: .1em; }


* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 15px/1.55 var(--f-body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.muted { color: var(--fg-2); } .faint { color: var(--fg-3); }
.tnum { font-variant-numeric: tabular-nums; }
.eyebrow { font: 600 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- top bar ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); background: none; border: 0; cursor: pointer; padding: 0; }
.brand b { font: 800 21px/1 var(--f-display); letter-spacing: -.02em; }
.brand .wm-n { color: var(--primary); font-variant-numeric: lining-nums tabular-nums; }
.brand small { display: block; font: 500 11px/1.1 var(--f-body); color: var(--fg-3); letter-spacing: .02em; }
.mark { width: 30px; height: 30px; flex: none; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav button, .linkbtn { background: none; border: 0; padding: 8px 12px; border-radius: 8px; cursor: pointer; color: var(--fg-2); font-weight: 500; min-height: 40px; }
.nav button[aria-current="page"] { color: var(--fg); background: var(--surface-2); }
@media (hover: hover) { .nav button:hover, .linkbtn:hover { color: var(--fg); background: var(--surface-2); } }
.top .cta { margin-left: 8px; }
.tabbar { display: none; }
@media (max-width: 860px) {
  .nav { display: none; }
  .top .cta { margin-left: auto; }
  .tabbar { display: flex; position: fixed; inset: auto 0 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--line);
    padding: 4px max(8px, env(safe-area-inset-left, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-right, 0px)); }
  .tabbar button { flex: 1; background: none; border: 0; padding: 6px 2px; display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--fg-3); min-height: 52px; cursor: pointer; }
  .tabbar button svg { width: 22px; height: 22px; }
  .tabbar button[aria-current="page"] { color: var(--primary); font-weight: 600; }
  main { padding-bottom: 84px; }
}

/* ---------- buttons, chips, inputs ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); box-shadow: 0 3px 0 var(--primary-edge); font-weight: 700; }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--primary-edge); }
.btn { box-shadow: 0 2px 0 var(--line-strong); } .btn.ghost, .btn.sm.ghost { box-shadow: none; } .btn:active { transform: translateY(1px); box-shadow: none; }
.btn.lamp { background: var(--lamp); border-color: var(--lamp); color: #1b1300; }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
@media (hover: hover) { .btn:hover { border-color: var(--primary); } .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: 14px; color: var(--fg-2); }
.chip[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--fg); font-weight: 600; }
.chip .n { font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font: 600 12px/1.6 var(--f-body); background: var(--surface-2); color: var(--fg-2); white-space: nowrap; }
.pill.good { background: var(--good-soft); color: var(--good); } .pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.lamp { background: var(--lamp-soft); color: var(--lamp); }
.pill.prim { background: var(--primary-soft); color: var(--primary); }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: 14px; }
.input { min-height: var(--tap); padding: 0 12px; border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--surface); width: 100%; }
textarea.input { padding: 10px 12px; min-height: 90px; }

/* ---------- cards & layout ---------- */
main { min-height: 60vh; }
.page { padding-block: 28px 56px; display: grid; gap: 28px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }
.h-page { font: 600 clamp(28px, 3.6vw, 38px)/1.1 var(--f-display); letter-spacing: -.015em; font-variation-settings: "opsz" 72; }
.h-sec { font: 800 22px/1.2 var(--f-display); letter-spacing: -.01em; }
.h-card { font: 650 16px/1.3 var(--f-body); }
.stack { display: grid; gap: 12px; align-content: start; } .stack-lg { display: grid; gap: 20px; align-content: start; }
.split { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.divider { height: 1px; background: var(--line); }

/* ---------- landing ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background:
  radial-gradient(760px 380px at 88% -12%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%), radial-gradient(520px 300px at -5% 110%, var(--lamp-glow), transparent 70%), var(--surface); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; padding-block: 56px 64px; align-items: start; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 36px 40px; } }
.hero h1 { font: 600 clamp(38px, 5.4vw, 62px)/1.02 var(--f-display); letter-spacing: -.012em; font-variation-settings: "opsz" 120; }
.hero h1 em { font-style: italic; color: var(--primary); }
.hero .lede { font-size: 18px; color: var(--fg-2); max-width: 34em; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--fg-2); font-size: 14px; }
.trust span::before { content: "✓"; color: var(--good); font-weight: 700; margin-right: 6px; }
.demo { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 14px; }
.demo .q-stem { font-size: 16px; }
.band { padding-block: 56px; border-bottom: 1px solid var(--line); }
.band.alt { background: var(--surface); }
.band-head { display: grid; gap: 10px; max-width: 46em; margin-bottom: 28px; }
.feat { display: grid; gap: 8px; align-content: start; }
.feat .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.feat .ico svg { width: 22px; height: 22px; }
.feat h3 { font: 650 16px/1.3 var(--f-body); }
.feat p { color: var(--fg-2); font-size: 14.5px; }
.compare { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.compare th, .compare td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font: 600 12px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.compare td.us { background: var(--primary-soft); font-weight: 600; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.price { display: grid; gap: 14px; align-content: start; position: relative; }
.price.feature { border: 2px solid var(--primary); }
.price .amt { font: 600 40px/1 var(--f-display); letter-spacing: -.02em; }
.price ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14.5px; }
.price li { padding-left: 24px; position: relative; } .price li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.faq details { border-bottom: 1px solid var(--line); padding-block: 14px; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; color: var(--fg-3); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 8px; color: var(--fg-2); max-width: 60em; }
footer.site { padding-block: 32px 40px; color: var(--fg-3); font-size: 13px; }
footer.site .wrap { display: grid; gap: 10px; }

/* ---------- today ---------- */
.hello { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
@media (max-width: 700px) { .hello { grid-template-columns: minmax(0, 1fr); } }
.ring { width: 150px; height: 150px; }
.ring text { fill: var(--fg); }
.streak { display: flex; align-items: center; gap: 10px; }
.flame { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--lamp-soft); color: var(--lamp); font-weight: 700; }
.week { display: flex; gap: 6px; }
.week i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--f-body); font-style: normal; background: var(--surface-2); color: var(--fg-3); }
.week i.on { background: var(--lamp); color: #1b1300; }
.action { display: grid; gap: 6px; text-align: left; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); cursor: pointer; min-height: 120px; align-content: start; }
@media (hover: hover) { .action:hover { border-color: var(--primary); box-shadow: var(--shadow); } }
.action b { font-size: 16px; } .action span { color: var(--fg-2); font-size: 14px; }
.action .ico { color: var(--primary); }
.skillmap { display: grid; gap: 6px; }
.skillrow { display: grid; grid-template-columns: minmax(0, 1fr) 120px 52px; gap: 12px; align-items: center; font-size: 14px; }
.bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--primary); border-radius: 99px; }
.ls-prog { display: grid; gap: 6px; max-width: 360px; margin-top: 4px; }
.ls-prog .faint { font-size: 13px; }
.bar.good > i { background: var(--good); } .bar.bad > i { background: var(--bad); } .bar.warn > i { background: var(--lamp); }

/* ---------- builder ---------- */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
@media (max-width: 900px) { .builder { grid-template-columns: minmax(0, 1fr); } }
.summary { position: sticky; top: 80px; display: grid; gap: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px; background: var(--surface-2); flex-wrap: wrap; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 0 14px; min-height: 36px; cursor: pointer; color: var(--fg-2); font-weight: 500; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); font-weight: 650; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.minutes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- player ---------- */
.player { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.pbar { display: flex; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--surface); border-bottom: 1px solid var(--line); min-height: 58px; }
.pbar .title { font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pbar .sub { font-size: 12.5px; color: var(--fg-3); }
.timer { margin-left: auto; font: 600 16px/1 var(--f-mono); padding: 8px 12px; border-radius: 8px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.timer { border: 0; color: inherit; cursor: pointer; }
.timer.hid { font: 600 13px/1 var(--f-body); color: var(--fg-3); }
.timer.low { background: var(--bad-soft); color: var(--bad); }
.pbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; }
.pbody.solo { grid-template-columns: minmax(0, 1fr); }
.pane { overflow-y: auto; padding: 28px max(20px, env(safe-area-inset-left, 0px)) 40px 28px; min-width: 0; }
.pane.passage { border-right: 1px solid var(--line); background: var(--surface); }
.pane .inner { max-width: 720px; margin: 0 auto; display: grid; gap: 18px; }
.pbody.solo .pane .inner { max-width: 760px; }
@media (max-width: 860px) {
  .pbody { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .pane.passage { border-right: 0; border-bottom: 1px solid var(--line); max-height: 42vh; padding: 16px; }
  .pane.passage.collapsed { max-height: 52px; overflow: hidden; }
  .pane { padding: 18px 16px 32px; }
}
.ptext { font: 400 18px/1.7 var(--f-text); color: var(--fg); }
.ptext p { margin: 0 0 1em; text-indent: 0; position: relative; }
.ptext p .pn { position: absolute; left: -26px; top: .25em; font: 600 12px/1 var(--f-body); color: var(--fg-3); width: auto; height: auto; display: inline; border-radius: 0; cursor: auto; }
@media (max-width: 860px) { .ptext p .pn { position: static; margin-right: 6px; } .ptext { font-size: 17px; } }
.ptext mark { background: var(--mark); color: var(--mark-ink); border-radius: 2px; padding: 0 1px; }
/* 1.59.0: only the words are underlined, not the number or the space after it */
.ptext .ul .ut { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ptext .ul sup, .ptext .ins { font: 700 12px/1 var(--f-body); color: var(--primary); background: var(--primary-soft); border: 1px solid var(--line); border-radius: 5px; padding: 2px 4px; vertical-align: .35em; white-space: nowrap; }
.ptext .ins { vertical-align: .1em; }
.ptext .ul.on { background: var(--primary-soft); border-radius: 3px; }
.ptext .ul.on .ut { text-decoration-color: var(--primary); }
.ptext .ul.on sup, .ptext .ins.on { color: var(--surface); background: var(--primary); border-color: var(--primary); }
.ptext .ins { display: inline-block; padding: 2px 6px; border: 1px dashed var(--line-strong); border-radius: 6px; }
.ptext .ins.on { border-color: var(--primary); background: var(--primary-soft); }
.phead { display: grid; gap: 4px; }
.phead h2 { font: 600 24px/1.2 var(--f-display); }
.pcite { font-size: 13px; color: var(--fg-3); }
.ppair + .ppair { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.ppair > h2 { margin: 8px 0 2px; }
.pfig { margin: 6px 0 14px; min-width: 0; max-width: 100%; }
.pfig figcaption { font-size: 14px; color: var(--fg); margin-bottom: 6px; }
.pfig .table { font-size: 14px; }
.pfig .table th, .pfig .table td { white-space: normal; padding: 6px 8px; vertical-align: top; }
@media (max-width: 47.99rem) { .pfig .table { font-size: 13px; } .pfig .table th { font-size: 12px; } }
.pfig-note { font-size: 12.5px; margin: 6px 0 0; }
.qnum { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.q-stem { font-size: 17px; line-height: 1.6; }
.q-stem .eqs, .demo .eqs { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--line-strong); font-family: var(--f-text); font-size: 19px; line-height: 1.6; }
.q-stem blockquote { margin: 10px 0; padding: 10px 14px; border-left: 3px solid var(--primary); background: var(--surface-2); border-radius: 0 8px 8px 0; font-family: var(--f-text); font-size: 17px; }
.fr { display: inline-grid; vertical-align: middle; text-align: center; font-size: .86em; line-height: 1.1; margin: 0 1px; }
.fr > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 2px; }
.choices { display: grid; gap: 10px; }
.choices > div > .choice { flex: 1; min-width: 0; }
.choice { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px 10px 10px 12px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; min-height: 56px; font-size: 16px; }
.choice .let { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line-strong); font-weight: 700; font-size: 14px; color: var(--fg-2); }
.choice[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); }
.choice[aria-pressed="true"] .let { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.choice.struck .txt { text-decoration: line-through; color: var(--fg-3); }
.choice.struck .let { opacity: .45; }
.choice.right { border-color: var(--good); background: var(--good-soft); }
.choice.right .let { background: var(--good); border-color: var(--good); color: var(--surface); }
.choice.wrong { border-color: var(--bad); background: var(--bad-soft); }
.choice.wrong .let { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.choice[disabled] { cursor: default; }
.strike { width: 36px; height: 36px; border-radius: 8px; border: 0; background: none; color: var(--fg-3); cursor: pointer; display: grid; place-items: center; }
@media (hover: hover) { .strike:hover { background: var(--surface-2); color: var(--fg); } .choice:not([disabled]):hover { border-color: var(--primary); } }
.pfoot { display: flex; align-items: center; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--surface); border-top: 1px solid var(--line); }
.pfoot .grow { flex: 1; }
.navgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 8px; }
.navgrid button { min-height: 42px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; position: relative; }
.navgrid button.done { background: var(--primary-soft); border-color: var(--primary); }
.navgrid button.cur { outline: 2px solid var(--fg); outline-offset: 1px; }
.navgrid button.flag::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); }
.navgrid button.ok { background: var(--good-soft); border-color: var(--good); } .navgrid button.no { background: var(--bad-soft); border-color: var(--bad); }
.toolbar { position: fixed; z-index: 60; display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--fg); box-shadow: var(--shadow); }
.toolbar button { background: none; border: 0; color: var(--bg); padding: 8px 10px; border-radius: 7px; cursor: pointer; font-weight: 600; font-size: 13px; min-height: 36px; }

/* ---------- explanation ---------- */
.exp { display: grid; gap: 14px; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.verdict { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-weight: 650; }
.verdict .big { font: 600 22px/1.1 var(--f-display); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); display: grid; gap: 2px; }
.stat b { font: 650 18px/1.2 var(--f-body); font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--fg-3); }
.steps { display: grid; gap: 8px; }
.step { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.step summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; gap: 10px; align-items: center; font-weight: 600; min-height: 44px; }
.step summary .sn { width: 24px; height: 24px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; font-size: 12px; flex: none; }
.step[open] summary { background: var(--surface-2); }
.step .sb { padding: 10px 14px 14px 48px; color: var(--fg); }
.whys { display: grid; gap: 8px; }
.why { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 14.5px; padding: 8px 0; border-top: 1px solid var(--line); }
.why .let { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--surface-2); }
.why.ok .let { background: var(--good); color: var(--surface); }
.why.you .let { background: var(--bad); color: var(--surface); }
.tip { padding: 12px 14px; border-radius: 12px; background: var(--lamp-soft); font-size: 14.5px; display: grid; gap: 4px; }
.tip b { color: var(--lamp); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.trap { padding: 12px 14px; border-radius: 12px; background: var(--bad-soft); font-size: 14.5px; display: grid; gap: 4px; }
.trap b { color: var(--bad); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.tutor { border: 1px dashed var(--line-strong); border-radius: 12px; padding: 14px; display: grid; gap: 10px; }
.bubble { padding: 10px 14px; border-radius: 14px; background: var(--surface-2); max-width: 90%; font-size: 14.5px; }
.bubble.me { background: var(--primary-soft); justify-self: end; }

/* ---------- results, progress ---------- */
.scorehead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
@media (max-width: 600px) { .scorehead { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.secscores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 520px) { .secscores { grid-template-columns: minmax(0, 1fr); } }
.secscore { padding: 14px; border-radius: 12px; border: 1px solid var(--line); display: grid; gap: 6px; }
.secscore b { font: 600 30px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { font: 600 12px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table tr.click { cursor: pointer; }
/* Oct 29 2026 nightly: on a phone a guide table fits its card (a long header kept on one line pushed a column out of sight) */
@media (max-width: 47.99rem) { .tablewrap .table { font-size: 13px; } .tablewrap .table th { white-space: normal; } .tablewrap .table th, .tablewrap .table td { padding: 8px; } }
/* a guide table of four or more columns reads as one card per row on a phone, each value under its column's name */
@media (max-width: 47.99rem) {
  .tablewrap .table.wide thead { display: none; }
  .tablewrap .table.wide tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--line); }
  .tablewrap .table.wide tr:last-child { border-bottom: 0; }
  .tablewrap .table.wide td { display: block; position: relative; padding: 3px 0 3px 38%; border: 0; }
  .tablewrap .table.wide td:first-child { padding: 0 0 6px; font-size: 14px; }
  .tablewrap .table.wide td[data-l]::before { content: attr(data-l); position: absolute; left: 0; top: 4px; width: 35%; font: 600 11px/1.5 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); }
}
@media (hover: hover) { .table tr.click:hover td { background: var(--surface-2); } }
.chart svg { width: 100%; height: auto; display: block; }
.chart .ax { stroke: var(--line); } .chart .gl { stroke: var(--line); stroke-dasharray: 2 4; }
.chart .ln { fill: none; stroke: var(--primary); stroke-width: 2.5; } .chart .ar { fill: var(--primary-soft); }
.chart .dt { fill: var(--primary); } .chart .dt.off { fill: var(--lamp); }
.chart text { fill: var(--fg-3); font: 500 11px var(--f-body); }
.empty { padding: 28px; text-align: center; color: var(--fg-2); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); display: grid; gap: 10px; justify-items: center; }

/* ---------- words ---------- */
.flash { min-height: 220px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; padding: 28px; text-align: center; cursor: pointer; box-shadow: var(--shadow); }
.flash .w { font: 600 40px/1.1 var(--f-display); }
.flash .d { font-size: 17px; max-width: 32em; }
.wordlist { display: grid; gap: 0; }
.wordrow { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr) auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
@media (max-width: 600px) { .wordrow { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; } .wordrow > .wdef { grid-column: 1 / -1; grid-row: 2; } .wordrow > .wact { grid-column: 2; grid-row: 1; gap: 4px; } }
.wordrow .w { font: 600 20px/1.2 var(--f-display); }
.wordrow .ctx { font-family: var(--f-text); font-size: 15.5px; color: var(--fg-2); }

/* ---------- sheets & toasts ---------- */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(10, 12, 24, .45); display: grid; place-items: end center; }
@media (min-width: 700px) { .scrim { place-items: center; } }
.sheet { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border-radius: 18px 18px 0 0; padding: 22px max(20px, env(safe-area-inset-left, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 14px; animation: up .22s ease-out; }
@media (min-width: 700px) { .sheet { border-radius: 18px; } }
/* 1.99.0 (Todd, October 29, 2026): while a card, a player or a lesson is open the page behind it stays put. A drag on a
 * card or its dimmed edge used to scroll the page underneath, and a scroll that ran past the end of a player's box
 * carried on into the page (and moved the browser bar). The page keeps its place and comes back as it was. */
body:has(> .scrim) { overflow: hidden; } /* the players and lessons set the same on body themselves; html stays visible so the page keeps its place */
.scrim, .player .pane, .sp-pane, .sp-body, .rz > * { overscroll-behavior: contain; }
/* 1.62.0: the sheet slides without fading, so the bottom tab bar never shows through it while it opens (Todd) */
@keyframes up { from { transform: translateY(24px); } to { transform: none; } }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80; background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow); animation: up .2s ease-out; max-width: calc(100% - 32px); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- admin ---------- */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.kpi { display: grid; gap: 4px; }
.kpi b { font: 600 34px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.kpi span { font-size: 13px; color: var(--fg-3); }
.matrix { border-collapse: collapse; font-size: 13px; }
.matrix th, .matrix td { padding: 6px 8px; border: 1px solid var(--line); text-align: center; font-variant-numeric: tabular-nums; }
.matrix th:first-child, .matrix td:first-child { text-align: left; white-space: nowrap; }
.matrix td.z { background: var(--bad-soft); color: var(--bad); } .matrix td.lo { background: var(--warn-soft); } .matrix td.ok { background: var(--good-soft); }
.notice { padding: 12px 14px; border-radius: 12px; background: var(--primary-soft); font-size: 14px; }
.notice.warn { background: var(--warn-soft); }
.switch { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.switch input { width: 44px; height: 26px; accent-color: var(--primary); }
.lock { display: inline-flex; align-items: center; gap: 4px; font: 700 12px/1 var(--f-body); color: var(--lamp); letter-spacing: .04em; text-transform: uppercase; }
.tscroll { overflow-x: auto; max-width: 100%; position: relative; }
.page > *, .stack > *, .stack-lg > *, .grid > * { min-width: 0; }
.btn svg, .chip svg, .pill svg, .linkbtn svg { width: 18px; height: 18px; flex: none; }
.pill svg { width: 13px; height: 13px; }
.action .ico svg, .feat .ico svg { width: 24px; height: 24px; }
.h-card svg, b svg { width: 18px; height: 18px; vertical-align: -3px; }
.streak { flex-wrap: wrap; }

/* ---------- v2: figures, AI tutor, essays, study plan ---------- */
.q-lead { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 15px; color: var(--fg-2); }
.q-lead p { margin: 6px 0 0; }
.fig { margin: 12px 0 4px; display: grid; justify-items: center; gap: 4px; }
.fig svg { width: 100%; max-width: 340px; height: auto; overflow: visible; font: 500 14px var(--f-body); fill: var(--fg); }
.fig figcaption { font-size: 12.5px; color: var(--fg-3); }
.fig .fl { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; }
.fig .ln { fill: none; stroke: var(--fg-2); stroke-width: 1.5; }
.fig .ln.thick { stroke: var(--primary); stroke-width: 4; stroke-linecap: round; }
.fig .ln.dash { stroke: var(--lamp); stroke-dasharray: 5 4; }
.fig .ln.shade { stroke: var(--fg-3); stroke-width: 5; stroke-linecap: round; opacity: .55; }
.fig .gr { stroke: var(--line); stroke-width: 1; }
.fig .hole { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }
.fig .ax { stroke: var(--fg-3); stroke-width: 1.5; }
.fig .dot { fill: var(--primary); }
/* tile patterns: "dark" and "light" tiles keep their colors in both themes, so the words match the picture */
.fig .dk { fill: #2e2a4f; stroke: #8f88b8; stroke-width: 1; }
.fig .lt { fill: #f3f1fb; stroke: #8f88b8; stroke-width: 1; }
.fig .em { font-weight: 700; fill: var(--primary); }
.fig .sm { font-size: 12px; font-weight: 600; }
.fig .faint { fill: var(--fg-3); font-size: 12.5px; }
/* Oct 29: SAT figures (satfig.js), on a panel of their own like the test's white figure box; labels carry a halo so
   grid lines never cut through them. Every color is a theme token, so the figures follow light and dark. */
.fig.sf svg { max-width: 360px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; }
.fig.sf .lb { fill: var(--fg); stroke: var(--surface); stroke-width: 3.5px; stroke-linejoin: round; paint-order: stroke; font-weight: 500; }
.fig.sf .tk { font-size: 12px; fill: var(--fg-2); }
.fig.sf .v, .fig.sf tspan.v { font-style: italic; font-family: var(--f-text); font-size: 15px; }
.fig.sf .gr { stroke: var(--line); stroke-width: 1; }
.fig.sf .ax { stroke: var(--fg-2); stroke-width: 1.4; fill: none; }
.fig.sf .crv { fill: none; stroke: var(--primary); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.fig.sf .crv.c2 { stroke: var(--lamp); }
.fig.sf .crv.c3 { stroke: var(--go); }
.fig.sf .crv.dash, .fig.sf .ln.dash { stroke-dasharray: 6 5; }
.fig.sf .shade { fill: var(--primary); opacity: .16; stroke: none; }
.fig.sf .sbar { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 1.6; }
.fig.sf .fl { fill: color-mix(in srgb, var(--primary-soft) 60%, transparent); stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; }
.fig.sf .fl2 { fill: color-mix(in srgb, var(--primary-soft) 70%, var(--primary) 30%); stroke: var(--primary); stroke-width: 2; stroke-linejoin: round; }
.fig.sf .ln { fill: none; stroke: var(--fg-2); stroke-width: 1.6; }
.fig.sf .ln2 { fill: none; stroke: var(--primary); stroke-width: 2.2; }
.fig.sf .ln2.hole { fill: var(--surface); }
.fig.sf .dot { fill: var(--primary); }
.fig.sf .em { fill: var(--primary); font-weight: 700; }
.fig.sf .sbar.s2 { fill: var(--primary); }
.fig.sf .sbar.s3 { fill: var(--lamp); stroke: var(--lamp); }
.fig.sf .mk1 { fill: var(--primary); }
.fig.sf .mk2 { fill: var(--surface); stroke: var(--lamp); stroke-width: 2; }
.fig.sf .mk3 { fill: var(--go); }
.fig.sf .sf-ttl { max-width: 360px; margin: 0 auto 6px; font-weight: 600; font-size: 14px; text-align: center; color: var(--fg); }
.fig.sf .sf-key { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; max-width: 360px; margin: 6px auto 0; font-size: 13px; color: var(--fg); }
.fig.sf .sf-key span { display: inline-flex; align-items: center; gap: 6px; }
.fig.sf .sf-key i { width: 14px; height: 14px; border-radius: 3px; border: 1.6px solid var(--primary); background: var(--primary-soft); }
.fig.sf .sf-key i.k2 { background: var(--primary); }
.fig.sf .sf-key i.k3 { background: var(--lamp); border-color: var(--lamp); }
.fig.sf .sf-key i.kl { height: 0; border-width: 1.5px 0 0; border-radius: 0; width: 22px; background: none; }
.fig.sf .sf-key i.kl.k2 { border-color: var(--lamp); border-top-style: dashed; }
.bubble.ai { white-space: pre-wrap; }
.bubble.err { background: var(--warn-soft, var(--surface-2)); }
.essay-pick { text-align: left; cursor: pointer; font: inherit; color: inherit; }
@media (hover: hover) { .essay-pick:hover { border-color: var(--primary); } }
.essay-prompt blockquote.view { margin: 0; padding: 12px 14px; border-left: 3px solid var(--primary); background: var(--surface-2); border-radius: 0 10px 10px 0; display: grid; gap: 6px; }
.essay-prompt blockquote.view p { margin: 0; font-family: var(--f-text); font-size: 17px; line-height: 1.5; }
.essay-prompt cite { font-style: normal; font-size: 12.5px; color: var(--fg-3); }
.essay-box { min-height: 360px; font-family: var(--f-text); font-size: 18px; line-height: 1.6; resize: vertical; }
.essay-text { font-family: var(--f-text); font-size: 17px; line-height: 1.6; max-height: 640px; overflow: auto; }
.essay-text p { margin: 0 0 .8em; }
.essay-review { align-items: start; }
.rub { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
#es-clock.warn { background: var(--warn-soft); color: var(--warn); }
#es-clock.bad { background: var(--bad-soft); color: var(--bad); }
.plan-cfg { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: end; }
.plan-cfg .field { min-width: 0; }
.plan-week { display: grid; gap: 8px; }
.pday { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pday.off { background: transparent; border-style: dashed; }
.pday.test { border-color: var(--primary); }
.pday.now { box-shadow: 0 0 0 2px var(--lamp); }
.pday .pd { display: grid; justify-items: center; line-height: 1.1; }
.pday .pd b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-3); }
.pday .pd span { font: 600 22px var(--f-display); }
.pday .pt { font-size: 14.5px; }
@media (max-width: 520px) { .pday { grid-template-columns: 44px minmax(0, 1fr); } .pday .pa { grid-column: 2; } }
.rev-q.ok { border-color: var(--good); }
.rev-q.fix { border-color: var(--lamp); }
.rev-passage .ptext { max-height: 360px; overflow: auto; }

/* ---------- v4: Ready for 120 polish ---------- */
.scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 6px; max-width: 460px; margin-top: 4px; }
.scale > div { display: grid; gap: 4px; font-size: 12px; color: var(--fg-3); }
.scale > div > i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 70%, var(--lamp))); }
.scale > div b { font: 600 15px/1 var(--f-display); color: var(--fg); }
.scale > div > span, .scale > div > b { display: flex; justify-content: space-between; }
.scale .tot { padding-left: 10px; border-left: 1px solid var(--line-strong); text-align: right; }
.scale .tot b { font-size: 22px; color: var(--primary); justify-content: end; }
.stats-band { background: var(--primary); color: var(--primary-ink); }
.stats-band .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-block: 26px; }
.stats-band div > b { display: block; font: 600 34px/1.05 var(--f-display); letter-spacing: -.02em; }
.stats-band div > span { font-size: 14px; opacity: .85; }
@media (max-width: 700px) { .stats-band .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-band div > b { font-size: 28px; } }
.authors { border-bottom: 1px solid var(--line); background: var(--surface); }
.authors .wrap { display: grid; gap: 10px; padding-block: 22px; justify-items: center; text-align: center; }
.authors .names { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font: italic 500 19px/1.3 var(--f-display); color: var(--fg-2); }
.band .feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px; }
.band.alt .feat { background: var(--bg); }
.card { transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) { .action:hover { box-shadow: var(--shadow); border-color: var(--primary); } }
.ring .goal { stroke: var(--fg); stroke-width: 3; }

/* ---------- v5: the owl ---------- */
:root { --owl-body: #4a3424; --owl-wing: #3a281b; --owl-belly: #6e5139; --owl-eye: #fbf5ea; --owl-pupil: #4a3424; --owl-glass: #e79b2e; --owl-cap: #171c33; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --owl-body: #fbf5ea; --owl-wing: #e6d7bd; --owl-belly: #efe3cc; --owl-eye: #4a3424; --owl-pupil: #fbf5ea; --owl-glass: #f4b652; --owl-cap: #0e1222; } }
:root[data-theme="dark"] { --owl-body: #fbf5ea; --owl-wing: #e6d7bd; --owl-belly: #efe3cc; --owl-eye: #4a3424; --owl-pupil: #fbf5ea; --owl-glass: #f4b652; --owl-cap: #0e1222; }
.owl { overflow: visible; flex: none; }
.owl .body { fill: var(--owl-body); }
.owl .wl path, .owl .wr path { fill: var(--owl-wing); }
.owl .belly { fill: var(--owl-belly); }
.owl .chev { fill: none; stroke: var(--owl-body); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }
.owl .feet { fill: none; stroke: var(--owl-glass); stroke-width: 3; stroke-linecap: round; }
.owl .eye { fill: var(--owl-eye); }
.owl .pupil { fill: var(--owl-pupil); }
.owl .glint { fill: var(--owl-eye); }
.owl .glass { fill: none; stroke: var(--owl-glass); stroke-width: 4; }
.owl .beak { fill: var(--owl-glass); }
.owl .lid { fill: var(--owl-body); transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 0; }
.owl .eh, .owl .ec { fill: none; stroke: var(--owl-pupil); stroke-width: 4; stroke-linecap: round; }
.owl .brow { fill: none; stroke: var(--owl-glass); stroke-width: 3; stroke-linecap: round; }
.owl .cap path:first-child { fill: var(--owl-cap); }
.owl .tassel { stroke: var(--owl-glass); stroke-width: 2; } .owl .tassel-end { fill: var(--owl-glass); }
.owl .blush { fill: var(--owl-glass); opacity: .45; }
.owl .zz { font: 700 14px var(--f-body); fill: var(--fg-3); } .owl .zz.z2 { font-size: 10px; }
.owl .eh, .owl .ec, .owl .brow, .owl .cap, .owl .blush, .owl .zz { display: none; }
.owl.happy .eh, .owl.cheer .eh, .owl.happy .blush, .owl.cheer .blush, .owl.cheer .cap { display: inline; }
.owl.happy .pupils, .owl.cheer .pupils, .owl.happy .lid, .owl.cheer .lid { display: none; }
.owl.sleep .ec, .owl.sleep .zz { display: inline; } .owl.sleep .pupils, .owl.sleep .lid { display: none; }
.owl.oops .brow { display: inline; } .owl.oops .pupils { transform: translate(-2px, 3px); }
.owl.think .pupils { transform: translate(1.5px, -4px); }
.owl.mark { width: 32px; height: 32px; }
.owl .wl, .owl .wr, .owl .pupils { transform-box: view-box; }
.owl .wl { transform-origin: 25px 52px; } .owl .wr { transform-origin: 75px 52px; }
.owl .pupils { transition: transform .12s ease-out; }
/* motion: only with .owl-motion on <html> (off for reduced motion or the student's switch) */
.owl-motion.owl-awake .owl:not(.happy):not(.cheer):not(.sleep) .lid { animation: owl-blink 6s infinite; }
.owl-motion.owl-awake .owl .l2 { animation-delay: .02s; }
@keyframes owl-blink { 0%, 93%, 100% { transform: scaleY(0); } 95.5% { transform: scaleY(1); } }
.owl-motion .owl.hop { animation: owl-hop .6s cubic-bezier(.3,.7,.4,1); }
@keyframes owl-hop { 0% { transform: translateY(0); } 35% { transform: translateY(-14%) scale(1.04, .97); } 70% { transform: translateY(0) scale(1.03, .96); } 100% { transform: none; } }
.owl-motion .owl.hop .wl { animation: owl-wing-l .3s 2 alternate; } .owl-motion .owl.hop .wr { animation: owl-wing-r .3s 2 alternate; }
.owl-motion .owl.tilt { animation: owl-tilt .7s ease-in-out; transform-origin: 50% 90%; }
@keyframes owl-tilt { 0%, 100% { transform: none; } 30%, 70% { transform: rotate(-12deg); } }
.owl-motion .owl.spin { animation: owl-spin .7s ease-in-out; }
@keyframes owl-spin { 0% { transform: none; } 100% { transform: rotateY(360deg); } }
.owl.flap .wl { animation: owl-wing-l .16s infinite alternate ease-in-out; } .owl.flap .wr { animation: owl-wing-r .16s infinite alternate ease-in-out; }
.owl.hover .wl { animation: owl-wing-l .34s infinite alternate ease-in-out; } .owl.hover .wr { animation: owl-wing-r .34s infinite alternate ease-in-out; }
@keyframes owl-wing-l { from { transform: rotate(10deg); } to { transform: rotate(-55deg); } }
@keyframes owl-wing-r { from { transform: rotate(-10deg); } to { transform: rotate(55deg); } }
.owl-flyer { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; width: 92px; will-change: transform; }
.owl-flyer .owl { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18)); }
.owl-flyer .fly-say { position: absolute; left: 100%; top: 6px; opacity: 0; transform: scale(.8); transition: opacity .18s, transform .18s; }
.owl-flyer.rtl .fly-say { left: auto; right: 100%; }
.owl-flyer.talk .fly-say { opacity: 1; transform: none; }
.owl-say { position: absolute; z-index: 5; background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); box-shadow: var(--shadow); border-radius: 14px; padding: 8px 12px; font: 600 14px/1.35 var(--f-body); width: max-content; max-width: 240px; white-space: normal; }
.owl-spot { position: relative; display: inline-grid; place-items: center; cursor: pointer; border-radius: 50%; }
.owl-spot > .owl-say { bottom: calc(100% + 6px); left: 50%; transform: translateX(-30%); }
.owl-spark { position: absolute; left: 46px; top: 40px; width: 7px; height: 7px; border-radius: 50%; background: var(--owl-glass); animation: owl-spark .85s ease-out forwards; }
.owl-spark:nth-child(3n) { background: var(--primary); width: 5px; height: 5px; }
@keyframes owl-spark { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.3); opacity: 0; } }
.owl-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; display: flex; gap: 10px; align-items: center; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); border-radius: 999px; padding: 6px 16px 6px 8px; font-weight: 600; }
.brand .brandmark { width: 34px; height: 34px; }
.demo { position: relative; }
.demo-owl { position: absolute; right: 150px; top: -64px; }
@media (max-width: 600px) { .demo-owl { right: auto; left: 50%; margin-left: -38px; } .demo { margin-top: 56px; } }
.demo-owl .owl-say { right: 100%; left: auto; bottom: auto; top: 0; transform: none; margin-right: 8px; }
.verdict .owl { margin-right: 2px; }
.hello-owl { justify-self: start; }
.res-owl { display: flex; gap: 14px; align-items: center; }
.owl-say { max-width: min(240px, 78vw); }
.owl-spot > .owl-say { left: 0; transform: none; }
/* the try-one owl talks from beside himself, never over his own face */
.owl-spot.demo-owl > .owl-say { left: auto; right: calc(100% + 10px); top: 6px; bottom: auto; transform: none; margin: 0; max-width: min(260px, 40vw); }
@media (max-width: 600px) {
  .owl-flyer .fly-say { left: 50%; right: auto; top: calc(100% + 4px); transform: translateX(-50%) scale(.8); }
  .owl-flyer.rtl .fly-say { left: 50%; right: auto; }
  .owl-flyer.talk .fly-say { transform: translateX(-50%); }
  .owl-spot.demo-owl > .owl-say { right: auto; left: calc(100% + 8px); top: 4px; max-width: min(200px, calc(50vw - 56px)); font-size: 13px; }
}

/* v9 admin usage bars */
.bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 140px; }
.bars .bar { display: grid; grid-template-rows: 1fr auto; gap: 4px; height: 100%; min-width: 0; }
.bars .bar i { align-self: end; display: block; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--primary); }
.bars .bar span { text-align: center; font: 500 12px var(--f-body); color: var(--fg-3); }

/* v10 today: section tip */
.sec-tip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--fg-2); }
.sec-tip span { min-width: 0; flex: 1 1 220px; }

/* v12 study buddies */
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.board li { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(60px, 120px) 44px 32px; align-items: center; gap: 10px; padding: 10px 8px; border-radius: 12px; }
.board li.me { background: var(--primary-soft); }
.board .rank { color: var(--fg-3); font-weight: 600; text-align: center; }
.board .who { display: grid; min-width: 0; font-size: 14.5px; } .board .who b, .board .who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .who .faint { font-size: 12.5px; }
.board .meter { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; } .board .meter i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.board .val { text-align: right; }
.codebox { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface-2); overflow-wrap: anywhere; font: 500 12.5px var(--f-mono); color: var(--fg-2); max-height: 6.5em; overflow-y: auto; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 480px) { .board li { grid-template-columns: 24px minmax(0, 1fr) 40px 32px; } .board .meter { display: none; } }

/* v13 notebook */
.nb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nb-item { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.nb-open { all: unset; cursor: pointer; display: grid; gap: 6px; min-width: 0; }
.nb-open:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 8px; }
.nb-q { color: var(--fg); font-size: 14.5px; line-height: 1.45; }
.nb-note { padding: 10px 12px; border-left: 3px solid var(--lamp); background: var(--surface-2); border-radius: 0 8px 8px 0; font-size: 14px; display: grid; gap: 6px; }
.nb-hl { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.mynote { padding: 12px 14px; border-left: 3px solid var(--lamp); background: var(--surface-2); border-radius: 0 10px 10px 0; display: grid; gap: 6px; font-size: 14.5px; }

/* v14 word quiz */
.wq-ctx { margin: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--line-strong); font: 400 18px/1.6 var(--f-text); color: var(--fg); }
.wq-ctx .qw { color: var(--primary); }
.wq-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wq-sum li { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr); gap: 12px; padding: 8px 10px; border-radius: 10px; font-size: 14.5px; }
.wq-sum li.ok { background: var(--good-soft); } .wq-sum li.no { background: var(--bad-soft, var(--surface-2)); }

/* v15 progress story */
.story-lede { margin: 0; font: 400 19px/1.55 var(--f-text); color: var(--fg); max-width: 68ch; }
.story-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.story-kpis > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.story-kpis b { font-size: 22px; } .story-kpis span { font-size: 13px; color: var(--fg-3); }
.dl { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--fg-3); } .dl.up { color: var(--good); } .dl.down { color: var(--bad); }
.story-h { font-size: 14px; } .story-list { margin: 6px 0 8px; padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; }
.story-test { padding-top: 10px; border-top: 1px solid var(--line); font-size: 14.5px; }
@media (max-width: 560px) { .story-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lg { display: inline-flex; align-items: center; gap: 6px; } .lg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* v17 reading comfort */
html.ts-1 .pane .inner, html.ts-1 .demo, html.ts-1 .rev-passage, html.ts-1 .wq-ctx, html.ts-1 .flash { zoom: 1.12; }
html.ts-2 .pane .inner, html.ts-2 .demo, html.ts-2 .rev-passage, html.ts-2 .wq-ctx, html.ts-2 .flash { zoom: 1.25; }
html.lh-roomy .ptext, html.lh-roomy .q-stem, html.lh-roomy .exp { line-height: 1.85; letter-spacing: .012em; word-spacing: .06em; }
html.lh-roomy .choice { line-height: 1.6; letter-spacing: .012em; }
html.font-easy { --f-text: "Atkinson Hyperlegible", "Plus Jakarta Sans", system-ui, sans-serif; --f-body: "Atkinson Hyperlegible", "Plus Jakarta Sans", system-ui, sans-serif; }
.comfort { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px 4px; display: grid; gap: 12px; margin: 0; min-width: 0; }
.comfort legend { padding: 0 6px; font-weight: 700; font-size: 14px; }
.comfort .lbl { font-weight: 600; font-size: 14px; }
.comfort .chip { position: relative; } .comfort .chip input { position: absolute; opacity: 0; pointer-events: none; }
.comfort .chip:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); color: var(--fg); font-weight: 600; }
.comfort .chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* v18 keyboard */
.kbd-hint { display: none; } @media (hover: hover) and (min-width: 900px) { .kbd-hint { display: inline-flex; } }
kbd { font: 600 12.5px var(--f-mono); padding: 2px 7px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface-2); white-space: nowrap; }
.kbd-table td { padding: 8px 6px; }

/* v19 guide */
.lede-sm { margin: 0; font-size: 17px; color: var(--fg-2); max-width: 62ch; }
.guide-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.tips { margin: 0; padding: 0; list-style: none; counter-reset: t; display: grid; gap: 12px; }
.tips li { counter-increment: t; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; }
.tips li::before { content: counter(t); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-weight: 700; font-size: 14px; }
.tips li span { color: var(--fg-2); font-size: 14.5px; }
.guide-cta { border-color: var(--primary); }
.gsecs { display: grid; gap: 0; }
.gsec { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.gsec:first-child { border-top: 0; padding-top: 4px; }
.gsec-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; align-items: baseline; }
.gsec-h .faint { font-size: 13.5px; }
.gsec p { margin: 0; color: var(--fg-2); font-size: 14.5px; }
/* v20 share */
.sh-img { aspect-ratio: 1; width: 100%; max-width: 100%; border-radius: 14px; background: #11152b; }
.sh-img img, .sh-img svg { display: block; width: 100%; height: auto; border-radius: 14px; }
.sh-text { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--fg-2); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-height: 40px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
/* v21 onboarding */
.sheet.ob { width: min(560px, 100%); }
.ob-dots { display: flex; gap: 6px; }
.ob-dots i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); }
.ob-dots i.on { background: var(--primary); }
.ob-dots i.done { background: color-mix(in srgb, var(--primary) 55%, var(--line)); }
.ob-head { display: flex; gap: 14px; align-items: center; }
.ob-head .owl-spot { flex: 0 0 auto; }
.ob-opts { display: grid; gap: 8px; }
.ob-grid { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.ob-opt { display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
.ob-grid .ob-opt { text-align: center; justify-items: center; }
.ob-grid .ob-opt b { font-size: 20px; }
.ob-opt span { font-size: 13px; color: var(--fg-2); }
.ob-opt[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
@media (hover: hover) { .ob-opt:hover { border-color: var(--line-strong); } }
.ob-nav { align-items: center; }
.ob-sum { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
/* v22 parent report */
.pr { padding: 28px; }
@media (max-width: 47.99rem) { .pr { padding: 20px 16px; } }
.pr-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.pr-day { display: grid; justify-items: center; gap: 4px; font-size: 12.5px; color: var(--fg-3); }
.pr-day b { font-size: 14px; color: var(--fg-2); }
.pr-day.on b { color: var(--fg); }
.pr-bar { width: 100%; max-width: 44px; height: 72px; background: var(--surface-2); border-radius: 8px; display: flex; align-items: flex-end; overflow: hidden; }
.pr-bar i { display: block; width: 100%; background: var(--primary); border-radius: 8px 8px 0 0; }
.pr-two { gap: 10px; }
.pr-box { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--line-strong); font-size: 14.5px; }
.pr-box.good { border-left-color: var(--good); }
.pr-box.warn { border-left-color: var(--warn); }
.pr-hist { list-style: none; margin: 0; padding: 0; display: grid; }
.pr-hist li { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.pr-hist li:first-child { border-top: 0; }
.pr-ask { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); border-radius: 12px; padding: 14px 16px; display: grid; gap: 6px; }
.pr-ask p { margin: 0; }
.pr .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.pr-secs { display: grid; }
.pr-sec { display: grid; grid-template-columns: minmax(0, 1fr) 80px 56px 92px; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.pr-sec > span:not(:first-child) { text-align: right; }
.pr-sec-h { border-top: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); font-weight: 600; }
@media (max-width: 47.99rem) { .pr-sec { grid-template-columns: minmax(0, 1fr) 34px 44px 72px; gap: 8px; font-size: 14px; } .pr-sec-h { font-size: 10.5px; letter-spacing: .02em; } .w-lg { display: none; } }
@media (min-width: 48rem) { .w-sm { display: none; } }
/* v23 classes */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.err { margin: 0; color: var(--bad); font-size: 13.5px; }
.err:empty { display: none; }
.cls-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cls-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.cls-list li:first-child { border-top: 0; }
.cls-table td, .cls-table th { white-space: nowrap; }
.cls-table td:nth-last-child(3) { white-space: normal; min-width: 160px; }
.stack > *, .stack-lg > * { min-width: 0; }
.stack > .seg { justify-self: start; max-width: 100%; }
/* v25 editor */
.ed-ch { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; }
.ed-key { display: grid; justify-items: center; gap: 4px; padding-top: 6px; cursor: pointer; }
.ed-key input { width: 18px; height: 18px; accent-color: var(--good); margin: 0; }
.ed-key input:checked + .let { background: var(--good); color: var(--surface); border-color: var(--good); }
.ed-key .let { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-weight: 700; font-size: 13px; color: var(--fg-2); }
.linkbtn.inl { display: inline; padding: 0; min-height: 0; font: inherit; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.linkbtn.skl { padding: 4px 0; min-height: 32px; text-align: left; justify-content: flex-start; }
/* v27 footer */
.foot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 24px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.foot-brand { display: grid; gap: 6px; align-content: start; color: var(--fg-3); max-width: 30ch; grid-column: 1 / -1; }
.foot-col a.linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
.foot-col .foot-soon { color: var(--fg-3); cursor: default; }
@media (min-width: 75rem) { .foot-grid { grid-template-columns: 1.3fr repeat(6, minmax(0, 1fr)); } .foot-brand { grid-column: auto; } }
.foot-brand b { color: var(--fg); font: 600 16px var(--f-display); }
.foot-col { display: grid; gap: 2px; align-content: start; justify-items: start; }
.foot-col > b { color: var(--fg-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.foot-col .linkbtn { padding: 4px 0; min-height: 32px; font-size: 14px; color: var(--fg-2); text-align: left; }
@media (max-width: 47.99rem) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }
.wk-mini { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.wk-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 64px; }
.wk-bars > div { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: 4px; font-size: 11.5px; color: var(--fg-3); }
.wk-bars > div::before { content: none; }
.wk-bars i { align-self: end; display: block; width: 100%; max-width: 26px; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--primary) 70%, var(--surface)); }
@media (max-width: 47.99rem) { .pfoot { gap: 4px; } .pfoot .btn.sm { padding: 0 12px; } .pfoot .btn.primary { padding: 0 16px; } }
/* v29 home */
.who { display: grid; gap: 8px; align-content: start; padding: 22px; }
.who h3 { margin: 0; font: 600 19px/1.25 var(--f-display); text-wrap: balance; }
.who p { margin: 0; font-size: 14.5px; }
.who .linkbtn { justify-self: start; padding: 4px 0; font-weight: 600; color: var(--primary); }

/* v33 skill mastery */
.ms-secs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 700px) { .ms-secs { grid-template-columns: minmax(0, 1fr); } }
.ms-sec { display: grid; gap: 8px; }
.ms-strip { display: flex; gap: 3px; flex-wrap: wrap; }
.ms-strip i, .ms-key i { display: block; width: 14px; height: 14px; border-radius: 4px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.ms-strip i.l1, .ms-key i.l1, .ms-pips i.on.l1 { background: color-mix(in srgb, var(--lamp) 45%, var(--surface)); border-color: var(--lamp); }
.ms-strip i.l2, .ms-key i.l2, .ms-pips i.on.l2 { background: color-mix(in srgb, var(--primary) 35%, var(--surface)); border-color: var(--primary); }
.ms-strip i.l3, .ms-key i.l3, .ms-pips i.on.l3 { background: color-mix(in srgb, var(--primary) 75%, var(--surface)); border-color: var(--primary); }
.ms-strip i.l4, .ms-key i.l4, .ms-pips i.on.l4 { background: var(--good); border-color: var(--good); }
.ms-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--fg-2); }
.ms-key { display: inline-flex; align-items: center; gap: 6px; } .ms-key b { color: var(--fg); }
.ms-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1.2 var(--f-body); color: var(--fg-2); white-space: nowrap; }
.ms-badge.l4 { color: var(--good); }
.ms-pips { display: inline-flex; gap: 2px; } .ms-pips i { display: block; width: 6px; height: 12px; border-radius: 2px; background: var(--line-strong); }
.ms-near { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
@media (max-width: 520px) { .ms-near { grid-template-columns: minmax(0, 1fr) auto; } .ms-near .ms-badge { grid-column: 1; grid-row: 2; } .ms-near .btn { grid-row: 1 / 3; grid-column: 2; } }
.ms-how summary { cursor: pointer; font-weight: 600; font-size: 14px; min-height: 32px; display: flex; align-items: center; }
.ms-how ul { margin: 8px 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 14px; }
.ms-how li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; align-items: start; }
@media (max-width: 520px) { .ms-how li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* v34 lessons */
.ls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 860px) { .ls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ls-grid { grid-template-columns: minmax(0, 1fr); } }
.ls-card { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; color: inherit; min-height: 120px; }
.ls-card > span:not(.ms-badge) { color: var(--fg-2); font-size: 14px; }
.ls-card .ms-badge { margin-top: auto; }
@media (hover: hover) { .ls-card:hover { border-color: var(--primary); box-shadow: var(--shadow); } }
.ls-what { font-size: 16px; line-height: 1.6; }
.ls-how { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.ls-how li::marker { color: var(--primary); font-weight: 700; }
.ls-ex { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); }
.ls-ex p { margin: 0; font-family: var(--f-text); font-size: 17px; line-height: 1.55; }
.ls-ex p.muted { font-family: var(--f-body); font-size: 14.5px; }
.ls-ex u { text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ls-ex .pill { font-family: var(--f-body); vertical-align: 2px; margin-right: 4px; }
.ls-link { justify-self: start; }

/* v37 pace chart and answer changes */
.pc-sec { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.pc-svg { width: 100%; max-width: 600px; height: auto; display: block; }
.pc-svg .gl { stroke: var(--line); stroke-dasharray: 2 4; }
.pc-svg text { fill: var(--fg-3); font: 500 11px var(--f-body); }
.pc-ideal { stroke: var(--fg-3); stroke-width: 1.5; stroke-dasharray: 6 5; }
.pc-line { fill: none; stroke: var(--primary); stroke-width: 2.2; stroke-linejoin: round; }
.pc-dot.ok { fill: var(--good); } .pc-dot.no { fill: var(--bad); } .pc-dot.skip { fill: var(--surface); stroke: var(--fg-3); stroke-width: 1.5; }
.pc-key-ideal { background: none !important; border-top: 2px dashed var(--fg-3); border-radius: 0 !important; height: 0 !important; width: 14px !important; }
.pc-slow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pc-slow .chip, .cg-row .chip { min-height: 32px; font-variant-numeric: tabular-nums; }
.cg { display: grid; gap: 8px; }
.cg-row { display: grid; grid-template-columns: 130px 32px minmax(0, 1fr); gap: 10px; align-items: center; }
@media (max-width: 520px) { .cg-row { grid-template-columns: auto 1fr; } .cg-row > .row { grid-column: 1 / -1; } }

/* v38 spaced review */
.srs-card.due { border-color: var(--lamp); }
.srs-boxes { display: flex; gap: 4px; }
.srs-boxes span { display: grid; justify-items: center; min-width: 40px; padding: 6px 4px; border-radius: 8px; background: var(--surface-2); }
.srs-boxes span.done { background: var(--good-soft); color: var(--good); }
.srs-boxes b { font-size: 15px; line-height: 1.1; } .srs-boxes i { font-style: normal; font-size: 12px; color: var(--fg-3); }
.srs-boxes span.done i { color: var(--good); }

/* v39 today's session */
.sess { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sess li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.sess li:first-child { border-top: 0; }
.sess-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font: 700 13px/1 var(--f-body); }
.sess-n svg { width: 15px; height: 15px; }
.sess li.done .sess-n { background: var(--good); color: var(--surface); }
.sess li.done > .stack > span:first-child { color: var(--fg-3); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* v40 points on the table */
.pt-list { display: grid; }
.pt-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 52px auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pt-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .pt-bar i { display: block; height: 100%; border-radius: inherit; background: var(--lamp); }
.pt-n { text-align: right; font-size: 14px; }
@media (max-width: 560px) { .pt-row { grid-template-columns: minmax(0, 1fr) auto; } .pt-bar { grid-column: 1; grid-row: 2; } .pt-n { grid-column: 2; grid-row: 2; } .pt-row .btn { grid-column: 2; grid-row: 1; } }

/* v41 evidence */
.ptext mark.ev { background: color-mix(in srgb, var(--good) 22%, transparent); color: inherit; border-bottom: 2px solid var(--good); border-radius: 2px; padding: 0 1px; }
.ev-btn { justify-self: start; border-color: var(--good); }

/* v42 accounts */
#acct-slot { display: contents; }
.acct-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--primary); color: var(--primary-ink); font-weight: 700; cursor: pointer; flex: none; margin-left: 8px; }
.acct-in { margin-left: 4px; }
.ac-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ac-row > .faint { min-width: 90px; }
.ac-or { display: flex; align-items: center; gap: 10px; color: var(--fg-3); font-size: 13px; } .ac-or::before, .ac-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* v43: with the account button the phone header gets tight; keep the name on one line */
@media (max-width: 430px) { .brand b { white-space: nowrap; } .brand small { display: none; } .top:has(.acct-btn, .acct-in) .cta { display: none; } .top .acct-btn, .top .acct-in { margin-left: auto; } }
/* v45: the owner's dashboard */
.fbar { display: block; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.fbar i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
/* v46: the policy links show only on the real site */
.foot-legal { display: none; } .on-site .foot-legal { display: block; }
/* v49: the save-your-progress card */
.nudge { display: flex; gap: 14px; align-items: flex-start; border-color: var(--primary); }
.nudge-owl { flex: none; }

/* ---------- 1.2.0 game layer: HUD, answer feedback, celebrations, flight log ---------- */
.hud { display: flex; gap: 6px; align-items: center; margin-left: 8px; }
.top .nav + .hud { margin-left: 4px; }
.g-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; font-weight: 800; font-size: 15px; }
.g-chip b { font-weight: 800; }
.g-of { font-size: 12px; font-weight: 600; color: var(--fg-3); }
.g-flame { width: 20px; height: 20px; fill: var(--line-strong); }
.g-streak.on .g-flame, .g-t-streak.on .g-flame, .g-stat .g-flame, .g-combo .g-flame, .g-toast .g-flame { fill: var(--streak); }
.g-gem { width: 18px; height: 18px; fill: var(--gem); } .g-gem .g-gem-l { fill: none; stroke: color-mix(in srgb, var(--surface) 55%, transparent); stroke-width: 1.2; }
.g-ring { transform: rotate(-90deg); flex: none; }
.g-ring circle { fill: none; stroke-width: 4; }
.g-ring-bg { stroke: var(--surface-2); } .g-ring-fg { stroke: var(--xp); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.g-goal.done .g-ring-fg { stroke: var(--go); }
@media (hover: hover) { .g-chip:hover { border-color: var(--primary); } }
.hud:empty { display: none; } .hud:not(:empty) ~ .cta { display: none; }
.nav button { white-space: nowrap; } .brand b, .brand small { white-space: nowrap; }
@media (max-width: 1180px) { .g-of { display: none; } .nav button { padding: 8px 9px; } }
@media (max-width: 860px) { .hud { margin-left: auto; gap: 4px; } .g-chip { padding: 0 8px; min-height: 36px; font-size: 14px; } .g-of { display: none; } }
@media (max-width: 430px) { .g-gems { display: none; } .brand { gap: 7px; } .top .wrap { gap: 8px; } }
@media (max-width: 340px) { .brand small { display: none; } }

.choice.g-hit { animation: g-pop .32s ease-out; }
.choice.g-miss { animation: g-shake .34s ease-in-out; }
@keyframes g-pop { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
@keyframes g-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.g-float { position: fixed; z-index: 60; transform: translate(-50%, 0); pointer-events: none; font: 800 18px/1 var(--f-display); padding: 6px 12px; border-radius: 999px; background: var(--xp); color: #2a1f00; box-shadow: 0 6px 18px rgba(0,0,0,.18); animation: g-rise 1.2s ease-out forwards; white-space: nowrap; }
.g-float.try { background: var(--surface-2); color: var(--fg-2); font-size: 15px; }
@keyframes g-rise { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, -6px) scale(1.06); } 70% { opacity: 1; transform: translate(-50%, -34px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -52px) scale(.96); } }
.g-spark { position: fixed; z-index: 60; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: var(--go); pointer-events: none; animation: g-spark .65s ease-out forwards; }
.g-spark:nth-child(3n) { background: var(--xp); } .g-spark:nth-child(3n+1) { background: var(--primary); border-radius: 50%; }
@keyframes g-spark { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(160deg) scale(.4); } }
.g-combo { display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 999px; background: var(--streak-soft); color: var(--fg); font-size: 13px; font-weight: 800; white-space: nowrap; margin-left: auto; }
.g-combo .g-flame { width: 16px; height: 16px; }
.g-combo.pop { animation: g-pop .3s ease-out; }
@media (max-width: 520px) { .g-combo span { display: none; } }

.g-sheet { text-align: center; }
.g-cel { display: grid; justify-items: center; gap: 10px; padding: 8px 0 4px; }
.g-cel-h { font: 800 26px/1.15 var(--f-display); letter-spacing: -.01em; }
.g-cel .g-big { width: 100%; max-width: 320px; min-height: 50px; font-size: 16px; margin-top: 6px; }
.g-cel-row { display: flex; gap: 12px; justify-content: center; }
.g-stat { display: grid; justify-items: center; gap: 2px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); min-width: 92px; }
.g-stat b { font: 800 22px/1 var(--f-display); }
.g-stat span { font-size: 12px; color: var(--fg-2); text-align: center; }
.g-stat .g-flame { width: 24px; height: 24px; } .g-stat .g-gem { width: 22px; height: 22px; }
.g-stat.big { min-width: 0; flex: 1; }
.g-head { display: flex; gap: 8px; }
.g-lv { display: grid; place-items: center; width: 110px; height: 110px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--xp-soft), var(--xp) 75%); box-shadow: 0 6px 0 color-mix(in srgb, var(--xp) 60%, #000), 0 0 0 6px var(--xp-soft); color: #2a1f00; }
.g-lv span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: -18px; }
.g-lv b { font: 800 46px/1 var(--f-display); }
.owl-motion .g-cel.level .g-lv, .owl-motion .g-cel.goal .g-cel-owl, .owl-motion .g-chest.open { animation: g-in .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes g-in { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes g-lid { to { transform: rotate(-14deg) translateY(-8px); } }
.g-quest { display: grid; grid-template-columns: 1fr 90px auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); text-align: left; }
.g-quest.done { border-color: var(--go); background: color-mix(in srgb, var(--go) 10%, transparent); }
.g-qbar { height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.g-qbar i { display: block; height: 100%; background: var(--xp); border-radius: 99px; }
.g-quest.done .g-qbar i { background: var(--go); }
.g-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 120px; }
.g-wd { display: grid; grid-template-rows: 1fr auto auto; justify-items: center; gap: 2px; font-size: 12px; color: var(--fg-3); }
.g-wd i { align-self: end; width: 100%; max-width: 30px; border-radius: 6px 6px 3px 3px; background: var(--line-strong); }
.g-wd.hit i { background: var(--xp); }
.g-wd b { font-size: 11px; color: var(--fg-2); }
.g-goals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.g-goalopt { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); cursor: pointer; font-size: 13px; }
.g-goalopt b { font-size: 15px; }
.g-goalopt.on { border-color: var(--primary); background: var(--primary-soft); }
.g-toast { position: fixed; z-index: 70; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: flex; gap: 8px; align-items: center; padding: 10px 16px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 700; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.g-toast .g-flame { width: 20px; height: 20px; }
.g-res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: center; background: linear-gradient(135deg, var(--xp-soft), var(--primary-soft)); }
.g-res-i { display: grid; gap: 6px; justify-items: start; }
.g-res-i > b { font: 800 30px/1 var(--f-display); }
.g-res .g-flame { width: 24px; height: 24px; fill: var(--streak); }
@media (max-width: 600px) { .g-res { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .choice.g-hit, .choice.g-miss, .g-combo.pop, .g-chest.open .ch-l { animation: none; } }
.g-today { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g-tile { display: grid; gap: 6px; align-content: start; text-align: left; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; box-shadow: 0 3px 0 var(--line); min-width: 0; }
.g-t-top { display: flex; align-items: center; gap: 8px; }
.g-t-top b { font: 800 30px/1 var(--f-display); } .g-t-top small { font-size: 15px; color: var(--fg-3); font-weight: 700; }
.g-t-streak .g-flame { width: 30px; height: 30px; }
.g-t-streak.on { background: linear-gradient(160deg, var(--streak-soft), var(--surface) 70%); border-color: color-mix(in srgb, var(--streak) 45%, var(--line)); }
.g-t-l { font-size: 13px; color: var(--fg-2); font-weight: 600; } .g-t-s { font-size: 12px; color: var(--fg-3); }
.g-dots { display: flex; gap: 4px; }
.g-dots i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 10px/1 var(--f-body); font-style: normal; background: var(--surface-2); color: var(--fg-3); }
.g-dots i.on { background: var(--streak); color: #fff; } .g-dots i.goal { box-shadow: 0 0 0 2px var(--xp); }
.g-t-goal.done { background: linear-gradient(160deg, color-mix(in srgb, var(--go) 14%, var(--surface)), var(--surface) 70%); }
.g-lvbar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .g-lvbar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--gem)); }
.g-t-quests { grid-column: 1 / -1; cursor: default; }
.g-mq { display: grid; grid-template-columns: 1fr 34%; gap: 10px; align-items: center; font-size: 14px; }
.g-mq.done span:first-child { text-decoration: line-through; color: var(--fg-3); }
.g-mq.done .g-qbar i { background: var(--go); }
@media (hover: hover) { button.g-tile:hover { border-color: var(--primary); } }

/* ---------- 1.3.0 the hub and the test worlds ---------- */
:root { --w-clt: #5040e0; --w-sat: #1d64e0; --w-act: #d63a2f; --w-psat: #0d8a78; --w-kid: #e0457f; --hub-ink: #ffffff; }
.w-badge { display: inline-grid; place-items: center; flex: none; border-radius: 28%; color: #fff; font: 800 18px/1 var(--f-display); letter-spacing: -.02em; box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.w-clt { --wc: var(--w-clt); } .w-sat { --wc: var(--w-sat); } .w-act { --wc: var(--w-act); } .w-psat { --wc: var(--w-psat); } .w-kid { --wc: var(--w-kid); }
.w-badge.w-clt, .w-badge.w-sat, .w-badge.w-act, .w-badge.w-psat, .w-badge.w-kid { background: var(--wc); }
.w-badge.w-kid { background: linear-gradient(135deg, #ff7aa8, #ffb63d); }
.w-badge.w-spl { background: #0f7a6c; } /* 1.62.0: spelling in the switcher */
.w-badge.w-hubb { background: var(--primary-soft); box-shadow: none; }
.w-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--wc, var(--primary)); color: #fff; font: 800 13px/1 var(--f-display); letter-spacing: .02em; cursor: pointer; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); flex: none; }
.nav-sp { margin-left: auto; }
body:not(.world-clt) main { padding-bottom: 0; }

.hub { display: block; }
.h-hero { background: radial-gradient(900px 420px at 85% 10%, color-mix(in srgb, var(--gem) 35%, transparent), transparent 65%), radial-gradient(700px 400px at 10% 100%, color-mix(in srgb, var(--w-kid) 28%, transparent), transparent 60%), linear-gradient(135deg, #3a2bc4, #5a3fe6 55%, #2c1f9a); color: var(--hub-ink); overflow: hidden; }
.h-hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px; align-items: center; padding-block: 56px 64px; }
.h-eye { color: #d9d4ff; }
.h-title { font: 800 clamp(44px, 7vw, 78px)/.98 var(--f-display); letter-spacing: -.035em; margin: 0; }
.h-title span { background: linear-gradient(90deg, #ffd23f, #ff9d3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.h-lede { font-size: 18px; line-height: 1.55; color: #ece9ff; max-width: 34em; }
.btn.h-go { background: #ffd23f; border-color: #ffd23f; color: #241a00; box-shadow: 0 4px 0 #c99a00; min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn.h-go:active { box-shadow: 0 1px 0 #c99a00; }
@media (hover: hover) { .btn.h-go:hover { background: #ffdc66; border-color: #ffdc66; } .h-ghost:hover { background: rgba(255,255,255,.18); } }
.h-ghost { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; box-shadow: none; min-height: 52px; }
.h-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: #d9d4ff; }
.h-trust span::before { content: "✓ "; color: #ffd23f; font-weight: 800; }
.h-me { display: flex; gap: 10px; flex-wrap: wrap; }
.h-me-i { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); color: #fff; cursor: pointer; text-align: left; font: inherit; }
.h-me-i > :first-child { grid-row: 1 / 3; }
.h-me-i b { font: 800 20px/1.1 var(--f-display); } .h-me-i span:last-child { font-size: 12px; color: #d9d4ff; }
.h-me-i .g-flame { width: 28px; height: 28px; fill: #ff9d3d; } .h-me-i .g-ring-bg { stroke: rgba(255,255,255,.2); }
.h-lv { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ffd23f; color: #241a00; font: 800 15px/1 var(--f-display); }
.hub-sec { padding-block: 56px; }
.h-sec-t { font: 800 clamp(28px, 4vw, 40px)/1.08 var(--f-display); letter-spacing: -.025em; }
.w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.w-card { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 4px 0 var(--line); position: relative; overflow: hidden; }
.w-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--wc); }
.w-card.live { grid-column: span 2; border: 2px solid var(--wc); box-shadow: 0 5px 0 color-mix(in srgb, var(--wc) 55%, #000); background: linear-gradient(160deg, color-mix(in srgb, var(--wc) 9%, var(--surface)), var(--surface) 55%); }
.w-card-top { display: flex; gap: 12px; align-items: center; }
.w-card-top .pill { margin-left: auto; flex: none; }
.w-name { font: 800 19px/1.15 var(--f-display); }
.w-st-live { background: var(--good-soft); color: var(--good); } .w-st-next { background: var(--gem-soft); color: var(--fg); } .w-st-later { background: var(--surface-2); color: var(--fg-2); }
.w-facts { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.w-facts li { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); }
.w-live-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.w-card .btn { justify-self: start; }
.h-band { background: var(--surface); border-block: 1px solid var(--line); }
.h-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.h-feat { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 18px; background: var(--bg); border: 1px solid var(--line); }
.h-feat b { font: 800 17px/1.2 var(--f-display); } .h-feat .muted { font-size: 14px; }
.h-f-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }
.h-f-ico svg { width: 24px; height: 24px; fill: currentColor; }
.h-f-streak .h-f-ico { background: var(--streak-soft); color: var(--streak); } .h-f-xp .h-f-ico { background: var(--xp-soft); color: var(--xp); } .h-f-quest .h-f-ico { background: color-mix(in srgb, #d98a3d 18%, transparent); color: #c0702a; }
.h-f-explain .h-f-ico { background: var(--primary-soft); color: var(--primary); } .h-f-real .h-f-ico { background: var(--gem-soft); color: var(--gem); } .h-f-parent .h-f-ico { background: var(--good-soft); color: var(--good); }
.h-pass { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: center; padding: 32px; border-radius: 24px; color: #fff; background: radial-gradient(500px 260px at 100% 0%, rgba(255,210,63,.35), transparent 60%), linear-gradient(135deg, #22186e, #3a2bc4); }
.h-pass p { color: #e4e0ff; font-size: 15px; }
.h-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h-price { display: grid; gap: 2px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); }
.h-price b { font: 800 34px/1 var(--f-display); } .h-price span { font-size: 13px; color: #d9d4ff; }
.btn.h-pass-btn { grid-column: 1 / -1; background: #ffd23f; border-color: #ffd23f; color: #241a00; box-shadow: 0 4px 0 #c99a00; }
.h-parents { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-block: 8px 56px; }
.w-pick { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; }
.w-pick.on { border-color: var(--primary); background: var(--primary-soft); }
.w-pick:disabled { cursor: default; opacity: .7; }
@media (hover: hover) { .w-pick:not(:disabled):hover { border-color: var(--primary); } }
.w-soon { display: grid; gap: 16px; border-top: 5px solid var(--w-sat); }
.w-soon-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.w-soon-i { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: var(--surface-2); font-size: 14px; }
@media (max-width: 860px) {
  .h-hero-in { grid-template-columns: 1fr; padding-block: 36px 40px; }
  .w-card.live { grid-column: auto; } .h-feats { grid-template-columns: 1fr; } .h-pass { grid-template-columns: 1fr; padding: 24px; } .hub-sec { padding-block: 40px; }
  .w-soon-grid { grid-template-columns: 1fr; }
  .top .w-chip { margin-right: auto; }
}
@media (max-width: 430px) { .h-feats { grid-template-columns: 1fr; } .h-prices { grid-template-columns: 1fr 1fr; } }
/* small phones inside a test: the owl mark and the test chip stand in for the name, to make room for the game counters */
@media (max-width: 430px) { body:not(.world-hub) .brand > span { display: none; } }

/* 1.3.0 landing page */
.h-hero-in { grid-template-columns: 1.05fr .95fr; align-items: start; }
.h-hero .h-title { font-size: clamp(44px, 5.2vw, 64px); }
.h-tag { white-space: nowrap; }
.h-demo .demo-owl > .owl-say { left: auto !important; right: calc(100% + 10px) !important; top: 8px; }
.h-tag { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); font-size: 13px; color: #ece9ff; }
.h-tag b { color: #fff; } .h-tag i { width: 4px; height: 4px; border-radius: 50%; background: #ffd23f; }
.h-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.h-art { min-width: 0; }
.h-demo { position: relative; color: var(--fg); background: var(--surface); border-radius: 22px; padding: 22px; box-shadow: 0 24px 60px rgba(10, 5, 60, .45); display: grid; gap: 12px; margin-top: 34px; border: 0; }
.h-demo .demo-owl { position: absolute; right: 18px; top: -52px; }
.h-demo-note { font-size: 12.5px; text-align: center; }
.h-demo-res { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-weight: 600; font-size: 14px; }
.h-demo-res.ok { background: color-mix(in srgb, var(--go) 14%, var(--surface)); }
.h-xp { flex: none; padding: 5px 11px; border-radius: 999px; background: var(--xp); color: #2a1f00; font: 800 15px/1 var(--f-display); }
.owl-motion .h-demo-res .h-xp { animation: g-in .4s cubic-bezier(.2, 1.4, .4, 1); }
.h-demo-exp summary { cursor: pointer; font-weight: 700; color: var(--primary); padding: 6px 0; }
.h-demo-exp[open] { max-height: 360px; overflow: auto; }
.h-demo-go { width: 100%; min-height: 50px; font-size: 16px; }
.h-proof { background: var(--surface); border-bottom: 1px solid var(--line); }
.h-proof-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-block: 26px; }
.h-proof-in div { display: grid; gap: 2px; } .h-proof-in b { font: 800 34px/1 var(--f-display); letter-spacing: -.02em; color: var(--primary); } .h-proof-in span { font-size: 13.5px; color: var(--fg-2); }
.h-head { display: grid; gap: 6px; max-width: 760px; }
.h-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.h-step { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); }
.h-step > b { font: 800 18px/1.2 var(--f-display); } .h-step > .muted { font-size: 14px; }
.h-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font: 800 16px/1 var(--f-display); }
.h-vis { margin-top: 6px; min-height: 76px; display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.h-vis-goal span { flex: 1; display: grid; gap: 2px; padding: 8px; border-radius: 10px; border: 2px solid var(--line); font-size: 12px; color: var(--fg-2); text-align: center; } .h-vis-goal span b { font-size: 13px; color: var(--fg); }
.h-vis-goal span.on { border-color: var(--primary); background: var(--primary-soft); }
.h-vis-xp { justify-content: center; gap: 12px; } .h-vis-xp .g-combo { margin: 0; }
.h-vis-bars { align-items: end; height: 76px; padding-bottom: 10px; } .h-vis-bars i { flex: 1; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 50%, var(--gem))); }
.h-compare th:first-child { width: 22%; }
.h-save { display: grid; grid-template-columns: auto 1fr minmax(260px, 340px); gap: 24px; align-items: center; padding: 28px; border-radius: 24px; background: linear-gradient(135deg, var(--xp-soft), var(--primary-soft)); border: 1px solid var(--line); }
.h-signup { display: grid; gap: 8px; } .h-signup .btn { min-height: 48px; } .h-signup .err:empty { display: none; }
.h-faq summary { font-weight: 700; font-size: 16px; }
.h-faq { display: grid; gap: 6px; }
.h-final { background: linear-gradient(135deg, #3a2bc4, #5a3fe6 60%, #2c1f9a); color: #fff; }
.h-final-in { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding-block: 40px; }
.h-final p { color: #e4e0ff; }
.h-stick { display: none; }
@media (max-width: 860px) {
  .h-hero-in { grid-template-columns: 1fr; }
  .h-demo { margin-top: 44px; padding: 18px; } .h-demo .demo-owl svg { width: 58px; height: 58px; } .h-demo .demo-owl { top: -46px; }
  .h-proof-in { grid-template-columns: repeat(2, 1fr); } .h-proof-in b { font-size: 28px; }
  .h-steps { grid-template-columns: 1fr; } .h-save { grid-template-columns: 1fr; padding: 22px; } .h-save-owl { display: none; }
  .h-final-in { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .h-stick { display: block; position: fixed; inset: auto 0 0; z-index: 25; padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-right, 0px)); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .2s ease; }
  .h-stick.on { transform: none; } .h-stick .btn { width: 100%; }
  .h-compare { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .h-stick { transition: none; } }
.h-learn { display: grid; gap: 16px; padding-top: 0; }
.h-learn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.h-learn-i { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; border: 1px dashed var(--line-strong); background: var(--surface); }
.h-learn-i b { font: 800 16px/1 var(--f-display); } .h-learn-i.dim { opacity: .75; }

/* ---------- 1.4.0 the path through the lands, and daily puzzles ---------- */
:root { --l-lib: #9a5716; --l-lib-soft: #fbeedd; --l-scr: #0b7668; --l-scr-soft: #dcf4ef; --l-obs: #4b3fd6; --l-obs-soft: #e7e4fd; --crown: #e8a200; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --l-lib: #f0a35a; --l-lib-soft: #35261a; --l-scr: #45d0bc; --l-scr-soft: #133630; --l-obs: #a99dff; --l-obs-soft: #262058; --crown: #ffcc3f; } }
:root[data-theme="dark"] { --l-lib: #f0a35a; --l-lib-soft: #35261a; --l-scr: #45d0bc; --l-scr-soft: #133630; --l-obs: #a99dff; --l-obs-soft: #262058; --crown: #ffcc3f; }
.l-lib { --lc: var(--l-lib); --ls: var(--l-lib-soft); } .l-scr { --lc: var(--l-scr); --ls: var(--l-scr-soft); } .l-obs { --lc: var(--l-obs); --ls: var(--l-obs-soft); }
.path-page { display: grid; gap: 22px; max-width: 760px; }
.land { border-radius: 24px; background: linear-gradient(180deg, var(--ls), var(--surface) 240px); border: 1px solid var(--line); overflow: hidden; }
.land-h { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--lc); color: #fff; }
.land-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; background: rgba(255,255,255,.18); display: grid; place-items: center; }
.land-ico svg { width: 34px; height: 34px; fill: #fff; color: #fff; }
.land-tag { font: 700 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.land-h .land-tag { color: #fff; }
.land-name { font: 800 24px/1.1 var(--f-display); letter-spacing: -.02em; }
.land-blurb { font-size: 13.5px; opacity: .9; }
.land-crowns { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.18); font-weight: 800; }
.land-crowns svg { width: 18px; height: 18px; fill: #ffd23f; } .land-crowns span { opacity: .8; font-size: 13px; }
.land-h, .land-h * { color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .land-h { color: #120f2a; } :root:not([data-theme="light"]) .land-h * { color: #120f2a; } :root:not([data-theme="light"]) .land-ico svg { fill: #120f2a; } }
:root[data-theme="dark"] .land-h, :root[data-theme="dark"] .land-h * { color: #120f2a; } :root[data-theme="dark"] .land-ico svg { fill: #120f2a; }
.trail { display: grid; justify-items: center; gap: 18px; padding: 26px 16px 30px; }
.pn-wrap { position: relative; display: grid; justify-items: center; gap: 6px; transform: translateX(var(--x)); width: 150px; }
.pn { position: relative; width: 80px; height: 80px; border-radius: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.pn-in { position: absolute; inset: 9px; border-radius: 50%; display: grid; place-items: center; gap: 0; background: var(--lc); color: var(--surface); box-shadow: inset 0 -5px 0 rgba(0,0,0,.22); font: 800 20px/1 var(--f-display); }
.pn-in svg { width: 26px; height: 26px; fill: currentColor; }
.pn.c1 .pn-in, .pn.c2 .pn-in { display: flex; gap: 2px; } .pn.c1 .pn-in svg, .pn.c2 .pn-in svg, .pn.c3 .pn-in svg { width: 20px; height: 20px; fill: currentColor; } .pn-in b { font-size: 16px; }
.pn.c3 .pn-in { background: linear-gradient(135deg, #ffd23f, #f0a000); color: #2a1f00; display: flex; gap: 2px; } .pn.c3 .pn-in svg { fill: #2a1f00; }
.pn.locked .pn-in { background: var(--surface-2); color: var(--fg-3); box-shadow: inset 0 -5px 0 var(--line); }
.pn-ring { position: absolute; inset: 0; transform: rotate(-90deg); } .pn-ring circle { fill: none; stroke-width: 6; }
.pn-ring-bg { stroke: var(--line); } .pn-ring-fg { stroke: var(--crown); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.pn.locked .pn-ring-fg { stroke: transparent; }
.pn-label { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.25; color: var(--fg); }
.pn.locked + .pn-label { color: var(--fg-3); font-weight: 600; }
.pn.cur .pn-in { box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), 0 0 0 5px color-mix(in srgb, var(--lc) 30%, transparent); }
.owl-motion .pn.cur { animation: pn-hello .8s ease-out 1; }
@keyframes pn-hello { 0% { transform: scale(.85); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
.pn-owl { position: absolute; right: calc(100% - 22px); top: 8px; display: flex; align-items: center; gap: 4px; flex-direction: row-reverse; }
.pn-wrap[style*="--x:-"] .pn-owl, .pn-wrap[style*="--x:0px"] .pn-owl { right: auto; left: calc(100% - 22px); flex-direction: row; }
.pn-say { white-space: nowrap; padding: 5px 10px; border-radius: 12px; background: var(--fg); color: var(--bg); font-size: 12px; font-weight: 800; }
.gate .pn-in { inset: 4px; border-radius: 22px; background: var(--fg); color: var(--bg); } .gate { border-radius: 24px; }
.gate.passed .pn-in { background: linear-gradient(135deg, #ffd23f, #f0a000); color: #2a1f00; }
.gate.locked .pn-in { background: var(--surface-2); color: var(--fg-3); }
@media (hover: hover) { .pn:not(.locked):hover .pn-in { filter: brightness(1.08); } }
.pn:active .pn-in { transform: translateY(3px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.22); }
.pn-sheet-h { display: grid; gap: 8px; justify-items: start; }
.pn-crowns { display: flex; gap: 4px; } .pn-crowns i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); }
.pn-crowns svg { width: 18px; height: 18px; fill: var(--line-strong); } .pn-crowns i.on { background: var(--xp-soft); } .pn-crowns i.on svg { fill: var(--crown); }
@media (max-width: 520px) { .pn-wrap { width: 130px; } .pn-wrap { transform: translateX(calc(var(--x) * .75)); } .pn-owl svg { width: 38px; height: 38px; } .land-name { font-size: 20px; } .land-blurb { display: none; } }

.pz-mini { display: grid; justify-items: start; gap: 2px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; font-size: 13px; box-shadow: 0 3px 0 var(--line); }
.pz-mini b { font-size: 14px; } .pz-mini.done { border-color: var(--go); }
.pz-dots { display: flex; gap: 5px; } .pz-dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--line-strong); }
.pz-dots i.ok { background: var(--go); border-color: var(--go); } .pz-dots i.no { background: var(--bad); border-color: var(--bad); }
.pz-dots.big i { width: 20px; height: 20px; }
.pz-page { max-width: 820px; }
.pz-streak { display: grid; grid-template-columns: auto auto; column-gap: 6px; align-items: center; padding: 8px 14px; border-radius: 16px; background: var(--streak-soft); }
.pz-streak .g-flame { width: 26px; height: 26px; fill: var(--streak); grid-row: 1 / 3; } .pz-streak b { font: 800 20px/1 var(--f-display); } .pz-streak span { font-size: 12px; color: var(--fg-2); }
.pz-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pz-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; font-weight: 700; cursor: pointer; }
.pz-step b { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex: none; font-family: var(--f-display); }
.pz-step:disabled { cursor: default; } .pz-step.on { border-color: var(--primary); background: var(--primary-soft); }
.pz-step.ok b { background: var(--go); color: #fff; } .pz-step.no b { background: var(--bad); color: #fff; }
.pz-card { border-top: 5px solid var(--primary); } .pz-card.ok { border-top-color: var(--go); } .pz-card.no { border-top-color: var(--bad); }
.pz-passage { max-height: 340px; overflow: auto; padding: 4px 14px; border-radius: 14px; background: var(--surface-2); }
.pz-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding-block: 28px; }
.path-cards .pc { display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; font: inherit; color: var(--fg); box-shadow: 0 3px 0 var(--line); }
.pc-pz.done { border-color: var(--go); }
.pc-crown { display: grid; justify-items: center; gap: 2px; flex: none; width: 56px; } .pc-crown svg { width: 30px; height: 30px; fill: var(--crown); } .pc-crown b { font: 800 18px/1 var(--f-display); }
@media (hover: hover) { .path-cards .pc:hover, .pz-mini:hover, .pz-step:not(:disabled):hover { border-color: var(--primary); } }
@media (max-width: 520px) { .pz-step span { display: none; } .pz-step { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .pn.cur { animation: none; } }

/* ---------- 1.5.0 leagues and badges ---------- */
.lg-page { max-width: 680px; }
.lg-tiers { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 8px 0; }
.lg-t.dim { opacity: .35; filter: grayscale(.6); }
.owl-motion .lg-t.on .lg-shield { animation: g-in .5s cubic-bezier(.2, 1.4, .4, 1); }
.lg-title { display: grid; justify-items: center; gap: 2px; text-align: center; } .lg-title b { font: 800 26px/1.1 var(--f-display); }
.lg-table { padding: 6px; display: grid; gap: 2px; }
.lg-row { display: grid; grid-template-columns: 34px 36px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; }
.lg-row.me { background: var(--primary-soft); outline: 2px solid var(--primary); }
.lg-row.up .lg-rank { color: var(--go); } .lg-row.down .lg-rank { color: var(--bad); }
.lg-rank { font: 800 16px/1 var(--f-display); text-align: center; }
.lg-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: hsl(var(--h) 55% 48%); }
.lg-name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-st { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--fg-2); } .lg-st .g-flame { width: 16px; height: 16px; fill: var(--streak); }
.lg-xp { font-size: 14px; }
.lg-line { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; }
.lg-line::before, .lg-line::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: currentColor; opacity: .5; }
.lg-line.up { color: var(--go); } .lg-line.down { color: var(--bad); }
.lg-intro { text-align: left; }
.bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bd { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 16px 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.bd b { font: 800 15px/1.2 var(--f-display); } .bd span { font-size: 12.5px; } .bd:not(.on) b { color: var(--fg-3); }
.bd.on { box-shadow: 0 3px 0 var(--line); }
.bd-mini { display: flex; flex: none; } .bd-mini svg + svg { margin-left: -10px; }
.badge-cel .bd-big.pop { animation: g-in .5s cubic-bezier(.2, 1.4, .4, 1); }
@media (max-width: 520px) { .lg-row { grid-template-columns: 26px 32px 1fr auto; } .lg-st { display: none; } }

/* ---------- 1.6.0 the SAT world: a cleaner, pro look (blue), and a player laid out like the digital test ---------- */
:root { --sat: #1d5fd6; --sat-ink: #ffffff; --sat-soft: #e6eefc; --sat-deep: #0f2f6e; --sp-bg: #ffffff; --sp-line: #d5d9e4; --sp-fg: #111827; --sp-mark: #c2410c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sat: #7aa7ff; --sat-ink: #0b1630; --sat-soft: #17284d; --sat-deep: #c9dafd; --sp-bg: #121a2e; --sp-line: #2c3a5c; --sp-fg: #eef2fb; --sp-mark: #ffa36b; } }
:root[data-theme="dark"] { --sat: #7aa7ff; --sat-ink: #0b1630; --sat-soft: #17284d; --sat-deep: #c9dafd; --sp-bg: #121a2e; --sp-line: #2c3a5c; --sp-fg: #eef2fb; --sp-mark: #ffa36b; }
body.world-sat { --primary: var(--sat); --primary-ink: var(--sat-ink); --primary-soft: var(--sat-soft); --primary-edge: var(--sat-deep); }
.sat-w .h-page { font-size: clamp(30px, 5vw, 44px); letter-spacing: -.025em; }
.sat-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 28px; border-radius: 22px; background: linear-gradient(135deg, var(--sat-soft), var(--surface) 70%); border: 1px solid var(--line); }
.sat-hero .btn.h-go { background: var(--sat); border-color: var(--sat); color: var(--sat-ink); box-shadow: 0 4px 0 var(--sat-deep); }
.btn.h-go2 { min-height: 52px; padding: 0 20px; font-size: 16px; }
.sat-est { display: grid; gap: 8px; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.sat-est-n { font: 800 44px/1 var(--f-display); letter-spacing: -.03em; }
.sat-est.big .sat-est-n { font-size: 56px; }
.sat-est-n small { font-size: 18px; color: var(--fg-3); font-weight: 700; margin-left: 4px; }
.sat-est-secs { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--fg-2); }
.sat-est-secs b { color: var(--fg); font-size: 18px; }
.sat-need { display: grid; grid-template-columns: minmax(0, 1fr) 30% auto; gap: 10px; align-items: center; font-size: 13.5px; }
.sat-bar { display: block; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; min-width: 40px; }
.sat-bar i { display: block; height: 100%; border-radius: 99px; background: var(--sat); }
.sat-bar.none i { background: transparent; }
.sat-resume { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-color: var(--sat); }
.sat-sec { display: grid; gap: 14px; }
.sat-doms, .sat-sk-list { display: grid; gap: 8px; }
.sat-dom, .sat-sk, .sat-miss { display: grid; grid-template-columns: minmax(0, 1fr) 28%; gap: 14px; align-items: center; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; text-align: left; font: inherit; min-height: 56px; }
.sat-miss { grid-template-columns: auto minmax(0, 1fr); }
.sat-dom-t { display: grid; gap: 2px; min-width: 0; }
.sat-dom .faint, .sat-sk .faint, .sat-miss .faint { font-size: 13px; }
@media (hover: hover) { .sat-dom:hover, .sat-sk:hover, .sat-miss:hover { border-color: var(--sat); } }
.sat-mod { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.sat-kpis { display: flex; gap: 20px; flex-wrap: wrap; color: var(--fg-2); }
.sat-kpis b { display: block; font: 800 28px/1.1 var(--f-display); color: var(--fg); }
.sat-trd th { background: var(--surface-2); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-2); }
.sat-res-top { display: flex; gap: 18px; align-items: center; }
.sat-rk { display: grid; grid-template-columns: minmax(0, 1fr) 30% 44px; gap: 12px; align-items: center; font-size: 14.5px; }
.sat-qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 8px; }
.sat-qb { min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 700 15px var(--f-body); cursor: pointer; }
.sat-qb.ok { border-color: var(--good); background: var(--good-soft); }
.sat-qb.no { border-color: var(--bad); background: var(--bad-soft); }
.sat-qb.skip { border-style: dashed; }
.sat-tbl { overflow-x: auto; }
.sat-tbl table { border-collapse: collapse; font-size: 14.5px; margin: 4px 0; min-width: 60%; }
.sat-tbl caption { font-weight: 700; text-align: left; padding-bottom: 6px; font-size: 14px; }
.sat-tbl th, .sat-tbl td { border: 1px solid var(--sp-line); padding: 6px 12px; text-align: center; }
.sat-tbl thead th { background: var(--surface-2); }
.sat-eqs { display: block; text-align: center; font-size: 17px; line-height: 1.8; margin-bottom: 10px; }
.sat-notes { margin: 6px 0; padding-left: 22px; display: grid; gap: 6px; }
.sat-poem { padding-left: 18px; border-left: 3px solid var(--sp-line); font-style: italic; }
.sat-tx { margin-bottom: 0; }

/* the player */
.satp { background: var(--sp-bg); color: var(--sp-fg); }
.sp-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 2px dashed var(--sp-line); min-height: 60px; }
.sp-tl { display: grid; gap: 0; min-width: 0; }
.sp-tl b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 47.99rem) { .sp-tl b { font-size: 14px; line-height: 1.2; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } /* Oct 29: a long section name wraps to two lines beside the timer instead of cutting off */
.sp-link { border: 0; background: none; padding: 0; color: var(--sat); font: 600 13px var(--f-body); cursor: pointer; justify-self: start; min-height: 24px; }
.sp-mid { display: grid; justify-items: center; gap: 0; }
.sp-clock { font: 700 19px/1.1 var(--f-body); }
.sp-clock.hid { visibility: hidden; height: 0; }
.sp-clock.low { color: var(--bad); }
.sp-tr { display: flex; justify-content: flex-end; gap: 4px; }
.sp-tool { display: grid; justify-items: center; gap: 2px; min-width: 52px; min-height: 44px; border: 0; background: none; color: var(--sp-fg); font: 600 11.5px var(--f-body); cursor: pointer; border-radius: 8px; padding: 4px 6px; }
.sp-tool svg { width: 18px; height: 18px; }
@media (hover: hover) { .sp-tool:hover { background: var(--surface-2); } }
.sp-body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.sp-body.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sp-pane { overflow-y: auto; min-width: 0; padding: 28px max(20px, env(safe-area-inset-right, 0px)) 40px max(20px, env(safe-area-inset-left, 0px)); }
.sp-pane .inner { max-width: 680px; margin: 0 auto; display: grid; gap: 16px; }
.sp-text { border-right: 6px solid var(--sp-line); }
.sp-text .inner { font: 400 17px/1.65 var(--f-body); }
.sp-text .inner p { margin: 0; }
.sp-qhead { display: flex; align-items: center; gap: 10px; background: var(--surface-2); border-bottom: 2px dashed var(--sp-line); padding: 6px 8px 6px 0; border-radius: 4px 4px 0 0; }
.sp-num { display: grid; place-items: center; min-width: 34px; height: 34px; background: var(--sp-fg); color: var(--sp-bg); font: 700 16px var(--f-body); border-radius: 4px 0 0 0; }
.sp-mark { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--sp-fg); font: 600 14px var(--f-body); cursor: pointer; min-height: 40px; padding: 0 6px; }
.sp-mark svg path { fill: none; stroke: currentColor; stroke-width: 2; }
.sp-mark[aria-pressed="true"] { color: var(--sp-mark); }
.sp-mark[aria-pressed="true"] svg path { fill: currentColor; }
.sp-abc { border: 1.5px solid var(--sp-line); background: var(--sp-bg); color: var(--sp-fg); border-radius: 6px; min-height: 36px; min-width: 52px; font: 700 13px var(--f-body); cursor: pointer; }
.sp-abc[aria-pressed="true"] { background: var(--sat); border-color: var(--sat); color: var(--sat-ink); }
.sp-stem { font-size: 16.5px; line-height: 1.6; }
.sp-row { display: flex; gap: 8px; align-items: center; }
.sp-row .choice { flex: 1; min-width: 0; border-radius: 10px; }
.sp-ch .choice[aria-pressed="true"] { border-color: var(--sat); background: var(--sat-soft); box-shadow: 0 0 0 1.5px var(--sat); }
.sp-ch .choice[aria-pressed="true"] .let { background: var(--sat); border-color: var(--sat); color: var(--sat-ink); }
.sp-row.struck .choice .txt { text-decoration: line-through; }
.sp-x { flex: none; min-width: 48px; min-height: 44px; border: 0; background: none; color: var(--fg-2); font: 700 13px var(--f-body); cursor: pointer; border-radius: 8px; }
.sp-grid { display: grid; gap: 8px; max-width: 360px; }
.sp-grid .input { font: 700 22px var(--f-body); text-align: left; min-height: 52px; letter-spacing: .04em; }
.sp-grid.right .input { border-color: var(--good); background: var(--good-soft); }
.sp-grid.wrong .input { border-color: var(--bad); background: var(--bad-soft); }
.sp-prev { font-size: 14px; color: var(--fg-2); }
.sp-gtip { font-size: 12.5px; }
.sp-exp { display: grid; gap: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--sp-line); background: var(--surface); }
.sp-whys { display: grid; gap: 8px; }
.sp-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.sp-st { display: grid; gap: 2px; }
.sp-st b { font-size: 16px; }
.sp-st span { font-size: 12.5px; color: var(--fg-3); }
.sp-why { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14.5px; line-height: 1.55; }
.sp-why.good { background: var(--good-soft); }
.sp-why.bad { background: var(--bad-soft); }
.sp-more summary { cursor: pointer; font-weight: 650; font-size: 14px; color: var(--sat); padding: 6px 0; min-height: 32px; }
.sp-more[open] { display: grid; gap: 8px; }
.sp-steps ol { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 4px; font-size: 14.5px; }
.sp-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); border-top: 2px dashed var(--sp-line); background: var(--sp-bg); }
.sp-who { font-weight: 650; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-navbtn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 0; border-radius: 8px; background: var(--sp-fg); color: var(--sp-bg); font: 700 14px var(--f-body); cursor: pointer; white-space: nowrap; }
.sp-btns { display: flex; justify-content: flex-end; gap: 8px; }
.sp-btns .btn.primary { background: var(--sat); border-color: var(--sat); color: var(--sat-ink); box-shadow: 0 3px 0 var(--sat-deep); }
.sp-key { display: inline-flex; align-items: center; gap: 6px; }
.sp-key::before { content: ""; width: 14px; height: 14px; border-radius: 3px; border: 1.5px dashed var(--fg-3); }
.sp-key.cur::before { border: 2px solid var(--sp-fg); }
.sp-key.ans::before { background: var(--sat); border: 0; }
.sp-key.mk::before { display: none; }
.sp-key.mk svg { color: var(--sp-mark); }
.sp-navgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 10px; }
.sp-nb { position: relative; min-height: 44px; border-radius: 6px; border: 1.5px dashed var(--fg-3); background: var(--surface); color: var(--sat); font: 700 15px var(--f-body); cursor: pointer; }
.sp-nb.ans { background: var(--sat); border: 1.5px solid var(--sat); color: var(--sat-ink); }
.sp-nb.cur { outline: 2px solid var(--sp-fg); outline-offset: 2px; }
.sp-nb.mk::after { content: ""; position: absolute; top: -6px; right: -4px; width: 10px; height: 14px; background: var(--sp-mark); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.sp-ref { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.sp-ref > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 15px; }
.sp-ref .faint { font-size: 12.5px; }
@media (max-width: 47.99rem) {
  .sat-hero { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .sat-hero .row .btn { flex: 1 1 100%; }
  .sat-dom, .sat-sk { grid-template-columns: minmax(0, 1fr) 24%; }
  .sp-body.two { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .sp-body.two .sp-pane { overflow: visible; }
  .sp-text { border-right: 0; border-bottom: 6px solid var(--sp-line); padding-bottom: 20px; }
  .sp-pane { padding-top: 18px; }
  .sp-tool span { display: none; }
  .sp-tool { min-width: 44px; }
  .sp-foot { grid-template-columns: auto minmax(0, 1fr); }
  .sp-who { display: none; }
  .sp-navbtn { padding: 0 12px; }
  .sat-mod .row .btn { flex: 1 1 100%; }
}
.sp-ch .choice.right, .sp-ch .choice.right[aria-pressed="true"] { border-color: var(--good); background: var(--good-soft); box-shadow: 0 0 0 1.5px var(--good); }
.sp-ch .choice.right .let { background: var(--good); border-color: var(--good); color: var(--surface); }
.sp-ch .choice.wrong, .sp-ch .choice.wrong[aria-pressed="true"] { border-color: var(--bad); background: var(--bad-soft); box-shadow: 0 0 0 1.5px var(--bad); }
.sp-ch .choice.wrong .let { background: var(--bad); border-color: var(--bad); color: var(--surface); }

/* ---------- 1.7.0 the SAT calculator and highlighting ---------- */
:root { --c1: #2d6cdf; --c2: #d6453d; --c3: #1f9d55; --c4: #9b40c9; --calc-bg: #ffffff; --calc-grid: #e6e9f0; --calc-axis: #1f2937; --calc-label: #6b7280; --hl: #fde68a; --hl-ink: #111827; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c1: #7aa7ff; --c2: #ff8a80; --c3: #5fd598; --c4: #d39bff; --calc-bg: #0f1628; --calc-grid: #1f2a44; --calc-axis: #dbe4f7; --calc-label: #9aa8c7; --hl: #806a12; --hl-ink: #fff8d6; } }
:root[data-theme="dark"] { --c1: #7aa7ff; --c2: #ff8a80; --c3: #5fd598; --c4: #d39bff; --calc-bg: #0f1628; --calc-grid: #1f2a44; --calc-axis: #dbe4f7; --calc-label: #9aa8c7; --hl: #806a12; --hl-ink: #fff8d6; }
.calc { position: fixed; z-index: 45; right: 12px; top: 68px; bottom: 70px; width: min(400px, calc(100vw - 24px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: 8px; padding: 12px; background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow); }
.calc-head { display: flex; align-items: center; gap: 8px; }
.calc-head .grow { flex: 1; }
.calc-size { display: none; }
.calc-mode { min-height: 32px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--fg); font: 600 12.5px var(--f-body); cursor: pointer; }
.calc-in { display: grid; gap: 6px; }
.calc-row { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 4px 8px; align-items: center; }
.calc-sw { width: 8px; height: 30px; border-radius: 4px; }
.calc-row .input { min-height: 40px; font: 500 15px var(--f-mono); padding: 6px 10px; }
.calc-out { grid-column: 2; font: 600 13.5px var(--f-mono); color: var(--fg-2); min-height: 0; }
.calc-out:empty { display: none; }
.calc-out.err { color: var(--bad); font-family: var(--f-body); font-weight: 500; }
.calc-graph { position: relative; min-height: 160px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.calc-graph canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.calc-zoom { position: absolute; right: 8px; top: 8px; display: grid; gap: 4px; }
.calc-zoom button { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 700 18px/1 var(--f-body); cursor: pointer; }
.calc-pt { position: absolute; left: 8px; bottom: 8px; padding: 4px 8px; border-radius: 6px; background: var(--surface); color: var(--fg); font: 600 12.5px var(--f-mono); box-shadow: var(--shadow); }
.calc-pt:empty { display: none; }
.calc-tip { margin: 0; font-size: 12px; }
.calc-keys { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.calc-keys[hidden] { display: none; }
/* Oct 29: the expression list, under the graph as on the test's calculator */
.cx-list { display: grid; align-content: start; gap: 0; max-height: 30vh; min-height: 52px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.cx-row { display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) 34px; align-items: start; gap: 4px; padding: 4px 4px 4px 6px; border-bottom: 1px solid var(--line); }
.cx-row:last-child { border-bottom: 0; }
.cx-row.sel { background: var(--surface-2); }
.cx-tbl { grid-template-columns: 26px minmax(0, 1fr) 34px; }
.cx-n { font: 600 11px var(--f-mono); color: var(--fg-3); padding-top: 12px; text-align: right; }
.cx-eye { width: 26px; height: 36px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.cx-sw { width: 16px; height: 16px; border-radius: 50%; background: var(--cx); border: 2px solid var(--cx); }
.cx-sw.off { background: transparent; }
.cx-main { display: grid; gap: 2px; min-width: 0; }
.cx-in { width: 100%; min-height: 36px; border: 0; background: transparent; color: var(--fg); font: 500 15px var(--f-mono); padding: 4px 6px; border-radius: 6px; outline: none; }
.cx-in:focus { background: var(--surface-2); box-shadow: inset 0 -2px 0 var(--cx, var(--primary)); }
.cx-out { font: 600 13px var(--f-mono); color: var(--fg-2); padding: 0 6px 4px; overflow-wrap: anywhere; }
.cx-out:empty { display: none; }
.cx-out.err { color: var(--bad); font-family: var(--f-body); font-weight: 500; }
.cx-out sup { font-size: .72em; line-height: 0; }
.cx-del { width: 34px; height: 36px; border: 0; background: none; color: var(--fg-3); cursor: pointer; display: grid; place-items: center; }
.cx-del svg { width: 15px; height: 15px; }
@media (hover: hover) { .cx-del:hover { color: var(--bad); } .cx-add:hover, .cx-mini:hover { border-color: var(--primary); } }
.cx-bar { display: flex; align-items: center; gap: 6px; }
.cx-bar .grow { flex: 1; }
.cx-add, .cx-mini { min-height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--fg); font: 600 12.5px var(--f-body); cursor: pointer; }
.cx-mini { min-height: 28px; padding: 0 10px; margin-left: 4px; }
.cx-kb { width: 40px; height: 32px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--fg); cursor: pointer; display: grid; place-items: center; }
.cx-kb svg { width: 22px; height: 22px; }
.cx-kb[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); }
.cx-sl { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.cx-sl input { flex: 1; accent-color: var(--cx, var(--primary)); min-height: 28px; }
.cx-t { border-collapse: collapse; width: 100%; max-width: 260px; }
.cx-t th { font: italic 600 14px var(--f-text); color: var(--fg-2); border-bottom: 2px solid var(--cx); padding: 2px 4px; }
.cx-t td { border: 1px solid var(--line); padding: 0; }
.cx-t .cx-in { min-height: 30px; font-size: 14px; text-align: center; }
.cx-fit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 600 12.5px var(--f-body); padding: 4px 0; }
.cx-fit select { font: 600 12.5px var(--f-body); min-height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); padding: 0 6px; }
.calc-keys button { min-height: 38px; padding: 0; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--fg); font: 600 15px/1 var(--f-body); cursor: pointer; touch-action: manipulation; }
.calc-keys button sup { font-size: 10px; }
@media (hover: hover) { .calc-keys button:hover { border-color: var(--primary); } }
.calc-keys button:active { background: var(--primary-soft); }
.calc-out sup { font-size: .72em; line-height: 0; }
.calc-rad { border-top: 1.5px solid currentColor; padding: 0 1px; }
body.calc-on .satp .sp-body { margin-right: 424px; }
.sp-tool[aria-pressed="true"] { background: var(--sat-soft); color: var(--sat); }
.sp-text.hl-on .inner { cursor: text; }
mark.sp-hl { background: var(--hl); color: var(--hl-ink); border-radius: 2px; padding: 0 1px; }
.sp-text.hl-on mark.sp-hl { cursor: pointer; }
@media (max-width: 47.99rem) {
  /* Oct 29: half height on phones so the question stays visible above; "Bigger" for graphing */
  body { --calc-h: min(52vh, 480px); }
  body.calc-tall { --calc-h: min(84vh, 700px); }
  .calc { left: 8px; right: 8px; width: auto; top: auto; bottom: 64px; height: var(--calc-h); gap: 6px; padding: 10px; border-radius: 16px 16px 12px 12px; }
  .calc-graph { min-height: 84px; }
  .calc-size { display: inline-block; }
  .calc-keys button { min-height: 34px; }
  body:not(.calc-tall) .cx-list { max-height: 14vh; }
  body:not(.calc-tall) .calc { height: auto; max-height: var(--calc-h); grid-template-rows: auto minmax(110px, 150px) auto auto auto; } /* keypad folded: only as tall as it needs */
  body:not(.calc-tall) .calc:has(.calc-keys:not([hidden])) { height: var(--calc-h); grid-template-rows: auto minmax(0, 1fr) auto auto auto; }
  body:not(.calc-tall) .calc-zoom { display: flex; top: 6px; right: 6px; }
  body:not(.calc-tall) .calc-zoom button { width: 32px; height: 32px; font-size: 16px; }
  .calc-in { grid-template-columns: 1fr 1fr; }
  .calc-row .input { font-size: 14px; }
  body.calc-on .satp .sp-body { margin-right: 0; padding-bottom: var(--calc-pad, var(--calc-h)); }
  .calc-tip { display: none; }
}
.sat-full { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-color: var(--sat); }
.sat-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; }
.sat-score-t { display: grid; justify-items: start; }
.sat-score-t b { font: 800 64px/1 var(--f-display); letter-spacing: -.03em; color: var(--sat); }
.sat-score-s { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sat-score-s > div { display: grid; gap: 2px; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.sat-score-s b { font: 800 30px/1.1 var(--f-display); }
.sat-score p { grid-column: 1 / -1; }
.sp-stage { max-width: 600px !important; padding-top: 12px; }
.sp-stage-row { padding: 12px 14px; }
.sp-stage-list { margin: 0; padding-left: 20px; }
.btn.sp-go { background: var(--sat); border-color: var(--sat); color: var(--sat-ink); box-shadow: 0 3px 0 var(--sat-deep); }
@media (max-width: 47.99rem) { .sat-score { grid-template-columns: minmax(0, 1fr); gap: 14px; } .sat-score-t b { font-size: 54px; } .sat-full .btn { flex: 1 1 100%; } }
/* 1.9.0: the SAT path's fourth land */
:root { --l-lab: #b4235a; --l-lab-soft: #fde4ee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --l-lab: #ff8fb8; --l-lab-soft: #3d1527; } }
:root[data-theme="dark"] { --l-lab: #ff8fb8; --l-lab-soft: #3d1527; }
.l-lab { --lc: var(--l-lab); --ls: var(--l-lab-soft); }

/* 1.10.0 polish: no text under 12px, and every phone control at least 40px to tap */
:root { --w-psat: #0a7a6a; --lamp-ink: #8a5300; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lamp-ink: var(--lamp); } }
:root[data-theme="dark"] { --lamp-ink: var(--lamp); }
.pill.lamp, .flame, .tip b, .lock { color: var(--lamp-ink); }
.wk-bars > div, .sp-tool { font-size: 12px; }
.brand small { font-size: 12px; }
@media (max-width: 47.99rem) {
  .tabbar button { font-size: 12px; }
  .foot-col .linkbtn, .linkbtn.skl { min-height: 40px; min-width: 40px; }
  .btn.sm { min-height: 40px; }
  .strike { width: 40px; height: 40px; }
  .w-chip { min-height: 40px; padding: 0 12px; }
  .brand { min-height: 40px; min-width: 40px; }
  .sp-link { min-height: 40px; min-width: 40px; display: inline-flex; align-items: center; }
  .sp-abc, .g-chip, .timer, .seg button { min-height: 40px; }
  .seg button { min-width: 40px; }
}
.pbar .strike { flex: none; }

/* 1.12.0: the SAT score report */
.sr-next { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; border-color: var(--sat); }
.sr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sr-sec { display: grid; gap: 10px; align-content: start; }
.sr-sec-h { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); }
.sr-dom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.sr-dom-n { font-weight: 650; }
.sr-dom-s, .sr-few { font-size: 13px; }
.sr-steps { display: inline-grid; grid-template-columns: repeat(7, 14px); gap: 3px; }
.sr-steps i { height: 14px; border-radius: 3px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.sr-steps i.on { background: var(--sat); box-shadow: none; }
.sr-diff { display: grid; grid-template-columns: 72px 48px minmax(0, 1fr); gap: 12px; align-items: center; }
.sr-pace { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.sr-pace > .faint:first-child { grid-column: 1 / -1; font-size: 13px; }
.sr-pace b { font: 800 24px/1.1 var(--f-display); }
.sr-pace-s { font-size: 13px; }
.sr-pace-note { grid-column: 1 / -1; font-size: 14px; color: var(--fg-2); }
.sr-pace-note.warn { color: var(--lamp-ink); }
.sr-chart { position: relative; height: 140px; margin: 8px 0; }
.sr-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sr-gl { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line); }
.sr-gl i { position: absolute; left: 0; bottom: 2px; font: 500 12px var(--f-body); font-style: normal; color: var(--fg-3); }
.sr-line { fill: none; stroke: var(--sat); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sr-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--sat); }
.sr-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; }
.sr-row b { font: 800 18px/1 var(--f-display); color: var(--sat); }
@media (hover: hover) { .sr-row:hover { border-color: var(--sat); } }
@media (max-width: 47.99rem) { .sr-grid { grid-template-columns: minmax(0, 1fr); } .sr-next { grid-template-columns: minmax(0, 1fr); } .sr-next-owl { display: none; } }

/* 1.13.0: SAT lessons */
.ls-card > span.ls-meta:not(.ms-badge) { margin-top: auto; font-size: 13px; color: var(--fg-3); }
.sp-exp .ls-link { justify-self: start; margin-top: 4px; }
.ls-link { white-space: normal; text-align: left; max-width: 100%; height: auto; min-width: 0; }
.ls-links { flex-wrap: wrap; gap: 8px; justify-self: start; }
.jr-how { justify-self: start; margin-top: 6px; width: fit-content; }
.ls-head { flex-wrap: nowrap; align-items: flex-start; } .ls-head > .stack { min-width: 0; flex: 1; } .ls-head > .strike { flex: none; }

/* 1.16.0: the SAT study plan */
.sp-plan-card { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; border-color: var(--sat); }
.sp-plan-card > .stack { flex: 1 1 280px; }
.sp-plan-card.done { border-color: var(--good, var(--line)); }
.sp-plan-cfg { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: start; }
.sp-plan-cfg .field { display: grid; gap: 6px; min-width: 0; }
.sp-plan-cfg .seg { justify-self: start; }
.sp-plan-big { font: 800 44px/1 var(--f-display); color: var(--sat); }
.sp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.sp-day { display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); min-width: 0; font-size: 14px; }
.sp-day b { font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.sp-day-d, .sp-day-w { font-size: 12px; }
.sp-day.k-off { background: transparent; border-style: dashed; }
.sp-day.k-full { border-color: var(--sat); }
.sp-day.k-full b, .sp-day.k-module b { color: var(--sat); }
.sp-day.today { box-shadow: 0 0 0 2px var(--sat); }
.sp-day.ok { background: var(--good-soft, var(--surface-2)); }
.sp-day .btn { margin-top: 6px; justify-self: start; }
@media (max-width: 1100px) { .sp-week { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (max-width: 47.99rem) { .sp-week { grid-template-columns: minmax(0, 1fr); } .sp-day { grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; } .sp-day > b, .sp-day > .sp-day-w, .sp-day > .btn { grid-column: 2; } .sp-day > .sp-day-d { grid-row: 1 / span 3; } }
@media (min-width: 48rem) { .sp-plan-cfg { grid-template-columns: minmax(0, 1fr) auto auto auto; } .sp-plan-cfg .seg { flex-wrap: nowrap; } }
@media (max-width: 47.99rem) { .sp-wide .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 18px; justify-self: stretch; } .sp-wide .seg button { border-radius: 14px; } }

/* 1.17.0: SAT spaced review */
.sat-srs { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.sat-srs > .stack { flex: 1 1 280px; }
.sat-srs.due { border-color: var(--sat); }
.sat-srs .srs-boxes { flex-wrap: wrap; }

/* 1.18.0: bar charts in SAT Reading and Writing questions, drawn in HTML so they read in both themes */
.sat-chart { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--sp-line); border-radius: 10px; display: grid; gap: 6px; }
.sat-chart figcaption { font-weight: 600; font-size: 14px; }
.sat-chart .sc-row { display: grid; grid-template-columns: minmax(64px, auto) 1fr 3.2em; align-items: center; gap: 8px; font-size: 14px; }
.sat-chart .sc-t { height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--sp-line) 60%, transparent); overflow: hidden; }
.sat-chart .sc-b { display: block; height: 100%; border-radius: 6px; background: var(--w-sat, #2f5bd3); }
.sat-chart .sc-v { text-align: right; font-variant-numeric: tabular-nums; }
.sat-chart .sc-u { margin: 0; font-size: 12px; color: var(--fg-2); }

/* 1.21.0: the family dashboard, adult and data-first */
.fam-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fam-kpi { display: grid; gap: 4px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-width: 0; }
.fam-kpi > span:first-child { font: 600 12px/1.2 var(--f-body); letter-spacing: .05em; text-transform: uppercase; color: var(--fg-3); }
.fam-kpi b { font: 700 28px/1.1 var(--f-body); font-variant-numeric: tabular-nums; }
.fam-kpi > span:last-child { font-size: 13px; }
.fam-d { font-size: 13px; font-weight: 600; }
.fam-d.up { color: var(--good-ink, var(--good)); } .fam-d.down { color: var(--bad-ink, var(--bad)); }
.fam-test { display: grid; gap: 14px; align-content: start; border-top: 4px solid var(--wc); }
.fam-test .btn { justify-self: start; }
.fam-big { font: 700 36px/1 var(--f-body); font-variant-numeric: tabular-nums; }
.fam-dl { margin: 0; display: grid; gap: 6px; }
.fam-dl > div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.fam-dl dt { color: var(--fg-2); } .fam-dl dd { margin: 0; text-align: right; font-weight: 600; }
.fam-heat-wrap { display: flex; gap: 6px; overflow-x: auto; }
.fam-heat-days { display: grid; grid-template-rows: repeat(7, 16px); gap: 3px; font-size: 12px; color: var(--fg-3); line-height: 16px; }
.fam-heat { display: grid; grid-auto-flow: column; grid-auto-columns: 16px; gap: 3px; }
.fam-wk { display: grid; grid-template-rows: repeat(7, 16px); gap: 3px; }
.fam-heat i, .fam-key i { display: block; width: 16px; height: 16px; border-radius: 4px; background: var(--surface-2); }
.fam-heat i.l1, .fam-key i.l1 { background: color-mix(in srgb, var(--primary) 28%, var(--surface-2)); }
.fam-heat i.l2, .fam-key i.l2 { background: color-mix(in srgb, var(--primary) 52%, var(--surface-2)); }
.fam-heat i.l3, .fam-key i.l3 { background: color-mix(in srgb, var(--primary) 76%, var(--surface-2)); }
.fam-heat i.l4, .fam-key i.l4 { background: var(--primary); }
.fam-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; }
.fam-pace { display: grid; grid-template-columns: 3.5em auto 1fr; gap: 4px 12px; align-items: baseline; font-size: 14px; }
.fam-pace b { font-size: 20px; }
.fam-tbl td, .fam-tbl th { white-space: nowrap; }
.h-f-link { justify-self: start; margin-top: 4px; }
@media (max-width: 47.99rem) {
  .fam-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .fam-kpi b { font-size: 24px; }
  .fam-pace { grid-template-columns: 3.5em auto; } .fam-pace .faint { grid-column: 1 / -1; }
}
.fam-none { border-top-style: dashed; }
@media (min-width: 48rem) {
  .fam-heat { grid-auto-columns: 26px; gap: 4px; } .fam-wk, .fam-heat-days { grid-template-rows: repeat(7, 26px); gap: 4px; } .fam-heat-days { line-height: 26px; }
  .fam-heat i { width: 26px; height: 26px; border-radius: 6px; }
}
.fam-who { justify-self: start; max-width: 100%; overflow-x: auto; }
.fam-add { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-left: 4px solid var(--primary); }

/* 1.23.0: Owl Test Prep Junior: a bright, rounded, playful world with big targets */
:root { --jr-sky: #1f8fe0; --jr-sun: #ffc53d; --jr-coral: #ff6b6b; --jr-mint: #22b07d; --jr-grape: #8b5cf6; --jr-bg: #f0f8ff; --jr-card: #ffffff; --jr-ink: #17324d; --jr-ink2: #3c5a78; --jr-line: #cfe3f5; --jr-btn: #ff7a1a; --jr-btn-ink: #2a1200; --jr-btn-edge: #c85400; --jr-ok: #15824f; --jr-ok-soft: #dff7ea; --jr-no: #c0392b; --jr-no-soft: #ffe7e3; --jr-text-accent: #b34700; --jr-text-accent-ink: #ffffff; --jr-chip: #c2185b; --f-kid: "Fredoka", "Plus Jakarta Sans", system-ui, sans-serif; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --jr-bg: #0e1a2b; --jr-card: #15263d; --jr-ink: #eaf4ff; --jr-ink2: #b4cbe4; --jr-line: #27405f; --jr-sky: #6cc0ff; --jr-btn: #ff9a4d; --jr-btn-ink: #1d0e00; --jr-btn-edge: #b65a14; --jr-ok: #6ee0a6; --jr-ok-soft: #133826; --jr-no: #ff9a8c; --jr-no-soft: #3e1d1a; --jr-text-accent: #ff9a4d; --jr-text-accent-ink: #1d0e00; } }
:root[data-theme="dark"] { --jr-bg: #0e1a2b; --jr-card: #15263d; --jr-ink: #eaf4ff; --jr-ink2: #b4cbe4; --jr-line: #27405f; --jr-sky: #6cc0ff; --jr-btn: #ff9a4d; --jr-btn-ink: #1d0e00; --jr-btn-edge: #b65a14; --jr-ok: #6ee0a6; --jr-ok-soft: #133826; --jr-no: #ff9a8c; --jr-no-soft: #3e1d1a; --jr-text-accent: #ff9a4d; --jr-text-accent-ink: #1d0e00; }
body.world-jr { --primary: var(--jr-text-accent); --primary-ink: var(--jr-text-accent-ink); --primary-edge: var(--jr-btn-edge); --primary-soft: color-mix(in srgb, var(--jr-btn) 18%, var(--jr-card)); background: var(--jr-bg); }
body.world-jr .w-chip.w-jr { --wc: var(--jr-chip); }
.w-jr { --wc: var(--w-kid); }
.jr { color: var(--jr-ink); font-family: var(--f-kid); }
.jr .faint, .jr .muted { font-family: var(--f-body); }
.jr-h1 { font: 700 clamp(28px, 6vw, 40px)/1.1 var(--f-kid); margin: 0; text-wrap: balance; }
.jr-h2 { font: 700 22px/1.2 var(--f-kid); margin: 0; }
.jr-sub { font: 500 17px/1.45 var(--f-kid); color: var(--jr-ink2); margin: 0; max-width: 56ch; }
.jr-kicker { font: 600 14px/1 var(--f-kid); letter-spacing: .06em; text-transform: uppercase; color: var(--jr-sky); }
.jr-card { background: var(--jr-card); border: 2px solid var(--jr-line); border-radius: 24px; padding: 20px; }
.jr-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px; border-radius: 28px; background: linear-gradient(135deg, color-mix(in srgb, var(--jr-sun) 40%, var(--jr-card)), color-mix(in srgb, var(--jr-sky) 22%, var(--jr-card))); border: 2px solid var(--jr-line); }
.jr-owl { display: grid; place-items: center; }
.btn.jr-btn { min-height: 56px; padding: 0 26px; border-radius: 18px; font: 700 19px/1 var(--f-kid); background: var(--jr-btn); color: var(--jr-btn-ink); border: 0; box-shadow: 0 5px 0 var(--jr-btn-edge); }
.btn.jr-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--jr-btn-edge); }
.btn.jr-btn:disabled { opacity: .5; }
.btn.jr-ghost { min-height: 48px; border-radius: 16px; font: 600 16px/1 var(--f-kid); background: var(--jr-card); color: var(--jr-ink); border: 2px solid var(--jr-line); }
.jr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--jr-card); border: 2px solid var(--jr-line); font: 600 15px/1 var(--f-kid); }
.jr-islands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.jr-island { display: grid; gap: 6px; text-align: left; padding: 18px; border-radius: 24px; border: 2px solid var(--jr-line); background: var(--jr-card); color: var(--jr-ink); font-family: var(--f-kid); cursor: pointer; box-shadow: 0 5px 0 var(--jr-line); }
.jr-island b { font-size: 21px; } .jr-island > span:not(.jr-isl-ico):not(.jr-bar) { font-size: 15px; color: var(--jr-ink2); }
.jr-isl-ico { font-size: 34px; line-height: 1; }
.jr-island.jr-g { background: linear-gradient(160deg, color-mix(in srgb, var(--jr-mint) 22%, var(--jr-card)), var(--jr-card) 70%); }
.jr-island.jr-m { background: linear-gradient(160deg, color-mix(in srgb, var(--jr-grape) 22%, var(--jr-card)), var(--jr-card) 70%); }
.jr-bar { display: block; height: 10px; border-radius: 6px; background: var(--jr-line); overflow: hidden; }
.jr-bar i { display: block; height: 100%; background: var(--jr-sun); border-radius: 6px; }
.jr-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.jr-stk { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 28px; background: var(--jr-line); color: var(--jr-ink2); font-family: var(--f-kid); font-weight: 700; }
.jr-stk.on { background: color-mix(in srgb, var(--jr-sun) 45%, var(--jr-card)); box-shadow: 0 3px 0 color-mix(in srgb, var(--jr-sun) 70%, #000 10%); }
.jr-stk.big { width: 84px; height: 84px; font-size: 46px; }
.jr-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
.jr-slot { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 20px; background: var(--jr-card); border: 2px dashed var(--jr-line); text-align: center; font-size: 14px; color: var(--jr-ink2); }
.jr-slot.on { border-style: solid; color: var(--jr-ink); }
.jr-seg { justify-self: start; max-width: 100%; }
.jr-seg button { font-family: var(--f-kid); font-size: 16px; }
.jr-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.jr-skill { display: grid; gap: 6px; text-align: left; padding: 16px; border-radius: 20px; border: 2px solid var(--jr-line); background: var(--jr-card); color: var(--jr-ink); font-family: var(--f-kid); cursor: pointer; box-shadow: 0 4px 0 var(--jr-line); }
.jr-skill b { font-size: 18px; }
.jr-skill-w { display: grid; gap: 6px; align-content: start; }
.jr-skill-w .jr-skill { width: 100%; }
.jr-learn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 14px; border: 2px solid var(--jr-line); background: var(--jr-card); color: var(--jr-ink); font: 700 15px var(--f-kid); cursor: pointer; }
@media (hover: hover) { .jr-learn:hover { border-color: var(--jr-ink); } }
.jr-stars { display: inline-flex; gap: 2px; }
.jr-stars svg { width: 24px; height: 24px; fill: var(--jr-line); } .jr-stars svg.on { fill: var(--jr-sun); stroke: #c98a00; stroke-width: 1; }
.jr-stars.big { gap: 8px; justify-content: center; } .jr-stars.big svg { width: 58px; height: 58px; }
.jr-play { max-width: 760px; display: grid; gap: 18px; }
.jr-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; grid-auto-flow: column; grid-auto-columns: auto; } /* Oct 29 2026: the session XP pill (game.js sxpPill) joins the same row; it used to open a second row and push the puzzle down 37px */
.jr-x { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--jr-line); background: var(--jr-card); color: var(--jr-ink2); cursor: pointer; }
.jr-x svg { width: 20px; height: 20px; }
.jr-prog { height: 16px; border-radius: 10px; background: var(--jr-line); overflow: hidden; }
.jr-prog i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--jr-mint), var(--jr-sky)); transition: width .25s ease; }
.jr-count { font: 600 16px/1 var(--f-kid); color: var(--jr-ink2); }
.jr-q { display: grid; gap: 10px; }
/* 1.66.0: read-aloud buttons */
.jr-qhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jr-say { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: 600 15px/1 var(--f-kid); cursor: pointer; }
.jr-say.on { background: var(--primary); border-color: var(--primary); color: var(--primary-ink, #fff); }
.jr-say-p { margin-bottom: 10px; }
.jr-tag { justify-self: start; padding: 6px 12px; border-radius: 999px; font: 600 14px/1 var(--f-kid); color: #fff; }
.jr-tag.jr-m { background: #6d3fd8; } .jr-tag.jr-g { background: #13774f; }
.jr-stem { font: 500 clamp(21px, 4.4vw, 26px)/1.45 var(--f-kid); }
.jr-stem .fr { font-size: .9em; }
.jr-blank { letter-spacing: .05em; color: var(--jr-sky); }
.rz-say { display: inline-flex; vertical-align: middle; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 6px; border-radius: 999px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; } /* 1.67.0 */
.rz-ex { display: block; margin-top: 10px; font-size: 16px; color: var(--fg-2); font-style: italic; } /* 1.62.0 */
.rz .jr-blank { color: var(--primary); }
.jr-choices { display: grid; gap: 12px; }
.jr-choice { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; text-align: left; min-height: 64px; padding: 12px 16px; border-radius: 18px; border: 2px solid var(--jr-line); background: var(--jr-card); color: var(--jr-ink); font: 500 19px/1.35 var(--f-kid); cursor: pointer; box-shadow: 0 4px 0 var(--jr-line); }
.jr-choice[aria-pressed="true"] { border-color: var(--jr-sky); box-shadow: 0 4px 0 var(--jr-sky); background: color-mix(in srgb, var(--jr-sky) 12%, var(--jr-card)); }
.jr-choice.right { border-color: var(--jr-ok); box-shadow: 0 4px 0 var(--jr-ok); background: var(--jr-ok-soft); }
.jr-choice.wrong { border-color: var(--jr-no); box-shadow: 0 4px 0 var(--jr-no); background: var(--jr-no-soft); }
.jr-choice:disabled { cursor: default; opacity: 1; }
.jr-let { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--jr-bg); border: 2px solid var(--jr-line); font-weight: 700; }
.jr-fb { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px; border-radius: 20px; font: 500 17px/1.45 var(--f-kid); }
.jr-fb.ok { background: var(--jr-ok-soft); border: 2px solid var(--jr-ok); } .jr-fb.no { background: var(--jr-no-soft); border: 2px solid var(--jr-no); }
.jr-fb-h { font-size: 21px; } .jr-fb.ok .jr-fb-h { color: var(--jr-ok); } .jr-fb.no .jr-fb-h { color: var(--jr-no); }
.jr-act { display: grid; } .jr-act .btn { width: 100%; }
.jr-res { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; overflow: hidden; }
.jr-newstk { display: grid; justify-items: center; gap: 6px; font: 600 19px/1.2 var(--f-kid); }
.jr-confetti { position: absolute; left: 50%; top: 30%; pointer-events: none; }
.jr-confetti i { position: absolute; width: 10px; height: 14px; border-radius: 3px; background: var(--jr-sun); animation: jrConf .9s var(--d) ease-out forwards; }
.jr-confetti i:nth-child(3n) { background: var(--jr-coral); } .jr-confetti i:nth-child(3n+1) { background: var(--jr-sky); } .jr-confetti i:nth-child(4n) { background: var(--jr-mint); }
@keyframes jrConf { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--x), calc(var(--y) + 120px)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jr-confetti { display: none; } .jr-prog i { transition: none; } }
@media (max-width: 47.99rem) {
  .jr-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 20px 16px; }
  .jr-hero .row { justify-content: center; }
  .jr-islands { grid-template-columns: 1fr; }
  .jr-stk { width: 44px; height: 44px; font-size: 24px; }
}
.jr-done { max-width: 760px; }
/* 1.24.0: Junior reading */
.jr-islands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jr-island.jr-r { background: linear-gradient(160deg, color-mix(in srgb, var(--jr-coral) 22%, var(--jr-card)), var(--jr-card) 70%); }
.jr-tag.jr-r { background: #b3361e; } .jr-tag.jr-g { background: #13774f; } .jr-tag.jr-m { background: #6d3fd8; }
.jr-pass { margin: 0; padding: 16px 18px; border-radius: 20px; background: var(--jr-card); border: 2px solid var(--jr-line); display: grid; gap: 8px; font: 400 18px/1.6 var(--f-body); }
.jr-pass figcaption { display: grid; gap: 2px; font-family: var(--f-kid); }
.jr-pass figcaption b { font-size: 19px; } .jr-pass figcaption span { font-size: 13px; color: var(--jr-ink2); }
.jr-pass p { margin: 0; }
.jr-poem { display: grid; gap: 10px; font-style: italic; }
@media (max-width: 47.99rem) { .jr-islands { grid-template-columns: 1fr; } .jr-pass { font-size: 17px; padding: 14px; } }
.jr-right { display: grid; gap: 18px; min-width: 0; }
.jr-play.has-pass .jr-left { order: 1; } .jr-play.has-pass .jr-right { order: 2; }
@media (min-width: 64rem) {
  .jr-play.has-pass { max-width: 1240px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .jr-play.has-pass .jr-top { grid-column: 1 / -1; }
  .jr-play.has-pass .jr-left { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
}
/* 1.26.0: the weekly treasure map */
.jr-trail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; position: relative; }
.jr-trail::before { content: ""; position: absolute; left: 6%; right: 6%; top: 22px; border-top: 3px dashed var(--jr-line); }
.jr-trail li { position: relative; display: grid; justify-items: center; gap: 4px; font: 600 13px/1.2 var(--f-kid); color: var(--jr-ink2); }
.jr-spot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--jr-card); border: 3px solid var(--jr-line); font-size: 22px; }
.jr-trail li.done .jr-spot { border-color: var(--jr-sun); background: color-mix(in srgb, var(--jr-sun) 30%, var(--jr-card)); }
.jr-trail li.today .jr-spot { border-color: var(--jr-sky); }
.jr-trail li.today { color: var(--jr-ink); }
.jr-chest .jr-spot { border-radius: 14px; border-color: var(--jr-grape); }
.jr-chest.open .jr-spot { background: color-mix(in srgb, var(--jr-grape) 25%, var(--jr-card)); }
@media (max-width: 30rem) { .jr-trail { gap: 2px; } .jr-spot { width: 36px; height: 36px; font-size: 18px; } .jr-trail::before { top: 18px; } .jr-trail li { font-size: 12px; } }

/* 1.29.0: the install ask and the add-to-home-screen steps */
.pw-ask { display: grid; gap: 4px; justify-items: center; padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); text-align: center; font-size: 14px; }
.pw-ask .btn { margin-top: 6px; }
.pw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pw-step { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.pw-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font-weight: 700; font-size: 13px; }
.pw-i { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--primary); }
/* 1.29.0: the week's seven dots shrink to fit a narrow streak tile instead of running past its edge */
.g-dots { gap: 3px; min-width: 0; }
.g-dots i { flex: 1 1 0; min-width: 0; max-width: 22px; width: auto; height: auto; aspect-ratio: 1; }
/* 1.30.0: the notification settings */
.nt .nt-kinds { border: 0; margin: 0; padding: 0; min-width: 0; }
.nt .nt-kinds:disabled .switch b, .nt .nt-kinds:disabled .nt-row > label, .nt .nt-kinds:disabled .nt-row > b { color: var(--fg-2); }
.nt .nt-row { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nt .nt-sel { min-height: 44px; width: auto; max-width: 100%; }
/* 1.32.0: the pace note after an answer: your time against the test's, and a better approach when it ran long */
.pace-note { padding: 12px 14px; border-radius: 12px; background: var(--lamp-soft); font-size: 14.5px; display: grid; gap: 4px; }
.pace-note b { color: var(--lamp); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.pace-note.ok { background: var(--good-soft); } .pace-note.ok b { color: var(--good); }
.pace-tip { display: block; margin-top: 4px; }

/* ---------- 1.33.0: Today as a journey (one clear next step) ---------- */
.today2 { display: grid; gap: 22px; max-width: 760px; }
.td-hero { position: relative; overflow: hidden; border-radius: 28px; padding: 18px 18px 22px; display: grid; gap: 16px;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 60%), linear-gradient(160deg, var(--primary-soft), var(--surface)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.td-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.td-say { display: flex; align-items: center; gap: 10px; min-width: 0; }
.td-owl { flex: none; }
.td-bubble { position: relative; margin: 0; padding: 10px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 14.5px; font-weight: 600; color: var(--fg); min-width: 0; }
.td-bubble::before { content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateY(-50%) rotate(45deg); }
.td-stats { display: flex; gap: 6px; flex: none; }
.td-stat { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 800 15px/1 var(--f-body); cursor: pointer; }
.td-stat b span { font-weight: 600; font-size: 12px; color: var(--fg-3); }
.td-stat .g-flame { width: 20px; height: 20px; fill: var(--line-strong); } .td-streak.on .g-flame { fill: var(--streak); }
.td-next { display: grid; gap: 6px; justify-items: start; }
.td-eyebrow { font: 700 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.td-title { font: 800 clamp(26px, 6vw, 34px)/1.08 var(--f-display); letter-spacing: -.02em; color: var(--fg); text-wrap: balance; }
.td-sub { color: var(--fg-2); font-size: 15px; max-width: 46ch; }
.td-go { margin-top: 8px; min-height: 56px; min-width: min(100%, 260px); font-size: 18px; border-radius: 18px; justify-content: center; }
.owl-motion .td-go { animation: td-pulse 1.8s ease-in-out 1.2s 3; }
@keyframes td-pulse { 0%, 100% { transform: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent); } 50% { transform: scale(1.03); box-shadow: 0 0 0 10px transparent; } }
.owl-motion .td-hero { animation: td-in .35s ease-out both; }
@keyframes td-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.td-land .trail { padding: 18px 0 8px; }
.owl-motion .td-trail .pn-wrap { animation: td-pop .35s cubic-bezier(.3,1.4,.5,1) both; animation-delay: var(--d, 0ms); }
@keyframes td-pop { from { opacity: 0; transform: translateX(var(--x)) scale(.6); } to { opacity: 1; transform: translateX(var(--x)) scale(1); } }
.td-all { justify-self: center; margin: 0 auto 14px; display: block; }
.td-h { font: 700 15px/1.2 var(--f-body); }
.td-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.td-chip { position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 6px; min-height: 84px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: 700 13.5px/1.2 var(--f-body); cursor: pointer; text-align: center; }
.td-chip-i { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.td-chip-i svg { width: 22px; height: 22px; }
.td-badge { position: absolute; top: 6px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #b5400a; color: #fff; font: 800 12px/22px var(--f-body); font-style: normal; }
@media (hover: hover) { .td-chip:hover { border-color: var(--primary); } .td-link:hover { border-color: var(--primary); } }
.td-fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.td-fold summary::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: rotate(45deg); transition: transform .2s; }
.td-fold[open] summary::after { transform: rotate(-135deg); }
.td-fold-h { display: grid; gap: 2px; } .td-fold-h .faint { font-size: 13px; }
.td-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
@media (max-width: 480px) { .td-score { grid-template-columns: minmax(0, 1fr); justify-items: center; } .td-score > .stack { width: 100%; } }
.td-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.td-link { display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 56px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; }
.td-link b { font-size: 14.5px; } .td-link span { font-size: 13px; color: var(--fg-3); }
@media (prefers-reduced-motion: reduce) { .td-go, .td-hero, .td-trail .pn-wrap { animation: none !important; } }
.td-top { align-items: center; }
.td-date { font: 700 12px/1.2 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.td-bubble { flex: 1; }
@media (max-width: 520px) { .td-go { width: 100%; } }

/* 1.35.0 (Todd): the full lesson player (js/deep.js). One part at a time, a card per part, a bar that fills as you go. */
.lp-player { position: fixed; inset: 0; z-index: 47; background: var(--bg); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.lp-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: var(--surface); }
.lp-tt { display: grid; min-width: 0; } .lp-tt b { font: 700 17px/1.25 var(--f-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.lp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--go)); transition: width .35s ease; }
.lp-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.lp-wrap { max-width: 720px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px)); }
.lp-body .lp-wrap { display: grid; gap: 16px; padding-block: 18px 40px; }
.lp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 18px 20px; display: grid; gap: 12px; min-width: 0; }
.lp-card p { margin: 0; font-size: 16.5px; line-height: 1.65; max-width: 64ch; }
.lp-h { margin: 0; font: 700 21px/1.25 var(--f-display); text-wrap: balance; }
.lp-k { color: var(--primary); } .lp-k-ex { color: color-mix(in srgb, var(--gem) 62%, var(--fg)); } .lp-k-mis { color: var(--bad); } .lp-k-ck { color: var(--go-edge); } .lp-k-recap { color: color-mix(in srgb, var(--lamp) 70%, var(--fg)); }
.lp-hook { grid-template-columns: auto minmax(0, 1fr); align-items: start; background: var(--primary-soft); border-color: transparent; }
.lp-bub { display: grid; gap: 6px; background: var(--surface); border-radius: 14px; padding: 12px 14px; position: relative; }
.lp-bub::before { content: ""; position: absolute; left: -7px; top: 22px; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); }
.lp-fig { margin: 4px 0 0; padding: 12px; border-radius: 12px; background: var(--surface-2); overflow-x: auto; }
.lp-fig svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
.lp-fig .f-ax { stroke: var(--fg-3); stroke-width: 1.5; } .lp-fig .f-dash { stroke: var(--fg-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.lp-fig .f-curve { fill: none; stroke: var(--primary); stroke-width: 3.5; stroke-linecap: round; } .lp-fig .f-curve2 { fill: none; stroke: var(--gem); stroke-width: 3.5; stroke-linecap: round; }
.lp-fig .f-dot { fill: var(--go); } .lp-fig .f-open { fill: var(--surface-2); stroke: var(--primary); stroke-width: 3; } .lp-fig .f-dot2 { fill: var(--streak); }
.lp-fig text { fill: var(--fg); font: 600 13px var(--f-body); } .lp-fig .f-t2 { fill: var(--fg); font-weight: 700; } .lp-fig .f-tf, .lp-fig .f-ts { fill: var(--fg-2); font-size: 12px; }
.lp-fig .f-t { font-style: italic; }
.lp-fig .f-a { fill: var(--primary-soft); stroke: var(--primary); stroke-width: 2; } .lp-fig .f-b { fill: var(--gem-soft); stroke: var(--gem); stroke-width: 2; }
.lp-fig .f-c { fill: var(--xp-soft); stroke: var(--lamp); stroke-width: 2; } .lp-fig .f-cut { fill: none; stroke: var(--bad); stroke-width: 2; stroke-dasharray: 5 4; }
.lp-fig .f-arrow { fill: none; stroke: var(--fg-2); stroke-width: 2; } .lp-fig .f-arrowhead { fill: none; stroke: var(--fg-2); stroke-width: 2; stroke-linejoin: round; }
.lp-q { font: 500 18px/1.55 var(--f-text); padding: 12px 14px; border-left: 4px solid var(--gem); background: var(--gem-soft); border-radius: 0 10px 10px 0; }
.lp-psg { display: block; font: 400 16px/1.6 var(--f-text); padding: 10px 12px; margin: 2px 0 12px; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 10px; }
.lp-psg + .lp-psg { margin-top: 8px; }
.lp-psg u { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.lp-sn { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); font: 800 14px var(--f-body); }
.lp-do { font-size: 16.5px; line-height: 1.6; }
.lp-why { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--fg-2); padding: 8px 12px; background: var(--surface-2); border-radius: 10px; }
.lp-why b { color: var(--primary); margin-right: 4px; }
.lp-next { justify-self: start; } .lp-next .faint { font-weight: 600; font-size: 13px; margin-left: 6px; }
.lp-ans { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-mis { display: grid; gap: 12px; }
.lp-m { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.lp-m p { font-size: 15.5px; } .lp-m .pill { margin-right: 6px; vertical-align: 1px; } .lp-mwhy { color: var(--fg-2); }
.lp-wrong { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--bad) 60%, transparent); }
.lp-wrong .pill { text-decoration: none; display: inline-block; }
.lp-ch { display: grid; gap: 10px; }
.lp-c { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; text-align: left; min-height: 52px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--line-strong); border-bottom-width: 4px; background: var(--surface); color: var(--fg); font: 500 16.5px/1.45 var(--f-body); cursor: pointer; }
.lp-cl { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: 2px solid var(--line-strong); font-weight: 800; font-size: 14px; }
@media (hover: hover) { .lp-c:not(:disabled):hover { border-color: var(--primary); } }
.lp-c:not(:disabled):active { transform: translateY(2px); border-bottom-width: 2px; }
.lp-c.good { border-color: var(--good); background: var(--good-soft); } .lp-c.good .lp-cl { border-color: var(--good); background: var(--good); color: var(--surface); }
.lp-c.bad { border-color: var(--bad); background: var(--bad-soft); } .lp-c.bad .lp-cl { border-color: var(--bad); color: var(--bad); }
.lp-c.dim { opacity: .62; } .lp-c:disabled { cursor: default; }
.lp-fb { padding: 12px 14px; border-radius: 12px; font-size: 15.5px; line-height: 1.55; }
.lp-fb.ok { background: var(--good-soft); } .lp-fb.ok b { color: var(--good); } .lp-fb.no { background: var(--warn-soft); } .lp-fb.no b { color: var(--warn); }
.lp-rc { margin: 0; padding-left: 22px; display: grid; gap: 10px; font-size: 16px; line-height: 1.55; } .lp-rc li::marker { color: var(--lamp); }
.lp-score { font-weight: 700; color: var(--fg-2); }
.lp-recap { border: 2px solid var(--lamp); }
.lp-foot { border-top: 1px solid var(--line); background: var(--surface); }
.lp-fr { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-block: 12px; }
.lp-hint { margin-right: auto; font-size: 14px; }
.lp-cont, .lp-go { min-width: 160px; }
.pill.lp-full { align-self: flex-start; background: var(--good-soft); color: var(--good); }
@keyframes lp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lp-new { animation: lp-in .28s ease-out both; }
@media (prefers-reduced-motion: reduce) { .lp-new { animation: none; } .lp-bar i { transition: none; } }
@media (max-width: 47.99rem) { .lp-card { padding: 16px 14px 18px; } .lp-hook .lp-owl svg { width: 48px; height: 48px; } .lp-cont, .lp-go { flex: 1; min-width: 0; } }

.lp-tab { display: grid; gap: 0; max-width: 260px; margin: 0 auto; font: 600 17px/1.2 var(--f-body); }
.lp-tab > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--line); align-items: center; }
.lp-tab > div:first-child { border-top: 0; } .lp-tab .faint { font-size: 14px; }

/* 1.41.0: rewards that fly (the chess.com Puzzles feel): +XP travels to the session counter, which pops and counts up */
.g-fly { position: fixed; z-index: 61; pointer-events: none; font: 800 20px/1 var(--f-display); padding: 6px 12px; border-radius: 999px; background: var(--xp); color: #2a1f00; box-shadow: 0 6px 18px rgba(0,0,0,.2); white-space: nowrap; transform: translate(-50%, -50%); }
.g-sxp { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: var(--xp-soft); color: var(--fg); font: 800 14px/1.2 var(--f-body); white-space: nowrap; flex: none; }
.g-sxp svg { width: 16px; height: 16px; fill: var(--xp); } .g-sxp-u { font-size: 12px; color: var(--fg-2); font-weight: 700; }
.g-sxp.pop { animation: g-pop .32s ease-out; }
@keyframes g-pop { 40% { transform: scale(1.22); } 100% { transform: none; } }
.g-label { display: flex; justify-content: center; margin: 4px 0 10px; }
.g-label b { font: 800 20px/1.1 var(--f-display); padding: 8px 18px; border-radius: 999px; background: linear-gradient(90deg, var(--gem-soft), var(--primary-soft)); color: var(--primary); letter-spacing: .01em; animation: g-label .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes g-label { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .g-sxp.pop, .g-label b { animation: none; } }

/* 1.42.0: puzzle rating and Owl Rush */
.rz-panel { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 12px; }
.rz-panel.rz-two { grid-template-columns: 1fr 1fr; }
.rz-daily { grid-column: 1 / -1; }
@media (max-width: 640px) { .rz-panel.rz-two { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .rz-panel { grid-template-columns: 1fr 1fr; } .rz-rating { grid-column: 1 / -1; } }
.rz-rating { display: grid; gap: 2px; padding: 14px 16px; }
.pz-rating { font: 800 34px/1.05 var(--f-display); color: var(--primary); } .pz-rating.up { color: var(--good); } .pz-rating.down { color: var(--bad); }
.rz-rating .faint { font-size: 13px; }
.rz-go { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 14px; cursor: pointer; font: inherit; color: inherit; border: 1px solid var(--line); border-bottom-width: 4px; }
.rz-go b { font: 700 16px/1.2 var(--f-display); } .rz-go .faint { font-size: 13px; grid-column: 2; }
.rz-go .rz-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--xp-soft); }
.rz-go .rz-ico svg { width: 24px; height: 24px; fill: var(--lamp); }
@media (hover: hover) { .rz-go:hover { border-color: var(--primary); } }
.rz-go:active { transform: translateY(2px); border-bottom-width: 2px; }
.g-fly.up { background: var(--good); color: #fff; } .g-fly.down { background: var(--bad); color: #fff; }
.pz-hint { justify-self: start; } .pz-hint .faint { font-weight: 500; font-size: 13px; }
.rz { position: fixed; inset: 0; z-index: 46; background: var(--bg); display: grid; grid-template-rows: auto minmax(0, 1fr); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.rz-top { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); background: var(--surface); border-bottom: 1px solid var(--line); }
.rz-clock { font: 800 22px/1 var(--f-mono); justify-self: center; } .rz-clock.low { color: var(--bad); }
.rz-hearts { display: flex; gap: 6px; } .rz-hearts i { width: 22px; height: 22px; border-radius: 50%; background: var(--good-soft); border: 2px solid var(--good); display: grid; place-items: center; font: 800 12px/1 var(--f-body); font-style: normal; color: var(--bad); }
.rz-hearts i.x { background: var(--bad-soft); border-color: var(--bad); }
.rz-hearts.shake { animation: rz-shake .35s; } @keyframes rz-shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.rz-score { min-width: 54px; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--xp-soft); display: grid; place-items: center; } .rz-score b { font: 800 24px/1 var(--f-display); }
.rz-score.pop { animation: g-pop .32s ease-out; }
.rz-body { overflow-y: auto; }
.rz-wrap { max-width: 640px; margin: 0 auto; padding: 22px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: 16px; }
.rz-wrap .q-stem { font-size: 19px; line-height: 1.55; }
/* Oct 29 2026 (Todd: nothing jumps during play; test/steady.mjs): the question keeps room for most questions and sits on the
   answers, so in a rush the answers stay in one place from question to question */
.rz-q { min-height: 180px; display: grid; align-content: end; gap: 10px; } /* six lines on a phone, more than 9 in 10 questions need */
@media (min-width: 48rem) { .rz-q { min-height: 165px; } }
.rz-ch { display: grid; gap: 10px; }
.rz-c { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; min-height: 56px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line-strong); border-bottom-width: 4px; background: var(--surface); color: var(--fg); font: 600 18px/1.4 var(--f-body); cursor: pointer; }
.rz-c .let { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: 2px solid var(--line-strong); font-size: 14px; font-weight: 800; }
.rz-c:not(:disabled):active { transform: translateY(2px); border-bottom-width: 2px; }
@media (hover: hover) { .rz-c:not(:disabled):hover { border-color: var(--primary); } }
.rz-c.good { border-color: var(--good); background: var(--good-soft); } .rz-c.bad { border-color: var(--bad); background: var(--bad-soft); } .rz-c:disabled { cursor: default; }
.rz-c.good { animation: g-pop .3s ease-out; }
.rz-end { text-align: center; justify-items: center; }
.rz-final { font: 800 72px/1 var(--f-display); color: var(--primary); }
.rz-best { margin: 0; font-size: 17px; } .rz-best b { color: var(--good); }
.rz-hist { margin: 4px auto 0; width: min(320px, 100%); display: grid; gap: 6px; }
.rz-bars { height: 96px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; padding-top: 18px; }
.rz-bars span { position: relative; height: var(--h); min-height: 6px; border-radius: 6px 6px 2px 2px; background: var(--line-strong); }
.rz-bars span.now { background: var(--primary); }
.rz-bars b { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(100% + 2px); font-size: 12px; color: var(--fg); }
.rz-hist figcaption { font-size: 13px; text-align: center; }
.rz-miss { text-align: left; width: 100%; } .rz-miss summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.rz-mq { padding: 12px 0; border-top: 1px solid var(--line); display: grid; gap: 6px; } .rz-mq p { margin: 0; }
.rz-steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; }
.rz-mq .q-stem { font-size: 17px; line-height: 1.5; }
.rz-mq .ls-link { justify-self: start; }
.rz-btns { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .rz-hearts.shake, .rz-c.good, .rz-score.pop { animation: none; } }

/* 1.68.0: the hub's "Who's practicing?" card and its warm-ups */
.h-who-t { font: 800 clamp(24px, 3vw, 30px)/1.1 var(--f-display); letter-spacing: -.02em; margin: 0; padding-right: 64px; }
.h-who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h-who-b { display: flex; align-items: center; gap: 12px; text-align: left; font: inherit; color: var(--fg); background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 12px; min-height: 76px; cursor: pointer; box-shadow: 0 3px 0 var(--line); transition: transform .12s, box-shadow .12s, border-color .12s; }
.h-who-b b { font-size: 15.5px; line-height: 1.2; }
.h-who-b .faint { font-size: 13px; line-height: 1.25; }
.h-who-b .w-badge { width: 44px; height: 44px; flex: none; font-size: 14px; }
.h-who-b .w-badge svg { width: 30px; height: 30px; }
.h-who-b:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
@media (hover: hover) { .h-who-b:hover { border-color: var(--primary); } }
.h-who-b:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.h-who-chg { padding: 0 4px; min-height: 32px; font-size: 14px; }
.h-demo-seg { justify-self: start; }
.h-demo-seg button { min-width: 64px; }
.h-demo-text { font-size: 15px; line-height: 1.55; padding: 12px 14px; background: var(--surface-2); border-radius: 12px; }
.h-demo-text p { margin: 0; }
.h-demo-why { display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; padding-top: 6px; }
.h-demo-why p { margin: 0; }
.owl-motion .h-flash { animation: h-flash .7s ease-out; }
@keyframes h-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 63, .9), 0 24px 60px rgba(10, 5, 60, .45); } 100% { box-shadow: 0 0 0 18px rgba(255, 210, 63, 0), 0 24px 60px rgba(10, 5, 60, .45); } }
@media (max-width: 47.99rem) {
  .h-hero .h-trust, .h-hero .h-ghost { display: none; }
  .h-hero .h-lede { font-size: 16px; }
  .h-hero-in { gap: 8px; }
  .h-who-b { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; padding: 12px; }
  .h-who-b .w-badge { width: 38px; height: 38px; font-size: 13px; }
  .h-who-t { font-size: 24px; }
}
.h-tag b + b::before { content: '·'; margin: 0 6px; font-weight: 400; opacity: .7; }
.h-tag { white-space: normal; flex-wrap: wrap; row-gap: 2px; column-gap: 0; max-width: 100%; }
.h-tag i { margin: 0 10px; }
.h-soon { display: inline-flex; align-items: center; white-space: nowrap; } /* the dot stays with "ACT coming" when the pill wraps */

/* 1.69.0: painted lands (js/lands.js). The scene is drawn in tones of the land's colour. */
.land-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.land-scene .ls-d { fill: color-mix(in srgb, var(--lc) 62%, #000); color: color-mix(in srgb, var(--lc) 62%, #000); }
.land-scene .ls-m, .trail-road .ls-m { fill: var(--lc); }
.land-scene .ls-l, .trail-road .ls-l { fill: color-mix(in srgb, var(--lc) 62%, #fff); }
.land-scene .ls-p, .trail-road .ls-p { fill: color-mix(in srgb, var(--lc) 28%, #fff); }
.land-scene .ls-k { color: color-mix(in srgb, var(--lc) 35%, #000); fill: color-mix(in srgb, var(--lc) 35%, #000); }
.land-scene .ls-st { stroke: color-mix(in srgb, var(--lc) 50%, #000); }
.ls-r { fill: #e5484d; } .ls-b { fill: #3e7bfa; } .ls-g { fill: #ffd23f; } .ls-g2 { fill: #f2b84b; }
.trail-road .ls-d { fill: color-mix(in srgb, var(--lc) 70%, #000); color: color-mix(in srgb, var(--lc) 70%, #000); }
.land-h { position: relative; overflow: hidden; min-height: 156px; align-items: flex-end; isolation: isolate; }
.land-h::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--lc) 45%, #000) 100%); opacity: .85; pointer-events: none; }
.land-h > :not(.land-scene) { position: relative; z-index: 1; }
.land-h .land-name, .land-h .land-tag, .land-h .land-blurb { text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.land-h .land-ico { background: rgba(0,0,0,.28); backdrop-filter: blur(2px); }
.land-h .land-crowns { background: rgba(0,0,0,.38); align-self: flex-start; }
.td-land .land-h { min-height: 128px; }
/* ambient movement: slow, only with motion allowed, paused off screen */
.owl-motion .ls-tw { animation: ls-tw 3.2s ease-in-out infinite var(--d, 0s); }
@keyframes ls-tw { 50% { opacity: .25; } }
.owl-motion .ls-mote { animation: ls-mote 6s linear infinite var(--d, 0s); }
@keyframes ls-mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translate(var(--x), -90px); opacity: 0; } }
.owl-motion .ls-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: ls-flame 1.6s ease-in-out infinite alternate; }
@keyframes ls-flame { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(.92, 1.08) skewX(-3deg); } 100% { transform: scale(1.04, .95) skewX(3deg); } }
.owl-motion .ls-glow { animation: ls-glow 3s ease-in-out infinite alternate; }
@keyframes ls-glow { to { opacity: .07; } }
.owl-motion .ls-gear { transform-box: view-box; transform-origin: var(--o); animation: ls-spin var(--t) linear infinite; animation-direction: var(--dir-n, normal); }
.owl-motion .ls-gear[style*="--dir:-1"] { animation-direction: reverse; }
@keyframes ls-spin { to { transform: rotate(360deg); } }
.owl-motion .ls-cloud { animation: ls-cloud 26s ease-in-out infinite alternate var(--d, 0s); }
@keyframes ls-cloud { from { transform: translateX(-18px); } to { transform: translateX(26px); } }
.owl-motion .ls-flag { transform-box: fill-box; transform-origin: 0 50%; animation: ls-flag 1.8s ease-in-out infinite alternate; }
@keyframes ls-flag { to { transform: skewY(6deg) scaleX(.9); } }
.owl-motion .ls-plane { animation: ls-plane 14s linear infinite var(--d, 0s); }
@keyframes ls-plane { 0% { transform: translate(-60px, 10px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(220px, -30px); opacity: 0; } }
.owl-motion .ls-shoot { stroke-dasharray: 44; stroke-dashoffset: 44; animation: ls-shoot 7s ease-in infinite 2s; }
@keyframes ls-shoot { 0%, 86% { stroke-dashoffset: 44; opacity: 0; } 90% { opacity: 1; } 100% { stroke-dashoffset: -44; opacity: 0; } }
.owl-motion .ls-page { transform-box: fill-box; transform-origin: 100% 100%; animation: ls-page 5s ease-in-out infinite; }
@keyframes ls-page { 0%, 70% { transform: none; } 85% { transform: scaleX(-1) translateX(2px); } 100% { transform: none; } }
.owl-motion .ls-sun { transform-box: fill-box; transform-origin: center; animation: ls-sun 4s ease-in-out infinite alternate; }
@keyframes ls-sun { to { transform: scale(1.08); } }
.ls-off *, .ls-off { animation-play-state: paused !important; }
/* the road behind the stops */
.trail { position: relative; }
.trail > .pn-wrap { z-index: 1; }
.trail-road { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.trail-road path { fill: none; stroke-linecap: round; }
.tr-edge { stroke: color-mix(in srgb, var(--lc) 55%, var(--surface)); stroke-width: 40; }
.tr-bed { stroke: color-mix(in srgb, var(--lc) 18%, var(--surface)); stroke-width: 30; }
.tr-dash { stroke: color-mix(in srgb, var(--lc) 45%, var(--surface)); stroke-width: 4; stroke-dasharray: 1 12; }
.tr-done { stroke: #ffd23f; stroke-width: 8; }
.trail .pn-label { background: color-mix(in srgb, var(--surface) 92%, transparent); padding: 3px 9px; border-radius: 10px; box-shadow: 0 1px 0 var(--line); }
.trail-prop { transform-box: fill-box; }
.land-h:has(.land-scene) { --sh: 132px; padding-top: calc(var(--sh) + 14px); background: color-mix(in srgb, var(--lc) 80%, #000); }
.land-h:has(.land-scene) .land-scene { height: var(--sh); bottom: auto; }
.land-h:has(.land-scene) .land-ico { display: none; }
.land-h:has(.land-scene)::before { inset: auto 0 auto 0; top: calc(var(--sh) - 30px); height: 30px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--lc) 80%, #000)); opacity: 1; }
.land-h:has(.land-scene) .land-crowns { position: absolute; top: 12px; right: 12px; }
.td-land .land-h:has(.land-scene) { --sh: 108px; }
@media (min-width: 48rem) { .land-h:has(.land-scene) { --sh: 170px; } .td-land .land-h:has(.land-scene) { --sh: 130px; } }
.trail-prop [fill="#fff"] { fill: color-mix(in srgb, var(--lc) 30%, #fff); stroke: color-mix(in srgb, var(--lc) 60%, #000); stroke-width: .8; }
.trail-prop { opacity: .85; }
.trail-prop > * { transform-box: fill-box; }
/* the stops: a glossy coin, the current one breathing */
.pn-in { overflow: hidden; }
.pn-in::after { content: ''; position: absolute; left: 16%; top: 9%; width: 46%; height: 26%; border-radius: 50%; background: rgba(255,255,255,.28); transform: rotate(-20deg); pointer-events: none; }
.pn.locked .pn-in::after { background: rgba(255,255,255,.12); }
.owl-motion .pn.cur .pn-in { animation: pn-breathe 2.4s ease-in-out infinite; }
@keyframes pn-breathe { 50% { box-shadow: inset 0 -5px 0 rgba(0,0,0,.22), 0 0 0 10px color-mix(in srgb, var(--lc) 18%, transparent); } }
.pn.c3::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,63,.35), transparent 70%); z-index: -1; }
/* the map at the top of a path page */
.land-map { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: 6px 2px 10px; scrollbar-width: none; }
.land-map::-webkit-scrollbar { display: none; }
.lm-link { flex: 1 0 14px; height: 4px; min-width: 14px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 6px, transparent 6px 10px); margin-bottom: 44px; }
.lm-i { flex: none; display: grid; justify-items: center; gap: 4px; width: 92px; text-decoration: none; color: var(--fg); text-align: center; }
.lm-win { position: relative; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; display: block; border: 4px solid var(--surface); box-shadow: 0 0 0 3px var(--lc), 0 6px 14px rgba(20, 10, 60, .2); background: var(--lc); }
.lm-win .land-scene { inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); }
.lm-i.cur .lm-win { box-shadow: 0 0 0 3px #ffd23f, 0 0 0 8px color-mix(in srgb, #ffd23f 30%, transparent), 0 6px 14px rgba(20, 10, 60, .2); }
.lm-owl { position: absolute; right: -2px; bottom: -4px; z-index: 2; }
.lm-flag { position: absolute; right: 4px; top: 4px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; background: #ffd23f; color: #2a1f00; font: 800 13px/22px var(--f-body); }
.lm-i b { font-size: 12.5px; line-height: 1.2; }
.lm-c { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; color: var(--fg-2); }
.lm-c svg { width: 14px; height: 14px; fill: var(--crown); }
@media (hover: hover) { .lm-i:hover .lm-win { transform: translateY(-2px); } }
.lm-win { transition: transform .15s; }

/* 1.70.0: Junior's painted islands */
.jr-island { overflow: hidden; padding-top: 0; }
.jr-isl-art { display: block; margin: 0 -18px 6px; height: 120px; position: relative; border-bottom: 2px solid var(--jr-line); }
.jr-isl-art .land-scene { position: absolute; inset: 0; }
.ls-num { font-family: var(--f-kid); }
.owl-motion .ls-wave { animation: ls-wave 5s ease-in-out infinite alternate var(--d, 0s); }
@keyframes ls-wave { to { transform: translateX(30px); } }
.owl-motion .ls-boat { animation: ls-boat 3.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ls-boat { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(3px) rotate(3deg); } }
.owl-motion .ls-palm { animation: ls-palm 4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes ls-palm { to { transform: rotate(2.5deg); } }
.owl-motion .ls-bird { animation: ls-bird 9s ease-in-out infinite alternate var(--d, 0s); }
@keyframes ls-bird { from { transform: translate(-20px, 6px); } to { transform: translate(40px, -8px); } }
.owl-motion .ls-num { animation: ls-num 3s ease-in-out infinite alternate var(--d, 0s); }
@keyframes ls-num { to { transform: translateY(-7px); } }
.owl-motion .ls-pencil { animation: ls-pencil 2.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 100%; }
@keyframes ls-pencil { to { transform: translate(-6px, 4px) rotate(-6deg); } }
@media (hover: hover) { .jr-island:hover .jr-isl-art { filter: saturate(1.15); } }
/* 1.70.0: the weekly map looks like a treasure map */
.jr-map { background: radial-gradient(120% 90% at 10% 0%, color-mix(in srgb, #f6e2ad 45%, var(--jr-card)), color-mix(in srgb, #f3d58f 22%, var(--jr-card)) 70%); border-color: color-mix(in srgb, #c9853b 45%, var(--jr-line)); position: relative; overflow: hidden; }
.jr-map::after { content: ''; position: absolute; right: -14px; bottom: -14px; width: 86px; height: 86px; opacity: .14; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 0l4 16 16 4-16 4-4 16-4-16L0 20l16-4z' fill='%238a5a2b'/%3E%3Ccircle cx='20' cy='20' r='13' fill='none' stroke='%238a5a2b' stroke-width='1.5'/%3E%3C/svg%3E"); }
.jr-map .jr-trail::before { border-top-color: #c9853b; opacity: .7; }
.jr-map .jr-spot { box-shadow: 0 3px 0 color-mix(in srgb, #c9853b 40%, transparent); }
.owl-motion .jr-map li.today .jr-spot { animation: jr-today 1.8s ease-in-out infinite; }
@keyframes jr-today { 50% { transform: translateY(-4px); } }
/* 1.71.0: the new-crown moment */
.crown-pop { display: grid; gap: 8px; justify-items: center; text-align: center; padding-bottom: 4px; }
.cp-art { position: relative; width: 100%; height: 150px; border-radius: 18px; overflow: hidden; background: var(--lc); }
.cp-art .land-scene { position: absolute; inset: 0; }
.cp-crowns { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 1; }
.cp-crowns i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.35); border: 3px solid rgba(255,255,255,.5); }
.cp-crowns i svg { width: 28px; height: 28px; fill: rgba(255,255,255,.45); }
.cp-crowns i.on { background: linear-gradient(135deg, #ffe27a, #f0a000); border-color: #fff; box-shadow: 0 4px 0 #b97800; }
.cp-crowns i.on svg { fill: #5a3d00; }
.owl-motion .cp-crowns i.new { animation: cp-pop .6s cubic-bezier(.2, 1.6, .4, 1) .25s both; }
@keyframes cp-pop { 0% { transform: scale(0) rotate(-30deg); } 100% { transform: scale(1) rotate(0); } }
.cp-t { font: 800 22px/1.2 var(--f-display); letter-spacing: -.01em; }
/* 1.72.0: chests on the land roads */
.ch-stop { width: 84px; height: 72px; border-radius: 18px; }
.ch-svg { display: grid; place-items: center; width: 100%; height: 100%; }
.ch-svg svg { width: 78px; height: 58px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.18)); }
.ch-stop.locked .ch-svg svg { filter: grayscale(1) opacity(.45); }
.ch-stop.got .ch-svg svg { filter: grayscale(.4) opacity(.7); }
.owl-motion .ch-stop.ready .ch-svg { animation: ch-wiggle 2.6s ease-in-out infinite; }
@keyframes ch-wiggle { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-6deg) scale(1.06); } 80% { transform: rotate(6deg) scale(1.06); } 85% { transform: rotate(-4deg); } 90% { transform: rotate(3deg); } }
.ch-stop.ready::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(255,210,63,.45), transparent 70%); z-index: -1; }
.ch-wrap .pn-label b { color: var(--fg); }
/* 1.73.0: the Owl Shop */
.owl.has-hat .cap { display: none !important; }
.shop-cta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 14px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--xp) 50%, var(--line)); background: color-mix(in srgb, var(--xp) 12%, var(--surface)); color: var(--fg); font: inherit; cursor: pointer; text-align: left; }
.shop-cta > span:last-child { margin-left: auto; font-size: 24px; color: var(--fg-3); }
.shop-purse { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); font-weight: 700; }
.shop-purse svg { width: 22px; height: 22px; } .shop-purse b { font-size: 22px; }
.shop-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); }
.shop-row .btn { margin-left: auto; flex: none; }
.shop-ice { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: color-mix(in srgb, #5ab8ff 25%, var(--surface)); }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shop-i { display: grid; justify-items: center; gap: 4px; padding: 14px 6px 10px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.shop-i b { font-size: 13px; line-height: 1.2; text-align: center; }
.shop-i.on { border-color: var(--primary); box-shadow: 0 3px 0 var(--primary); }
.shop-owl { height: 72px; display: grid; place-items: end center; }
.shop-p { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 800; color: var(--fg-2); }
.shop-p svg { width: 14px; height: 14px; } .shop-p.short { opacity: .55; }
.shop-i:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
@media (hover: hover) { .shop-i:hover, .shop-cta:hover { border-color: var(--primary); } }

/* 1.74.0: the path is one painted world (js/world.js) */
.wpage { padding-bottom: 0; }
.world { position: relative; overflow: hidden; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); border-radius: 0; isolation: isolate; color: #fff; }
@media (min-width: 48rem) { .world { margin-inline: auto; width: min(100%, 760px); border-radius: 28px; box-shadow: 0 20px 50px rgba(10, 8, 40, .3); } }
.world-chk { position: absolute; inset: -50%; z-index: 0; pointer-events: none; transform: rotate(45deg);
  background-image: repeating-conic-gradient(rgba(255,255,255,.09) 0 25%, rgba(0,0,0,.08) 0 50%); background-size: 132px 132px; }
.wl-zone { position: relative; z-index: 1; }
.wl-sky { position: absolute; left: 0; right: 0; top: 0; height: 220px; opacity: .9; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); pointer-events: none; }
.wl-sky .land-scene { position: absolute; inset: 0; }
.wl-zone + .wl-zone .wl-sky { -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 50%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 50%, transparent); }
.wl-banner { position: absolute; left: 50%; top: 112px; transform: translateX(-50%); width: min(88%, 340px); height: 70px; display: grid; place-items: center; align-content: center; text-align: center; z-index: 3; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.wl-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.wl-tag { font: 700 10.5px/1.1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-top: -6px; }
.wl-name { font: 800 21px/1.1 var(--f-display); letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.wl-cr { position: absolute; right: -6px; top: -14px; display: inline-flex; align-items: center; gap: 3px; padding: 4px 10px; border-radius: 999px; background: #1d1a3a; color: #fff; font-size: 12px; font-weight: 800; border: 2px solid rgba(255,255,255,.3); }
.wl-cr svg { width: 14px; height: 14px; fill: #ffd23f; }
/* tiles */
.wt-at { position: absolute; width: 100px; height: 96px; margin-left: -50px; z-index: 2; }
.wt { position: relative; width: 100px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer; display: block; -webkit-tap-highlight-color: transparent; }
.wt-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 4px rgba(0,0,0,.35)); transition: transform .12s; }
.wt-lab { position: absolute; left: 0; right: 0; top: 23px; height: 34px; display: grid; place-items: center; color: #fff; font: 800 24px/1 var(--f-display); text-shadow: 0 2px 0 rgba(0,0,0,.35); pointer-events: none; }
.wt-lab svg { width: 28px; height: 28px; fill: #fff; color: #fff; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.wt.done .wt-lab svg { color: #fff; }
.wt.locked .wt-lab svg { width: 20px; height: 20px; fill: rgba(255,255,255,.55); color: rgba(255,255,255,.55); }
.wt.ahead { opacity: .82; }
.wt:active .wt-svg { transform: translateY(4px); }
@media (hover: hover) { .wt:hover .wt-svg { transform: translateY(-3px); } }
.wt.cur .wt-svg { filter: drop-shadow(0 0 14px rgba(255,255,255,.55)) drop-shadow(0 6px 4px rgba(0,0,0,.35)); }
.owl-motion .wt.cur .wt-svg { animation: wt-bob 1.6s ease-in-out infinite; }
@keyframes wt-bob { 50% { transform: translateY(-5px); } }
.wt-owl { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); z-index: 3; pointer-events: none; filter: drop-shadow(0 4px 3px rgba(0,0,0,.35)); }
.wt-crown { position: absolute; right: 2px; top: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #1d1a3a; border: 2px solid rgba(255,255,255,.35); }
.wt-crown svg { width: 14px; height: 14px; fill: rgba(255,255,255,.4); }
.wt-crown.on { background: #ffd23f; border-color: #fff; } .wt-crown.on svg { fill: #5a3d00; }
.wt-side { position: absolute; top: 24px; width: max-content; max-width: min(36vw, 170px); display: grid; gap: 2px; padding: 6px 10px; border-radius: 12px; background: rgba(12, 10, 35, .62); backdrop-filter: blur(3px); color: #fff; font-size: 12.5px; line-height: 1.25; z-index: 3; }
.wt-side.l { right: calc(100% + 4px); text-align: right; } .wt-side.r { left: calc(100% + 4px); }
.wt-side b { font-size: 13px; }
.wt-go { color: #ffd23f; font-weight: 800; }
.wt-cr { display: inline-flex; gap: 2px; } .wt-cr i svg { width: 13px; height: 13px; fill: rgba(255,255,255,.3); } .wt-cr i.on svg { fill: #ffd23f; }
.wt-chest-art { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: 64px; pointer-events: none; }
.wt-chest-art svg { width: 64px; height: 48px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.wt-chest.got .wt-chest-art { opacity: .55; filter: grayscale(.5); }
.owl-motion .wt-chest.ready .wt-chest-art { animation: ch-wiggle 2.6s ease-in-out infinite; }
.wt-gate-art { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); width: 58px; pointer-events: none; }
.wt-gate-art svg { width: 58px; height: 58px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.3)); }
.wt-gate.locked .wt-gate-art { opacity: .6; }
/* scenery */
.wl-prop { position: absolute; width: 132px; height: 154px; z-index: 1; pointer-events: none; filter: drop-shadow(0 10px 8px rgba(0,0,0,.35)); }
.wl-prop.l { left: max(2%, 4px); } .wl-prop.r { right: max(2%, 4px); }
.wl-prop-svg { width: 100%; height: 100%; overflow: visible; }
@media (max-width: 26rem) { .wl-prop { width: 104px; height: 122px; } }
.owl-motion .wl-float { animation: ls-num 3s ease-in-out infinite alternate; }
.wpage .land-map { margin-bottom: -4px; }
.world-mini { position: relative; height: 420px; overflow: hidden; border-radius: 24px; box-shadow: 0 14px 30px rgba(10, 8, 40, .25); }
.world-mini .world { margin-inline: 0; width: 100%; border-radius: 0; box-shadow: none; }
.world-mini .wl-sky, .world-mini .wl-banner { display: none; }
.wm-all { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5; padding: 10px 18px; border-radius: 999px; border: 0; background: rgba(12, 10, 35, .75); color: #fff; font: 700 14px/1 var(--f-body); cursor: pointer; backdrop-filter: blur(4px); min-height: 44px; }
/* 1.75.0: Junior's islands in the painted world */
.lm-i.jr-r, .wl-zone.jr-r { --lc: #1f86c8; } .lm-i.jr-g, .wl-zone.jr-g { --lc: #2fa862; } .lm-i.jr-m, .wl-zone.jr-m { --lc: #8f7cf0; }
.jr .wl-name, .jr .wt-lab { font-family: var(--f-kid); }
.jr .world-mini { margin-bottom: 4px; }
/* tap areas that do not overlap: the button is the tile's top, the drawing spills past it */
.wt { width: 62px; height: 58px; margin: 14px auto 0; }
.wt-svg { inset: auto; left: -19px; top: -14px; width: 100px; height: 96px; pointer-events: none; }
.wt-lab { left: -19px; right: -19px; top: 9px; }
.wt-crown { right: -16px; top: -8px; }
.wt-chest-art { top: -20px; } .wt-gate-art { top: -32px; }
.wt-owl { top: -24px; }   /* Owl-y stands on his own tile (the jump Continue opens), not above it on the one before */
.wl-tag { font-size: 12px; }
/* 1.76: the catalogue on the home page */
.cat { display: grid; gap: 22px; }
.cat-bar { display: grid; gap: 12px; }
.w-spl { --wc: #0f7a6c; }
.cat-search { position: relative; display: block; }
.cat-search svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }
.cat-search .input { width: 100%; min-height: 50px; padding-left: 44px; border-radius: 14px; font-size: 16px; }
.cat-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.cat-chips::-webkit-scrollbar { display: none; }
.cat-chips .chip { flex: none; }
.cat-chips .chip.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.cat-g { display: grid; gap: 10px; }
.cat-h { margin: 0; }
.cat-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
.cat-i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.cat-i.live { border: 2px solid var(--wc); box-shadow: 0 4px 0 color-mix(in srgb, var(--wc) 55%, #000); }
.cat-i[hidden], .cat-g[hidden] { display: none; }
.cat-main { gap: 2px; min-width: 0; }
.cat-top { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.cat-who, .cat-n { font-size: 13px; }
.cat-blurb { font-size: 14px; }
.cat-n { font-weight: 700; color: var(--fg-2); }
.cat-none { text-align: center; }
@media (max-width: 30rem) { .cat-i { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; padding: 12px 14px; } .cat-i .w-badge { width: 40px !important; height: 40px !important; font-size: 13px !important; } .cat-blurb { display: none; } .cat-go { align-self: center; } }
/* 1.79: Owl-y hops to the new tile, cleared jumps pop */
.wt-owl.wt-hop { animation: wt-hop .9s cubic-bezier(.3,.7,.4,1) both; }
@keyframes wt-hop { 0% { transform: translate(calc(-50% + var(--hx)), var(--hy)); } 50% { transform: translate(calc(-50% + var(--hx) * .5), calc(var(--hy) * .5 - 40px)); } 100% { transform: translate(-50%, 0); } }
.wt.wt-pop .wt-svg { animation: wt-pop .45s ease-out both; }
@keyframes wt-pop { 0% { transform: scale(1); } 45% { transform: scale(1.14) translateY(-6px); } 100% { transform: scale(1); } }
/* 1.80: the "More ways to practice" icons are chunky painted tiles, each its own colour, like the path tiles */
.td-chips .td-chip-i { width: 48px; height: 46px; border-radius: 14px; color: #fff; background: linear-gradient(160deg, var(--ci1), var(--ci2)); box-shadow: inset 0 -5px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35), 0 3px 6px rgba(20,16,60,.18); }
.td-chips .td-chip-i svg { width: 24px; height: 24px; stroke-width: 2.4; filter: drop-shadow(0 1.5px 0 rgba(0,0,0,.22)); }
.td-chips .td-chip:nth-child(6n+1) { --ci1: #ffb43a; --ci2: #f07b16; }
.td-chips .td-chip:nth-child(6n+2) { --ci1: #4fa8ff; --ci2: #2b62e8; }
.td-chips .td-chip:nth-child(6n+3) { --ci1: #4fd98b; --ci2: #1c9e5c; }
.td-chips .td-chip:nth-child(6n+4) { --ci1: #b88bff; --ci2: #6c3fe0; }
.td-chips .td-chip:nth-child(6n+5) { --ci1: #ff7aa2; --ci2: #e0386a; }
.td-chips .td-chip:nth-child(6n+6) { --ci1: #3fd3d0; --ci2: #148f9a; }
@media (hover: hover) { .td-chips .td-chip:hover .td-chip-i { transform: translateY(-2px); } }
.td-chips .td-chip:active .td-chip-i { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18), 0 1px 2px rgba(20,16,60,.18); }
.td-chips .td-chip-i { transition: transform .12s; }
/* painted backdrop for a land, when one exists: it fills the zone and the drawn props sit on it */
.wl-art { position: sticky; top: 0; height: 100vh; height: 100dvh; margin-bottom: -100vh; margin-bottom: -100dvh; background-size: cover; background-position: center; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 90px); mask-image: linear-gradient(180deg, transparent 0, #000 90px); }
.wl-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18)); }
.world:has(.wl-art) { overflow: clip; }
.world-mini .wl-art { position: absolute; inset: 0; height: auto; margin: 0; -webkit-mask-image: none; mask-image: none; }
.wl-zone:has(.wl-art) { background: none; }
/* 1.82: each "More" link gets a painted icon tile, like the practice chips */
.td-link:has(.td-li) { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 12px; row-gap: 1px; }
.td-link:has(.td-li) b, .td-link:has(.td-li) span { grid-column: 2; }
.td-li { grid-row: 1 / span 2; width: 40px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, var(--ci1), var(--ci2)); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35); }
.td-li svg { width: 22px; height: 22px; stroke-width: 2.2; }
.td-li .g-chest, .td-li svg[viewBox] { max-width: 26px; max-height: 26px; }
.td-links .td-link:nth-child(4n+1) { --ci1: #ffd166; --ci2: #f0a500; }
.td-links .td-link:nth-child(4n+2) { --ci1: #4fa8ff; --ci2: #2b62e8; }
.td-links .td-link:nth-child(4n+3) { --ci1: #4fd98b; --ci2: #1c9e5c; }
.td-links .td-link:nth-child(4n+4) { --ci1: #ff7aa2; --ci2: #e0386a; }
.td-li { align-self: center; }
/* 1.83: the results card feels like a level cleared: a warm glow, stars that pop in once, Owl-y beside the score */
.res-hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, #ffd23f 22%, var(--surface)), var(--surface) 62%); }
.res-left { display: grid; justify-items: center; gap: 10px; }
.res-stars { display: flex; gap: 6px; }
.res-stars i { width: 34px; height: 34px; display: grid; }
.res-stars i:nth-child(2) { transform: translateY(-8px); }
.res-stars svg { width: 100%; height: 100%; fill: var(--line); stroke: color-mix(in srgb, var(--line) 70%, #000); stroke-width: 1; }
.res-stars i.on svg { fill: #ffc531; stroke: #c98a00; filter: drop-shadow(0 2px 0 #c98a00); }
.owl-motion .res-stars i.on svg { animation: res-star .5s cubic-bezier(.3, 1.6, .5, 1) var(--d) both; }
@keyframes res-star { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (max-width: 47.99rem) { .res-hero .res-left { justify-self: center; } }
.wl-zone:has(.wl-art) .wl-prop, .wl-zone:has(.wl-art) .wl-float { display: none; }
/* 1.87 painted the home hero (book towers at dusk); Oct 29 2026 (Todd) moved that art to the kid worlds and the home hero
   now plays real footage (js/hub.js heroLayer): learners from pre-K to high school and their parents. A dark ink wash on
   the words' side keeps them readable on any frame (white text at 4.5:1 or better); the still sits under the film so
   there is never a blank frame. Scenes cross-fade (.6 s). Dark in both themes, as before. */
.h-hero { position: relative; isolation: isolate; background: #12143a; color: #fff; }
.h-vid { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; background: #12143a; }
.h-vid > img, .h-vid > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.h-vid > video { opacity: 0; transition: opacity .6s ease; }
.h-vid > video.on { opacity: 1; }
.h-vid.slow > video { transition: opacity 1.3s cubic-bezier(.4, 0, .2, 1); }
.owl-motion .h-vid.slow > video { transition: opacity 1.3s cubic-bezier(.4, 0, .2, 1), transform 2.4s cubic-bezier(.2, .6, .2, 1); }
.owl-motion .h-vid.slow > video:not(.on) { transform: scale(1.06); } /* the new age settles into place as it fades in */
.h-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 13, 42, .9) 0%, rgba(12, 13, 42, .78) 40%, rgba(12, 13, 42, .38) 68%, rgba(12, 13, 42, .25) 100%), linear-gradient(0deg, rgba(12, 13, 42, .5), transparent 35%); }
.h-hero .h-art { position: relative; }
.h-hero .h-title { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.h-hero .h-title span { background: linear-gradient(90deg, #ffd23f, #ffb02e); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.h-hero .h-tag { background: rgba(12, 13, 42, .45); border-color: rgba(255,255,255,.22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.h-hero .h-lede { color: #eceaff; }
.h-hero .h-trust { color: #e2e1f7; }
.h-hero .h-ghost { background: rgba(12, 13, 42, .4); }
.h-hero .h-me-i { background: rgba(12, 13, 42, .5); border-color: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.h-hero .h-me-i span:last-child { color: #e2e1f7; }
.h-hero .h-demo { box-shadow: 0 30px 70px rgba(3, 4, 30, .55); }
@media (max-width: 47.99rem) {
  .h-vid { bottom: auto; height: 560px; }
  .h-vid::after { content: ""; position: absolute; inset: auto 0 0; height: 200px; background: linear-gradient(transparent, #12143a); }
  .h-hero::before { background: linear-gradient(180deg, rgba(12, 13, 42, .45) 0%, rgba(12, 13, 42, .72) 45%, rgba(12, 13, 42, .9) 75%, #12143a 100%); bottom: auto; height: 560px; }
}
/* 1.89: results open on a painted summit at sunrise (Cloudflare Workers AI), a band across the top of the card that fades
   into it, so the stars and the score sit just under the view from the top. */
.res-hero { padding-top: clamp(96px, 16vw, 132px); isolation: isolate; }
.res-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: clamp(150px, 24vw, 210px); z-index: -1; background: url(/art/summit.webp) 62% 46% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
:root[data-theme="dark"] .res-hero::before { opacity: .78; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .res-hero::before { opacity: .78; } }
/* Oct 29: the small label above the score sits where the picture fades, so it gets its own backing to stay readable */
.res-hero .eyebrow { justify-self: start; width: fit-content; padding: 2px 9px; border-radius: 99px; background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--fg); }
/* 1.91: the painted chest. The lid swings back on its hinge, light spills out and the gems jump and fall away. */
.g-chest svg { overflow: visible; }
.g-chest .ch-l { transform-box: view-box; transform-origin: 60px 44px; }
.g-chest .ch-gem { opacity: 0; transform-box: fill-box; transform-origin: center; }
.owl-motion .g-chest.open .ch-l { animation: g-lid2 .55s .25s cubic-bezier(.3,1.4,.5,1) both; }
.owl-motion .g-chest.open .ch-glow { animation: ch-glow 1.2s .45s ease-out both; }
.owl-motion .g-chest.open .ch-gem { animation: ch-gem .9s calc(.5s + var(--d)) cubic-bezier(.2,.8,.4,1) both; }
@keyframes g-lid2 { 0% { transform: none; } 20% { transform: translateY(2px) rotate(2deg); } 65% { transform: translate(-6px, -22px) rotate(-24deg); } 100% { transform: translate(-4px, -16px) rotate(-18deg); } }
@keyframes ch-glow { 0% { opacity: 0; transform: scale(.6); } 40% { opacity: .95; } 100% { opacity: .55; transform: scale(1.1); } }
@keyframes ch-gem { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 60% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(40deg) scale(2); } 100% { opacity: 0; transform: translate(calc(var(--dx) * 1.5), calc(var(--dy) * .1)) rotate(80deg) scale(1.4); } }
/* under reduced motion, or without the motion setting, the opened chest just shows the light and the gems sitting inside */
.g-chest.open:not(.x) .ch-glow { opacity: .55; }
.owl-motion .g-chest.open .ch-gem { opacity: 0; }
html:not(.owl-motion) .g-chest.open .ch-gem { opacity: 1; }
html:not(.owl-motion) .g-chest.open .ch-l { transform: translateY(-10px) rotate(-12deg); }
/* 1.92: Junior's welcome card shows a painted adventure island (Cloudflare Workers AI) on its right side, fading into
   the card under the words; on a phone it is a band across the top, with Owl-y standing on it. */
.jr-hero { position: relative; overflow: hidden; isolation: isolate; }
.jr-hero::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 50%; z-index: -1; background: url(/art/island.webp) 40% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
.jr-hero > .stack { position: relative; }
@media (min-width: 48rem) { .jr-hero { grid-template-columns: auto minmax(0, 1fr) 34%; } }
@media (max-width: 47.99rem) { .jr-hero { padding-top: 0; } .jr-hero::before { inset: 0 0 auto; width: auto; height: 150px; background-position: 50% 45%;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); } .jr-hero .jr-owl { margin-top: 70px; } }
/* 1.93: the CLT welcome is set in a painted library hall at morning (Cloudflare Workers AI). The page colour washes over
   it on the words' side so the text stays as readable as before; the hall shows through behind the try-one card. */
.hero { isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--surface) 0%, var(--surface) 34%, color-mix(in srgb, var(--surface) 55%, transparent) 62%, color-mix(in srgb, var(--surface) 30%, transparent) 100%), url(/art/hall.webp) 60% 40% / cover no-repeat; }
@media (max-width: 900px) { .hero::before { background: linear-gradient(180deg, var(--surface) 0%, var(--surface) 42%, color-mix(in srgb, var(--surface) 55%, transparent) 70%, color-mix(in srgb, var(--surface) 35%, transparent) 100%), url(/art/hall.webp) 50% 100% / cover no-repeat; } }
/* 1.94: the Today card carries its world's painting in the top-right corner (CLT: the library hall; SAT: the observatory
   on the hill), fading out toward the words so the left side and the button stay on the plain card. */
.td-hero { isolation: isolate; }
.td-hero::before { content: ""; position: absolute; inset: 0 0 auto auto; width: 72%; height: 88%; z-index: -1; pointer-events: none;
  background: var(--td-art, none) 70% 30% / cover no-repeat;
  -webkit-mask-image: radial-gradient(120% 100% at 100% 0%, #000 30%, transparent 72%); mask-image: radial-gradient(120% 100% at 100% 0%, #000 30%, transparent 72%); }
html[data-world="clt"] .td-hero { --td-art: url(/art/hall.webp); }
html[data-world="sat"] .td-hero { --td-art: url(/art/hilltop.webp); }
/* 1.96: light for a big moment (level up, daily goal, chest): rays turn once behind the prize, confetti falls once */
.g-cel { position: relative; }
.g-fx { position: absolute; inset: -16px -16px auto; height: 340px; pointer-events: none; overflow: hidden; z-index: 0; }
.g-cel > :not(.g-fx) { position: relative; z-index: 1; }
.g-rays { position: absolute; left: 50%; top: 70px; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--xp) 32%, transparent) 0 10deg, transparent 10deg 22deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 68%); mask-image: radial-gradient(circle, #000 18%, transparent 68%);
  animation: g-rays 2.8s cubic-bezier(.2,.6,.3,1) both; }
@keyframes g-rays { 0% { opacity: 0; transform: rotate(-40deg) scale(.5); } 25% { opacity: 1; } 80% { opacity: .8; } 100% { opacity: 0; transform: rotate(60deg) scale(1.1); } }
.g-fx b { position: absolute; top: -12px; left: var(--x); width: var(--w); height: calc(var(--w) * 1.6); border-radius: 2px; background: var(--c); opacity: 0;
  animation: g-conf var(--t) var(--d) cubic-bezier(.3,.5,.6,1) both; }
@keyframes g-conf { 0% { opacity: 1; transform: translateY(0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(320px) rotate(var(--r)); } }
@media (prefers-reduced-motion: reduce) { .g-fx { display: none; } }
/* 1.97: a painted tile for each open world in the catalogue, its badge pinned to the corner */
.cat-art { position: relative; width: 64px; height: 64px; border-radius: 16px; background: var(--surface-2) 50% 45% / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 3px 0 color-mix(in srgb, var(--fg) 12%, transparent); flex: none; align-self: start; }
.cat-art .w-badge { position: absolute; right: -6px; bottom: -6px; box-shadow: 0 0 0 2px var(--surface); }
@media (hover: hover) { .owl-motion .cat-i.live:hover .cat-art { transform: rotate(-3deg) scale(1.04); transition: transform .2s; } }
@media (max-width: 30rem) { .cat-art { width: 52px; height: 52px; border-radius: 14px; } }
.cat-i .cat-art .w-badge { width: 26px !important; height: 26px !important; font-size: 9px !important; border-radius: 8px; }
/* 1.98: a painted strip heads each Lessons section (the section's land), with the name in white on a dark wash */
.art-band { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 92px; padding: 14px 16px; border-radius: 18px;
  background: #2a2350 50% 40% / cover no-repeat; color: #fff; overflow: hidden; isolation: isolate; box-shadow: 0 4px 0 color-mix(in srgb, var(--fg) 12%, transparent); }
.art-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,10,40,.05) 0%, rgba(14,10,40,.72) 100%); }
.art-band .h-sec { color: #fff; margin: 0; text-shadow: 0 2px 6px rgba(0,0,0,.45); }
.art-band span { font-size: 13px; font-weight: 700; color: #fff; background: rgba(14,10,40,.55); padding: 3px 10px; border-radius: 99px; flex: none; }

/* Oct 29 2026: the light/dark button in every header (Todd could not find the theme setting) */
.theme-btn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); cursor: pointer; padding: 0; margin-left: 6px; }
@media (hover: hover) { .theme-btn:hover { color: var(--fg); border-color: var(--primary); } }
.theme-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (max-width: 430px) { .theme-btn { width: 40px; height: 40px; margin-left: 2px; } }
@media (max-width: 380px) { .top .cta { padding-left: 12px; padding-right: 12px; font-size: 14px; } .top .w-chip { padding-left: 10px; padding-right: 8px; } }

/* Oct 29 2026 (Todd: "the check boxes are all different sizes"): the native checkbox in a .switch row was squeezed by
 * long text beside it. Every settings switch is now one drawn toggle, 48 x 28, that never shrinks. The crawl checks it. */
.switch > span { flex: 1 1 auto; min-width: 0; }
.switch input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; position: relative; width: 48px; height: 28px; min-width: 48px; margin: 0; border-radius: 999px; background: var(--line-strong); border: 0; cursor: pointer; transition: background-color .15s ease; }
.switch input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s ease; }
.switch input[type="checkbox"]:checked { background: var(--primary); }
.switch input[type="checkbox"]:checked::after { transform: translateX(20px); }
.switch input[type="checkbox"]:disabled { opacity: .45; cursor: not-allowed; }
.switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch input[type="checkbox"], .switch input[type="checkbox"]::after { transition: none; } }
.check input[type="checkbox"], .ed-key input[type="checkbox"] { flex: none; width: 20px; height: 20px; min-width: 20px; }

/* Oct 29 2026 (Todd: pop-ups "jog across" and sit off centre). The toasts used left: 50% plus translateX(-50%), so the
 * box could only grow to half the screen (cramped wrapping), and the rise animation replaced the transform, so each one
 * appeared off to the right and then jumped back. Now they are centred with margins, never by a transform, and only rise. */
.toast, .owl-toast, .g-toast { left: 0; right: 0; margin-left: auto; margin-right: auto; width: fit-content; width: -moz-fit-content; max-width: min(calc(100vw - 32px), 440px); transform: none; box-sizing: border-box; text-align: center; justify-content: center; line-height: 1.35; animation: toast-up .2s ease-out; }
.toast { border-radius: 20px; padding: 10px 18px; }
.owl-toast, .g-toast { border-radius: 22px; text-align: left; }
.owl-toast > span, .g-toast > span { min-width: 0; }
.owl-toast svg, .g-toast svg { flex: none; }
@keyframes toast-up { from { transform: translateY(16px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast, .owl-toast, .g-toast { animation: none; } }

/* Oct 29 2026 live test, Junior */
/* an empty star reads as an empty star in both themes (it was --jr-line on the card, about 1.3:1) */
.jr-stars svg:not(.on) { fill: color-mix(in srgb, var(--jr-ink2) 22%, var(--jr-card)); stroke: color-mix(in srgb, var(--jr-ink2) 70%, var(--jr-card)); stroke-width: 1.2; }
/* the kicker meets 4.5:1 on a white card */
:root:not([data-theme="dark"]) .jr-kicker { color: #1570b8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .jr-kicker { color: var(--jr-sky); } }
/* today's spot nudges three times when the map appears, then rests (no endless loops) */
.owl-motion .jr-map li.today .jr-spot { animation-iteration-count: 3; }
/* the compass decoration stays out from under the caption */
.jr-map::after { bottom: auto; top: -14px; }
.fam-sk th, .fam-sk td:not(:first-child) { white-space: nowrap; } .fam-sk td:first-child { min-width: 9em; }
.tap-link { display: inline-block; padding: 12px 4px; margin: -12px -4px; }
/* the wordmark gives way to the streak and goal pills on a phone (they covered "Prep") */
@media (max-width: 520px) { .top:has(.hud:not(:empty)) .brand > span, .top:has(.acct-btn, .acct-in) .brand > span { display: none; } }
/* 1.100: the footer folds on phones. One slim row (the owl and a "More" button) and the policy links; "More" opens the
   link columns and the small print. During a round played in the page (body.focus) the footer, the tab bar and the
   header's Start button step aside on every screen size, so the keyboard and the Check button stay in view. */
.foot-tog { display: none; }
.foot-more { display: contents; }
.foot-fine { display: grid; gap: 10px; }
.foot-fine p { margin: 0; }
@media (max-width: 47.99rem) {
  footer.site { padding-block: 12px 16px; }
  footer.site .wrap { gap: 6px; }
  .foot-grid { padding-bottom: 6px; margin-bottom: 0; gap: 18px 16px; }
  .foot-brand { max-width: none; }
  .foot-brand > .row { justify-content: flex-start; }
  .foot-tag { display: none; }
  .foot-tog { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg-2); font: 600 14px var(--f-body); cursor: pointer; }
  .foot-tog svg { transition: transform .2s; }
  footer.site.open .foot-tog svg { transform: rotate(180deg); }
  footer.site:not(.open) .foot-more { display: none; }
  footer.site:not(.open) .foot-grid { border-bottom: 0; padding-bottom: 0; }
  footer.site:not(.open) .foot-fine > p:not(.foot-legal) { display: none; }
  .foot-legal { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .foot-tog svg { transition: none; } }
body.focus footer.site, body.focus .tabbar, body.focus .top .cta { display: none; }
body.focus main, body.focus:not(.world-clt) main { padding-bottom: env(safe-area-inset-bottom, 0px); }
/* the tab bar's room is kept under the footer (the last thing on the page), not under main, so no blank band sits
   between the page and the footer */
@media (max-width: 860px) {
  main, body:not(.world-clt) main { padding-bottom: 0; }
  body:has(> .tabbar):not(.focus) footer.site { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 47.99rem) { .page { padding-block: 20px 32px; gap: 22px; } }
/* 1.100: phone header. The page's own big button and the tab bar already start practice, so the header's
   "Start practicing" stepped aside on phones (on the hub it also covered the wordmark). */
@media (max-width: 47.99rem) { .top .cta { display: none; } .top .theme-btn { margin-left: auto; } .top:has(.hud:not(:empty)) .theme-btn { margin-left: 4px; } .top .theme-btn ~ #acct-slot .acct-btn, .top .theme-btn ~ #acct-slot .acct-in { margin-left: 6px; } }
/* Junior skills: "Learn it first" sits beside its skill, not on a row of its own (half the scrolling) */
@media (max-width: 47.99rem) {
  .jr-skill-w:has(.jr-learn) { grid-template-columns: minmax(0, 1fr) 88px; }
  .jr-skill-w .jr-learn { flex-direction: column; padding: 8px 6px; font-size: 13px; line-height: 1.2; text-align: center; }
}
/* Owl Rush cards on a narrow phone: a smaller bolt so "Three misses and out" keeps to one or two lines */
@media (max-width: 400px) { .rz-go { padding: 12px; column-gap: 8px; } .rz-go .rz-ico { width: 32px; height: 32px; border-radius: 10px; } .rz-go .rz-ico svg { width: 20px; height: 20px; } }
/* 1.100: on a 360px phone the practice bar ran off the right edge and cut "Check" in half; the flag keeps its icon only */
@media (max-width: 400px) { .pfoot { padding-inline: 10px; } .pfoot .btn.sm { padding: 0 10px; } .pfoot .btn.primary { padding: 0 14px; } .pfoot .pf-l { display: none; } }
/* Oct 29 2026: the About page's sources table reads as one block per passage on a phone (its Source column was cut off) */
@media (max-width: 600px) {
  .src-tbl thead { display: none; }
  .src-tbl, .src-tbl tbody, .src-tbl tr, .src-tbl td { display: block; width: auto; }
  .src-tbl tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .src-tbl td { padding: 1px 0; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .src-tbl td:first-child { font-weight: 700; }
  .src-tbl td:nth-child(n+3) { color: var(--fg-2); font-size: 14px; }
}
/* the warm-up's Change link is a full-size tap target */
.h-who-chg { min-height: 40px; }
/* the badge on a painted catalogue tile is readable (it was 9px) */
.cat-i .cat-art .w-badge { width: 32px !important; height: 32px !important; font-size: 12px !important; }

/* Oct 29 2026 live test, CLT */
/* the footer clears the bottom tab bar on phones (its last line sat under the bar and could not be reached) */
@media (max-width: 860px) { body:has(.tabbar) footer.site { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } }
/* every highlight uses the theme's marker colours (the notebook showed the browser's bright yellow in dark mode) */
mark { background: var(--mark); color: var(--mark-ink); border-radius: 2px; padding: 0 1px; }
/* a disabled button stays readable in both themes: a quiet grey button, not a see-through primary one */
.btn.primary[disabled], .btn.primary:disabled { opacity: 1; background: var(--surface-2); color: var(--fg-2); border-color: var(--line-strong); box-shadow: none; }
/* the pace table fits a phone */
.pace-tbl th { white-space: normal; } .pace-tbl td:first-child { min-width: 7em; }
@media (max-width: 480px) { .pace-tbl th, .pace-tbl td { padding-left: 6px; padding-right: 6px; } }
/* paragraph numbers sit inside the passage's own margin on computers (they reached the window edge in a full test) */
@media (min-width: 861px) { .ptext { padding-left: 30px; } }
/* a button focused by script after a sheet closes shows no ring; keyboard focus still does */
.btn:focus:not(:focus-visible) { outline: none; }
/* Oct 29 2026 live test: the computer header never pushes Sign in off the screen. With the streak pills, the light/dark
 * button and Sign in, the CLT's seven links did not fit below about 1440px; the wordmark and the two least-used links give way. */
@media (min-width: 861px) and (max-width: 1440px) { .top:has(.hud:not(:empty)) .brand small, .top:has(.acct-btn, .acct-in) .brand small { display: none; } }
@media (min-width: 861px) and (max-width: 1240px) { .top:has(.hud:not(:empty)) .brand > span, .top:has(.acct-btn, .acct-in) .brand > span { display: none; } }
@media (min-width: 861px) and (max-width: 1100px) { .world-clt .top:has(.hud:not(:empty), .acct-in, .acct-btn) .nav [data-v="words"], .world-clt .top:has(.hud:not(:empty), .acct-in, .acct-btn) .nav [data-v="plans"] { display: none; } .top .wrap { gap: 10px; } }
@media (min-width: 861px) { .world-clt .top:has(.hud:not(:empty)) .brand > span { display: none; } }
/* Oct 29 2026 live test, rewards */
/* the level ring in the flight log shows its empty track (it matched the tile, so only a dash of progress showed) and sits at the icons' size */
.g-stat .g-ring { width: 28px; height: 28px; } .g-stat .g-ring-bg { stroke: var(--line-strong); }
/* the goal pill stays on one line */
.g-chip { white-space: nowrap; }
/* empty result stars read as stars in dark mode */
.res-stars i:not(.on) svg { fill: color-mix(in srgb, var(--fg-3) 25%, var(--surface)); stroke: var(--fg-3); }
/* Oct 29 2026 live test, SAT: the skill tables fit a phone (the Practice button was cut at the card edge) */
@media (max-width: 480px) { .sat-tbl2 th, .sat-tbl2 td { padding-left: 6px; padding-right: 6px; } .sat-tbl2 td:first-child { white-space: normal; min-width: 0; } .sat-tbl2 .btn.sm { padding-left: 10px; padding-right: 10px; } }
/* the answer preview label shows only once there is an answer */
.sp-prev:has(b:empty), .sp-prev.empty { visibility: hidden; }
.sat-mod-row > .btn { flex: 1 1 240px; }
.g-float.try { background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); } /* Oct 29 2026: readable over an explanation in both themes */
/* Oct 29 2026 live test: on a phone with the streak, goal and Arcade pills, the light/dark button and Sign in, the header
 * ran up to 140px past the screen (Sign in and the sun/moon cut off, the page zoomed out). On phones, with the pills
 * showing: Sign in becomes a person icon, the goal pill shows its ring only, the Arcade pill its icon only, and the
 * test chip drops its arrow; under 380px the owl mark gives way (the test chip opens the same switcher). */
@media (max-width: 430px) {
  .top:has(.hud:not(:empty)) .acct-in { font-size: 0; width: 40px; min-width: 40px; padding: 0; background: no-repeat center / 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); border: 1px solid var(--line); border-radius: 999px; }
  .top:has(.hud:not(:empty)) .g-goal b, .top:has(.hud:not(:empty)) .arc-chip b { display: none; }
  .top:has(.hud:not(:empty)) .w-chip svg { display: none; }
  .top:has(.hud:not(:empty)) .hud { gap: 4px; } .top:has(.hud:not(:empty)) .g-chip { padding: 0 7px; }
  .top:has(.hud:not(:empty)) .theme-btn { margin-left: 0; }
}
@media (max-width: 380px) { .top:has(.hud:not(:empty)) .brand { display: none; } }
input[type="radio"], input[type="checkbox"] { accent-color: var(--primary); } /* Oct 29 2026: radio rings visible on dark sheets */
/* 1.100 hub on a phone: the six "why students come back" cards become icon rows (about 300px less scrolling), and the
   comparison table reads row by row (the row name across the top, three short answers under it) instead of four
   squeezed columns with a cut-off fourth */
@media (max-width: 600px) {
  .h-feats { gap: 10px; }
  .h-feat { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 14px; }
  .h-feat .h-f-ico { grid-row: 1 / span 2; align-self: start; }
  .h-feat > :not(.h-f-ico) { grid-column: 2; }
  .h-compare, .h-compare thead, .h-compare tbody { display: block; width: 100%; }
  .h-compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .h-compare th, .h-compare td { border-bottom: 0; padding: 8px 8px; }
  .h-compare thead th:first-child { display: none; }
  .h-compare tbody th { grid-column: 1 / -1; width: auto; padding: 12px 8px 2px; font-weight: 700; }
  .h-compare th:first-child { width: auto; }
}
/* 1.100: phone tables and switches. Table rows are tighter (a skill table was a screen and a half), and a segmented
   switch beside a card title stays one pill on one line (it broke into two lines inside its own outline) */
@media (max-width: 47.99rem) {
  .compare th, .compare td { padding: 9px 10px; }
  .split > .seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .split > .seg::-webkit-scrollbar { display: none; }
  .split > .seg button { padding: 0 11px; white-space: nowrap; flex: none; }
}
/* the "Every skill" table on a phone: one row per skill with its score and Drill in view (they sat off the right edge,
   reachable only by scrolling the table sideways). Line 1: the skill; line 2: answers and level (the switch above picks the section). */
@media (max-width: 47.99rem) {
  .sk-tbl, .sk-tbl tbody { display: block; }
  .sk-tbl thead, .sk-tbl td:nth-child(5) { display: none; }
  .sk-tbl tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; column-gap: 8px; row-gap: 2px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .sk-tbl td { padding: 0; border: 0; }
  .sk-tbl td:nth-child(1) { grid-column: 1 / 4; grid-row: 1; font-weight: 600; }
  .sk-tbl td:nth-child(2) { display: none; }
  .sk-tbl td:nth-child(3) { grid-column: 1; grid-row: 2; font-size: 13px; color: var(--fg-3); text-align: left; white-space: nowrap; }
  .sk-tbl td:nth-child(3)::after { content: " answered"; }
  .sk-tbl td:nth-child(6) { grid-column: 2 / 4; grid-row: 2; font-size: 13px; min-width: 0; }
  .sk-tbl td:nth-child(4) { grid-column: 4; grid-row: 1 / 3; min-width: 52px; text-align: right; }
  .sk-tbl td:nth-child(7) { grid-column: 5; grid-row: 1 / 3; }
  .tscroll:has(> .sk-tbl) { overflow: visible; }
}
/* SAT progress skill tables on a phone: the skill name gets the row (it wrapped to three or four lines beside the
   numbers); "done" and "right" go under it, the Practice button to the right */
@media (max-width: 47.99rem) {
  .sat-tbl2, .sat-tbl2 tbody { display: block; }
  .sat-tbl2 thead { display: none; }
  .sat-tbl2 tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 6px; row-gap: 1px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .sat-tbl2 tr.sat-trd { display: block; padding: 0; border: 0; }
  .sat-tbl2 tr.sat-trd th { display: block; padding: 8px 6px; }
  .sat-tbl2 td { padding: 0 !important; border: 0; }
  .sat-tbl2 td:first-child { grid-column: 1 / 4; grid-row: 1; white-space: normal; }
  .sat-tbl2 td:nth-child(2), .sat-tbl2 td:nth-child(3) { grid-row: 2; font-size: 13px; color: var(--fg-3); text-align: left; white-space: nowrap; }
  .sat-tbl2 td:nth-child(2) { grid-column: 1; } .sat-tbl2 td:nth-child(2)::after { content: " done"; }
  .sat-tbl2 td:nth-child(3) { grid-column: 2; } .sat-tbl2 td:nth-child(3)::before { content: "· "; } .sat-tbl2 td:nth-child(3)::after { content: " right"; }
  .sat-tbl2 td.none { display: none; }
  .sat-tbl2 td:nth-child(4) { grid-column: 4; grid-row: 1 / 3; }
  .tscroll:has(> .sat-tbl2) { overflow: visible; }
}
/* family skill tables on a phone: skill on top, "CLT · 5 answered" under it, the share right and the trend at the right */
@media (max-width: 47.99rem) {
  .fam-sk, .fam-sk tbody { display: block; }
  .fam-sk thead { display: none; }
  .fam-sk tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; column-gap: 6px; row-gap: 1px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
  .fam-sk td { padding: 0 !important; border: 0; }
  .fam-sk td:nth-child(1) { grid-column: 1 / 4; grid-row: 1; font-weight: 600; min-width: 0 !important; white-space: normal !important; }
  .fam-sk td:nth-child(2), .fam-sk td:nth-child(3) { grid-row: 2; font-size: 13px; color: var(--fg-3); text-align: left; white-space: nowrap; }
  .fam-sk td:nth-child(2) { grid-column: 1; } .fam-sk td:nth-child(3) { grid-column: 2; } .fam-sk td:nth-child(3)::before { content: "· "; } .fam-sk td:nth-child(3)::after { content: " answered"; }
  .fam-sk td:nth-child(4) { grid-column: 4; grid-row: 1 / 3; font-weight: 700; }
  .fam-sk td:nth-child(5) { grid-column: 5; grid-row: 1 / 3; font-size: 13px; }
  .tscroll:has(> .fam-sk) { overflow: visible; }
  /* wide number tables keep sideways scrolling, with the row names pinned at the left so the numbers stay labelled */
  .tscroll > .table:not(.sk-tbl, .sat-tbl2, .fam-sk) tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
  .split > .seg button { padding: 0 10px; }
}
/* 1.100: the land drifts under the path (js/world.js parallax: --py, a transform only, so the page height never
   changes). The painting is a fifth taller than the screen so the drift never shows an edge. */
.world:not(.world-mini) .wl-art { height: 120vh; height: 120dvh; margin-bottom: -120vh; margin-bottom: -120dvh; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
/* richer jumps: a squashy press with a springy release, a ring on tap, and a glowing pad under the current jump */
.wt-svg { transition: transform .32s cubic-bezier(.3,1.6,.5,1), filter .2s; }
.wt:active .wt-svg { transform: translateY(5px) scale(1.04, .9); filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); transition-duration: .06s; }
.wt-ring { position: absolute; left: 50%; top: 50%; width: 70px; height: 40px; margin: -14px 0 0 -35px; border-radius: 50%; border: 3px solid rgba(255,255,255,.9); pointer-events: none; z-index: 4;
  animation: wt-ring .6s ease-out both; }
.wt-ring.gold { border-color: #ffd23f; box-shadow: 0 0 12px #ffd23f; }
@keyframes wt-ring { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(2.1); } }
.wt-at.is-cur::before { content: ""; position: absolute; left: 50%; top: 60px; width: 96px; height: 34px; margin-left: -48px; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(255,214,90,.75), rgba(255,214,90,0)); }
.owl-motion .wt-at.is-cur::before { animation: wt-pad 2.2s ease-in-out 4; }
@keyframes wt-pad { 0%, 100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
.owl-motion .wt-at.is-cur::after { content: ""; position: absolute; left: 50%; top: 40px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; pointer-events: none; z-index: 3;
  background: #fff6c4; box-shadow: -22px 10px 0 -1px #ffe27a, 20px 4px 0 -1px #fff6c4, -8px 18px 0 -2px #ffd23f, 12px 16px 0 -2px #ffe27a;
  animation: wt-motes 2.4s ease-out 4 both; }
@keyframes wt-motes { 0% { opacity: 0; transform: translateY(8px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
@media (prefers-reduced-motion: reduce) { .world .wl-art { transform: none !important; } .wt-ring { display: none; } }
/* a link inside a sentence ("Read its lesson first") gets a finger-sized hit area on phones without moving the text */
@media (max-width: 47.99rem) { p .linkbtn, .linkbtn.inl { padding-block: 10px !important; margin-block: -10px; display: inline-block; } }
/* the streak and goal pills show once on a phone: in the header. The Today and SAT home cards dropped their copy (and
   the CLT card its weekday line with it), so "Continue" moves up. */
@media (max-width: 47.99rem) {
  body:has(#hud:not(:empty)) .td-hero .td-stats { display: none; }
  body:has(#hud:not(:empty)) .today2 .td-top { display: none; }
}
/* full-test "before you begin" and section-break screens on a phone: the Start button stays pinned at the bottom of the
   screen (it sat below the fold under the rules), and the heading is a size smaller */
@media (max-width: 47.99rem) {
  .pbody.solo .inner > .row:last-child, .sp-stage > .row:last-child { position: sticky; bottom: 0; z-index: 2; margin-top: 4px; padding: 14px 0 12px; background: linear-gradient(to bottom, transparent, var(--bg) 28%); }
  .pbody.solo .inner > .row:last-child .btn, .sp-stage > .row:last-child .btn { flex: 1; }
  .sp-stage > .row:last-child { background: linear-gradient(to bottom, transparent, var(--sp-bg) 28%); }
  .sp-pane:has(> .sp-stage) { padding-bottom: 0; }
  .pbody.solo .inner > .h-page { font-size: 28px !important; }
  .sp-stage > .h-page { font-size: 28px; }
}
/* Junior sticker book on a phone: four to a row, and a locked sticker is just its "?" (24 boxes that each said "Locked"
   filled three screens) */
@media (max-width: 47.99rem) {
  .jr-book { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .jr-slot { padding: 10px 4px; gap: 4px; border-radius: 16px; font-size: 12px; }
  .jr-slot:not(.on) > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* the Owl Pass sheet's two prices sit side by side on a phone (two short cards stacked pushed the sign-up below the fold) */
.grid.pl-prices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pl-prices .card { padding: 14px; }

/* Oct 29 2026: reviews from real students (js/testimonials.js): the ask card, the form, the wall and the colleges strip */
.tm-ask { align-items: center; gap: 12px; border-color: var(--lamp); }
.tm-ask .grow { flex: 1; min-width: 0; }
.tm-ask-owl { flex: none; }
.tm-stars { border: 0; padding: 0; margin: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.tm-stars legend { width: 100%; margin-bottom: 6px; padding: 0; }
.tm-star { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; font-size: 30px; line-height: 1; color: var(--line-strong); }
.tm-star input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tm-stars:has(input:checked) .tm-star { color: var(--lamp); }
.tm-stars .tm-star:has(input:checked) ~ .tm-star { color: var(--line-strong); }
.tm-star:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }
.tm-form .seg { margin-top: 8px; }
.tm-wall { display: grid; gap: 16px; }
.tm-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tm-card { margin: 0; display: grid; gap: 10px; align-content: start; }
.tm-big { display: grid; gap: 2px; }
.tm-big b { font: 700 44px/1 var(--f-display); color: var(--primary); }
.tm-big span { font-size: 13px; color: var(--fg-2); }
.tm-stars-show { color: var(--lamp); letter-spacing: 2px; font-size: 18px; }
.tm-stars-show i { color: var(--line-strong); font-style: normal; }
.tm-card blockquote { margin: 0; font-size: 16px; line-height: 1.5; color: var(--fg); }
.tm-card figcaption { font-size: 14px; color: var(--fg-2); }
.tm-schools { display: grid; gap: 6px; text-align: center; }
.tm-schools p { margin: 0; font: 600 17px/1.6 var(--f-display); color: var(--fg-2); }
.tm-schools i { font-style: normal; margin: 0 10px; color: var(--fg-3); }
@media (max-width: 47.99rem) { .tm-ask { display: grid; justify-items: start; } .tm-ask-owl { display: none; } }
.tm-ver { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--good, var(--primary)); }
.tm-quote { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); display: grid; gap: 6px; }
.tm-quote blockquote { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg); }
.tm-quote figcaption { font-size: 13px; color: var(--fg-2); display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; justify-content: inherit; }
.si .tm-quote figcaption { justify-content: center; }
/* round 2: at 1300px the full HUD and Sign in still ran 74px past the header's own box; the "/50 XP" and nav padding give way */
@media (min-width: 861px) and (max-width: 1440px) { .top:has(.hud:not(:empty)) .g-of { display: none; } .top:has(.hud:not(:empty)) .nav button { padding: 8px 9px; } }
/* round 2: with Start practicing, the light/dark button and Sign in (no pills yet), the CLT header was 43px wider than its box */
@media (min-width: 861px) and (max-width: 1440px) { .top:has(.acct-btn, .acct-in) .wrap { gap: 10px; } .top:has(.acct-btn, .acct-in) .nav button { padding: 8px 9px; } }
/* 1.103 (Todd): key test dates strip under the Today card (js/dates.js). A deep ink band in both themes; on phones it
   is one slim line that glides sideways when it does not fit, pauses under a finger, and holds still with reduced motion. */
.kd { --kd-bg: #1d2366; --kd-lab: #b9c2ff; --kd-val: #ffffff; --kd-ico: #8f9bff; --kd-em: #ffd66b;
  background: var(--kd-bg); color: var(--kd-lab); border-radius: 16px; border: 1px solid color-mix(in srgb, var(--kd-ico) 30%, transparent); overflow: hidden; }
:root[data-theme="dark"] .kd { --kd-bg: #191c47; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kd { --kd-bg: #191c47; } }
.kd-track { display: flex; }
.kd-row { flex: 1 1 auto; min-width: 0; }
.kd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; padding: 12px 18px; font: 500 15px/1.3 var(--f-body); }
.kd-copy { display: none; }
.kd-i { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: inherit; text-decoration: none; }
.kd-i svg { width: 20px; height: 20px; flex: none; color: var(--kd-ico); }
.kd-i b { color: var(--kd-val); font-weight: 650; }
.kd-i em { font-style: normal; color: var(--kd-em); font-weight: 600; margin-left: 2px; }
a.kd-reg { min-height: 40px; }
a.kd-reg b { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--kd-val) 45%, transparent); }
.kd-src { margin-left: auto; font-size: 12.5px; color: var(--kd-lab); opacity: .85; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; }
@media (hover: hover) { a.kd-reg:hover b { text-decoration-color: var(--kd-val); } .kd-src:hover { opacity: 1; text-decoration: underline; } }
@media (max-width: 47.99rem) {
  .kd { border-radius: 12px; }
  .kd-row { padding: 6px 14px; gap: 0 22px; font-size: 14px; }
  .kd.kd-run .kd-track { width: max-content; min-width: 100%; }
  .kd.kd-run .kd-row { flex: none; flex-wrap: nowrap; }
  .kd-src { margin-left: 0; }
  .kd.kd-run { overflow: hidden; }
  .kd.kd-run .kd-copy { display: flex; }
  .kd.kd-run .kd-track { animation: kd-glide var(--kd-s, 30s) linear infinite; }
  .kd.kd-run:hover .kd-track, .kd.kd-run:active .kd-track, .kd.kd-run:focus-within .kd-track { animation-play-state: paused; }
}
@keyframes kd-glide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

body.focus .kd { display: none; }

/* The sign-in card (Todd, October 29, 2026): Owl-y pops up over the sheet's top edge; Google's own button style */
.sheet:has(> .si) { overflow: visible; padding-top: 0; margin-top: 64px; }
.si { position: relative; display: grid; gap: 12px; text-align: center; justify-items: center; }
.si-x { position: absolute; top: 10px; right: -6px; }
.si-owl { margin-top: -52px; display: grid; justify-items: center; gap: 6px; animation: si-pop .24s cubic-bezier(.3, 1.5, .6, 1) both; }
.si-owl svg { filter: drop-shadow(0 6px 10px rgba(16, 12, 40, .18)); }
.si-say { font-size: 13.5px; font-weight: 700; color: var(--primary); background: var(--primary-soft); padding: 5px 12px; border-radius: 999px; animation: si-say .18s ease-out .16s both; }
@keyframes si-pop { from { transform: translateY(28px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes si-say { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.si-h { margin: 2px 0 0; font-size: 24px; line-height: 1.2; }
.si-h span { color: var(--primary); white-space: nowrap; }
.si-sub { margin: 0; color: var(--fg-2); max-width: 34ch; font-size: 15px; line-height: 1.5; }
.si .gsi, .si .si-form { width: min(360px, 100%); }
.si-form { text-align: left; }
.si-go { width: 100%; justify-content: center; }
.si-note { margin: 0; font-size: 13px; text-align: center; }
.si-alt { color: var(--primary); font-weight: 700; }
.si-legal { margin: 4px 0 0; font-size: 12.5px; color: var(--fg-3); max-width: 38ch; }
.si-legal a { color: var(--primary); font-weight: 600; }
.si .si-wait { width: min(360px, 100%); text-align: left; }
/* Google's sign-in button rules: white (dark: #131314) with a grey outline, the full-colour G, "Continue with Google" */
.gsi { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 20px; box-sizing: border-box; border-radius: 999px;
  background: #fff; border: 1px solid #747775; color: #1f1f1f; font: 500 16px/1 Roboto, "Segoe UI", Arial, sans-serif; letter-spacing: .25px; text-decoration: none; box-shadow: 0 2px 0 rgba(16, 12, 40, .08); }
.gsi svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) { .gsi:hover { box-shadow: 0 2px 6px rgba(16, 12, 40, .18); } }
.gsi:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gsi { background: #131314; border-color: #8e918f; color: #e3e3e3; } }
:root[data-theme="dark"] .gsi { background: #131314; border-color: #8e918f; color: #e3e3e3; }
.si-form[hidden], .si-alt[hidden] { display: none; }
/* Oct 29 2026 (Todd: a great value prop inside the app; js/value.js). The goal line on Today: one tap opens the plan.
   A full test's "What it means" card, and the honest official-vs-Owl table on Plans. */
.vgl { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--fg); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; min-height: 56px; }
.vgl > svg:first-child { width: 26px; height: 26px; flex: none; color: var(--primary); }
.vgl > svg:last-child { width: 18px; height: 18px; flex: none; color: var(--fg-3); }
.vgl-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vgl-t b { font-weight: 700; font-size: 15px; }
.vgl-t > span { color: var(--fg-2); font-size: 13.5px; line-height: 1.35; }
.vgl-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: 6px; }
.vgl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.vgl:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (hover: hover) { .vg:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); } }
.vm-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; }
.vm-k .eyebrow { white-space: nowrap; }
.vm-k { display: flex; flex-direction: column; gap: 2px; padding: 10px; min-width: 0; border-radius: 12px; background: var(--surface-2); }
.vm-k b { font: 700 clamp(19px, 5.4vw, 24px)/1.1 var(--f-display); }
.vm-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.vm a { color: var(--primary); }
.vo { margin-top: 14px; }
@media (max-width: 47.99rem) { .vo .cmp-tbl, .vo .cmp-tbl tbody, .vo .cmp-tbl tr, .vo .cmp-tbl td, .vo .cmp-tbl th { display: block; width: auto; } .vo .cmp-tbl thead { display: none; }
  .vo .cmp-tbl tr { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
  .vo .cmp-tbl th[scope=row] { padding: 0 0 4px; border: 0; } .vo .cmp-tbl td { padding: 4px 0; border: 0; font-size: 14px; }
  .vo .cmp-tbl td::before { content: attr(data-l); display: block; font-size: 12px; font-weight: 700; color: var(--fg-3); } }
/* a disabled main button (Check before an answer) still reads as the main action: a faded fill of its own colour, not a
   grey that matched Back and sank into the dark SAT player */
.btn.primary[disabled], .btn.primary:disabled { background: color-mix(in srgb, var(--primary) 32%, var(--surface)); border-color: transparent; color: var(--fg); }
/* the SAT question pill and number box: in dark mode a calm tinted pill instead of a white block */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sp-navbtn, :root:not([data-theme="light"]) .sp-num { background: var(--sat-soft); color: var(--sp-fg); box-shadow: inset 0 0 0 1.5px var(--sp-line); } }
:root[data-theme="dark"] .sp-navbtn, :root[data-theme="dark"] .sp-num { background: var(--sat-soft); color: var(--sp-fg); box-shadow: inset 0 0 0 1.5px var(--sp-line); }

/* Oct 29 2026: the National Merit planner (merit.js, /sat#satMerit) and its card on the family dashboard */
.nm-fields { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .nm-fields { grid-template-columns: minmax(200px, 1fr) auto auto; align-items: end; } }
.nm-fields .seg { flex-wrap: wrap; }
.nm-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nm-big > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nm-big span { font-size: 13px; }
.nm-big b { font: 800 clamp(30px, 7vw, 44px)/1.05 var(--f-display); color: var(--fg); }
.nm-big b.nm-ok { color: var(--sat-deep); }
.nm-bar { display: block; height: 10px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.nm-bar i { display: block; height: 100%; border-radius: inherit; background: var(--sat); }
.nm-cuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nm-cuts > span { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.nm-cuts > span > span { font-size: 12.5px; }
.nm-cuts b { font: 800 24px/1.1 var(--f-display); }
.nm-tbl tr.nm-here td { background: var(--sat-soft); font-weight: 700; }
.nm-lev-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.nm-lev-r .faint { font-size: 13px; }
.nm-road { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .nm-road { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .nm-road { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.nm-m { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--sat); border-radius: 12px; background: var(--surface); min-width: 0; }
.nm-m .muted, .nm-m .faint { font-size: 13.5px; }
.nm-m-d { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.nm-m.nm-ready, .nm-m.nm-test { border-left-color: var(--streak); }
.nm-lock { background: var(--surface-2); }
.nm-date { max-width: 340px; }
.nm-calc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.nm-calc .field span { font-size: 13.5px; font-weight: 600; }
.nm-calc-o { display: flex; flex-direction: column; gap: 2px; }
.nm-calc-o b { font: 800 34px/1.05 var(--f-display); color: var(--sat-deep); }
.nm-res { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--sat-soft); }
.nm-res b { font: 800 26px/1 var(--f-display); color: var(--sat-deep); }
.nm-chart .nm-tgt { border-top-color: var(--streak); }
.nm-src { font-size: 12.5px; margin: 0; }
.nm-src a { color: var(--primary); }
.nm-more > summary { list-style: none; display: inline-flex; cursor: pointer; }
.nm-more > summary::-webkit-details-marker { display: none; }
/* Admin › Inbox (Todd, October 29, 2026; js/inbox.js) */
.ibx-list { gap: 0; padding: 4px 0; }
.ibx-row { display: grid; gap: 2px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; color: var(--fg); font: inherit; cursor: pointer; min-height: 56px; }
.ibx-row:last-child { border-bottom: 0; }
.ibx-row.unread b, .ibx-row.unread .ibx-sub { font-weight: 800; }
.ibx-top { display: flex; justify-content: space-between; gap: 12px; min-width: 0; }
.ibx-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibx-top .faint { flex: none; font-size: 13px; }
.ibx-sub, .ibx-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ibx-sum { font-size: 13px; }
.ibx-tag { justify-self: start; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--fg-2); }
.ibx-tag.ok { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--fg); }
.ibx-msg { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.ibx-msg.out { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.ibx-meta { font-size: 13px; margin-bottom: 6px; }
.ibx-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ibx-ai { font-size: 14px; color: var(--fg-2); }
.ibx-th textarea { width: 100%; min-height: 180px; padding: 10px 12px; font: inherit; resize: vertical; }
.ibx-acts { flex-wrap: wrap; gap: 8px; }
.ibx-set summary, .ibx details summary { cursor: pointer; min-height: 32px; }
.ibx-addr { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ibx-log { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }
.h-cmp-more { margin: 12px 0 0; font-size: 14px; } .h-cmp-more a { color: var(--fg); }

/* ---------- Plans (js/plans.js, Oct 29, 2026): one plan per kind of family, the comparison, real test dates ---------- */
.pl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: start; margin-top: 14px; }
.pl-card { display: grid; gap: 10px; align-content: start; }
.pl-card.pl-lead { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.pl-name { margin: 0; font-size: 22px; }
.pl-pitch { margin: 0; font-size: 16px; color: var(--fg-2); }
.pl-amt { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pl-amt b { font: 600 38px/1 var(--f-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pl-amt span { color: var(--fg-3); font-size: 14px; }
.pl-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.pl-perks li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: 15px; line-height: 1.4; }
.pl-perks li svg { color: var(--good); margin-top: 2px; }
.pl-vs { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--good-soft); color: var(--fg); font-size: 14.5px; line-height: 1.45; }
.pl-date { margin: 6px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--lamp-soft); color: var(--fg); font-weight: 600; font-size: 15px; line-height: 1.45; max-width: 62ch; }
.pl-free { display: grid; gap: 10px; align-content: start; }
.pl-fam { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 14px; }
.pl-fam .btn { flex: none; }
.pl-have { justify-self: start; }
.pl-when { display: grid; gap: 12px; margin-top: 14px; }
.pl-when-r { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid var(--line); }
.pl-when-r .faint { font-size: 13.5px; line-height: 1.45; }
.pl-when-r .faint a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.pl-fine { margin-top: 14px; font-size: 12.5px; line-height: 1.5; }
.pl-strip { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.pl-strip .muted { font-size: 14px; line-height: 1.45; }
.pl-strip .btn { flex: none; }
.scrim .pl-amt b { font-size: 32px; }
/* Oct 29 2026 (Todd: high school kids keep the lands and puzzles, but nothing should feel like a kid app). The page
   carries <html data-tier="teen|middle|young"> (LP.tier, core.js). Teen: the land names sit on a dark glass label
   instead of a storybook ribbon, and Owl-y is a smaller coach beside a plain line instead of a big cartoon bubble. */
[data-tier="teen"] .wl-ribbon { display: none; }
[data-tier="teen"] .wl-banner { height: auto; width: max-content; max-width: 88%; padding: 10px 18px 11px; gap: 2px; border-radius: 14px; filter: none;
  background: rgba(14, 12, 34, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 10px 28px rgba(0, 0, 0, .32); }
[data-tier="teen"] .wl-tag { margin-top: 0; color: rgba(255, 255, 255, .72); letter-spacing: .12em; }
[data-tier="teen"] .wl-name { font-weight: 750; text-shadow: none; letter-spacing: -.015em; }
[data-tier="teen"] .wl-cr { position: static; justify-self: center; margin-top: 5px; padding: 2px 9px; border-width: 1px; background: rgba(255, 255, 255, .12); }
[data-tier="teen"] .td-owl svg { width: 48px; height: 48px; }
[data-tier="teen"] .td-bubble { padding: 8px 12px; border-radius: 12px; font-weight: 550; font-size: 14px; color: var(--fg-2);
  background: color-mix(in srgb, var(--surface) 78%, transparent); }
[data-tier="teen"] .td-bubble::before { display: none; }

/* Oct 29 2026: "Your week" (js/week.js), a Strava-style recap on each test's home: bars for Monday to Sunday, three
   numbers against the same days last week, the strongest and weakest skill, and one honest line on what paid adds. */
.wk { display: grid; gap: 14px; }
.wk-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; }
.wk-sub { font-size: 13.5px; line-height: 1.4; }
.wk-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 14px); gap: 5px; height: 58px; flex: none; }
.wk-bars li { display: grid; grid-template-rows: 1fr auto; gap: 4px; justify-items: center; min-width: 0; }
.wk-bars i { align-self: end; width: 100%; border-radius: 4px; background: var(--surface-2); }
.wk-bars li.on i { background: var(--primary); }
.wk-bars li.today span { color: var(--fg); font-weight: 800; }
.wk-bars li.later i { opacity: .5; }
.wk-bars span { font: 700 10px/1 var(--f-body); color: var(--fg-3); }
.wk-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wk-k { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); min-width: 0; }
.wk-k span { font-size: 12px; font-weight: 650; color: var(--fg-3); }
.wk-k b { font: 800 22px/1.1 var(--f-display); color: var(--fg); }
.wk-d { font-size: 12px; font-weight: 700; color: var(--fg-3); white-space: nowrap; }
.wk-d.up { color: var(--good-ink, var(--good)); } .wk-d.down { color: var(--fg-3); }
.wk-sk { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; color: var(--fg-2); }
.wk-sk b { color: var(--fg); font-weight: 650; }
.wk-up { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.45; color: var(--fg-2); }
.wk-up .linkbtn { padding: 0; font-size: 13.5px; font-weight: 650; color: var(--primary); }
.wk-more { justify-self: start; padding: 0; }
.wk-best { border-color: color-mix(in srgb, var(--lamp) 60%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--lamp) 12%, var(--surface)), var(--surface) 60%); }
.wk-best .eyebrow { color: var(--lamp-ink, var(--fg)); }
@media (max-width: 380px) { .wk-k b { font-size: 19px; } .wk-bars { grid-template-columns: repeat(7, 11px); gap: 4px; } }

/* Oct 29 2026 (Todd): the home hero card asks who and which grade, then lists the tests that fit (js/hub.js fitCard) */
.h-fit { gap: 14px; }
.h-fit-sub { margin: -4px 0 0; font-size: 15px; }
.h-fit-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.h-fit-b { display: grid; gap: 4px; align-content: center; text-align: left; font: inherit; color: var(--fg); background: var(--surface); border: 2px solid var(--line); border-radius: 16px; padding: 16px; min-height: 92px; cursor: pointer; box-shadow: 0 3px 0 var(--line); }
.h-fit-b b { font: 800 18px/1.15 var(--f-display); } .h-fit-b .faint { font-size: 13.5px; line-height: 1.3; }
.h-fit-grades { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.h-fit-g { min-height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); color: var(--fg); font: 800 16px/1 var(--f-display); cursor: pointer; box-shadow: 0 3px 0 var(--line); padding: 0 4px; }
.h-fit-b:active, .h-fit-g:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
@media (hover: hover) { .h-fit-b:hover, .h-fit-g:hover { border-color: var(--primary); } }
.h-fit-b:focus-visible, .h-fit-g:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.h-fit-list { display: grid; gap: 8px; }
.h-fit-r { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.h-fit-r .w-badge { flex: none; }
.h-fit-rt { gap: 2px; min-width: 0; flex: 1; } .h-fit-rt b { font-size: 15.5px; line-height: 1.2; } .h-fit-rt .faint { font-size: 13px; line-height: 1.3; }
.h-fit-r .btn { flex: none; }
.h-fit-skip { justify-self: start; font-size: 14px; min-height: 40px; padding: 0 2px; }
.h-fit .h-demo-note .linkbtn { font-size: inherit; padding: 0; min-height: 0; }
@media (max-width: 47.99rem) {
  .h-fit-grades { grid-template-columns: repeat(5, 1fr); }
  .h-fit-b { min-height: 84px; padding: 14px 12px; } .h-fit-b b { font-size: 16.5px; }
  .h-fit-r { padding: 10px; gap: 10px; } .h-fit-r .btn { padding: 0 12px; }
}
.h-kid { width: 100%; text-align: left; font: inherit; color: var(--fg); cursor: pointer; }
.h-kid-go { font: 800 22px/1 var(--f-display); color: var(--fg-2); flex: none; }
.h-kid .w-badge { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--primary); color: #fff; font: 800 18px/1 var(--f-display); }
.h-up { display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; background: var(--primary-soft); }
.h-up b { font-size: 15px; } .h-up .muted { font-size: 13.5px; } .h-up .linkbtn { justify-self: start; padding: 0; min-height: 40px; font-size: 14px; }
/* Oct 29 2026 (Todd): a tap anywhere on a test card opens it, not just its button. The button stays the one control
   (one tab stop, one name for screen readers); its ::after covers the card. */
.cat-i, .h-fit-r { position: relative; }
.cat-i .cat-go::after, .h-fit-r .btn::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } /* the card's corners, not the pill's */
.cat-i, .h-fit-r { cursor: pointer; transition: border-color .12s, transform .12s; }
@media (hover: hover) { .cat-i:hover, .h-fit-r:hover { border-color: var(--primary); } }
.cat-i:active, .h-fit-r:active { transform: translateY(1px); }
.cat-i .cat-go:active, .h-fit-r .btn:active { transform: none; } /* a moved button would pull its ::after (the card's tap area) with it */
.cat-i:has(.cat-go:focus-visible), .h-fit-r:has(.btn:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
/* Admin → "View as" (October 29, 2026): the strip at the top of the page during a preview */
.va-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 12px; padding: 8px 16px; background: var(--warn-soft); color: var(--fg); font-size: 14px; font-weight: 600; text-align: center; }
/* 1.121 (Todd: Owl-y's words on a phone sat off to his left; "should be a little thought box directly above it"): every
   bubble from an Owl-y on the page is a small thought bubble centred over his head, with two dots trailing down to him.
   js/owl.js place() nudges it sideways to stay on screen (--say-dx; the dots stay over Owl-y) or drops it below him
   (.below) when the header would cover it; inside a card that clips (CLT Today) it slides down up to 14px (--say-dy). */
@media (max-width: 47.99rem) {
  .owl-spot > .owl-say, .owl-spot.demo-owl > .owl-say, .h-demo .demo-owl > .owl-say {
    left: 50% !important; right: auto !important; top: auto !important; bottom: calc(100% + 16px) !important; margin: 0 !important;
    transform: translate(calc(-50% + var(--say-dx, 0px)), var(--say-dy, 0px)) !important; width: max-content; max-width: min(220px, calc(100vw - 24px)) !important;
    font-size: 13.5px; text-align: center; border-radius: 18px; padding: 8px 12px; z-index: 30; }
  .owl-spot > .owl-say::before, .owl-spot > .owl-say::after { content: ""; position: absolute; left: calc(50% - var(--say-dx, 0px)); border-radius: 50%;
    background: var(--surface); border: 1px solid var(--line-strong); }
  .owl-spot > .owl-say::before { width: 10px; height: 10px; bottom: -10px; margin-left: -9px; }
  .owl-spot > .owl-say::after { width: 6px; height: 6px; bottom: -17px; margin-left: -1px; }
  .owl-spot > .owl-say.below { bottom: auto !important; top: calc(100% + 16px) !important; }
  .owl-spot > .owl-say.below::before { bottom: auto; top: -10px; } .owl-spot > .owl-say.below::after { bottom: auto; top: -17px; }
}
/* Oct 29 2026 (Todd): the full list waits for the two answers or "See every test" (it read like a catalogue) */
.h-cat-later { display: none; }
/* Oct 29 2026 (Todd): Owl-y on the home card about three times bigger, standing on its top edge; the card sits lower to make room */
.h-demo .demo-owl.h-owl { top: -186px; right: 10px; }
.h-demo .demo-owl.h-owl svg { width: 196px; height: 196px; }
.h-art .h-demo.h-fit { margin-top: 176px; }
@media (max-width: 47.99rem) {
  .h-demo .demo-owl.h-owl { top: -132px; right: 4px; margin-left: 0; left: auto; }
  .h-demo .demo-owl.h-owl svg { width: 142px; height: 142px; }
  .h-art .h-demo.h-fit { margin-top: 200px; } /* room for his words above him without covering the button */
  .h-demo .owl-spot.h-owl > .owl-say { max-width: min(310px, calc(100vw - 24px)) !important; } /* wide and short, so it clears the button above */
}
/* Oct 29 2026 (Todd): the first week after the grade pick, and a sample of the parent report */
.h-w1 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.h-w1 li { display: grid; gap: 6px; align-content: start; padding: 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.h-w1-d { justify-self: start; font: 800 12px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--primary); background: var(--primary-soft); padding: 6px 10px; border-radius: 999px; }
.h-w1 b { font: 800 18px/1.2 var(--f-display); }
.h-rep-grid { display: grid; grid-template-columns: 1fr minmax(0, 420px); gap: 32px; align-items: center; }
.h-rep { position: relative; margin: 0; display: grid; gap: 14px; padding: 22px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.h-rep-tag { position: absolute; top: -12px; left: 22px; background: var(--warn-soft); color: var(--fg); font-weight: 700; }
.h-rep .w-badge.h-rep-av { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--primary); color: #fff; font: 800 18px/1 var(--f-display); }
.h-rep-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.h-rep-days span { display: grid; place-items: center; height: 32px; border-radius: 10px; font: 700 13px/1 var(--f-display); background: var(--surface-2); color: var(--fg-2); }
.h-rep-days span.on { background: var(--good-soft); color: var(--good); box-shadow: inset 0 0 0 2px var(--good); }
.h-rep-n { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.h-rep-n div { display: grid; gap: 2px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.h-rep-n b { font: 800 22px/1 var(--f-display); } .h-rep-n span { font-size: 13px; color: var(--fg-2); }
.h-rep-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.h-rep-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: color-mix(in srgb, var(--primary) 70%, var(--surface)); }
.h-rep-next { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--primary-soft); font-size: 14.5px; }
.h-rep figcaption { font-size: 12.5px; }
@media (max-width: 47.99rem) { .h-w1 { grid-template-columns: 1fr; } .h-rep-grid { grid-template-columns: 1fr; gap: 22px; } }
/* the 7-day money-back guarantee seal (Todd, October 29, 2026): only on the plan cards and the upgrade sheet */
.pl-seal { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--good) 35%, var(--line)); background: color-mix(in srgb, var(--good) 7%, transparent); }
.pl-seal-i { flex: none; width: 40px; height: 40px; color: var(--good); }
.pl-seal-t { display: grid; gap: 2px; min-width: 0; }
.pl-seal-t b { font-size: 15px; letter-spacing: .01em; }
.pl-seal-t span { font-size: 13.5px; line-height: 1.4; color: var(--fg-2); }
/* Sell pages (Todd, October 29, 2026: "much more pitchy"): promise, price box, four big benefits, them vs us */
.pl-hero { display: grid; gap: 18px; align-items: start; margin-bottom: 18px; }
@media (min-width: 900px) { .pl-hero { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 32px; align-items: center; } }
.pl-hero-t { display: grid; gap: 10px; min-width: 0; }
.pl-h { font: 800 clamp(30px, 5.2vw, 50px)/1.04 var(--f-display); letter-spacing: -.03em; text-wrap: balance; }
.pl-sub { font-size: 17px; line-height: 1.5; color: var(--fg-2); max-width: 36em; margin: 0; text-wrap: pretty; }
.pl-chip { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 7px 14px 7px 10px; border-radius: 99px; background: var(--primary-soft); color: var(--fg); font-size: 14px; line-height: 1.35; margin: 2px 0 0; }
.pl-chip svg { flex: none; width: 18px; height: 18px; color: var(--primary); }
.pl-buy { display: grid; gap: 12px; padding: 20px; border: 2px solid var(--primary); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--primary) 70%, transparent); }
.pl-buy .btn.primary { min-height: 52px; font-size: 16.5px; }
.pl-buy .pl-amt b { font-size: 46px; }
.pl-wins { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .pl-wins { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.pl-wins li { display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.pl-wins b { font: 750 16px/1.25 var(--f-body); }
.pl-wins span:not(.pl-wi) { font-size: 13.5px; line-height: 1.4; color: var(--fg-2); }
.pl-wi { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--primary-soft); color: var(--primary); margin-bottom: 6px; }
.pl-wi svg { width: 26px; height: 26px; }
.pl-sheet .pl-wins, .sheet .pl-wins { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sheet .pl-wins li { padding: 12px 10px; }
.sheet .pl-wins span:not(.pl-wi) { display: none; }
.sheet .pl-wi { width: 38px; height: 38px; } .sheet .pl-wi svg { width: 22px; height: 22px; }
.sheet .pl-wins b { font-size: 14px; }
.pl-vs2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; margin: 0 0 18px; }
.pl-vs2-side { display: grid; gap: 4px; align-content: start; padding: 16px; border-radius: 16px; min-width: 0; }
.pl-vs2-side > span:last-child { font-size: 13.5px; line-height: 1.4; }
.pl-them { background: var(--surface-2); color: var(--fg-2); }
.pl-them .pl-vs2-amt { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--bad); color: var(--fg-2); }
.pl-us { background: var(--good-soft); border: 2px solid var(--good); color: var(--fg); }
.pl-us .eyebrow { color: var(--good); }
.pl-vs2-amt { font: 800 clamp(26px, 4vw, 36px)/1 var(--f-display); letter-spacing: -.02em; }
.pl-vs2-x { align-self: center; font: 800 13px/1 var(--f-body); text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.pl-vs2-save { grid-column: 1 / -1; margin: 0; text-align: center; font: 750 16px/1.3 var(--f-body); color: var(--good); }
.pl-vs2-c { margin: 0; } .pl-vs2-c .pl-vs2-side { padding: 12px; } .pl-vs2-c .pl-vs2-amt { font-size: 24px; }
.pl-all > summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; font-weight: 650; color: var(--primary); list-style: none; }
.pl-all > summary::-webkit-details-marker { display: none; }
.pl-all > summary::after { content: "+"; margin-left: 8px; font-weight: 800; }
.pl-all[open] > summary::after { content: "–"; }
.pl-free2 { display: grid; gap: 10px; margin: 0 0 18px; padding: 16px; border-radius: 16px; border: 1px dashed var(--line-strong); }
.pl-free2 ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pl-free2 li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.pl-free2 li svg { color: var(--good); flex: none; }
.pl-sh-h { text-wrap: balance; }
.pl-card .pl-pitch { font: 700 18px/1.3 var(--f-display); color: var(--fg); margin: 0; }
.pl-mini { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pl-mini li { display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 14.5px; line-height: 1.3; min-width: 0; }
.pl-mini .pl-wi { width: 36px; height: 36px; border-radius: 11px; margin: 0; flex: none; } .pl-mini .pl-wi svg { width: 20px; height: 20px; }

/* Oct 29 2026 (Todd's catalogue screenshot): every card's tile is one size and sits at the top, whether it is a painted
   picture or a letter tile; tile text is centred (test/crawl.mjs "tiles in a list differ in size") */
.w-badge { text-align: center; }
.w-badge.two { line-height: 1.02; letter-spacing: -.01em; }
.cat-i > .w-badge, .cat-i > .cat-art { align-self: start; width: 64px !important; height: 64px !important; }
@media (max-width: 30rem) { .cat-i > .w-badge, .cat-i > .cat-art { width: 52px !important; height: 52px !important; } .cat-i > .w-badge { font-size: 15px !important; } .cat-i > .w-badge.two { font-size: 12px !important; } }

/* Oct 29 2026 (Todd: the numbers should move with their squares, a little smaller, and more glam and magic in the
   lands). The whole jump floats now, number, crown and all, each a beat apart, so the path drifts like stepping stones;
   the next jump rides higher with Owl-y on it and a few sparkles. Only lands on screen move (.live, js/world.js), only
   with motion on, only transform and opacity. */
.wt-lab { font-size: 20px; }
.wt-lab svg { width: 24px; height: 24px; }
.owl-motion .wt.cur .wt-svg { animation: none; }
.wt-at { --fd: 0s; } .wt-at:nth-of-type(3n+1) { --fd: -1.4s; } .wt-at:nth-of-type(3n+2) { --fd: -2.8s; }
/* the drawing, number, crown and art move (with the translate property, so the press-down, pop and wiggle transforms
   still work); the button itself stays put, so a tap always lands where the finger is */
.owl-motion .wl-zone.live .wt-at > .wt > :is(.wt-svg, .wt-lab, .wt-crown, .wt-chest-art, .wt-gate-art) { animation: wt-float 4.2s ease-in-out var(--fd) infinite; }
.owl-motion .wl-zone.live .wt-at.is-cur > .wt > :is(.wt-svg, .wt-lab, .wt-crown) { animation: wt-bob2 1.8s ease-in-out infinite; }
.owl-motion .wl-zone.live .wt-at.is-cur > .wt-owl:not(.wt-hop) { animation: wt-owlbob 1.8s ease-in-out infinite; }
.owl-motion .wl-zone.live .wt.wt-pop > .wt-svg { animation: wt-pop .45s ease-out both; }
.owl-motion .wl-zone.live .wt-chest.ready > .wt-chest-art { animation: ch-wiggle 2.6s ease-in-out infinite, wt-float 4.2s ease-in-out var(--fd) infinite; }
.wt.locked > * { animation: none !important; }
@keyframes wt-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes wt-bob2 { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes wt-owlbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* sparkles round the next jump */
.wt-spark { position: absolute; inset: -14px -10px 0; pointer-events: none; z-index: 4; display: none; }
.owl-motion .wl-zone.live .wt-spark { display: block; }
.wt-spark i { position: absolute; width: 8px; height: 8px; opacity: 0; background: #fff6c8;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 4px #ffd23f); animation: wt-tw 2.4s ease-in-out infinite; }
.wt-spark i:nth-child(1) { left: 6%; top: 30%; } .wt-spark i:nth-child(2) { right: 4%; top: 18%; animation-delay: .6s; }
.wt-spark i:nth-child(3) { left: 22%; top: 78%; animation-delay: 1.2s; } .wt-spark i:nth-child(4) { right: 16%; top: 70%; animation-delay: 1.8s; }
@keyframes wt-tw { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; } }
[data-tier="teen"] .wt-spark i { width: 6px; height: 6px; background: #fff; filter: drop-shadow(0 0 3px rgba(255,255,255,.9)); }
/* a slow gloss across cleared (gold) jumps, one at a time down the path */
.wt.done::after { content: ""; position: absolute; left: -19px; top: -14px; width: 100px; height: 96px; pointer-events: none; opacity: 0;
  clip-path: polygon(50% 16.7%, 96% 41.7%, 50% 66.7%, 4% 41.7%);
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%) -120% 0 / 250% 100% no-repeat; }
.owl-motion .wl-zone.live .wt.done::after { animation: wt-gloss 7s ease-in-out infinite; }
.owl-motion .wl-zone.live .wt-at:nth-of-type(4n+1) > .wt.done::after { animation-delay: 1.75s; }
.owl-motion .wl-zone.live .wt-at:nth-of-type(4n+2) > .wt.done::after { animation-delay: 3.5s; }
.owl-motion .wl-zone.live .wt-at:nth-of-type(4n+3) > .wt.done::after { animation-delay: 5.25s; }
@keyframes wt-gloss { 0%, 70% { opacity: 0; background-position: -120% 0; } 74% { opacity: 1; } 90% { opacity: 1; background-position: 120% 0; } 92%, 100% { opacity: 0; background-position: 120% 0; } }
/* the land's own life: motes, stars, fireflies, spray, and a breathing light shaft indoors */
.wl-fx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; display: none; }
.owl-motion .wl-zone.live .wl-fx { display: block; }
.wl-fx i { position: absolute; width: calc(8px * var(--z)); height: calc(8px * var(--z)); border-radius: 50%; opacity: 0; animation: var(--fx) var(--t) ease-in-out var(--d) infinite; }
.wl-beam::before { content: ""; position: absolute; left: -10%; top: -5%; width: 70%; height: 70%; transform: rotate(18deg); opacity: .0;
  background: linear-gradient(180deg, rgba(255, 228, 160, .45), transparent 75%); filter: blur(12px); animation: fx-beam 9s ease-in-out infinite; }
.fx-mote { --fx: fx-mote; background: #ffe7b0; box-shadow: 0 0 6px 1px rgba(255, 220, 140, .6); }
.fx-star { --fx: fx-star; background: #fff; box-shadow: 0 0 6px 2px rgba(200, 210, 255, .8); }
.fx-fly { --fx: fx-fly; background: #eaff9a; box-shadow: 0 0 8px 3px rgba(210, 255, 120, .65); }
.fx-spray { --fx: fx-spray; background: #e8fbff; box-shadow: 0 0 6px 2px rgba(190, 240, 255, .7); }
.wl-fx i.fx-glint { border-radius: 0; width: calc(10px * var(--z)); height: calc(10px * var(--z)); background: #fff8d8; box-shadow: none;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); --fx: fx-star; }
[data-tier="teen"] .wl-fx i { width: calc(5px * var(--z)); height: calc(5px * var(--z)); }
[data-tier="teen"] .fx-mote, [data-tier="teen"] .fx-fly { background: #fff; box-shadow: 0 0 6px 2px rgba(255, 255, 255, .6); }
@keyframes fx-mote { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .95; } 70% { opacity: .7; } 100% { opacity: 0; transform: translate(18px, -60px); } }
@keyframes fx-star { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .95; transform: scale(1); } }
@keyframes fx-fly { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: .9; transform: translate(14px, -10px); } 50% { opacity: .3; transform: translate(-8px, -22px); } 75% { opacity: .9; transform: translate(10px, -34px); } 100% { opacity: 0; transform: translate(0, -44px); } }
@keyframes fx-spray { 0% { opacity: 0; transform: translateY(0) scale(.6); } 40% { opacity: .8; transform: translateY(-14px) scale(1); } 100% { opacity: 0; transform: translateY(-30px) scale(.5); } }
@keyframes fx-beam { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .wl-fx, .wt-spark, .wt.done::after { display: none !important; } .wt-at > .wt > *, .wt-at > .wt-owl { animation: none !important; } }
/* Admin › Dashboard (js/owner.js, October 29, 2026) and the grouped Admin tabs */
.admin-tabs .adm-grp { display: grid; gap: 6px; flex: 1 1 100%; }
.admin-tabs .adm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 2px; border-radius: 99px; background: var(--bad); color: var(--surface); font: 700 12px/1 var(--f-body); }
.od { gap: 22px; }
.od-sec { gap: 12px; }
.od-sec > .split .h-sec { margin: 0; }
.od-note { font-size: 13px; }
.od-sub { font-size: 13px; color: var(--fg-3); }
.od-kpi b { font-size: 30px; }
.od-kpi .od-sub { font-size: 12.5px; }
@media (max-width: 600px) { .od-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .od-kpi b { font-size: 24px; } }
.od-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.od-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--line); }
.od-list li.warn { border-left-color: var(--lamp, var(--warn)); } .od-list li.bad { border-left-color: var(--bad); }
.od-list li > .btn { flex: none; }
@media (max-width: 600px) { .od-list li { flex-direction: column; align-items: stretch; } .od-list li > .btn { align-self: flex-start; } }
.od-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.od-row:last-of-type { border-bottom: 0; }
.od-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-money td, .od-money th { white-space: nowrap; }
.od-money .od-total td { font-weight: 700; border-top: 2px solid var(--line); }
.od-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 3px; align-items: end; height: 110px; }
.od-bars i { display: block; min-height: 1px; border-radius: 3px 3px 0 0; background: var(--primary); }
.od-bars i.neg { background: var(--bad); }
.od-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-3); }
.od-funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.od-funnel li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto 3.2em; gap: 10px; align-items: center; font-size: 14px; }
.od-funnel li b { font-variant-numeric: tabular-nums; text-align: right; }
.od-funnel li .od-sub { text-align: right; }
@media (max-width: 600px) { .od-funnel li { grid-template-columns: minmax(0, 1fr) auto 3em; } .od-funnel li .fbar { grid-column: 1 / -1; grid-row: 2; } }
.od-kpi { align-content: start; }
.od-t th, .od-t td { padding: 8px 6px; }
.od-t th:first-child, .od-t td:first-child { padding-left: 0; } .od-t th:last-child, .od-t td:last-child { padding-right: 0; }
@media (max-width: 600px) { .od-t { font-size: 13.5px; } .od-t th { white-space: normal; } }
.h-own { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; padding-bottom: 4px; font-size: 14px; font-weight: 600; color: var(--fg-2); }

/* Learnables 1: spelling (js/spell.js). The look follows the level: .spl-little (pre-K to grade 2) bright and round,
 * .spl-mid (grades 3 to 5) playful but cleaner, .spl-teen (grade 6 to college) sleek, like a chess site. Motion only
 * follows what the student did and is off with reduced motion. */
:root { --spl: #0f766e; --sl-ink: #ffffff; --sl-soft: #d5f5ef; --sl-edge: #0a524c; --sl-ok: #15803d; --sl-ok-bg: #dcfce7; --sl-fix: #8a4b00; --sl-fix-bg: #fde9c4; --sl-bad: #b42318; --sl-bad-bg: #fde4e1;
  --sl-hero-a: #fff2c7; --sl-hero-b: #d9f2ff; --sl-slab: #12352f; --sl-slab-2: #1d4d44; --sl-slab-ink: #f1fbf8; --sl-slab-ink2: #b9ded5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --spl: #5eead4; --sl-ink: #042f2e; --sl-soft: #10332f; --sl-edge: #2bb3a0; --sl-ok: #6ee7a0; --sl-ok-bg: #12351f; --sl-fix: #ffc46b; --sl-fix-bg: #3d2c10; --sl-bad: #ff9a8c; --sl-bad-bg: #3e1d1a;
  --sl-hero-a: #2d2614; --sl-hero-b: #11293a; --sl-slab: #0d2622; --sl-slab-2: #143a34; } }
:root[data-theme="dark"] { --spl: #5eead4; --sl-ink: #042f2e; --sl-soft: #10332f; --sl-edge: #2bb3a0; --sl-ok: #6ee7a0; --sl-ok-bg: #12351f; --sl-fix: #ffc46b; --sl-fix-bg: #3d2c10; --sl-bad: #ff9a8c; --sl-bad-bg: #3e1d1a;
  --sl-hero-a: #2d2614; --sl-hero-b: #11293a; --sl-slab: #0d2622; --sl-slab-2: #143a34; }
body.world-spell { --primary: var(--spl); --primary-ink: var(--sl-ink); --primary-soft: var(--sl-soft); --primary-edge: var(--sl-edge); }
.w-spell { --wc: var(--spl); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.spl-h1 { font: 800 clamp(26px, 5.5vw, 38px)/1.12 var(--f-display); margin: 0; text-wrap: balance; }
.spl-h2 { font: 700 19px/1.25 var(--f-display); margin: 0; }
.spl-sub { font-size: 17px; line-height: 1.5; color: var(--fg-2); margin: 0; max-width: 60ch; }
.spl-kicker { font: 700 13px/1.2 var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--spl); }
.spl-q { font-weight: 700; margin: 4px 0 0; }
.spl-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(135deg, var(--sl-hero-a), var(--sl-hero-b)); }
.spl-big { min-height: 52px; padding: 0 26px; font-size: 17px; }
.spl-chip { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 600 14px/1 var(--f-body); cursor: pointer; }
.spl-chip[aria-pressed="true"] { background: var(--spl); border-color: var(--spl); color: var(--sl-ink); }
.spl-chip.static { cursor: default; }
.spl-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; } /* even rows, not ragged */
.spl-two { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.spl-how { margin: 0; padding-left: 22px; display: grid; gap: 8px; color: var(--fg-2); }

/* the grade meter */
.spl-meter { display: grid; gap: 8px; }
.spl-grade { font: 800 34px/1.05 var(--f-display); color: var(--spl); }
.spl-bar { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.spl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sl-edge), var(--spl)); }
.spl-bar-l { font-size: 12px; }
.spl-squares { font-size: 26px; letter-spacing: 4px; margin: 0; }

/* themes and lists */
.spl-themes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.spl-theme { display: grid; justify-items: start; gap: 4px; text-align: left; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; min-height: 128px; }
.spl-theme b { font: 700 16px/1.2 var(--f-display); }
.spl-theme .faint { font-size: 13px; }
.spl-t-ico { font-size: 30px; line-height: 1; }
.spl-lists { display: flex; flex-wrap: wrap; gap: 10px; }
.spl-list { display: grid; gap: 2px; text-align: left; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; min-height: 44px; }
.spl-list-row { gap: 12px; } .spl-list-w { overflow-wrap: anywhere; font-size: 14px; }
.spl-voice { gap: 8px; }
@media (hover: hover) { .spl-theme:hover, .spl-list:hover { border-color: var(--spl); } .spl-chip:hover { border-color: var(--spl); } }

/* the player */
.spl-play { max-width: 760px; gap: 18px; justify-items: stretch; }
.spl-play > * { width: 100%; min-width: 0; }
.spl-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.spl-prog { height: 14px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.spl-prog i { display: block; height: 100%; border-radius: inherit; background: var(--spl); transition: width .25s ease; }
.spl-count { font-weight: 700; color: var(--fg-2); }
.spl-stage { display: grid; gap: 16px; }
.spl-stage > *, .spl-kb-r { min-width: 0; }
.spl-ask { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.spl-say { gap: 8px; }
.spl-say.on { border-color: var(--spl); color: var(--spl); }
.spl-say.on .w1, .spl-say.on .w2 { animation: spl-wave .9s ease-in-out infinite; }
.spl-say.on .w2 { animation-delay: .15s; }
@keyframes spl-wave { 50% { opacity: .25; } }
.spl-sent { font-size: 18px; line-height: 1.5; margin: 0; color: var(--fg-2); }
.spl-blank { display: inline-block; min-width: 4.5em; border-bottom: 3px solid var(--spl); color: transparent; line-height: 1; }
.spl-def { margin: 0; color: var(--fg-2); }
.spl-hint { justify-self: start; }
.spl-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.spl-in { width: 100%; min-width: 0; min-height: 64px; padding: 0 18px; border-radius: 16px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 600 clamp(24px, 6vw, 32px)/1 var(--f-mono); letter-spacing: .06em; text-align: center; caret-color: var(--spl); }
.spl-in:focus { outline: none; border-color: var(--spl); box-shadow: 0 0 0 4px var(--sl-soft); }
.spl-in::placeholder { color: var(--fg-3); letter-spacing: .02em; font-size: .7em; }
.spl-check { min-height: 64px; padding: 0 24px; font-size: 17px; border-radius: 16px; }
.spl-fix-l { grid-column: 1 / -1; font-weight: 700; }
.spl-fb { display: grid; gap: 10px; padding: 16px 18px; border-radius: 18px; border: 2px solid var(--line); }
.spl-fb.ok { border-color: var(--sl-ok); background: var(--sl-ok-bg); }
.spl-fb.no { border-color: var(--sl-fix); background: var(--sl-fix-bg); }
.spl-fb-h { font: 700 19px/1.3 var(--f-display); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spl-tip { margin: 0; color: var(--fg); }
.spl-act { display: flex; justify-content: center; }
.spl-cmp { display: grid; gap: 8px; }
.spl-tiles { display: flex; flex-wrap: wrap; gap: 5px; }
.spl-tile { display: inline-grid; place-items: center; width: 40px; height: 46px; border-radius: 10px; font: 700 24px/1 var(--f-mono); background: var(--surface); border: 2px solid var(--line-strong); color: var(--fg); }
.spl-tile.ok { background: var(--sl-ok-bg); border-color: var(--sl-ok); color: var(--fg); }
.spl-tile.fix { background: var(--surface); border-color: var(--sl-fix); color: var(--sl-fix); box-shadow: inset 0 -4px 0 var(--sl-fix); }
.spl-tile.sm { width: 30px; height: 34px; font-size: 17px; border-width: 1px; }
.spl-tile.bad { color: var(--sl-bad); border-color: var(--sl-bad); text-decoration: line-through; }
.spl-mine { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.spl-fair { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 13px; margin: 0; text-align: center; }
.spl-kb { display: grid; gap: 7px; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.spl-kb-r { display: flex; gap: 5px; justify-content: center; }
.spl-key { flex: 1 1 0; max-width: 48px; min-width: 0; height: 52px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 600 20px/1 var(--f-mono); box-shadow: 0 2px 0 var(--line-strong); cursor: pointer; padding: 0; }
.spl-key.wide { flex: 1.5 1 0; max-width: 64px; font-size: 18px; }
.spl-key.on { transform: translateY(2px); box-shadow: none; background: var(--sl-soft); }
.spl-kb-go { flex: 1; max-width: 420px; }
/* 2.0 (Todd): the letter area is one touch surface (js/spell.js types the key nearest the finger, gaps and edges included);
   QWERTY rows are staggered like a real keyboard; Check sits below a gap so a slip down never submits; the letter pops up
   above the finger */
.spl-kb-keys { display: grid; gap: 7px; position: relative; touch-action: none; -webkit-touch-callout: none; }
.spl-kb-keys.qw .spl-kb-r:nth-child(2) { padding-inline: calc((100% + 5px) / 20); }
.spl-kb-gor { margin-top: 8px; }
.spl-pop { position: absolute; z-index: 2; min-width: 46px; height: 58px; padding: 0 8px; display: grid; place-items: center; border-radius: 12px; pointer-events: none;
  background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); font: 700 30px/1 var(--f-mono); }
.spl-pop[hidden] { display: none; }
.shake { animation: spl-shake .3s ease; }
@keyframes spl-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* sheets and results */
.spl-sheet-h { font: 700 19px/1.3 var(--f-display); }
.spl-res { justify-items: center; text-align: center; position: relative; overflow: hidden; }
.spl-badge-row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.spl-medal { font-size: 30px; }
.spl-words { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.spl-words li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.spl-words li.ok > span:first-child { color: var(--sl-ok); font-weight: 700; } .spl-words li.no > span:first-child { color: var(--sl-bad); font-weight: 700; }
.spl-words b { font-family: var(--f-mono); }

/* progress (data-first, the same in every look) */
.spl-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.spl-kpi { display: grid; gap: 4px; padding: 16px; } .spl-kpi b { font: 800 28px/1.1 var(--f-display); }
.spl-spark { width: 100%; height: 80px; color: var(--spl); }
.spl-pats { display: grid; gap: 8px; }
.spl-pat { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 3.2em 2.5em; gap: 10px; align-items: center; font-size: 14px; }
.spl-pbar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.spl-pbar i { display: block; height: 100%; background: var(--sl-ok); } .spl-pbar i.mid { background: var(--sl-fix); } .spl-pbar i.lo { background: var(--sl-bad); }

/* little ones: big, bright and round */
.spl-little { font-family: var(--f-kid, var(--f-body)); }
.spl-little .spl-h1, .spl-little .spl-h2, .spl-little .spl-theme b, .spl-little .spl-fb-h { font-family: var(--f-kid, var(--f-display)); font-weight: 700; }
.spl-little .spl-hero { border-radius: 32px; border-width: 2px; }
.spl-little .spl-theme { border-radius: 24px; border-width: 2px; min-height: 140px; }
.spl-little .spl-t-ico { font-size: 40px; }
.spl-little .spl-in { min-height: 76px; font-size: 36px; border-radius: 22px; }
.spl-little .spl-tile { width: 48px; height: 56px; font-size: 30px; border-radius: 14px; }
.spl-little .spl-key { height: 58px; border-radius: 14px; font-size: 22px; }
.spl-little .spl-ask, .spl-little .card { border-radius: 24px; }

/* grade 6 and up: a sleek, dark slab hero; square tiles */
.spl-teen .spl-hero { background: linear-gradient(135deg, var(--sl-slab), var(--sl-slab-2)); border-color: transparent; color: var(--sl-slab-ink); }
.spl-teen .spl-hero .spl-kicker { color: #8ff0dc; } .spl-teen .spl-hero .spl-sub { color: var(--sl-slab-ink2); }
.spl-teen .spl-hero .spl-chip { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: var(--sl-slab-ink); }
.spl-teen .spl-hero .btn.primary { background: #5eead4; border-color: #5eead4; color: #042f2e; box-shadow: 0 3px 0 #2bb3a0; }
.spl-teen .spl-theme { border-radius: 12px; } .spl-teen .spl-tile { border-radius: 6px; } .spl-teen .spl-ask { border-radius: 14px; }
.spl-teen .spl-in { border-radius: 10px; } .spl-teen .spl-key { border-radius: 6px; }

@media (max-width: 47.99rem) {
  .spl-hero { grid-template-columns: 1fr; justify-items: start; padding: 18px; gap: 12px; }
  .spl-hero .spl-owl svg { width: 72px; height: 72px; }
  .spl-ask { grid-template-columns: 1fr; padding: 14px; gap: 10px; } .spl-ask .spl-owl-s { display: none; }
  .spl-little .spl-ask { grid-template-columns: auto minmax(0, 1fr); } .spl-little .spl-ask .spl-owl-s { display: block; } .spl-little .spl-ask .spl-owl-s svg { width: 56px; height: 56px; }
  .spl-form { grid-template-columns: 1fr; }
  .spl-play { padding-block: 12px 28px; gap: 12px; }
  /* the touch surface reaches into the page margin, so the keys get wider and an edge tap still lands */
  .spl-kb-keys { margin-inline: -12px; padding-inline: 2px; }
  .spl-kb-keys .spl-kb-r { gap: 4px; } .spl-kb-keys.qw .spl-kb-r:nth-child(2) { padding-inline: calc((100% + 4px) / 20); }
  .spl-kb-keys .spl-key { max-width: none; }
  .spl-tile { width: 34px; height: 40px; font-size: 21px; }
  .spl-pat { grid-template-columns: minmax(0, 1fr) 3em 2.4em; } .spl-pat .spl-pbar { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: reduce) { .spl-say.on .w1, .spl-say.on .w2, .shake { animation: none; } .spl-prog i { transition: none; } }
/* 1.86: a word with no recording is shown for three seconds, then hidden (look, cover, write, check) */
.spl-peek { margin: 0; font: 800 clamp(28px, 7vw, 40px)/1.1 var(--font-display, system-ui); letter-spacing: .02em; color: var(--fg); }
@media (prefers-reduced-motion: no-preference) { .spl-peek:not([hidden]) { animation: spl-peek .2s ease-out; } }
@keyframes spl-peek { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* 1.92: the spelling welcome card shows a painted storybook meadow (Cloudflare Workers AI) on its right side, the same
   way Junior's card does. The teen look keeps its plain slab. */
.spl-hero { position: relative; overflow: hidden; isolation: isolate; }
.spl-hero::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 50%; z-index: -1; background: url(/art/storybook.webp) 50% 60% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%); mask-image: linear-gradient(90deg, transparent, #000 55%); }
@media (min-width: 48rem) { .spl-hero { grid-template-columns: auto minmax(0, 1fr) 34%; } }
@media (max-width: 47.99rem) { .spl-hero { padding-top: 0; } .spl-hero::before { inset: 0 0 auto; width: auto; height: 140px; background-position: 50% 70%;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); } .spl-hero .spl-owl { margin-top: 64px; } }
.spl-teen .spl-hero::before { display: none; }
@media (max-width: 47.99rem) { .spl-teen .spl-hero { padding-top: 24px; } .spl-teen .spl-hero .spl-owl { margin-top: 0; } }
@media (min-width: 48rem) { .spl-teen .spl-hero { grid-template-columns: auto minmax(0, 1fr); } }
/* 1.100: on a phone the whole round fits on one screen down to the Check button: both listen buttons on one row, a
   tighter card, the microphone button tucked under the answer box */
@media (max-width: 47.99rem) {
  .spl-play .spl-stage { gap: 10px; }
  .spl-ask .row { gap: 8px; flex-wrap: wrap; }
  .spl-say { padding: 0 12px; gap: 6px; font-size: 15px; min-height: 40px; }
  .spl-ask .spl-hint { padding: 4px 0; min-height: 36px; }
  .spl-sent { font-size: 17px; line-height: 1.45; }
  .spl-play .spl-mic { margin-top: 0; min-height: 40px; font-size: 15px; }
  .spl-fair { font-size: 12px; }
}
/* Oct 29 2026 live test: the SPELLING chip uses the theme's dark ink on the light teal of dark mode (white was 1.5:1) */
.w-chip.w-spell { color: var(--sl-ink, #fff); }
/* 1.100: the spelling home's first screen reaches its first question ("What grade are you in?") on a phone: a shorter
   picture band, a smaller owl and a tighter hero */
@media (max-width: 47.99rem) {
  .spl-hero::before { height: 100px; }
  .spl-hero .spl-owl { margin-top: 34px; }
  .spl-hero .spl-owl svg { width: 60px; height: 60px; }
  .spl-hero { gap: 8px; padding-bottom: 16px; }
  .spl-hero .spl-sub { font-size: 15px; line-height: 1.45; }
}
/* 1.100: on a phone a long word's answer tiles stay on one row (they wrapped "reluctant" onto two and pushed "Lock it
   in" off the screen); tiles shrink down to 24px before they wrap */
@media (max-width: 47.99rem) {
  .spl-fb .spl-tiles > .spl-tile { flex: 1 1 0; width: auto; min-width: 24px; max-width: 34px; }
  .spl-fb .spl-tiles > .spl-tile.sm { min-width: 20px; max-width: 30px; }
  .spl-fb { padding: 12px 14px; gap: 8px; }
  .spl-fb-h { font-size: 18px; }
}
/* after a miss on a phone, the listen buttons lose their card so "Lock it in" stays in reach */
@media (max-width: 47.99rem) {
  .spl-play:has(.spl-fb.no) .spl-ask { padding: 0; border: 0; background: none; }
  .spl-play:has(.spl-fb.no) .spl-ask .spl-kicker { display: none; }
  .spl-play:has(.spl-fb.no) .spl-fair { display: none; }
}

/* Lists made from a prompt (October 29, 2026) */
.spl-make { border-color: var(--primary); }
.spl-ideas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin: -4px 0 0; scrollbar-width: none; }
.spl-ideas::-webkit-scrollbar { display: none; }
.spl-ideas .chip { flex: none; min-height: 40px; white-space: nowrap; }
.spl-type summary { cursor: pointer; min-height: var(--tap); display: flex; align-items: center; }
.spl-made { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.spl-made li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.spl-made li b { font-size: 17px; }
.spl-made-pill { font-size: 12px; vertical-align: middle; margin-left: 4px; }

/* Owl Arcade (October 28, 2026): the brain-break card, the HUD chip and the full-screen game overlay (js/arcade.js). */
.arc-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.arc-card-i { font-size: 28px; line-height: 1; }
.arc-card-t { display: grid; gap: 4px; min-width: 0; }
.arc-card-t b { font-family: var(--f-display); font-size: 17px; }
.arc-ready { border-color: var(--primary); background: linear-gradient(135deg, var(--primary-soft), var(--surface)); }
.arc-bar { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.arc-bar i { display: block; height: 100%; background: var(--primary); border-radius: inherit; }
.arc-chip span { font-size: 15px; line-height: 1; }
.arc-chip.pop { animation: arc-pop .45s ease-out; }
@keyframes arc-pop { 40% { transform: scale(1.25); } }
.arc-set { padding: 10px 0; }

html.arc-on, html.arc-on body { overflow: hidden; }
.arc { position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--fg); display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); overflow-y: auto; animation: arc-in .2s ease-out; }
@keyframes arc-in { from { opacity: 0; } }
.arc-top { width: 100%; max-width: 560px; display: flex; align-items: center; gap: 12px; min-height: 48px; }
.arc-top .strike { margin-left: auto; }
.arc-title { font-family: var(--f-display); font-size: 20px; }
.arc-score { font-weight: 700; color: var(--fg-2); }
.arc-score b { color: var(--fg); font-size: 18px; }
.arc-clock { margin-left: auto; min-width: 44px; text-align: center; font-weight: 800; font-size: 18px; padding: 4px 10px; border-radius: 99px; background: var(--surface-2); }
.arc-clock + .strike { margin-left: 0; }
.arc-clock.low { background: var(--bad-soft); color: var(--bad); }
.arc-pick { width: 100%; max-width: 560px; display: grid; gap: 12px; }
.arc-head { display: grid; gap: 0; min-width: 0; }
.arc-owl { flex: none; }
.arc-game { --c0: var(--primary); --c1: var(--primary); position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; column-gap: 14px; row-gap: 2px; align-items: center; text-align: left;
  min-height: 84px; padding: 14px 16px; border-radius: var(--r-lg); border: 2px solid color-mix(in srgb, var(--c0) 35%, var(--line)); border-bottom-width: 5px; border-bottom-color: color-mix(in srgb, var(--c1) 55%, var(--line));
  background: linear-gradient(120deg, color-mix(in srgb, var(--c0) 14%, var(--surface)), var(--surface) 60%); color: var(--fg); font: inherit; cursor: pointer; overflow: hidden; }
.arc-game-i { grid-row: 1 / 4; font-size: 34px; line-height: 1; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, var(--c0), var(--c1));
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.16), inset 0 2px 0 rgba(255,255,255,.4), 0 4px 10px color-mix(in srgb, var(--c0) 35%, transparent); }
.arc-game b { font-family: "Fredoka", var(--f-display); font-weight: 600; font-size: 20px; grid-column: 2; }
.arc-game .faint { grid-column: 2; font-size: 14px; }
.arc-best { grid-column: 2; justify-self: start; font-size: 13px; font-weight: 700; color: var(--warn); background: var(--xp-soft); padding: 2px 8px; border-radius: 99px; white-space: nowrap; margin-top: 2px; }
.arc-play { grid-column: 3; grid-row: 1 / 4; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: #fff; background: linear-gradient(135deg, var(--c0), var(--c1)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); padding-left: 3px; }
@media (hover: hover) { .arc-game:hover { border-color: var(--c0); } }
.arc-game:active { transform: translateY(3px); border-bottom-width: 2px; }
.arc-foot { margin: 0; text-align: center; }
.arc-stage { position: relative; width: 100%; max-width: 520px; display: flex; justify-content: center; }
.arc-tbar { width: 100%; max-width: 520px; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; margin-top: -4px; }
.arc-tbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2ec27e, #3d8bff); transform-origin: left; transition: transform .1s linear; }
.arc-tbar i.low { background: linear-gradient(90deg, #ff4f79, #ff9f1c); }
.arc-score { display: inline-block; }
.arc-score.bump b { display: inline-block; animation: arc-bump .28s ease-out; }
@keyframes arc-bump { 35% { transform: scale(1.35); color: var(--primary); } }
.arc-clock.low { animation: arc-pulse 1s ease-in-out infinite; }
@keyframes arc-pulse { 50% { transform: scale(1.12); } }
.arc-cv { display: block; border-radius: var(--r-lg); touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: var(--shadow); }
.arc-how { margin: 0; max-width: 520px; text-align: center; font-size: 14px; }
.arc-over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: color-mix(in srgb, var(--bg) 82%, transparent); border-radius: var(--r-lg); }
.arc-over { animation: arc-in .2s ease-out; text-align: center; padding: 16px; }
.arc-over b { font-family: "Fredoka", var(--f-display); font-size: 30px; }
.arc-over-s { font-family: "Fredoka", var(--f-display); font-weight: 700; font-size: 52px; line-height: 1; }
.arc-again { min-height: 52px; min-width: 180px; font-size: 18px; }
.arc-done-i.rec { animation: arc-trophy .7s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes arc-trophy { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }
.arc-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.arc-confetti i { position: absolute; top: -20px; left: var(--x); width: 9px; height: 14px; border-radius: 2px; background: var(--c); transform: rotate(var(--r)); animation: arc-fall 2.4s var(--d) cubic-bezier(.3,.6,.5,1) forwards; }
@keyframes arc-fall { to { transform: translate(30px, 105vh) rotate(calc(var(--r) + 540deg)); } }
.arc-done { margin: auto 0; display: grid; justify-items: center; gap: 12px; text-align: center; max-width: 420px; }
.arc-done-i { font-size: 64px; line-height: 1; }
.arc-done-s { display: grid; gap: 4px; margin: 0; }
.arc-done-s b { font-family: var(--f-display); font-size: 48px; line-height: 1.1; }


/* the family dashboard's controls card */
.fam-ctl { display: grid; gap: 12px; }
.fam-ctl .row { flex-wrap: wrap; }
.fam-ctl select { min-height: var(--tap); }
.fam-ctl-games { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fam-ctl-games .eyebrow { flex-basis: 100%; }
.fam-ctl-games label { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); }
@media (prefers-reduced-motion: reduce) { .arc, .arc-chip.pop, .arc-over, .arc-done-i.rec, .arc-clock.low, .arc-score.bump b, .arc-tbar i { animation: none; transition: none; } .arc-confetti { display: none; } }
.fam-ctl-l { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fam-ctl-l select { width: auto; }
.arc-stage:focus { outline: none; } /* the stage takes focus only so keys reach the game */
/* 1.90: the game picker opens on a painted night carnival in the woods (Cloudflare Workers AI). The lanterns glow and
   the scene drifts in once as the arcade opens; nothing moves under reduced motion. */
.arc-scene { width: 100%; max-width: 560px; height: clamp(120px, 26vh, 190px); border-radius: var(--r-lg); overflow: hidden; flex: none; position: relative;
  background: #1d2346 url(/art/carnival.webp) 50% 64% / cover no-repeat; box-shadow: 0 6px 0 color-mix(in srgb, var(--fg) 12%, transparent); }
.arc-scene i { position: absolute; inset: 0; background: radial-gradient(60% 50% at 42% 62%, rgba(255, 200, 90, .28), transparent 70%); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .owl-motion .arc-scene { animation: arc-scene .7s cubic-bezier(.2,.7,.2,1) both; }
  .owl-motion .arc-scene i { animation: arc-glow 2.4s ease-in-out .5s 2 alternate; }
}
@keyframes arc-scene { from { background-position: 50% 80%; opacity: .4; } to { background-position: 50% 64%; opacity: 1; } }
@keyframes arc-glow { to { opacity: 1; } }

/* Narration (js/narrate.js, October 28, 2026): the Listen buttons and the word being read. */
.nv-play { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: var(--tap); min-height: var(--tap); padding: 0 10px;
  border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--primary); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.nv-play[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
@media (hover: hover) { .nv-play:hover { border-color: var(--primary); } }
.nv-lab { padding: 0 14px 0 12px; }
.lp-card { position: relative; }
.nv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -6px -6px 0 0; } /* the label and its Listen button share a row above the text */
.sp-listen { display: flex; justify-content: flex-end; padding: 8px 12px 0; }
.phead > .split { align-items: center; }
.nv-w { border-radius: 3px; transition: background-color .12s; }
.nv-s { background: var(--primary-soft); box-shadow: 0 0 0 2px var(--primary-soft); }
.nv-on { background: var(--mark); color: var(--mark-ink); box-shadow: 0 0 0 2px var(--mark); }
@media (prefers-reduced-motion: reduce) { .nv-w { transition: none; } }

/* Owl-y's cheers (js/owlytalk.js): he pops up in the corner above the tab bar, with his words or just his reaction */
.owly-pop { position: fixed; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 61; display: flex; align-items: flex-end; flex-direction: row-reverse; gap: 6px;
  pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity .18s, transform .22s cubic-bezier(.3,.7,.4,1.3); }
.owly-pop.on { opacity: 1; transform: none; }
.owly-pop .owl { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18)); flex: none; }
.owly-bub { background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); box-shadow: var(--shadow); border-radius: 14px 14px 4px 14px; padding: 8px 12px;
  font: 700 15px/1.3 var(--f-body); max-width: min(240px, calc(100vw - 110px)); margin-bottom: 30px; }
.owly-pop.big .owly-bub { border-color: var(--primary); }
.owly-pop.sad .owly-bub { border-color: var(--line-strong); font-weight: 600; }
.owly-pop:not(.moving) { transition: opacity .18s; transform: none; }
@media (min-width: 48rem) { .owly-pop { right: 24px; bottom: 24px; } }
.owl-motion .owly-pop.big .owl.hop { animation: owl-hop .6s cubic-bezier(.3,.7,.4,1) 2; }
.owl-motion .owl.droop { animation: owl-droop .9s ease-in-out; transform-origin: 50% 95%; }
.owl-motion .owl.droop .wl { animation: owl-wing-l-down .9s ease-in-out; } .owl-motion .owl.droop .wr { animation: owl-wing-r-down .9s ease-in-out; }
@keyframes owl-droop { 0% { transform: none; } 30% { transform: translateY(5%) scale(1.03, .94) rotate(-6deg); } 65% { transform: translateY(4%) scale(1.02, .95) rotate(4deg); } 100% { transform: none; } }
@keyframes owl-wing-l-down { 30%, 65% { transform: rotate(18deg); } }
@keyframes owl-wing-r-down { 30%, 65% { transform: rotate(-18deg); } }
.owly-set { border: 0; padding: 10px 0; margin: 0; display: grid; gap: 8px; }
.owly-set legend { padding: 0; margin-bottom: 8px; }
.owly-modes { display: flex; flex-wrap: wrap; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .owly-pop { transition: opacity .18s; transform: none; } .owly-pop .owl { animation: none !important; } }

/* My words: the word and its speaker button on one line */
.w-say { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.w-say .rz-say { width: 40px; height: 40px; margin-left: 4px; flex: none; }

/* Spelling: spell it out loud (js/spell.js) */
.spl-mic { justify-self: start; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); margin-top: 10px; }
.spl-mic[aria-pressed="true"] { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
/* 1.88 (Todd: "more random and more realistic movement"): Owl-y's ways into the corner. He hops up from below with a
   crouch and a squash on landing, drops in from above and bounces, or slides in from the side; the bubble pops in after. */
.owl-motion .owly-pop.moving { transform: none; transition: opacity .12s; }
.owl-motion .owly-pop.moving .owly-bub { opacity: 0; transform: scale(.7); transform-origin: 100% 100%; transition: opacity .16s .42s, transform .26s .42s cubic-bezier(.3,.7,.4,1.4); }
.owl-motion .owly-pop.moving.on .owly-bub { opacity: 1; transform: none; }
.owl-motion .owly-pop.on.in-hop > .owl { animation: op-hop .55s cubic-bezier(.3,.7,.4,1) both; transform-origin: 50% 92%; }
.owl-motion .owly-pop.on.in-drop > .owl { animation: op-drop .6s cubic-bezier(.3,.7,.4,1) both; transform-origin: 50% 92%; }
.owl-motion .owly-pop.on.in-side > .owl { animation: op-side .5s cubic-bezier(.3,.7,.4,1.2) both; transform-origin: 50% 92%; }
@keyframes op-hop { 0% { transform: translateY(130%) scale(.9, 1.12); } 55% { transform: translateY(-14%) scale(.96, 1.06); } 75% { transform: translateY(0) scale(1.14, .84); } 88% { transform: scale(.97, 1.03); } 100% { transform: none; } }
@keyframes op-drop { 0% { transform: translateY(-160%) scale(.92, 1.1); } 50% { transform: translateY(0) scale(.95, 1.06); } 62% { transform: scale(1.16, .82); } 76% { transform: translateY(-10%) scale(.98, 1.03); } 88% { transform: scale(1.05, .95); } 100% { transform: none; } }
@keyframes op-side { 0% { transform: translateX(140%) rotate(18deg); } 60% { transform: translateX(-6%) rotate(-6deg); } 80% { transform: rotate(3deg); } 100% { transform: none; } }
/* 1.100 (mobile): Owl-y's corner pop never blocks a tap on the button or key under him */
.owly-pop, .owly-pop * { pointer-events: none; }

/* Oct 29, 2026: Owl-y's sense of humour (js/owlfun.js) */
.owl-say.owl-float { position: fixed; z-index: 62; pointer-events: none; max-width: min(260px, calc(100vw - 16px)); animation: owl-say-in .18s ease-out both; }
@keyframes owl-say-in { from { opacity: 0; transform: translateY(4px) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .owl-say.owl-float { animation: none; } }
svg.owl:not(.mark) { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.owl-heart { position: fixed; z-index: 62; pointer-events: none; color: #ff5c7a; font: 700 18px/1 var(--f-body); }
.owl .owl-prop .steam { opacity: .8; }
.owl-pep { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2, var(--surface)); }
.owl-pep p { margin: 0; font-weight: 600; line-height: 1.4; color: var(--fg); }
.owl-pep .owl { flex: none; }

/* 1.103.0: the SAT question tracker (js/sattracker.js). Phone first: stats, then filters, then the bank by domain and
   skill, and a practice bar that stays above the tab bar. Hover colours sit inside (hover: hover), so a phone's stuck
   hover never changes them. */
.qb-back { align-self: flex-start; justify-self: start; margin-right: auto; padding: 8px 0; color: var(--primary); font-weight: 600; }
.qb-top { display: grid; gap: 14px; }
@media (min-width: 900px) { .qb-top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.qb-stats { display: grid; gap: 16px; }
.qb-ov { display: flex; align-items: center; gap: 18px; }
.qb-ring-w { position: relative; width: 92px; height: 92px; flex: none; }
.qb-ring { width: 100%; height: 100%; }
.qb-ring circle { fill: none; stroke-width: 9; }
.qb-ring-bg { stroke: var(--surface-2); }
.qb-ring-on { stroke: var(--sat, var(--primary)); stroke-linecap: round; }
.qb-ring-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.qb-ring-t b { font: 800 22px/1.1 var(--f-display); color: var(--fg); }
.qb-ring-t span { font-size: 12px; color: var(--fg-3); }
.qb-kpis { display: grid; gap: 4px; font-size: 14px; color: var(--fg-2); min-width: 0; }
.qb-kpis b { color: var(--fg); font-size: 17px; }
.qb-kpis .good b { color: var(--good); }
.qb-kpis .bad b { color: var(--bad); }
.qb-lv { display: grid; gap: 8px; }
.qb-lv-r { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13.5px; }
.qb-lv-r b { font-size: 13px; color: var(--fg-2); font-weight: 600; min-width: 64px; text-align: right; }
.qb-bar { min-width: 0; }
.qb-d { font-size: 12.5px; font-weight: 650; }
.qb-d1 { color: var(--good); } .qb-d2 { color: var(--warn); } .qb-d3 { color: var(--bad); } .qb-d4 { color: var(--primary); }
.qb-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; display: inline-block; }
.qb-filt { gap: 12px; }
.qb-find { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; position: relative; }
@media (min-width: 560px) { .qb-find { grid-template-columns: minmax(0, 1fr) minmax(0, 210px); } }
.qb-find .input { min-height: 44px; width: 100%; }
#qb-q { padding-left: 38px; }
.qb-find-i { position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; color: var(--fg-3); pointer-events: none; }
.qb-find-i svg { width: 20px; height: 20px; }
.qb-chips { gap: 6px; }
.qb-chips .chip { min-height: 40px; padding: 0 12px; }
.qb-sec { display: grid; gap: 12px; }
.qb-sec .h-sec { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; }
.qb-sec .h-sec .faint { font: 600 14px/1 var(--f-body); }
.qb-dom { padding: 6px 0; }
.qb-dom-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 16px 6px; }
.qb-dom-h .faint { font-size: 13px; }
.qb-sk { border-top: 1px solid var(--line); padding: 3px 6px; }
.qb-sk-h { display: grid; grid-template-columns: minmax(0, 1fr) minmax(56px, 22%) 16px; gap: 12px; align-items: center; width: 100%; min-height: 56px; padding: 8px 10px; border-radius: 10px; background: none; border: 0; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.qb-sk-t { display: grid; gap: 1px; min-width: 0; }
.qb-sk-t b { font-weight: 600; font-size: 15px; }
.qb-sk-t .faint { font-size: 13px; }
.qb-chev { color: var(--fg-3); }
.qb-sk-h[aria-expanded="true"] .qb-chev { transform: rotate(180deg); }
.qb-rows { list-style: none; margin: 0; padding: 2px 2px 6px; display: grid; gap: 2px; }
.qb-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) 44px 44px; gap: 4px; align-items: center; padding: 2px 4px 2px 8px; border-radius: 10px; }
.qb-row:nth-child(odd) { background: var(--surface-2); }
.qb-st { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; }
.qb-st svg { width: 15px; height: 15px; }
.qb-st.right { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.qb-st.missed { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.qb-open { display: grid; gap: 2px; min-width: 0; min-height: 48px; padding: 6px 6px; background: none; border: 0; color: var(--fg); font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.qb-lbl { font-size: 14px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.qb-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 12.5px; color: var(--fg-3); }
.qb-code { font: 500 12px/1.3 var(--f-mono); color: var(--fg-3); }
.qb-ic { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: 10px; color: var(--fg-3); cursor: pointer; }
.qb-ic svg { width: 20px; height: 20px; }
.qb-ic.on { color: var(--lamp); }
.qb-ic.on svg { fill: var(--lamp-soft); }
.qb-empty { display: grid; gap: 12px; justify-items: start; }
.qb-go { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.qb-go-t { font-size: 14px; color: var(--fg-2); white-space: nowrap; }
#qb-list { margin-bottom: 4px; }
.qb-go-t b { color: var(--fg); }
@media (max-width: 860px) { .qb-go { bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } }
.qb-door { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 12px; align-items: center; width: 100%; color: var(--fg); font: inherit; cursor: pointer; text-align: left; }
.qb-door .faint { font-size: 13.5px; }
.qb-door-i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary); }
.qb-door-i svg { width: 22px; height: 22px; }
.sp-keep { gap: 8px; margin: 4px 0 8px; }
.sp-keep .btn.on { color: var(--lamp); }
@media (hover: hover) {
  .qb-sk-h:hover, .qb-open:hover { background: var(--primary-soft); }
  .qb-ic:hover { color: var(--fg); background: var(--surface-2); }
  .qb-door:hover { border-color: var(--primary); }
}

/* Shared filter bar (js/filters.js, October 29, 2026): search, dropdowns, chips, toggles, pager, group list, tags. */
.fx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fx-search { position: relative; flex: 1 1 240px; min-width: 0; display: flex; align-items: center; }
.fx-search svg { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--fg-3); pointer-events: none; }
.fx-q { width: 100%; min-height: var(--tap); padding: 0 12px 0 38px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface-2); }
.fx-q:focus { background: var(--surface); }
.fx-q::-webkit-search-cancel-button { cursor: pointer; }
.fx-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fx-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.fx-sel { position: relative; display: inline-flex; align-items: center; }
.fx-sel select { appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 30px 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg-2); font-size: 14px; cursor: pointer; }
.fx-sel svg { position: absolute; right: 12px; color: var(--fg-3); pointer-events: none; }
.fx-sel.on select { border-color: var(--primary); background: var(--primary-soft); color: var(--fg); font-weight: 600; }
.fx-tog { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg-2); font-size: 14px; cursor: pointer; user-select: none; }
.fx-tog input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.fx-tog.on { border-color: var(--primary); background: var(--primary-soft); color: var(--fg); font-weight: 600; }
.fx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: 14px; color: var(--fg-2); }
.fx-chip[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--fg); font-weight: 600; }
.fx-n { font-size: 12px; color: var(--fg-3); font-weight: 500; }
.fx-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.fx-groups { display: grid; gap: 2px; align-content: start; }
.fx-gt { padding: 4px 12px 8px; }
.fx-g { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--fg-2); text-align: left; cursor: pointer; font-size: 14.5px; }
.fx-gl { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fx-g[aria-current="true"] { background: var(--primary-soft); color: var(--fg); font-weight: 650; }
.fx-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px; font: 700 11.5px/1.6 var(--f-body); letter-spacing: .04em; color: var(--fx-h); background: color-mix(in srgb, var(--fx-h) 14%, transparent); border: 1px solid color-mix(in srgb, var(--fx-h) 35%, transparent); white-space: nowrap; }
@media (hover: hover) {
  .fx-chip:hover, .fx-tog:hover, .fx-sel select:hover { border-color: var(--primary); }
  .fx-g:hover { background: var(--surface-2); color: var(--fg); }
}
/* phones: the group list becomes one scrolling row of chips */
@media (max-width: 47.99rem) {
  .fx-groups { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
  .fx-groups::-webkit-scrollbar { display: none; }
  .fx-gt { display: none; }
  .fx-g { flex: none; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); }
  .fx-g[aria-current="true"] { border-color: var(--primary); }
  .fx-search { flex-basis: 100%; }
}

/* The vocab hub (js/vhub.js) and Word Glide (js/vgame.js), October 29, 2026. Class prefixes vh- and vg-.
   Computers (75rem and up): word grid | the open word | the practice rail. Tablets: grid | rail, the word in a sheet.
   Phones: one strip with the goal and the ways to practice, then a list; each word opens in a sheet. */
.w-voc { --wc: #b4235a; }
.w-badge.w-voc { background: linear-gradient(135deg, #d6336c, #7c3aed); }
.vh, .vh-play, .vh-done { --vh-m: #1f9d55; --vh-l: #e0a400; }
:root[data-theme="dark"] .vh, :root[data-theme="dark"] .vh-play { --vh-m: #4fd18b; --vh-l: #ffd23f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vh, :root:not([data-theme="light"]) .vh-play { --vh-m: #4fd18b; --vh-l: #ffd23f; } }
.wrap.vh { max-width: 1480px; gap: 20px; }
.vh-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.vh-lede { max-width: 70ch; }
.vh-cols { display: grid; gap: 20px; align-items: start; grid-template-columns: minmax(0, 1fr); }
.vh-card { display: grid; gap: 10px; padding: 18px; }
.vh-sub { font-size: 13.5px; line-height: 1.45; }
.vh-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: none; color: var(--fg-3); cursor: pointer; }

/* the word list */
.vh-list { display: grid; gap: 14px; padding: 18px; }
.vh-list-h { display: flex; align-items: center; gap: 10px; }
.vh-list-h .h-card { font: 700 20px/1.2 var(--f-display); }
.vh-tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.vh-t { display: grid; gap: 4px; align-content: start; text-align: left; min-height: 96px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; box-shadow: 0 2px 0 var(--line); }
.vh-t.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 2px 0 var(--primary-edge); }
.vh-t:focus-visible { outline-offset: 1px; }
.vh-t-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vh-t-w { font: 700 16px/1.25 var(--f-display); overflow-wrap: anywhere; margin-right: auto; }
.vh-t-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fg-3); }
.vh-t-meta i { font-style: italic; }
.vh-t-d { font-size: 13px; line-height: 1.4; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vh-lv { display: inline-flex; gap: 2px; }
.vh-lv i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.vh-l1 i:nth-child(1), .vh-l2 i:nth-child(-n+2), .vh-l3 i { background: var(--primary); }
.vh-st { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none; }
.vh-st.m { background: var(--vh-m); color: #fff; } .vh-st.m svg { width: 12px; height: 12px; }
.vh-st.l { border: 2.5px solid var(--vh-l); width: 14px; height: 14px; }
.vh-sv { color: var(--primary); display: inline-flex; }
.vh-sv svg { width: 15px; height: 15px; }
.vh-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; text-align: center; }
.vh-kbd { display: none; font-size: 12.5px; margin: 0; }
kbd { font: 600 11.5px/1 var(--f-mono); padding: 3px 6px; border-radius: 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; background: var(--surface); color: var(--fg-2); }
.btn kbd { margin-left: 4px; }

/* the open word */
.vh-detail { display: none; padding: 22px; }
.vh-d { display: grid; gap: 14px; }
.vh-d-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vh-d-w { font: 700 clamp(28px, 2.6vw, 36px)/1.1 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.vh-d-def { font-size: 17px; line-height: 1.5; color: var(--fg); }
.vh-d-def2 { font-size: 15px; color: var(--fg-2); }
.vh-d-s { margin: 0; padding: 12px 14px; border-left: 4px solid var(--primary); background: var(--surface-2); border-radius: 0 10px 10px 0; font: 18px/1.5 var(--f-text); color: var(--fg); }
.vh-d-s mark { background: var(--mark); color: var(--mark-ink); padding: 0 2px; border-radius: 3px; font-weight: 500; }
.vh-d-rel { display: grid; gap: 6px; }
.vh-rel { min-height: 36px; font-size: 14px; }
.vh-rel.off { cursor: default; opacity: .8; }
.vh-d-part { display: flex; align-items: baseline; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); text-align: left; cursor: pointer; color: var(--fg); }
.vh-d-st { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; }
.vh-d-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.vh-d-acts .btn svg, .vh-fb .btn svg { flex: none; }
.vh-d-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.vh-d-none { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 30px 10px; }
.vh-say { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--primary); cursor: pointer; }
.vh-say.big { width: 48px; height: 48px; background: var(--primary-soft); border-color: transparent; }
.vh-say.big svg { width: 24px; height: 24px; }

/* the practice rail */
.vh-rail { display: grid; gap: 14px; align-content: start; }
.vh-goal-b { display: flex; align-items: center; gap: 16px; }
.vh-ring { position: relative; flex: none; }
.vh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vh-ring circle { fill: none; stroke-width: 9; }
.vh-ring .bg { stroke: var(--surface-2); } .vh-ring .fg { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.vh-ring .fg.done { stroke: var(--vh-m); }
.vh-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.vh-ring b { font: 800 26px/1 var(--f-display); } .vh-ring i { font-style: normal; font-size: 13px; color: var(--fg-3); }
.vh-strip .vh-ring b { font-size: 17px; } .vh-strip .vh-ring i { font-size: 11px; } .vh-strip .vh-ring circle { stroke-width: 6; }
.vh-streak { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--streak); font-weight: 600; }
.vh-streak svg { width: 16px; height: 16px; fill: currentColor; }
.vh-ns { display: flex; gap: 10px; flex-wrap: wrap; }
.vh-n { min-width: 56px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--go); color: #fff; font: 800 16px/1 var(--f-display); box-shadow: 0 3px 0 var(--go-edge); cursor: pointer; }
.vh-n:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--go-edge); }
.vh-n.on { outline: 3px solid var(--primary); outline-offset: 2px; }
:root[data-theme="dark"] .vh-n { color: #08200f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vh-n { color: #08200f; } }
.vh-seg button { min-height: 32px; padding: 0 10px; font-size: 13px; }
.vh-due { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-color: var(--lamp); background: var(--lamp-soft); }
.vh-game { padding: 0; overflow: hidden; gap: 0; }
.vh-game-art { position: relative; height: 112px; background: linear-gradient(180deg, #141838, #2c2f6b 65%, #53468f); overflow: hidden; }
.vh-game-art::after { content: ""; position: absolute; inset: auto -10% -30px; height: 60px; background: #1d1f45; border-radius: 50% 50% 0 0; }
.vh-moon { position: absolute; right: 22px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: #fff4d6; box-shadow: 0 0 18px rgba(255,240,200,.7); }
.vh-game-art i:not(.vh-moon) { position: absolute; z-index: 1; font: 700 12px/1 var(--f-body); font-style: normal; color: #fff8e6; padding: 6px 10px; border-radius: 999px; background: rgba(30,26,70,.92); border: 2px solid #ffd36b; box-shadow: 0 0 12px rgba(255,211,107,.6); }
.vh-g1 { left: 46%; top: 12px; } .vh-g2 { left: 58%; top: 44px; border-color: #4fd18b !important; box-shadow: 0 0 12px rgba(79,209,139,.7) !important; } .vh-g3 { left: 44%; top: 76px; }
.vh-game-owl { position: absolute; z-index: 2; left: 14px; top: 30px; }
.vh-game-b { display: grid; gap: 8px; padding: 14px 18px 18px; }
.vh-bar { display: flex; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vh-bar i { display: block; height: 100%; } .vh-bar i.m { background: var(--vh-m); } .vh-bar i.l { background: var(--vh-l); }
.vh-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--fg-2); }
.vh-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--surface-2); border: 1px solid var(--line-strong); margin-right: 5px; vertical-align: -1px; }
.vh-legend i.m { background: var(--vh-m); border-color: transparent; } .vh-legend i.l { background: var(--vh-l); border-color: transparent; }
.vh-kept { border-color: var(--primary); }
.vh-strip { display: none; }

/* word parts and transitions */
.vh-side { min-width: 0; }
.vh-main { display: grid; gap: 14px; min-width: 0; align-content: start; }
.vh-pbar { padding: 12px; }
.vh-parts-g { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); align-items: start; }
.vh-p { display: grid; gap: 8px; padding: 16px; }
.vh-p.vh-flash { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.vh-p-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vh-p-f { font: 800 24px/1.1 var(--f-display); margin-right: 2px; }
.vh-p-o { font-size: 12.5px; margin-left: auto; }
.vh-p-m { font-size: 16px; font-weight: 600; }
.vh-p-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.vh-p-ex li { display: grid; grid-template-columns: minmax(90px, auto) 1fr; gap: 10px; align-items: baseline; }
.vh-p-ex .linkbtn { padding: 0; min-height: 0; text-align: left; font-weight: 700; }
.vh-p-tip { font-size: 13px; font-style: italic; }
.vh-tg { display: grid; gap: 10px; }
.vh-tg-h { display: grid; gap: 2px; }
.vh-tg-h .h-card { font: 700 19px/1.2 var(--f-display); }
.vh-tl { display: grid; }
.vh-tr { display: grid; grid-template-columns: 170px 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.vh-tr-w { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.vh-tr-n { font-size: 14.5px; }
.vh-tr-ex { font: 16px/1.5 var(--f-text); }
.vh-tr-ex mark { background: var(--mark); color: var(--mark-ink); padding: 0 3px; border-radius: 3px; }

/* flash cards and the quiz */
.wrap.vh-play { max-width: 760px; gap: 18px; padding-block: 16px 40px; }
.vh-play-top { display: flex; align-items: center; gap: 14px; }
.vh-prog { flex: 1; height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.vh-prog i { display: block; height: 100%; background: var(--go); border-radius: 999px; transition: width .25s ease; }
.vh-card3d { position: relative; display: grid; min-height: 300px; border: 0; padding: 0; background: none; cursor: pointer; perspective: 1200px; color: var(--fg); }
.vh-c-front, .vh-c-back { grid-area: 1 / 1; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 28px; border-radius: 20px; border: 1.5px solid var(--line-strong); background: var(--surface); box-shadow: 0 4px 0 var(--line-strong); text-align: center; backface-visibility: hidden; transition: transform .35s ease; }
.vh-c-back { transform: rotateY(180deg); }
.vh-card3d.flip .vh-c-front { transform: rotateY(-180deg); } .vh-card3d.flip .vh-c-back { transform: rotateY(0); }
.vh-c-w { font: 800 clamp(34px, 6vw, 48px)/1.1 var(--f-display); overflow-wrap: anywhere; }
.vh-c-w.sm { font-size: 26px; }
.vh-c-pos { font-style: italic; color: var(--fg-3); }
.vh-c-def { font-size: 20px; line-height: 1.45; max-width: 34ch; }
.vh-c-s { font: 17px/1.5 var(--f-text); color: var(--fg-2); max-width: 46ch; }
.vh-c-tap { font-size: 13px; }
.vh-c-acts { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
.vh-q { display: grid; gap: 14px; padding: 22px; }
.vh-q-w { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vh-q-w b { font: 800 34px/1.1 var(--f-display); }
.vh-q-w i { color: var(--fg-3); }
.vh-q-s { font: 20px/1.55 var(--f-text); }
.vh-q-note { font-size: 13px; }
.vh-blank { font-family: var(--f-body); letter-spacing: .05em; color: var(--primary); }
.vh-chs { display: grid; gap: 10px; }
.vh-ch { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.vh-ch-k { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); font: 700 13px/1 var(--f-body); color: var(--fg-2); }
.vh-fb { padding: 12px 14px; border-radius: 12px; background: var(--good-soft); line-height: 1.5; }
.vh-fb.no { background: var(--bad-soft); }
.vh-q-go { display: flex; justify-content: flex-end; align-items: center; min-height: 44px; }
.wrap.vh-done { max-width: 820px; }
.vh-done-h { display: flex; align-items: center; gap: 18px; }
.vh-sum { list-style: none; margin: 0; padding: 0; display: grid; }
.vh-sum li { display: grid; grid-template-columns: minmax(110px, 180px) 1fr; gap: 12px; padding: 9px 0 9px 26px; border-top: 1px solid var(--line); position: relative; font-size: 14.5px; }
.vh-sum li:first-child { border-top: 0; }
.vh-sum li::before { content: "✓"; position: absolute; left: 4px; color: var(--good); font-weight: 800; }
.vh-sum li.no::before { content: "•"; color: var(--bad); }
.vh-sum .linkbtn { padding: 0; min-height: 0; text-align: left; font-weight: 700; justify-self: start; }
.vh-done-acts { flex-wrap: wrap; }
.vh-pgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vh-lvrow { display: grid; grid-template-columns: 110px 1fr 64px; align-items: center; gap: 10px; font-size: 14px; }
.vh-lvrow .faint { text-align: right; }
.vh-days { display: grid; grid-template-columns: repeat(28, 1fr); gap: 3px; height: 90px; align-items: end; }
.vh-days i { display: block; height: var(--h); border-radius: 3px; background: var(--surface-2); }
.vh-days i.some { background: var(--vh-l); } .vh-days i.hit { background: var(--vh-m); }
.vh-big { display: flex; align-items: baseline; gap: 8px; } .vh-big b { font: 800 40px/1 var(--f-display); }

@media (hover: hover) {
  .vh-t:hover { border-color: var(--primary); }
  .vh-d-part:hover, .vh-say:hover { border-color: var(--primary); }
  .vh-ico:hover { background: var(--surface-2); color: var(--fg); }
}

/* tablets and up: grid | rail */
@media (min-width: 48rem) {
  .vh-cols { grid-template-columns: minmax(0, 1fr) 300px; }
  .vh-cols-g { grid-template-columns: 200px minmax(0, 1fr); }
  .vh-cols-g .vh-rail { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .vh-rail { position: sticky; top: 76px; }
  .vh-cols-g .vh-rail { position: static; }
  .vh-side { position: sticky; top: 76px; }
  /* Oct 29 2026 (Todd): a pinned column taller than the screen hid its own bottom (Word Glide) until the page ran out;
     a pinned column now fits the screen and scrolls by itself (test/steady.mjs: "pinned column cut off") */
  .vh-rail, .vh-side { max-height: calc(100vh - 96px); overflow-y: auto; scrollbar-width: thin; }
  .vh-cols-g .vh-rail { max-height: none; overflow: visible; }
}
@media (min-width: 64rem) {
  .vh-cols-g { grid-template-columns: 210px minmax(0, 1fr) 300px; }
  .vh-cols-g .vh-rail { grid-column: auto; grid-template-columns: none; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; }
}
/* computers: the grid, the open word, the rail */
@media (min-width: 75rem) {
  .vh-words .vh-cols { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) 290px; }
  .vh-detail { display: block; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow-y: auto; overscroll-behavior: contain; }
  .vh-kbd { display: block; }
  .vh-tiles { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}
/* phones: a strip, then a list; each word in a sheet */
@media (max-width: 47.99rem) {
  .wrap.vh { gap: 14px; padding-top: 16px; }
  .vh-lede { display: none; }
  .vh .vh-rail { display: none; }
  .vh-strip { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
  .vh-strip-b { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
  .vh-strip-b .btn { flex: 1 1 auto; padding: 0 12px; }
  .vh-list { padding: 12px; gap: 10px; }
  .vh-list .fx-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -12px; padding: 0 12px 2px; }
  .vh-list .fx-row::-webkit-scrollbar { display: none; }
  .vh-list .fx-sel, .vh-list .fx-tog { flex: none; }
  .vh-tiles { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .vh-t { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
  .vh-t.on { background: none; box-shadow: none; }
  .vh-t-top { grid-column: 1; } .vh-t-meta { grid-column: 2; grid-row: 1; } .vh-t-d { grid-column: 1 / -1; -webkit-line-clamp: 1; }
  .vh-tr { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .vh-parts-g { grid-template-columns: minmax(0, 1fr); }
  .vh-c-front, .vh-c-back { padding: 22px 16px; }
  .vh-card3d { min-height: 260px; }
  .vh-sum li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vh-done-h svg { width: 64px; height: 64px; }
  .vh-q { padding: 16px; }
  .vh-q-s { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .vh-c-front, .vh-c-back, .vh-prog i, .vh-ring .fg { transition: none; } }
html:not(.owl-motion) .vh-c-front, html:not(.owl-motion) .vh-c-back { transition: none; }

/* Word Glide */
.vg { position: fixed; inset: 0; z-index: 90; background: var(--bg); color: var(--fg); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.vg-top { width: 100%; max-width: 920px; display: flex; align-items: center; gap: 14px; min-height: 48px; }
.vg-title { font: 700 20px/1 var(--f-display); }
.vg-top .strike { margin-left: auto; }
.vg-hearts i { font-style: normal; font-size: 20px; color: var(--line-strong); margin-right: 2px; } .vg-hearts i.on { color: #ff4f79; }
.vg-sc { font-size: 15px; }
/* Oct 29 2026 (Todd): the meaning box has one fixed height, and a long meaning shrinks to fit it (vgame.js fit), so the
   game below never moves when a meaning takes one line, two or three */
.vg-prompt { width: 100%; max-width: 920px; display: grid; gap: 4px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); height: 84px; flex: none; overflow: hidden; align-content: center; }
.vg-prompt b { font: 600 clamp(17px, 2.2vw, 22px)/1.35 var(--f-body); }
.vg-stage { position: relative; width: 100%; max-width: 920px; display: flex; justify-content: center; }
.vg-stage:focus { outline: none; }
.vg-how { font-size: 13px; text-align: center; margin: 0; }
.vg-over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; text-align: center; background: color-mix(in srgb, var(--bg) 88%, transparent); border-radius: var(--r-lg); overflow-y: auto; }
.vg-over-t { font: 700 30px/1 "Fredoka", var(--f-display); }
.vg-over-s { font: 700 56px/1 "Fredoka", var(--f-display); }
.vg-miss { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-width: 460px; text-align: left; font-size: 14px; }
@media (max-width: 47.99rem) { .vg-how { display: none; } .vg-prompt { height: 88px; padding: 10px 14px; } }
.vh-ch.right .vh-ch-k { background: var(--good); color: var(--surface); } .vh-ch.wrong .vh-ch-k { background: var(--bad); color: var(--surface); }
.vh-ch[disabled] { cursor: default; opacity: 1; }
.vh-list > *, .vh-cols > *, .vh-main > *, .vh-rail > *, .vh-d > *, .vh-q > * { min-width: 0; }
.vh-promo { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.vh-promo .w-badge { width: 44px; height: 44px; font-size: 16px; }
.vh-promo .btn { margin-left: auto; }
.arc-learn { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 520px; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; text-align: left; }
.arc-learn > span:first-child { font-size: 28px; }
@media (pointer: coarse) { .vh-play kbd { display: none; } }
@media (max-width: 30rem) { .vh-promo { flex-wrap: wrap; } .vh-promo .btn { margin-left: 58px; } }

/* The reading library (js/read.js) and the reader (js/reader.js), October 29, 2026. Prefixes rd- and rdr-. */
:root { --rd-lit: #7c3aed; --rd-sci: #1d64d8; --rd-his: #b8460b; --rd-hum: #047a55;
  --rdr-y: #fde68a; --rdr-g: #bbf7d0; --rdr-p: #fbcfe8; --rdr-hl-ink: #16123a; --w-read: #b4532a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rd-lit: #c4b5fd; --rd-sci: #93c5fd; --rd-his: #fdba74; --rd-hum: #6ee7b7;
  --rdr-y: #75620f; --rdr-g: #1f6b45; --rdr-p: #8a2f63; --rdr-hl-ink: #fffdf5; } }
:root[data-theme="dark"] { --rd-lit: #c4b5fd; --rd-sci: #93c5fd; --rd-his: #fdba74; --rd-hum: #6ee7b7;
  --rdr-y: #75620f; --rdr-g: #1f6b45; --rdr-p: #8a2f63; --rdr-hl-ink: #fffdf5; }
.w-badge.w-read { background: var(--w-read); }
.w-read { --wc: var(--w-read); }

/* ---------- the library page ---------- */
.rd-home { gap: 22px; }
.rd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rd-head p { max-width: 62ch; }
.rd-bar .fx-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.rd-sec { display: grid; gap: 12px; }
.rd-sec + .rd-sec { margin-top: 10px; }
.rd-ch { display: flex; align-items: center; gap: 10px; }
.rd-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.rd-card { display: grid; gap: 6px; align-content: start; text-align: left; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); color: var(--fg); cursor: pointer; min-width: 0; }
.rd-card.big { padding: 16px 18px; }
.rd-cl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.rd-ct { font: 700 17px/1.25 var(--f-display); }
.rd-card.big .rd-ct { font-size: 19px; }
.rd-cs { color: var(--fg-2); font-size: 14px; line-height: 1.4; }
.rd-cf { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; font-size: 13px; }
.rd-lv { font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); }
.rd-lv1 { color: var(--good); background: var(--good-soft); }
.rd-lv2 { color: var(--warn); background: var(--warn-soft); }
.rd-lv3 { color: var(--bad); background: var(--bad-soft); }
.rd-empty, .rd-fine { text-align: center; }
.rd-fine { font-size: 13px; max-width: 70ch; margin: 0 auto; }
@media (hover: hover) { .rd-card:hover { border-color: var(--primary); } .rd-row:hover { background: var(--surface-2); color: var(--fg); } }

/* ---------- the list beside the text ---------- */
.rd-side { display: grid; gap: 10px; align-content: start; }
.rd-side .fx-bar { gap: 8px; }
.rd-side .fx-search { flex-basis: 100%; }
.rd-side .fx-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; width: 100%; padding: 3px; border-radius: 12px; background: var(--surface-2); }
.rd-side .fx-chip { justify-content: center; min-height: 34px; padding: 0 4px; border: 0; border-radius: 9px; background: none; font-size: 13.5px; }
.rd-side .fx-chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-ink); }
.rd-groups { display: grid; gap: 2px; }
.rd-grp summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 0 8px; cursor: pointer; list-style: none; border-radius: 8px; }
.rd-grp summary::-webkit-details-marker { display: none; }
.rd-grp summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: rotate(-45deg); margin-right: 4px; flex: none; }
.rd-grp[open] summary::before { transform: rotate(45deg); }
.rd-gl { flex: 1; font: 800 12.5px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); }
.rd-rows { display: grid; gap: 3px; padding: 2px 0 8px; }
.rd-row { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border: 0; border-radius: 9px; background: none; color: var(--fg-2); text-align: left; cursor: pointer; font-size: 14.5px; }
.rd-card .fx-tag, .rd-row .fx-tag, .rd-sk .fx-tag, .rd-ch .fx-tag, .rd-cl .fx-tag, .rdr .fx-tag { font-size: 12px; }
.rd-row .fx-tag { flex: none; min-width: 40px; justify-content: center; }
.rd-row.on { background: var(--primary-soft); color: var(--fg); font-weight: 650; }
.rd-rt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-done { font-size: 12.5px; font-weight: 700; color: var(--good); }
.rd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--xp); flex: none; }
.rd-none { font-size: 13px; padding: 4px 10px; }

/* ---------- progress ---------- */
.rd-sks { display: grid; gap: 10px; }
.rd-sk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 2fr) 48px auto; gap: 12px; align-items: center; font-size: 14.5px; }
.rd-sk:has(.fx-tag) { grid-template-columns: 48px minmax(0, 1fr) 48px auto; }
.rd-skbar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rd-skbar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.rd-stats .rd-row { min-height: 44px; }

/* ---------- the reader ---------- */
.rdr { --rdr-top: 61px; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.rdr-bar { display: flex; align-items: center; gap: 10px; padding: 8px max(16px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--rdr-top)); z-index: 15; min-width: 0; }
.rdr-title { font: 700 16px/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rdr-bar .grow { flex: 1; }
.rdr-exit, .rdr-ptog { display: inline-flex; align-items: center; gap: 6px; }
.rdr-ptog[aria-pressed="true"] { border-color: var(--good); color: var(--good); }
.rdr-sc { font-size: 12.5px; font-weight: 700; color: var(--fg-3); }
.rdr-pens { display: flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid var(--line); }
.rdr-pen { width: 32px; height: 32px; border-radius: 9px; border: 2px solid transparent; display: grid; place-items: center; cursor: pointer; color: var(--rdr-hl-ink); padding: 0; }
.rdr-pen-y { background: var(--rdr-y); } .rdr-pen-g { background: var(--rdr-g); } .rdr-pen-p { background: var(--rdr-p); }
.rdr-pen-x { background: var(--surface-2); color: var(--fg-2); }
.rdr-pen[aria-pressed="true"] { border-color: var(--fg); box-shadow: 0 0 0 2px var(--surface) inset; }
.rdr-body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.rdr-side { display: none; }
.rdr-text { min-width: 0; }
.rdr-page { max-width: 46rem; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-left, 0px)) 40px; }
.rdr-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.rdr-h { font: 800 clamp(28px, 4vw, 38px)/1.1 var(--f-display); margin: 12px 0 6px; }
.rdr-by { color: var(--fg-2); margin: 0 0 14px; }
.rdr-intro { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--primary); background: var(--surface-2); border-radius: 0 10px 10px 0; color: var(--fg-2); font-size: 15px; }
.rdr-paras p { font: 400 20px/1.62 var(--f-text); color: var(--fg); margin: 0 0 1em; }
.rdr-paras p.rdr-poem { white-space: normal; padding-left: 1.2em; }
.rdr-text.pen-on .rdr-paras { cursor: text; }
.rdr-text.pen-on .rdr-paras, .rdr-text.pen-on .rdr-paras * { -webkit-user-select: text; user-select: text; }
mark.rdr-hl { color: var(--rdr-hl-ink); border-radius: 3px; padding: 1px 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.rdr-hl-y { background: var(--rdr-y); } mark.rdr-hl-g { background: var(--rdr-g); } mark.rdr-hl-p { background: var(--rdr-p); }
.rdr-text.pen-on mark.rdr-hl { cursor: pointer; }
.rdr-credit { margin: 22px 0 0; font-size: 14px; font-style: italic; color: var(--fg-3); }
.rdr-credit a { color: inherit; }
.rdr-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.rdr-pbar { display: none; }

.rdr-qs { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--line); }
.rdr-qh { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.rdr-qh b { font: 700 18px/1 var(--f-display); flex: 1; }
.rdr-score { font-weight: 700; color: var(--good); }
.rdr-qx { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg-2); display: grid; place-items: center; cursor: pointer; }
.rdr-res { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; background: var(--good-soft); color: var(--fg); font-size: 14.5px; }
.rdr-ql { flex: 1 1 auto; min-height: 0; list-style: none; margin: 0; padding: 6px 18px 18px; overflow-y: auto; overscroll-behavior: contain; }
.rdr-q { padding: 16px 0 18px; border-bottom: 1px solid var(--line); }
.rdr-q:last-child { border-bottom: 0; }
.rdr-qstem { display: flex; gap: 8px; font-weight: 650; line-height: 1.45; margin-bottom: 10px; }
.rdr-qn { color: var(--primary); flex: none; }
.rdr-choices { display: grid; gap: 6px; }
.rdr-ch { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--fg-2); text-align: left; cursor: pointer; font-size: 15px; line-height: 1.45; }
.rdr-let { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 1.5px solid var(--line-strong); color: var(--fg-3); }
.rdr-ct { min-width: 0; padding-top: 2px; }
.rdr-ch[aria-pressed="true"] { border-color: var(--primary); background: var(--primary-soft); color: var(--fg); }
.rdr-ch[aria-pressed="true"] .rdr-let { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.rdr-ch.right { border-color: var(--good); background: var(--good-soft); color: var(--fg); }
.rdr-ch.right .rdr-let { background: var(--good); border-color: var(--good); color: var(--surface); }
.rdr-ch.wrong { border-color: var(--bad); background: var(--bad-soft); color: var(--fg); }
.rdr-ch.wrong .rdr-let { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.rdr-ch[aria-disabled="true"] { cursor: default; }
.rdr-why { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14.5px; line-height: 1.5; }
.rdr-why p { margin: 8px 0 0; }
.rdr-sk { font-size: 13px; margin-left: 8px; }
.rdr-qnav { display: none; }
.rdr-qf { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
@media (hover: hover) { .rdr-ch:not([aria-disabled="true"]):hover { border-color: var(--primary); } .rdr-qx:hover { border-color: var(--primary); } }

/* computers: the whole text on the left, every question on the right, each scrolling on its own */
@media (min-width: 861px) {
  .rdr { height: calc(100dvh - var(--rdr-top) - env(safe-area-inset-top, 0px)); }
  .rdr-bar { position: static; }
  .rdr-body { grid-template-columns: minmax(0, 1fr) minmax(360px, 34%); }
  .rdr.q-hide .rdr-body { grid-template-columns: minmax(0, 1fr); }
  .rdr.q-hide .rdr-qs { display: none; }
  .rdr-text { overflow-y: auto; overscroll-behavior: contain; }
  .rdr-qs .rdr-qx { display: grid; }
}
@media (min-width: 1180px) {
  .rdr.has-side .rdr-body { grid-template-columns: 270px minmax(0, 1fr) minmax(380px, 32%); }
  .rdr.has-side.q-hide .rdr-body { grid-template-columns: 270px minmax(0, 1fr); }
  .rdr-side { display: block; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 24px; border-right: 1px solid var(--line); background: var(--surface); }
}
/* phones: the text fills the screen; Practice opens the questions one at a time over it */
@media (max-width: 860px) {
  .rdr-title { display: none; }
  .rdr-bar { gap: 8px; padding-block: 6px; }
  .rdr-bar .grow { display: none; }
  .rdr-pens { border-left: 0; padding-left: 0; margin-right: auto; }
  .rdr-ptog { display: none; }
  .rdr-qs { display: none; }
  .rdr-page { padding-top: 18px; padding-bottom: 24px; }
  .rdr-paras p { font-size: 19px; }
  .rdr-pbar { display: block; position: sticky; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
  .rdr-pgo { width: 100%; }
  .rdr.q-open .rdr-qs { display: flex; position: fixed; inset: 0; z-index: 45; border-left: 0; padding-top: env(safe-area-inset-top, 0px); }
  .rdr.q-open .rdr-q { display: none; border: 0; }
  .rdr.q-open .rdr-q.cur { display: block; }
  .rdr.q-open .rdr-qnav { display: flex; gap: 8px; margin-top: 16px; }
  .rdr.q-open .rdr-qnav .btn { flex: 1; }
  .rdr.q-open .rdr-qf { display: none; }
  .rdr-nav { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: no-preference) { .rdr-ch { transition: border-color .15s, background-color .15s; } }
.rd-promo { display: flex; align-items: center; gap: 14px; }
.rd-promo .w-badge { width: 44px; height: 44px; font-size: 13px; flex: none; }
.rd-promo .btn { margin-left: auto; flex: none; }

/* the CLT player on a computer: a verbal passage's questions all at once (js/app.js groupHTML) */
.pgrp { display: grid; gap: 0; }
.pgrp-q { display: grid; gap: 12px; padding: 18px 0 22px; border-bottom: 1px solid var(--line); }
.pgrp-q:first-child { padding-top: 4px; }
.pgrp-q:last-child { border-bottom: 0; }
.pgrp-q .qnum .pill svg { width: 13px; height: 13px; vertical-align: -2px; }

/* phones: highlighters and the close button big enough to tap */
@media (max-width: 860px) { .rdr-pen { width: 40px; height: 40px; } .rdr-qx { width: 40px; height: 40px; } }

/* 1.107.0: Junior's CLT8 and CLT10 practice tests (js/jrtests.js). The player reuses the CLT player's layout. */
.jt-facts { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--jr-ink2, var(--fg-2)); font-size: 15px; }
.jt-tests { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.jt-test { padding: 16px; gap: 8px; }
.jt-test .split { gap: 8px; align-items: flex-start; }
.jt-test .split b { min-width: 0; overflow-wrap: anywhere; }
.jt-test .pill { flex: none; }
.jt-home .split { gap: 8px; }
.jt-seg { display: grid; grid-template-columns: repeat(4, auto); border-radius: 18px; max-width: 100%; justify-self: start; }
.jt-seg button { white-space: nowrap; }
.jt-src { justify-self: start; font-size: 14px; font-weight: 600; color: var(--jr-text-accent, var(--primary)); }
.jt-player .pbody.solo .pane .inner { max-width: 680px; }
.jt-formulas { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.jt-formulas summary { cursor: pointer; min-height: var(--tap); display: inline-flex; align-items: center; }
.jt-formulas ul { margin: 6px 0 8px; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; color: var(--fg-2); }
.jt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.jt-cell { min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--fg); font: 600 15px/1 var(--f-body); cursor: pointer; position: relative; font-variant-numeric: tabular-nums; }
.jt-cell.done { background: var(--primary-soft); border-color: var(--primary-edge); }
.jt-cell.cur { outline: 2px solid var(--primary); outline-offset: 1px; }
.jt-cell.flag::after { content: ""; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--streak); }
.jt-confirm { gap: 12px; }
.jt-secs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.jt-sec { display: grid; gap: 2px; justify-items: center; text-align: center; padding: 12px 6px; border-radius: var(--r); background: color-mix(in srgb, var(--jr-sky, var(--primary)) 10%, var(--jr-card, var(--surface))); border: 1px solid var(--jr-line, var(--line)); min-width: 0; }
.jt-sec b { font: 700 22px/1.1 var(--f-kid, var(--f-display)); color: var(--jr-ink, var(--fg)); }
.jt-sec span { font-size: 13px; color: var(--jr-ink2, var(--fg-2)); overflow-wrap: anywhere; }
.jt-weak { display: grid; gap: 10px; }
.jt-wk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px; border-radius: var(--r); border: 1px solid var(--jr-line, var(--line)); }
.jt-list { display: grid; gap: 4px; }
.jt-row { display: grid; grid-template-columns: 28px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--jr-line, var(--line)); border-radius: var(--r); background: var(--jr-card, var(--surface)); color: var(--jr-ink, var(--fg)); text-align: left; cursor: pointer; font: 500 15px/1.3 var(--f-body); }
.jt-rt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jt-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 700; font-size: 14px; }
.jt-mark.ok { background: var(--jr-ok-soft, var(--good-soft)); color: var(--jr-ok, var(--good)); }
.jt-mark.no { background: var(--jr-no-soft, var(--bad-soft)); color: var(--jr-no, var(--bad)); }
.jt-mark.skip { background: var(--surface-2); color: var(--fg-3); }
@media (hover: hover) {
  .jt-row:hover { border-color: var(--jr-sky, var(--primary)); }
  .jt-cell:hover { border-color: var(--primary); }
}
@media (max-width: 480px) {
  .jt-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; }
  .jt-secs { gap: 6px; }
  .jt-sec { padding: 10px 4px; }
  .jt-sec b { font-size: 19px; }
}
/* 1.112.0: Latin drills, one tile per skill */
.lat-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.lat-skill { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.lat-skill b { font-size: 16px; }
.lat-skill .faint { font-size: 13px; }
@media (hover: hover) { .lat-skill:hover { border-color: var(--primary); } }
.lat-skill:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* Oct 29 2026: the passage font's Latin glyphs turn u into v ("pvella") when lang="la"; keep ordinary letters */
.ptext[lang="la"] { font-feature-settings: "locl" 0; }
/* 1.114.0: poems keep their lines; the typed-answer box; the no-going-back note in the player's footer */
.ptext .pverse { white-space: pre-line; }
.jt-in { max-width: 220px; font-size: 22px; padding: 10px 14px; border: 2px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--fg); }
.jt-in:focus { outline: 3px solid var(--primary); outline-offset: 2px; }
.jt-lockn { font-size: 13px; white-space: nowrap; }

/* Oct 29 2026: the demo loops (js/demovid.js). Phones: a sideways row of phone-shaped clips, one at a time.
   Computers: a two-column grid of computer-shaped clips. The poster holds the box's shape before anything loads. */
.dv-row { display: grid; gap: 18px; }
.dv-card { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dv-frame { position: relative; border-radius: 22px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 10px 30px -14px rgba(30, 20, 90, .35); }
.dv { display: block; width: 100%; height: auto; object-fit: cover; }
.dv-phone .dv { aspect-ratio: 432 / 936; }
.dv-desk .dv { aspect-ratio: 1024 / 640; }
.dv-card figcaption { display: flex; flex-direction: column; gap: 3px; }
.dv-card figcaption b { font: 700 17px/1.25 "Bricolage Grotesque", system-ui, sans-serif; }
.dv-card figcaption span { color: var(--muted); font-size: 15px; line-height: 1.45; }
.dv-pause { position: absolute; right: 10px; bottom: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(15, 13, 36, .62); color: #fff; cursor: pointer; }
.dv-pause:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.dv-phone { grid-auto-flow: column; grid-auto-columns: min(82vw, 340px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 12px; overscroll-behavior-x: contain; scrollbar-width: none; }
.dv-phone::-webkit-scrollbar { display: none; }
.dv-phone .dv-card { scroll-snap-align: center; }
/* Oct 29 2026 (Todd: "too small to actually see anything"): computers show one loop per row at full width, with the
   words beside it when there is room (or under it); a tap opens it full size (.dv-big) */
.dv-desk { grid-template-columns: minmax(0, 1fr); gap: 40px; container-type: inline-size; }
@container (min-width: 1000px) {
  .dv-desk .dv-card { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(220px, 1fr); align-items: center; gap: 32px; }
  .dv-desk .dv-card:nth-child(even) { grid-template-columns: minmax(220px, 1fr) minmax(0, 2.3fr); } .dv-desk .dv-card:nth-child(even) .dv-frame { order: 2; }
  .dv-desk .dv-card figcaption b { font-size: 22px; } .dv-desk .dv-card figcaption span { font-size: 16px; }
}
.dv-desk .dv-frame { border-radius: 14px; }
.dv-sec .dv-sub { color: var(--muted); font-size: 14px; margin: 0; }

/* Oct 29 2026: "Over 350 colleges accept CLT scores" (js/cltcolleges.js). Two rows drift in opposite directions;
   each row is drawn twice so the loop has no seam. Hover or focus stops it; reduced motion keeps it still. */
.cc { display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.cc-head { display: flex; flex-direction: column; gap: 6px; }
.cc-head p { margin: 0; }
.cc-row { display: flex; width: max-content; gap: 10px; }
.cc-track { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; animation: ccDrift 90s linear infinite; }
.cc-rev .cc-track { animation-direction: reverse; animation-duration: 100s; }
.cc-i { display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); white-space: nowrap; font-weight: 600; font-size: 15px; }
.cc-i img { width: 28px; height: 28px; object-fit: contain; }
.cc-m { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--l-lib-soft, var(--surface-2)); color: var(--l-lib, var(--primary)); font: 600 15px/1 "EB Garamond", Georgia, serif; }
.cc-src { font-size: 13px; color: var(--muted); margin: 0; }
/* Oct 29 2026: school marks (js/schoollogos.js) are black one-colour PNGs; ink in light, inverted to white in dark */
.cc-i.cc-logo { padding: 8px 18px; height: 58px; box-sizing: border-box; }
.cc-i.cc-logo img, .sl-img { width: auto; height: 40px; max-width: 170px; object-fit: contain; opacity: .8; }
.sl-mini { width: auto; height: 22px; max-width: 96px; object-fit: contain; opacity: .8; vertical-align: middle; margin-right: 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sl-img, :root:not([data-theme="light"]) .sl-mini { filter: invert(1); opacity: .86; } }
:root[data-theme="dark"] .sl-img, :root[data-theme="dark"] .sl-mini { filter: invert(1); opacity: .86; }
.cc:hover .cc-track, .cc:focus-within .cc-track { animation-play-state: paused; }
@keyframes ccDrift { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 10px)); } }
@media (prefers-reduced-motion: reduce) { .cc-row { width: auto; overflow-x: auto; } .cc-track { animation: none; } .cc-track[aria-hidden] { display: none; } }
.glance-links { columns: 2 260px; column-gap: 28px; }
.glance-links li { break-inside: avoid; }

/* tap to watch full size: the zoom button and the full-screen viewer */
.dv-frame { cursor: zoom-in; }
.dv-zoom { position: absolute; right: 8px; top: 8px; height: 44px; min-width: 44px; padding: 0 12px 0 10px; border-radius: 999px; border: 0; display: inline-flex; align-items: center; gap: 6px; background: rgba(15, 13, 36, .62); color: #fff; font: 600 13px/1 var(--f-body, system-ui); cursor: pointer; }
.dv-zoom:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.dv-big { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 56px 16px 24px; background: rgba(8, 7, 24, .9); }
.dv-big video { width: min(100%, 1400px, calc((100vh - 90px) * 1.6)); height: auto; aspect-ratio: 1024 / 640; border-radius: 12px; background: #000; }
.dv-big.dv-big-phone video { width: min(100%, 460px, calc((100vh - 90px) * 432 / 936)); aspect-ratio: 432 / 936; }
.dv-big-x { position: absolute; top: 10px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .16); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.dv-big-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.dv-big-t { position: absolute; top: 18px; left: 16px; right: 68px; color: #fff; font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Math Facts (js/mathfacts.js), October 29, 2026. Class prefix mf-. The play screen is one big question, the answer
   box and a number pad sized for thumbs; computers type on the keyboard and keep the pad as a fallback. */
.w-mf { --wc: #c2410c; }
.w-badge.w-mf { background: linear-gradient(135deg, #c2410c, #9a3412); }
.mf-home, .mf-play, .mf-done, .mf-gridp, .mf-progp { --mf-fl: #1f9d55; --mf-lr: #e0a400; --mf-tr: #d9480f; --mf-ok: #1e7a4d; }
:root[data-theme="dark"] :is(.mf-home, .mf-play, .mf-done, .mf-gridp, .mf-progp) { --mf-fl: #4fd18b; --mf-lr: #ffd23f; --mf-tr: #ff8a5c; --mf-ok: #6fd3a0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.mf-home, .mf-play, .mf-done, .mf-gridp, .mf-progp) { --mf-fl: #4fd18b; --mf-lr: #ffd23f; --mf-tr: #ff8a5c; --mf-ok: #6fd3a0; } }
.wrap.mf-home, .wrap.mf-gridp, .wrap.mf-progp, .wrap.mf-done { max-width: 980px; gap: 20px; }

/* home */
.mf-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mf-lede { max-width: 58ch; margin: 0; }
.mf-owl { flex: none; }
.mf-kept { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mf-go { display: grid; gap: 14px; padding: 18px; }
.mf-go-h { display: flex; align-items: center; gap: 12px; }
.mf-go-b { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.btn.mf-big { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 18px; border-radius: 16px; white-space: normal; text-align: left; }
.btn.mf-big b { font: 700 17px/1.2 var(--f-display); }
.btn.mf-big span { font-size: 13px; font-weight: 500; opacity: .85; }
.mf-today { font-size: 13.5px; }
.mf-tbls { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-tks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mf-tk { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; box-shadow: 0 2px 0 var(--line); }
.mf-tk.on { border-color: #c2410c; background: color-mix(in srgb, #c2410c 9%, var(--surface)); box-shadow: 0 2px 0 #9a3412; }
.mf-tk b { font: 700 15.5px/1.25 var(--f-display); }
.mf-tk-who { font-size: 12.5px; }
.mf-tk-i { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #c2410c, #9a3412); color: #fff; font: 800 17px/1 var(--f-display); }
.mf-tk-i.big { width: 52px; height: 52px; font-size: 24px; }
.mf-tk-p { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.mf-tk-bar { display: inline-block; flex: 1; min-width: 60px; max-width: 140px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.mf-tk-bar i { display: block; height: 100%; background: var(--mf-fl); border-radius: inherit; }
.mf-bridge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.mf-bridge > .stack { flex: 1 1 220px; }
.mf-bridge .w-badge { width: 48px; height: 48px; font-size: 14px; flex: none; }

/* play */
.wrap.mf-play { max-width: 560px; gap: 14px; padding-top: 12px; }
.mf-top { display: flex; align-items: center; gap: 12px; }
.mf-tbar { flex: 1; height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.mf-tbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f59f00, #c2410c); border-radius: inherit; transition: width .2s; }
.mf-clock { font: 800 18px/1 var(--f-display); min-width: 3.2ch; text-align: right; }
.mf-score { display: inline-grid; place-items: center; min-width: 40px; height: 32px; padding: 0 8px; border-radius: 99px; background: var(--good-soft); color: var(--good); font: 800 16px/1 var(--f-display); }
.mf-stage { display: grid; justify-items: center; gap: 10px; padding: 18px 8px 6px; text-align: center; }
.mf-track { color: var(--fg-3); }
.mf-q { font: 800 clamp(40px, 11vw, 64px)/1.15 var(--f-display); letter-spacing: -.01em; overflow-wrap: anywhere; }
.mf-q.long { font-size: clamp(22px, 5.6vw, 30px); line-height: 1.3; max-width: 30ch; }
.mf-q sup { font-size: .55em; }
.mf-eq { color: var(--fg-3); }
.mf-ask { display: inline-block; margin-top: 6px; font-size: .7em; color: var(--fg-2); }
.mf-fr { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: .62em; line-height: 1.05; text-align: center; }
.mf-fr i { font-style: normal; padding: 0 .12em; }
.mf-fr i:first-child { border-bottom: .09em solid currentColor; }
.mf-in { display: inline-flex; align-items: baseline; justify-content: center; gap: 4px; min-width: 4.5ch; min-height: 1.4em; padding: 4px 18px; border-radius: 16px; border: 2.5px solid var(--line-strong); background: var(--surface); font: 800 clamp(36px, 9vw, 52px)/1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.mf-in .mf-ph { color: var(--fg-3); opacity: .55; }
.mf-in .mf-unit { font-size: .6em; color: var(--fg-2); }
.mf-in.ok { border-color: var(--mf-ok); background: var(--good-soft); color: var(--good); }
.mf-in.ok.fast { box-shadow: 0 0 0 5px color-mix(in srgb, var(--mf-ok) 25%, transparent); }
.mf-in.no { border-color: var(--bad); background: var(--bad-soft); font-size: clamp(28px, 7vw, 40px); }
.mf-in.no s { color: var(--bad); opacity: .8; }
.mf-in.no b { color: var(--fg); }
.mf-in.shake { animation: mf-shake .28s; }
@keyframes mf-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.mf-note { min-height: 1.4em; margin: 0; font-size: 14px; }
.mf-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 380px; margin: 0 auto; }
.mf-pad.wide { grid-template-columns: repeat(3, 1fr); }
.mf-k { min-height: 58px; border-radius: 14px; border: 1.5px solid var(--line-strong); border-bottom-width: 4px; background: var(--surface); color: var(--fg); font: 700 24px/1 var(--f-display); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mf-k:active { transform: translateY(2px); border-bottom-width: 2px; }
.mf-k.op { color: var(--primary); }
.mf-k.del { font-size: 22px; color: var(--fg-2); }
.mf-k.go { background: var(--primary); border-color: var(--primary-edge); color: var(--primary-ink); }
.mf-k.go svg { width: 26px; height: 26px; }
.mf-kb { text-align: center; font-size: 13px; margin: 0; }
@media (hover: none) and (pointer: coarse) { .mf-kb { display: none; } }
@media (min-width: 64rem) and (hover: hover) { .mf-k { min-height: 50px; font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .mf-in.shake { animation: none; } .mf-tbar i { transition: none; } }

/* results */
.mf-done-h { display: flex; align-items: center; gap: 16px; }
.mf-sum-g { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.mf-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mf-sum li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--mf-lr); }
.mf-sum li.no { border-left-color: var(--mf-tr); }
.mf-sum-q { font-weight: 600; }
.mf-sum-q .mf-fr { font-size: .9em; }
.mf-sum li b { font-family: var(--f-display); }
.mf-done-acts { flex-wrap: wrap; }

/* the times-table grid */
.mf-grid-w { overflow-x: auto; }
.mf-grid { border-collapse: separate; border-spacing: 3px; margin: 0 auto; font-variant-numeric: tabular-nums; }
.mf-grid th, .mf-grid td { width: 40px; height: 36px; padding: 0; text-align: center; font-size: 13.5px; border-radius: 6px; }
.mf-grid th { font: 700 14px/1 var(--f-display); color: var(--fg-2); }
.mf-grid td { background: var(--surface-2); color: var(--fg-3); }
.mf-grid td.fl { background: var(--mf-fl); color: #fff; }
.mf-grid td.lr { background: color-mix(in srgb, var(--mf-lr) 55%, var(--surface)); color: var(--fg); }
.mf-grid td.tr { background: color-mix(in srgb, var(--mf-tr) 70%, var(--surface)); color: #fff; }
:root[data-theme="dark"] .mf-grid td.fl, :root[data-theme="dark"] .mf-grid td.tr { color: #0f0d24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mf-grid td.fl, :root:not([data-theme="light"]) .mf-grid td.tr { color: #0f0d24; } }
.mf-gx { color: var(--fg-3) !important; }
.mf-grid-w.mini .mf-grid th, .mf-grid-w.mini .mf-grid td { width: 22px; height: 20px; font-size: 12px; border-radius: 4px; }
.mf-grid-w.mini .mf-grid { border-spacing: 2px; }
@media (max-width: 30rem) { .mf-grid-w:not(.mini) .mf-grid th, .mf-grid-w:not(.mini) .mf-grid td { width: 24px; height: 28px; font-size: 12px; letter-spacing: -.03em; } .mf-grid { border-spacing: 2px; } }
.mf-rows { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mf-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13px; color: var(--fg-2); }
.mf-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.mf-legend i.fl { background: var(--mf-fl); border-color: transparent; } .mf-legend i.lr { background: var(--mf-lr); border-color: transparent; } .mf-legend i.tr { background: var(--mf-tr); border-color: transparent; }
.mf-legend b { margin-left: auto; }

/* progress */
.mf-pgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.mf-prow { display: grid; grid-template-columns: minmax(0, 1fr) 110px 52px; align-items: center; gap: 10px; font-size: 14px; }
.mf-prow .mf-tk-bar { max-width: none; }
.mf-days { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.mf-days i { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: var(--line); }
.mf-days i.some { background: linear-gradient(180deg, #f59f00, #c2410c); }
.mf-bests { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mf-bests li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
@media (max-width: 47.99rem) { .mf-owl svg { width: 64px; height: 64px; } .mf-done-h { align-items: flex-start; } }

/* the world chip in the header (ui.js draws it as w-math; dark mode's lighter --primary made white text faint) */
.w-chip.w-math { --wc: #c2410c; }
.w-chip.w-grammar { --wc: #6d28d9; }
/* Oct 29 2026 (Todd: nothing jumps during play; test/steady.mjs): the question, the answer box and the note each keep
   one height (a question over 14 letters uses the smaller type, js/mathfacts.js paint), so the number pad stays under the thumb from key to key and question to question. A wrong answer shows
   the right one at a smaller size inside the same box; the note keeps room for a two-line tip. */
.mf-q { min-height: clamp(64px, 17vw, 90px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; column-gap: .25em; }
.mf-in { box-sizing: border-box; height: calc(clamp(36px, 9vw, 52px) * 1.2 + 13px); min-height: 0; align-items: center; }
.mf-in.no { line-height: 1; }
.mf-note { min-height: 2.8em; line-height: 1.4; }

/* The Daily Grammar Fix (js/gfix.js), October 29, 2026. Class prefix gf-. The play screen is one sentence of big
   tappable words, then three full-sentence fixes; everything a thumb touches is at least 44px tall. */
.w-gf { --wc: #6d28d9; }
.w-badge.w-gf { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.gf-home, .gf-play, .gf-done, .gf-rules, .gf-rulep, .gf-progp { --gf: #6d28d9; --gf-soft: #f1ebff; --gf-ok: #1e7a4d; --gf-ok-bg: #e3f6ec; --gf-no: #b42318; --gf-no-bg: #fdecea; --gf-mk: #fff1a8; --gf-mk-fg: #3b2f00; }
:root[data-theme="dark"] :is(.gf-home, .gf-play, .gf-done, .gf-rules, .gf-rulep, .gf-progp) { --gf: #b79bff; --gf-soft: #2a2148; --gf-ok: #6fd3a0; --gf-ok-bg: #173a2a; --gf-no: #ff9b8f; --gf-no-bg: #42201d; --gf-mk: #5c4b00; --gf-mk-fg: #fff3b8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.gf-home, .gf-play, .gf-done, .gf-rules, .gf-rulep, .gf-progp) { --gf: #b79bff; --gf-soft: #2a2148; --gf-ok: #6fd3a0; --gf-ok-bg: #173a2a; --gf-no: #ff9b8f; --gf-no-bg: #42201d; --gf-mk: #5c4b00; --gf-mk-fg: #fff3b8; } }
.wrap.gf-home, .wrap.gf-rules, .wrap.gf-rulep, .wrap.gf-progp, .wrap.gf-done { max-width: 980px; gap: 20px; }
.gf-link { border: 0; background: none; padding: 0; color: var(--gf); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 0; }
.gf-back { align-self: flex-start; min-height: 32px; text-decoration: none; }

/* home */
.gf-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gf-lede { max-width: 58ch; margin: 0; }
.gf-owl { flex: none; }
.gf-kept { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.gf-today { display: grid; gap: 14px; padding: 18px; border: 1.5px solid color-mix(in srgb, var(--gf) 45%, var(--line)); background: color-mix(in srgb, var(--gf-soft) 60%, var(--surface)); }
.gf-today-h { display: flex; align-items: center; gap: 12px; }
.gf-num { display: inline-grid; place-items: center; flex: none; min-width: 52px; height: 52px; padding: 0 8px; border-radius: 14px; background: linear-gradient(135deg, #7c3aed, #5b21b6); color: #fff; font: 800 18px/1 var(--f-display); }
.gf-today-r { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.gf-today-r svg { width: 20px; height: 20px; color: var(--gf-ok); }
.btn.gf-play-b { flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 18px; border-radius: 16px; white-space: normal; text-align: left; justify-self: start; min-width: min(100%, 280px); }
.btn.gf-play-b b { font: 700 17px/1.2 var(--f-display); }
.btn.gf-play-b span { font-size: 13px; font-weight: 500; opacity: .9; }
.gf-lvls { display: flex; flex-wrap: wrap; gap: 6px; }
.gf-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.gf-day { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; min-height: 76px; border-radius: 12px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; }
.gf-day i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); font-style: normal; font-weight: 800; }
.gf-day i svg { width: 16px; height: 16px; }
.gf-day.ok i { background: var(--gf-ok); color: #fff; }
.gf-day.no i { background: var(--gf-no-bg); color: var(--gf-no); }
.gf-day.today { border-color: var(--gf); }
.gf-day.today i { background: var(--gf-soft); box-shadow: inset 0 0 0 2px var(--gf); }
.gf-day-d { font-size: 12px; font-weight: 600; }
.gf-day-n { font-size: 12px; color: var(--fg-3); }
.gf-bridge { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gf-bridge > .stack { flex: 1 1 220px; }
.gf-bridge .w-badge { width: 48px; height: 48px; font-size: 14px; flex: none; }

/* play */
.wrap.gf-play { max-width: 640px; gap: 14px; padding-top: 12px; }
.gf-top { display: flex; align-items: center; gap: 12px; }
.gf-top .strike { width: 44px; height: 44px; }
.gf-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; }
.gf-bar i { display: block; height: 100%; background: linear-gradient(90deg, #a78bfa, #6d28d9); border-radius: inherit; transition: width .2s; }
.gf-stage { display: grid; gap: 14px; }
.gf-ask { margin: 0; font-size: 17px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.gf-sent { margin: 0; font: 600 22px/1.75 var(--f-display); overflow-wrap: break-word; }
.gf-sent.shown { font-weight: 500; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); line-height: 1.55; }
.gf-w { display: inline-block; min-height: 44px; margin: 2px 0; padding: 4px 8px; border-radius: 10px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--fg); font: inherit; line-height: 1.3; cursor: pointer; box-shadow: 0 2px 0 var(--line); vertical-align: middle; }
.gf-w:focus-visible { outline: 3px solid var(--gf); outline-offset: 2px; }
.gf-w.no { border-color: var(--gf-no); background: var(--gf-no-bg); color: var(--gf-no); text-decoration: line-through; box-shadow: none; cursor: default; }
@media (hover: hover) { .gf-w:not(.no):hover { border-color: var(--gf); background: var(--gf-soft); } .gf-opt:is(button):hover { border-color: var(--gf); } .gf-day:hover, .gf-rule:hover { border-color: var(--gf); } }
.gf-mk { background: var(--gf-mk); color: var(--gf-mk-fg); padding: 1px 4px; border-radius: 5px; font-weight: 700; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.gf-hint { margin: 0; font-size: 13.5px; }
.gf-opts { display: grid; gap: 10px; }
.gf-opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 56px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--fg); font: inherit; font-size: 16.5px; line-height: 1.45; text-align: left; cursor: pointer; box-shadow: 0 2px 0 var(--line); }
.gf-opt b { color: var(--gf); }
.gf-lt { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2); font: 800 14px/1 var(--f-display); }
.gf-lt svg { width: 16px; height: 16px; }
.gf-opts.done .gf-opt { cursor: default; box-shadow: none; }
.gf-opt.right { border-color: var(--gf-ok); background: var(--gf-ok-bg); }
.gf-opt.right .gf-lt { background: var(--gf-ok); color: #fff; }
.gf-opt.right b { color: var(--gf-ok); }
.gf-opt.wrong { border-color: var(--gf-no); background: var(--gf-no-bg); }
.gf-opt.wrong .gf-lt { background: var(--gf-no); color: #fff; }
.gf-opt.wrong b { color: var(--gf-no); }
.gf-opt.dim { opacity: .62; }
.gf-res { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--gf-ok-bg); }
.gf-res.half { background: var(--gf-soft); }
.gf-res.no { background: var(--gf-no-bg); }
.gf-res-owl { flex: none; }
.gf-why { display: grid; gap: 8px; }
.gf-why p { margin: 0; }
.gf-why .btn { justify-self: start; }
.gf-rule1 { font-size: 14px; }
.btn.gf-next { min-height: 52px; font-size: 17px; }

/* done */
.gf-done-h { display: flex; align-items: center; gap: 16px; }
.gf-share { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font: 600 15px/1.6 var(--f-body, inherit); white-space: pre-wrap; overflow-wrap: anywhere; }
.gf-sum { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gf-sum li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border-left: 4px solid var(--gf-no); }
.gf-sum li b { color: var(--gf-ok); }
.gf-done-acts { flex-wrap: wrap; }

/* rules */
.gf-rlist { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.gf-rule { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; font: inherit; box-shadow: 0 2px 0 var(--line); }
.gf-rule b { font: 700 15.5px/1.25 var(--f-display); }
.gf-rule > svg { width: 18px; height: 18px; flex: none; color: var(--fg-3); }
.gf-rule-one { font-size: 13px; }
.gf-rp { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.gf-rbar { display: inline-block; flex: 1; min-width: 60px; max-width: 160px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.gf-rbar i { display: block; height: 100%; background: var(--gf-ok); border-radius: inherit; }
.gf-one { margin: 0; font-size: 17px; font-weight: 600; max-width: 62ch; }
.gf-ex { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gf-ex li { display: grid; gap: 4px; }
.gf-x, .gf-c { display: flex; align-items: flex-start; gap: 8px; }
.gf-x { color: var(--gf-no); }
.gf-x s { color: var(--fg-2, var(--fg)); text-decoration-color: var(--gf-no); }
.gf-c { color: var(--fg); font-weight: 600; }
.gf-x svg, .gf-c svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.gf-c svg { color: var(--gf-ok); }

/* progress */
.gf-stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.gf-stats .card { display: grid; gap: 2px; padding: 14px 16px; }
.gf-stats b { font: 800 26px/1.1 var(--f-display); }
.gf-prow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 140px) auto; align-items: center; gap: 10px; }
.gf-prow .gf-link { text-align: left; }
.gf-prow .gf-rbar { max-width: none; }

@media (max-width: 47.99rem) {
  .gf-owl svg { width: 64px; height: 64px; }
  .gf-done-h { align-items: flex-start; }
  .gf-sent { font-size: 19px; }
  .gf-opt { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .gf-bar i { transition: none; } }
.gf-link.gf-back { margin-right: auto; width: auto; }
/* Oct 29 2026 (Todd: nothing jumps during play; test/steady.mjs): "One part of this sentence is wrong." takes two lines
   on a phone and "Not that one. 2 tries left." one, so the line above the sentence keeps room for two and the words
   stay under the thumb after a miss */
.gf-ask { line-height: 1.45; min-height: calc(2.9em + 4px); align-content: flex-start; } /* two lines and the 4px row gap */
@media (min-width: 48rem) { .gf-ask { min-height: 1.45em; } }

/* HSPT (October 29, 2026): the HSPT world (/hspt) and the test-world engine (examworld.js). The world reuses the SAT
 * world's screens and player (sat-*, sp-*, td-*), recoloured: an emerald green, deep in light mode, bright in dark. */
:root { --w-hspt: #0b7a55; --hspt: #0b7a55; --hspt-ink: #ffffff; --hspt-soft: #e2f4ec; --hspt-deep: #064631; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hspt: #4fd1a1; --hspt-ink: #06281c; --hspt-soft: #10302a; --hspt-deep: #bdf2dc; } }
:root[data-theme="dark"] { --hspt: #4fd1a1; --hspt-ink: #06281c; --hspt-soft: #10302a; --hspt-deep: #bdf2dc; }
.w-hspt { --wc: var(--w-hspt); }
.w-badge.w-hspt { background: var(--w-hspt); }
body.world-hspt { --sat: var(--hspt); --sat-ink: var(--hspt-ink); --sat-soft: var(--hspt-soft); --sat-deep: var(--hspt-deep); --primary: var(--hspt); --primary-ink: var(--hspt-ink); --primary-soft: var(--hspt-soft); --primary-edge: var(--hspt-deep); }
.xwp.hspt-p { --sat: var(--hspt); --sat-ink: var(--hspt-ink); --sat-soft: var(--hspt-soft); --sat-deep: var(--hspt-deep); }

/* the estimate: five sections in a row */
.xw-secs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.xw-sec { display: grid; gap: 1px; padding: 8px 6px; border-radius: 10px; background: var(--surface-2); text-align: center; min-width: 0; }
.xw-sec > span { font-size: 12px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xw-sec b { font: 800 19px/1.1 var(--f-display); }
.xw-sec i { font-style: normal; font-size: 12px; }
@media (max-width: 420px) { .xw-secs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xw-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.xw-groups > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.xw-groups b { font: 800 24px/1.1 var(--f-display); }

/* practice: a skill row with its lesson */
.xw-skrow { display: flex; gap: 8px; align-items: stretch; }
.xw-skrow .sat-sk { flex: 1; min-width: 0; }
.xw-learn { align-self: center; flex: none; }
.xw-seg { flex-wrap: wrap; }

/* tests */
.xw-secgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.xw-secbtn { display: grid; gap: 2px; text-align: left; padding: 12px 14px; min-height: 64px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
.xw-secbtn b { font-size: 15px; }
.xw-secbtn span { font-size: 13px; }
@media (hover: hover) { .xw-secbtn:hover { border-color: var(--hspt); } }
.xw-testday { display: grid; gap: 4px; text-align: left; font: inherit; color: var(--fg); cursor: pointer; border-left: 5px solid var(--hspt); }

/* the score report */
.xw-rtable th[scope="row"] { font-weight: 600; text-align: left; }
.xw-rtable td .sat-bar { min-width: 80px; }
.xw-rtable .xw-comp th, .xw-rtable .xw-comp td { border-top: 2px solid var(--line); font-weight: 700; }
@media (max-width: 520px) { .xw-rtable .xw-bar-h, .xw-rtable td:last-child { display: none; } }
.xw-weak { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.xw-chart { display: flex; align-items: flex-end; gap: 10px; height: 160px; }
.xw-chart .sc-col { flex: 1; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; height: 100%; font-size: 12px; min-width: 0; }
.xw-chart .sc-col .sc-b { width: 70%; max-width: 44px; align-self: end; background: var(--hspt); }

/* the study plan */
.xw-plan { display: grid; gap: 6px; }
.xw-day { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.xw-day.today { outline: 2px solid var(--hspt); }
.xw-day.off { opacity: .7; }
.xw-day .xw-dd { font-size: 13px; color: var(--fg-2); font-weight: 600; }
.xw-day .faint { font-size: 13px; }
@media (max-width: 520px) { .xw-day { grid-template-columns: minmax(0, 1fr) auto; } .xw-day .xw-dd { grid-column: 1 / -1; } }
.xw-lock { border: 1px dashed var(--line); }

/* the player */
.xw-nocalc { align-self: center; font: 700 11.5px var(--f-body); color: var(--sp-fg); border: 1.5px solid var(--sp-line); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
@media (max-width: 520px) { .xw-nocalc { display: none; } }
.xw-ptitle { display: block; font: 700 18px/1.3 var(--f-display); margin-bottom: 4px; }
.xw-src { font-size: 13px; }
.xw-stem p { margin: 0 0 10px; }
.xw-stem p:last-child { margin-bottom: 0; }
/* the counter on a phone: the overall number only, so it never runs under Back */
.xwp .sp-navbtn { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .xw-insec { display: none; } }

/* 1.115.0 (Todd, October 29, 2026): the entrance-exam worlds on the test-world engine after the HSPT (the ISEE at /isee, the SSAT at /ssat).
 * Each recolours the HSPT world's screens (hspt.css) by pointing the HSPT's colour variables at its own. ISEE: indigo; SSAT: crimson. */
:root { --w-isee: #4338ca; --isee: #4338ca; --isee-ink: #ffffff; --isee-soft: #e8e9fb; --isee-deep: #27206e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --isee: #a5b4fc; --isee-ink: #14123a; --isee-soft: #1d1c40; --isee-deep: #dfe3ff; } }
:root[data-theme="dark"] { --isee: #a5b4fc; --isee-ink: #14123a; --isee-soft: #1d1c40; --isee-deep: #dfe3ff; }
.w-isee { --wc: var(--w-isee); }
.w-badge.w-isee { background: var(--w-isee); }
body.world-isee { --hspt: var(--isee); --hspt-ink: var(--isee-ink); --hspt-soft: var(--isee-soft); --hspt-deep: var(--isee-deep);
  --sat: var(--isee); --sat-ink: var(--isee-ink); --sat-soft: var(--isee-soft); --sat-deep: var(--isee-deep); --primary: var(--isee); --primary-ink: var(--isee-ink); --primary-soft: var(--isee-soft); --primary-edge: var(--isee-deep); }
.xwp.isee-p { --sat: var(--isee); --sat-ink: var(--isee-ink); --sat-soft: var(--isee-soft); --sat-deep: var(--isee-deep); }
body.world-isee .xw-secs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* SSAT: crimson */
:root { --w-ssat: #b42318; --ssat: #b42318; --ssat-ink: #ffffff; --ssat-soft: #fde8e6; --ssat-deep: #6e140d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ssat: #fda29b; --ssat-ink: #3a0a06; --ssat-soft: #3a1714; --ssat-deep: #fee4e2; } }
:root[data-theme="dark"] { --ssat: #fda29b; --ssat-ink: #3a0a06; --ssat-soft: #3a1714; --ssat-deep: #fee4e2; }
.w-ssat { --wc: var(--w-ssat); }
.w-badge.w-ssat { background: var(--w-ssat); }
body.world-ssat { --hspt: var(--ssat); --hspt-ink: var(--ssat-ink); --hspt-soft: var(--ssat-soft); --hspt-deep: var(--ssat-deep);
  --sat: var(--ssat); --sat-ink: var(--ssat-ink); --sat-soft: var(--ssat-soft); --sat-deep: var(--ssat-deep); --primary: var(--ssat); --primary-ink: var(--ssat-ink); --primary-soft: var(--ssat-soft); --primary-edge: var(--ssat-deep); }
.xwp.ssat-p { --sat: var(--ssat); --sat-ink: var(--ssat-ink); --sat-soft: var(--ssat-soft); --sat-deep: var(--ssat-deep); }
body.world-ssat .xw-secs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* SSAT Elementary (October 29, 2026): orange */
:root { --w-sse: #c2410c; --sse: #c2410c; --sse-ink: #ffffff; --sse-soft: #fff1e6; --sse-deep: #7c2d12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sse: #fdba74; --sse-ink: #3b1606; --sse-soft: #3a1f12; --sse-deep: #ffedd5; } }
:root[data-theme="dark"] { --sse: #fdba74; --sse-ink: #3b1606; --sse-soft: #3a1f12; --sse-deep: #ffedd5; }
.w-sse { --wc: var(--w-sse); }
.w-badge.w-sse { background: var(--w-sse); }
body.world-sse { --hspt: var(--sse); --hspt-ink: var(--sse-ink); --hspt-soft: var(--sse-soft); --hspt-deep: var(--sse-deep);
  --sat: var(--sse); --sat-ink: var(--sse-ink); --sat-soft: var(--sse-soft); --sat-deep: var(--sse-deep); --primary: var(--sse); --primary-ink: var(--sse-ink); --primary-soft: var(--sse-soft); --primary-edge: var(--sse-deep); }
.xwp.sse-p { --sat: var(--sse); --sat-ink: var(--sse-ink); --sat-soft: var(--sse-soft); --sat-deep: var(--sse-deep); }
body.world-sse .xw-secs { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* quantitative comparison: Column A and Column B side by side */
.qc-given { margin: 0 0 8px; text-align: center; font-weight: 600; }
.qc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0; }
.qc-cols > div { display: grid; gap: 6px; justify-items: center; align-content: start; text-align: center; padding: 10px 8px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); min-width: 0; }
.qc-cols span { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.qc-cols b { font-weight: 600; overflow-wrap: anywhere; }
/* a sentence-completion blank */
.sc-blank { display: inline-block; min-width: 4.5em; border-bottom: 2px solid currentColor; margin: 0 2px; vertical-align: baseline; line-height: 1; }
.frac { white-space: nowrap; }

/* October 29, 2026: the ISEE essay and the SSAT writing sample */
.xwp .xw-write { max-width: 760px; }
.xwp .xw-write .essay-box { min-height: max(260px, 46vh); height: auto; width: 100%; box-sizing: border-box; }
.xw-wpick { width: 100%; cursor: pointer; }
@media (hover: hover) { .xw-wpick:hover { border-color: var(--primary); } }
.xw-chk { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: none; border: 0; padding: 6px 0; color: inherit; font: inherit; cursor: pointer; min-height: 40px; }
.xw-chk .xw-box { flex: 0 0 20px; height: 20px; margin-top: 2px; border: 2px solid var(--line-strong, currentColor); border-radius: 5px; display: grid; place-items: center; }
.xw-chk[aria-checked="true"] .xw-box { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #fff); }
.xw-wimg { display: block; width: 100%; max-width: 420px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; margin: 4px auto; }

/* Owl Thinkers (October 29, 2026): thinking games for ages 5 to 10 (js/think.js, js/thinkgen.js). Built on Junior's kid
 * look (.jr), with its own grape-and-sunshine colors, big tap targets (at least 64px) and puzzle boards. */
:root { --tk-a: #7c3aed; --tk-b: #ffb020; --tk-ink: #24124a; --tk-tile: #ffffff; --tk-tile-edge: #d9cdf5; --tk-board: #f5f0ff; --tk-q: #7c3aed; --w-thk: #7c3aed; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tk-a: #b79bff; --tk-b: #ffc24d; --tk-ink: #f1ebff; --tk-tile: #f7f4ff; --tk-tile-edge: #4a3a7a; --tk-board: #1d1636; --tk-q: #c9b3ff; } }
:root[data-theme="dark"] { --tk-a: #b79bff; --tk-b: #ffc24d; --tk-ink: #f1ebff; --tk-tile: #f7f4ff; --tk-tile-edge: #4a3a7a; --tk-board: #1d1636; --tk-q: #c9b3ff; }
body.world-think { --primary: #6d28d9; --primary-ink: #fff; --primary-edge: #4c1d95; --primary-soft: color-mix(in srgb, var(--tk-a) 16%, var(--jr-card)); background: var(--jr-bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.world-think { --primary: #c4b0ff; --primary-ink: #1b0f3a; } }
:root[data-theme="dark"] body.world-think { --primary: #c4b0ff; --primary-ink: #1b0f3a; }
.w-thk { --wc: var(--w-thk); }
.w-badge.w-thk { background: linear-gradient(135deg, #7c3aed, #ffb020); }
body.world-think .w-chip.w-think { --wc: #6d28d9; }

/* home */
.tk-hero { background: linear-gradient(135deg, color-mix(in srgb, var(--tk-b) 38%, var(--jr-card)), color-mix(in srgb, var(--tk-a) 26%, var(--jr-card))); }
.tk .btn.jr-btn { background: var(--tk-b); color: #2a1600; box-shadow: 0 5px 0 #c77d00; }
.tk-age .owl { flex: none; }
.tk-ages { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.tk-agebtn { min-height: 72px; border-radius: 20px; border: 3px solid var(--jr-line); background: var(--jr-card); color: var(--jr-ink); font: 700 30px/1 var(--f-kid); cursor: pointer; box-shadow: 0 5px 0 var(--jr-line); }
.tk-agebtn.on, .tk-agebtn[aria-pressed="true"] { border-color: var(--tk-a); box-shadow: 0 5px 0 var(--tk-a); }
.tk-agebtn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--jr-line); }
.tk-lands { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tk-landbtn { display: grid; gap: 6px; text-align: left; padding: 16px; border-radius: 22px; border: 2px solid var(--jr-line); background: var(--jr-card); color: var(--jr-ink); font-family: var(--f-kid); cursor: pointer; box-shadow: 0 4px 0 var(--jr-line); min-width: 0; }
.tk-landbtn b { font-size: 19px; line-height: 1.2; } .tk-landbtn > span:not(.jr-bar):not(.tk-landico) { font-size: 14px; color: var(--jr-ink2); }
.tk-landico { font-size: 28px; line-height: 1; letter-spacing: 4px; }
.tk-sleep { border-color: var(--tk-a); }
.tk-seg { flex-wrap: wrap; }
.tk-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tk-skill { display: grid; gap: 6px; text-align: left; padding: 18px; border-radius: 22px; border: 2px solid var(--jr-line); background: var(--jr-card); color: var(--jr-ink); font-family: var(--f-kid); cursor: pointer; box-shadow: 0 4px 0 var(--jr-line); }
.tk-skill b { font-size: 21px; } .tk-skico { font-size: 40px; line-height: 1; }

/* the player */
.tk-play { max-width: 820px; display: grid; gap: 16px; }
.tk-prog { display: flex; gap: 6px; height: auto; background: none; overflow: visible; }
.tk-prog i { flex: 1; height: 14px; border-radius: 8px; background: var(--jr-line); }
.tk-prog i.ok { background: var(--jr-mint); } .tk-prog i.no { background: var(--jr-coral); } .tk-prog i.now { background: var(--tk-b); }
.tk-ask { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.tk-say { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--tk-a); color: #fff; cursor: pointer; box-shadow: 0 4px 0 color-mix(in srgb, var(--tk-a) 60%, #000); }
.tk-say.on { animation: tkPulse 1s ease-in-out infinite; }
.tk-say.tk-quiet { opacity: .55; }
@keyframes tkPulse { 50% { transform: scale(1.08); } }
.tk-prompt { margin: 0; font: 600 clamp(20px, 4.6vw, 26px)/1.3 var(--f-kid); text-wrap: balance; }
.tk-tag { font-size: 30px; }
.tk-stage { display: grid; justify-items: center; padding: 18px 12px; border-radius: 26px; background: var(--tk-board); border: 2px solid var(--tk-tile-edge); overflow: hidden; }
.tk-cell, .tk-slot { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 18px; background: var(--tk-tile); border: 2px solid var(--tk-tile-edge); }
.tk-cell svg, .tk-slot svg { width: 86%; height: auto; max-height: 86%; }
.tk-slot { border: 3px dashed var(--tk-q); color: var(--tk-q); font: 700 40px/1 var(--f-kid); background: color-mix(in srgb, var(--tk-q) 8%, var(--tk-tile)); }
.tk-slot.filled { border-style: solid; border-color: var(--jr-ok); background: var(--tk-tile); color: #1f2650; animation: tkDrop .35s ease-out; }
@keyframes tkDrop { from { transform: scale(.6); opacity: 0; } }
.tk-seq, .tk-train { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tk-seq .tk-cell, .tk-seq .tk-slot { width: 64px; height: 64px; border-radius: 14px; }
.tk-train { align-items: flex-end; }
.tk-engine { font-size: 52px; line-height: 1; transform: scaleX(-1); }
.tk-car { display: inline-grid; place-items: center; min-width: 70px; min-height: 70px; padding: 4px; border-radius: 14px 14px 8px 8px; background: var(--tk-tile); border: 2px solid var(--tk-tile-edge); position: relative; color: #1f2650; }
.tk-car::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -9px; height: 14px; background: radial-gradient(circle at 7px 7px, #444 6px, transparent 7px) left / 14px 14px no-repeat, radial-gradient(circle at 7px 7px, #444 6px, transparent 7px) right / 14px 14px no-repeat; }
.tk-car.q { background: none; border: 0; padding: 0; } .tk-car.q .tk-slot { width: 70px; height: 70px; }
.tk-num { display: inline-grid; justify-items: center; gap: 2px; color: #1f2650; }
.tk-num b { font: 700 28px/1 var(--f-kid); }
.tk-ch .tk-num b { font-size: 34px; }
.tk-scale { width: min(100%, 440px); }
.tk-beam { width: 100%; height: auto; display: block; }
.tk-pans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tk-pan { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 4px; min-height: 96px; padding: 12px 8px; border-radius: 0 0 60px 60px; background: var(--tk-tile); border: 3px solid #b07d3d; border-top-width: 6px; font-size: 30px; line-height: 1.1; }
.tk-pile { display: contents; }
.tk-qbox { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 10px; border: 3px dashed var(--tk-q); color: var(--tk-q); font: 700 26px/1 var(--f-kid); }
.tk-qbox.filled { border-style: solid; border-color: var(--jr-ok); color: #116b3d; }
.tk-eqs { display: grid; gap: 10px; font: 700 34px/1.2 var(--f-kid); }
.tk-eq { display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tk-eq i { font-style: normal; color: var(--jr-ink2); }
.tk-eq.ask { padding-top: 10px; border-top: 2px dashed var(--tk-tile-edge); }
.tk-sym { display: inline-grid; place-items: center; width: 46px; height: 46px; font-size: 34px; line-height: 1; }
.tk-s0 { color: #ff8a1f; } .tk-s1 { color: #2f6fe0; } .tk-s2 { color: #16a34a; }
.tk-grid { display: grid; gap: 8px; }
.tk-grid.n2 { grid-template-columns: repeat(2, 96px); } .tk-grid.n2 .tk-cell, .tk-grid.n2 .tk-slot { width: 96px; height: 96px; }
.tk-grid.n3 { grid-template-columns: repeat(3, 80px); } .tk-grid.n3 .tk-cell, .tk-grid.n3 .tk-slot { width: 80px; height: 80px; }
.tk-pairs { display: grid; gap: 14px; }
.tk-pair { display: flex; align-items: center; gap: 12px; justify-content: center; }
.tk-arrow { font: 700 34px/1 var(--f-kid); color: var(--tk-a); }
.tk-emo { font-size: 48px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.tk-emo.big { font-size: 56px; }
.tk-cell .tk-emo, .tk-slot .tk-emo { font-size: 50px; }
.tk-one { position: relative; }
.tk-one .tk-cell.big { width: 150px; height: 150px; }
.tk-mirror { position: absolute; right: -40px; top: -6px; font-size: 32px; }
.tk-fold { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.tk-step { margin: 0; display: grid; justify-items: center; gap: 4px; font: 600 15px/1 var(--f-kid); color: var(--jr-ink2); }
.tk-step svg { background: var(--tk-tile); border-radius: 14px; border: 2px solid var(--tk-tile-edge); }
.tk-then { font: 700 30px/1 var(--f-kid); color: var(--tk-a); }
.tk-mem { display: grid; gap: 14px; justify-items: center; width: 100%; }
.tk-erow { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tk-erow.big .tk-emo { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 16px; background: var(--tk-tile); border: 2px solid var(--tk-tile-edge); font-size: 46px; }
.tk-card { display: inline-grid; place-items: center; width: 74px; height: 74px; border-radius: 16px; background: linear-gradient(135deg, var(--tk-a), color-mix(in srgb, var(--tk-a) 60%, #000)); color: #fff; font: 700 32px/1 var(--f-kid); }
.tk-timer { width: min(100%, 360px); height: 12px; border-radius: 8px; background: var(--jr-line); overflow: hidden; }
.tk-timer i { display: block; height: 100%; width: 100%; background: var(--tk-b); transform-origin: left; animation: tkShrink linear forwards; }
@keyframes tkShrink { to { transform: scaleX(0); } }
.tk-cue { display: flex; align-items: center; gap: 12px; }
.tk-cue > .tk-emo { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 18px; background: var(--tk-tile); border: 2px solid var(--tk-tile-edge); }

/* the answers: big tiles, one tap */
.tk-choices { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tk-choices.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-choices.c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tk-choices.rows { grid-template-columns: 1fr; }
.choice.tk-ch { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; text-align: center; min-height: 104px; padding: 10px; border-radius: 22px; border: 3px solid var(--tk-tile-edge); background: var(--tk-tile); color: #1f2650; cursor: pointer; box-shadow: 0 5px 0 var(--tk-tile-edge); font-family: var(--f-kid); }
.tk-ch svg { max-width: 100%; height: auto; }
.tk-ch:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--tk-tile-edge); }
.tk-ch.right { border-color: var(--jr-ok); box-shadow: 0 5px 0 var(--jr-ok); background: #e9fbf1; }
.tk-ch.wrong { border-color: var(--jr-no); box-shadow: 0 5px 0 var(--jr-no); background: #ffeceb; }
.tk-ch:disabled { cursor: default; opacity: 1; }
.tk-ch.wrong { animation: tkShake .35s ease-in-out; }
@keyframes tkShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.tk-choices.rows .tk-ch { min-height: 88px; }
.tk-choices.rows .tk-emo { font-size: 40px; }
.tk-hear { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px; border-radius: 999px; border: 2px solid var(--jr-line); background: var(--jr-card); color: var(--jr-ink); font: 700 16px var(--f-kid); cursor: pointer; }
.tk-hear svg { width: 22px; height: 22px; }
.tk-ups { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* grown-ups */
.tk-tbl td { vertical-align: top; }
.tk-spark { display: block; }
.tk-try { margin: 0; padding-left: 20px; display: grid; gap: 8px; }

@media (max-width: 47.99rem) {
  .tk-lands { grid-template-columns: 1fr; }
  .tk-ages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tk-say { width: 54px; height: 54px; }
  .tk-tag { display: none; } .tk-ask { grid-template-columns: auto minmax(0, 1fr); }
  .tk-stage { padding: 14px 6px; }
  .tk-seq .tk-cell, .tk-seq .tk-slot { width: 52px; height: 52px; border-radius: 12px; }
  .tk-grid.n3 { grid-template-columns: repeat(3, 72px); } .tk-grid.n3 .tk-cell, .tk-grid.n3 .tk-slot { width: 72px; height: 72px; }
  .tk-car { min-width: 56px; min-height: 60px; } .tk-num b { font-size: 24px; } .tk-engine { font-size: 40px; }
  .tk-fold svg { width: 76px; height: 76px; }
  .tk-erow.big .tk-emo, .tk-card { width: 58px; height: 58px; font-size: 36px; }
  .tk-eqs { font-size: 28px; }
  .tk-ch { min-height: 92px; }
  .tk-mirror { right: -34px; }
}
@media (prefers-reduced-motion: reduce) { .tk-say.on, .tk-slot.filled, .tk-ch.wrong { animation: none; } .tk-timer i { animation-name: tkShrink; } }
/* the welcome card and the catalogue tile show Owl Thinkers' own painting: a twilight puzzle forest (Cloudflare Workers AI) */
.tk-hero::before { background-image: url(/art/thinkers.webp); background-position: 50% 40%; }
@media (max-width: 47.99rem) { .tk-hero::before { background-position: 50% 30%; } }
.tk-tbl td:first-child { min-width: 210px; }
/* Oct 29 2026 (steady check): the answers start in the same place on every puzzle. The question keeps room for two
   lines and the board for the tallest puzzle (a puzzle with no board keeps an empty space), so a tap that moves on never
   lands on a different answer. */
.tk-play .tk-ask { min-height: 78px; }
.tk-play .tk-stage { min-height: 240px; align-content: center; box-sizing: border-box; }
.tk-play .tk-stage.tk-none { background: none; border-color: transparent; padding: 0; }
@media (min-width: 600px) { .tk-play .tk-ask { min-height: 68px; } .tk-play .tk-stage { min-height: 248px; } }

/* Oct 29 2026: the run bar inside a practice set (js/play.js). It sits in the player's own top bar as a second row, so
   the question below never moves while you play; nothing here shows in a timed test or section. */
.gp-host { flex-wrap: wrap; row-gap: 8px; }
.pbar.gp-host { padding-bottom: 8px; }
.sp-top.gp-host { row-gap: 6px; padding-bottom: 8px; }
.gp-strip { flex: 1 0 100%; order: 9; grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.gp-row { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; height: 32px; }
.gp-segs { flex: 1; min-width: 0; display: flex; gap: 4px; align-items: center; height: 12px; }
.gp-segs i { flex: 1; min-width: 0; height: 10px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s ease, transform .25s ease; }
.gp-segs i.ok { background: var(--go); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14); }
.gp-segs i.no { background: #ff7a6b; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.gp-segs i.cur { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary); }
.gp-segs.long { display: block; }
.gp-fill { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.gp-fill i { display: block; height: 100%; transition: width .3s ease; }
.gp-fill i.ok { background: var(--go); }
.gp-fill i.no { background: #ff7a6b; }
/* the word on each answer covers the segments for a moment, then fades */
.gp-pop { position: absolute; left: 0; right: 120px; top: 50%; transform: translateY(-50%) scale(.9); opacity: 0; pointer-events: none; display: flex; align-items: center;
  height: 28px; padding: 0 12px; border-radius: 999px; font: 800 14px/1 var(--f-display); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .18s ease, transform .18s ease; }
.gp-pop.show { opacity: 1; transform: translateY(-50%) scale(1); }
.gp-pop.good { background: var(--go); color: #fff; }
.gp-pop.bad { background: var(--bad-soft); color: var(--bad); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bad) 35%, transparent); }
.gp-pop.big { background: linear-gradient(90deg, #ff8a00, #ff3d6e); color: #fff; }
:root[data-theme="dark"] .gp-pop.good { color: #0b2417; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gp-pop.good { color: #0b2417; } }
/* the combo flame: a fixed width, so the segments never shrink when it lights up */
.gp-combo { flex: none; width: 46px; height: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 2px; border-radius: 999px; font: 800 14px/1 var(--f-display); color: var(--fg-3); visibility: hidden; }
.gp-combo .g-flame { width: 16px; height: 16px; fill: currentColor; }
.gp-combo.h1, .gp-combo.h2, .gp-combo.h3 { visibility: visible; }
.gp-combo.h1 { background: var(--streak-soft); color: var(--streak); }
.gp-combo.h1 b { color: var(--fg); }
.gp-combo.h2 { background: linear-gradient(135deg, #ff9f1a, #ff4d2e); color: #fff; box-shadow: 0 0 0 3px rgba(255, 112, 40, .22), 0 4px 14px rgba(255, 90, 30, .35); }
.gp-combo.h3 { background: linear-gradient(135deg, #a855f7, #ec4899); color: #fff; box-shadow: 0 0 0 3px rgba(168, 85, 247, .25), 0 4px 16px rgba(200, 70, 220, .4); }
.owl-motion .gp-combo.pop { animation: g-pop .3s ease-out; }
.owl-motion .gp-combo.h2 .g-flame, .owl-motion .gp-combo.h3 .g-flame { animation: gp-flick .5s ease-out 2; }
@keyframes gp-flick { 0%, 100% { transform: none; } 40% { transform: scale(1.25) rotate(-6deg); } }
.gp-owl { flex: none; width: 30px; height: 30px; display: grid; place-items: center; }
.gp-owl .owl { width: 30px; height: 30px; }
.gp-snd { flex: none; width: 40px; height: 40px; margin: -4px -8px -4px -6px; display: grid; place-items: center; border: 0; background: none; color: var(--fg-3); border-radius: 999px; cursor: pointer; }
.gp-snd svg { width: 20px; height: 20px; }
.gp-snd[data-m="off"] { color: var(--fg-3); opacity: .75; }
@media (hover: hover) { .gp-snd:hover { background: var(--surface-2); color: var(--fg); } }
.gp-snd:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* the warm-up line: Beat Owl-y */
.gp-warm { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--xp-soft); color: var(--fg); font-size: 13px; font-weight: 700; line-height: 1.2; min-width: 0; }
.gp-warm-owl { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); }
.gp-warm-t { flex: 1; min-width: 0; }
.gp-warm.won { background: var(--go); color: #fff; }
.gp-warm.lost { background: var(--surface-2); color: var(--fg-2); }
:root[data-theme="dark"] .gp-warm.won { color: #0b2417; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gp-warm.won { color: #0b2417; } }
.gp-pips { flex: none; display: inline-flex; gap: 4px; }
.gp-pips i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.gp-pips i.ok { background: var(--go); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .15); }
.gp-pips i.no { background: #ff7a6b; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .12); }
.gp-warm.won .gp-pips i.ok { background: #fff; box-shadow: none; }
.gp-warm.won .gp-pips i.no { box-shadow: inset 0 0 0 1.5px #fff; }
.gp-conf { position: fixed; z-index: 90; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; animation: gp-conf .85s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes gp-conf { from { transform: translate(-50%, -50%) scale(.6); opacity: 1; } to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 30px)) rotate(240deg); opacity: 0; } }
/* compact players (Junior, Thinkers, spelling) keep their own bar; the flame joins their top row */
.gp-compact .gp-combo { width: 44px; height: 28px; }
.gp-compact > .gp-warm { margin: 0 0 10px; }
/* the old combo pill gives way to the run bar's flame */
.gp-on .pbar .g-combo { display: none; }
/* a right answer folds its explanation to the verdict and one button; a miss keeps it open with the time numbers last */
.exp.gp-tidy > :not(.verdict):not(.gp-why):not(.g-label) { display: none; }
.exp > .gp-why { justify-self: start; }
.exp.gp-run > .stats, .exp.gp-run > .pace-note { order: 2; }
.exp.gp-run > .tutor, .exp.gp-run > [data-note-slot], .exp.gp-run > .row { order: 3; }
@media (max-width: 380px) { .gp-pop { right: 112px; font-size: 13px; } }
/* the top row keeps its own line: the title shrinks (with its ellipsis) instead of pushing the XP pill or timer down */
.pbar.gp-host > :not(.gp-strip):not(.strike):not(.g-sxp):not(.timer) { flex: 1 1 0; min-width: 0; }
.pbar.gp-host > .g-sxp, .pbar.gp-host > .timer { flex: none; }
/* compact players: everything in the top row stays on one line (the XP pill and the flame join the end) */
.gp-compact .jr-top, .gp-compact .spl-top { grid-template-columns: auto minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; }
.gp-toast { position: fixed; z-index: 80; left: 50%; top: calc(12px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--surface); color: var(--fg); box-shadow: var(--shadow), 0 0 0 1px var(--line); font: 800 15px/1.2 var(--f-display); pointer-events: none; }
.gp-toast.won { background: var(--go); color: #fff; box-shadow: 0 6px 20px rgba(31, 157, 85, .35); }
:root[data-theme="dark"] .gp-toast.won { color: #0b2417; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gp-toast.won { color: #0b2417; } }
.gp-toast .owl { flex: none; background: var(--surface); border-radius: 50%; }
.owl-motion .gp-toast { animation: gp-drop .28s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes gp-drop { from { transform: translate(-50%, -16px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
/* the subtitle stays one line (the segments show where you are), so the bar's height never changes when the XP pill appears */
.pbar.gp-host .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* compact players: the warm-up chip in the top row (Owl-y and three pips), the same size all round */
.gp-wchip { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 8px 0 3px; border-radius: 999px; background: var(--xp-soft); }
.gp-wchip .owl { flex: none; background: var(--surface); border-radius: 50%; }
.gp-wchip.won { background: var(--go); }
.gp-wchip.won .gp-pips i.ok { background: #fff; box-shadow: none; }
.gp-wchip.lost { background: var(--surface-2); }
.gp-warm-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }