/* =======================================================================
 * The grown-up look (2026-10-19).
 *
 *   "the main website pages will need an art/style refresh tailored towards
 *    the adults instead of a child like style. Use Prodigy as an example"
 *   "the website needs to look professional, and on specific pages showcase
 *    the features and include in-game art"
 *   "no purple gradients" / "do like light blue"
 *
 * The website is for the parent; the play pages are for the child. The world:
 * clear daylight. White pages, a light sky-blue band where the page opens (the
 * same sky the game's paintings stand under, so the art sits in it naturally),
 * deep navy ink, one strong blue for every action, a solid blue band to close
 * on, a navy footer. Lexend for headings and text, Fredoka kept for the
 * wordmark alone. The game's paintings and buddies are shown as the product,
 * framed like screens, not used as wallpaper.
 *
 * Flat colour only: no gradients anywhere. A region is one colour; depth comes
 * from a hairline edge or a soft offset shadow. No labels above headings.
 *
 * A layer over styles.css, loaded after it (src/layout.mjs): tokens first,
 * which moves most of the page; then the parts that were candy-shaped. The
 * kids' game (/play) keeps its own look; Homework's tween room is at the end.
 * ======================================================================= */

@font-face { font-family: 'Lexend'; src: url('/site/Lexend_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/site/Lexend_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Lexend'; src: url('/site/Lexend_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  /* Surfaces */
  --paper: #ffffff;
  --card: #ffffff;
  --sky: #e2f1ff;        /* where a page opens: the hero, page tops */
  --wash: #f3f8fd;       /* quiet alternate bands, inputs at rest */
  --sunk: var(--wash);
  /* Ink: navy, never grey-on-white below 4.5:1 */
  --ink: #0f2742;        /* 15.4:1 on white */
  --ink-soft: #3c5672;   /* 7.4:1 on white, 6.5:1 on --sky */
  --ink-faint: #55708c;  /* 5.0:1 on white */
  --rule: #d9e6f2;
  --rule-sky: #c4dcf2;
  /* Action: one blue */
  --brand: #1763d6;      /* white on it 5.6:1; it on white 5.6:1 */
  --brand-deep: #0e4fb2;
  --brand-ink: #ffffff;
  --brand-tint: #e5f0ff; /* selected */
  /* The closing band and the footer */
  --band-blue: #1763d6;
  --night: #0b2036;
  /* Meaning */
  --sun: #ffc83d;
  --mint: #0c7f57;       /* 5.2:1 on white */
  --danger: #b3261e;
  --danger-tint: #fff3f2;
  --danger-edge: #f0b8b4;
  --mint-ink: #0c7f57;   /* mint as text */
  --ok-tint: #e1f5ec;   --ok-ink: #0a6646;
  --warn-tint: #fff3d1; --warn-ink: #6e4d00;
  --bad-tint: #fde6e4;  --bad-ink: #962a21;
  --refer-tint: #fff7de; --refer-edge: #f2d27a;
  /* Links and other coloured text: the brand blue on a light page, a lighter blue on a dark one. */
  --link: #1763d6;
  --link-deep: #0e4fb2;
  --focus-ring: var(--focus-ring);
  --selection: #cfe4ff;
  /* The navy bands (Adventures, what Homework won't do, the footer). */
  --night-ink: #dce8f5;
  --night-soft: #c3d4e6;
  --night-faint: #9cb2c9;
  --night-rule: #1d3550;
  --device: #10233b;
  --shadow: 0 2px 4px rgba(15, 39, 66, .05), 0 14px 30px rgba(15, 39, 66, .08);
  --shadow-soft: 0 1px 2px rgba(15, 39, 66, .05), 0 6px 16px rgba(15, 39, 66, .06);
  /* The buddy colours stay for the buddy's own marks; chrome uses the brand. */
  --buddy-deep: var(--brand);
  --r-control: 12px;
  --r-card: 16px;
  --r-sheet: 20px;
  /* Headings in Fredoka, the wordmark's own rounded face, as Monster Math sets its headlines; text and
     controls in Lexend. Rounded and friendly at the top, plain and grown-up underneath (2026-10-19, after
     looking at Prodigy, ABCmouse, Monster Math, Legends of Learning and SplashLearn). */
  --headline: 'Fredoka', 'Lexend', system-ui, sans-serif;
  --display: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { accent-color: var(--link); }
/* The remembered sign-in state (layout.mjs PAINT_EARLY) hides the other state's parts before the first paint. */
html[data-auth='in'] [data-auth='out'], html[data-auth='out'] [data-auth='in'] { display: none !important; }
/* The text cursor only where something can be typed (2026-10-21: a cursor line showed when clicking
   ordinary text). */
body { font: 400 1.0625rem/1.65 var(--body); color: var(--ink); background: var(--paper); caret-color: transparent; }
input, textarea, select, [contenteditable]:not([contenteditable='false']) { caret-color: var(--link); }
::selection { background: var(--selection); color: var(--ink); }
h1, h2, h3 { font-family: var(--headline); font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
h2 { margin-top: 0; }
b, strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 8px; }
.title { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
.lede { color: var(--ink-soft); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 38em; }
.link { color: var(--link); font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.link:hover { color: var(--link-deep); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fine { color: var(--ink-faint); font-size: .9rem; }
.chip--sunk { display: none; }   /* the old label above a banner's heading: headings carry themselves */
.hero__eyebrow { display: none; }

/* Buttons: blue with white words; the quiet one is white with a blue word. */
.btn {
  min-height: 52px; padding: .5em 1.5em; border-radius: 12px;
  background: var(--brand); color: var(--brand-ink);
  font: 600 1.02rem/1.1 var(--display);
  box-shadow: 0 2px 0 var(--brand-deep);
}
.btn:hover { background: var(--brand-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn--cream { background: var(--card); color: var(--link); box-shadow: inset 0 0 0 1.5px var(--rule-sky); }
.btn--cream:hover { background: var(--wash); color: var(--link-deep); }
.btn--small { min-height: 42px; font-size: .95rem; padding: .35em 1.1em; border-radius: 10px; }

/* Cards: white, a hairline edge, a soft offset shadow. */
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-sheet); box-shadow: var(--shadow-soft); }
.ticks li::before { background: var(--brand); width: .5em; height: .5em; top: .64em; border-radius: 2px; transform: rotate(45deg); }
.card.refer { background: var(--refer-tint); border-color: var(--refer-edge); box-shadow: none; }

/* The bar: a solid white strip across the top. */
.bar { padding: 0; background: var(--card); border-bottom: 1px solid var(--rule); pointer-events: auto; }
.bar__pill { max-width: 1240px; min-height: 72px; padding: 8px clamp(16px, 3vw, 28px); background: none; box-shadow: none; border-radius: 0; }
.bar__home { font: 700 1.15rem/1 'Fredoka', var(--display); color: var(--ink); }
.bar__home img { width: 44px; height: 44px; }
.bar__link { font: 400 .95rem/1.2 var(--display); color: var(--ink-soft); padding: .5em .7em; border-radius: 8px; }
.bar__link:hover { background: var(--wash); color: var(--ink); }
.bar__link[aria-current] { background: none; color: var(--link); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); border-radius: 0; }
.bar__signin { font: 600 .95rem/1.2 var(--display); color: var(--ink); border-radius: 8px; }
.bar__signin:hover, button.bar__signin:hover { background: var(--wash); }
.bar__menu { background: var(--wash); border-radius: 12px; }
/* The right end of the bar: Start learning, then the menu button (2026-10-26). */
.bar__go { gap: 12px; margin-right: 6px; }
/* Wider than a phone, the menu is a panel under its button, not a sheet over the page; the page stays where it is. */
@media (min-width: 700px) {
  .menu {
    inset: auto; top: var(--menu-top, 84px); right: max(16px, calc((100vw - 1240px) / 2 + 20px)); left: auto; bottom: auto;
    width: 320px; max-height: calc(100vh - var(--menu-top, 84px) - 16px); padding: 14px; gap: 14px;
    border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow);
  }
  .menu__links { gap: 4px; }
  .menu .menu__link { font-size: 1rem; padding: .7em .9em; background: none; }
  .menu .menu__link:hover { background: var(--wash); }
  .menu .menu__link[aria-current] { background: var(--brand-tint); color: var(--link); }
  .menu__go { gap: 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
  .menu__go .btn { width: 100%; min-height: 46px; }
  html body:has(.menu:not([hidden])) .notice { display: block; }
}
.menu { background: var(--card); }
.menu__link { background: var(--wash); box-shadow: none; border-radius: 12px; font: 600 1.15rem/1.2 var(--display); }
.menu__link[aria-current] { background: var(--brand); color: var(--brand-ink); }

/* The top of every other page: the light sky, the words on the left, a buddy as the illustration. */
.banner { padding: 124px 0 44px; background: var(--sky); border-bottom: 1px solid var(--rule-sky); }
.banner__panel { background: none; border: 0; box-shadow: none; padding: 0; }
.banner h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); letter-spacing: -.01em; }
.banner__buddy { filter: drop-shadow(0 14px 18px rgba(15, 39, 66, .16)); }
@media (max-width: 760px) { .banner { background-image: none; padding-top: 100px; } }

.band--paper { background: var(--paper); }
.band--sunk { background: var(--wash); }

/* Steps, tiles, doors and the rest, made crisp. */
.door__pic, .rung, .cookies__row, .say { border-radius: var(--r-control); }
.tile { border: 1px solid var(--rule); box-shadow: var(--shadow-soft); border-radius: var(--r-card); font: 600 .95rem/1.2 var(--display); }
.door { border-radius: var(--r-sheet); }
.rung::before { background: var(--brand); color: #fff; }
.rung b { color: var(--link); }
.xp, .earn__one { border: 1px solid var(--rule); box-shadow: var(--shadow-soft); }
.xp__bar i { background: var(--brand); }
.answers .btn.is-right { background: var(--mint); color: #fff; box-shadow: none; }

/* One more way in: a solid blue band with the buddies; the main action white. */
.call { background: var(--band-blue); color: #fff; padding: clamp(56px, 8vw, 96px) 0; overflow: hidden; }
.call__panel { position: relative; background: none; border: 0; box-shadow: none; }
.call h2 { color: #fff; }
.call .lede, .call p { color: #e3efff; }
.call .btn:not(.btn--cream) { background: #fff; color: var(--brand-deep); box-shadow: 0 2px 0 #0b3f8f; }
.call .btn:not(.btn--cream):hover { background: var(--brand-tint); }
.call .btn--cream { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #8fbaf5; }
.call .btn--cream:hover { background: #2a74e0; color: #fff; }
.stroll { display: none; }
@media (max-width: 700px) { .call { background-image: none; } }

/* The footer: navy, quiet, grown-up. */
.foot { background: var(--night); color: var(--night-ink); border-top: 1px solid var(--night-rule); }
.foot__brand p { color: var(--night-ink); max-width: 22em; }
/* The lockup file carries a clear margin of 108px on a 2917px width, about 8px at the footer's 220px: pulled back so the mark lines up with the words under it. */
.foot__brand img { margin: -8px 0 4px -8px; }
/* Two wordmarks: the white one on the navy footer; the navy one is for a light footer (the autumn cream, season.css). */
.foot__mark--navy { display: none; }
.foot__col h2 { color: #fff; font-size: .95rem; letter-spacing: 0; }
.foot__col a, .foot__out { color: var(--night-soft); font-weight: 400; }
.foot__col a:hover, .foot__out:hover { color: #fff; }
.foot__small { border-top-color: var(--night-rule); color: var(--night-faint); }
.foot__small a { color: var(--night-soft); font-weight: 400; }

.field { font: 600 .95rem/1.4 var(--display); }
.field input { background: var(--card); border: 1.5px solid var(--rule); border-radius: var(--r-control); font: 400 1.05rem var(--body); min-height: 52px; }
.field input:focus { border-color: var(--link); outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }
.store-note { border-radius: 12px; }

/* Numbered steps: left-aligned, the number a light-blue square with a blue figure. */
.steps li { border: 1px solid var(--rule); box-shadow: var(--shadow-soft); border-radius: var(--r-card); padding: 22px; }
.steps li::before { margin: 0 0 12px; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-tint); color: var(--link); font: 700 1.05rem/1 var(--display); font-variant-numeric: tabular-nums; }
.steps b, .steps span { text-align: left; }
.steps b { font: 600 1.08rem/1.25 var(--display); margin-bottom: 2px; }
.steps span { color: var(--ink-soft); font-size: .95rem; }

/* The cookie notice (src/consent.mjs writes its own small style; these win by being more specific). */
body .sb-cookies { background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); font: 400 .9rem/1.5 var(--body); }
body .sb-cookies a { color: var(--link); }
body .sb-cookies button { border-radius: 10px; font: 600 .88rem/1 var(--display); min-height: 40px; }
body .sb-cookies .sb-cookies__ok { background: var(--brand); color: #fff; border: 0; }
body .sb-cookies .sb-cookies__no { background: var(--card); color: var(--link); border: 1.5px solid var(--rule-sky); }

/* --- The front page (src/pages/01-home.mjs, rebuilt 2026-10-19) ---------------
 * Shows the product, not pictures about it: real screens from the game and from
 * Homework help, in device frames, overlapping. Sections vary on purpose: a
 * split hero, two feature rows that swap sides, a slim band, the live hint
 * demo, the shelf, two open columns, a single line. No card grids, no labels
 * over headings, no numbers strip. */

.btn, .acct-go, .mode__go, .hw__btn, .btn--small { border-radius: 999px; }
.btn { padding-inline: 1.7em; }

/* Devices: a navy bezel for a tablet; a browser window with a title strip. */
.device { margin: 0; position: relative; background: var(--device); border-radius: 26px; padding: 12px; box-shadow: 0 4px 8px rgba(15, 39, 66, .08), 0 28px 56px rgba(15, 39, 66, .2); }
.device img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.device--window { padding: 30px 0 0; border-radius: 14px; background: #1b2f48; overflow: hidden; }
.device--window::before { content: ''; position: absolute; top: 11px; left: 14px; width: 9px; height: 9px; border-radius: 50%; background: #ff6b5f; box-shadow: 15px 0 0 #ffc23d, 30px 0 0 #2fcf6a; }
.device--window img { border-radius: 0; aspect-ratio: auto; }

/* The hero: words left; right, the game on a tablet with Homework help in a window over its corner. */
.hero--shots { min-height: 0; padding: 132px 0 0; background: var(--sky); color: var(--ink); overflow: visible; border-bottom: 0; display: block; }   /* visible: the phone's shadow falls past the band's edge instead of being cut */
.hero--shots .wrap { position: relative; z-index: 1; }
.hero--shots::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 88px; background: var(--paper); z-index: -1; }
.hero--shots .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero--shots .hero__words { padding-bottom: 120px; }
.hero__title { color: var(--ink); font-size: clamp(2.3rem, 3.9vw, 3.4rem); line-height: 1.06; letter-spacing: -.015em; margin-bottom: 20px; text-wrap: balance; }
.hero--shots .lede { color: var(--ink-soft); font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.6; max-width: 31em; margin: 0; }
.hero--shots .cta-row { margin-top: 30px; gap: 12px; justify-content: flex-start; }
.hero__assure { margin: 18px 0 0; color: var(--ink-soft); font-size: .95rem; }
.hero__assure a { color: var(--link); font-weight: 600; }
.hero__shots { position: relative; padding: 40px 0 72px 15%; }
.hero__tablet { transform: rotate(1.2deg); }
/* Homework help on a phone, standing in front of the tablet's corner. */
.hero__phone { position: absolute; left: 0; bottom: 0; width: 27%; padding: 8px; border-radius: 30px; transform: rotate(-3deg); }
.hero__phone img { aspect-ratio: 9 / 17; object-position: top; border-radius: 22px; }
.hero__peek { position: absolute; right: 18px; top: -46px; width: clamp(96px, 10vw, 136px); height: auto; filter: drop-shadow(0 8px 10px rgba(15, 39, 66, .18)); }

/* A feature: shots on one side, plain words on the other; the next one swaps sides. */
.feature { padding: clamp(48px, 6vw, 80px) 0 clamp(56px, 8vw, 104px); background: var(--paper); }
.feature + .feature { padding-top: 0; }
.feature__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.feature--flip .feature__shots { order: 2; }
.feature__shots { position: relative; }
.feature__shots .device:first-child { width: 88%; }
.feature__second { position: absolute; right: 0; bottom: -40px; width: 46%; padding: 8px; border-radius: 18px; }
.feature__second img { border-radius: 10px; }
.feature--flip .device--window { max-width: 560px; margin-left: auto; }
.feature__words h2 { font-size: clamp(2rem, 3.4vw, 2.75rem); margin-bottom: 6px; }
.feature__meta { margin: 0 0 18px; color: var(--link); font: 600 1rem/1.4 var(--display); }
.feature__words .lede { font-size: 1.1rem; margin: 0; }

.checks { list-style: none; margin: 22px 0 26px; padding: 0; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 1.02rem; line-height: 1.5; }
.checks svg { margin-top: 2px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--brand-tint); color: var(--link); }

.arrow-link { display: inline-flex; align-items: center; gap: 8px; color: var(--link); font: 600 1.02rem/1.2 var(--display); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.arrow-link .arrow { transition: transform .2s var(--ease); }
.arrow-link:hover { border-bottom-color: currentColor; }
.arrow-link + .arrow-link { margin-left: 28px; }
.arrow-link:hover .arrow { transform: translateX(3px); }

/* Adventures: one slim navy band, not a third feature, because it isn't built yet. */
.soon { background: var(--night); color: var(--night-ink); border-top: 1px solid var(--night-rule); border-bottom: 1px solid var(--night-rule); padding: 28px 0; }
.soon__in { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: clamp(20px, 3vw, 36px); align-items: center; }
.soon__art { width: 200px; height: 125px; object-fit: cover; object-position: center 40%; border-radius: 12px; }   /* the Start learning painting: the three buddies at the cliff edge */
.soon h2 { color: #fff; font-size: 1.6rem; margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.soon p { margin: 0; color: var(--night-soft); max-width: 36em; }
.soon__tag { padding: 3px 12px; border-radius: 999px; background: var(--sun); color: var(--night); font: 600 .82rem/1.5 var(--display); letter-spacing: 0; }
.soon__buddy { width: 96px; height: auto; }

/* A heading with its link at the far end, for the shelf. */
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.section-head .title { margin-bottom: 6px; }
.section-head .lede { margin: 0; }

/* Parents and teachers: two open columns split by a rule, no boxes. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.pair > div { padding-right: clamp(24px, 5vw, 64px); }
.pair > div + div { padding: 0 0 0 clamp(24px, 5vw, 64px); border-left: 1px solid var(--rule); }
.pair .lede { font-size: 1.08rem; margin: 0; }


@media (max-width: 1000px) {
  .hero--shots .hero__grid, .feature__grid { grid-template-columns: minmax(0, 1fr); }
  .hero--shots .hero__words { padding-bottom: 0; max-width: 640px; }
  .hero__shots { max-width: 680px; padding-left: 40px; }
  .feature--flip .feature__shots { order: 0; }
  .feature__shots { max-width: 680px; }
  .feature + .feature { padding-top: clamp(24px, 4vw, 48px); }
}
@media (max-width: 760px) {
  .pair { grid-template-columns: 1fr; gap: 40px; }
  .pair > div, .pair > div + div { padding: 0; border: 0; }
  .pair > div + div { padding-top: 40px; border-top: 1px solid var(--rule); }
  .soon__in { grid-template-columns: minmax(0, 1fr) auto; }
  .soon__art { display: none; }
}
@media (max-width: 560px) {
  .hero--shots { padding-top: 104px; }
  .hero--shots .cta-row { flex-direction: column; align-items: stretch; }
  .hero__shots { padding: 32px 0 40px 16px; }
  .hero__phone { width: 30%; padding: 5px; border-radius: 18px; }
  .hero__phone img { border-radius: 14px; }
  .hero__peek { top: -28px; right: 8px; width: 84px; }
  .device { padding: 7px; border-radius: 16px; }
  .device img { border-radius: 10px; }
  .device--window { padding: 22px 0 0; border-radius: 12px; }
  .device--window::before { top: 7px; left: 10px; width: 8px; height: 8px; box-shadow: 13px 0 0 #ffc23d, 26px 0 0 #2fcf6a; }
  .device--window img { border-radius: 0; }
  .feature__second { display: none; }
  .feature__shots .device:first-child { width: 100%; }
  .soon__buddy { width: 64px; }
}

/* --- The sign-up (src/pages/12-sign-up.mjs) ------------------------------ */

.acct { padding: 108px 0 72px; background: var(--wash); min-height: 100vh; }
.acct__wrap { width: min(1120px, 100% - 32px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.acct__side { position: sticky; top: 100px; padding: 32px; border-radius: 24px; background: var(--sky); border: 1px solid var(--rule-sky); }
.acct__pitch { color: var(--ink); font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin-bottom: 24px; }
.acct__modes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.acct__modes li { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: var(--card); border-radius: 14px; border: 1px solid var(--rule-sky); }
.acct__modes img { width: 56px; height: 56px; object-fit: contain; }
.acct__modes span { display: grid; color: var(--ink-soft); font-size: .92rem; }
.acct__modes b { color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.acct__aside-note { margin: 18px 0 0; color: var(--ink-soft); font-size: .92rem; }
.acct__main { background: var(--card); border: 1px solid var(--rule); border-radius: 24px; box-shadow: var(--shadow); padding: clamp(24px, 4vw, 44px); }
.acct__progress { list-style: none; margin: 0 0 28px; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; counter-reset: dot; }
.acct__progress li { counter-increment: dot; display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--wash); color: var(--ink-faint); font: 600 .8rem/1 var(--display); }
.acct__progress li::before { content: counter(dot); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 1px solid var(--rule); font-size: .72rem; }
.acct__progress li.is-here { background: var(--brand); color: #fff; }
.acct__progress li.is-here::before { background: #fff; color: var(--brand); border-color: #fff; }
.acct__progress li.is-done { color: var(--mint-ink); }
.acct__progress li.is-done::before { content: '\2713'; background: var(--mint); color: #fff; border-color: var(--mint); }
.acct-step h1 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: .3em; outline: none; }
.acct-lede { color: var(--ink-soft); margin-bottom: 24px; }
.acct-field { display: grid; gap: 6px; margin-bottom: 18px; font: 600 .92rem/1.3 var(--display); }
.acct-field[hidden] { display: none; }
.acct-field input { width: 100%; min-height: 50px; padding: .4em 1em; font: 400 1.05rem var(--body); color: var(--ink); background: var(--card); border: 1.5px solid var(--rule); border-radius: 12px; }
.acct-field input:focus { border-color: var(--link); outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }
.acct-field small { color: var(--ink-faint); font: 400 .85rem/1.4 var(--body); }
.acct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.acct-set { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.acct-set legend { font: 600 .92rem/1.3 var(--display); margin-bottom: 10px; padding: 0; }
.acct-set legend small { color: var(--ink-faint); font-weight: 400; margin-left: 6px; }
.acct-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.acct-pill, .acct-buddy, .acct-plan { position: relative; }
.acct-pill input, .acct-buddy input, .acct-plan input { position: absolute; opacity: 0; pointer-events: none; }
.acct-pill span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--rule); border-radius: 10px; background: var(--card); font: 400 .92rem/1.2 var(--body); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.acct-pill span:hover { border-color: var(--rule-sky); background: var(--wash); }
.acct-pill input:checked + span { border-color: var(--link); background: var(--brand-tint); color: var(--link-deep); font-weight: 600; }
.acct-pill input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.acct-pill input:disabled + span { opacity: .45; cursor: not-allowed; }
.acct-buddies { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.acct-buddy { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border: 1.5px solid var(--rule); border-radius: 16px; cursor: pointer; font: 600 .95rem/1.2 var(--display); transition: border-color .15s ease, background .15s ease; }
.acct-buddy img { width: 88px; height: 88px; object-fit: contain; }
.acct-buddy:has(input:checked) { border-color: var(--link); background: var(--brand-tint); }
.acct-buddy:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.acct-check { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; padding: 14px 16px; background: var(--wash); border-radius: 12px; font-size: .95rem; }
.acct-check input { width: 20px; height: 20px; margin-top: 3px; flex: none; }
.acct-plans { display: grid; gap: 14px; margin-bottom: 18px; }
.acct-plan { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 18px; border: 1.5px solid var(--rule); border-radius: 16px; cursor: pointer; }
.acct-plan:has(input:checked) { border-color: var(--link); background: var(--brand-tint); }
.acct-plan:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.acct-plan__name { font: 600 1.05rem/1.2 var(--display); }
.acct-plan__price { grid-row: span 2; align-self: center; font: 700 1.3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.acct-plan__price small { font: 400 .8rem var(--body); color: var(--ink-faint); }
.acct-plan__line { font-size: .88rem; color: var(--ink-soft); }
/* No "Popular" tag on Pro since 2026-10-27, with the plans page's "Our pick". */
.acct-go { display: flex; width: 100%; align-items: center; justify-content: center; min-height: 52px; border: 0; border-radius: 12px; background: var(--brand); color: #fff; font: 600 1.02rem/1 var(--display); box-shadow: 0 2px 0 var(--brand-deep); }
.acct-go:hover { background: var(--brand-deep); }
.acct-go:disabled { opacity: .6; cursor: progress; }
.acct-quiet { display: flex; width: 100%; justify-content: center; margin-top: 10px; padding: .7em; border: 0; background: none; color: var(--link); font: 600 .95rem/1.2 var(--display); text-decoration: none; border-radius: 10px; }
.acct-quiet:hover { background: var(--wash); }
.acct-quiet[hidden] { display: none; }
.acct-problem { min-height: 1.2em; margin: 0 0 10px; color: var(--danger); font: 600 .92rem/1.4 var(--display); }
.acct-problem:empty { margin: 0; min-height: 0; }
.acct-small { margin: 16px 0 0; text-align: center; font-size: .9rem; color: var(--ink-faint); }
.acct-kids { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.acct-kids li { padding: 6px 12px; background: var(--wash); border-radius: 999px; font-size: .88rem; }
/* The shorter sign-up (2026-10-19): a grade dropdown in place of fourteen pills, and the parent's OK as a line above the button. */
.acct-field select { width: 100%; min-height: 50px; padding: .4em 2.6em .4em 1em; font: 400 1.05rem var(--body); color: var(--ink); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%233c5672' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1.5px solid var(--rule); border-radius: 12px; appearance: none; }
.acct-field select:focus { border-color: var(--link); outline: none; box-shadow: 0 0 0 4px var(--focus-ring); }
.acct-agree { margin: 0 0 14px; color: var(--ink-soft); font-size: .9rem; line-height: 1.5; }
.acct-roles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.acct-row--3 { grid-template-columns: 1.4fr 1fr 1fr; }
.acct-set[hidden] { display: none; }
.acct-fine { display: block; margin-top: -8px; color: var(--ink-faint); font: 400 .85rem/1.4 var(--body); }
.acct-role { position: relative; }
.acct-role input { position: absolute; opacity: 0; pointer-events: none; }
.acct-role span { display: grid; place-items: center; min-height: 52px; padding: 10px 16px; border: 1.5px solid var(--rule); border-radius: 14px; cursor: pointer; }
.acct-role b { font: 600 1.05rem/1.2 var(--display); }
.acct-role span:hover { border-color: var(--rule-sky); background: var(--wash); }
.acct-role input:checked + span { border-color: var(--link); background: var(--brand-tint); }
.acct-role input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
a.acct-go { text-decoration: none; }
@media (max-width: 640px) { .acct-roles { grid-template-columns: 1fr; } }
.acct-back { display: inline-flex; align-items: center; min-height: 36px; margin: -6px 0 8px -10px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--link); font: 600 .95rem var(--display); cursor: pointer; }
.acct-back:hover { background: var(--wash); }
.acct-signed { margin: -12px 0 18px; color: var(--ink-faint); font-size: .9rem; }
.acct-signed[hidden] { display: none; }
.acct-signed .linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-small .linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.acct-small .linkbtn[hidden] { display: none; }
.page--sign-up .foot { display: none; }
@media (max-width: 860px) {
  .acct__wrap { grid-template-columns: 1fr; }
  .acct__side { position: static; padding: 22px; }
  .acct__modes { grid-template-columns: repeat(3, 1fr); }
  .acct__modes li { flex-direction: column; text-align: center; }
}
@media (max-width: 560px) {
  /* On a phone the form is the page: the side panel would push it below the fold. */
  .acct__side { display: none; }
  .acct { padding-top: 92px; }
  .acct__main { padding: 22px 18px; border-radius: 18px; }
  .acct__progress li { padding-right: 10px; }
  .acct-row { grid-template-columns: 1fr; }
}

/* --- Start learning: the choice of modes (src/pages/15-modes.mjs) ------------ */

.modes { padding: 116px 0 80px; background: var(--wash); min-height: 100vh; }
.modes__head { text-align: center; margin-bottom: 32px; }
.modes__head h1 { font-size: clamp(2rem, 4vw, 3rem); }
.modes__eyebrow { color: var(--ink-faint); font-size: .92rem; min-height: 1.4em; margin-bottom: 6px; }
.modes__kids { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; }
.modes__kids[hidden] { display: none; }
.modes__kids > span { font: 600 .92rem/1 var(--display); color: var(--ink-soft); }
.modes__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.modes__chip { min-height: 40px; padding: 0 16px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--card); font: 600 .92rem/1 var(--display); color: var(--ink); }
.modes__chip:hover { border-color: var(--rule-sky); }
.modes__chip[aria-checked='true'] { border-color: var(--link); background: var(--brand); color: #fff; }
.modes__who { font: 600 .92rem/1 var(--display); color: var(--ink); }
.modes__setup { margin-top: 14px; }
.modes__out { text-align: center; margin: 0 auto 28px; }
.modes__out[hidden] { display: none; }
.modes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); max-width: 1000px; margin-inline: auto; }
/* The Games card: the kids' games on the left half, Adventures on the right (2026-10-19). */
.mode__art--split { display: grid; grid-template-columns: 1fr 1fr; background: none; }
.mode__half { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% center; }
.mode__half + .mode__half { object-position: 55% center; }
.mode__buddies--left { left: 25%; width: 20%; }
.mode__soon--right { left: auto; right: 12px; width: max-content; justify-self: end; align-self: start; }   /* a grid child: stop it stretching across the picture */
.mode { display: grid; grid-template-rows: auto 1fr; background: var(--card); border: 1px solid var(--rule); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-soft); transition: transform .2s var(--ease), box-shadow .2s ease; }
.mode:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mode--best { border-color: var(--link); box-shadow: 0 0 0 2px var(--brand), var(--shadow); }
.mode__art { position: relative; aspect-ratio: 16 / 10; background: var(--sky) center / cover no-repeat; }
/* The buddy stands in the plain spot each card picture keeps at its bottom middle (x 35-65%, ground near 96%). */
.mode__buddies { position: absolute; left: 50%; bottom: 3%; width: 34%; display: flex; justify-content: center; align-items: end; gap: 4%; transform: translateX(-50%); }
.mode__buddy { display: block; width: 100%; min-width: 0; height: auto; filter: drop-shadow(0 6px 8px rgba(15, 39, 66, .2)); }
.mode--homework .mode__buddies { width: 30%; bottom: 8%; }
.mode__best, .mode__soon { position: absolute; top: 12px; left: 12px; padding: 4px 12px; border-radius: 999px; font: 600 .8rem/1.6 var(--display); }
.mode__best[hidden] { display: none; }
.mode__best { background: var(--brand); color: #fff; }
.mode__soon { background: var(--night); color: #fff; }
/* A mode that is not built yet: the whole card greyed, picture and words alike (2026-10-19). */
.mode--soon { filter: grayscale(1); opacity: .72; box-shadow: none; }
.mode--soon:hover { transform: none; box-shadow: none; }
.mode__body { display: grid; align-content: start; gap: 8px; padding: 22px 22px 24px; }
.mode__body h2 { font-size: 1.45rem; margin: 0; order: -1; }
.mode__ages { margin: 0; color: var(--link); font: 600 .92rem/1.3 var(--display); }
.mode__body p { margin: 0 0 8px; color: var(--ink-soft); font-size: .98rem; }
.mode__go { justify-self: start; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 12px; background: var(--brand); color: #fff; font: 600 .98rem/1 var(--display); text-decoration: none; box-shadow: 0 2px 0 var(--brand-deep); }
.mode__go:hover { background: var(--brand-deep); }
.mode__go--quiet { background: var(--card); color: var(--link); box-shadow: inset 0 0 0 1.5px var(--rule-sky); }
.mode__go--off, .mode__go--off:hover { background: var(--wash); color: var(--ink-faint); cursor: default; box-shadow: none; pointer-events: none; }
.modes__foot { text-align: center; margin-top: 28px; }
/* Phones and small tablets, held either way, stack the three (2026-10-19: "for phone have the modes
   stacked on top of each other"). A sideways phone is ~930px wide but short, hence the height test too. */
@media (max-width: 1024px), (max-height: 520px) {
  .modes__grid { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
}
/* With room beside it, each stacked card puts its picture on the left, so a sideways phone is not three tall pictures. */
@media ((min-width: 600px) and (max-width: 1024px)), ((min-width: 600px) and (max-height: 520px)) {
  .mode { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto; }
  .mode__art { aspect-ratio: auto; min-height: 190px; }
  .mode__body { align-content: center; }
}

/* --- Settings (src/pages/15c-settings.mjs): the two tabs, and the Account tab's cards ----------- */
.settings { padding: 116px 0 80px; background: var(--wash); min-height: 100vh; }
body:has(.notice:not([hidden])) .settings { padding-top: 32px; }
.settings__title { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 18px; }
.settings__out .lede { margin: 0 0 16px; }
.stabs { display: flex; gap: 6px; margin-bottom: 24px; border-bottom: 1px solid var(--rule); }
.stabs__tab { min-height: 46px; padding: 0 18px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink-soft); font: 600 1rem var(--display); cursor: pointer; }
.stabs__tab:hover { color: var(--ink); }
.stabs__tab[aria-selected='true'] { color: var(--link); border-bottom-color: var(--link); }
.stab-panel[hidden] { display: none; }
.settings__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.settings__card { padding: 24px 26px; }
.settings__card h2 { font-size: 1.35rem; margin: 0 0 12px; }
.settings__card p { color: var(--ink-soft); margin: 0 0 14px; }
.settings__card .cta-row { margin-top: 6px; }
.settings__card--danger { border-color: var(--danger-edge); }
.btn--danger { background: var(--danger); color: #fff; box-shadow: none; }
.btn--danger:hover { background: var(--danger); filter: brightness(.92); }
.facts { display: grid; gap: 10px; margin: 0 0 16px; }
.facts > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-faint); font: 600 .92rem/1.5 var(--display); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.acct-ok { min-height: 1.2em; margin: 0 0 10px; color: var(--mint-ink); font: 600 .92rem/1.4 var(--display); }
.acct-ok:empty { margin: 0; min-height: 0; }
.settings__sub { margin-top: 36px; }
.settings .dashboard-frame { display: block; width: 100%; min-height: 720px; border: 0; background: transparent; margin-top: 4px; color-scheme: normal; }

/* The Parent dashboard tab (src/parents.js, 2026-10-20): pick a child, then their week in three blocks. */
.pd__lock { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--brand-tint); color: var(--ink); }
.pd__lock[hidden] { display: none; }
.pd__step { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin: 0 0 14px; }
.pd__pick { margin-bottom: 32px; }
.pd__pick[hidden], .pd__child[hidden] { display: none; }
.pd__kids { display: flex; flex-wrap: wrap; gap: 10px; }
.pd__kid { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 18px 6px 8px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 1rem var(--display); cursor: pointer; }
.pd__kid img { width: 38px; height: 38px; object-fit: contain; border-radius: 50%; background: var(--wash); }
.pd__kid:hover { border-color: var(--rule-sky); }
.pd__kid[aria-checked='true'] { border-color: var(--brand); background: var(--brand-tint); color: var(--link); }
.pd__kid--add { padding: 6px 18px; border-style: dashed; color: var(--link); background: transparent; }
.pd__kid--add:disabled { color: var(--ink-faint); cursor: not-allowed; }
.pd__kid:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.fam__add-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; }
.pd__child { display: grid; gap: 20px; }
.pd__block h3 { font-size: 1.35rem; margin: 0 0 4px; }
.pd__block h4 { margin: 18px 0 10px; font: 600 1rem/1.4 var(--display); }
.pd__hint { margin: 0 0 12px; color: var(--ink-soft); }
.pd__block.card { padding: 24px 26px; }
.pd__block--games { padding: 0; }
.pd__tonight { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--wash); }
.pd__grade { max-width: 320px; margin-bottom: 4px; }
.pd__grade select { width: 100%; min-height: 50px; padding: .4em 1em; font: 400 1.05rem var(--body); color: var(--ink); background: var(--card); border: 1.5px solid var(--rule); border-radius: 12px; }
@media (max-width: 640px) { .fam__add-row { grid-template-columns: 1fr; } .pd__block.card { padding: 20px; } }
@media (max-width: 860px) { .settings__grid { grid-template-columns: 1fr; } .facts > div { grid-template-columns: 1fr; gap: 2px; } }

/* --- The parents' page: the family panel (now in Settings' Parent dashboard tab, src/parents.js) ---------- */

.fam__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.fam__lock { margin: 0; color: var(--ink-soft); }
.fam__lock[hidden] { display: none; }
.fam__lock button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.fam__pin { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 12px 0 0; padding: 14px 16px; background: var(--wash); border-radius: 14px; }
.fam__pin[hidden] { display: none; }
.fam__pin label { display: flex; align-items: center; gap: 10px; font: 600 .95rem var(--display); }
.fam__pin input { width: 96px; min-height: 42px; padding: 0 12px; border: 1.5px solid var(--rule); border-radius: 10px; font: 600 1.1rem var(--body); letter-spacing: .3em; }
.fam__problem { color: var(--danger); font: 600 .9rem var(--display); }
.fam__setup { margin-top: 14px; }
.fam__setup[hidden] { display: none; }
.fam__kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; }
.fam__kid { display: grid; gap: 18px; align-content: start; }
.fam__kidhead { display: flex; align-items: center; gap: 14px; }
.fam__face { width: 60px; height: 60px; object-fit: contain; background: var(--sky); border-radius: 16px; }
.fam__kidhead h3 { margin: 0; font-size: 1.3rem; }
.fam__grade { margin: 0; color: var(--ink-faint); font-size: .92rem; }
.fam__week h4, .fam__help h4 { margin: 0 0 8px; font: 600 1rem/1.3 var(--display); color: var(--ink); }
.fam__week p { margin: 0 0 8px; font-size: .95rem; }
.fam__facts { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.fam__facts li { font-size: .95rem; color: var(--ink-soft); }
.fam__label { font-weight: 600; margin-bottom: 2px !important; }
.fam__soft { color: var(--ink-faint); }
.fam__choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fam__opt { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--card); font: 400 .85rem/1.4 var(--body); color: var(--ink-soft); }
.fam__opt b { font: 600 .98rem/1.2 var(--display); color: var(--ink); }
.fam__opt[aria-checked='true'] { border-color: var(--link); background: var(--brand-tint); }
.fam__opt:disabled { cursor: not-allowed; opacity: .75; }
.fam__small { margin-top: 18px; color: var(--ink-faint); font-size: .88rem; }
.fam__small[hidden] { display: none; }
/* Adding and removing children (2026-10-19). */
.fam__remove { justify-self: start; min-height: 36px; padding: 0 12px; border: 1.5px solid var(--rule); border-radius: 10px; background: none; color: var(--danger); font: 600 .88rem var(--display); cursor: pointer; }
.fam__remove:hover:not(:disabled) { background: var(--danger-tint); border-color: var(--danger-edge); }
.fam__remove:disabled { color: var(--ink-faint); cursor: not-allowed; }
.fam__add { margin-top: 20px; padding: 20px 24px; }
.fam__add[hidden] { display: none; }
.fam__add h3 { margin: 0 0 12px; font-size: 1.15rem; }
.fam__add-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.fam__add-row .acct-field { margin: 0; }
.fam__add-row .btn { min-height: 50px; }
@media (max-width: 640px) { .fam__add-row { grid-template-columns: 1fr; } }
.page--parents .dashboard-frame { display: block; width: 100%; min-height: 720px; border: 1px solid var(--rule); border-radius: 20px; background: var(--card); margin-top: 18px; }

/* --- Schools: the classroom dashboard preview (src/pages/17-schools.mjs) ------ */

.cls { padding: 0; overflow: hidden; margin-top: 12px; }
.cls__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--rule); }
.cls__head h3 { margin: 0; font-size: 1.5rem; }
.cls__tag { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; background: var(--sky); color: var(--link-deep); font: 600 .78rem/1.6 var(--display); vertical-align: middle; letter-spacing: 0; }
.cls__sub { margin: 0; color: var(--ink-faint); font-size: .92rem; }
.cls__stats { display: flex; flex-wrap: wrap; gap: 12px; }
.cls__stats div { display: grid; min-width: 120px; padding: 10px 14px; background: var(--wash); border-radius: 12px; }
.cls__stats b { font: 700 1.5rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.cls__stats span { color: var(--ink-soft); font-size: .82rem; }
.cls__table-wrap { overflow-x: auto; }
.cls__table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.cls__table th, .cls__table td { padding: 12px 28px 12px 0; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.cls__table th:first-child, .cls__table td:first-child { padding-left: 28px; }
.cls__table thead th { font: 600 .85rem/1.3 var(--display); color: var(--ink-soft); background: var(--wash); }
.cls__table tbody th { font-weight: 600; }
.cls__table tbody tr:hover { background: var(--wash); }
.cls__status { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 600 .8rem/1.6 var(--display); }
.cls__status--strong { background: var(--ok-tint); color: var(--ok-ink); }
.cls__status--steady { background: var(--warn-tint); color: var(--warn-ink); }
.cls__status--hard { background: var(--bad-tint); color: var(--bad-ink); }
.cls__status--new { background: var(--wash); color: var(--ink-soft); }
.cls__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px 28px 26px; }
.cls__notes h4 { margin: 0 0 4px; font: 600 1rem/1.3 var(--display); color: var(--ink); }
.cls__notes p { margin: 0; color: var(--ink-soft); }
@media (max-width: 700px) { .cls__notes { grid-template-columns: 1fr; } .cls__head, .cls__notes { padding-inline: 18px; } }

/* --- Homework help (src/pages/16-homework.mjs): the tween room ---------------
 * Older than the kids' games and calmer than the grown-up pages (The owner,
 * 2026-10-19: "more general tween age instead of straight child like"): a
 * deep navy room like a desk lamp at night, off-white cards, the buddy small in
 * the corner, the same blue as the website for the one action. Flat. */

.page--homework { background: var(--wash); }
.page--homework .foot { display: none; }
.hw { --hw-ground: var(--wash); --hw-band: var(--card); --hw-rule: var(--rule); --hw-card: var(--card); --hw-ink: var(--ink); --hw-soft: var(--ink-soft); --hw-mine: var(--brand); --hw-chip: var(--wash); --hw-go: var(--brand);
  padding: 0; min-height: 100vh; min-height: 100dvh; background: var(--hw-ground); color: var(--hw-ink); }   /* the whole screen: no site bar above it (16b: bare) */
/* A column: whichever middle part is showing (the sign-in note, the chat, the videos) takes the room between the head and the composer. */
.hw__shell { width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.hw__room, .hw__videos, .hw__out, .hw__setup { flex: 1 0 auto; }
.hw__head, .hw__tabs, .hw__room, .hw__videos, .hw__compose, .hw__out, .hw__setup { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
.hw__log, .hw__empty, .hw__pick, .hw__row, .hw__vtools, .hw__chips, .hw__grid, .hw__player, .hw__vnote, .hw__note { width: min(860px, 100%); margin-inline: auto; }
.hw__exit { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.hw__exit:hover { background: var(--hw-chip); }
.hw__head { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--hw-band); border-bottom: 1px solid var(--hw-rule); }
.hw__face { width: 52px; height: 52px; object-fit: contain; background: var(--hw-chip); border-radius: 14px; }
.hw__titles { flex: 1; min-width: 0; }
.hw__head h1 { color: var(--ink); font-size: 1.3rem; margin: 0; }
.hw__status { margin: 0; color: var(--hw-soft); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw__who select { min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--hw-rule); background: var(--hw-chip); color: var(--ink); font: 600 .9rem var(--display); }
.hw__who[hidden], .hw__new[hidden] { display: none; }
.hw__new { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--hw-rule); background: none; color: var(--link); font: 600 .9rem var(--display); }
.hw__new:hover { background: var(--hw-chip); }
.hw__out, .hw__setup { align-self: stretch; align-content: start; display: grid; justify-items: center; text-align: center; padding: clamp(40px, 10vh, 96px) 24px 48px; }
.hw__out img, .hw__setup img { width: 150px; height: 150px; object-fit: contain; margin-bottom: 8px; }
.hw__out[hidden], .hw__setup[hidden] { display: none; }
.hw__out h2, .hw__setup h2 { color: var(--ink); font-size: 1.6rem; }
.hw__out p, .hw__setup p { color: var(--hw-soft); }
.hw__btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; margin: 4px; border-radius: 12px; background: var(--brand); color: var(--brand-ink); font: 600 .98rem/1 var(--display); text-decoration: none; }
.hw__btn--quiet { background: var(--card); color: var(--link); box-shadow: inset 0 0 0 1.5px var(--hw-rule); }
.hw__room { display: grid; align-content: end; padding: 18px; }
.hw__room[hidden], .hw__compose[hidden], .hw__empty[hidden] { display: none; }
.hw__empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 32px 8px; }
.hw__hello { width: 140px; height: 140px; object-fit: contain; }
.hw__empty h2 { color: var(--ink); font-size: 1.7rem; margin: 6px 0 0; }
.hw__empty p { color: var(--hw-soft); max-width: 32em; margin: 0 0 8px; }
.hw__starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 600px; }
.hw__starter { min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hw-rule); background: var(--card); color: var(--ink); font: 600 .9rem var(--display); }
.hw__starter:hover { border-color: var(--link); }
.hw__starter--photo { background: var(--brand-tint); color: var(--link); border-color: var(--rule-sky); }
/* margin-inline stays auto (the 860px column above), so the chat lines up with the message box under it. */
.hw__log { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 12px; }
.hw__msg { max-width: min(620px, 86%); padding: 12px 16px; border-radius: 16px; font-size: 1rem; line-height: 1.6; }
.hw__msg p { margin: 0; white-space: pre-wrap; }
.hw__msg b { display: block; font: 600 .78rem/1.4 var(--display); color: var(--ink-faint); margin-bottom: 2px; }
.hw__msg img { width: 220px; max-width: 100%; border-radius: 10px; margin-bottom: 8px; }
.hw__msg--buddy { justify-self: start; background: var(--hw-card); color: var(--ink); border: 1px solid var(--rule); border-top-left-radius: 4px; }
.hw__msg--user { justify-self: end; background: var(--hw-mine); color: #fff; border-top-right-radius: 4px; }
.hw__photo-tag { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 6px; background: #3a7fe0; font-size: .78rem; }
.hw__compose { position: sticky; bottom: 0; padding: 12px 18px 18px; background: var(--hw-band); border-top: 1px solid var(--hw-rule); }
.hw__pending { position: relative; display: inline-block; margin-bottom: 10px; }
.hw__pending[hidden] { display: none; }
.hw__pending img { height: 72px; border-radius: 10px; }
.hw__pending button { position: absolute; top: -8px; right: -8px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); box-shadow: var(--shadow-soft); font-size: 1.1rem; line-height: 1; }
.hw__row { display: flex; align-items: flex-end; gap: 10px; }
.hw__cam, .hw__send { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; border: 0; cursor: pointer; }
.hw__cam { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hw-rule); }
.hw__cam input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.hw__cam:focus-within { outline: 3px solid var(--hw-go); outline-offset: 2px; }
.hw__send { background: var(--hw-go); color: #fff; }
.hw__send:hover { background: var(--brand-deep); }
.hw__send:disabled { opacity: .5; }
.hw__row textarea { flex: 1; min-height: 48px; max-height: 160px; padding: 12px 14px; resize: none; border-radius: 14px; border: 1px solid var(--hw-rule); background: var(--card); color: var(--ink); font: 400 1rem/1.4 var(--body); caret-color: var(--brand); }
.hw__row textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus-ring); }
.hw__note { margin: 14px auto 0; min-height: 1.2em; color: var(--danger); font: 600 .92rem/1.45 var(--display); text-align: center; scroll-margin-bottom: 120px; }
.hw__note:empty { min-height: 0; margin: 0 auto; }
@media (max-width: 600px) { .hw__head { gap: 10px; padding: 10px 12px; } .hw__face { width: 44px; height: 44px; } .hw__room { padding: 12px; } .hw__compose { padding: 10px 12px 14px; } }

/* --- Every other page, past the template look (2026-10-19) -------------------
 * The owner: "i dont want the website to look like ai slop". The tells were the
 * same on every page: a lone buddy beside each page title, every section a
 * centred heading over a row of identical boxes, lists in boxes with diamond
 * bullets, and a centred blue band of three buddies to close. Now: a real
 * screen beside the title where the page has one, headings set left like the
 * rest of the text, numbered steps as an open row under a rule, lists as open
 * columns, and a closing band laid out like a sentence with its buttons. */

/* Section headings line up with their text. */
.band .title:not(.title--mid) { text-align: left; }
.band .lede--mid { margin-inline: 0; text-align: left; }
.band .mid { text-align: left; }

/* A real screen beside a page's title (layout.mjs banner, `shot`). */
.banner__in { align-items: center; }
.banner__shot { flex: none; width: min(520px, 42%); margin: 0 0 -96px; transform: rotate(1deg); }
.banner__shot.device--window { transform: none; }
.banner:has(.banner__shot) { position: relative; z-index: 1; padding-bottom: 56px; }   /* above the next band, so the screen hangs over it */
.banner__shot.device--window img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.banner:has(.banner__shot) + .band { padding-top: clamp(96px, 10vw, 136px); }
@media (max-width: 860px) {
  .banner__in { flex-direction: column; align-items: stretch; }
  .banner__shot { width: 100%; max-width: 560px; margin: 8px 0 -64px; transform: none; }
  .banner:has(.banner__shot) + .band { padding-top: 96px; }
}

/* A painted scene beside a page's title (layout.mjs banner, `art`, 2026-11-05). */
.banner__art { flex: none; width: min(520px, 42%); margin: 0; }
.banner__art img { display: block; width: 100%; height: auto; }
.banner__art--framed img { border-radius: 22px; box-shadow: 0 4px 8px rgba(15, 39, 66, .08), 0 20px 44px rgba(15, 39, 66, .16); }
.banner__art--open img { filter: drop-shadow(0 14px 18px rgba(15, 39, 66, .16)); }
@media (max-width: 860px) { .banner__art { width: 100%; max-width: 520px; margin: 8px auto 0; } }

/* Numbered steps: an open row, each under a rule, the number set in the brand blue. */
.steps { gap: clamp(20px, 3vw, 36px); margin-top: 1.6rem; }
.steps li { padding: 20px 0 0; background: none; border: 0; border-top: 2px solid var(--rule); border-radius: 0; box-shadow: none; }
.steps li::before { width: auto; height: auto; margin: 0 0 10px; display: block; background: none; border-radius: 0; color: var(--link); font: 700 1.6rem/1 var(--headline); text-align: left; content: counter(step, decimal-leading-zero); }
.steps b { font: 600 1.12rem/1.3 var(--display); }

/* Lists: a drawn check instead of a diamond. */
.ticks li { padding-left: 1.8em; }
.ticks li::before { left: .2em; top: .38em; width: .38em; height: .72em; background: none; border: solid var(--brand); border-width: 0 2.5px 2.5px 0; border-radius: 0; transform: rotate(45deg); }

/* Two lists side by side: open columns split by a rule, not two boxes. */
.duo { gap: 0; }
.duo > .card { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0 clamp(24px, 5vw, 64px) 0 0; }
.duo > .card + .card { padding: 0 0 0 clamp(24px, 5vw, 64px); border-left: 1px solid var(--rule); }
@media (max-width: 860px) {
  .duo > .card, .duo > .card + .card { padding: 0; border: 0; }
  .duo > .card + .card { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--rule); }
}

/* The closing band: words and buttons on the left, the three starter buddies on the right. */
.call { text-align: left; padding: clamp(48px, 7vw, 80px) 0; }
.call__panel { max-width: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; }
.call__panel > * { grid-column: 1; }
.call__buddies { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
.call h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin-bottom: 8px; }
.call .lede { margin: 0; }
.call .cta-row--mid { justify-content: flex-start; }
@media (max-width: 760px) {
  .call__panel { grid-template-columns: 1fr; }
  .call__buddies { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-bottom: 16px; }
  .call__buddies img { width: 76px; }
}

/* The parents page: the signed-out door is a row, not a centred block. */
.fam__door { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.fam__door .title { margin-bottom: 4px; }
.fam__door .lede { margin: 0; }
.fam__door .cta-row { margin: 0; }

/* --- The Homework help tab: a showcase, not the chat (src/pages/16-homework.mjs, 2026-10-19) ---
 * The real chat on a phone in the hero, one question walked through beside the
 * chat window, what it does as an open grid, what it won't do on the chat's own
 * navy, and the parent's two controls as open columns. */

.hero--hw .hero__words { padding-bottom: 96px; }
.hwx__shots { position: relative; display: grid; justify-items: center; padding: 8px 0 64px; }
.hwx__phone { width: min(300px, 70%); padding: 9px; border-radius: 36px; transform: rotate(2deg); }
.hwx__phone img { aspect-ratio: 9 / 17; object-position: top; border-radius: 28px; }
.hwx__peek { position: absolute; left: calc(50% - min(300px, 70%) / 2 - 150px); bottom: 40px; width: clamp(110px, 12vw, 160px); height: auto; filter: drop-shadow(0 8px 10px rgba(15, 39, 66, .18)); }

.hwx__walk { list-style: none; counter-reset: walk; margin: 24px 0 0; padding: 0; display: grid; gap: 0; }
.hwx__walk li { counter-increment: walk; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule); }
.hwx__walk li::before { content: counter(walk); grid-row: span 2; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); color: #fff; font: 700 1rem/1 var(--display); }
.hwx__walk b { font: 600 1.08rem/1.3 var(--display); }
.hwx__walk span { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }

.hwx__does { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 4vw, 48px); }
.hwx__does li { display: grid; gap: 6px; align-content: start; padding-top: 18px; border-top: 2px solid var(--rule-sky); }
.hwx__does b { font: 600 1.12rem/1.3 var(--display); }
.hwx__does span { color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }

.hwx__wont { background: var(--night); color: var(--night-ink); border-top: 1px solid var(--night-rule); border-bottom: 1px solid var(--night-rule); padding: clamp(48px, 7vw, 88px) 0; }
.hwx__wont-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.hwx__wont h2 { color: #fff; font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 12px; }
.hwx__wont p { color: var(--night-soft); margin: 0; max-width: 30em; }
.hwx__wont ul { list-style: none; margin: 0; padding: 0; display: grid; }
.hwx__wont li { display: grid; gap: 4px; padding: 18px 0 18px 40px; border-top: 1px solid var(--night-rule); position: relative; }
.hwx__wont li:first-child { border-top: 0; padding-top: 0; }
.hwx__wont li::before { content: ''; position: absolute; left: 4px; top: 25px; width: 18px; height: 2.5px; background: #ff8a7a; border-radius: 2px; transform: rotate(45deg); box-shadow: none; }
.hwx__wont li::after { content: ''; position: absolute; left: 4px; top: 25px; width: 18px; height: 2.5px; background: #ff8a7a; border-radius: 2px; transform: rotate(-45deg); }
.hwx__wont li:first-child::before, .hwx__wont li:first-child::after { top: 7px; }
.hwx__wont b { color: #fff; font: 600 1.1rem/1.3 var(--display); }
.hwx__wont span { color: var(--night-soft); }

.modes__try { margin-top: 14px; }

/* Study videos on the Homework help page (2026-10-20): the steps beside a real frame, then the library's facts in one highlighted box. */
.hwx__videos { background: var(--sky); padding-top: clamp(56px, 8vw, 96px); }
.feature + .feature.hwx__videos { padding-top: clamp(56px, 8vw, 96px); }
.hwx__video { position: relative; }
.hwx__video img { aspect-ratio: 16 / 9; }
.hwx__play { position: absolute; left: 50%; top: calc(50% + 15px); display: grid; place-items: center; width: 72px; height: 72px; margin: -36px 0 0 -36px; padding-left: 4px; border-radius: 50%; background: rgba(11, 32, 54, .78); color: #fff; box-shadow: 0 6px 18px rgba(11, 32, 54, .3); }
.hwx__library { margin-top: clamp(32px, 5vw, 56px); padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: var(--card); border: 1.5px solid var(--rule-sky); box-shadow: var(--shadow-soft); }
.hwx__library h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); margin: 0 0 18px; }
.hwx__library ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(20px, 3vw, 36px); }
.hwx__library li { display: grid; gap: 6px; align-content: start; padding-top: 14px; border-top: 3px solid var(--brand); }
.hwx__library b { font: 600 1.08rem/1.3 var(--display); }
.hwx__library span { color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 860px) { .hwx__library ul { grid-template-columns: 1fr; } }

@media (max-width: 1000px) {
  .hero--hw .hero__words { padding-bottom: 0; }
  .hwx__does { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .hwx__wont-in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hwx__does { grid-template-columns: 1fr; gap: 24px; }
  .hwx__phone { width: 62%; padding: 6px; border-radius: 26px; }
  .hwx__phone img { border-radius: 20px; }
  .hwx__peek { display: none; }   /* no room beside the phone at this width */
}

/* --- The show-password eye (layout.mjs passwordBox, site.js) -------------------- */
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 54px; }
.pw__eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ink-soft); cursor: pointer; }
.pw__eye:hover { background: var(--wash); color: var(--ink); }
.pw__eye:focus-visible { outline: 3px solid var(--brand); outline-offset: 0; }
.pw__shut { display: none; }
.pw__eye[aria-pressed='true'] .pw__open { display: none; }
.pw__eye[aria-pressed='true'] .pw__shut { display: block; }
.pw__eye[aria-pressed='true'] { color: var(--link); }

/* --- The Videos tab in Homework help (src/videos.js) ------------------------------ */
.hw__tabs { display: flex; gap: 6px; padding: 10px 18px 0; background: var(--hw-band); border-bottom: 1px solid var(--hw-rule); }
.hw__tabs[hidden] { display: none; }
.hw__tab { min-height: 40px; padding: 0 18px; margin-bottom: -1px; border: 1px solid var(--hw-rule); border-bottom: 0; border-radius: 10px 10px 0 0; background: none; color: var(--hw-soft); font: 600 .92rem var(--display); cursor: pointer; }
.hw__tab[aria-selected='true'] { background: var(--hw-ground); color: var(--ink); border-bottom: 1px solid var(--hw-ground); }
.hw__videos { padding: 18px; display: grid; gap: 14px; align-content: start; }
.hw__videos[hidden] { display: none; }
/* Making a study video (src/videos.js): one plain card above the library. */
.hw__make { width: min(860px, 100%); margin: 0 auto 6px; padding: 18px 20px; display: grid; gap: 12px; border: 1px solid var(--hw-rule); border-radius: 16px; background: var(--card); }
.hw__make[hidden] { display: none; }
.hw__make h2 { margin: 0; color: var(--ink); font: 700 1.2rem/1.2 var(--display); }
.hw__make-lede { margin: 0; color: var(--hw-soft); font-size: .92rem; line-height: 1.5; }
.hw__make-ask textarea { width: 100%; min-height: 64px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--hw-rule); background: var(--paper); color: var(--ink); font: 400 1rem/1.4 var(--body); resize: vertical; }
.hw__make-ask textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--hw-go); }
.hw__places { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.hw__places legend { margin-bottom: 8px; padding: 0; color: var(--ink); font: 600 .92rem var(--display); }
.hw__places-note { flex: 1 0 100%; margin: 0 0 4px; color: var(--hw-soft); font-size: .88rem; line-height: 1.45; }
.hw__look { position: relative; flex: 1 1 200px; cursor: pointer; }
.hw__look input { position: absolute; opacity: 0; pointer-events: none; }
.hw__look-card { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--hw-rule); background: var(--paper); color: var(--ink); }
.hw__look-card b { font: 600 .98rem var(--display); }
.hw__look-card span { color: var(--hw-soft); font-size: .85rem; }
.hw__look input:checked + .hw__look-card { border-color: var(--hw-go); box-shadow: 0 0 0 2px var(--hw-go); }
.hw__look input:focus-visible + .hw__look-card { outline: 3px solid var(--hw-go); outline-offset: 3px; }
/* Who explains it: the buddies in one scrolling row. */
.hw__buddies { display: block; min-inline-size: 0; min-width: 0; }
.hw__buddy-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; }
.hw__buddy { position: relative; flex: 0 0 auto; cursor: pointer; }
.hw__buddy input { position: absolute; opacity: 0; pointer-events: none; }
.hw__buddy-card { display: grid; justify-items: center; gap: 2px; width: 84px; padding: 8px 4px 6px; border-radius: 12px; border: 2px solid var(--hw-rule); background: var(--paper); color: var(--ink); }
.hw__buddy-card img { width: 56px; height: 56px; object-fit: contain; }
.hw__buddy-card b { font: 600 .82rem var(--display); }
.hw__buddy input:checked + .hw__buddy-card { border-color: var(--hw-go); box-shadow: 0 0 0 2px var(--hw-go); }
.hw__buddy input:focus-visible + .hw__buddy-card { outline: 3px solid var(--hw-go); outline-offset: 3px; }

/* Watching a video being made: the place, the buddy saying each line with its card, the steps. */
.hw__studio { width: min(860px, 100%); margin: 0 auto 6px; padding: 18px 20px; display: grid; gap: 12px; border: 1px solid var(--hw-rule); border-radius: 16px; background: var(--card); }
.hw__studio[hidden] { display: none; }
.hw__studio h2 { margin: 0; color: var(--ink); font: 700 1.2rem/1.2 var(--display); }
.hw__studio-kicker { margin: 0; color: var(--hw-soft); font: 600 .82rem var(--display); letter-spacing: .04em; text-transform: uppercase; }
.hw__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--hw-chip); }
.hw__stage-place { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw__stage-place[hidden] { display: none; }
.hw__stage-card { position: absolute; left: 5.7%; top: 9.3%; width: 41.7%; height: 57.4%; opacity: 0; transform: scale(.96); transition: opacity .3s ease, transform .3s ease; }
.hw__stage-card.is-on { opacity: 1; transform: none; }
.hw__stage-card svg { width: 100%; height: 100%; display: block; }
.hw__stage-buddy { position: absolute; left: 74.5%; bottom: 3.7%; height: 55.6%; transform: translateX(-50%); transform-origin: 50% 100%; }
.hw__stage.is-talking .hw__stage-buddy { animation: hw-talk .5s ease-in-out infinite alternate; }
@keyframes hw-talk { from { transform: translateX(-50%) scale(1, 1); } to { transform: translateX(-50%) scale(1.02, .98); } }
.hw__stage-line { position: absolute; left: 4%; right: 34%; bottom: 5%; margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--paper); color: var(--ink); font: 600 clamp(.8rem, 2.2vw, 1rem)/1.35 var(--display); opacity: 0; transition: opacity .3s ease; }
.hw__stage-line.is-on { opacity: 1; }
.hw__bar { height: 10px; border-radius: 999px; background: var(--hw-chip); overflow: hidden; }
.hw__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--hw-go); transition: width 1s linear; }
.hw__steps { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; color: var(--hw-soft); font-size: .88rem; }
.hw__steps li::before { content: '○'; margin-right: 6px; }
.hw__steps li.is-now { color: var(--ink); font-weight: 600; }
.hw__steps li.is-now::before { content: '●'; color: var(--hw-go); }
.hw__steps li.is-done { color: var(--ink); }
.hw__steps li.is-done::before { content: '✓'; color: var(--hw-go); }
.hw__studio-note { margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .hw__stage.is-talking .hw__stage-buddy { animation: none; }
  .hw__stage-card, .hw__stage-line, .hw__bar span { transition: none; }
}

.hw__make-row { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.hw__make-row .hw__btn { margin: 0; border: 0; cursor: pointer; }
.hw__make-row .hw__btn:disabled { background: var(--hw-chip); color: var(--ink); cursor: default; }
.hw__make-note { flex: 1 1 240px; margin: 0; color: var(--ink); font-size: .92rem; line-height: 1.45; }
.hw__make-note.is-refused { color: var(--danger); font-weight: 600; }
.hw__search { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--hw-rule); background: var(--card); color: var(--ink); font: 400 1rem var(--body); }
.hw__search:focus { outline: none; box-shadow: 0 0 0 3px var(--hw-go); }
.hw__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hw__chip { min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--hw-rule); background: var(--card); color: var(--ink); font: 600 .85rem var(--display); cursor: pointer; }
.hw__chip[aria-pressed='true'] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.hw__vnote { margin: 0 auto; color: var(--hw-soft); font-size: .9rem; }
.hw__vnote[hidden] { display: none; }
.hw__vnote a { color: var(--hw-go); font-weight: 600; }
.hw__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.hw__grid[hidden] { display: none; }
.hw__vcard { display: grid; gap: 6px; padding: 0; border: 0; background: none; text-align: left; color: var(--ink); cursor: pointer; border-radius: 12px; }
.hw__vcard:focus-visible { outline: 3px solid var(--hw-go); outline-offset: 4px; }
.hw__vposter { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: var(--hw-chip); }
.hw__vcard:hover .hw__vposter { box-shadow: 0 0 0 2px var(--hw-go); }
.hw__vcard b { font: 600 .98rem/1.3 var(--display); }
.hw__vcard span { color: var(--hw-soft); font-size: .82rem; }
.hw__player { display: grid; gap: 10px; }
.hw__player[hidden] { display: none; }
.hw__player video { width: 100%; max-height: 70vh; border-radius: 14px; background: #000; }
.hw__player h2 { color: var(--ink); font-size: 1.3rem; margin: 4px 0 0; }
.hw__player p { margin: 0; color: var(--hw-soft); font-size: .9rem; }
.hw__back { justify-self: start; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--hw-rule); background: none; color: var(--link); font: 600 .9rem var(--display); cursor: pointer; }
.hw__back:hover { background: var(--hw-chip); }

/* The first-time buddy pick in Homework help (src/homework.js). */
.hw__pick { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 32px 8px; }
.hw__pick[hidden] { display: none; }
.hw__pick h2 { color: var(--ink); font-size: 1.7rem; margin: 0; }
.hw__pick p { color: var(--hw-soft); margin: 0 0 12px; }
.hw__pick-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hw__pick-one { display: grid; justify-items: center; gap: 6px; padding: 14px 18px; border: 1.5px solid var(--hw-rule); border-radius: 18px; background: var(--card); color: var(--ink); font: 600 1rem var(--display); cursor: pointer; }
.hw__pick-one img { width: 110px; height: 110px; object-fit: contain; }
.hw__pick-one:hover { border-color: var(--link); }
.hw__pick-one:focus-visible { outline: 3px solid var(--hw-go); outline-offset: 2px; }
.hw__room:has(.hw__pick:not([hidden])) { align-content: center; }
/* A birthday stays on one line on a phone: three short fields. */
@media (max-width: 560px) { .acct-row.acct-row--3 { grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; } }

/* The footer: the name in the logo's own lettering, white on the navy (packages/assets/logo/sb-lockup-white.png). */
.foot__brand img { width: 220px; height: auto; margin-bottom: 12px; }

/* The bar's left end: the mark, then Home in place of the name (2026-10-19). */
.bar__brand { display: flex; align-items: center; gap: 6px; margin-right: auto; }
.bar__home { margin-right: 0; padding-right: 0; }
.bar__home img { width: 48px; height: 48px; }

/* =======================================================================
 * Dark (2026-10-19). The same page in the dark: navy paper, deeper cards,
 * light ink, a lighter blue for links so they still read. Follows the
 * device unless the visitor chose otherwise with the switch in the footer
 * (layout.mjs, site.js; the choice is applied before the first paint).
 * ======================================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #0f1b2d; --card: #17283f; --sky: #142640; --wash: #132238; --sunk: #132238;
    --ink: #eef4fb; --ink-soft: #b9c8da; --ink-faint: #97abc1;
    --rule: #2a3d57; --rule-sky: #33496a;
    --brand: #2468dc; --brand-deep: #1a56c2; --brand-ink: #ffffff; --brand-tint: #1c3458;
    --link: #8fbaff; --link-deep: #b3d0ff; --focus-ring: #2b4f82; --selection: #2b4f82;
    --night: #0a1526; --night-ink: #dce8f5; --night-soft: #c3d4e6; --night-faint: #9cb2c9; --night-rule: #22354f;
    --device: #060e1b;
    --danger: #ff8a7a; --danger-tint: #fff3f2; --danger-edge: #f0b8b4;
    --mint-ink: #5fd6a3; --ok-tint: #e1f5ec; --ok-ink: #7fe0b4; --warn-tint: #fff3d1; --warn-ink: #ffd27a; --bad-tint: #fde6e4; --bad-ink: #ffa39a;
    --refer-tint: #fff7de; --refer-edge: #f2d27a;
    --shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .35);
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --paper: #0f1b2d; --card: #17283f; --sky: #142640; --wash: #132238; --sunk: #132238;
  --ink: #eef4fb; --ink-soft: #b9c8da; --ink-faint: #97abc1;
  --rule: #2a3d57; --rule-sky: #33496a;
  --brand: #2468dc; --brand-deep: #1a56c2; --brand-ink: #ffffff; --brand-tint: #1c3458;
  --link: #8fbaff; --link-deep: #b3d0ff; --focus-ring: #2b4f82; --selection: #2b4f82;
  --night: #0a1526; --night-ink: #dce8f5; --night-soft: #c3d4e6; --night-faint: #9cb2c9; --night-rule: #22354f;
  --device: #060e1b;
  --danger: #ff8a7a; --danger-tint: #fff3f2; --danger-edge: #f0b8b4;
  --mint-ink: #5fd6a3; --ok-tint: #e1f5ec; --ok-ink: #7fe0b4; --warn-tint: #fff3d1; --warn-ink: #ffd27a; --bad-tint: #fde6e4; --bad-ink: #ffa39a;
  --refer-tint: #fff7de; --refer-edge: #f2d27a;
  --shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 14px 30px rgba(0, 0, 0, .35);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px rgba(0, 0, 0, .3);
  color-scheme: dark;
}
/* The base sheet's own literals, for the pages it still draws. */
.lost { background: var(--sky); }
.signin__problem { color: var(--danger); }
.skip { background: var(--card); color: var(--ink); }

/* The appearance switch in the footer: three radio buttons that read as one control. */
.foot__theme { margin: 18px 0 0; padding: 0; border: 0; min-width: 0; }
.foot__theme legend { font: 600 .95rem/1.4 var(--display); color: #fff; padding: 0; margin-bottom: 8px; }
.foot__theme-row { display: inline-flex; border: 1px solid var(--night-rule); border-radius: 999px; padding: 3px; }
.foot__theme label { position: relative; }
.foot__theme input { position: absolute; opacity: 0; pointer-events: none; }
.foot__theme span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; color: var(--night-soft); font: 600 .9rem/1 var(--display); cursor: pointer; }
.foot__theme input:checked + span { background: var(--night-soft); color: var(--night); }
.foot__theme input:focus-visible + span { outline: 3px solid var(--night-soft); outline-offset: 2px; }

/* The notice bar: the games and the website are still being developed (2026-10-19). Above the top bar; its x hides it on that page only, every fresh page shows it again. */
.notice { background: var(--brand-tint); color: var(--ink); border-bottom: 1px solid var(--rule-sky); }
.notice[hidden] { display: none; }
.notice__in { display: flex; align-items: center; gap: 14px; min-height: 44px; padding-block: 8px; }
.notice__in p { flex: 1; margin: 0; font: 500 .92rem/1.4 var(--display); }
.notice__close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--ink); cursor: pointer; }
.notice__close:hover { background: var(--card); }
/* Phones get the short version of the note (2026-10-21: "please make shorter on phones"). */
.notice__short { display: none; }
@media (max-width: 640px) {
  .notice__long { display: none; }
  .notice__short { display: block; }
  .notice__in { min-height: 0; padding-block: 6px; gap: 8px; }
  .notice__in p { font-size: .85rem; }
}
/* The open menu covers the screen from the top, so the note steps aside and the bar goes back to the top
   (2026-10-21: an empty strip showed above the bar with the menu open). */
body:has(.menu:not([hidden])) .notice { display: none; }
.notice__in p a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* Facebook's logo at the end of the small footer row (2026-10-21). */
.foot__small .foot__social { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-block: -9px; border-radius: 50%; transition: transform .15s ease; }
.foot__small .foot__social:hover { transform: scale(1.08); }
.foot__small .foot__social:focus-visible { outline: 3px solid var(--night-soft); outline-offset: 2px; }
html:not(.js) .notice, html[data-notice='seen'] .notice { display: none; }
/* The games (/play, the bar drawn by webStage.ts): never the note (2026-10-30). Opening the menu used to
   bring it in (the wide-menu rule above), which pushed the bar down under the already-placed menu and over the game. */
html body.sb-app-shell .notice, html body.sb-app-shell:has(.menu:not([hidden])) .notice { display: none !important; }
/* While the notice shows, the bar sits in the page under it instead of floating, and the page tops lose the
   room they keep for a floating bar. */
body:has(.notice:not([hidden])) .bar { position: sticky; top: 0; }
body:has(.notice:not([hidden])) .hero--shots { padding-top: 48px; }
body:has(.notice:not([hidden])) .banner { padding-top: 44px; }
body:has(.notice:not([hidden])) .modes { padding-top: 40px; }
body:has(.notice:not([hidden])) .acct { padding-top: 32px; }
body:has(.notice:not([hidden])) .acct__side { top: 92px; }
body:has(.notice:not([hidden])) .lost { padding-top: 60px; }

/* The SB lockup in the bar: navy on the light page, white on the dark one, following the same switch as the tokens. */
.bar__home img.bar__mark { width: auto; height: 34px; max-width: none; }
@media (max-width: 420px) { .bar__home img.bar__mark { height: 28px; } }
.bar__mark--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .bar__mark--light { display: none; }
  :root:not([data-theme='light']) .bar__mark--dark { display: block; }
}
:root[data-theme='dark'] .bar__mark--light { display: none; }
:root[data-theme='dark'] .bar__mark--dark { display: block; }

/* =========================================================================
 * The learning streak (docs/streaks.md, src/streak-ui.js, 2026-10-20): a flame
 * and a number, lit orange once today is done and a quiet blue-grey while it
 * waits. Solid colours only; no faded text.
 * ======================================================================= */
:root { --streak: #e8590c; --streak-tint: #fff1e6; --streak-ink: #8a3200; --streak-wait: #6b819a; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --streak: #ff8a3d; --streak-tint: #fff1e6; --streak-ink: #ffc49a; --streak-wait: #97abc1; }
}
:root[data-theme='dark'] { --streak: #ff8a3d; --streak-tint: #fff1e6; --streak-ink: #ffc49a; --streak-wait: #97abc1; }

.streak { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--wash); border: 1px solid var(--rule); color: var(--ink); font: 700 1rem var(--display); line-height: 1; white-space: nowrap; vertical-align: middle; }
.streak__flame { color: var(--streak-wait); flex: none; }
.streak--lit { background: var(--streak-tint); border-color: var(--streak); color: var(--streak-ink); }
.streak--lit .streak__flame { color: var(--streak); }
.streak--small { padding: 2px 8px 2px 5px; font-size: .85rem; margin-left: 8px; }
.streak--small .streak__flame { width: 16px; height: 16px; }
.streak--bump { animation: streak-bump .6s ease-out; }
@keyframes streak-bump { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .streak--bump { animation: none; } }

.streak-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.streak-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--streak-wait); }
.streak-dots i.on { background: var(--streak); border-color: var(--streak); }

/* Homework help's header: the flame and today's three dots, beside the child picker. */
.hw__streak { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.hw__streak[hidden] { display: none; }
.hw__streak + .hw__who { margin-left: 0; }
@media (max-width: 600px) { .hw__streak .streak-dots { display: none; } }

/* Start learning: one line under who is learning. */
.modes__streak { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; color: var(--ink-soft); font-weight: 600; }
.modes__streak[hidden] { display: none; }

/* The parent dashboard's streak block. */
.pd__streak-head { display: flex; align-items: center; gap: 12px; }
.pd__streak-head h3 { margin: 0; }
.pd__days { display: flex; gap: 10px; list-style: none; margin: 14px 0 6px; padding: 0; flex-wrap: wrap; }
.pd__day { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .8rem; color: var(--ink-soft); min-width: 34px; }
.pd__day i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--rule); background: var(--paper); }
.pd__day--done i { background: var(--streak); border-color: var(--streak); }
.pd__day--rest i { background: var(--brand-tint); border-color: var(--brand); }
.pd__day--today i { border-color: var(--streak); border-style: dashed; }

/* A milestone: a small card in the middle of the page, one button. */
.streak-win { border: 0; border-radius: 22px; padding: 28px 26px 22px; max-width: min(360px, calc(100vw - 32px)); background: var(--card); color: var(--ink); text-align: center; box-shadow: var(--shadow); }
.streak-win::backdrop { background: rgba(11, 32, 54, .45); }
.streak-win__flame { display: inline-flex; flex-direction: column; align-items: center; color: var(--streak); }
.streak-win__flame .streak__flame { width: 72px; height: 72px; color: var(--streak); animation: streak-bump .8s ease-out; }
.streak-win__flame b { font: 800 2rem var(--display); color: var(--streak-ink); margin-top: -4px; }
.streak-win h2 { margin: 6px 0 8px; font-size: 1.4rem; }
.streak-win p { margin: 0 0 6px; color: var(--ink-soft); }
.streak-win__prize { color: var(--ink) !important; font-weight: 600; }
.streak-win__go { margin-top: 14px; min-height: 46px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font: 700 1rem var(--display); cursor: pointer; }
.streak-win__go:hover { background: var(--brand-deep); }
@media (prefers-reduced-motion: reduce) { .streak-win__flame .streak__flame { animation: none; } }

/* Sign-up done: "Want to play now?" / "Want homework help now?" (src/signup.js offerStart). One big blue button. */
.start-now { border: 0; border-radius: 22px; padding: 22px 26px 18px; width: min(380px, calc(100vw - 32px)); background: var(--card); color: var(--ink); text-align: center; box-shadow: var(--shadow); }
.start-now::backdrop { background: rgba(11, 32, 54, .5); }
.start-now__buddy { display: block; width: 140px; height: 140px; margin: 0 auto 4px; object-fit: contain; }
.start-now h2 { margin: 0 0 6px; font: 700 1.6rem var(--display); color: var(--ink); }
.start-now p { margin: 0 0 18px; color: var(--ink); font-size: 1.05rem; }
.start-now__go { display: flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font: 700 1.2rem var(--display); text-decoration: none; }
.start-now__go:hover { background: var(--brand-deep); }
/* First visit: "Want to sign up?" with the three roles (layout.mjs welcomeAsk, site.js). */
.welcome-ask { padding: 0; border: 0; border-radius: 22px; width: min(380px, calc(100vw - 32px)); background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.welcome-ask::backdrop { background: rgba(11, 32, 54, .5); }
.welcome-ask__card { padding: 20px 22px 14px; text-align: center; }
.welcome-ask__buddy { display: block; width: 120px; height: 120px; margin: 0 auto 2px; object-fit: contain; }
.welcome-ask h2 { margin: 0 0 4px; font: 700 1.6rem var(--display); color: var(--ink); }
.welcome-ask p { margin: 0 0 16px; color: var(--ink); font-size: 1.05rem; }
.welcome-ask__roles { display: grid; gap: 10px; }
.welcome-ask__go { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; padding: 6px 20px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font: 700 1.15rem var(--display); text-decoration: none; line-height: 1.15; }
.welcome-ask__go small { font: 600 .82rem var(--body); color: var(--brand-ink); }
.welcome-ask__go:hover { background: var(--brand-deep); }
.welcome-ask__later { margin-top: 10px; padding: 8px 12px; border: 0; background: none; color: var(--ink); font: 700 1rem var(--body); text-decoration: underline; cursor: pointer; }
.start-now__later { display: inline-block; margin-top: 12px; padding: 8px 12px; color: var(--ink); font-weight: 700; text-decoration: underline; }

/* =========================================================================
 * Scrollbars (2026-10-20): one quiet light-blue pill everywhere on the
 * website - the page, the class table, the buddy row - in place of the
 * browser's grey bar with arrows. Brand blue under the pointer; darker in
 * the dark theme. Chrome, Edge and Safari draw the pill; Firefox, which has
 * no pill, gets its thin bar in the same colours.
 * ======================================================================= */
:root { --scroll-thumb: #a9c6e6; --scroll-thumb-hover: var(--brand); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --scroll-thumb: #3f5b80; --scroll-thumb-hover: #5b8fe6; } }
:root[data-theme='dark'] { --scroll-thumb: #3f5b80; --scroll-thumb-hover: #5b8fe6; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); background-clip: padding-box; border: 3px solid transparent; border-radius: 999px; min-height: 40px; min-width: 40px; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--scroll-thumb-hover); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
}

/* Plans (2026-10-20): each card names its plan, the price under it. Pro, the one we suggest, has a blue
 * outline and a small "Our pick" tag beside its name. */
.plan__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.plan .plan__name { margin: 0; font: 700 1.5rem/1.15 var(--display); color: var(--ink); }
.plan__pick { padding: 4px 10px; border-radius: 999px; background: var(--brand); color: var(--brand-ink); font: 700 .8rem/1 var(--display); letter-spacing: .02em; }
.plan__cost { margin: 0 0 14px; font: 800 2rem/1.1 var(--display); color: var(--ink); }
.plan__cost small { font: 600 1rem/1 var(--body); color: var(--ink-soft); }
.plan--featured { border: 2px solid var(--brand); box-shadow: 0 0 0 4px var(--brand-tint); }
.plans .plan { display: flex; flex-direction: column; align-items: flex-start; }
.plans .plan .btn { margin-top: auto; }
.plans .plan .ticks { margin-bottom: 20px; }

/* =========================================================================
 * Tier cards on Plans (2026-10-20). Our own look, not Prodigy's: a flat
 * colour cap per plan (sky for Basic, brand blue for Pro, sunshine for
 * Ultimate) with a buddy leaning over it, a big rounded price, and two tiles
 * for what really differs - the children (one buddy face each) and the study
 * videos a month. Pro sits a little higher with an "Our pick" tag.
 * ======================================================================= */
:root { --tier-basic: #dcefff; --tier-basic-ink: #0f2742; --tier-ultimate: #ffd45c; --tier-ultimate-ink: #3d2c00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --tier-basic: #dcefff; --tier-basic-ink: #0f2742; --tier-ultimate: #ffd45c; --tier-ultimate-ink: #3d2c00; } }
:root[data-theme='dark'] { --tier-basic: #dcefff; --tier-basic-ink: #0f2742; --tier-ultimate: #ffd45c; --tier-ultimate-ink: #3d2c00; }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; max-width: 1080px; margin: 28px auto 0; }
/* One plan on sale (Basic alone while Homework help is off, core features.ts): one card, in the middle. */
.tiers:has(> .tier:only-child) { grid-template-columns: minmax(0, 420px); justify-content: center; }
.tier { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow-soft); }
.tier__cap { position: relative; display: flex; align-items: flex-end; min-height: 92px; padding: 22px 24px 18px; border-radius: 23px 23px 0 0; background: var(--tier-basic); color: var(--tier-basic-ink); }
.tier--pro .tier__cap { background: var(--brand); color: var(--brand-ink); }
.tier--ultimate .tier__cap { background: var(--tier-ultimate); color: var(--tier-ultimate-ink); }
.tier__name { margin: 0; color: inherit; font: 700 1.9rem/1 var(--headline); }
.tier__buddy { position: absolute; right: 14px; bottom: -14px; width: 96px; height: 96px; object-fit: contain; pointer-events: none; }
.tier__pick { position: absolute; z-index: 1; top: -14px; left: 50%; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px; background: var(--sun); color: #3d2c00; font: 700 .85rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 0 3px var(--card); }
.tier--pick { border: 2px solid var(--brand); box-shadow: 0 0 0 6px var(--brand-tint), var(--shadow); }
@media (min-width: 900px) { .tier--pick { transform: translateY(-12px); } }

.tier__body { display: flex; flex-direction: column; flex: 1; padding: 26px 24px 24px; }
.tier__price { display: flex; align-items: flex-start; gap: 1px; margin: 0; color: var(--ink); font-family: var(--headline); line-height: 1; }
.tier__price b { font-size: 3.4rem; font-weight: 700; letter-spacing: -.02em; }
.tier__dollar, .tier__cents { font-size: 1.5rem; font-weight: 700; margin-top: 6px; }
.tier__per { align-self: flex-end; margin: 0 0 8px 8px; font: 600 1rem/1 var(--body); color: var(--ink-soft); }
.tier__small { margin: 8px 0 18px; color: var(--ink-soft); font-size: .9rem; }

.tier__tiles { display: grid; gap: 10px; margin-bottom: 18px; }
.tier__tile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--wash); border: 1px solid var(--rule); color: var(--ink); }
.tier--pro .tier__tile { background: var(--brand-tint); border-color: var(--rule-sky); }
.tier--ultimate .tier__tile { background: #fff6dc; border-color: #f4dc95; }
.tier__tile > span:last-child { display: grid; gap: 2px; font-size: .85rem; color: var(--ink-soft); line-height: 1.35; }
.tier__tile b { color: var(--ink); font: 700 1rem/1.25 var(--display); }
.tier__faces { display: flex; flex-wrap: wrap; flex: none; max-width: 104px; row-gap: 2px; }
.tier__faces img { width: 28px; height: 28px; margin-right: -8px; border-radius: 50%; background: var(--card); box-shadow: 0 0 0 2px var(--card); object-fit: cover; }
.tier__faces img:nth-child(5n) { margin-right: 0; }
.tier__reel { flex: none; width: 34px; height: 34px; color: var(--brand); }
.tier--ultimate .tier__reel { color: #b07d00; }

.tier__ticks { margin: 0 0 22px; }
.tier .btn { margin-top: auto; align-self: stretch; justify-content: center; text-align: center; }

@media (max-width: 899px) {
  .tiers { grid-template-columns: minmax(0, 520px); justify-content: center; gap: 36px; }
}
@media (prefers-reduced-motion: no-preference) {
  .tier { transition: transform .2s ease, box-shadow .2s ease; }
  .tier:hover { box-shadow: var(--shadow); }
}

/* The Plans tab: with or without the video maker (2026-10-20). Two radio buttons drawn as one pill;
 * CSS shows the matching set of cards, so it works with no script. */
.plans-switch { display: flex; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto 40px; padding: 5px; border: 1px solid var(--rule); border-radius: 999px; background: var(--wash); }
.plans-switch input { position: absolute; opacity: 0; pointer-events: none; }
.plans-switch label { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; color: var(--ink-soft); font: 700 .98rem/1.1 var(--display); cursor: pointer; text-align: center; }
.plans-switch input:checked + label { background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow-soft); }
.plans-switch input:focus-visible + label { outline: 3px solid var(--focus-ring, var(--brand)); outline-offset: 2px; }
.plans-switch__save { padding: 3px 9px; border-radius: 999px; background: var(--sun); color: #3d2c00; font: 700 .75rem/1 var(--display); white-space: nowrap; }
.tiers--plain { display: none; }

/* The teachers' page's printable packs (pages/05b-teachers.mjs): a row of the first sheets beside the words. */
.packs { display: grid; gap: 24px; margin-top: 28px; }
.pack { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.pack__sheets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pack__sheets img { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--rule); background: #fff; box-shadow: var(--shadow-soft); }
.pack__words h3 { margin: 0 0 8px; font: 700 1.5rem/1.15 var(--headline); }
.pack__words p { margin: 0; }
@media (max-width: 760px) { .pack { grid-template-columns: 1fr; } }
.plans-pick:has(#plan-videos-off:checked) .tiers--videos { display: none; }
.plans-pick:has(#plan-videos-off:checked) .tiers--plain { display: grid; }
.tier__tile--off .tier__reel { color: var(--ink-faint); }
@media (max-width: 520px) {
  .plans-switch { width: 100%; }
  .plans-switch label { flex: 1; justify-content: center; flex-wrap: wrap; padding: 6px 10px; font-size: .9rem; }
}
/* Sign-up's plan step: the same tab swaps each plan's price (with or without the video maker). */
.acct-switch { margin: 4px 0 16px; }
.acct-plan__price--plain { display: none; }
[data-step="plan"]:has(#su-videos-off:checked) .acct-plan__price--videos { display: none; }
[data-step="plan"]:has(#su-videos-off:checked) .acct-plan__price--plain { display: inline; }

/* =======================================================================
 * The classroom dashboard preview's charts (Schools page, 17-schools.mjs,
 * 2026-10-20): a ring, a trend line, skill bars and a heatmap. Flat colors
 * only; green, yellow and red match the parent dashboard's, and every color
 * is named in a legend or a label beside it.
 * ======================================================================= */
:root { --chart-good: #26a96c; --chart-mid: #ffc23d; --chart-bad: #ec6250; --chart-empty: #dde6ef; --chart-line: #1763d6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --chart-good: #4cc98d; --chart-mid: #ffd166; --chart-bad: #ff7b6b; --chart-empty: #36506f; --chart-line: #8fbaff; }
}
:root[data-theme='dark'] { --chart-good: #4cc98d; --chart-mid: #ffd166; --chart-bad: #ff7b6b; --chart-empty: #36506f; --chart-line: #8fbaff; }

.clsx { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); }
.clsx__panel { margin: 0; padding: 22px 28px 24px; background: var(--card); display: grid; gap: 14px; align-content: start; min-width: 0; }
.clsx__panel figcaption h4 { margin: 0 0 2px; font: 600 1.05rem/1.3 var(--display); color: var(--ink); }
.clsx__panel figcaption p { margin: 0; color: var(--ink-soft); font-size: .9rem; }

.clsx__keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink); font-size: .92rem; }
.clsx__keys li { display: flex; align-items: center; gap: 8px; }
.clsx__keys--row { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-soft); font-size: .85rem; }
.clsx__key { flex: none; width: 12px; height: 12px; border-radius: 3px; }
.clsx__key--good, .clsx__cell--good, .clsx__fill--good { background: var(--chart-good); }
.clsx__key--mid, .clsx__cell--mid, .clsx__fill--mid { background: var(--chart-mid); }
.clsx__key--bad, .clsx__cell--bad, .clsx__fill--bad { background: var(--chart-bad); }
.clsx__key--empty, .clsx__cell--empty { background: var(--chart-empty); }

.clsx__ring { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.clsx__ring-pic { position: relative; width: 132px; height: 132px; flex: none; }
.clsx__ring-pic svg { width: 100%; height: 100%; display: block; }
.clsx__ring-pic p { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; }
.clsx__ring-pic b { font: 700 1.35rem/1.1 var(--display); color: var(--ink); }
.clsx__ring-pic span { font-size: .82rem; color: var(--ink-soft); }
.clsx__arc { fill: none; stroke-width: 18; }
.clsx__arc--good { stroke: var(--chart-good); }
.clsx__arc--bad { stroke: var(--chart-bad); }
.clsx__arc--empty { stroke: var(--chart-empty); }

.clsx__trend { width: 100%; height: auto; display: block; max-height: 160px; }
.clsx__base { stroke: var(--rule); stroke-width: 1; }
.clsx__line { fill: none; stroke: var(--chart-line); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.clsx__dot { fill: var(--chart-line); }
.clsx__axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; color: var(--ink-soft); font-size: .85rem; }
.clsx__axis b { color: var(--ink); }

.clsx__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.clsx__bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .92rem; }
.clsx__bar-head b { font-weight: 600; color: var(--ink); }
.clsx__word { font: 600 .8rem/1.4 var(--display); white-space: nowrap; }
.clsx__word--good { color: var(--ok-ink); }
.clsx__word--mid { color: var(--warn-ink); }
.clsx__word--bad { color: var(--bad-ink); }
.clsx__bar-line { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.clsx__track { flex: 1; height: 12px; border-radius: 6px; background: var(--wash); border: 1px solid var(--rule); overflow: hidden; }
.clsx__fill { display: block; height: 100%; border-radius: 6px; }
.clsx__pct { flex: none; min-width: 72px; text-align: right; color: var(--ink-soft); font-size: .85rem; font-variant-numeric: tabular-nums; }

.clsx__heat { display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr)); gap: 4px; align-items: center; }
.clsx__day { text-align: center; color: var(--ink-soft); font-size: .8rem; }
.clsx__who { color: var(--ink); font-size: .9rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clsx__cell { height: 26px; border-radius: 5px; }

@media (max-width: 760px) {
  .clsx { grid-template-columns: 1fr; }
  .clsx__panel { padding: 20px 18px 22px; }
}

/* =========================================================================
 * Homework help, redesigned (2026-10-20). The owner: "make them look better, more engaging, easy to navigate, have
 * the study video creator foldable, add color and some effects". The same light-blue flat world: colour comes
 * from a small set of flat tones (one per starter and per subject), the buddy sits beside its words, and the
 * motion is one family: things rise into place, a little, with a fast ease-out. No gradients.
 * ========================================================================= */
.hw {
  --tone-blue: #e5f0ff;   --tone-blue-ink: #0e4fb2;   --tone-blue-solid: #1763d6;
  --tone-mint: #dff5ea;   --tone-mint-ink: #0a6646;   --tone-mint-solid: #12a06b;
  --tone-coral: #ffe7df;  --tone-coral-ink: #a3360f;  --tone-coral-solid: #f0643c;
  --tone-sun: #fff1c9;    --tone-sun-ink: #6e4d00;    --tone-sun-solid: #ffc83d;
  --tone-teal: #daf3f1;   --tone-teal-ink: #0b6660;   --tone-teal-solid: #14a39a;
  --tone-slate: #e3ebf4;  --tone-slate-ink: #2b4766;  --tone-slate-solid: #4a6d93;
  --tone-orange: #ffeedd; --tone-orange-ink: #8a3d00; --tone-orange-solid: #f08a24;
  --hw-ease: cubic-bezier(.2, .8, .2, 1);
  --hw-lift: 0 2px 4px rgba(15, 39, 66, .06), 0 12px 24px rgba(15, 39, 66, .1);
  --hw-banner: #ffc83d; --hw-banner-hover: #ffd35f; --hw-banner-ink: #0f2742;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hw {
    --tone-blue: #e5f0ff;   --tone-blue-ink: #0e4fb2;   --tone-blue-solid: #4a8cf0;
    --tone-mint: #dff5ea;   --tone-mint-ink: #0a6646;   --tone-mint-solid: #2fbf86;
    --tone-coral: #ffe7df;  --tone-coral-ink: #a3360f;  --tone-coral-solid: #ff7a52;
    --tone-sun: #fff1c9;    --tone-sun-ink: #6e4d00;    --tone-sun-solid: #ffc83d;
    --tone-teal: #daf3f1;   --tone-teal-ink: #0b6660;   --tone-teal-solid: #2bbfb3;
    --tone-slate: #e3ebf4;  --tone-slate-ink: #2b4766;  --tone-slate-solid: #6f93bb;
    --tone-orange: #ffeedd; --tone-orange-ink: #8a3d00; --tone-orange-solid: #ff9a3d;
    --hw-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 24px rgba(0, 0, 0, .35);
    --hw-banner: #ffc83d; --hw-banner-hover: #ffd35f; --hw-banner-ink: #0f2742;
  }
}
:root[data-theme='dark'] .hw {
  --tone-blue: #e5f0ff;   --tone-blue-ink: #0e4fb2;   --tone-blue-solid: #4a8cf0;
  --tone-mint: #dff5ea;   --tone-mint-ink: #0a6646;   --tone-mint-solid: #2fbf86;
  --tone-coral: #ffe7df;  --tone-coral-ink: #a3360f;  --tone-coral-solid: #ff7a52;
  --tone-sun: #fff1c9;    --tone-sun-ink: #6e4d00;    --tone-sun-solid: #ffc83d;
  --tone-teal: #daf3f1;   --tone-teal-ink: #0b6660;   --tone-teal-solid: #2bbfb3;
  --tone-slate: #e3ebf4;  --tone-slate-ink: #2b4766;  --tone-slate-solid: #6f93bb;
  --tone-orange: #ffeedd; --tone-orange-ink: #8a3d00; --tone-orange-solid: #ff9a3d;
  --hw-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 12px 24px rgba(0, 0, 0, .35);
  --hw-banner: #ffc83d; --hw-banner-hover: #ffd35f; --hw-banner-ink: #0f2742;
}
.hw__icon { display: block; flex: none; }

/* --- Tabs: one pill switch under the head ------------------------------------------------------------------ */
.hw__tabs { justify-content: center; gap: 0; padding: 10px 18px 12px; }
.hw__tabs > .hw__tab:first-child { border-radius: 999px 0 0 999px; }
.hw__tabs > .hw__tab:last-child { border-radius: 0 999px 999px 0; }
.hw__tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 132px; justify-content: center; padding: 0 20px; margin: 0;
  border: 1.5px solid var(--rule); background: var(--wash); color: var(--ink-soft); font: 600 .95rem var(--display);
  transition: background-color .2s var(--hw-ease), color .2s var(--hw-ease), border-color .2s var(--hw-ease); }
.hw__tab + .hw__tab { border-left: 0; }
.hw__tab:hover { color: var(--ink); background: var(--card); }
.hw__tab[aria-selected='true'] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.hw__tab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; position: relative; z-index: 1; }

/* --- The empty chat: the buddy on a sky disc, gently floating, and colour-coded starters -------------------- */
.hw__empty { gap: 10px; padding: 28px 8px 20px; }
.hw__hello-wrap { display: grid; place-items: center; width: 176px; height: 176px; border-radius: 50%; background: var(--sky); box-shadow: inset 0 0 0 10px var(--card); margin-bottom: 4px; }
.hw__hello { width: 150px; height: 150px; animation: hw-float 3.6s ease-in-out infinite alternate; }
@keyframes hw-float { from { transform: translateY(4px); } to { transform: translateY(-6px); } }
.hw__empty h2 { font: 700 clamp(1.6rem, 3vw, 2rem)/1.15 var(--headline); text-wrap: balance; }
.hw__empty p { font-size: 1rem; text-wrap: pretty; }
.hw__starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(640px, 100%); max-width: none; margin-top: 6px; }
.hw__starter { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 16px; text-align: left; border-radius: 18px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); cursor: pointer;
  box-shadow: var(--shadow-soft); transition: transform .25s var(--hw-ease), box-shadow .25s var(--hw-ease), border-color .25s var(--hw-ease); }
.hw__starter-icon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 14px; background: var(--tone, var(--tone-blue)); color: var(--tone-ink, var(--tone-blue-ink)); transition: transform .3s var(--hw-ease); }
.hw__starter-text { display: grid; gap: 1px; min-width: 0; }
.hw__starter-text b { font: 600 1rem/1.25 var(--display); }
.hw__starter-text span { color: var(--ink-soft); font: 400 .86rem/1.35 var(--body); }
.hw__starter:hover { transform: translateY(-2px); border-color: var(--tone-solid, var(--brand)); box-shadow: var(--hw-lift); }
.hw__starter:hover .hw__starter-icon { transform: rotate(-6deg) scale(1.06); }
.hw__starter:active { transform: translateY(0); }
.hw__starter:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hw__starter--mint { --tone: var(--tone-mint); --tone-ink: var(--tone-mint-ink); --tone-solid: var(--tone-mint-solid); }
.hw__starter--blue { --tone: var(--tone-blue); --tone-ink: var(--tone-blue-ink); --tone-solid: var(--tone-blue-solid); }
.hw__starter--coral { --tone: var(--tone-coral); --tone-ink: var(--tone-coral-ink); --tone-solid: var(--tone-coral-solid); }
.hw__starter--sun { --tone: var(--tone-sun); --tone-ink: var(--tone-sun-ink); --tone-solid: var(--tone-sun-solid); }

/* --- Messages: the buddy's face beside its bubble; each one rises into place ------------------------------- */
.hw__log { gap: 14px; }
.hw__msg { scroll-margin-bottom: 120px; display: flex; align-items: flex-end; gap: 10px; max-width: min(700px, 94%); padding: 0; border: 0; border-radius: 0; background: none; animation: hw-rise .38s var(--hw-ease) both; }
.hw__msg--buddy { justify-self: start; background: none; border: 0; }
.hw__msg--user { justify-self: end; flex-direction: row-reverse; background: none; color: inherit; }
.hw__msg .hw__msg-face { width: 40px; height: 40px; max-width: none; margin: 0; flex: none; object-fit: contain; border-radius: 50%; background: var(--sky); box-shadow: inset 0 0 0 1.5px var(--rule-sky); }
.hw__bubble { min-width: 0; padding: 12px 16px; border-radius: 20px; font-size: 1rem; line-height: 1.6; }
.hw__msg--buddy .hw__bubble { background: var(--card); color: var(--ink); border: 1px solid var(--rule); border-bottom-left-radius: 6px; box-shadow: var(--shadow-soft); }
.hw__msg--user .hw__bubble { background: var(--brand); color: var(--brand-ink); border-bottom-right-radius: 6px; }
.hw__msg--buddy .hw__bubble b { color: var(--link); }
@keyframes hw-rise { from { opacity: .2; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.hw__dots { display: inline-flex; gap: 5px; padding: 6px 2px; }
.hw__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); animation: hw-dot 1.1s var(--hw-ease) infinite; }
.hw__dots i:nth-child(2) { animation-delay: .15s; }
.hw__dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hw-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-6px); opacity: 1; } }

/* --- The composer: one rounded bar, the camera and send inside it ------------------------------------------- */
.hw__compose { border-top: 0; background: var(--hw-ground); padding-top: 8px; }
.hw__row { align-items: flex-end; gap: 6px; padding: 6px; border-radius: 26px; background: var(--card); border: 1.5px solid var(--rule); box-shadow: var(--hw-lift); transition: border-color .2s var(--hw-ease), box-shadow .2s var(--hw-ease); }
.hw__row:focus-within { border-color: var(--brand); box-shadow: var(--hw-lift), 0 0 0 4px var(--focus-ring); }
.hw__row textarea { min-height: 44px; padding: 10px 6px; border: 0; border-radius: 0; background: none; }
.hw__row textarea:focus { box-shadow: none; }
.hw__cam, .hw__send { width: 44px; height: 44px; border-radius: 50%; transition: transform .2s var(--hw-ease), background-color .2s var(--hw-ease); }
.hw__cam { background: var(--tone-blue); color: var(--tone-blue-ink); box-shadow: none; }
.hw__cam:hover { transform: scale(1.06); }
.hw__send:hover:not(:disabled) { transform: scale(1.06); }

/* --- Videos: the maker folds; its banner is the brightest thing on the page --------------------------------- */
.hw__videos { gap: 18px; }
.hw__fold { width: min(860px, 100%); margin: 0 auto; border-radius: 22px; overflow: hidden; background: var(--card); border: 1.5px solid var(--rule); box-shadow: var(--shadow-soft); interpolate-size: allow-keywords; }
.hw__fold[hidden] { display: none; }
.hw__fold-head { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 14px; list-style: none; cursor: pointer; background: var(--hw-banner); color: var(--hw-banner-ink); transition: background-color .2s var(--hw-ease); }
.hw__fold-head::-webkit-details-marker { display: none; }
.hw__fold-head:hover { background: var(--hw-banner-hover); }
.hw__fold-head:focus-visible { outline: 3px solid var(--brand); outline-offset: -3px; }
.hw__fold-buddy { width: 64px; height: 64px; flex: none; object-fit: contain; border-radius: 50%; background: #fff7dc; box-shadow: inset 0 0 0 3px rgba(15, 39, 66, .08); transition: transform .4s var(--hw-ease); }
.hw__fold-head:hover .hw__fold-buddy { transform: rotate(-5deg) scale(1.05); }
.hw__fold-titles { display: grid; gap: 2px; flex: 1; min-width: 0; }
.hw__fold-titles b { font: 700 1.35rem/1.15 var(--headline); }
.hw__fold-titles span { font: 500 .92rem/1.35 var(--body); color: #3b3313; }
.hw__fold-chev { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(15, 39, 66, .1); transition: transform .35s var(--hw-ease); }
.hw__fold[open] .hw__fold-chev { transform: rotate(180deg); }
.hw__fold::details-content { block-size: 0; overflow: clip; transition: block-size .42s var(--hw-ease), content-visibility .42s allow-discrete; }
.hw__fold[open]::details-content { block-size: auto; }
.hw__fold .hw__make { width: auto; margin: 0; padding: 18px 22px 22px; gap: 18px; border: 0; border-radius: 0; background: none; }
.hw__make-lede { font-size: .95rem; max-width: 62ch; }
.hw__step { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0; color: var(--ink); font: 600 1rem var(--display); }
.hw__step i { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font: 700 .88rem/1 var(--display); font-style: normal; font-variant-numeric: tabular-nums; }
.hw__make-ask { display: block; }
.hw__make-ask textarea { min-height: 72px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--wash); font-size: 1.02rem; transition: border-color .2s var(--hw-ease), box-shadow .2s var(--hw-ease), background-color .2s var(--hw-ease); }
.hw__make-ask textarea:focus { background: var(--card); border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus-ring); }
.hw__places { gap: 12px; }
.hw__places legend.hw__step { float: none; width: 100%; }
.hw__look-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--card); transition: border-color .2s var(--hw-ease), background-color .2s var(--hw-ease), transform .25s var(--hw-ease); }
.hw__look-card > span:last-child { display: grid; gap: 1px; }
.hw__look-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: var(--tone-sun); color: var(--tone-sun-ink); }
.hw__look-card--realistic .hw__look-icon { background: var(--tone-teal); color: var(--tone-teal-ink); }
.hw__look:hover .hw__look-card { transform: translateY(-1px); border-color: var(--rule-sky); }
.hw__look input:checked + .hw__look-card { border-color: var(--brand); background: var(--brand-tint); box-shadow: none; }
.hw__buddy-row { gap: 10px; padding: 6px 2px 10px; scroll-snap-type: x proximity; padding-bottom: 14px; }
/* The buddy row's own scrollbar: a light-blue track with a blue pill to drag (2026-10-20: "make a custom scroll under the buddies"). */
.hw__buddy-row::-webkit-scrollbar { height: 10px; }
.hw__buddy-row::-webkit-scrollbar-track { background: var(--tone-blue); border-radius: 999px; margin-inline: 4px; }
.hw__buddy-row::-webkit-scrollbar-thumb { background: var(--brand); border: 2px solid var(--tone-blue); border-radius: 999px; min-width: 48px; }
.hw__buddy-row::-webkit-scrollbar-thumb:hover, .hw__buddy-row::-webkit-scrollbar-thumb:active { background: var(--brand-deep); }
.hw__buddy-row::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) { .hw__buddy-row { scrollbar-width: thin; scrollbar-color: var(--brand) var(--tone-blue); } }
.hw__buddy { scroll-snap-align: start; }
.hw__buddy-card { width: 88px; padding: 10px 4px 8px; border-radius: 16px; border: 1.5px solid var(--rule); background: var(--card); transition: border-color .2s var(--hw-ease), background-color .2s var(--hw-ease), transform .25s var(--hw-ease); }
.hw__buddy-card img { transition: transform .35s var(--hw-ease); }
.hw__buddy:hover .hw__buddy-card { transform: translateY(-2px); }
.hw__buddy input:checked + .hw__buddy-card { border-color: var(--brand); background: var(--brand-tint); box-shadow: none; }
.hw__buddy input:checked + .hw__buddy-card img { transform: scale(1.1) translateY(-2px); }
.hw__make-row .hw__btn { min-height: 52px; padding: 0 28px; border-radius: 999px; font-size: 1.02rem; box-shadow: var(--hw-lift); transition: transform .2s var(--hw-ease), background-color .2s var(--hw-ease); }
.hw__make-row .hw__btn:hover:not(:disabled) { background: var(--brand-deep); transform: translateY(-1px); }

/* --- Watching it being made ---------------------------------------------------------------------------------- */
.hw__studio { border-radius: 22px; border-width: 1.5px; box-shadow: var(--hw-lift); animation: hw-rise .4s var(--hw-ease) both; }
.hw__studio h2 { font: 700 1.4rem/1.2 var(--headline); }
.hw__stage { border-radius: 16px; }
.hw__bar { height: 12px; background: var(--tone-blue); }
.hw__steps { gap: 8px 18px; }
.hw__steps li { display: inline-flex; align-items: center; gap: 8px; }
.hw__steps li::before { content: ''; width: 16px; height: 16px; margin: 0; flex: none; border-radius: 50%; border: 2px solid var(--rule-sky); background: var(--card); box-sizing: border-box; }
.hw__steps li.is-now::before { content: ''; border-color: var(--brand); background: var(--brand); box-shadow: 0 0 0 4px var(--focus-ring); animation: hw-pulse 1.4s var(--hw-ease) infinite; }
.hw__steps li.is-done::before { content: ''; border-color: var(--tone-mint-solid); background: var(--tone-mint-solid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.3 2.2 2.2 4.8-5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
@keyframes hw-pulse { 0%, 100% { box-shadow: 0 0 0 3px var(--focus-ring); } 50% { box-shadow: 0 0 0 6px var(--focus-ring); } }

/* --- The library ---------------------------------------------------------------------------------------------- */
.hw__lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: min(860px, 100%); margin: 8px auto 0; }
.hw__lib-head h2 { margin: 0; color: var(--ink); font: 700 1.5rem/1.2 var(--headline); }
.hw__lib-head .hw__vnote { width: auto; margin: 0; padding: 4px 12px; border-radius: 999px; background: var(--wash); border: 1px solid var(--rule); color: var(--ink-soft); font: 600 .82rem var(--display); font-variant-numeric: tabular-nums; }
.hw__lib-head .hw__vnote:empty { display: none; }
.hw__vtools { position: relative; }
.hw__vtools .hw__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.hw__search { min-height: 50px; padding: 0 18px 0 46px; border-radius: 999px; border: 1.5px solid var(--rule); box-shadow: var(--shadow-soft); transition: border-color .2s var(--hw-ease), box-shadow .2s var(--hw-ease); }
.hw__search:focus { border-color: var(--brand); box-shadow: 0 0 0 4px var(--focus-ring); }
.hw__chips { gap: 8px; }
.hw__chip { min-height: 38px; padding: 0 16px; border: 1.5px solid transparent; background: var(--tone, var(--wash)); color: var(--tone-ink, var(--ink)); transition: background-color .2s var(--hw-ease), color .2s var(--hw-ease), transform .2s var(--hw-ease); }
.hw__chip:hover { transform: translateY(-1px); border-color: var(--tone-solid, var(--rule-sky)); }
.hw__chip[aria-pressed='true'] { background: var(--tone-solid, var(--brand)); border-color: var(--tone-solid, var(--brand)); color: #fff; }
.hw__chip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hw [data-subject='math'] { --tone: var(--tone-blue); --tone-ink: var(--tone-blue-ink); --tone-solid: var(--tone-blue-solid); }
.hw [data-subject='science'] { --tone: var(--tone-mint); --tone-ink: var(--tone-mint-ink); --tone-solid: var(--tone-mint-solid); }
.hw [data-subject='history'] { --tone: var(--tone-sun); --tone-ink: var(--tone-sun-ink); --tone-solid: #c98a00; }
.hw [data-subject='writing'] { --tone: var(--tone-coral); --tone-ink: var(--tone-coral-ink); --tone-solid: var(--tone-coral-solid); }
.hw [data-subject='language'] { --tone: var(--tone-teal); --tone-ink: var(--tone-teal-ink); --tone-solid: var(--tone-teal-solid); }
.hw [data-subject='coding'] { --tone: var(--tone-slate); --tone-ink: var(--tone-slate-ink); --tone-solid: var(--tone-slate-solid); }
.hw [data-subject='study-skills'] { --tone: var(--tone-orange); --tone-ink: var(--tone-orange-ink); --tone-solid: var(--tone-orange-solid); }
.hw__grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.hw__vcard { gap: 8px; padding: 0 0 14px; overflow: hidden; border-radius: 18px; border: 1.5px solid var(--rule); background: var(--card); box-shadow: var(--shadow-soft); animation: hw-rise .4s var(--hw-ease) both;
  transition: transform .3s var(--hw-ease), box-shadow .3s var(--hw-ease), border-color .3s var(--hw-ease); }
.hw__vcard:hover { transform: translateY(-4px); box-shadow: var(--hw-lift); border-color: var(--tone-solid, var(--rule-sky)); }
.hw__vcard:hover .hw__vposter { box-shadow: none; }
.hw__vcard .hw__vthumb { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--tone, var(--wash)); }
.hw__vthumb .hw__vposter { position: absolute; inset: 0; height: 100%; border-radius: 0; transition: transform .5s var(--hw-ease); }
.hw__vcard:hover .hw__vthumb .hw__vposter { transform: scale(1.05); }
.hw__vcard .hw__vplay { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; padding-left: 3px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--brand); box-shadow: 0 4px 14px rgba(11, 32, 54, .25); transform: scale(.88); transition: transform .3s var(--hw-ease); }
.hw__vcard:hover .hw__vplay { transform: scale(1); }
.hw__vcard .hw__vlen { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(11, 32, 54, .8); color: #fff; font: 600 .78rem/1.5 var(--display); font-variant-numeric: tabular-nums; }
.hw__vcard > b { padding: 2px 16px 0; font: 600 1rem/1.3 var(--display); }
.hw__vcard .hw__vmeta { display: flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--ink-soft); font-size: .82rem; }
.hw__vcard .hw__vtag { padding: 2px 10px; border-radius: 999px; background: var(--tone, var(--wash)); color: var(--tone-ink, var(--ink)); font: 600 .78rem/1.5 var(--display); font-style: normal; }
.hw__player video { border-radius: 18px; box-shadow: var(--hw-lift); }
.hw__player h2 { font: 700 1.5rem/1.2 var(--headline); }
.hw__back { border-radius: 999px; padding: 0 16px; min-height: 40px; }

@media (max-width: 600px) {
  .hw__tab { min-width: 0; flex: 1; }
  .hw__starters { grid-template-columns: 1fr; gap: 10px; }
  .hw__starter { min-height: 66px; }
  .hw__hello-wrap { width: 136px; height: 136px; }
  .hw__hello { width: 116px; height: 116px; }
  .hw__fold-head { gap: 12px; padding: 10px 14px 10px 10px; }
  .hw__fold-buddy { width: 52px; height: 52px; }
  .hw__fold-titles b { font-size: 1.15rem; }
  .hw__fold .hw__make { padding: 16px 16px 18px; }
  .hw__msg .hw__msg-face { width: 32px; height: 32px; }
  .hw__grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hw__hello, .hw__msg, .hw__dots i, .hw__studio, .hw__vcard, .hw__steps li.is-now::before { animation: none; }
  .hw__starter, .hw__starter-icon, .hw__vcard, .hw__vthumb .hw__vposter, .hw__vplay, .hw__fold-buddy, .hw__fold-chev, .hw__buddy-card, .hw__buddy-card img, .hw__look-card, .hw__chip { transition: none; }
  .hw__fold::details-content { transition: none; }
}

/* A free account's library (core videos.ts libraryShelf; 2026-10-20): StudyBuddies' own videos for the
 * child's grade open; everything else is a card blurred under a lock that leads to the plans. */
.hw__free { display: flex; align-items: center; gap: 10px; width: min(860px, 100%); margin: 0 auto; padding: 10px 14px; border-radius: 14px; background: var(--tone-sun); color: var(--tone-sun-ink); font: 600 .92rem/1.4 var(--display); }
.hw__free[hidden] { display: none; }
.hw__free a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.hw__vcard--locked { text-decoration: none; }
.hw__vcard--locked .hw__vthumb .hw__vposter { filter: blur(10px) saturate(.8); transform: scale(1.15); }
.hw__vcard--locked:hover .hw__vthumb .hw__vposter { transform: scale(1.2); }
.hw__vcard .hw__vlock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; background: rgba(11, 32, 54, .38); color: #fff; }
.hw__vcard .hw__vlock svg { width: 40px; height: 40px; padding: 8px; border-radius: 50%; background: rgba(255, 255, 255, .22); box-sizing: content-box; }
.hw__vcard .hw__vlock b { font: 600 .85rem/1.2 var(--display); padding: 0; }
.hw__vcard--locked > b { color: var(--ink-soft); }

/* =========================================================================
 * The streak, upgraded (2026-10-20; the owner: "Looks a little lame and underwhelming"). A solid orange badge with a
 * flickering flame once today counts, a three-step bar for today, a week strip of flames (kept), moons (rest days)
 * and a dashed ring (today), the Start learning card, stat tiles for the grown-up, and confetti for a milestone.
 * Flat colour throughout; the movement stops for reduced motion.
 * ========================================================================= */
:root { --streak-on: #ffffff; --streak-shadow: 0 4px 12px rgba(232, 89, 12, .28); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --streak-on: #2a1200; --streak-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
}
:root[data-theme='dark'] { --streak-on: #2a1200; --streak-shadow: 0 4px 12px rgba(0, 0, 0, .35); }

/* The chip: the flame in its own circle, then the number. */
.streak { gap: 6px; padding: 3px 12px 3px 3px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--card); font: 700 1rem/1 var(--display); transition: background-color .3s ease, border-color .3s ease; }
.streak .streak__flame { width: 28px; height: 28px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: var(--wash); color: var(--streak-wait); }
.streak--lit { background: var(--streak); border-color: var(--streak); color: var(--streak-on); box-shadow: var(--streak-shadow); }
.streak--lit .streak__flame { background: rgba(255, 255, 255, .24); color: var(--streak-on); animation: streak-flicker 1.8s ease-in-out infinite; transform-origin: 50% 85%; }
.streak--small { padding: 2px 9px 2px 2px; font-size: .85rem; }
.streak--small .streak__flame { width: 22px; height: 22px; padding: 3px; }
@keyframes streak-flicker { 0%, 100% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.05, 1.1) rotate(-3deg); } 65% { transform: scale(.97, 1.03) rotate(2deg); } }

/* Today: three steps, filled as things are done. */
.streak-dots { display: inline-flex; gap: 4px; align-items: center; }
.streak-dots i { width: 22px; height: 8px; border: 0; border-radius: 999px; background: var(--rule); transition: background-color .3s ease; }
.streak-dots i.on { background: var(--streak); border: 0; }
.streak-dots--done i { animation: streak-step .5s cubic-bezier(.2, .8, .2, 1) both; }
.streak-dots--done i:nth-child(2) { animation-delay: .08s; }
.streak-dots--done i:nth-child(3) { animation-delay: .16s; }
@keyframes streak-step { from { transform: scaleX(.6); } to { transform: none; } }

/* The last seven days. */
.streak-week { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.streak-week__day { display: grid; justify-items: center; gap: 4px; color: var(--ink-soft); font: 600 .72rem/1 var(--display); }
.streak-week__day i { display: grid; place-items: center; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--rule); background: var(--card); color: var(--streak-ink); font: 700 .66rem/1 var(--display); font-style: normal; font-variant-numeric: tabular-nums; }
.streak-week__day--done i { background: var(--streak); border-color: var(--streak); color: var(--streak-on); }
.streak-week__day--done .streak__flame { width: 18px; height: 18px; color: var(--streak-on); }
.streak-week__day--rest i { background: var(--brand-tint); border-color: var(--rule-sky); color: var(--link); }
.streak-week__day--today i { border: 2px dashed var(--streak); background: var(--streak-tint); }
.streak-week__day--today span { color: var(--ink); }
.streak-week--big { gap: 12px; margin: 16px 0 8px; flex-wrap: wrap; }
.streak-week--big .streak-week__day { font-size: .8rem; }
.streak-week--big .streak-week__day i { width: 44px; height: 44px; font-size: .78rem; }
.streak-week--big .streak-week__day--done .streak__flame { width: 24px; height: 24px; }

/* Start learning: the streak card. */
.modes__streak { display: block; width: min(760px, 100%); margin: 18px auto 0; color: inherit; font-weight: inherit; }
.streak-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 22px; background: var(--card); border: 1.5px solid var(--rule); box-shadow: var(--shadow-soft); text-align: left; }
.streak-card--lit { background: var(--streak-tint); border-color: var(--streak); }
.streak-card__badge { display: grid; justify-items: center; align-content: center; gap: 1px; width: 80px; height: 80px; border-radius: 24px; background: var(--wash); color: var(--streak-wait); }
.streak-card--lit .streak-card__badge { background: var(--streak); color: var(--streak-on); box-shadow: var(--streak-shadow); }
.streak-card__badge .streak__flame { width: 30px; height: 30px; color: inherit; transform-origin: 50% 85%; }
.streak-card--lit .streak-card__badge .streak__flame { animation: streak-flicker 1.8s ease-in-out infinite; }
.streak-card__badge b { font: 700 1.6rem/1 var(--headline); }
.streak-card__badge span { font: 600 .7rem/1 var(--display); }
.streak-card__text { min-width: 0; }
.streak-card__text h3 { margin: 0; color: var(--ink); font: 700 1.2rem/1.2 var(--headline); text-wrap: balance; }
.streak-card__text p { margin: 3px 0 9px; color: var(--ink-soft); font: 500 .92rem/1.4 var(--body); }
@media (max-width: 720px) {
  .streak-card { grid-template-columns: auto 1fr; gap: 14px; padding: 14px 16px; }
  .streak-card .streak-week { grid-column: 1 / -1; justify-content: space-between; }
}

/* The parent dashboard: the numbers as tiles. */
.pd__streak-note { margin: 8px 0 0; color: var(--ink-soft); }
.streak-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0 4px; }
.streak-stat { display: grid; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--wash); border: 1px solid var(--rule); }
.streak-stat b { color: var(--ink); font: 700 1.5rem/1.1 var(--headline); font-variant-numeric: tabular-nums; }
.streak-stat span { color: var(--ink-soft); font: 600 .8rem/1.3 var(--display); }
.streak-stat--lit { background: var(--streak-tint); border-color: var(--streak); }
.streak-stat--lit b { color: var(--streak-ink); }
.streak-stat--rest { background: var(--brand-tint); border-color: var(--rule-sky); }
.streak-stat--rest b { color: var(--link); }
@media (max-width: 600px) { .streak-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A milestone: the badge in rings, confetti bursting out of it. */
.streak-win { overflow: visible; padding-top: 34px; }
.streak-win__burst { position: absolute; left: 50%; top: 86px; width: 0; height: 0; pointer-events: none; }
.streak-win__burst i { position: absolute; left: -5px; top: -7px; width: 10px; height: 14px; border-radius: 3px; background: var(--streak); animation: streak-burst 1.2s cubic-bezier(.2, .8, .2, 1) .1s both; }
.streak-win__burst i:nth-child(4n + 2) { background: var(--sun); }
.streak-win__burst i:nth-child(4n + 3) { background: var(--brand); }
.streak-win__burst i:nth-child(4n) { background: #12a06b; }
@keyframes streak-burst {
  from { transform: rotate(var(--a)) translateY(0) scale(.4); opacity: 1; }
  80% { opacity: 1; }
  to { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(220deg) scale(1); opacity: 0; }
}
.streak-win__flame { gap: 10px; }
.streak-win__badge { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--streak); box-shadow: 0 0 0 10px var(--streak-tint); animation: streak-ring 2s ease-in-out infinite; }
.streak-win__badge .streak__flame { width: 60px; height: 60px; color: var(--streak-on); animation: streak-flicker 1.8s ease-in-out infinite; transform-origin: 50% 85%; }
.streak-win__flame b { margin-top: 2px; font: 700 2.6rem/1 var(--headline); }
@keyframes streak-ring { 0%, 100% { box-shadow: 0 0 0 10px var(--streak-tint); } 50% { box-shadow: 0 0 0 16px var(--streak-tint); } }

@media (prefers-reduced-motion: reduce) {
  .streak--lit .streak__flame, .streak-card--lit .streak-card__badge .streak__flame, .streak-win__badge, .streak-win__badge .streak__flame, .streak-dots--done i { animation: none; }
  .streak-win__burst { display: none; }
}

/* The painted streak art (2026-10-20, docs/streak-art-prompts.md): the flame paints itself, so the badge is a light
 * tile with an orange ring once today counts, a calm one while it waits, and a moonlit one after a rest day. */
.streak-card__badge { width: 88px; height: auto; padding: 8px 6px 10px; gap: 0; background: var(--card); color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px var(--rule); }
.streak-card--lit .streak-card__badge { background: var(--card); color: var(--streak-ink); box-shadow: inset 0 0 0 2.5px var(--streak), var(--streak-shadow); }
.streak-card--rest .streak-card__badge { background: var(--brand-tint); color: var(--link); box-shadow: inset 0 0 0 1.5px var(--rule-sky); }
.streak-card__art { width: 56px; height: 56px; object-fit: contain; transform-origin: 50% 90%; }
.streak-card--lit .streak-card__art { animation: streak-flicker 2.2s ease-in-out infinite; }
.streak-card--rest .streak-card__art { width: 60px; height: 60px; }
.streak-card__badge b { margin-top: 2px; }
.streak-card--rest { border-color: var(--rule-sky); }

/* The milestone: the painting, rising gently, the number under it. */
.streak-win__art { display: block; width: 200px; height: 200px; object-fit: contain; animation: streak-rise .7s cubic-bezier(.2, .8, .2, 1) both, streak-float 3s ease-in-out .7s infinite alternate; }
.streak-win__burst { top: 120px; }
.streak-win__flame b { margin-top: -6px; color: var(--streak-ink); }
@keyframes streak-rise { from { transform: translateY(18px) scale(.85); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes streak-float { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .streak-card--lit .streak-card__art, .streak-win__art { animation: none; } }

/* Readable in both themes (2026-10-21: the Activities jump buttons turned cream with white words on
   hover in dark mode). The buddy colours are pastel and made for light pages, and site.js sets them inline,
   so chrome here takes the brand tokens instead, which dark mode redefines. */
.jump a { background: var(--card); color: var(--link); box-shadow: inset 0 0 0 1.5px var(--rule-sky); transition: background .15s ease, color .15s ease, transform .15s ease; }
.jump a:hover { background: var(--brand); color: #fff; box-shadow: none; transform: translateY(-1px); }
.jump a:active { transform: none; }
.buddy__when, .buddy__good span, .cookies__group small, .cookies__plus, .q summary::after { color: var(--link); }
.q[open] summary, .q summary:hover { background: var(--brand-tint); }
.chip--on, .picker__one[aria-pressed='true'], .answers .btn.is-right { color: #0f2742; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .btn--danger { color: #2a0d0a; }
}
:root[data-theme='dark'] .btn--danger { color: #2a0d0a; }

/* === Homework help, 2026-10-24: the question box up top, shaped replies, the problem in reach, what-next buttons,
 * Watch / Make on Videos, and New chat with an undo. ============================================================= */

/* --- The empty chat: buddy, heading, then straight into the box; small starters under it -------------------- */
.hw__empty { gap: 12px; padding: 22px 8px 16px; }
.hw__hello-wrap { width: 128px; height: 128px; box-shadow: inset 0 0 0 8px var(--card); margin-bottom: 0; }
.hw__hello { width: 108px; height: 108px; }
.hw__empty h2 { margin: 0; }
.hw__hero { width: min(660px, 100%); text-align: left; }
.hw__hero:empty { display: none; }
.hw__compose.is-hero { position: static; padding: 0; background: none; border: 0; }
.hw__compose.is-hero .hw__row { flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px; border-radius: 22px; border-width: 2px; }
.hw__compose.is-hero .hw__row textarea { flex: 1 0 100%; order: -1; min-height: 92px; max-height: 220px; padding: 10px 12px; font-size: 1.05rem; }
.hw__compose.is-hero .hw__cam { width: auto; height: 46px; padding: 0 16px 0 12px; gap: 8px; display: inline-flex; border-radius: 999px; font: 600 .95rem var(--display); }
.hw__compose.is-hero .hw__send { width: auto; height: 46px; margin-left: auto; padding: 0 22px 0 16px; gap: 6px; display: inline-flex; border-radius: 999px; font: 700 1rem var(--display); }
.hw__cam-word, .hw__send-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hw__compose.is-hero .hw__cam-word, .hw__compose.is-hero .hw__send-word { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.hw__compose.is-hero .hw__pending { margin: 0 0 10px 4px; }

.hw__starters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: min(660px, 100%); margin-top: 2px; }
.hw__starter { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 6px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--card); box-shadow: none; font: 600 .9rem/1.2 var(--display); }
.hw__starter .hw__starter-icon { width: 30px; height: 30px; border-radius: 50%; }
.hw__starter:hover { transform: translateY(-1px); box-shadow: none; }

/* --- The conversation, with the problem kept beside it (computer) or above it (phone) ----------------------- */
.hw__work { display: grid; gap: 12px; align-content: end; }
.hw__talk { display: grid; align-content: end; min-width: 0; }
.hw__q { position: sticky; top: calc(var(--hw-head-h, 0px) + 8px); z-index: 4; width: min(860px, 100%); margin: 0 auto; border-radius: 16px; background: var(--card); border: 1.5px solid var(--rule); box-shadow: var(--shadow-soft); }
.hw__q[hidden] { display: none; }
.hw__q-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px 8px 14px; list-style: none; cursor: pointer; color: var(--link); border-radius: 16px; }
.hw__q-head::-webkit-details-marker { display: none; }
.hw__q-head:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hw__q-titles { display: grid; flex: 1; min-width: 0; }
.hw__q-titles b { color: var(--ink); font: 700 .95rem/1.25 var(--display); }
.hw__q-peek { color: var(--ink-soft); font-size: .86rem; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw__q[open] .hw__q-peek { display: none; }
.hw__q-chev { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--wash); color: var(--ink); transition: transform .3s var(--hw-ease); }
.hw__q[open] .hw__q-chev { transform: rotate(180deg); }
.hw__q-body { display: grid; gap: 10px; max-height: 42vh; overflow: auto; padding: 0 14px 14px; }
.hw__q-body img { display: block; width: 100%; max-height: 300px; object-fit: contain; border-radius: 10px; background: var(--wash); }
.hw__q-body p { margin: 0; color: var(--ink); white-space: pre-wrap; line-height: 1.55; }
.hw__q-body .hw__q-gone { color: var(--ink-soft); font-size: .88rem; }
/* Wide screens: the chat stays centred, the same width as the text box below; the problem waits in the margin to its left. */
@media (min-width: 1400px) {
  .hw__work.has-q { grid-template-columns: minmax(0, 1fr) minmax(0, 860px) minmax(0, 1fr); align-items: end; gap: 24px; }
  .hw__work.has-q .hw__q { grid-column: 1; grid-row: 1; justify-self: end; align-self: start; width: min(300px, 100%); top: calc(var(--hw-head-h, 0px) + 18px); margin: 0; }
  .hw__work.has-q .hw__talk { grid-column: 2; grid-row: 1; }
  .hw__work.has-q .hw__log, .hw__work.has-q .hw__acts, .hw__work.has-q .hw__note { width: 100%; }
}

/* --- What next, under the latest reply ----------------------------------------------------------------------- */
.hw__acts { display: flex; flex-wrap: wrap; gap: 8px; width: min(860px, 100%); margin: 12px auto 0; padding-left: 50px; }
.hw__acts[hidden] { display: none; }
.hw__act { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px 0 11px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); font: 600 .9rem/1.2 var(--display); cursor: pointer; transition: border-color .2s var(--hw-ease), transform .2s var(--hw-ease); animation: hw-rise .38s var(--hw-ease) both; }
.hw__act .hw__icon { color: var(--link); }
.hw__act:hover { border-color: var(--link); transform: translateY(-1px); }
.hw__act:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hw__act--video { background: var(--tone-blue); border-color: transparent; color: var(--tone-blue-ink); }
.hw__act--video .hw__icon { color: inherit; }

/* --- A reply with shape: steps, equations, the question back, fraction bars ------------------------------------ */
.hw__rich { display: grid; gap: 10px; }
.hw__rich p { margin: 0; white-space: normal; }
.hw__fsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hw__fsteps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.hw__fstep-n { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; border-radius: 50%; background: var(--brand); color: var(--brand-ink); font: 700 .82rem/1 var(--display); font-variant-numeric: tabular-nums; }
.hw__flist { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.hw__math { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.hw__frac { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; margin: 0 .1em; font-size: .82em; line-height: 1.1; text-align: center; }
.hw__frac > span { padding: 0 .2em; }
.hw__frac > span:first-child { border-bottom: 1.5px solid currentColor; }
.hw__feq { padding: 10px 14px; border-radius: 12px; background: var(--wash); text-align: center; font-size: 1.15rem; }
.hw__msg .hw__fask { display: grid; gap: 2px; padding: 10px 14px; border-radius: 12px; background: var(--tone-sun); color: var(--tone-sun-ink); box-shadow: inset 4px 0 0 var(--tone-sun-solid); }
.hw__msg .hw__fask b { display: block; margin: 0; color: inherit; font: 700 .8rem/1.3 var(--display); }
.hw__msg .hw__fask > span { color: var(--ink); font-weight: 600; }
.hw__fbars { display: flex; flex-wrap: wrap; gap: 12px 20px; padding: 12px 14px; border-radius: 12px; background: var(--wash); }
.hw__fbar { display: grid; justify-items: center; gap: 6px; margin: 0; }
.hw__fbar svg { display: block; max-width: 100%; height: auto; }
.hw__fbar rect { fill: var(--card); stroke: var(--rule-sky); stroke-width: 1.5; }
.hw__fbar rect.is-on { fill: var(--tone-blue-solid); stroke: var(--tone-blue-solid); }
.hw__fbar figcaption { color: var(--ink); font: 700 1.05rem/1 var(--display); }
.hw__fbar figcaption .hw__frac { font-size: .9em; }

/* --- New chat: cleared, and offered back --------------------------------------------------------------------- */
.hw__undo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; width: min(860px, 100%); margin: 0 auto 10px; padding: 8px 14px; border-radius: 14px; background: var(--tone-sun); color: var(--tone-sun-ink); font: 600 .92rem/1.4 var(--display); text-align: center; }
.hw__undo[hidden] { display: none; }
.hw__linkbtn { min-height: 34px; padding: 0 6px; border: 0; background: none; color: var(--link); font: 700 .95rem var(--display); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 8px; }
.hw__undo .hw__linkbtn { color: inherit; }
.hw__linkbtn:focus-visible { outline: 3px solid var(--focus-ring); }

/* --- Videos: Watch or Make first, the search ready under Watch ---------------------------------------------- */
.hw__vchoice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(860px, 100%); margin: 0 auto; }
.hw__vpick { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 16px; border-radius: 18px; border: 1.5px solid var(--rule); background: var(--card); color: var(--ink); font: 700 1.05rem/1.2 var(--display); cursor: pointer; box-shadow: var(--shadow-soft); transition: background-color .2s var(--hw-ease), border-color .2s var(--hw-ease); }
.hw__vpick:hover { border-color: var(--link); }
.hw__vpick[aria-pressed='true'] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.hw__vpick:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.hw__vview { display: grid; gap: 16px; align-content: start; }
.hw__vview[hidden] { display: none; }
.hw__vfrom { width: min(860px, 100%); margin: 0 auto; color: var(--ink-soft); font-size: .95rem; }
.hw__vfrom[hidden], .hw__vnone[hidden] { display: none; }
.hw__vnone { width: min(860px, 100%); margin: 0 auto; padding: 22px 16px; border: 1.5px dashed var(--rule-sky); border-radius: 18px; color: var(--ink); text-align: center; font: 600 1rem var(--display); }
.hw__fold-head { cursor: default; }
.hw__fold-head:hover { background: var(--hw-banner); }
.hw__fold-head:hover .hw__fold-buddy { transform: none; }

@media (max-width: 600px) {
  .hw__empty { padding: 14px 4px 12px; gap: 10px; }
  .hw__hello-wrap { width: 88px; height: 88px; box-shadow: inset 0 0 0 6px var(--card); }
  .hw__hello { width: 74px; height: 74px; }
  .hw__empty h2 { font-size: 1.45rem; }
  .hw__compose.is-hero .hw__row textarea { min-height: 84px; }
  .hw__compose.is-hero .hw__cam { padding: 0 14px 0 10px; font-size: .9rem; }
  .hw__compose.is-hero .hw__send { padding: 0 18px 0 14px; }
  .hw__starters { display: flex; grid-template-columns: none; gap: 8px; }
  .hw__starter { min-height: 38px; font-size: .86rem; }
  .hw__acts { padding-left: 0; }
  .hw__act { min-height: 38px; font-size: .86rem; }
  .hw__vpick { min-height: 54px; font-size: .98rem; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hw__act { animation: none; transition: none; }
  .hw__q-chev { transition: none; }
}

/* Fresh chat: the welcome sits near the top, not pushed down to the bar. */
.hw__room.is-fresh { align-content: start; }
.hw__acts { scroll-margin-bottom: 120px; }
/* Fraction pictures: the fraction, then its bar, one row each. */
.hw__fbars { display: grid; gap: 8px; }
.hw__fbar { grid-template-columns: 2.4em minmax(0, 200px); justify-items: start; align-items: center; gap: 10px; }
.hw__fbar figcaption { order: -1; justify-self: center; }
.hw__fbar svg { width: 100%; }
.hw__vpick span { white-space: nowrap; }
@media (max-width: 1399px) {
  /* On a phone or tablet the problem is a band under the header: part of the chrome, like the header itself. */
  .hw__q { width: auto; margin: -12px -18px 0; top: var(--hw-head-h, 0px); border-radius: 0; border-width: 0 0 1px; border-color: var(--hw-rule); background: var(--hw-band); box-shadow: 0 6px 12px -10px rgba(15, 39, 66, .35); }
  .hw__q-head { border-radius: 0; padding-inline: max(18px, env(safe-area-inset-left)) 14px; }
}
@media (max-width: 600px) {
  .hw__q { margin: -12px -12px 0; }
  .hw__q-head { padding-inline: 12px 10px; min-height: 48px; }
  .hw__vpick { padding: 0 10px; }
  .hw__starters { gap: 6px; }
  .hw__starter { padding: 0 12px 0 5px; gap: 6px; }
  .hw__starter .hw__starter-icon { width: 28px; height: 28px; }
}
/* The conversation fills the room: the problem band at the top, the messages settling at the bottom. */
.hw__room:not(.is-fresh) { align-content: stretch; }
@media (max-width: 1399px) { .hw__work.has-q { grid-template-rows: auto 1fr; } }
.hw__compose.is-hero .hw__undo { width: auto; margin: 0 0 10px; }

/* --- Graphs, number lines and charts in replies (src/hw-graph.js) ------------------------------------------- */
.hw__rich { --c0: var(--tone-blue-solid); --c1: var(--tone-coral-solid); --c2: var(--tone-mint-solid); --c3: var(--tone-sun-solid); --c4: var(--tone-teal-solid); --c5: var(--tone-orange-solid); --c6: var(--tone-slate-solid); --c7: #b56fd8; }
.hw__graph, .hw__nline, .hw__chart { display: grid; gap: 8px; margin: 0; padding: 12px; border-radius: 12px; background: var(--wash); }
.hw__graph svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; border-radius: 8px; background: var(--card); }
.hw__ggrid line { stroke: var(--rule); stroke-width: 1; }
.hw__gaxes line { stroke: var(--ink-soft); stroke-width: 1.6; }
.hw__gnums text { fill: var(--ink-soft); font: 600 10.5px var(--display); }
.hw__gcurve { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hw__gcurve--0 { stroke: var(--c0); }
.hw__gcurve--1 { stroke: var(--c1); }
.hw__gmark { stroke: var(--card); stroke-width: 2; }
.hw__gmark--0 { fill: var(--c0); }
.hw__gmark--1 { fill: var(--c1); }
.hw__gpoint { fill: var(--c2); stroke: var(--card); stroke-width: 2; }
.hw__gtag { fill: var(--ink); font: 700 10.5px var(--display); paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.hw__graph figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; color: var(--ink); font: 700 .95rem var(--display); }
.hw__gkey { display: inline-flex; align-items: center; gap: 6px; }
.hw__gkey i { width: 16px; height: 4px; border-radius: 2px; background: var(--c0); }
.hw__gkey--1 i { background: var(--c1); }

.hw__nline svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.hw__naxis { stroke: var(--ink-soft); stroke-width: 2; }
.hw__nticks line { stroke: var(--ink-soft); stroke-width: 1.5; }
.hw__nticks text { fill: var(--ink); font: 600 11px var(--display); }
.hw__nshade { stroke: var(--c0); stroke-width: 6; stroke-linecap: round; }
.hw__nshade-end { fill: var(--c0); }
.hw__ndot { fill: var(--card); stroke: var(--c0); stroke-width: 3; }
.hw__ndot.is-shut { fill: var(--c0); }
.hw__nline figcaption { display: grid; justify-items: center; gap: 2px; color: var(--ink); font: 700 1rem var(--display); text-align: center; }
.hw__nline figcaption span { color: var(--ink-soft); font: 500 .82rem/1.35 var(--body); }
.hw__nline figcaption span:empty { display: none; }

.hw__chart figcaption { color: var(--ink); font: 700 1rem/1.3 var(--display); }
.hw__bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hw__bars li { display: grid; grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.hw__cl { color: var(--ink); font: 600 .9rem/1.25 var(--display); overflow-wrap: anywhere; }
.hw__ctrack { position: relative; height: 20px; border-radius: 6px; background: var(--card); }
.hw__ctrack i { position: absolute; top: 0; bottom: 0; border-radius: 6px; }
.hw__bars b { min-width: 2ch; color: var(--ink); font: 700 .92rem var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.hw__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 18px; }
.hw__pie svg { width: 130px; height: 130px; flex: none; }
.hw__pie circle { fill: none; stroke-width: 24; }
.hw__pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.hw__pie li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; color: var(--ink); font: 600 .9rem/1.25 var(--display); }
.hw__pie li i { width: 12px; height: 12px; border-radius: 3px; }
.hw__pie li b { font-variant-numeric: tabular-nums; }
.hw__pie li em { min-width: 3.4ch; color: var(--ink-soft); font: 600 .82rem var(--display); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.hw__c0 { background: var(--c0); stroke: var(--c0); } .hw__c1 { background: var(--c1); stroke: var(--c1); }
.hw__c2 { background: var(--c2); stroke: var(--c2); } .hw__c3 { background: var(--c3); stroke: var(--c3); }
.hw__c4 { background: var(--c4); stroke: var(--c4); } .hw__c5 { background: var(--c5); stroke: var(--c5); }
.hw__c6 { background: var(--c6); stroke: var(--c6); } .hw__c7 { background: var(--c7); stroke: var(--c7); }
.hw__msg .hw__bars b, .hw__msg .hw__pie b { display: inline; margin: 0; color: var(--ink); font: 700 .92rem var(--display); font-variant-numeric: tabular-nums; }

/* =======================================================================
 * Colours stay their real colours in the dark (2026-10-26: "any of
 * the yellows in dark mode / any colors, make them normal colors, not dark
 * versions of them"). The page and its cards stay navy; every coloured patch
 * (the plan caps and tiles, the streak, the green/yellow/red notes, the
 * referral card, Homework's subject tones and banner) keeps its daytime
 * colour, and the words on it switch to the daytime dark ink so they read.
 * ======================================================================= */
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .card.refer, :root:not([data-theme='light']) .streak-card--lit, :root:not([data-theme='light']) .streak-stat--lit, :root:not([data-theme='light']) .tier--ultimate .tier__tile, :root:not([data-theme='light']) .tier--pro .tier__tile, :root:not([data-theme='light']) .tier--basic .tier__tile { --ink: #0f2742; --ink-soft: #3c5672; --ink-faint: #55708c; --link: #1763d6; --link-deep: #0e4fb2; --card: #ffffff; --rule: #d9e6f2; } }
:root[data-theme='dark'] .card.refer, :root[data-theme='dark'] .streak-card--lit, :root[data-theme='dark'] .streak-stat--lit, :root[data-theme='dark'] .tier--ultimate .tier__tile, :root[data-theme='dark'] .tier--pro .tier__tile, :root[data-theme='dark'] .tier--basic .tier__tile { --ink: #0f2742; --ink-soft: #3c5672; --ink-faint: #55708c; --link: #1763d6; --link-deep: #0e4fb2; --card: #ffffff; --rule: #d9e6f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tier--ultimate .tier__tile { background: #fff6dc; border-color: #f4dc95; } }
:root[data-theme='dark'] .tier--ultimate .tier__tile { background: #fff6dc; border-color: #f4dc95; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tier--pro .tier__tile { background: #e5f0ff; border-color: #c4dcf2; } }
:root[data-theme='dark'] .tier--pro .tier__tile { background: #e5f0ff; border-color: #c4dcf2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tier--basic .tier__tile { background: #f3f8fd; border-color: #d9e6f2; } }
:root[data-theme='dark'] .tier--basic .tier__tile { background: #f3f8fd; border-color: #d9e6f2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .pin-row__state.is-on, :root:not([data-theme='light']) .cls__status--strong { color: #0a6646; } }
:root[data-theme='dark'] .pin-row__state.is-on, :root[data-theme='dark'] .cls__status--strong { color: #0a6646; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .cls__status--steady { color: #6e4d00; } }
:root[data-theme='dark'] .cls__status--steady { color: #6e4d00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .cls__status--hard { color: #962a21; } }
:root[data-theme='dark'] .cls__status--hard { color: #962a21; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .streak--lit, :root:not([data-theme='light']) .streak-stat--lit b, :root:not([data-theme='light']) .streak-card--lit .streak-card__badge { color: #8a3200; } }
:root[data-theme='dark'] .streak--lit, :root[data-theme='dark'] .streak-stat--lit b, :root[data-theme='dark'] .streak-card--lit .streak-card__badge { color: #8a3200; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .fam__remove:hover:not(:disabled) { color: #b3261e; } }
:root[data-theme='dark'] .fam__remove:hover:not(:disabled) { color: #b3261e; }

/* =======================================================================
 * What's new (2026-10-26): dated update cards, newest first, in one narrow
 * column. Each is a picture beside a plain title and a sentence or two;
 * on a phone the picture sits on top. Finished pictures only.
 * ======================================================================= */
.news-list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
/* One card a day (2026-10-30): the date on top, then each update of that day, a thin line between them. */
.news { display: block; padding: 22px 24px; }
.news__item { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: start; }
.news__item--plain { grid-template-columns: 1fr; }
.news__item + .news__item { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--rule); }
.news > .news__date { margin-bottom: 14px; }
.news__media { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--sky); display: grid; place-items: center; }
.news__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.news__media--art img { object-fit: contain; padding: 12px; box-sizing: border-box; }
.news__media--cover img { object-position: center 20%; }
.news__date { margin: 0 0 6px; color: var(--ink-soft); font: 600 .9rem/1.3 var(--display); }
.news h2 { margin: 0 0 10px; color: var(--ink); font: 700 1.35rem/1.25 var(--display); }
.news p { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.6; }
.news__item p:last-of-type { margin-bottom: 0; }
.news .btn { margin-top: 14px; }
.news-soon { border: 2px solid var(--brand); }
.news-soon .news__date { color: var(--link); }
@media (max-width: 640px) {
  .news { padding: 18px; }
  .news__item { grid-template-columns: 1fr; gap: 16px; }
  .news__media { aspect-ratio: 16 / 9; }
}

/* --- Your videos (src/videos.js): the account's own, above the library; being made or not made says so --- */
.hw__mine { width: min(860px, 100%); margin: 4px auto 0; display: grid; gap: 10px; }
.hw__mine[hidden] { display: none; }
.hw__mine-title { margin: 0; color: var(--ink); font: 700 1.25rem/1.2 var(--headline); }
.hw__vcard .hw__vstate { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 10px; text-align: center; background: rgba(11, 32, 54, .55); color: #fff; }
.hw__vcard .hw__vstate b { font: 700 .95rem/1.25 var(--display); padding: 0; color: #fff; }
.hw__vcard .hw__vstate .hw__vspin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; border-right-color: transparent; animation: hw-spin 1s linear infinite; }
.hw__vcard--waiting { cursor: pointer; }
.hw__vcard--failed { cursor: default; }
.hw__vcard--failed:hover { transform: none; }
.hw__vcard--failed > .hw__vmeta { color: var(--ink-soft); }
@keyframes hw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hw__vcard .hw__vstate .hw__vspin { animation: none; } }
/* "Ready" on the Videos tab when a video finishes while Chat is open. */
.hw__tab-badge { padding: 1px 9px; border-radius: 999px; background: #ffd25a; color: #3a2a00; font: 700 .75rem/1.6 var(--display); font-style: normal; }

/* ---- The teacher's classroom (pages/17b-classroom.mjs, 2026-10-28) ---------------------------------- */
.classroom [data-auth="in"] { display: grid; gap: 18px; }
.classroom [data-auth="in"][hidden], .classroom [hidden] { display: none; }
.cr-card { padding: 24px 28px; display: grid; gap: 12px; }
.cr-card h2 { margin: 0; font: 600 1.3rem/1.25 var(--display); color: var(--ink); }
.cr-card h3 { margin: 8px 0 0; font: 600 1.05rem/1.3 var(--display); color: var(--ink); }
.cr-card p { margin: 0; color: var(--ink); }
.cr-check { display: flex; gap: 10px; align-items: flex-start; font: 400 .98rem/1.45 var(--body); color: var(--ink); }
.cr-check input { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--link); }
.cr-code { grid-template-columns: 1fr auto; align-items: center; gap: 16px 24px; }
.cr-code__code { font: 700 clamp(2.2rem, 6vw, 3.4rem)/1 var(--display); letter-spacing: .12em; color: var(--ink); padding: 10px 18px; border: 2px dashed var(--rule); border-radius: 16px; text-align: center; }
.cr-code__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; }
.cr-count { color: var(--ink-soft); font: 400 .95rem var(--body); }
.cr-roster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cr-roster li { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; background: var(--wash); border-radius: 12px; font: 600 1rem var(--display); color: var(--ink); }
.cr-roster li small { color: var(--ink-soft); font: 400 .8rem var(--body); }
.cr-roster__do { display: flex; gap: 12px; font: 400 .88rem var(--body); }
.cr-roster__none { grid-column: 1 / -1; font-weight: 400 !important; }
.cr-add { display: flex; gap: 10px; align-items: center; }
.cr-add .acct-field { margin: 0; flex: 1; max-width: 360px; }
.cr-family { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--rule); }
.clsx__panel--wide { grid-column: 1 / -1; }
.cr-heat { grid-template-columns: 96px repeat(14, minmax(0, 1fr)); }
.cr-print { display: none; }
.cr-cards { display: none; }
.cr-pic { width: 44px; height: 44px; flex: none; object-fit: contain; }
.cr-roster__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* With pictures each name gets a card: picture and name, then its buttons underneath. */
.cr-roster--pics { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cr-roster--pics li { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; }
.cr-roster__do button { white-space: nowrap; }
.cr-locked { color: #a3341b; font: 600 .8rem var(--body); }
@media (max-width: 640px) {
  .cr-card { padding: 20px 18px; }
  .cr-code { grid-template-columns: 1fr; }
  .cr-heat { grid-template-columns: 64px repeat(14, minmax(0, 1fr)); gap: 2px; }
}
/* The join card: on paper, only the card. */
@media print {
  body * { visibility: hidden !important; }
  .cr-print, .cr-print * { visibility: visible !important; }
  .cr-print { display: grid !important; position: absolute; inset: 0; place-content: center; text-align: center; gap: 18px; color: #000; background: #fff; }
  .cr-print__site { font: 700 28pt/1.2 var(--display); }
  .cr-print__code { font: 700 96pt/1 var(--display); letter-spacing: .12em; border: 4pt dashed #000; border-radius: 24pt; padding: 18pt 30pt; }
  .cr-print__name { font: 600 22pt/1.2 var(--display); }
  /* Name cards instead of the join card. */
  .classroom[data-print="cards"] .cr-print { display: none !important; }
  .classroom[data-print="cards"] .cr-cards, .classroom[data-print="cards"] .cr-cards * { visibility: visible !important; }
  .classroom[data-print="cards"] .cr-cards { display: grid !important; position: absolute; top: 0; left: 0; right: 0; grid-template-columns: 1fr 1fr; gap: 10pt; padding: 0; color: #000; background: #fff; }
  .cr-namecard { break-inside: avoid; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4pt 12pt; border: 2pt dashed #000; border-radius: 14pt; padding: 12pt 16pt; }
  .cr-namecard b { font: 700 26pt/1.1 var(--display); }
  .cr-namecard img { grid-row: 1 / span 2; grid-column: 2; width: 90pt; height: 90pt; object-fit: contain; }
  .cr-namecard small { font: 600 11pt/1.3 var(--body); }
}
/* A child's class at school, on their Settings card (parents.js drawManage). */
.pd__class { display: grid; gap: 8px; margin: 6px 0 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.pd__class h4 { margin: 0; font: 600 1rem/1.3 var(--display); color: var(--ink); }
.pd__class p { margin: 0; color: var(--ink); }

/* =======================================================================
 * Free Thanksgiving worksheets (pages/19-thanksgiving.mjs, 2026-10-31).
 * Most visitors come from Pinterest on a phone: the big download button sits
 * right under the headline, and on a phone each sheet card lies sideways
 * (picture left, words right) so the 20 sheets don't run for miles.
 * The grade badge keeps its harvest yellow and dark ink in dark mode.
 * ======================================================================= */
.tg-hero { padding-bottom: clamp(40px, 6vw, 72px); overflow: hidden; }
.tg-hero__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.tg-hero h1 { margin: 0 0 16px; }
.tg-hero .lede { margin: 0; }
.tg-hero .cta-row { margin-top: 24px; }
.tg-hero__btn { min-height: 58px; font-size: 1.1rem; padding-inline: 1.7em; }
.tg-hero__fine { margin: 12px 0 0; color: var(--ink-soft); font-size: .95rem; }
.tg-hero__fine span { white-space: nowrap; }
/* The hero's carousel of all 20 sheets (2026-11-01): one sheet in front, neighbors smaller, dimmer and soft behind. */
.tg-car { justify-self: center; width: min(100%, 460px); }
.tg-car__stage { position: relative; aspect-ratio: 1.12 / 1; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tg-car__slide { position: absolute; left: 50%; top: 3%; width: 60%; transform: translateX(-50%) scale(.6); opacity: 0; visibility: hidden; z-index: 0;
  transition: transform .6s cubic-bezier(.22, .8, .24, 1), opacity .6s ease, filter .6s ease, visibility 0s linear .6s; -webkit-tap-highlight-color: transparent; }
.tg-car__slide img { display: block; width: 100%; height: auto; background: #fff; border-radius: 6px; box-shadow: 0 2px 4px rgba(15, 39, 66, .1), 0 18px 38px rgba(15, 39, 66, .2); pointer-events: none; -webkit-user-drag: none; }
.tg-car__slide[data-pos] { visibility: visible; transition-delay: 0s; }
.tg-car__slide[data-pos='0'] { transform: translateX(-50%) scale(1); opacity: 1; z-index: 3; }
.tg-car__slide[data-pos='1'] { transform: translateX(-12%) scale(.8); opacity: .8; z-index: 2; filter: blur(1.5px) brightness(.88); }
.tg-car__slide[data-pos='-1'] { transform: translateX(-88%) scale(.8); opacity: .8; z-index: 2; filter: blur(1.5px) brightness(.88); }
.tg-car__slide[data-pos='2'] { transform: translateX(18%) scale(.66); opacity: 0; z-index: 1; }
.tg-car__slide[data-pos='-2'] { transform: translateX(-118%) scale(.66); opacity: 0; z-index: 1; }
.tg-car__slide[data-pos='0'] img { box-shadow: 0 0 0 3px #8ccb72, 0 2px 4px rgba(15, 39, 66, .1), 0 20px 44px rgba(15, 39, 66, .26); }
.tg-car__slide:focus-visible { outline: none; }
.tg-car__slide:focus-visible img { box-shadow: 0 0 0 4px var(--link), 0 20px 44px rgba(15, 39, 66, .26); }
.tg-car__badge { position: absolute; top: -10px; right: -12px; display: inline-flex; align-items: center; gap: 5px; padding: .3em .75em .3em .6em; border-radius: 999px; background: #2f9e44; color: #fff; font: 700 .85rem/1 var(--headline, inherit); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(20, 80, 30, .3); opacity: 0; transform: scale(.4); }
.tg-car__badge::before { content: '✓'; font-size: .95em; }
.tg-car__slide[data-pos='0'] .tg-car__badge { animation: tg-badge .45s cubic-bezier(.3, 1.6, .5, 1) .45s forwards; }
@keyframes tg-badge { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.tg-car__bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.tg-car__cap { flex: 1; min-width: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; text-align: center; min-height: 2.6em; }
.tg-car__cap b { font: 700 1.1rem/1.2 var(--headline, inherit); color: var(--ink); }
.tg-car__step { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--card); color: var(--link); box-shadow: inset 0 0 0 1.5px var(--rule-sky); font: 700 1.6rem/1 var(--headline, inherit); cursor: pointer; transition: background .15s ease; }
.tg-car__step span { margin-top: -3px; }
.tg-car__step:hover { background: var(--brand-tint); }
.tg-car__step:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .tg-car__slide { transition: opacity .2s ease, visibility 0s linear .2s; }
  .tg-car__slide[data-pos='0'] .tg-car__badge { animation: none; opacity: 1; transform: none; }
}

.tg-jump { margin-bottom: clamp(28px, 4vw, 40px); }
/* Black & white / Color (2026-11-01): one switch in the hero, one beside the section links. */
.tg-bar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(28px, 4vw, 40px); }
.tg-bar .tg-jump { margin-bottom: 0; }
/* En español among the section tabs (2026-11-04): the same bubble, filled blue while the sheets are Spanish. */
.tg-jump__es { padding: .35em 1.1em; min-height: 44px; border: 0; border-radius: 999px; background: var(--card); color: var(--link); box-shadow: inset 0 0 0 1.5px var(--rule-sky); font: 700 .95rem/1.5 var(--display); cursor: pointer; transition: background .15s ease, color .15s ease, transform .15s ease; }
.tg-jump__es[hidden] { display: none; }
.tg-jump__es:hover { background: var(--brand); color: #fff; box-shadow: none; transform: translateY(-1px); }
.tg-jump__es[aria-pressed='true'] { background: var(--brand); color: #fff; box-shadow: none; }
.tg-jump__es:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.tg-ink { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.tg-ink[hidden] { display: none; }
.tg-ink--hero { margin-top: 20px; }
.tg-ink--hero + .tg-ink--hero { margin-top: 10px; }
.tg-switches { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.tg-sheet__es { display: block; margin-top: 2px; font-size: .8em; font-weight: 600; color: var(--ink-soft); }
.tg-sheet__es[hidden] { display: none; }
.tg-ink__label { font-weight: 600; color: var(--ink-soft); }
.tg-ink__opt { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--card); color: var(--link); font: 600 1rem/1 var(--body, inherit); box-shadow: inset 0 0 0 1.5px var(--rule-sky); cursor: pointer; transition: background .15s ease, color .15s ease; }
.tg-ink__opt:hover { background: var(--brand-tint); }
.tg-ink__opt[aria-pressed='true'] { background: var(--brand); color: #fff; box-shadow: none; cursor: default; }
.tg-ink__opt:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.tg-ink__dots { width: 22px; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #f5a04e 0 33%, #f2c14e 33% 66%, #8ccb72 66%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.tg-section { scroll-margin-top: 96px; }
.tg-section + .tg-section { margin-top: clamp(44px, 6vw, 72px); }
.tg-section h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin: 0 0 18px; }
.tg-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.tg-sheet { display: flex; flex-direction: column; min-width: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--shadow-soft); overflow: hidden; scroll-margin-top: 96px; }
.tg-sheet:target { outline: 3px solid var(--link); outline-offset: 3px; }
.tg-sheet__thumb { display: block; padding: 14px; background: var(--wash); border-bottom: 1px solid var(--rule); }
.tg-sheet__thumb img { display: block; width: 100%; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 1px 3px rgba(15, 39, 66, .14); transition: transform .15s ease; }
.tg-sheet__thumb:hover img { transform: translateY(-2px); }
.tg-sheet__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.tg-sheet h3 { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.tg-sheet__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .9rem; line-height: 1.4; }
.tg-grade { padding: .15em .7em; border-radius: 999px; background: #fff3d1; color: #6e4d00; font-weight: 600; white-space: nowrap; }
.tg-skill { color: var(--ink-soft); }
.tg-sheet__about { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }
.tg-sheet__go { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: auto; padding-top: 6px; }
.tg-sheet__go .btn { align-self: stretch; }
.tg-sheet__game { color: var(--link); font-weight: 600; font-size: .92rem; text-underline-offset: 3px; }
.tg-sheet__game:hover { color: var(--link-deep); }

.tg-how__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 1000px; margin: 8px auto 0; padding: 0; list-style: none; }
.tg-how__list li { display: grid; align-content: start; gap: 6px; padding: 20px 22px; }
.tg-how__list b { font: 700 1.15rem/1.2 var(--headline); color: var(--ink); }
.tg-how__list span { color: var(--ink-soft); }

@media (max-width: 1100px) { .tg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .tg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tg-hero__in { grid-template-columns: 1fr; }
  .tg-car { width: min(92%, 380px); }
  .tg-how__list { grid-template-columns: 1fr; max-width: 560px; }
}
@media (max-width: 560px) {
  .tg-hero .cta-row .btn { width: 100%; }
  .tg-grid { grid-template-columns: 1fr; gap: 14px; }
  .tg-sheet { flex-direction: row; }
  .tg-sheet__thumb { flex: none; width: 116px; padding: 10px; border-bottom: 0; border-right: 1px solid var(--rule); }
  .tg-sheet__body { padding: 12px 14px 14px; gap: 6px; }
  .tg-sheet h3 { font-size: 1.08rem; }
  .tg-sheet__about { font-size: .9rem; }
}

/* The monthly pack's email box (src/printables.js): words left, box right; stacked on a phone. */
.tg-hero__more { margin: 14px 0 0; font-weight: 600; }
.tg-hero__more a { color: var(--link); text-underline-offset: 3px; }
.tg-monthly { scroll-margin-top: 80px; }
.tg-monthly__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(22px, 4vw, 40px); background: var(--sky); border-color: var(--rule-sky); box-shadow: none; }
.tg-monthly h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.tg-monthly__words p { margin: 0; color: var(--ink-soft); }
.tg-monthly__form label { display: block; margin-bottom: 6px; font-weight: 600; }
.tg-monthly__row { display: flex; gap: 10px; }
.tg-monthly__row input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--rule-sky); border-radius: var(--r-control); background: var(--card); color: var(--ink); font: 400 1.05rem var(--body); }
.tg-monthly__row input:focus-visible { outline: 3px solid var(--link); outline-offset: 1px; }
.tg-monthly__row .btn { flex: none; }
.tg-monthly__row .btn:disabled { opacity: 1; cursor: progress; background: var(--brand-deep); }
.tg-monthly__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tg-monthly__say { min-height: 1.4em; margin: 8px 0 0; color: var(--ink-soft); font-size: .95rem; }
.tg-monthly__say.is-bad { color: var(--danger); font-weight: 600; }
.tg-monthly__fine { margin: 4px 0 0; color: var(--ink-soft); font-size: .88rem; }
.tg-monthly__done { padding: 18px 20px; border-radius: var(--r-control); background: #e1f5ec; color: #0a6646; outline: none; }
.tg-monthly__done p { margin: 0; color: #0a6646; }
.tg-monthly__done b { color: #0a6646; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .tg-monthly__say.is-bad { color: #ffb4ab; } }
:root[data-theme='dark'] .tg-monthly__say.is-bad { color: #ffb4ab; }
@media (max-width: 820px) { .tg-monthly__card { grid-template-columns: 1fr; } }
@media (max-width: 460px) {
  .tg-monthly__row { flex-direction: column; }
  .tg-monthly__row .btn { width: 100%; }
}