/* =====================================================================
   Teacher Emily — flat and minimal.
   White cards on a light neutral ground, soft pastel tiles behind icons, rounded corners,
   medium-weight rounded type. Brand yellow is the one action color (main buttons, current tab).
   No shadows, no gradients (the only gradients draw progress rings and lined paper).
   ===================================================================== */
@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url(../fonts/fredoka-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url(../fonts/fredoka-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url(../fonts/nunito-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url(../fonts/nunito-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 400; font-display: swap; src: url(../fonts/lexend-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 500; font-display: swap; src: url(../fonts/lexend-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 600; font-display: swap; src: url(../fonts/lexend-latin-600-normal.woff2) format("woff2"); }
/* ---------- tokens: Sunny (default) ---------- */
:root { --yellow: #fdc605; --red: #e07a5f; --blue: #4a7bd0; --ground: #f7f7f8; --paper: #fff; --surface: #fff; --well: #f1f1f3; --ink: #1c1c1e; --ink2: #3a3a3c; --muted: #6b6b70; --hair: #e6e6e6; --rule: #e6e6e6; --line2: #d9d9de; --act: var(--yellow); --on-act: #1c1c1e; --act-hover: #f2bb00; --hot: var(--yellow); --on-hot: #1c1c1e; --math: #3a6fd0; --math-tint: var(--t-blue); --on-math: #1c1c1e; --eng: #c9603f; --eng-tint: var(--t-peach); --on-eng: #1c1c1e; --mark: var(--yellow); --pop: #fff4cc; --soft-pop: #fffbea; --t-blue: #e7f0ff; --t-peach: #ffeadf; --t-pink: #fde8ef; --t-mint: #e1f5ea; --t-butter: #fff4cc; --t-lilac: #efeafd; --k-blue: #3a6fd0; --k-peach: #c9603f; --k-mint: #23855a; --k-butter: #9a7300; --focus: #4a7bd0; --good: #1f8a4c; --good-bg: #e8f6ee; --bad: #c8412c; --bad-bg: #fcebe7; --warn-bg: #fff6d1; --barbg: #fff; --tabbg: #fff; --c1: #e8402f; --c2: #2f7de1; --c3: #fdc605; --c4: #4fc98f; --c5: #8c6bf2; --c6: #ff8fb1; --bg: var(--ground); --line: var(--hair); --soft: #f1f1f3; --tbon: var(--ink); --ring: var(--yellow); --accent: var(--ink); --display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif; --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; --label: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; --bw: 1px; --rad: 20px; --rad-s: 12px; --gap: 16px; --sp: 16px; --tabh: 64px; --railw: 96px; --maxw: 1240px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); color-scheme: light; }
@media (min-width: 700px) {
  :root { --sp: 20px; }
}
@media (min-width: 1100px) {
  :root { --sp: 28px; }
}
/* Ocean: a cool blue tint and an aqua accent */
[data-theme="ocean"] { --ground: #f3f7f9; --well: #ebf2f5; --act: #8fd0e6; --on-act: #0d2a36; --act-hover: #74c2dc; --hot: #8fd0e6; --on-hot: #0d2a36; --pop: #e3f3f9; --soft-pop: #f0f8fb; --ring: #5fb5d3; --focus: #2f7fa0; }
/* Forest: a soft green tint and a leaf accent */
[data-theme="forest"] { --ground: #f5f7f3; --well: #eef2eb; --act: #a8d5a2; --on-act: #15301a; --act-hover: #92c98b; --hot: #a8d5a2; --on-hot: #15301a; --pop: #e9f4e6; --soft-pop: #f3f9f1; --ring: #6fb465; --focus: #3f8a46; }
/* Galaxy: a soft dark slate, light text, the same calm accent */
[data-theme="galaxy"] { color-scheme: dark; --ground: #1d2130; --paper: #262b3b; --surface: #262b3b; --well: #2f3546; --ink: #eceef3; --ink2: #d3d6de; --muted: #a3a9b8; --hair: #383e51; --rule: #383e51; --line2: #4a5166; --act: #fdc605; --on-act: #1c1c1e; --act-hover: #ffd43b; --hot: #fdc605; --on-hot: #1c1c1e; --math: #8aaaf0; --math-tint: #2c3550; --eng: #f0a08a; --eng-tint: #3d2f35; --pop: #3a3626; --soft-pop: #2d2e2f; --focus: #fdc605; --good: #6fd39a; --good-bg: #213a30; --bad: #ff9c8a; --bad-bg: #42282a; --warn-bg: #3a3626; --tabbg: #262b3b; --soft: #2f3546; --t-blue: #2c3550; --t-peach: #3d3030; --t-pink: #3b2c37; --t-mint: #24392f; --t-butter: #3a3626; --t-lilac: #322e48; --k-blue: #9cb8f5; --k-peach: #f3ab95; --k-mint: #8fdcb2; --k-butter: #f2d36b; }
/* Grades 4 and up: the same look, quieter — Lexend for headings and reading */
[data-band="big"] { --body: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; --display: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; }
/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { overscroll-behavior: none; -webkit-text-size-adjust: 100%; background: var(--ground); }
html, body { overflow-x: clip; }
body { margin: 0; font: 400 17px/1.6 var(--body); color: var(--ink); background: var(--ground); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
[data-band="big"] body { font-weight: 400; font-size: 16px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--display); font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -.01em; line-height: 1.15; }
p { margin: 0; }
a { color: var(--ink); text-underline-offset: 3px; font-weight: 600; text-decoration-thickness: 1.5px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
svg.ui { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; vertical-align: -0.18em; }
svg.ui.big { width: 44px; height: 44px; }
svg.ui.cdown { transform: rotate(90deg); }
img.pe { width: 1.6em; height: 1.6em; display: inline-block; vertical-align: middle; user-select: none; -webkit-user-drag: none; }
.center { text-align: center; }
.small { font-size: 15px; }
.grow { flex: 1; min-width: 0; }
.sub { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
sup { font-size: .62em; line-height: 0; vertical-align: .62em; }
button, .btn, .tb, .pk, .kid, .ha, .lc, .hcont, .subjcard, .chipbtn, .mode, .choice, .key, .tile, [role="tab"], [role="radio"] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
#app { min-height: 100%; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp); padding: var(--sp) max(16px, var(--sar)) calc(var(--sp) * 2) max(16px, var(--sal)); }
@media (min-width: 700px) {
  .wrap { padding-left: max(28px, var(--sal)); padding-right: max(28px, var(--sar)); }
}
.enter { animation: enter .22s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
/* ---------- top bar (always white, so the black-and-yellow logo reads in every theme) ---------- */
.demo { color: var(--paper); text-align: center; font: 600 13px/1.3 var(--label); padding: max(6px, var(--sat)) 16px 6px; background: #1c1c1e; font-weight: 500; }
[data-theme="galaxy"] .demo { background: #000; color: #fff; }
header.bar { --ink2: #262626; --paper: #fff; --surface: #fff; --act: #fdc605; --on-act: #000; --focus: #1d3e9e; position: sticky; top: 0; z-index: 20; color: #000; background: #fff; padding-top: var(--sat); --rule: #e6e6e6; --hair: #e6e6e6; --ink: #1c1c1e; --well: #f1f1f3; border-bottom: 1px solid #e6e6e6; }
.demo + header.bar { padding-top: 0; }
header.bar .in { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 max(16px, var(--sar)) 0 max(16px, var(--sal)); min-height: 64px; }
@media (min-width: 700px) {
  header.bar .in { gap: 12px; padding-left: max(28px, var(--sal)); padding-right: max(28px, var(--sar)); min-height: 72px; }
}
.brand { display: flex; align-items: center; margin-right: auto; min-height: 44px; text-decoration: none; flex: none; }
img.logo { display: block; width: auto; height: 34px; }
@media (min-width: 700px) {
  img.logo { height: 42px; }
}
img.logo.lg { height: 56px; margin: 0 auto 4px; }
.iconbtn { width: 46px; height: 46px; min-width: 44px; min-height: 44px; background: var(--paper); color: var(--ink); display: grid; place-items: center; font-size: 22px; padding: 0; flex: none; border: 1px solid var(--hair); border-radius: var(--rad-s); }
@media (hover: hover) {
  .iconbtn:hover { background: var(--well); }
}
.iconbtn:active { background: var(--well); color: var(--ink); }
.iconbtn[disabled] { opacity: .35; pointer-events: none; }
header.bar .iconbtn, header.bar .btn.sm { border-width: 1px; }
/* switch child (kid screens) */
.kidsw { position: relative; flex: 0 1 auto; min-width: 0; }
.kidswbtn { display: flex; align-items: center; gap: 8px; min-height: 46px; max-width: 220px; background: #fff; border: 1px solid #e6e6e6; border-radius: 999px; padding: 0 12px 0 4px; font: 500 16px var(--display); color: #1c1c1e; }
@media (hover: hover) {
  .kidswbtn:hover, .kidswbtn[aria-expanded="true"] { background: #fdc605; }
}
.kidswbtn .av, .kidswbtn img.av { font-size: 26px; line-height: 34px; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #f1f1f3; }
.kidswbtn .kn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.kidswbtn svg.ui { width: 16px; height: 16px; }
.kidmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 260px; max-width: calc(100vw - 24px); background: #fff; display: grid; border: 1px solid #e6e6e6; border-radius: 16px; padding: 6px; overflow: hidden; }
.kidmenu a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 14px; color: #000; text-decoration: none; border-radius: 12px; }
@media (hover: hover) {
  .kidmenu a:hover, .kidmenu a:focus-visible { background: #fdc605; outline: none; }
}
.kidmenu a span { flex: 1; display: grid; line-height: 1.2; }
.kidmenu a b { font: 500 16px var(--display); }
.kidmenu a small { font: 500 13px var(--label); color: #585853; }
.kidmenu a .av, .kidmenu a img.av { width: 36px; height: 36px; font-size: 28px; line-height: 36px; }
.kidmenu a[aria-current] { font-weight: 600; }
.kidmenu .km-act { border-top: 1px solid #e6e6e6; border-radius: 0 0 12px 12px; }
.kidmenu .km-act + .km-act { border-top: 0; border-radius: 12px; }
.kidmenu .km-act svg.ui { width: 36px; height: 22px; }
@media (max-width: 520px) {
  .kidsw ~ .parentsbtn .lbl { display: none; }
  .kidsw ~ .parentsbtn { width: 46px; padding: 0; }
  .kidswbtn { max-width: 140px; gap: 6px; }
  .kidswbtn svg.ui.cdown { display: none; }
}
@media (max-width: 380px) {
  .kidswbtn { max-width: 112px; }
}
/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; background: var(--act); color: var(--on-act); letter-spacing: .005em; text-decoration: none; white-space: nowrap; transition: background-color .12s, color .12s; border: 1px solid transparent; border-radius: var(--rad-s); font: 500 18px/1.15 var(--display); padding: 0 22px; }
@media (hover: hover) {
  .btn:hover { background: var(--act-hover); color: var(--on-act); }
}
.btn:active { transform: translateY(1px); }
.btn.alt { background: var(--paper); color: var(--ink); border-color: var(--hair); }
@media (hover: hover) {
  .btn.alt:hover { background: var(--well); color: var(--ink); }
}
.btn.sm { min-height: 44px; font-size: 16px; padding: 0 16px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.chipbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; background: var(--paper); color: var(--ink); padding: 6px 14px; font: 500 15px var(--display); border: 1px solid var(--hair); border-radius: 999px; font-weight: 500; }
@media (hover: hover) {
  .chipbtn:hover { background: var(--well); }
}
.link { background: none; border: 0; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; padding: 8px; min-height: 44px; display: inline-flex; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; font: 500 15px var(--display); background: var(--paper); color: var(--ink); border: 1px solid var(--hair); border-radius: 999px; font-weight: 500; }
.chip.soon { opacity: .5; border-style: dashed; }
.eyebrow { font: 600 15px var(--label); color: var(--muted); letter-spacing: 0; font-weight: 400; }
.gchip { display: inline-flex; align-items: center; padding: 4px 12px; font: 500 15px var(--display); background: var(--well); color: var(--ink); border-radius: 999px; font-weight: 500; }
.msg { padding: 12px 14px; border-left: 0; border-radius: var(--rad-s); font-weight: 600; }
.msg.err { background: var(--bad-bg); color: var(--bad); }
.msg.ok { background: var(--good-bg); color: var(--good); }
[data-theme="galaxy"] .msg.err { color: #ffc2b8; }
[data-theme="galaxy"] .msg.ok { color: #a6f0c6; }
/* ---------- section heads ---------- */
.wrap > .sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wrap > .sh h2 { font-size: clamp(26px, 5vw, 32px); }
.wrap > .sh a { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; }
.wrap > .sh .sub { margin-top: 6px; max-width: 60ch; }
.picker-h small { display: block; margin-bottom: 6px; }
/* ---------- welcome ---------- */
section.hero { display: grid; gap: 28px; align-items: center; padding-top: 8px; }
@media (min-width: 780px) {
  section.hero { grid-template-columns: 1.15fr .85fr; gap: 48px; padding-top: 24px; }
}
.hero-copy { display: flex; flex-direction: column; gap: 16px; }
section.hero h1 { font-size: clamp(34px, 6vw, 52px); line-height: 1.08; letter-spacing: -.02em; }
section.hero h1 em { font-style: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; background: none; color: inherit; padding: 0; box-shadow: inset 0 -.32em 0 var(--pop); }
.lead { font-size: 19px; color: var(--ink2); max-width: 40ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero-art { position: relative; display: grid; justify-items: center; padding: 20px 0 10px; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; z-index: -1; aspect-ratio: 1; border-radius: 50%; top: 0; left: 50%; width: min(280px, 72%); background: var(--t-butter); transform: translateX(-55%); }
.slate { background: var(--paper); padding: 18px; width: min(340px, 100%); margin-top: -10px; position: relative; border: 1px solid var(--hair); border-radius: var(--rad); }
.slate .q { font: 500 40px var(--display); text-align: center; font-weight: 500; }
.slate .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.slate .row span { text-align: center; font: 500 26px var(--display); padding: 8px 0; border: 1px solid var(--hair); border-radius: var(--rad-s); font-weight: 500; }
.slate .row span.ok { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.feats { display: grid; gap: var(--gap); }
@media (min-width: 640px) {
  .feats { grid-template-columns: repeat(3, 1fr); }
}
.feat { position: relative; background: var(--paper); padding: 22px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; border: 1px solid var(--hair); border-radius: var(--rad); }
.feat h3 { font-size: 23px; }
.feat p { color: var(--muted); font-size: 16px; }
img.pe.fi { width: 48px; height: 48px; }
.grades-strip { display: flex; flex-wrap: wrap; gap: 8px; }
/* ---------- mascot ---------- */
.mascot-wrap { width: 120px; height: 120px; }
.mascot-wrap.big { width: 190px; height: 190px; }
.mascot { width: 100%; height: 100%; overflow: visible; animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.talking .mouth { animation: talk .22s ease-in-out infinite alternate; transform-origin: 60px 82px; }
@keyframes talk { to { transform: scaleY(1.9); } }
.talking .mascot { animation-duration: 1s; }
/* ---------- avatars ---------- */
.av { display: inline-block; width: 64px; height: 64px; font-size: 52px; line-height: 64px; text-align: center; flex: none; }
img.pe.av { width: 64px; height: 64px; }
img.pe.av.lg, .av.lg { width: 64px; height: 64px; }
img.av.photo { border-radius: 50%; object-fit: cover; background: var(--well); border: 0; }
.av.xl, img.pe.av.xl, img.av.photo.xl { width: 120px; height: 120px; font-size: 92px; line-height: 120px; }
.av.sm, img.pe.av.sm { width: 34px; height: 34px; font-size: 26px; line-height: 34px; }
/* ---------- kid picker ---------- */
.kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: var(--gap); }
@media (min-width: 1100px) {
  .kids { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 24px; }
}
a.kid { position: relative; overflow: hidden; background: var(--paper); text-align: center; display: grid; justify-items: center; color: var(--ink); text-decoration: none; align-content: center; transition: background-color .12s; border: 1px solid var(--hair); border-radius: var(--rad); padding: 26px 12px 20px; min-height: 0; gap: 6px; }
@media (hover: hover) {
  a.kid:hover { background: var(--paper); border-color: var(--line2); color: var(--ink); }
}
a.kid:active { transform: translateY(1px); }
a.kid img.pe.av, a.kid .av { width: 76px; height: 76px; font-size: 60px; line-height: 76px; }
a.kid img.av.photo { width: 76px; height: 76px; padding: 0; }
a.kid b { font: 500 20px var(--display); letter-spacing: 0; }
a.kid small { color: var(--muted); font: 400 14px var(--label); }
@media (hover: hover) {
  a.kid:hover small { color: var(--muted); }
}
a.kid small svg.ui { width: 14px; height: 14px; vertical-align: -2px; }
a.kid.add { color: var(--ink); border: 1.5px dashed var(--line2); }
a.kid .plus { border-radius: 50%; display: grid; place-items: center; border: 0; background: var(--well); width: 64px; height: 64px; font-size: 26px; }
/* ---------- forms ---------- */
.card { background: var(--paper); padding: 22px; position: relative; border: 1px solid var(--hair); border-radius: var(--rad); }
.form { display: grid; gap: 18px; max-width: 520px; width: 100%; margin: 0 auto; }
.form label { display: grid; gap: 6px; font-weight: 600; }
.form .field { display: grid; gap: 10px; }
.form input, .form select, #gFind, .ownerform input, .goalset select { min-height: 52px; padding: 0 14px; background: var(--paper); color: var(--ink); font-size: 18px; width: 100%; border: 1px solid var(--line2); border-radius: var(--rad-s); }
.form input:focus, #gFind:focus, .ownerform input:focus { outline: 3px solid var(--focus); outline-offset: 0; }
.form h2 { font-size: 26px; }
.avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.avatars button { aspect-ratio: 1; background: var(--paper); padding: 6px; display: grid; place-items: center; border: 1px solid var(--hair); border-radius: var(--rad-s); }
@media (hover: hover) {
  .avatars button:hover { border-color: var(--rule); }
}
.avatars button img.pe { width: 100%; height: 100%; }
.avatars button[aria-pressed="true"] { border: 2px solid var(--act); background: var(--soft-pop); }
.photopick { position: relative; aspect-ratio: 1; background: var(--paper); display: grid; place-items: center; align-content: center; gap: 2px; cursor: pointer; color: var(--ink); text-align: center; overflow: hidden; border: 1.5px dashed var(--line2); border-radius: var(--rad-s); }
.photopick svg.ui { width: 24px; height: 24px; }
.photopick small { font: 600 11px/1.1 var(--body); }
.photopick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.photopick:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.photopick img.av.photo { width: 100%; height: 100%; border: 0; }
.photopick.on { border: 2px solid var(--act); background: var(--soft-pop); }
.gradepick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gradepick button { min-height: 52px; background: var(--paper); font: 500 17px var(--display); display: grid; place-items: center; line-height: 1.1; border: 1px solid var(--hair); border-radius: var(--rad-s); font-weight: 500; }
@media (hover: hover) {
  .gradepick button:hover { background: var(--well); }
}
.gradepick button small { font: 600 11px var(--label); color: var(--muted); }
.gradepick button[aria-pressed="true"] { background: var(--act); color: var(--on-act); border-color: var(--act); }
.gradepick button[disabled] { opacity: .4; border-style: dashed; }
.authcard { justify-items: stretch; }
.authcard h2 { text-align: center; }
.authcard label { font-size: 15px; }
.authpage .card.form { margin-top: var(--sp); border-width: 1px; }
.authcard .sub.center { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.authcard .sub.center a { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.bought { max-width: 46ch; margin: 4px auto 0; }
.bought a { white-space: nowrap; }
.unlockh img.logo.lg { margin: 0 0 14px; }
/* theme picker: each swatch previews its own theme's colors */
.themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) {
  .themes { grid-template-columns: repeat(4, 1fr); }
}
.themesw { display: grid; gap: 2px; text-align: left; padding: 8px; background: var(--paper); color: var(--ink); min-height: 44px; border: 1px solid var(--hair); border-radius: var(--rad-s); }
.themesw[data-theme="galaxy"] { background: var(--ground); }
@media (hover: hover) {
  .themesw:hover { border-color: var(--rule); }
}
.themesw[aria-checked="true"] { outline-offset: -8px; border: 2px solid var(--ink); outline: 0; }
.themesw b { font: 500 16px var(--display); padding: 4px 4px 0; }
.themesw small { color: var(--muted); font: 500 12px/1.3 var(--label); padding: 0 4px 2px; }
.tsprev { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 10px 34px 12px; gap: 4px; padding: 6px; border: 0; border-radius: 8px; background: var(--ground); }
.tsprev .tsbar { grid-column: 1 / -1; background: #fff; border-bottom: 0; border-radius: 3px; }
.tsprev .tsm { position: relative; overflow: hidden; background: var(--t-blue); border-radius: 6px; }
.tsprev .tse { background: var(--t-peach); border-radius: 6px; }
.tsprev .tsbtn { background: var(--act); border: 0; border-radius: 999px; }
.tsprev .tsring { justify-self: end; width: 12px; height: 12px; border-radius: 50%; background: var(--hot); }
/* =====================================================================
   Kid screens: tab bar on phones and tablets, a left rail on computers
   ===================================================================== */
.haskidtabs { padding-bottom: calc(var(--tabh) + var(--sab) + 28px) !important; }
.tabbar { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); padding: 0 var(--sar) var(--sab) var(--sal); background: var(--tabbg); border-top: 1px solid var(--hair); }
.tb { display: grid; justify-items: center; align-content: center; min-height: var(--tabh); text-decoration: none; border-left: 0; font: 500 12px var(--label); color: var(--muted); gap: 3px; }
.tb:first-child { border-left: 0; }
.tb svg.ui { width: 44px; height: 30px; padding: 3px 9px; border-radius: 999px; box-sizing: border-box; }
@media (hover: hover) {
  .tb:hover { background: none; color: var(--ink); }
}
.tb.on { background: none; color: var(--ink); }
@media (min-width: 1100px) {
  #app:has(> .tabbar) { padding-left: var(--railw); }
  .haskidtabs { padding-bottom: calc(var(--sp) * 2) !important; }
  .tabbar { top: 0; bottom: 0; right: auto; width: var(--railw); grid-template-columns: 1fr; align-content: start; padding: 0; border-right: 1px solid var(--hair); grid-auto-rows: 88px; padding-top: 12px; }
  .tb { border-bottom: 0; font-size: 13px; }
  .tb svg.ui { width: 52px; height: 34px; padding: 4px 13px; }
}
@media print {
  .tabbar, #offline { display: none !important; }
}
/* =====================================================================
   Kid home
   ===================================================================== */
.home.v2 { gap: var(--sp); }
.htop { display: grid; gap: var(--sp); }
@media (min-width: 1100px) {
  .htop { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch; gap: 32px; }
}
/* greeting, stats, goal */
.hhead { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "av who" "pills pills" "goal goal"; align-items: center; align-content: start; gap: 12px 16px; }
.hhead > .mascot-wrap, .hhead > img.av, .hhead > .av { grid-area: av; width: 64px; height: 64px; }
.hhead > .av { font-size: 60px; line-height: 76px; }
.hwho { grid-area: who; display: grid; line-height: 1; min-width: 0; }
.hwho small { color: var(--muted); margin-bottom: 4px; font: 400 15px var(--label); }
.hwho h1 { overflow-wrap: anywhere; font-size: clamp(30px, 7vw, 40px); letter-spacing: -.015em; line-height: 1.1; }
.hpills { grid-area: pills; display: flex; flex-wrap: wrap; align-self: start; width: max-content; max-width: 100%; border: 0; gap: 8px; }
.hpills span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; font: 500 16px var(--display); background: var(--t-butter); color: var(--ink); }
.hpills span:first-child { border-left: 0; }
.hpills span svg.ui { width: 18px; height: 18px; }
.hpills .gp { background: var(--well); color: var(--ink); font-size: 15px; }
.hpills span:nth-child(2) svg { color: var(--k-peach); }
.hpills span:nth-child(3) { background: var(--t-butter); color: var(--ink); }
[data-theme="galaxy"] .hpills span:nth-child(2) svg { color: #ff6a55; }
.goalring { grid-area: goal; display: flex; align-items: center; gap: 14px; border: 0; border-radius: var(--rad); background: var(--t-mint); padding: 12px 18px 12px 12px; }
.goalring .gr { border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; gap: 1px; color: var(--ink); outline-offset: -2px; width: 56px; height: 56px; outline: 0; background: radial-gradient(closest-side, var(--paper) 76%, transparent 77%), conic-gradient(var(--k-mint) calc(var(--p) * 1%), var(--paper) 0); }
.goalring[style*="--p:100"] .gr { color: #fff; background: var(--k-mint); }
.goalring .gr b { font: 500 20px var(--display); }
.goalring .gr small { font: 500 13px var(--display); color: var(--muted); }
.goalring .gr svg.ui { width: 30px; height: 30px; }
.goalring .gt { display: grid; line-height: 1.25; min-width: 0; }
.goalring .gt b { font: 500 18px var(--display); }
.goalring .gt small { font: 500 14px var(--label); color: var(--ink2); font-weight: 400; }
@media (min-width: 700px) and (max-width: 1099px) {
  .hhead { grid-template-columns: auto 1fr auto; grid-template-areas: "av who pills" "goal goal goal"; }
}
/* subjects: a white card with the icon on a pastel tile; the selected one takes the pastel */
.subjrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.subjcard { position: relative; overflow: hidden; isolation: isolate; text-align: left; flex-direction: column; justify-content: flex-end; gap: 6px; cursor: pointer; transition: background-color .15s; border: 1px solid var(--hair); border-radius: var(--rad); min-height: 0; padding: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic name" "ic bar" "ic pct"; column-gap: 12px; row-gap: 4px; align-items: center; background: var(--paper); color: var(--ink); }
.subjcard > * { position: relative; z-index: 1; }
.subjcard.on[data-s="math"] { background: var(--t-blue); color: var(--ink); border-color: transparent; }
.subjcard.on[data-s="english"] { background: var(--t-peach); color: var(--ink); border-color: transparent; }
@media (hover: hover) {
  .subjcard:not(.on):hover { background: var(--ground); }
}
.subjcard .sci { left: 14px; top: 14px; display: grid; place-items: center; position: static; grid-area: ic; width: 56px; height: 56px; border: 0; border-radius: 16px; background: var(--well); }
.subjcard .sci img.pe { width: 36px; height: 36px; }
.subjcard b { grid-area: name; font: 500 20px/1.1 var(--display); letter-spacing: 0; }
.scbar { grid-area: bar; height: 6px; border: 0; border-radius: 999px; background: var(--well); overflow: hidden; }
.scbar i { display: block; height: 100%; background: var(--sc); border-radius: 999px; }
.subjcard.on .scbar { background: rgba(255, 255, 255, .8); }
.subjcard.on .scbar i { background: var(--sc); }
.subjcard small { grid-area: pct; font: 400 13px var(--label); color: var(--muted); }
.subjcard:active { transform: translateY(1px); }
@media (min-width: 1100px) {
  .subjcard { min-height: 100%; padding: 18px; align-content: center; }
}
[data-band="little"] .subjcard { min-height: 186px; }
[data-band="big"] .subjcard { min-height: 160px; }
/* continue where you left off */
.hcont { display: grid; grid-template-columns: auto 1fr auto; align-items: center; background: var(--paper); color: var(--ink); text-decoration: none; transition: background-color .12s; border: 1px solid var(--hair); border-radius: var(--rad); padding: 12px 14px 12px 12px; gap: 14px; }
@media (hover: hover) {
  .hcont:hover { background: var(--paper); border-color: var(--line2); }
}
.hci { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border: 0; border-radius: 16px; background: var(--t-butter); }
.hci img.pe { width: 42px; height: 42px; }
.hct { display: grid; min-width: 0; gap: 2px; }
.hct small { color: var(--muted); font: 400 13px var(--label); }
.hct b { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 500 20px/1.2 var(--display); }
.hct em { font-style: normal; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcgo { border-radius: 50%; background: var(--hot); color: var(--on-hot); display: grid; place-items: center; flex: none; width: 52px; height: 52px; border: 0; font-size: 22px; }
.hsec { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 0; margin-top: 8px; padding-top: 0; }
.hsec h2 { font-size: clamp(22px, 4.5vw, 26px); padding-top: 0; }
.hsec span { color: var(--muted); font: 500 14px var(--label); font-weight: 400; }
.hbody { display: grid; gap: var(--sp); grid-template-columns: minmax(0, 1fr); }
.hbody > *, #unitpanel > *, .urail { min-width: 0; }
.tracks { display: flex; flex-wrap: wrap; width: max-content; max-width: 100%; border: 0; gap: 8px; }
.tracks button { min-height: 44px; background: var(--paper); padding: 8px 16px; font: 500 15px var(--display); color: var(--ink); border: 1px solid var(--hair); border-radius: 999px; font-weight: 500; }
.tracks button:first-child { border-left: 1px solid var(--hair); }
.tracks button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* ---------- Classroom: unit strip ---------- */
.urail { position: relative; }
.ur-scroll { display: flex; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; border: 0; border-bottom: 1px solid var(--hair); background: transparent; gap: 4px; }
.ur-scroll::-webkit-scrollbar { display: none; }
.ucard { flex: 0 0 196px; scroll-snap-align: start; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; text-align: left; color: var(--ink); cursor: pointer; position: relative; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; min-height: 72px; padding: 10px 12px; flex-basis: 184px; }
.ucard:last-child { border-right: 0; }
.ucard .unum { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--well); font: 500 15px var(--display); }
.ucard .ut { display: grid; gap: 6px; min-width: 0; }
.ucard b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 14px/1.25 var(--display); color: var(--ink2); }
.uprog { display: flex; align-items: center; gap: 8px; }
.ubar2 { flex: 1; height: 4px; border-radius: 999px; background: var(--well); overflow: hidden; }
.ubar2 i { display: block; height: 100%; background: var(--line2); border-radius: 999px; }
.uprog em { font: 500 12px var(--label); font-style: normal; color: var(--muted); font-weight: 400; }
@media (hover: hover) {
  .ucard:hover { background: transparent; }
}
.ucard[aria-selected="true"] { background: transparent; color: var(--ink); border-bottom-color: var(--act); }
.ucard[aria-selected="true"] .unum { border-color: var(--sc); background: var(--act); color: var(--on-act); }
.ucard[aria-selected="true"] .ubar2 { background: var(--well); }
.ucard[aria-selected="true"] .ubar2 i { background: var(--k-mint); }
.ucard[aria-selected="true"] .uprog em { color: var(--muted); }
.ucard.complete .unum { border-color: var(--good); background: var(--t-mint); color: var(--k-mint); }
.railbtn { display: none; border-radius: 50% !important; width: 40px !important; height: 40px !important; }
@media (hover: hover) and (min-width: 700px) {
  .railbtn { display: grid; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; min-height: 40px; font-size: 18px; border-width: var(--bw); }
  .railbtn.prev { left: 0; }
  .railbtn.next { right: 0; }
  .urail.at-start .railbtn.prev, .urail.at-end .railbtn.next { display: none; }
}
/* ---------- Classroom: today's lesson + syllabus ---------- */
#unitpanel { display: grid; gap: var(--sp); align-items: start; }
@media (min-width: 1100px) {
  #unitpanel { gap: 32px; grid-template-columns: minmax(0, 1fr) 360px; }
  #unitpanel > .uphero { grid-column: 2; grid-row: 1; position: sticky; top: 100px; }
  #unitpanel > .lgrid { grid-column: 1; grid-row: 1; }
}
.uphero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; text-decoration: none; position: relative; overflow: hidden; background: var(--paper); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--rad); padding: 18px; gap: 12px 16px; grid-template-areas: "k k" "ic t" "go go"; }
[data-theme="galaxy"] .uphero { border-color: var(--hair); }
.upk { grid-area: k; display: block; letter-spacing: .01em; background: none; color: var(--muted); padding: 0; font: 400 14px var(--label); }
.uhi { grid-area: ic; flex: none; display: grid; place-items: center; width: 72px; height: 72px; margin: 0; border: 0; border-radius: 20px; background: var(--t-blue); }
.uhi img.pe { width: 48px; height: 48px; }
.uht { grid-area: t; min-width: 0; display: grid; gap: 3px; padding: 0; }
.uht small { font: 400 13px var(--label); color: var(--muted); }
.uht b { letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 500 22px/1.2 var(--display); }
.uht em { font-style: normal; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--ink2); font-size: 15px; }
.umin { display: inline-flex; align-items: center; gap: 4px; font: 600 13px var(--label); color: var(--muted); font-weight: 400; }
.umin svg.ui { width: 14px; height: 14px; }
.upgo { grid-area: go; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; z-index: 1; margin: 4px 0 0; min-height: 52px; border-radius: var(--rad-s); background: var(--act); color: var(--on-act); font: 500 18px var(--display); }
.upgo svg.ui { color: var(--on-act); }
@media (hover: hover) {
  .uphero:hover .upgo { background: var(--act-hover); }
}
@media (hover: hover) {
  .uphero:hover .upgo svg.ui { color: var(--on-act); }
}
.uphero.complete { color: var(--ink); grid-template-areas: "k k" "ic t"; background: var(--t-mint); border-color: transparent; }
[data-theme="galaxy"] .uphero.complete { color: var(--ink); border-color: var(--good); }
.uphero.complete .upk { background: none; color: var(--k-mint); }
.uphero.complete .uht small, .uphero.complete .uht em { color: inherit; }
@media (min-width: 1100px) {
  .uphero { grid-template-areas: "k" "ic" "t" "go"; grid-template-columns: 1fr; padding: 22px; }
  .uhi { width: 100%; height: 150px; margin: 0; border-radius: 16px; }
  .uhi img.pe { width: 84px; height: 84px; }
  .uht { padding: 0; }
  .uht b { font-size: 24px; }
  .upgo { margin: 6px 0 0; min-height: 56px; font-size: 19px; }
}
/* the lesson list: one ordered list, rows separated by hairlines */
.lgrid.syl { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--rad); overflow: hidden; }
.lgrid.syl > li + li { border-top: 1px solid var(--hair); }
.lc { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto 24px; align-items: center; color: var(--ink); text-decoration: none; transition: background-color .12s; min-height: 68px; padding: 10px 14px; gap: 14px; }
@media (hover: hover) {
  .lc:hover { background: var(--ground); }
}
.lday { display: grid; place-content: center; text-align: center; line-height: 1; width: 44px; height: 44px; border-radius: 14px; background: var(--well); color: var(--ink2); }
.lday small { font: 400 10px var(--label); opacity: .8; }
.lday b { font: 500 18px var(--display); letter-spacing: 0; }
.lc.k-practice .lday { background: var(--t-butter); color: var(--ink); }
.lc.k-review .lday { outline-offset: -2.5px; background: var(--t-lilac); color: var(--ink); outline: 0; }
.lc.k-assess .lday { background: var(--t-mint); color: var(--ink); border-radius: 50%; }
.lc.k-project .lday { background: var(--t-peach); color: var(--ink); border-radius: 14px; }
.lmain { display: grid; gap: 2px; min-width: 0; }
.lmain b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 500 16px/1.3 var(--display); }
.lc .lobj { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/1.4 var(--body); }
.ktag { color: var(--muted); white-space: nowrap; font: 400 13px var(--label); font-variant-caps: normal; letter-spacing: 0; }
.lc .lgo { display: grid; place-items: center; color: var(--muted); }
.lc .lgo svg.ui { width: 20px; height: 20px; }
.lcok { border-radius: 50%; display: grid; place-items: center; width: 24px; height: 24px; background: var(--t-mint); color: var(--k-mint); }
.lcok svg.ui { width: 16px; height: 16px; }
.lc.lc-done .lday { outline: 0; background: var(--t-mint); color: var(--k-mint); }
.lc.lc-done .lmain b { color: var(--ink2); }
.lc.lc-next { background: var(--soft-pop); }
.lc.lc-next::before { content: ""; position: absolute; left: 0; width: 4px; background: var(--act) !important; top: 10px; bottom: 10px; border-radius: 0 4px 4px 0; }
[data-theme="sunny"] .lc.lc-next::before, :root:not([data-theme]) .lc.lc-next::before { background: #000; }
.lc.lc-next .ktag { color: var(--k-butter); font-weight: 500; }
[data-theme="galaxy"] .lc.lc-next { background: var(--well); }
.lc.lc-locked { opacity: .55; }
.lc:active { background: var(--well); }
@media (max-width: 480px) {
  .lc { grid-template-columns: auto minmax(0, 1fr) 20px; }
  .lday { width: 44px; height: 44px; }
  .lday b { font-size: 18px; }
  .lc .ktag { grid-column: 2; grid-row: 2; margin-top: -6px; font-size: 12px; }
  .lc .lday { grid-row: 1 / span 2; }
  .lc .lgo { grid-row: 1 / span 2; grid-column: 3; }
  .lmain b { font-size: 16px; }
}
/* Pre-K to Grade 2: bigger numbers, bigger rows */
.lgrid.playful .lc { min-height: 76px; }
.lgrid.playful .lday { width: 52px; height: 52px; border-radius: 16px; }
.lgrid.playful .lday b { font-size: 21px; }
.lgrid.playful .lmain b { font-size: 17px; }
/* Grade 4+: neutral day tiles, the accent only on the current lesson */
[data-band="big"] .lc.k-teach .lday { background: var(--ink); color: var(--paper); }
[data-band="big"] .lc.k-practice .lday { background: var(--paper); color: var(--ink); outline: 1px solid var(--rule); outline-offset: -2px; }
[data-band="big"] .lc.lc-next .lday { outline: 0; background: var(--act); color: var(--on-act); }
/* ---------- Practice grid ---------- */
.hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 700px) {
  .hgrid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (min-width: 1100px) {
  .hgrid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
}
.ha { position: relative; background: var(--paper); display: grid; justify-items: center; align-content: start; text-align: center; color: var(--ink); text-decoration: none; transition: background-color .12s; overflow: hidden; border: 1px solid var(--hair); border-radius: var(--rad); padding: 14px 10px 14px; gap: 8px; }
@media (hover: hover) {
  .ha:hover { background: var(--paper); border-color: var(--line2); }
}
.ha:active { transform: translateY(1px); }
.hai { display: grid; place-items: center; position: relative; overflow: hidden; width: 84px; height: 84px; border: 0 !important; border-radius: 22px; background: var(--t-blue); }
.hai img.pe { position: relative; width: 52px; height: 52px; }
.ha b { padding: 0 10px; font: 500 17px/1.25 var(--display); }
.hast { font: 500 13px var(--label); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.ha.locked { opacity: .55; }
.ha.locked .hai { filter: grayscale(1); }
.hgrid.little .hai { width: 96px; height: 96px; }
.hgrid.little .hai img.pe { width: 62px; height: 62px; }
.hgrid.little .ha b { font-size: 18px; }
/* Grade 2–3: the same tiles */
.hgrid.middle .hai { height: 84px; background: var(--t-blue) !important; }
.hgrid.middle .hai img.pe { width: 52px; height: 52px; }
/* Grade 4+: a quiet list with neutral icon tiles */
.hgrid.big { grid-template-columns: 1fr; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--rad); overflow: hidden; gap: 0; }
@media (min-width: 700px) {
  .hgrid.big { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .hgrid.big { grid-template-columns: 1fr 1fr 1fr; }
}
.hgrid.big .ha { grid-template-columns: auto 1fr; justify-items: start; text-align: left; align-items: center; column-gap: 14px; row-gap: 2px; background: transparent; border-radius: 0; border: 0; border-bottom: 1px solid var(--hair); padding: 12px 16px; min-height: 72px; }
@media (min-width: 700px) {
  .hgrid.big .ha:nth-child(odd) { border-right: 1px solid var(--hair); }
}
@media (min-width: 1100px) {
  .hgrid.big .ha:nth-child(odd) { border-right: 0; }
  .hgrid.big .ha:not(:nth-child(3n)) { border-right: 1px solid var(--hair); }
}
@media (hover: hover) {
  .hgrid.big .ha:hover { background: var(--well); }
}
.hgrid.big .hai { grid-row: span 2; border: 1px solid var(--rule); width: 48px; height: 48px; border-radius: 14px; background: var(--well) !important; }
.hgrid.big .hai img.pe { width: 30px; height: 30px; }
.hgrid.big .ha b { padding: 0; font-size: 16px; }
.stars { display: inline-flex; gap: 2px; color: var(--hair); }
.stars i { font-style: normal; display: inline-flex; }
.stars svg.ui { width: 20px; height: 20px; }
.stars i.on { color: #f5b400; }
.stars i.on svg.ui { stroke-width: 14; paint-order: stroke; stroke: none; }
[data-theme="galaxy"] .stars i.on svg.ui { stroke: none; }
.lvm { display: inline-flex; gap: 2px; vertical-align: 1px; }
.lvm i { width: 14px; background: var(--well); border-radius: 3px; height: 5px; }
.lvm.l1 i:nth-child(1) { background: #f2a08a; }
.lvm.l2 i:nth-child(-n+2) { background: #8aaaf0; }
.lvm.l3 i { background: #5cc08a; }
[data-theme="galaxy"] .lvm.l2 i:nth-child(-n+2) { background: #6f8dff; }
.lvl { display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--label); color: var(--muted); }
/* final exam */
.examcard { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; text-decoration: none; background: var(--paper); color: var(--ink); border: 1px solid var(--hair); border-radius: var(--rad); padding: 12px 16px 12px 12px; }
@media (hover: hover) {
  .examcard:hover { background: var(--paper); border-color: var(--line2); }
}
.examcard .exic { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--t-lilac); }
.examcard .exic img.pe.tileic { width: 40px; height: 40px; }
.examcard .st { display: grid; gap: 2px; min-width: 0; }
.examcard b { font: 500 18px var(--display); }
.examcard small { font: 500 14px var(--label); opacity: 1; color: var(--muted); font-weight: 400; }
.examcard .go { display: inline-flex; font-size: 22px; }
.examcard.passed .exic { background: var(--t-mint); }
.examcard.locked { opacity: .7; }
.upsell { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px 18px; background: var(--soft-pop); border: 0; border-radius: var(--rad); color: var(--ink); }
.upsell p { flex: 1 1 220px; font: 500 17px/1.35 var(--display); }
.upsell .btn { background: var(--act); color: var(--on-act); border-color: transparent; }
@media (hover: hover) {
  .upsell .btn:hover { background: #fff; color: #000; }
}
/* ---------- Me ---------- */
.me { display: grid; gap: var(--sp); width: 100%; max-width: 640px; margin: 0 auto; }
.me .goalring { grid-area: auto; }
.mehead { display: grid; justify-items: center; gap: 10px; text-align: center; padding-top: 8px; position: relative; isolation: isolate; }
.mehead h1 { letter-spacing: -.03em; font-size: clamp(30px, 7vw, 40px); }
.mestats { display: grid; grid-template-columns: repeat(4, 1fr); border: 0; gap: 10px; background: none; }
.mestats div { padding: 14px 6px; display: grid; justify-items: center; gap: 2px; border: 0; border-radius: var(--rad); background: var(--t-butter); }
.mestats div:first-child { border-left: 0; }
.mestats svg.ui { width: 26px; height: 26px; color: #000; background: var(--yellow); padding: 4px; box-sizing: content-box; }
.mestats div:nth-child(2) svg { background: var(--red); color: #fff; }
.mestats div:nth-child(3) svg { background: var(--blue); color: #fff; border-radius: 50%; }
.mestats div:nth-child(4) svg { background: var(--ink); color: var(--paper); }
.mestats b { margin-top: 6px; font: 500 28px/1.1 var(--display); }
.mestats small { font: 500 12px/1.2 var(--label); text-align: center; font-weight: 400; color: var(--ink2); }
@media (max-width: 380px) {
  .mestats { grid-template-columns: repeat(2, 1fr); }
  .mestats div:nth-child(3) { border-left: 0; }
  .mestats div:nth-child(n+3) { border-top: var(--bw) solid var(--rule); }
}
.meweek { padding: 18px 20px; }
.mwh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.mwh b { font: 500 18px var(--display); }
.mwh span { color: var(--muted); font: 500 15px var(--label); }
@media (min-width: 1100px) {
  .me { max-width: 1000px; grid-template-columns: 360px 1fr; grid-template-areas: "head stats" "head week" "goal week" "sw week"; column-gap: 40px; align-items: start; }
  .me .mehead { grid-area: head; padding-top: 30px; }
  .me .goalring { grid-area: goal; }
  .me .mestats { grid-area: stats; }
  .me .meweek { grid-area: week; }
  .me > .btn { grid-area: sw; }
  .meweek .wbars { height: 220px; }
}
/* week bars (Me + parent progress) */
.wbars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 120px; align-items: end; border-bottom: 1px solid var(--rule); }
.meweek .wbars { height: 110px; }
.wb { height: 100%; display: grid; grid-template-rows: 18px 1fr 20px; justify-items: center; align-items: end; gap: 2px; }
.wb i { width: 100%; max-width: 34px; align-self: end; background: var(--line2); border-radius: 6px 6px 0 0; }
.wb.today i { outline-offset: -2px; background: var(--act); outline: 0; }
.wb .wv { font: 600 12px var(--label); color: var(--muted); align-self: end; }
.wb small { font: 600 12px var(--label); color: var(--muted); align-self: center; transform: translateY(24px); }
.wbars { margin-bottom: 24px; border-bottom: 1px solid var(--hair); }
.wb.today small { color: var(--ink); }
/* =====================================================================
   Activity player
   ===================================================================== */
.play { flex: 1; display: flex; flex-direction: column; max-width: 780px; width: 100%; margin: 0 auto; min-height: 100vh; min-height: 100dvh; padding: max(12px, var(--sat)) max(16px, var(--sar)) 0 max(16px, var(--sal)); }
@media (min-width: 700px) {
  .play { max-width: 980px; }
}
.playtop { display: flex; align-items: center; gap: 12px; min-height: 44px; }
@media (min-width: 700px) {
  .playtop { padding-top: 8px; }
}
.pmeta { flex: 1; display: grid; gap: 6px; min-width: 0; }
.qcount { display: none; font: 600 14px var(--label); color: var(--muted); }
.qcount b { color: var(--ink); }
.play.study .qcount { display: block; }
.progress { flex: 1; overflow: hidden; height: 10px; border: 0; border-radius: 999px; background: var(--well); }
.progress i { display: block; height: 100%; background: var(--act); width: 0; transition: width .3s; border-right: 0; border-radius: 999px; }
.progress i[style*="width: 0%"], .progress i:not([style]) { border-right: 0; }
.modetag { flex: 1; font: 500 17px var(--display); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.timer { flex: 1; position: relative; overflow: hidden; border: 0; border-radius: 999px; background: var(--well); height: 36px; }
.timer i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--yellow); transition: width 1s linear; border-radius: 999px; }
.timer span { position: relative; display: block; text-align: center; color: #000; font: 500 18px/36px var(--display); }
.score { display: inline-flex; align-items: center; gap: 6px; font: 500 24px var(--display); }
.score svg { stroke-width: 14; paint-order: stroke; stroke: none; color: #f5b400; }
.qa { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding-block: 12px 18px; }
.prompt { font: 500 clamp(26px, 6.4vw, 40px)/1.15 var(--display); text-align: center; text-wrap: balance; font-weight: 500; font-size: clamp(24px, 6vw, 34px); line-height: 1.25; letter-spacing: 0; }
.prompt.long { font-size: clamp(20px, 4.8vw, 26px); line-height: 1.3; letter-spacing: 0; }
.prompt.xl { letter-spacing: -.02em; font-size: clamp(44px, 12vw, 68px); }
.prompt b { color: #000; padding: 0 .12em; background: none; box-shadow: inset 0 -.3em 0 var(--pop); }
.qfrom { text-align: center; font: 600 13px var(--label); color: var(--muted); margin-bottom: -8px; }
.visual { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; }
.body { display: flex; flex-direction: column; gap: 14px; }
.qa .next { display: flex; justify-content: center; }
.hint-line { text-align: center; color: var(--muted); font-weight: 600; }
/* -- figures and pictures inside questions (kept from the activity kit) -- */
.objs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 540px; }
.objs img.pe { width: 46px; height: 46px; }
.objs.big img.pe { width: 60px; height: 60px; }
.objs.mini img.pe, .mini img.pe { width: 28px; height: 28px; }
.objs.small img.pe, .small img.pe { width: 34px; height: 34px; }
.objs .gone { opacity: .25; position: relative; }
.objs .gone::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 4px; background: var(--bad); transform: rotate(-35deg); }
.objs .q, .seq .q { color: var(--c1); font: 500 40px var(--display); }
.pattern { align-items: center; }
.pattern .dot { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ink); }
.scatter { display: grid; grid-template-columns: repeat(4, 54px); grid-auto-rows: 54px; gap: 4px; }
.scatter span { display: grid; place-items: center; }
.scatter span:nth-child(odd) { transform: translateY(8px); }
.scatter img.pe { width: 46px; height: 46px; }
.dice { display: grid; grid-template-columns: repeat(3, 52px); grid-auto-rows: 52px; gap: 4px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; padding: 8px; }
.dice span { display: grid; place-items: center; }
.dice img.pe { width: 42px; height: 42px; }
.dice.mini { grid-template-columns: repeat(3, 26px); grid-auto-rows: 26px; padding: 4px; border-radius: 8px; }
.dice.mini img.pe { width: 22px; height: 22px; }
.eq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.eq b { font: 500 40px var(--display); }
.eq .objs { max-width: 230px; }
.seq { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.seq b { min-width: 70px; height: 70px; display: grid; place-items: center; border: 2.5px solid var(--ink); background: var(--paper); font: 500 32px var(--display); padding: 0 10px; }
.seq b.arrow { min-width: 0; height: auto; border: 0; background: none; padding: 0; color: var(--muted); font-size: 24px; }
img.pe.hero { width: 120px; height: 120px; }
img.pe.mid { width: 56px; height: 56px; }
img.pe.big { width: 80px; height: 80px; }
img.pe.small { width: 30px; height: 30px; }
img.pe.sz.s1 { width: 36px; height: 36px; }
img.pe.sz.s2 { width: 60px; height: 60px; }
img.pe.sz.s3 { width: 90px; height: 90px; }
.cap { text-align: center; font: 500 26px var(--display); }
.pic { width: 230px; height: auto; max-width: 100%; }
.pic.wide { width: min(100%, 540px); }
.pic.graph { width: min(100%, 560px); }
.pic.grid { width: min(100%, 330px); }
.pic.clock { width: 250px; }
.pic.measure-svg { width: min(100%, 460px); height: auto; }
.choice .pic.measure-svg { width: 100%; }
.shape { width: 76px; height: 76px; }
.visual .shape { width: 160px; height: 160px; }
.visual .shape.lines { width: 170px; height: 170px; }
.choice .shape { width: 96px; height: 96px; }
.choice .shape.solid { width: 100px; height: 100px; }
.shape.solid { width: 84px; height: 84px; }
.shape.lines { width: 120px; height: 120px; }
.coins { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 460px; }
.coin { width: 66px; height: 66px; }
.frames { display: grid; gap: 8px; }
.tenframe { display: grid; grid-template-columns: repeat(5, 48px); grid-auto-rows: 48px; border: 2.5px solid var(--ink); overflow: hidden; background: var(--paper); }
.tenframe span { border: 1px solid var(--line); display: grid; place-items: center; }
.tenframe img.pe { width: 36px; height: 36px; }
.frames.small .tenframe { grid-template-columns: repeat(5, 30px); grid-auto-rows: 30px; }
.frames.small .tenframe img.pe { width: 22px; height: 22px; }
.b10 { display: flex; align-items: flex-end; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 540px; }
.b10 .hund { width: 92px; height: 92px; background: var(--c5); border: 2px solid var(--ink); background-image: linear-gradient(var(--ink) 1px, transparent 1px), linear-gradient(90deg, var(--ink) 1px, transparent 1px); background-size: 9.2px 9.2px; }
.b10 .rod { width: 12px; height: 112px; background: var(--c2); border: 2px solid var(--ink); background-image: linear-gradient(var(--ink) 1px, transparent 1px); background-size: 100% 11.2px; }
.b10 .ones { display: grid; grid-template-columns: repeat(3, 14px); gap: 3px; margin-left: 6px; }
.b10 .cube { width: 14px; height: 14px; background: var(--c3); border: 2px solid var(--ink); }
.passage { background: var(--paper); border: 1px solid var(--rule); border-left: 10px solid var(--blue); padding: 16px 18px; max-width: 64ch; font-size: 19px; line-height: 1.65; text-align: left; }
.passage h3 { font-size: 22px; margin-bottom: 6px; }
.passage p + p { margin-top: 12px; }
.passage figure { margin: 10px 0 0; text-align: center; }
.passage figcaption { font-size: 15px; color: var(--muted); font-style: italic; }
.sentence { font: 500 24px/1.4 var(--display); text-align: center; max-width: 34ch; }
.sentence mark { background: var(--yellow); color: #000; padding: 0 4px; }
.chart { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; max-width: 360px; width: 100%; }
.chart span { border: 2px solid var(--line); background: var(--paper); text-align: center; font: 500 20px/44px var(--display); }
.chart span.q { border-color: var(--c1); color: var(--c1); }
.plates { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 560px; }
.plate { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 50%; width: 104px; height: 104px; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; padding: 10px; }
.plate img.pe { width: 24px; height: 24px; }
.array { display: grid; grid-template-columns: repeat(var(--c), 40px); gap: 6px; }
.array img.pe { width: 36px; height: 36px; }
.measure { display: grid; gap: 6px; justify-items: start; max-width: 100%; overflow-x: auto; padding-bottom: 4px; }
.measure .mbar { height: 44px; width: calc(var(--n) * 26px); background: var(--soft); border: 2px dashed var(--line); display: flex; align-items: center; justify-content: center; }
.measure .mbar img.pe { width: 36px; height: 36px; }
.measure .cubes { display: flex; }
.measure .cubes i { width: 26px; height: 26px; background: var(--c3); border: 2px solid var(--ink); margin-right: -2px; }
.measure.sm .mbar { height: 34px; width: calc(var(--n) * 18px); }
.measure.sm .cubes i { width: 18px; height: 18px; }
.measure.sm img.pe { width: 26px; height: 26px; }
.measure.k { display: flex; align-items: center; gap: 8px; }
.ribbon { display: block; height: 28px; width: calc(var(--len) * 9%); max-width: 100%; background: var(--c); border: 2.5px solid var(--ink); justify-self: start; }
.choice .ribbon, .visual .ribbon { position: static; padding: 0; font-size: 0; color: transparent; }
.choice .ribbon { align-self: flex-start; width: calc(var(--len) * 10%); min-width: 18px; }
.tower { display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; min-height: 150px; }
.tower i { width: 42px; height: 20px; background: var(--c); border: 2px solid var(--ink); margin-top: -2px; }
.cubes { display: flex; }
.cubes i { width: 30px; height: 30px; background: var(--c, var(--c3)); border: 2px solid var(--ink); margin-right: -2px; }
.counters { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 300px; }
.counters i { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--ink); }
.counters i.r { background: var(--c1); }
.counters i.y { background: var(--c3); }
.scene3 { display: grid; grid-template-columns: repeat(3, 66px); grid-auto-rows: 66px; place-items: center; }
.scene3 img.pe.mid { width: 56px; height: 56px; }
.scene3 .sc-place img.pe.mid { width: 64px; height: 64px; }
.choice .scene3 { grid-template-columns: repeat(3, 46px); width: min(100%, 170px); aspect-ratio: 1; grid-auto-rows: auto; }
.choice .scene3 > span { display: grid; place-items: center; }
.choice .scene3 img.pe.mid { width: 44px; height: 44px; }
.choice .scene3 .sc-place img.pe.mid { width: 52px; height: 52px; }
.balance { position: relative; width: 240px; height: 120px; transform: scale(1.15); margin: 10px 0; }
.visual .balance { margin-top: 34px; }
.balance .beam { position: absolute; left: 10px; right: 10px; top: 40px; height: 6px; background: var(--ink); transform: rotate(var(--tilt)); display: flex; justify-content: space-between; }
.balance .pan { margin-top: -54px; width: 70px; height: 54px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 5px solid var(--c2); border-radius: 0 0 30px 30px; transform: rotate(calc(var(--tilt) * -1)); }
.balance .post { position: absolute; left: 50%; top: 40px; width: 8px; height: 74px; margin-left: -4px; background: var(--ink); }
.balance .post::after { content: ""; position: absolute; bottom: -4px; left: -26px; width: 60px; height: 8px; background: var(--ink); }
.balance .btxt { font-size: 1.4rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.picgraph { display: grid; gap: 6px; background: var(--paper); border: 1px solid var(--rule); padding: 14px 18px; min-width: min(100%, 320px); max-width: 100%; }
.pg-title { font: 500 16px var(--display); text-align: center; }
.pg-row { display: grid; grid-template-columns: minmax(48px, auto) 1fr; align-items: center; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.pg-label { font: 600 17px var(--body); display: flex; align-items: center; gap: 4px; }
.pg-pics { display: flex; flex-wrap: wrap; gap: 3px; }
.pg-pics img.pe.small { width: 40px; height: 40px; }
.pg-half { width: 17px; overflow: hidden; display: inline-flex; }
.pg-key { text-align: right; color: var(--muted); font-weight: 600; }
.intable { border-collapse: collapse; font: 500 24px var(--display); }
.intable th, .intable td { border: 2px solid var(--ink); padding: 8px 22px; text-align: center; }
.intable th { background: var(--soft); }
.visual table { font-size: 15px; max-width: 100%; }
.visual > table, .visual > div:has(> table) { margin-inline: 4px; }
.mats { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.mat { display: inline-grid; grid-template-columns: repeat(2, minmax(2.4em, auto)); gap: 4px 10px; padding: 6px 12px; margin-left: 6px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 6px; vertical-align: middle; }
.mat i { font-style: normal; text-align: center; }
.mats .mx { display: inline-flex; align-items: center; white-space: nowrap; }
@media (max-width: 699px) {
  .visual .pic, .visual svg.pic { max-height: 36vh; width: auto; max-width: 100%; }
}
@media (max-width: 420px) {
  .visual table td, .visual table th { padding: 6px 7px; }
}
/* -- choices -- */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choices.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choices.n5 { grid-template-columns: repeat(5, 1fr); }
.choices.one { grid-template-columns: 1fr; }
.choices.two { grid-template-columns: 1fr 1fr; }
.choice { min-height: 80px; min-width: 0; background: var(--paper); color: var(--ink); font: 500 24px/1.2 var(--display); padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: opacity .2s, background-color .12s; overflow-wrap: break-word; word-break: normal; hyphens: manual; border: 1.5px solid var(--hair); border-radius: 16px; font-weight: 500; }
@media (hover: hover) {
  .choice:hover { background: var(--ground); border-color: var(--line2); }
}
.choice.big { font-size: clamp(28px, 7.5vw, 44px); min-height: 92px; }
.choice.txt { font: 600 18px/1.35 var(--body); text-align: left; align-items: flex-start; font-weight: 600; }
.choice small { font: 600 16px var(--body); color: var(--muted); }
.choice:active { background: var(--soft-pop); }
.choices.n3 .choice, .choices.n5 .choice { padding: 10px 6px; }
.choice.right, .tile.right { background: var(--good-bg); color: var(--good); outline-offset: -6px; outline: 0; border-color: var(--good); }
.choice.wrong { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); opacity: .75; }
.choice.out, .tick.out { opacity: .18; pointer-events: none; }
.swatch { width: 58px; height: 58px; border-radius: 50%; border: 2.5px solid var(--ink); display: block; }
.swatch.sm { width: 28px; height: 28px; }
.num { font: 500 36px var(--display); }
.wd { font: 600 18px var(--body); }
.wd.sm { font-size: 14px; line-height: 1.25; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pop { animation: pop .35s; }
@keyframes pop { 50% { transform: scale(1.06); } }
/* -- keypad -- */
.answerbox { margin: 0 auto; min-width: 220px; min-height: 84px; background: var(--paper); color: var(--ink); font: 500 46px var(--display); display: flex; align-items: center; justify-content: center; padding: 0 18px; gap: 8px; border: 1.5px solid var(--hair); border-radius: 16px; font-weight: 500; }
.answerbox .unit { font-size: 18px; color: var(--muted); }
.answerbox.right { border-color: var(--good); background: var(--good-bg); color: var(--good); }
.answerbox.wrong { border-color: var(--bad); background: var(--bad-bg); }
.caret { height: 44px; animation: blink 1s steps(1) infinite; width: 3px; background: var(--act); }
@keyframes blink { 50% { opacity: 0; } }
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 440px; width: 100%; margin: 0 auto; gap: 10px; }
.key { min-height: 64px; background: var(--paper); color: var(--ink); font: 500 30px var(--display); display: grid; place-items: center; border: 1.5px solid var(--hair); border-radius: 16px; font-weight: 500; }
@media (hover: hover) {
  .key:hover { background: var(--ground); }
}
.key:active { background: var(--pop); }
.key.go { background: var(--act); color: var(--on-act); grid-row: span 2; font-size: 34px; border-color: var(--act); }
.key.fn { font-size: 24px; background: var(--well); border-color: var(--well); }
/* -- build -- */
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 76px; padding: 8px; }
.slot { width: 60px; height: 60px; border: 1.5px dashed var(--line2); border-radius: 12px; }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.tile { min-width: 60px; min-height: 60px; padding: 0 14px; font: 500 30px var(--display); border: 1.5px solid var(--hair); border-radius: 14px; background: var(--t-butter); color: var(--ink); font-weight: 500; }
.tile.w { font: 600 19px var(--body); background: var(--paper); color: var(--ink); font-weight: 600; }
.tile.used { visibility: hidden; }
/* -- match -- */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; max-width: 480px; width: 100%; margin: 0 auto; }
.match .col { display: grid; gap: 12px; }
.match .tile { width: 100%; min-height: 64px; background: var(--paper); color: var(--ink); }
.match .tile.sel { background: var(--t-blue); border-color: var(--math); color: var(--ink); }
.match .tile.hint { outline-offset: 2px; outline: 3px solid var(--act); }
.match .tile.done { background: var(--good-bg); border-color: var(--good); color: var(--good); }
/* -- pop the balloons (balloons are circles) -- */
.sky { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; max-width: 540px; width: 100%; margin: 0 auto; padding: 10px 0 18px; }
.balloon { --bc: #ff8a7f; position: relative; aspect-ratio: 4 / 5; border: 0; background: none; padding: 0; animation: float 3s ease-in-out infinite; animation-delay: var(--d); }
.balloon::before { content: ""; position: absolute; inset: 0 0 12% 0; border-radius: 50% 50% 46% 46%; background: var(--bc); border: 0; }
.balloon::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 2px; height: 14%; background: var(--line2); }
.balloon span { position: relative; display: grid; place-items: center; height: 88%; font: 500 clamp(18px, 5vw, 30px) var(--display); color: #000; padding: 0 6px; line-height: 1.05; word-break: break-word; font-weight: 500; }
.balloon span img.pe, .balloon span .shape { width: 70%; height: auto; }
.balloon.c1 { --bc: #ff8a7f; }
.balloon.c2 { --bc: #8fb6ff; }
.balloon.c3 { --bc: #fdd85a; }
.balloon.c4 { --bc: #8fe0b9; }
.balloon.c5 { --bc: #c8b5ff; }
.balloon.c6 { --bc: #ffb3cb; }
.balloon.popped { animation: popped .35s forwards; pointer-events: none; }
.balloon.hint { animation: wiggle .5s 3; }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes popped { 40% { transform: scale(1.25); opacity: .9; } 100% { transform: scale(.2); opacity: 0; } }
@keyframes wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
/* -- memory -- */
.memory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 480px; width: 100%; margin: 0 auto; }
.memory.n8 { grid-template-columns: repeat(4, 1fr); }
.memory .card { aspect-ratio: 1; border: var(--bw) solid var(--rule); background: var(--blue); padding: 6px; display: grid; place-items: center; color: #fff; transition: transform .25s; }
.memory .card:nth-child(3n+2) { background: var(--t-peach); }
.memory .card:nth-child(3n+3) { background: var(--t-lilac); }
.memory .card .face { display: none; text-align: center; }
.memory .card .back svg { width: 38px; height: 38px; color: #f5b400; }
.memory .card.up { color: var(--ink); transform: rotateY(360deg); background: var(--paper); border: 1.5px solid var(--hair); }
.memory .card.up .face { display: grid; place-items: center; gap: 4px; }
.memory .card.up .back { display: none; }
.memory .card.done { background: var(--good-bg); border-color: var(--good); }
.memory .face img.pe { width: 46px; height: 46px; }
.memory .face .dice.mini, .memory .face .objs { transform: scale(.9); }
/* -- sort -- */
.sortbox { display: flex; flex-direction: column; gap: 16px; align-items: center; }
.sortitem { min-width: 160px; min-height: 116px; background: var(--paper); color: var(--ink); display: grid; place-items: center; padding: 12px 18px; font: 500 28px var(--display); text-align: center; border: 1.5px solid var(--hair); border-radius: 20px; font-weight: 500; }
.sortitem small { font: 600 16px var(--body); color: var(--muted); }
.bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; width: 100%; }
.bin { min-height: 116px; border: var(--bw) solid var(--rule); border-top-width: 10px; background: var(--paper); color: var(--ink); display: grid; place-items: center; gap: 4px; padding: 10px; font: 500 18px var(--display); border-radius: var(--rad-s); }
@media (hover: hover) {
  .bin:hover { background: var(--well); }
}
.bin:nth-child(3n+1) { border-top-color: var(--blue); background: var(--t-blue); }
.bin:nth-child(3n+2) { border-top-color: var(--red); background: var(--t-peach); }
.bin:nth-child(3n+3) { border-top-color: var(--yellow); background: var(--t-mint); }
.bin b { font: 500 19px var(--display); }
.bin .count { font: 600 13px var(--label); color: var(--muted); }
.bin .count::after { content: " in here"; }
.bin.hint { outline-offset: 2px; outline: 3px solid var(--act); }
/* -- number line -- */
.numline { position: relative; width: 100%; max-width: 680px; margin: 0 auto; padding-top: 52px; }
.nl-track { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); border-top: 3px solid var(--ink2); }
.tick { position: relative; background: none; border: 0; padding: 14px 0 6px; display: grid; justify-items: center; gap: 6px; min-height: 64px; color: var(--ink); }
.tick i { position: absolute; top: -12px; height: 20px; width: 3px; background: var(--ink2); }
.tick span { font: 500 clamp(15px, 3.6vw, 21px) var(--display); min-width: 36px; min-height: 36px; display: grid; place-items: center; border: 2px solid transparent; border-radius: 10px; font-weight: 500; }
@media (hover: hover) {
  .tick:hover span, .tick:focus-visible span { border-color: var(--rule); }
}
.tick:empty span, .tick span:empty { min-width: 26px; }
.tick span:empty::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink2); }
.tick.right span { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.tick.wrong span { background: var(--bad-bg); border-color: var(--bad); }
.frog { position: absolute; top: 4px; left: calc((var(--p) + .5) / var(--n, 11) * 100%); transform: translateX(-50%); transition: left .5s cubic-bezier(.3, 1.6, .5, 1); }
.numline .frog img.pe { width: 44px; height: 44px; }
/* -- set the clock -- */
.clockset { display: grid; gap: 14px; justify-items: center; }
.clockbtns { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.clockbtns > div { display: flex; align-items: center; gap: 8px; }
.clockbtns small { font: 600 15px var(--label); color: var(--muted); }
.clockbtns .key { width: 56px; min-height: 52px; }
.digital { font: 500 34px var(--display); padding: 4px 18px; font-variant-numeric: tabular-nums; background: var(--well); color: var(--ink); border-radius: 12px; font-weight: 500; }
/* -- shade -- */
.shade { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 6px; max-width: 460px; width: 100%; margin: 0 auto; }
.shade .sh { aspect-ratio: 1; background: var(--paper); padding: 0; border: 1.5px solid var(--line2); border-radius: 10px; }
.shade.bar { gap: 0; overflow: hidden; border: 1.5px solid var(--line2); border-radius: 12px; }
.shade.bar .sh { aspect-ratio: auto; height: 70px; border: 0; border-right: 1.5px solid var(--line2); border-radius: 0; }
.shade.bar .sh:last-child { border-right: 0; }
.shade.frame { max-width: 320px; gap: 4px; }
.shade .sh.on { background: var(--math); }
.shade.frame .sh.on { background: var(--eng); }
.shade.objects { max-width: 420px; gap: 10px; }
.shade .sh.obj { aspect-ratio: 1; display: grid; place-items: center; position: relative; border-color: var(--hair); }
.shade .sh.obj img.pe { width: 70%; height: 70%; }
.shade .sh.obj.on { background: var(--t-butter); border-color: var(--act); }
.shade .sh.obj b { position: absolute; top: 4px; right: 6px; font: 500 17px var(--display); color: #000; }
/* -- tracing -- */
.tracepad { width: 100%; max-width: 580px; margin: 0 auto; background: var(--paper); padding: 6px; border: 1.5px solid var(--hair); border-radius: var(--rad); }
svg.trace { width: 100%; height: auto; max-height: 46vh; touch-action: none; display: block; }
.trace .rules line { stroke: #9fb6e6; stroke-width: 1.2; }
.trace .rules .mid { stroke-dasharray: 4 4; }
.trace .rules .desc { stroke: #d5def2; }
.trace .g { fill: none; stroke: #cfd5df; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.1 6; }
.trace .g.now { stroke: #8d97a8; }
.trace .traced { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace .user { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.trace .user.fade { opacity: 0; transition: opacity .3s; }
.trace .start { fill: var(--good); stroke: #fff; stroke-width: 2; }
.trace .num { fill: #fff; font: 500 7px var(--display); text-anchor: middle; pointer-events: none; }
.trace .arrow { fill: none; stroke: var(--c1); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trace .demo-stroke { fill: none; stroke: var(--c5); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.tracetools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: center; }
.inks, .sizes { display: flex; gap: 6px; background: var(--paper); padding: 5px; border: 1px solid var(--hair); border-radius: 999px; }
.ink-dot { width: 36px; height: 36px; border-radius: 50%; padding: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line2); }
.ink-dot.rainbow { background: conic-gradient(#e8402f 0 20%, #fdc605 0 40%, #4fc98f 0 60%, #2f7de1 0 80%, #8c6bf2 0); }
.ink-dot[aria-pressed="true"], .size[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.size { width: 36px; height: 36px; border: 0; background: var(--well); display: grid; place-items: center; padding: 0; border-radius: 50%; }
.size i { border-radius: 50%; background: var(--ink); display: block; }
/* -- clue + feedback -- */
.cluebox { color: var(--ink); padding: 12px 16px; display: flex; gap: 8px; align-items: flex-start; flex-direction: column; border: 0; border-radius: 16px; background: var(--warn-bg); font-weight: 600; }
.cluebox svg.ui { padding: 2px; background: none; color: var(--k-butter); }
.cluebox ol { margin: 4px 0 0; padding-left: 22px; font-weight: 600; }
.feedback { min-height: 32px; text-align: center; font: 500 24px var(--display); font-weight: 500; }
.feedback.ok { color: var(--good); }
.feedback.no { color: var(--bad); }
.pbar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; margin: 0 calc(-1 * max(16px, var(--sal))); padding: 10px max(16px, var(--sar)) calc(10px + var(--sab)); background: var(--ground); border-top: 1px solid var(--hair); }
.pbar .iconbtn { width: 56px; height: 56px; font-size: 26px; border-radius: 999px; }
.pbar .iconbtn.clue { width: auto; padding: 0 20px 0 14px; gap: 8px; display: inline-flex; background: var(--t-butter); border-color: transparent; color: var(--ink); border-radius: 999px; }
.pbar .iconbtn.clue .lbl { display: inline; font: 500 19px var(--display); font-weight: 500; }
.iconbtn .lbl { display: none; }
.iconbtn.clue.nudge { animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-6deg) scale(1.06); } 30% { transform: rotate(5deg) scale(1.06); } 45% { transform: rotate(0); } }
.pbar .iconbtn.exit { color: var(--ink); }
@media (min-width: 700px) {
  .pbar .iconbtn { width: 62px; height: 62px; }
  .pbar .iconbtn.clue { height: 62px; }
}
.keyidea { background: var(--paper); padding: 0 16px; margin-bottom: 6px; border: 1px solid var(--hair); border-radius: var(--rad-s); }
.keyidea summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px 0; min-height: 44px; font: 500 16px var(--display); color: var(--ink); font-weight: 500; }
.keyidea summary::-webkit-details-marker { display: none; }
.keyidea summary svg { background: none; color: var(--k-butter); }
.keyidea p { padding-bottom: 14px; color: var(--ink2); font-size: 15.5px; line-height: 1.6; }
/* tablets and computers: the question grows to use the screen */
@media (min-width: 700px) {
  .qa { zoom: 1.2; }
}
@media (min-width: 700px) and (min-height: 1000px) {
  .qa { zoom: 1.36; }
}
@media (min-width: 1100px) and (max-height: 900px) {
  .qa { zoom: 1.12; }
}
@media (max-height: 700px) and (min-width: 700px) {
  .qa { zoom: 1; }
}
@media (min-width: 700px) {
  .intro-screen .introbox, .intro-screen.study .ahead, .intro-screen.study .modes, div.done { zoom: 1.1; }
}
/* little ones: everything bigger and easier to tap */
[data-band="little"] .prompt { font-size: clamp(30px, 7.4vw, 44px); }
[data-band="little"] .prompt.long { font-size: clamp(22px, 5.4vw, 28px); }
[data-band="little"] .choice { min-height: 100px; }
[data-band="little"] .choice.txt { font-size: 21px; }
[data-band="little"] .choice img.pe.big { width: 76px; height: 76px; }
[data-band="little"] img.pe.hero { width: 150px; height: 150px; }
[data-band="little"] .objs img.pe { width: 54px; height: 54px; }
[data-band="little"] .objs.small img.pe, [data-band="little"] .small img.pe { width: 42px; height: 42px; }
[data-band="little"] .pg-pics img.pe.small { width: 48px; height: 48px; }
[data-band="little"] .passage { font-size: 22px; line-height: 1.6; }
[data-band="little"] .choice small { font-size: 18px; }
[data-band="little"] .choice .scene3 img.pe.mid { width: 50px; height: 50px; }
[data-band="little"] .choice .scene3 .sc-place img.pe.mid { width: 60px; height: 60px; }
[data-band="middle"] .passage { font-size: 20px; }
[data-band="middle"] .choice.txt { font-size: 19px; }
/* grade 4+: calmer answers */
[data-band="big"] .choice { font-size: 22px; min-height: 66px; }
[data-band="big"] .choice.big { font-size: clamp(24px, 5.5vw, 32px); min-height: 74px; }
[data-band="big"] .choice.txt { font: 400 17px/1.45 var(--body); }
[data-band="big"] .prompt { font-size: clamp(24px, 5.2vw, 32px); }
[data-band="big"] .prompt.long { font-weight: 500; font-size: clamp(18px, 4.2vw, 22px); }
[data-band="big"] .prompt.xl { font-size: clamp(40px, 10vw, 60px); }
[data-band="big"] .passage { font-size: 18px; line-height: 1.7; border-left-width: 6px; border-left-color: var(--rule); }
[data-band="big"] .sentence { font: 500 21px/1.5 var(--body); }
[data-band="big"] .key { font-size: 26px; min-height: 58px; }
[data-band="big"] .tile { background: var(--paper); color: var(--ink); }
/* -- intro: little ones get Emily and a speech bubble, Grade 4+ a clean header -- */
.intro-screen .introbox { flex: 1; display: grid; gap: 16px; align-content: center; justify-items: center; padding-block: 14px; }
.bubble { position: relative; background: var(--paper); color: var(--ink); padding: 18px 22px; max-width: 540px; display: grid; gap: 8px; justify-items: start; border: 1px solid var(--hair); border-radius: 20px; }
.bubble::before { content: ""; position: absolute; left: 50%; margin-left: -12px; border: 10px solid transparent; border-bottom: 18px solid var(--rule); border-top: 0; border-bottom-color: var(--hair); top: -19px; }
.bubble::after { content: ""; position: absolute; top: -15px; left: 50%; margin-left: -8px; border: 7px solid transparent; border-bottom: 14px solid var(--paper); border-top: 0; }
.bubble b { font: 500 28px/1.1 var(--display); font-weight: 500; }
.bubble p { font-size: 18px; color: var(--ink2); }
.bubble .ibadge img.pe { width: 56px; height: 56px; padding: 8px; border-radius: 16px; background: var(--t-butter); box-sizing: content-box; }
.modes { display: grid; gap: 10px; width: 100%; max-width: 540px; }
.mode { display: flex; align-items: center; gap: 14px; text-align: left; background: var(--paper); color: var(--ink); padding: 14px 18px; transition: background-color .12s; border: 1px solid var(--hair); border-radius: 16px; min-height: 68px; }
@media (hover: hover) {
  .mode:hover { background: var(--ground); }
}
.mode > svg.ui:first-child { width: 40px; height: 40px; padding: 7px; box-sizing: border-box; background: var(--well); color: var(--ink2); border-radius: 12px; }
.mode:nth-child(3) > svg.ui:first-child { background: var(--t-mint); border-radius: 12px; }
.mode span { display: grid; flex: 1; }
.mode b { font: 500 22px var(--display); font-weight: 500; font-size: 19px; }
.mode small { color: var(--muted); font: 500 14px var(--label); }
.mode.go { background: var(--act); color: var(--on-act); border-color: var(--act); }
@media (hover: hover) {
  .mode.go:hover { background: var(--act-hover); color: var(--on-act); }
}
@media (hover: hover) {
  .mode.go:hover small { color: var(--on-act); }
}
.mode.go small { color: inherit; opacity: .85; }
.mode.go > svg.ui:first-child { background: rgba(255, 255, 255, .7); color: var(--on-act); border-radius: 50%; }
[data-theme="galaxy"] .mode.go > svg.ui:first-child { background: rgba(255, 255, 255, .7); }
.mode > svg.ui:last-child:not(:first-child) { width: 20px; height: 20px; margin-left: auto; }
.intro-screen.study { gap: 16px; padding-top: 10px; max-width: 760px; }
.crumb { font: 500 14px var(--label); color: var(--muted); }
.ahead { display: flex; gap: 16px; align-items: flex-start; background: var(--paper); padding: 18px; border: 1px solid var(--hair); border-radius: var(--rad); }
.ahead .sic { width: 64px; height: 64px; display: grid; place-items: center; flex: none; border: 0; border-radius: 16px; background: var(--t-blue); }
.ahead .sic img.pe { width: 42px; height: 42px; }
.ahead div { display: grid; gap: 8px; }
.ahead h1 { font-size: clamp(24px, 5vw, 30px); }
.ahead p { color: var(--ink2); font-size: 16px; line-height: 1.55; }
.listen { justify-self: center; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; font-weight: 500; font-size: 14px; }
/* -- learn mode: worked examples -- */
.learn .steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: s; }
.learn .steps li { counter-increment: s; background: var(--paper); color: var(--ink); padding: 12px 14px 12px 60px; position: relative; font-size: 18px; min-height: 52px; border: 1px solid var(--hair); border-radius: 14px; overflow: hidden; font-weight: 600; }
.learn .steps li::before { content: counter(s); position: absolute; left: 0; top: 0; bottom: 0; width: 46px; display: grid; place-items: center; font: 500 20px var(--display); background: var(--t-blue); color: var(--ink); font-weight: 500; }
.learn .steps li.answer { background: var(--good-bg); border-color: var(--good); }
.learn .steps li.answer::before { content: "✓"; background: var(--good); color: #fff; }
/* -- results -- */
div.done { text-align: center; display: grid; gap: 14px; justify-items: center; padding-block: 24px; }
div.done h1 { font-size: clamp(30px, 7vw, 40px); letter-spacing: -.01em; }
.resline { font-size: 20px; }
.resline b { font-family: var(--display); font-size: 1.3em; }
.bigstars { display: flex; gap: 8px; }
.bigstars i { color: var(--hair); display: inline-flex; }
.bigstars svg.ui { width: 64px; height: 64px; }
.bigstars i.on { animation: starin .5s both; color: #f5b400; }
.bigstars i.on svg.ui { stroke-width: 10; paint-order: stroke; stroke: none; }
[data-theme="galaxy"] .bigstars i.on svg.ui { stroke: none; }
.bigstars i:nth-child(2) { animation-delay: .2s; }
.bigstars i:nth-child(3) { animation-delay: .4s; }
@keyframes starin { from { transform: scale(0) rotate(-90deg); } to { transform: none; } }
.bigscore { display: flex; align-items: center; gap: 12px; letter-spacing: -.03em; font: 500 56px/1 var(--display); }
.bigscore svg.ui { border-radius: 50%; padding: 10px; box-sizing: content-box; background: var(--t-butter); color: var(--k-butter); width: 48px; height: 48px; }
div.done .row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.done.fun { padding-block: 10px; gap: 12px; }
.done.fun .mascot-wrap { width: 100px; height: 100px; animation: hop 1s ease-in-out 2; }
@keyframes hop { 30% { transform: translateY(-14px) rotate(-4deg); } 60% { transform: translateY(0) rotate(3deg); } }
.goalline { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; font: 500 17px var(--display); background: var(--t-mint); color: var(--ink); border: 0; border-radius: 999px; font-weight: 500; }
.done.study { gap: 14px; padding-block: 16px; max-width: 600px; margin: 0 auto; width: 100%; }
.done.study h1 { font-size: clamp(28px, 6vw, 36px); }
.done.study .resline { font-size: 17px; color: var(--ink2); }
.done.study .bigscore svg.ui { background: var(--well); color: var(--ink2); }
.ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; background: radial-gradient(closest-side, var(--paper) 72%, transparent 73%), conic-gradient(var(--act) calc(var(--p) * 1%), var(--well) 0); }
.ring b { font: 500 16px var(--display); color: var(--ink); }
.ring.xl { outline-offset: -3px; outline: 0; width: 148px; height: 148px; background: radial-gradient(closest-side, var(--paper) 80%, transparent 81%), conic-gradient(var(--act) calc(var(--p) * 1%), var(--well) 0); }
.ring.xl b { letter-spacing: -.02em; font-size: 36px; font-weight: 500; }
.lvlcard { display: grid; gap: 4px; justify-items: center; background: var(--paper); padding: 14px 18px; width: 100%; border: 1px solid var(--hair); border-radius: var(--rad); }
.lvlcard small { color: var(--muted); font: 500 14px var(--label); }
.lvlcard em { font-style: normal; font: 600 14px var(--label); padding: 2px 8px; background: var(--t-mint); color: var(--ink); border-radius: 999px; font-weight: 500; }
.done.study .row .btn { min-height: 48px; font-size: 17px; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 12px; animation: fall 1.6s ease-in forwards; }
.confetti i:nth-child(3n) { border-radius: 50%; }
.confetti i:nth-child(3n+1) { width: 8px; height: 18px; }
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); } }
/* =====================================================================
   Lesson player
   ===================================================================== */
.lesson { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; width: 100%; max-width: 820px; margin: 0 auto; padding: max(12px, var(--sat)) max(16px, var(--sar)) 0 max(16px, var(--sal)); }
@media (min-width: 1100px) {
  .lesson { max-width: 940px; }
}
.lhead { display: flex; align-items: center; gap: 12px; padding-block: 4px 12px; }
.lcrumb { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.lcrumb small { color: var(--muted); font: 500 13px var(--label); }
.lcrumb b { font: 500 19px var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.lpos { flex: none; font: 600 13px var(--label); padding: 6px 10px; background: var(--well); color: var(--ink2); border-radius: 999px; font-weight: 500; }
.lsegs { display: flex; margin-bottom: 16px; gap: 6px; }
.lsegs i { flex: 1; transition: background .3s; height: 6px; border: 0; border-radius: 999px; background: var(--well); }
.lsegs i.on { border-color: var(--ink); background: var(--act); }
.lpage { flex: 1; padding-bottom: 18px; }
.lpage.turn > * { animation: pagein .3s cubic-bezier(.2, .8, .3, 1); }
@keyframes pagein { from { opacity: 0; transform: translateX(22px); } }
/* lesson pages are always light paper with dark ink */
.lcover, .lsheet { --ink2: #262626; --muted: #585853; --paper: #fff; --surface: #fff; --well: #ebebe6; --soft: #eeeeea; --line: #d3d3cc; --good: #17793f; --good-bg: #dcf2e3; --bad: #c62617; --bad-bg: #fbe1dd; --rule: #e6e6e6; --hair: #e6e6e6; --ink: #1c1c1e; color: #1c1c1e; }
[data-theme="ocean"] :is(.lcover, .lsheet) { --ink: #061a2e; --rule: #061a2e; }
.lcover { display: grid; gap: 14px; padding: 0 0 22px; background: #fff; border: 1px solid var(--hair); border-radius: var(--rad); overflow: hidden; }
.lcover > :not(.lart) { margin: 0 22px; }
.lcover .lart { min-height: 220px; border-width: 0; }
.lcover .lic { width: 128px; height: 128px; background: #fff; display: grid; place-items: center; position: relative; z-index: 1; border: 0; border-radius: 28px; }
.lcover .lic img.pe { width: 86px; height: 86px; }
.lcover h1 { font-size: clamp(28px, 6vw, 40px); letter-spacing: -.015em; line-height: 1.1; }
.lobj { font-weight: 600; color: var(--ink2); }
.lcover .lobj { font-size: 18px; white-space: normal; font-weight: 600; }
.lhook { font-size: 19px; color: var(--ink2); line-height: 1.55; }
.lmeta { font: 500 14px var(--label); color: var(--muted); }
.lvideo { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--hair); }
.lvideo iframe, .lvideo video { width: 100%; height: 100%; border: 0; }
.lsheet { background: #fff; padding: 16px 18px 24px; display: grid; gap: 16px; border: 1px solid var(--hair); border-radius: var(--rad); }
@media (min-width: 700px) {
  .lsheet { padding: 24px 32px 34px; }
}
.lart { position: relative; min-height: 180px; display: grid; place-items: center; padding: 20px 12px; overflow: hidden; isolation: isolate; background: var(--t-blue); border: 0; border-radius: 16px; }
[data-band="big"] .lart { background: #f4f5f7; }
.lart .figbox svg.pic, .lart .figbox .pic { max-height: 230px; width: auto; max-width: 100%; }
@media (min-width: 700px) {
  .lart { min-height: 250px; }
}
.lpg { position: absolute; padding: 4px 10px; font: 600 12px var(--label); z-index: 1; left: 12px; top: 12px; background: #fff; color: #3a3a3c; border-radius: 999px; font-weight: 500; }
.lpg.plain { position: static; justify-self: start; }
.lsheet h2 { font-size: clamp(24px, 5.4vw, 30px); letter-spacing: -.01em; line-height: 1.2; }
.lsheet h3 { margin-top: 4px; font-size: 20px; }
.lsheet p { font-size: 18px; line-height: 1.65; font-weight: 400; }
[data-band="big"] .lsheet p { font-weight: 400; }
@media (min-width: 700px) {
  .lsheet p { font-size: 19px; }
}
[data-band="little"] .lsheet p { font-size: 21px; }
.lsheet strong { font-weight: 600; background: none; box-shadow: inset 0 -.35em 0 #fff1b8; }
.lsheet .sub { color: var(--muted); }
.llist { margin: 0; padding-left: 26px; display: grid; gap: 8px; font-size: 17.5px; line-height: 1.55; }
.llist.sum li { font-weight: 600; }
.llist li::marker { font-weight: 600; }
.lfig { margin: 0; display: grid; justify-items: center; gap: 6px; padding: 14px; border: 0; border-radius: 16px; background: #f6f7f9; }
.lfig figcaption { font-size: 15px; color: var(--muted); text-align: center; }
.figbox { display: grid; place-items: center; width: 100%; }
.figbox .pic.fig.wide, .figbox .pic.wide { width: min(100%, 440px); }
.figarray { display: inline-grid; gap: 6px; }
.figarray img.pe { width: 36px; height: 36px; }
.figicons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.figicons img.pe { width: 64px; height: 64px; }
.figicons .grp { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; background: #fff; max-width: 240px; justify-content: center; border: 1px solid #e6e6e6; border-radius: 14px; }
.figicons .grp img.pe { width: 46px; height: 46px; }
.figicons b { font: 500 40px var(--display); }
.figicons .die { width: 72px; height: 72px; }
.figicons .xout { position: relative; display: inline-flex; }
.figicons .xout img { opacity: .5; }
.figicons .xout::after { content: ""; position: absolute; inset: 8%; background: linear-gradient(45deg, transparent 44%, #c62617 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #c62617 44% 56%, transparent 56%); }
.figtable { border-collapse: collapse; font-size: 16px; background: #fff; }
.figtable th, .figtable td { padding: 8px 12px; text-align: center; border: 1px solid #d9d9de; }
.figtable th { background: #fff4cc; }
.figword { display: flex; gap: 6px; font: 500 clamp(56px, 16vw, 104px) var(--display); color: #000; }
.figword span { background: #fff; padding: 0 14px; border: 1.5px solid #e6e6e6; border-radius: 16px; }
.figword.long { font-size: clamp(30px, 9vw, 56px); }
.figword.xlong { font-size: clamp(22px, 6.5vw, 40px); line-height: 1.2; text-align: center; }
.lcode { background: #000; color: #f2f2ef; padding: 12px 14px; overflow-x: auto; font: 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* the board: worked steps appear one at a time — a slate board, light chalk, yellow answers */
.board { --ink: #f2f2ef; color: #f2f2ef; padding: 18px 20px; display: grid; gap: 10px; position: relative; background: #2b3243; border: 0; border-radius: 16px; }
.chalk { display: grid; gap: 8px; }
.chalk .bt { font: 500 21px var(--display); font-weight: 500; color: #ffd84d; }
.chalk .bl { color: #f2f2ef; font: 500 21px/1.45 var(--display); animation: chalkin .4s both; font-weight: 400; }
.chalk .bl.ans { color: #ffd84d; font-weight: 500; }
@keyframes chalkin { from { opacity: 0; transform: translateY(6px); } }
.board .bnext { justify-self: start; background: #ffd84d; border-color: #ffd84d; color: #1c1c1e; }
.board strong { color: var(--yellow) !important; background: none; }
.ltip, .lwarn, .lscene, .lex { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: #fff; border: 0; border-radius: 16px; }
.ltip { border-left-color: var(--blue); background: #eef4ff; }
.ltip .lavatar { width: 48px; height: 48px; flex: none; }
.ltip p, .lwarn p, .lscene p { font-size: 16.5px; line-height: 1.5; }
.lwarn { border-left-color: var(--red); background: #fdeee9; }
.lwarn svg { font-size: 22px; flex: none; margin-top: 3px; color: #c9603f; }
.lscene { border-left-color: var(--yellow); background: #fff6d6; }
.lscene img.pe { width: 48px; height: 48px; flex: none; }
.lex { display: grid; gap: 6px; border-left-color: #000; background: #f4f5f7; }
.lex > strong { display: flex; gap: 6px; align-items: center; font: 500 16px var(--display); background: none; }
.lex ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 17px; }
.lex .q { font-weight: 600; }
.lcheck { padding: 14px 16px; display: grid; gap: 10px; background: #fff; border: 1.5px solid #e6e6e6; border-radius: 16px; }
.lcheck > strong { display: flex; gap: 8px; align-items: center; font: 500 17px var(--display); background: none; }
.lcheck > strong svg.ui { padding: 3px; box-sizing: content-box; background: #e1f5ea; color: #23855a; border-radius: 50%; }
.lcheck .q { font-weight: 600; }
.lchoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.lchoice { min-height: 54px; background: #fff; color: #000; font: 500 18px var(--display); padding: 8px 10px; border: 1.5px solid #e6e6e6; border-radius: 12px; font-weight: 500; }
@media (hover: hover) {
  .lchoice:hover { background: #ebebe6; }
}
.lchoice.right { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.lchoice.wrong { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.lchoice.out { opacity: .35; }
.lfb { font-size: 16.5px; }
.lread { font: 500 clamp(28px, 7.4vw, 40px)/1.5 var(--display); display: flex; flex-wrap: wrap; gap: 4px 10px; font-weight: 500; }
.lread .rw { border: 0; background: none; padding: 0 4px; font: inherit; color: #000; border-radius: 8px; }
.lread .rw.hl { background: #fff1b8; }
.lread .rw.said { background: #e7f0ff; color: #1c1c1e; }
.lterms { display: flex; flex-wrap: wrap; gap: 8px; }
.term { background: #fff; padding: 6px 14px; min-height: 44px; font: 500 16px var(--display); color: #000; border: 1.5px solid #e6e6e6; border-radius: 999px; font-weight: 500; }
.term.on { background: #1c1c1e; color: #fff; border-color: #1c1c1e; }
.termdef { background: #f6f6f3; padding: 10px 14px; font-size: 16px; border-left: 0; border-radius: 12px; }
.demos { display: grid; gap: 12px; }
.demos .q { font: 500 21px/1.35 var(--display); }
.lctas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.lctas .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
.lnextlesson { min-height: 84px; justify-content: space-between; text-align: left !important; padding: 12px 24px; background: var(--yellow) !important; color: #000 !important; border: 0; border-radius: 16px; font-size: 21px; font-weight: 500; }
.lnextlesson span { display: grid; gap: 2px; }
.lnextlesson small { font: 600 14px var(--label); }
.lnextlesson svg.ui { width: 32px; height: 32px; }
@media (hover: hover) {
  .lnextlesson:hover { background: #f2bb00 !important; color: #1c1c1e !important; }
}
.lbar { position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; padding: 10px 0 calc(12px + var(--sab)); background: var(--ground); border-top: 1px solid var(--hair); }
.lbar .iconbtn { width: 56px; height: 56px; }
.lbar .lnext { flex: 1; min-height: 58px; font-size: 19px; }
/* =====================================================================
   Passcode / PIN pad (keys are circles)
   ===================================================================== */
.pinpage { justify-content: center; min-height: calc(100dvh - 160px); }
.pinscreen { display: grid; justify-items: center; gap: 12px; text-align: center; max-width: 380px; width: 100%; margin: 0 auto; padding-block: 16px; }
.pintop { position: relative; isolation: isolate; padding: 6px; }
.pintop img.pe.fi { width: 60px; height: 60px; padding: 12px; border-radius: 20px; background: var(--t-butter); }
.pintop .av, .pintop img.av { width: 88px; height: 88px; font-size: 68px; line-height: 88px; border-radius: 50%; background: var(--t-butter); padding: 10px; box-sizing: border-box; }
.pinscreen h1 { font-size: clamp(24px, 6vw, 30px); }
.pinsub { color: var(--muted); min-height: 1.5em; font-weight: 400; }
.pindots { display: flex; gap: 18px; margin: 8px 0 14px; }
.pindots i { width: 20px; height: 20px; border-radius: 50%; transition: background .12s, transform .12s; border: 2px solid var(--line2); }
.pindots i.on { transform: scale(1.1); background: var(--ink2); border-color: var(--ink2); }
.pinscreen.kid .pindots i.on { background: var(--act); border-color: var(--act); }
.pinpad { display: grid; grid-template-columns: repeat(3, 78px); gap: 14px 22px; justify-content: center; }
.pk { width: 78px; height: 78px; border-radius: 50%; background: var(--paper); font: 500 32px var(--display); color: var(--ink); display: grid; place-items: center; border: 1px solid var(--hair); font-weight: 500; }
@media (hover: hover) {
  .pk:hover { background: var(--well); }
}
.pk:active { color: var(--on-act); transform: scale(.95); background: var(--act); }
.pk.fn { background: transparent; border-color: transparent; color: var(--ink); }
.pk.fn svg.ui { width: 32px; height: 32px; }
.pk.ghost { visibility: hidden; }
.pinfoot { display: grid; gap: 8px; justify-items: center; margin-top: 8px; }
.pinback { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pinscreen.inline { padding: 16px 0 0; }
.pinscreen.inline .pk { width: 64px; height: 64px; font-size: 26px; }
.pinscreen.inline .pinpad { grid-template-columns: repeat(3, 64px); gap: 10px 18px; }
.pinscreen.inline h1 { font-size: 22px; }
.pindots.shake { animation: shake .35s; }
@media (max-height: 700px) {
  .pk { width: 64px; height: 64px; font-size: 26px; }
  .pinpad { grid-template-columns: repeat(3, 64px); gap: 10px 20px; }
  .pintop .av { width: 64px; height: 64px; }
}
/* =====================================================================
   Parent area
   ===================================================================== */
.ptabs { display: flex; background: var(--paper); overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--rad); padding: 4px; gap: 4px; }
.ptabs button { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; background: none; padding: 10px 14px; font: 500 16px var(--display); min-height: 52px; border: 0 !important; border-radius: 10px; font-weight: 500; color: var(--ink2); }
.ptabs button:first-child { border-left: 0; }
@media (hover: hover) {
  .ptabs button:hover { background: var(--well); }
}
.ptabs button[aria-selected="true"] { background: var(--well); color: var(--ink); }
.stack { display: grid; gap: 14px; }
.ppanel { min-width: 0; }
@media (min-width: 900px) {
  .wrap:has(> .ptabs) { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .wrap:has(> .ptabs) > .sh, .wrap:has(> .ptabs) > .mbanner { grid-column: 1 / -1; }
  .wrap:has(> .ptabs) > .mbanner { margin-bottom: 20px; }
  .ptabs { flex-direction: column; overflow: visible; position: sticky; top: 100px; }
  .ptabs button { justify-content: flex-start; padding: 14px 16px; min-height: 56px; font-size: 17px; }
  .ptabs button:first-child { border-top: 0; }
  .ptabs button svg.ui { width: 22px; height: 22px; }
}
@media (min-width: 1100px) {
  .ppanel > .stack:has(> .kidcard), .ppanel > .stack:has(> .kidrow) { grid-template-columns: 1fr 1fr; align-items: start; gap: 20px; }
  .ppanel > .stack > .btn { justify-self: start; }
  .ppanel > .card.stack { max-width: 760px; }
}
@media (max-width: 699px) {
  .ptabs { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; overflow: visible; border-radius: 0; border: 0; border-top: 1px solid var(--hair); padding: 0 var(--sar) var(--sab) var(--sal); gap: 0; }
  .ptabs button { flex: 1 1 0; flex-direction: column; gap: 2px; font: 600 12px var(--label); padding: 6px 2px; min-height: 60px; min-width: 0; border-radius: 0; color: var(--muted); }
  .ptabs button svg.ui { width: 44px; height: 28px; padding: 2px 10px; border-radius: 999px; box-sizing: border-box; }
  .ptabs button[aria-selected="true"] { background: none; color: var(--ink); }
  .wrap:has(> .ptabs) { padding-bottom: calc(var(--tabh) + var(--sab) + 32px); }
  .wrap:has(> .ptabs) + .foot { padding-bottom: calc(var(--tabh) + var(--sab) + 16px); }
}
.kidcard { padding: 0; }
.kidcard summary { list-style: none; display: flex; align-items: center; gap: 14px; cursor: pointer; padding: 16px 18px; min-height: 84px; }
@media (hover: hover) {
  .kidcard summary:hover { background: var(--well); }
}
.kidcard summary::-webkit-details-marker { display: none; }
.kidcard[open] summary { border-bottom: 1px solid var(--hair); }
.kidcard .chev { transition: transform .2s; }
.kidcard[open] .chev { transform: rotate(90deg); }
.kidcard img.pe.av, .kidcard .av, .kidrow img.pe.av, .kidrow .av { width: 56px; height: 56px; font-size: 44px; line-height: 56px; border-radius: 50%; background: var(--t-butter); padding: 6px; box-sizing: border-box; }
.kidcard img.av.photo, .kidrow img.av.photo { width: 56px; height: 56px; }
.kidcard summary h3 { font-size: 24px; }
.kidcard > :not(summary) { margin-left: 18px; margin-right: 18px; }
.kidcard > .subj:last-child { margin-bottom: 18px; }
.ksub { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; color: var(--muted); font: 500 14px var(--label); }
.kstreak { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.kstreak svg.ui { color: var(--red); width: 15px; height: 15px; }
.kright { display: grid; justify-items: end; gap: 6px; }
.kidcard summary .today { display: flex; align-items: baseline; gap: 4px; }
.kidcard summary .today b { font: 500 24px var(--display); }
.kidcard summary .today small { color: var(--muted); font: 500 12px var(--label); white-space: nowrap; }
.kidcard .mini { display: flex; align-items: flex-end; gap: 3px; height: 26px; width: 70px; border-bottom: 1px solid var(--hair); }
.kidcard .mini i { flex: 1; min-height: 2px; background: var(--line2); opacity: 1; border-radius: 2px 2px 0 0; }
.kidcard .mini i.now { opacity: 1; background: var(--act); outline: 0; }
.ktime { margin-top: 18px; display: grid; gap: 16px; padding: 16px; border: 0; border-radius: 16px; background: var(--ground); }
.kt1 { display: grid; grid-template-columns: repeat(3, 1fr); border: 0; gap: 8px; background: none; }
.kt1 div { padding: 10px 12px; display: grid; border: 0; border-radius: 12px; background: var(--paper); }
.kt1 div:first-child { border-left: 0; }
.kt1 small { color: var(--muted); font: 500 12px var(--label); }
.kt1 b { font: 500 20px var(--display); }
.kdid ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.kdid li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.kdid li svg.ui { margin-top: 3px; }
.ktime .btn { justify-self: start; }
.subj { margin-top: 18px; display: grid; gap: 8px; }
.subjhead { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.subjhead b { font: 500 19px var(--display); }
.subjhead span { color: var(--muted); font: 500 13px var(--label); }
.meter { background: var(--well); border: 0; border-radius: 999px; height: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--k-mint); border-radius: 999px; }
.rows { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.rrow { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 2px; font-size: 15px; border-bottom: 1px solid var(--hair); }
.rrow.dim { opacity: .6; grid-template-columns: 30px 1fr auto; }
.rrow img.pe.ri { width: 26px; height: 26px; }
.rrow small { color: var(--muted); font: 500 12px var(--label); }
.rrow .stars svg.ui { width: 16px; height: 16px; }
@media (max-width: 480px) {
  .rrow { grid-template-columns: 26px 1fr auto; }
  .rrow small { grid-column: 2 / -1; }
}
.kidrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kidrow h3 { font-size: 24px; }
.kidrow .confirm { width: 100%; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.kopts { width: 100%; display: grid; gap: 4px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--hair); }
.kopts .setting b { display: inline-flex; align-items: center; gap: 6px; }
.pinacts { padding-bottom: 6px; }
.goalset select { min-height: 44px; font-size: 16px; max-width: 52%; }
.pinmsg { width: 100%; }
.pinmsg .pinscreen { background: var(--ground); border: 2px solid var(--hair); max-width: none; }
@media (max-width: 480px) {
  .goalset { flex-wrap: wrap; }
  .goalset select { max-width: 100%; width: 100%; }
}
.setting { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 10px 0; cursor: pointer; min-height: 56px; }
.setting + .setting { border-top: 1px solid var(--hair); }
.setting div { display: grid; }
.setting b { font-size: 17px; font-weight: 600; }
.setting small { color: var(--muted); font-weight: 400; }
.themeset { padding-bottom: 0; }
/* switch: a square track, a square knob */
.switch { appearance: none; -webkit-appearance: none; position: relative; cursor: pointer; flex: none; transition: background .15s; margin: 0; border: 0; border-radius: 999px; background: var(--line2); width: 52px; height: 30px; }
.switch::after { content: ""; position: absolute; transition: left .15s, background .15s; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff !important; }
.switch:checked { background: var(--k-mint); }
.switch:checked::after { background: var(--act); left: 25px; }
[data-theme="galaxy"] .switch:checked::after, :root:not([data-theme]) .switch:checked::after { background: var(--yellow); }
.row2 { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pill { display: inline-block; padding: 2px 10px; font: 600 13px var(--label); background: var(--well); color: var(--ink); border-radius: 999px; font-weight: 500; }
.pill.on { background: var(--good-bg); color: var(--good); }
.pill.off { background: var(--bad-bg); color: var(--bad); }
.pill.temp { background: var(--warn-bg); color: #6b4e00; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border: 0; gap: 10px; }
.stats div { padding: 14px; text-align: center; display: grid; border-left: var(--bw) solid var(--rule); }
.stats div:first-child { border-left: 0; background: var(--yellow); color: #000; }
.stats div:first-child small { color: #262626; }
.stats b { font: 500 32px var(--display); }
.stats small { color: var(--muted); font: 500 13px var(--label); }
.ownerform { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ownerform label { display: grid; gap: 6px; font-weight: 600; flex: 1 1 240px; }
.ownerform label:nth-child(2) { flex: 0 1 100px; }
.ownerform input { font-size: 17px; }
.ownerform .btn { min-height: 52px; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1.5px solid var(--hair); vertical-align: middle; border-bottom-color: var(--hair); }
.table th { font: 600 13px var(--label); color: var(--muted); border-bottom: 1px solid var(--line2); font-weight: 500; }
.scroll { overflow-x: auto; }
.empty { text-align: center; display: grid; gap: 10px; justify-items: center; }
.card.stack > .row2:first-child svg.ui.big { color: var(--ink); }
/* ---------- paywall ---------- */
.price { display: grid; gap: var(--gap); }
@media (min-width: 640px) {
  .price { grid-template-columns: 1fr 1fr; gap: 24px; }
}
.plan { position: relative; background: var(--paper); padding: 24px; display: grid; gap: 12px; align-content: start; border: 1px solid var(--hair); border-radius: var(--rad); }
.plan h3 { font-size: 22px; }
.plan .amt { letter-spacing: -.02em; font: 500 40px/1 var(--display); }
.plan .amt small { font-size: 18px; color: var(--muted); letter-spacing: 0; }
.plan ul { padding-left: 20px; margin: 0; display: grid; gap: 4px; }
.plan.pop { background: var(--soft-pop); border: 2px solid var(--act); color: var(--ink); }
.plan.pop .amt small { color: #262626; }
.plan .ribbon { position: absolute; width: auto; height: auto; border: 0; font: 500 15px var(--display); top: 14px; right: 14px; border-radius: 999px; background: var(--act); color: var(--on-act); font-weight: 500; padding: 4px 12px; }
.plan.pop .btn { background: var(--act); color: var(--on-act); border-color: transparent; }
.card.gate, .gate { text-align: center; display: grid; gap: 14px; justify-items: center; max-width: 460px; margin: 0 auto; width: 100%; }
.gate .q { font: 500 44px var(--display); }
.gate .choices { width: 100%; }
.foot { text-align: center; color: var(--muted); font: 500 13px var(--label); padding: 8px 16px 24px; }
.spin { display: grid; place-items: center; min-height: 60vh; font: 500 22px var(--display); color: var(--muted); }
/* ---------- notebook ---------- */
.nbpage { max-width: 820px; gap: 12px; }
.nb { display: grid; gap: 12px; position: relative; }
.nbhead { display: flex; align-items: center; gap: 8px; }
.nbdate { flex: 1; text-align: center; display: grid; line-height: 1.15; }
.nbdate b { letter-spacing: -.01em; font: 500 22px var(--display); }
.nbdate small { color: var(--muted); font: 500 14px var(--label); }
.nbtools { display: grid; gap: 8px; background: var(--paper); padding: 8px; border: 1px solid var(--hair); border-radius: var(--rad); }
.nbseg { display: grid; grid-template-columns: 1fr 1fr; border: 0; background: var(--well); border-radius: 12px; padding: 4px; gap: 4px; }
.nbseg button { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 17px var(--display); color: var(--ink); border: 0 !important; border-radius: 9px; background: transparent; font-weight: 500; }
.nbseg button + button { border-left: 1px solid var(--rule); }
.nbseg button[aria-checked="true"] { background: var(--paper); color: var(--ink); }
.nbtools.typing .nbdraw { opacity: .5; }
.nbdraw { display: grid; gap: 8px; transition: opacity .2s; }
.nbcolors { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.nbcolors::-webkit-scrollbar { display: none; }
.nbcolors button { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--c); padding: 0; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line2); }
.nbcolors button[aria-checked="true"] { outline: 3px solid var(--ink); outline-offset: 2px; }
.nbrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nbsizes { display: flex; gap: 2px; }
.nbsizes button, .nbtool { width: 44px; height: 44px; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink); padding: 0; border-radius: 10px; }
@media (hover: hover) {
  .nbsizes button:hover, .nbtool:hover { background: var(--well); }
}
.nbsizes i { width: var(--d); height: var(--d); border-radius: 50%; background: currentColor; }
.nbsizes button[aria-checked="true"], .nbtool[aria-pressed="true"] { background: var(--pop); color: var(--ink); }
.nbtool svg.ui { width: 22px; height: 22px; }
.nbtool[disabled] { opacity: .3; }
.nbsep { width: 2px; height: 28px; background: var(--hair); margin: 0 4px; }
.nbpaper { --u: 3.6px; position: relative; width: 100%; background: #fff; overflow: hidden; color: #000; border: 1px solid var(--hair); border-radius: var(--rad); }
.nbtext, .nbink, .nbwet { position: absolute; inset: 0; width: 100%; height: 100%; }
.nbtext { border: 0; resize: none; background: transparent; outline: none; color: #000; font: 600 calc(var(--u) * 4.4)/calc(var(--u) * 7) var(--body); padding: calc(var(--u) * 8.2) calc(var(--u) * 6) calc(var(--u) * 4) calc(var(--u) * 6); overflow-y: auto; -webkit-user-select: text; user-select: text; font-weight: 400; }
.nb.big .nbtext { font-weight: 400; }
.nbtext::placeholder { color: #77776f; }
.nbink, .nbwet { touch-action: none; pointer-events: none; }
.nbpaper[data-mode="draw"] .nbink { pointer-events: auto; cursor: crosshair; }
.nbpaper[data-mode="draw"] .nbtext { pointer-events: none; }
.nbwet { pointer-events: none !important; }
.paper-lined { background-image: linear-gradient(to bottom, transparent calc(var(--u) * 7 - 1.5px), #c9d3e6 calc(var(--u) * 7 - 1.5px)); background-size: 100% calc(var(--u) * 7); }
.nb.little .paper-lined { background-image: linear-gradient(90deg, transparent calc(var(--u) * 4.5), #e8402f calc(var(--u) * 4.5), #e8402f calc(var(--u) * 4.5 + 2px), transparent calc(var(--u) * 4.5 + 2px)), linear-gradient(to bottom, transparent calc(var(--u) * 7 - 2px), #b9cbea calc(var(--u) * 7 - 2px)); background-size: 100% 100%, 100% calc(var(--u) * 7); }
.nb.big .paper-lined { background-image: linear-gradient(to bottom, transparent calc(var(--u) * 7 - 1px), #dedee6 calc(var(--u) * 7 - 1px)); }
.paper-dots { background-image: radial-gradient(circle, #c4c4cc calc(var(--u) * .22), transparent calc(var(--u) * .26)); background-size: calc(var(--u) * 5) calc(var(--u) * 5); background-position: calc(var(--u) * 2.5) calc(var(--u) * 2.5); }
.nbfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.nbpapers { display: flex; border: 0; background: var(--well); border-radius: 12px; padding: 3px; gap: 3px; }
.nbpapers button { min-height: 44px; background: transparent; display: flex; align-items: center; gap: 6px; padding: 0 14px; font: 500 15px var(--display); color: var(--ink); border: 0 !important; border-radius: 9px; font-weight: 500; }
.nbpapers button + button { border-left: 1px solid var(--rule); }
.nbpapers button[aria-checked="true"] { background: var(--paper); color: var(--ink); }
.nbstatus { color: var(--muted); font: 500 14px var(--label); min-height: 1.4em; }
.nbsheet { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .45); display: grid; align-items: end; justify-items: center; padding: 16px; padding-bottom: max(16px, var(--sab)); animation: enter .18s both; }
.nbcal, .nbconfirm { background: var(--paper); color: var(--ink); width: min(480px, 100%); max-height: min(80dvh, 720px); overflow-y: auto; padding: 18px; display: grid; gap: 12px; border: 0; border-radius: 20px; }
@media (min-width: 700px) {
  .nbsheet { align-items: center; }
}
.nbcal header { display: flex; align-items: center; justify-content: space-between; }
.nbcal h2 { font-size: 22px; }
.nbcal h3 { font-size: 18px; margin: 6px 0 8px; }
.calgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calgrid .cw { text-align: center; font: 600 11px var(--label); color: var(--muted); }
.calgrid button { aspect-ratio: 1; min-height: 40px; font: 500 15px var(--display); color: var(--ink); position: relative; border: 0; background: var(--well); border-radius: 10px; font-weight: 500; }
.calgrid button.has { color: #000; background: var(--pop); border: 0; }
.calgrid button.today { outline: 2px solid var(--act); outline-offset: -2px; }
.calgrid button.cur { background: var(--ink); color: var(--paper); }
.calgrid button[disabled] { opacity: .3; }
.nbconfirm { text-align: center; justify-items: center; }
@media (min-width: 1100px) {
  .nbpage { max-width: 1160px; }
  .nb:not(.ro) { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "head head" "tools paper" "foot paper" ". paper"; column-gap: 28px; align-items: start; grid-template-rows: auto auto auto 1fr; }
  .nb:not(.ro) > .nbhead { grid-area: head; }
  .nb:not(.ro) > .nbtools { grid-area: tools; grid-template-columns: 1fr; }
  .nb:not(.ro) > .nbpaper { grid-area: paper; max-width: 780px; }
  .nb:not(.ro) > .nbfoot { grid-area: foot; flex-direction: column; align-items: stretch; }
  .nb:not(.ro) .nbcolors { flex-wrap: wrap; overflow: visible; }
  .nb.ro .nbpaper { max-width: 780px; margin: 0 auto; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .nbtools { grid-template-columns: 200px 1fr; align-items: center; }
  .nbpaper { max-width: 700px; margin: 0 auto; }
}
/* ---------- certificate ---------- */
.cert { display: grid; place-items: center; padding-block: 8px; }
.cert-in { --ink: #000; --ink2: #262626; --muted: #585853; position: relative; overflow: hidden; isolation: isolate; width: min(100%, 860px); aspect-ratio: 1.414; background: #fff; color: #000; padding: clamp(18px, 5vw, 52px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(4px, 1.4vw, 12px); border: 1px solid #e6e6e6; border-radius: 20px; outline: 10px solid #fff4cc; outline-offset: -22px; }
.certmarks { display: flex; gap: 14px; justify-content: center; align-items: center; }
.certmarks img.logo { height: clamp(34px, 7vw, 60px); }
.certmarks img.av, .certmarks .av { width: clamp(40px, 8vw, 64px); height: clamp(40px, 8vw, 64px); }
.cert-in small { font: 600 clamp(12px, 2.4vw, 16px) var(--label); letter-spacing: .02em; padding: 2px 10px; background: none; color: #6b6b70; font-weight: 500; }
.cert-in h1 { font: 500 clamp(36px, 9vw, 76px)/1 var(--display); font-weight: 500; letter-spacing: -.02em; }
.cert-in h2 { font: 500 clamp(18px, 4vw, 32px) var(--display); color: #3a6fd0; font-weight: 500; }
.cert-in p { font-size: clamp(13px, 2.6vw, 18px); color: #262626; }
.cert-foot { display: flex; justify-content: space-between; width: 72%; margin-top: clamp(6px, 2vw, 20px); padding-top: 8px; font: 600 clamp(11px, 2.2vw, 15px) var(--label); color: #000; border-top: 1px solid #e6e6e6; font-weight: 500; }
.certpage .row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media print {
  header.bar, .foot, .noprint, .demo, .confetti { display: none !important; }
  body, html { background: #fff !important; }
}
/* ---------- loading, offline ---------- */
.skel { display: grid; gap: 12px; }
.skel i { display: block; height: 18px; background: var(--well); animation: pulse 1.2s ease-in-out infinite alternate; border-radius: 10px; }
.skel.hero i:first-child { height: 64px; width: 64px; border-radius: 50%; }
.skel.hero { grid-template-columns: 64px 1fr; align-items: center; }
.skel.grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.skel.grid i { height: 140px; }
.card.skel i:nth-child(1) { width: 40%; height: 22px; }
.card.skel i:nth-child(3) { width: 70%; }
@keyframes pulse { to { opacity: .45; } }
#offline { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabh) + var(--sab) + 12px); width: min(560px, calc(100% - 24px)); display: flex; gap: 10px; align-items: center; color: #fff; padding: 10px 14px; font: 600 14px/1.35 var(--label); border: 0; border-radius: 14px; background: #1c1c1e; font-weight: 500; }
#offline svg.ui { width: 20px; height: 20px; color: var(--yellow); }
/* =====================================================================
   Galaxy: content islands stay light paper with dark ink
   ===================================================================== */
[data-theme="galaxy"] :is(.visual, .choice, .key, .tile, .answerbox, .slots, .passage, .bubble, .nbpaper, .bin, .sortitem, .match, .memory, .tracepad, .numline, .clockset, .shade, .lcheck, .lex, .cluebox, .learn .steps li) { --ink: #000; --ink2: #262626; --muted: #585853; --hair: #d3d3cc; --line: #d3d3cc; --rule: #000; --soft: #eeeeea; --surface: #fff; --paper: #fff; --well: #ebebe6; --good: #17793f; --bad: #c62617; --good-bg: #dcf2e3; --bad-bg: #fbe1dd; --warn-bg: #fff2bd; color: var(--ink); }
[data-theme="galaxy"] .visual { background: #fff; padding: 14px; border: 0; }
[data-theme="galaxy"] .visual:empty { display: none; }
[data-theme="galaxy"] :is(.choice, .key, .tile, .answerbox, .bin, .sortitem, .bubble) { border-color: #e6e6e6; }
[data-theme="galaxy"] .key.go { background: var(--yellow); color: #000; }
[data-theme="galaxy"] .key.fn { background: #e2e2dc; }
[data-theme="galaxy"] :is(.numline, .clockset, .shade:not(.bar)) { background: #fff; padding: 14px; border: 0; }
[data-theme="galaxy"] .numline { padding-top: 56px; }
[data-theme="galaxy"] .slots { background: #fff; border: 0; }
[data-theme="galaxy"] .memory .card { border-color: #e6e6e6; }
[data-theme="galaxy"] .balloon::before { border-color: #e6e6e6; }
[data-theme="galaxy"] .hint-line, [data-theme="galaxy"] .feedback.ok { color: var(--good); }
[data-theme="galaxy"] .lcover, [data-theme="galaxy"] .lsheet { border-color: #e6e6e6; }
[data-theme="galaxy"] .pbar, [data-theme="galaxy"] .lbar { border-top-color: var(--hair); }
[data-theme="galaxy"] .done .resline, [data-theme="galaxy"] .goalline { color: inherit; }
[data-theme="galaxy"] .goalline { color: var(--ink); }
[data-theme="galaxy"] .examcard { background: var(--paper); color: var(--ink); border-color: var(--hair); }
[data-theme="galaxy"] .hcgo, [data-theme="galaxy"] .pbar .iconbtn.clue { border-color: #000; }
[data-theme="galaxy"] .ring.xl b, [data-theme="galaxy"] .ring b { color: var(--ink); }
[data-theme="galaxy"] .cluebox svg.ui { color: #000; }
[data-theme="galaxy"] a:not([class]), [data-theme="galaxy"] .link, [data-theme="galaxy"] .pinback { color: var(--ink); }
[data-theme="galaxy"] .tb.on svg.ui { color: #000; }
[data-theme="galaxy"] .subjcard.on { border-color: transparent; }
/* reading surfaces keep the light pastel tiles in every theme */
:is(.lcover, .lsheet, .visual, .memory, .bins, .tiles, .slots, .match) { --t-blue: #e7f0ff; --t-peach: #ffeadf; --t-pink: #fde8ef; --t-mint: #e1f5ea; --t-butter: #fff4cc; --t-lilac: #efeafd; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.intro-screen.study .modes { max-width: none; }
[data-theme="galaxy"] .choice.wrong { opacity: 1; }

/* ---------- pastel tiles, theme and band details ---------- */
@media (hover: hover) { .kidswbtn:hover { background: #f1f1f3; } }
.kidswbtn[aria-expanded="true"] { background: #f1f1f3; }
.kidmenu a:hover, .kidmenu a:focus-visible { background: #f1f1f3; }
.feat img.pe.fi { width: 56px; height: 56px; padding: 10px; border-radius: 16px; background: var(--t-blue); box-sizing: content-box; }
.feat:nth-child(2) img.pe.fi { background: var(--t-peach); }
.feat:nth-child(3) img.pe.fi { background: var(--t-mint); }
.hhead > img.av, .hhead > .av { border-radius: 50%; background: var(--t-butter); padding: 6px; }
a.kid img.pe.av, a.kid .av, a.kid img.av.photo { width: 88px; height: 88px; padding: 12px; border-radius: 50%; background: var(--t-blue); box-sizing: border-box; font-size: 54px; line-height: 64px; }
a.kid:nth-child(4n+2) img.pe.av, a.kid:nth-child(4n+2) .av { background: var(--t-peach); }
a.kid:nth-child(4n+3) img.pe.av, a.kid:nth-child(4n+3) .av { background: var(--t-mint); }
a.kid:nth-child(4n+4) img.pe.av, a.kid:nth-child(4n+4) .av { background: var(--t-butter); }
.tb.on svg.ui { background: var(--act); color: var(--on-act); }
.hpills span:nth-child(2) { background: var(--t-peach); }
.hpills span:nth-child(3) svg { color: var(--k-butter); }
.subjcard[data-s="math"] .sci { background: var(--t-blue); }
.subjcard[data-s="english"] .sci { background: var(--t-peach); }
.subjcard.on .sci { background: var(--paper) !important; }
.subjcard.on small { color: var(--ink2); }
@media (max-width: 480px) { .subjcard { grid-template-columns: 1fr; grid-template-areas: "ic" "name" "bar" "pct"; padding: 14px; } }
@media (max-width: 480px) { .subjcard .sci { width: 48px; height: 48px; margin-bottom: 6px; } }
@media (min-width: 1100px) { .subjcard .sci { width: 64px; height: 64px; } }
[data-band="little"] .subjcard, [data-band="big"] .subjcard { min-height: 0; }
[data-band="little"] .subjcard .sci img.pe { width: 40px; height: 40px; }
[data-band="big"] .subjcard.on[data-s] { background: var(--paper); border: 1.5px solid var(--sc); }
[data-band="big"] .subjcard.on .sci { background: var(--sc-tint, var(--well)) !important; }
[data-band="big"] .subjcard.on[data-s="math"] .sci { background: var(--t-blue) !important; }
[data-band="big"] .subjcard.on[data-s="english"] .sci { background: var(--t-peach) !important; }
[data-band="big"] .subjcard.on .scbar { background: var(--well); }
.ucard[aria-selected="true"] b { color: var(--ink); }
@media (hover: hover) { .ucard:hover b { color: var(--ink); } }
.uphero.complete .uhi { background: var(--paper); }
[data-band="big"] .lc.k-teach .lday, [data-band="big"] .lc.k-practice .lday { background: var(--well); color: var(--ink2); outline: 0; }
.hgrid .ha:nth-child(5n+2) .hai { background: var(--t-peach); }
.hgrid .ha:nth-child(5n+3) .hai { background: var(--t-mint); }
.hgrid .ha:nth-child(5n+4) .hai { background: var(--t-butter); }
.hgrid .ha:nth-child(5n+5) .hai { background: var(--t-lilac); }
.hgrid.middle .ha:nth-child(5n+2) .hai { background: var(--t-peach) !important; }
.hgrid.middle .ha:nth-child(5n+3) .hai { background: var(--t-mint) !important; }
.hgrid.middle .ha:nth-child(5n+4) .hai { background: var(--t-butter) !important; }
.hgrid.middle .ha:nth-child(5n+5) .hai { background: var(--t-lilac) !important; }
.mehead .av, .mehead img.av { border-radius: 50%; background: var(--t-butter); padding: 12px; box-sizing: border-box; }
.mestats div:nth-child(2) { background: var(--t-peach); }
.mestats div:nth-child(3) { background: var(--t-blue); }
.mestats div:nth-child(4) { background: var(--t-mint); }
.mestats svg.ui, .mestats div:nth-child(n) svg { background: none !important; padding: 0; color: var(--ink2) !important; border-radius: 0; }
@media (max-width: 380px) { .mestats div:nth-child(n) { border: 0; } }
.memory .card, .memory .card:nth-child(n) { border: 0; border-radius: 16px; background: var(--t-blue); color: var(--ink); }
.bin, .bin:nth-child(n) { border: 1.5px solid var(--hair); border-top-width: 1.5px; border-radius: 16px; }
.mode:nth-child(2) > svg.ui:first-child { background: var(--t-blue); }
[data-band="little"] .lsheet p, [data-band="middle"] .lsheet p { font-weight: 500; }
@media (max-width: 699px) { .ptabs button[aria-selected="true"] svg.ui { background: var(--act); color: var(--on-act); } }
.kidcard summary h3, .kidrow h3 { font-size: 20px; }
.stats div, .stats div:first-child { border: 0; border-radius: var(--rad); background: var(--t-butter); color: var(--ink); }
.stats div:nth-child(2) { background: var(--t-mint); }
.stats div:nth-child(3) { background: var(--t-blue); }
[data-theme="galaxy"] .visual, [data-theme="galaxy"] :is(.numline, .clockset, .shade:not(.bar)), [data-theme="galaxy"] .slots { border-radius: 16px; }
[data-theme="galaxy"] :is(.choice, .key, .tile, .answerbox, .bin, .sortitem, .bubble) { border-color: transparent; }
.uphero, .hcont, .lc, .ha, a.kid, .examcard, .subjcard, .kidmenu a { font-weight: 400; }
.hgrid .ha:nth-child(5n+1) .hai { background: var(--t-blue); }
/* ---------- membership: trial ending, cancelled, card failed ---------- */
.mbanner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: var(--soft-pop); border: 1px solid var(--pop); border-radius: var(--rad); color: var(--ink); text-decoration: none; font-weight: 400; }
.mbanner > svg.ui { width: 28px; height: 28px; flex: none; }
.mbanner b { display: block; font: 500 18px/1.25 var(--display); }
.mbanner small { display: block; color: var(--muted); font-size: 15px; line-height: 1.4; }
.mbanner .btn { flex: none; }
.mbanner.pastdue { background: var(--bad-bg); border-color: transparent; }
.mbanner.pastdue > svg.ui { color: var(--bad); }
@media (max-width: 520px) { .mbanner .btn { width: 100%; } }
.mcard { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; background: var(--soft-pop); border-radius: var(--rad-s); }
.mcard b { display: block; font: 500 16px/1.3 var(--display); }
.mcard small { display: block; color: var(--muted); font-size: 14px; }
.mcard.pastdue { background: var(--bad-bg); }
.mcard.up { background: var(--well); }
.cont { max-width: 560px; margin: 0 auto; width: 100%; display: grid; gap: 14px; }
.cont .logo.lg { justify-self: center; }
.cont > h2 { font-size: 26px; text-align: center; }
.cont > .sub { text-align: center; }
.cont.gate { max-width: 460px; }
.cplans { display: grid; gap: 10px; margin-top: 4px; }
.cplan { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--hair); border-radius: var(--rad-s); background: var(--paper); cursor: pointer; transition: border-color .12s, background-color .12s; }
.cplan input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.cplan:has(input:checked) { border: 2px solid var(--act); background: var(--soft-pop); padding: 13px 15px; }
.cplan:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.cpn b, .cpp b { display: block; font: 500 18px/1.2 var(--display); }
.cpn small, .cpp small { display: block; color: var(--muted); font-size: 14px; line-height: 1.35; }
.cpp { text-align: right; }
.csum { text-align: center; font-weight: 600; margin-top: 4px; }
.contload { min-height: 320px; }
.bspin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; display: inline-block; animation: bspin .7s linear infinite; }
@keyframes bspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bspin { animation-duration: 2s; } }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
label.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ink); flex: none; }
label.check small { display: block; font-weight: 400; }

/* ===== Science (2026-11) ===== */
:root { --sci: #23855a; --sci-tint: var(--t-mint); }
[data-theme="galaxy"] { --sci: #8fdcb2; --sci-tint: #24392f; }
.lart img.lartimg { display: block; width: 100%; max-width: 420px; max-height: 260px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.lcover .lart img.lartimg { max-height: 280px; }
.figbox img.lartimg { display: block; width: 100%; max-width: 420px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; margin: 0 auto; }
.figseq { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 4px; }
.figseq .fs, .figcycle .fs { display: grid; justify-items: center; gap: 4px; text-align: center; }
.figseq .fs img.pe { width: 58px; height: 58px; }
.figseq small, .figcycle small, .figcompare b { font: 600 13px/1.2 var(--label); color: var(--ink2); max-width: 92px; }
.figseq .arw { width: 22px; height: 14px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M1 7h18M13 1l6 6-6 6' fill='none' stroke='%233a3a3c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.figcycle { position: relative; width: min(300px, 82vw); aspect-ratio: 1; margin: 0 auto; }
.figcycle .fcring { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.figcycle .fs { position: absolute; transform: translate(-50%, -50%); z-index: 1; }
.figcycle .fs img.pe { width: 52px; height: 52px; background: var(--paper); border-radius: 50%; padding: 4px; }
.figcycle .fcc { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .9; }
.figcycle .fcc img.pe { width: 64px; height: 64px; }
.figcompare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 440px; }
.figcompare .fcol { display: grid; gap: 8px; justify-items: center; align-content: start; padding: 10px; background: var(--paper); border-radius: 14px; }
.figcompare b { font-size: 14px; max-width: none; }
.figcompare .fci { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.figcompare .fci img.pe { width: 46px; height: 46px; }
.lfact { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--t-lilac); border-radius: 16px; margin: 14px 0; }
.lfact img.pe { width: 40px; height: 40px; flex: none; }
.lfact p { font-size: 16.5px; line-height: 1.5; margin: 0; }
.lhome { margin: 18px 0; padding: 16px 18px 14px; background: var(--sci-tint); border-radius: 18px; }
.lhome header { display: flex; gap: 12px; align-items: center; margin-bottom: 6px; }
.lhome header img.pe { width: 48px; height: 48px; flex: none; }
.lhome header small { display: block; font: 700 13px var(--label); color: var(--sci); }
.lhome header b { font: 600 19px/1.25 var(--display); }
.lhome .lhk { margin: 12px 0 4px; font: 700 14px var(--label); color: var(--ink2); }
.lhome .lneed { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.lhome .lneed li { padding: 5px 11px; background: var(--paper); border-radius: 999px; font-size: 15px; }
.lhome .llist { margin-top: 2px; }
.lhome .lsee { margin: 12px 0 0; padding: 10px 12px; background: var(--paper); border-radius: 12px; font-size: 16px; line-height: 1.45; }
.lhome .lsafe { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: 14.5px; color: var(--ink2); }
.lhome .lsafe svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.subjrow:has(> :nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.subjcard.on[data-s="science"] { background: var(--sci-tint); color: var(--ink); border-color: transparent; }
.subjcard[data-s="science"] .sci { background: var(--sci-tint); }
/* three subjects: stack each card (picture on top) so the names fit */
.subjrow:has(> :nth-child(3)) .subjcard { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ic" "name" "bar" "pct"; align-content: center; padding: 14px; }
.subjrow:has(> :nth-child(3)) .subjcard .sci { width: 48px; height: 48px; margin-bottom: 4px; }
.subjrow:has(> :nth-child(3)) .subjcard b { font-size: 18px; }
@media (max-width: 480px) { .subjrow:has(> :nth-child(3)) { gap: 8px; } .subjrow:has(> :nth-child(3)) .subjcard { padding: 12px 10px; } .subjrow:has(> :nth-child(3)) .subjcard b { font-size: 16px; } }
.figtime { display: flex; width: 100%; max-width: 640px; overflow-x: auto; padding: 6px 2px 2px; }
.figtime .ft { flex: 1 0 84px; display: grid; justify-items: center; gap: 4px; text-align: center; position: relative; }
.figtime .ft i { width: 14px; height: 14px; border-radius: 50%; background: var(--c2); border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--c2); z-index: 1; }
.figtime .ft::before { content: ""; position: absolute; top: calc(1.2em + 13px); left: 0; right: 0; height: 3px; background: var(--line2); }
.figtime .ft:first-child::before { left: 50%; } .figtime .ft:last-child::before { right: 50%; }
.figtime b { font: 700 14px var(--label); color: var(--ink); }
.figtime small { font: 500 12.5px/1.25 var(--label); color: var(--ink2); padding: 0 4px; }
img.figmap { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
:root { --soc: #9a5b12; --soc-tint: #fbeedb; --geo: #1f6f9a; --geo-tint: #dff0fa; --gk: #6d4fc4; --gk-tint: var(--t-lilac); }
[data-theme="galaxy"] { --soc: #f2c27e; --soc-tint: #3a3022; --geo: #8fcbef; --geo-tint: #223744; --gk: #c3b2f5; --gk-tint: #322e48; }
.subjcard.on[data-s="social"] { background: var(--soc-tint); border-color: transparent; } .subjcard[data-s="social"] .sci { background: var(--soc-tint); }
.subjcard.on[data-s="geo"] { background: var(--geo-tint); border-color: transparent; } .subjcard[data-s="geo"] .sci { background: var(--geo-tint); }
.subjcard.on[data-s="gk"] { background: var(--gk-tint); border-color: transparent; } .subjcard[data-s="gk"] .sci { background: var(--gk-tint); }
/* 4–6 subjects: compact cards in a grid that wraps (3 per row on wide screens, 2 on phones) */
.subjrow.n4, .subjrow.n5, .subjrow.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.subjrow.n4 .subjcard, .subjrow.n5 .subjcard, .subjrow.n6 .subjcard { min-height: 0; padding: 12px; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ic name" "ic bar" "ic pct"; }
.subjrow.n4 .subjcard .sci, .subjrow.n5 .subjcard .sci, .subjrow.n6 .subjcard .sci { width: 42px; height: 42px; margin: 0; }
.subjrow.n4 .subjcard .sci img.pe, .subjrow.n5 .subjcard .sci img.pe, .subjrow.n6 .subjcard .sci img.pe { width: 28px; height: 28px; }
.subjrow.n4 .subjcard b, .subjrow.n5 .subjcard b, .subjrow.n6 .subjcard b { font-size: 16px; line-height: 1.15; }
@media (max-width: 640px) { .subjrow.n4, .subjrow.n5, .subjrow.n6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.figmapw { position: relative; width: 100%; max-width: 520px; margin: 0 auto; }
.figmapw .mapmarks { position: absolute; inset: 0; width: 100%; height: 100%; }
/* tables and other tall figures in the picture box: show them whole (scroll inside if very wide) */
.lart:has(.figtable) { display: block; overflow: auto; min-height: 0; padding-top: 40px; }
.lart .figtable { margin: 0 auto; }

/* ===== Cancel membership flow (2026-11) ===== */
.xcancel > h2 { font-size: 26px; text-align: center; }
.xcancel .mascot-wrap { justify-self: center; }
.xkids { display: grid; gap: 8px; }
.xkid { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--hair); border-radius: var(--rad-s); background: var(--paper); text-align: left; }
.xkid .av, .xkid img.av { width: 44px; height: 44px; font-size: 30px; line-height: 44px; text-align: center; border-radius: 50%; background: var(--well); flex: none; object-fit: cover; }
.xkid b { display: block; font: 500 17px/1.25 var(--display); }
.xkid small { display: block; color: var(--muted); font-size: 14px; line-height: 1.35; }
.xprice { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--soft-pop); border-radius: var(--rad-s); text-align: left; }
.xprice img.xcup { width: 52px; height: 52px; flex: none; }
.xprice b { display: block; font: 500 21px/1.2 var(--display); text-wrap: balance; }
.xprice small { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 2px; }
.xsec { display: grid; gap: 6px; text-align: left; }
.xsec h3 { font-size: 17px; }
.xlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.xlist li { display: flex; align-items: center; gap: 10px; line-height: 1.35; }
.xlist img.xi { width: 26px; height: 26px; flex: none; }
.xlink { background: none; border: 0; padding: 10px; min-height: 44px; color: var(--muted); font: 600 15px var(--body); text-decoration: underline; text-underline-offset: 3px; justify-self: center; }
.xlink:hover { color: var(--ink); }
.xreasons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.xreasons label.chipbtn { cursor: pointer; }
.xreasons input { position: absolute; opacity: 0; pointer-events: none; }
.xreasons label:has(input:checked) { background: var(--soft-pop); border: 2px solid var(--act); padding: 5px 13px; }
.xreasons label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }