/* Study Station v2 — design system
   Mobile-first. Tokens → base → layout → components → player → motion. */

/* Colour, shape, type and motion follow Google's Material Design 3 (m3.material.io).
   Palette generated with Google's material-color-utilities from seed #1A73E8 (Google Blue):
   primary = SchemeFidelity, surfaces/secondary = SchemeTonalSpot, success/warning harmonised to the seed;
   CBT "marked for review" stays purple like TCS iON. Every text pair is ≥ 4.5:1 (WCAG AA) in both themes.
   Components use the short aliases below (--bg, --surface, --brand…), which point at the M3 roles. */
:root {
  --font: "Noto Sans Devanagari", "Noto Sans", "Google Sans", Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* M3 type scale (body-large 16 → title-large 22 → headline-small 24 → headline-medium 28) */
  --fs-2xs: .6875rem; --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.375rem; --fs-xl: 1.5rem; --fs-2xl: 1.75rem;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  /* M3 shape scale: small 8 · medium 12 · large 16 · extra-large 28 · full */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 28px; --r-pill: 999px;
  /* M3 motion: durations short4 / medium2 / long1, emphasized easing family */
  --dur-1: 100ms; --dur-2: 200ms; --dur-3: 300ms; --dur-4: 450ms;
  --ease-emph: cubic-bezier(.2, 0, 0, 1); --ease-decel: cubic-bezier(.05, .7, .1, 1); --ease-accel: cubic-bezier(.3, 0, .8, .15);
  --ease-out: var(--ease-decel); --ease-in-out: var(--ease-emph);
  --tap: 44px; --swatch: 28px; --empty-icon: 48px;
  --header-h: 64px; --tabbar-h: 72px;
  /* state layers (M3): hover 8 % · pressed/focus 10 % of the content colour */
  --hover: 8%; --press: 10%;

  --md-primary: #005bbf; --md-on-primary: #ffffff; --md-primary-container: #d8e2ff;
  --md-on-primary-container: #2a4678; --md-secondary-container: #dbe2f9;
  --md-on-secondary-container: #3f4759; --md-tertiary: #715574; --md-tertiary-container: #fbd7fc;
  --md-on-tertiary-container: #583e5b; --md-error: #ba1a1a; --md-on-error: #ffffff;
  --md-error-container: #ffdad6; --md-on-error-container: #93000a; --md-surface: #f9f9ff;
  --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f3f3fa;
  --md-surface-container: #ededf4; --md-surface-container-high: #e8e7ee;
  --md-surface-container-highest: #e2e2e9; --md-on-surface: #1a1b20; --md-on-surface-variant: #44474f;
  --md-text-3: #5d5e64; --md-outline: #74777f; --md-outline-variant: #c4c6d0;
  --md-inverse-surface: #2f3036; --md-inverse-on-surface: #f0f0f7; --md-success: #1b6b45;
  --md-on-success: #ffffff; --md-success-container: #abf9c8; --md-on-success-container: #003920;
  --md-warning: #96490b; --md-on-warning: #ffffff; --md-warning-container: #ffe3d4;
  --md-on-warning-container: #522300; --md-review: #6e46ba; --md-on-review: #ffffff;

  /* aliases used by the components */
  --bg: var(--md-surface); --surface: var(--md-surface-container-low); --surface-2: var(--md-surface-container-high);
  --surface-raised: var(--md-surface-container-lowest);
  --border: var(--md-outline-variant); --border-strong: var(--md-outline);
  --text: var(--md-on-surface); --text-2: var(--md-on-surface-variant); --text-3: var(--md-text-3);
  --brand: var(--md-primary); --on-brand: var(--md-on-primary);
  --brand-hover: color-mix(in srgb, var(--md-on-primary) var(--hover), var(--md-primary));
  --brand-soft: var(--md-secondary-container); --on-brand-soft: var(--md-on-secondary-container);
  --accent: var(--md-warning); --accent-soft: var(--md-warning-container);
  --ok: var(--md-success); --ok-soft: var(--md-success-container); --on-ok: var(--md-on-success);
  --bad: var(--md-error); --bad-soft: var(--md-error-container); --on-bad: var(--md-on-error);
  --warn: var(--md-warning); --warn-soft: var(--md-warning-container);
  --review: var(--md-review); --on-review: var(--md-on-review);
  --focus: var(--md-primary);
  --shadow: none;                       /* M3: elevation by tonal surface, not shadows */
  --shadow-2: 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);   /* M3 level-2, floating only */
  /* reading surfaces for the book reader (warm paper reduces glare on long reads) */
  --paper-bg: #FBF6EC; --paper-text: #2B2620; --paper-text-2: #5A5248;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #adc7ff; --md-on-primary: #002e68; --md-primary-container: #2a4678;
    --md-on-primary-container: #d8e2ff; --md-secondary-container: #3f4759;
    --md-on-secondary-container: #dbe2f9; --md-tertiary: #debcdf; --md-tertiary-container: #583e5b;
    --md-on-tertiary-container: #fbd7fc; --md-error: #ffb4ab; --md-on-error: #690005;
    --md-error-container: #93000a; --md-on-error-container: #ffdad6; --md-surface: #111318;
    --md-surface-container-lowest: #0c0e13; --md-surface-container-low: #1a1b20;
    --md-surface-container: #1e1f25; --md-surface-container-high: #282a2f;
    --md-surface-container-highest: #33353a; --md-on-surface: #e2e2e9; --md-on-surface-variant: #c4c6d0;
    --md-text-3: #aaabb1; --md-outline: #8e9099; --md-outline-variant: #44474f;
    --md-inverse-surface: #e2e2e9; --md-inverse-on-surface: #2f3036; --md-success: #8ad7a8;
    --md-on-success: #003920; --md-success-container: #004529; --md-on-success-container: #a5f3c3;
    --md-warning: #ffb68a; --md-on-warning: #522300; --md-warning-container: #632c00;
    --md-on-warning-container: #ffdbc8; --md-review: #d2bbff; --md-on-review: #3e0789;
    --shadow-2: 0 1px 3px rgba(0,0,0,.5), 0 4px 8px 3px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --md-primary: #adc7ff; --md-on-primary: #002e68; --md-primary-container: #2a4678;
  --md-on-primary-container: #d8e2ff; --md-secondary-container: #3f4759;
  --md-on-secondary-container: #dbe2f9; --md-tertiary: #debcdf; --md-tertiary-container: #583e5b;
  --md-on-tertiary-container: #fbd7fc; --md-error: #ffb4ab; --md-on-error: #690005;
  --md-error-container: #93000a; --md-on-error-container: #ffdad6; --md-surface: #111318;
  --md-surface-container-lowest: #0c0e13; --md-surface-container-low: #1a1b20;
  --md-surface-container: #1e1f25; --md-surface-container-high: #282a2f;
  --md-surface-container-highest: #33353a; --md-on-surface: #e2e2e9; --md-on-surface-variant: #c4c6d0;
  --md-text-3: #aaabb1; --md-outline: #8e9099; --md-outline-variant: #44474f;
  --md-inverse-surface: #e2e2e9; --md-inverse-on-surface: #2f3036; --md-success: #8ad7a8;
  --md-on-success: #003920; --md-success-container: #004529; --md-on-success-container: #a5f3c3;
  --md-warning: #ffb68a; --md-on-warning: #522300; --md-warning-container: #632c00;
  --md-on-warning-container: #ffdbc8; --md-review: #d2bbff; --md-on-review: #3e0789;
  --shadow-2: 0 1px 3px rgba(0,0,0,.5), 0 4px 8px 3px rgba(0,0,0,.3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-md)/1.6 var(--font);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
:lang(hi) body, body:lang(hi) { line-height: 1.75; }
/* Long unbroken strings in questions ("2,3,5,7,11,…", formulas) must wrap — otherwise a phone zooms the
   whole page out and the fixed action bar ends up off-screen. */
body { overflow-wrap: break-word; }
.q-text, .option .val, .solution, .book-body, .review-body, .fc-text { overflow-wrap: anywhere; min-width: 0; }
h1, h2, h3 { line-height: 1.3; margin: 0 0 var(--sp-3); }
h1 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: 0; }
h2 { font-size: var(--fs-lg); font-weight: 600; }
h3 { font-size: var(--fs-md); font-weight: 600; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--brand); text-underline-offset: 3px; }
img, svg { display: block; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }   /* the hidden attribute must win over .row / .card display rules */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Skip link: visible when focused from the keyboard */
a.sr-only:focus { position: fixed; z-index: 100; left: var(--sp-3); top: var(--sp-3); width: auto; height: auto; clip: auto; overflow: visible;
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none; }
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 var(--sp-4); }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.muted { color: var(--text-2); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
main, main.wrap { padding-block: var(--sp-5) var(--sp-6); }
.grow { flex: 1; min-width: 0; }
/* Small text links (breadcrumbs, "Settings", "All") keep a 44px tap height without looking like buttons. */
.tap-link { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--sp-1); margin-inline: calc(-1 * var(--sp-1)); }
.crumb { margin: 0; }
.h1-sm { font-size: var(--fs-lg); }

.topbar {
  position: sticky; top: 0; z-index: 20; height: var(--header-h);
  background: var(--bg);
  transition: background-color var(--dur-2) var(--ease-emph);
}
body.scrolled .topbar { background: var(--md-surface-container); }      /* M3 top app bar: tint on scroll */
.topbar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.brand { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); min-width: 0; flex: 1 1 auto; font-weight: 600; font-size: var(--fs-lg); color: var(--text); text-decoration: none; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.brand-mark { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--brand); color: var(--on-brand); display: grid; place-items: center; }
.top-actions { display: flex; gap: var(--sp-2); flex: none; }
.brand-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .brand-name { font-size: var(--fs-md); } }

.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--md-surface-container);
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--text-2); text-decoration: none; font-size: var(--fs-xs); font-weight: 500; min-height: var(--tap);
  position: relative; gap: var(--sp-1);
}
/* M3 navigation bar: 64×32 pill indicator behind the active icon */
.tab .icon { width: 64px; height: 32px; padding: 4px 20px; border-radius: var(--r-pill);
  transition: background-color var(--dur-2) var(--ease-emph); }
.tab[aria-current="page"] { color: var(--text); font-weight: 700; }
.tab[aria-current="page"] .icon { background: var(--brand-soft); color: var(--on-brand-soft); }
@media (hover: hover) { .tab:not([aria-current]):hover .icon { background: color-mix(in srgb, var(--text) var(--hover), transparent); } }
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .tabbar { position: sticky; top: var(--header-h); inset: auto; height: auto; padding: 0; border: 0; background: transparent;
            display: flex; justify-content: center; gap: var(--sp-2); max-width: 760px; margin: var(--sp-3) auto 0; }
  .tab { flex-direction: row; gap: var(--sp-2); padding: 0 var(--sp-4); border-radius: var(--r-pill); font-size: var(--fs-sm); }
  .tab .icon { width: 22px; height: 22px; padding: 0; background: none !important; }
  .tab[aria-current="page"] { background: var(--brand-soft); color: var(--on-brand-soft); }
}

/* ---------------------------------------------------------------- components */
.card { background: var(--surface); border: 0; border-radius: var(--r-lg); padding: var(--sp-4); }
.card-link { display: block; color: inherit; text-decoration: none; position: relative; overflow: hidden;
  transition: background-color var(--dur-2) var(--ease-emph); }
@media (hover: hover) { .card-link:hover { background: color-mix(in srgb, var(--text) var(--hover), var(--surface)); } }
.card-link:active { background: color-mix(in srgb, var(--text) var(--press), var(--surface)); }
.card-link.row { display: flex; }                  /* keep icon · text · chevron on one line */
/* Horizontal carousel (M3): cards peek in from the right so it is clear the row scrolls. */
.hscroll { display: flex; gap: var(--sp-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--sp-4)); padding: 0 var(--sp-4) var(--sp-1); scroll-padding-inline: var(--sp-4); }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { flex: 0 0 min(70%, 240px); scroll-snap-align: start; }
.exam-card { padding: var(--sp-3) var(--sp-4); }
.exam-card h3 { font-size: var(--fs-md); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-5); border-radius: var(--r-pill); border: 1px solid transparent;
  font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  transition: background-color var(--dur-1) var(--ease-emph), box-shadow var(--dur-2) var(--ease-emph);
}
.btn[disabled] { opacity: 1; cursor: not-allowed; transform: none; background: var(--surface-2); color: var(--text-3); border-color: var(--border); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
@media (hover: hover) { .btn-primary:hover { background: var(--brand-hover); box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15); } }
.btn-primary:active { background: color-mix(in srgb, var(--on-brand) var(--press), var(--brand)); }
/* M3 tonal button */
.btn-secondary { background: var(--brand-soft); color: var(--on-brand-soft); }
@media (hover: hover) { .btn-secondary:hover { background: color-mix(in srgb, var(--on-brand-soft) var(--hover), var(--brand-soft)); } }
.btn-secondary:active { background: color-mix(in srgb, var(--on-brand-soft) var(--press), var(--brand-soft)); }
/* M3 text button */
.btn-ghost { background: transparent; color: var(--brand); padding: 0 var(--sp-3); }
@media (hover: hover) { .btn-ghost:hover { background: color-mix(in srgb, var(--brand) var(--hover), transparent); } }
.btn-block { width: 100%; }
.btn-sm { min-height: var(--tap); padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.icon-btn { width: var(--tap); height: var(--tap); padding: 0; border-radius: var(--r-pill); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--sp-3);
  border-radius: var(--r-sm); border: 1px solid var(--border-strong); background: transparent;
  font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden; transition: background-color var(--dur-1) var(--ease-emph);
}
@media (hover: hover) { .chip:hover { background: color-mix(in srgb, var(--text-2) var(--hover), transparent); } }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip:has(input:checked) { background: var(--brand-soft); border-color: transparent; color: var(--on-brand-soft); font-weight: 600; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* One scrollable row instead of a wall of chips (long category / filter lists). */
.chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll > * { flex: none; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.job-title { margin: var(--sp-2) 0 4px; font-size: var(--fs-md); line-height: 1.45; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-sm); font-size: var(--fs-xs); font-weight: 600; background: var(--surface-2); color: var(--text-2); }
.badge-ok { background: var(--ok-soft); color: var(--md-on-success-container); }
.badge-bad { background: var(--bad-soft); color: var(--md-on-error-container); }
.badge-warn { background: var(--warn-soft); color: var(--md-on-warning-container); }
.badge-brand { background: var(--brand-soft); color: var(--on-brand-soft); }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.stat { background: var(--surface); border-radius: var(--r-lg); padding: var(--sp-3) var(--sp-4); }
.stat b { display: block; font-size: var(--fs-2xl); font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--fs-xs); color: var(--text-2); }

.meter { height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: inherit; background: var(--brand); transform-origin: left; }
.meter.ok > i { background: var(--ok); } .meter.bad > i { background: var(--bad); } .meter.warn > i { background: var(--accent); }

.list { list-style: none; margin: 0; padding: 0; }
.list > li + li { border-top: 1px solid var(--border); }
.list-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; min-height: 56px; color: inherit; text-decoration: none; }
.list-item .grow { flex: 1; min-width: 0; }
.chev { color: var(--text-3); }

.notice { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); background: var(--warn-soft); color: var(--md-on-warning-container); font-size: var(--fs-sm); }
.notice .icon { color: var(--warn); }
.empty { text-align: center; padding: var(--sp-7) var(--sp-4); color: var(--text-2); }
.empty-icon { width: var(--empty-icon); height: var(--empty-icon); margin: 0 auto var(--sp-3); color: var(--brand); }
.empty .btn { margin-top: var(--sp-2); }

table.pattern { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.pattern th, table.pattern td { text-align: left; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--border); }
table.pattern th { color: var(--text-2); font-weight: 600; }
table.pattern td.num, table.pattern th.num { text-align: right; font-variant-numeric: tabular-nums; }

fieldset { border: 0; padding: 0; margin: 0 0 var(--sp-5); }
legend { font-weight: 700; margin-bottom: var(--sp-3); }

.hero { padding: var(--sp-5); border-radius: var(--r-xl); background: var(--brand); color: var(--on-brand); }
.hero p { opacity: .9; }
.streak { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent); }

/* ---------------------------------------------------------------- home: today */
.block { display: block; }
.today-card { padding: var(--sp-5) var(--sp-4) var(--sp-4); border-radius: var(--r-xl); background: var(--md-primary-container); color: var(--md-on-primary-container); }
.today-top { display: flex; align-items: center; gap: var(--sp-4); }
.today-hello { margin: 0 0 var(--sp-1); font-size: var(--fs-2xl); color: inherit; }
.today-goal { margin: 0; font-size: var(--fs-sm); }
.ring { --size: 76px; position: relative; flex: none; width: var(--size); height: var(--size); display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring-track { stroke: color-mix(in srgb, currentColor 18%, transparent); }
.ring-fill { stroke: var(--brand); stroke-linecap: round; transition: stroke-dasharray var(--dur-4) var(--ease-decel); animation: ring-in 800ms var(--ease-decel) both; }
.ring span { position: relative; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.ring b { font-size: var(--fs-lg); font-weight: 600; }
@keyframes ring-in { from { stroke-dasharray: 0 100; } }
.week { display: flex; align-items: flex-end; gap: 6px; margin-top: var(--sp-4); font-size: var(--fs-2xs); }
.week .day { display: grid; justify-items: center; gap: 4px; width: 22px; opacity: .8; }
.week .day i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid currentColor; opacity: .5; }
.week .day.is-on i { background: var(--brand); border-color: var(--brand); opacity: 1; }
.week .day.is-today { opacity: 1; font-weight: 700; }
.week .streak { margin-left: auto; font-size: var(--fs-xs); color: inherit; font-weight: 600; white-space: nowrap; align-self: center; }
.week .streak .icon { color: var(--accent); }
.plan h2 { margin-bottom: var(--sp-1); }
.plan .list-item { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit;
  border-radius: var(--r-md); padding-inline: var(--sp-2); margin-inline: calc(-1 * var(--sp-2)); width: calc(100% + 2 * var(--sp-2)); }
@media (hover: hover) { .plan .list-item:hover { background: color-mix(in srgb, var(--text) var(--hover), transparent); } }
.plan-dot { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--on-brand-soft); }
.plan-dot.is-done { background: var(--ok); color: var(--on-ok); }

/* ---------------------------------------------------------------- practice: tiles, search, subject tabs */
.tile-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3); margin: var(--sp-4) 0; }
.tile { display: grid; gap: 2px; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface); text-decoration: none; color: inherit; }
.tile .icon { color: var(--brand); margin-bottom: var(--sp-2); }
.tile:only-child { grid-template-columns: auto 1fr; column-gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--sp-4); }
.tile:only-child .icon { grid-row: span 2; margin: 0; }
/* M3 search bar */
.search { display: flex; align-items: center; gap: var(--sp-3); height: 56px; padding: 0 var(--sp-4); margin: var(--sp-4) 0 var(--sp-2);
  border-radius: var(--r-pill); background: var(--md-surface-container-high); color: var(--text-2); cursor: text; }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; outline: 0; font-size: var(--fs-md); color: var(--text); }
.search input::placeholder { color: var(--text-3); }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.subject-tabs { margin: 0 0 var(--sp-4); }
.subject-tabs .chip { flex: none; }
.js .subject-sec.is-hidden, [data-topic-name].is-hidden { display: none; }

/* ---------------------------------------------------------------- progress */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 32px)); justify-content: space-between; gap: 6px; margin-top: var(--sp-2); }
.cal-h { text-align: center; font-size: var(--fs-2xs); color: var(--text-2); }
.cal-d { aspect-ratio: 1; border-radius: var(--r-sm); background: var(--md-surface-container-highest); }
.cal-d.is-on { background: var(--brand); }
.cal-d.is-future { background: transparent; border: 1px dashed var(--border); }
.bars { display: grid; gap: var(--sp-3); }
.bar-row { display: grid; grid-template-columns: minmax(80px, 34%) 1fr 44px; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 12px; border-radius: var(--r-pill); background: var(--md-surface-container-highest); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--ok); transform-origin: left; animation: grow 700ms var(--ease-decel) both; }
.bar i.warn { background: var(--accent); } .bar i.bad { background: var(--bad); }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.spark { display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-top: var(--sp-4); }
.spark span { flex: 1; min-width: 0; position: relative; border-radius: 6px 6px 2px 2px; background: var(--brand-soft);
  transform-origin: bottom; animation: rise 700ms var(--ease-decel) both; }
.spark span:last-child { background: var(--brand); }
.spark i { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-style: normal; font-size: var(--fs-2xs); color: var(--text-2); }
@keyframes rise { from { transform: scaleY(0); } }

/* ---------------------------------------------------------------- result insights */
.insights { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.insights h2 { display: flex; align-items: center; gap: var(--sp-2); color: inherit; }
.ins-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ins { position: relative; padding: var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 6px); border-radius: var(--r-md);
  background: var(--surface-raised); color: var(--text); font-size: var(--fs-sm); line-height: 1.6; }
.ins::before { content: ""; position: absolute; left: 0; top: var(--sp-2); bottom: var(--sp-2); width: 4px; border-radius: 4px; background: var(--brand); }
.ins-ins_negative::before, .ins-ins_guess::before, .ins-ins_slow::before { background: var(--bad); }
.ins-ins_strong::before { background: var(--ok); }
.ins-ins_time_left::before { background: var(--accent); }

/* ---------------------------------------------------------------- player */
.player { padding-bottom: 96px; }
.player-head { position: sticky; top: var(--header-h); z-index: 10; background: var(--bg); padding: var(--sp-3) 0; }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
.timer.low { color: var(--bad); }
.progress-line { height: 4px; background: var(--surface-2); border-radius: var(--r-pill); overflow: hidden; margin-top: var(--sp-2); }
.progress-line > i { display: block; height: 100%; background: var(--brand); transition: width var(--dur-3) var(--ease-out); }

.q-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.q-text { font-size: 1.125rem; font-weight: 500; line-height: 1.7; white-space: pre-line; margin-bottom: var(--sp-4); }
.options { display: grid; gap: var(--sp-2); }
.option {
  display: flex; gap: var(--sp-3); align-items: flex-start; width: 100%; text-align: left;
  padding: var(--sp-3) var(--sp-4); min-height: 56px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface-raised); cursor: pointer; position: relative; overflow: hidden;
  transition: border-color var(--dur-1) var(--ease-emph), background-color var(--dur-1) var(--ease-emph), box-shadow var(--dur-1) var(--ease-emph);
}
.option .key { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: var(--fs-sm); background: var(--surface-2); }
.option .val { padding-top: 2px; }
@media (hover: hover) { .option:not([disabled]):hover { background: color-mix(in srgb, var(--text) var(--hover), var(--surface-raised)); } }
.option[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.option[aria-pressed="true"] .key { background: var(--brand); color: var(--on-brand); }
.option.is-correct { border-color: var(--ok); box-shadow: inset 0 0 0 1px var(--ok); background: var(--ok-soft); color: var(--md-on-success-container); }
.option.is-correct .key { background: var(--ok); color: var(--on-ok); }
.option.is-wrong { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); background: var(--bad-soft); color: var(--md-on-error-container); }
.option.is-wrong .key { background: var(--bad); color: var(--on-bad); }
.option[disabled], .option[aria-disabled] { cursor: default; opacity: 1; }
.option[disabled]:not(.is-correct):not(.is-wrong), .option[aria-disabled]:not(.is-correct):not(.is-wrong) { color: var(--text); }
.option .tag { margin-left: auto; font-size: var(--fs-xs); font-weight: 800; align-self: center; }

.solution { margin-top: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--md-surface-container); white-space: pre-line; }
.feedback { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; margin-top: var(--sp-4); }
.feedback.ok { color: var(--ok); } .feedback.bad { color: var(--bad); }

.action-bar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 25;
  background: var(--md-surface-container); padding: var(--sp-3) 0;
}
.action-bar .wrap { display: flex; gap: var(--sp-2); }
.action-bar .btn { flex: 1; min-width: 0; white-space: normal; line-height: 1.2; padding: 0 var(--sp-2); text-align: center; }
.action-bar .btn .icon { display: none; }
@media (min-width: 480px) { .action-bar .btn .icon { display: block; } }
/* Question screens own the bottom edge: no tab bar under the action bar (practice, revise, mock). */
body.cbt .tabbar, body.player-open .tabbar { display: none; }
body.cbt, body.player-open { padding-bottom: 0; }
body.cbt .action-bar, body.player-open .action-bar { bottom: 0; padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
/* Mock = exam hall: no site chrome, the exam header sticks to the very top. */
body.cbt .topbar { display: none; }
body.cbt .player-head { top: 0; }
body.cbt main.wrap { padding-top: 0; }
@media (min-width: 900px) { .action-bar { bottom: 0; } }

.sec-tabs { display: flex; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; margin-top: var(--sp-2);
  padding-right: var(--sp-6); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }   /* fade = "more to scroll" */
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tabs > * { flex: none; white-space: nowrap; }

/* Question palette — same shapes as the TCS iON CBT so the exam hall feels familiar (and not colour-only):
   not visited = grey square · not answered = red, pointed bottom · answered = green, pointed top ·
   marked = purple circle · marked + answered = purple circle with a ✓ badge.
   The shape is drawn on ::before so the focus/current outline is not clipped. */
.palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--tap), 1fr)); gap: var(--sp-2); justify-items: center; }
.pal {
  --pal-size: var(--tap);
  width: var(--pal-size); height: var(--pal-size); padding: 0; border: 0; background: none; color: var(--text);
  display: inline-grid; place-items: center; flex: none;
  font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; position: relative; isolation: isolate;
}
.pal::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--surface-2); border: 2px solid var(--border-strong); border-radius: var(--r-sm);
}
.pal.unanswered { color: var(--on-bad); padding-bottom: calc(var(--pal-size) / 6); }
.pal.unanswered::before { background: var(--bad); border-color: var(--bad); border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); }
.pal.answered { color: var(--on-ok); padding-top: calc(var(--pal-size) / 6); }
.pal.answered::before { background: var(--ok); border-color: var(--ok); border-radius: 0; clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%); }
.pal.marked { color: var(--on-review); padding: 0; }
.pal.marked::before { background: var(--review); border-color: var(--review); border-radius: 50%; clip-path: none; }
.pal.marked.answered::after {
  content: "✓"; position: absolute; right: calc(-1 * var(--sp-1)); bottom: calc(-1 * var(--sp-1));
  width: var(--sp-4); height: var(--sp-4); border-radius: 50%; display: grid; place-items: center;
  background: var(--ok); color: var(--on-ok); border: 2px solid var(--surface); box-sizing: content-box;
  font-size: var(--fs-xs); line-height: 1;
}
.pal.current { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.pal-mini { --pal-size: var(--swatch); font-size: var(--fs-xs); cursor: default; }
.pal-mini.marked.answered::after { width: var(--sp-3); height: var(--sp-3); font-size: var(--fs-2xs); }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--text-2); }
.legend > span { display: inline-flex; align-items: center; gap: var(--sp-2); line-height: 1.3; }
.sum-table th { vertical-align: bottom; font-size: var(--fs-xs); line-height: 1.3; }
.sum-table th .pal-mini { display: grid; margin: 0 0 var(--sp-1) auto; }
.sum-table tfoot td { font-weight: 800; border-bottom: 0; }

dialog { border: 0; border-radius: var(--r-xl); padding: 0; width: min(560px, calc(100% - 32px)); background: var(--md-surface-container-high); color: var(--text); box-shadow: var(--shadow-2); }
dialog::backdrop { background: rgba(0,0,0,.32); }
dialog[open] { animation: dlg-in var(--dur-4) var(--ease-decel); }
dialog .dlg-body { padding: var(--sp-5); max-height: 75vh; overflow-y: auto; }
dialog .dlg-foot { padding: var(--sp-3) var(--sp-5) var(--sp-5); display: flex; gap: var(--sp-2); justify-content: flex-end; }
dialog .dlg-foot .btn { min-height: var(--tap); }

/* Result review: one collapsed row per question; tap to see options + solution. */
.review-item { padding: 0; }
.review-item > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap); padding: var(--sp-3) var(--sp-4);
}
.review-item > summary::-webkit-details-marker { display: none; }
.review-item > summary .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: var(--fs-sm); }
.review-item > summary .chev { transition: transform var(--dur-2) var(--ease-out); }
.review-item[open] > summary .chev { transform: rotate(90deg); }
.review-item[open] > summary { border-bottom: 1px solid var(--border); }
.review-body { padding: var(--sp-4); }

.toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 88px); transform: translateX(-50%); z-index: 50;
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  font-size: var(--fs-sm); font-weight: 500; box-shadow: var(--shadow-2); max-width: calc(100% - 32px); }

.score-ring { --pct: 0; width: 132px; height: 132px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto var(--sp-4);
  background: conic-gradient(var(--brand) calc(var(--pct) * 1%), var(--surface-2) 0); }
.score-ring > div { width: 112px; height: 112px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; text-align: center; }
.score-ring b { font-size: var(--fs-xl); display: block; line-height: 1.1; }

/* ---------------------------------------------------------------- books */
.book-tabs { margin: 0 0 var(--sp-3); padding-bottom: var(--sp-1); }
.book-tabs .chip { flex: none; }
.book-body { overflow-wrap: break-word; }
.book-body > :first-child { margin-top: 0; }
.book-body h2 { font-size: var(--fs-lg); margin-top: var(--sp-5); }
.book-body h3 { font-size: var(--fs-md); margin-top: var(--sp-5); color: var(--brand); }
.book-body h4 { font-size: var(--fs-md); margin: var(--sp-4) 0 var(--sp-2); }
.book-body ul, .book-body ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.book-body li + li { margin-top: var(--sp-1); }
.book-body hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
.book-body .notice { margin-bottom: var(--sp-3); }
.book-body .table-scroll { margin: 0 0 var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); }
.book-table { border-collapse: collapse; min-width: 100%; font-size: var(--fs-sm); line-height: 1.5; }
.book-table th, .book-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; min-width: 7em; }
.book-table thead th { background: var(--surface-2); font-weight: 700; }
.book-table tbody tr:last-child td { border-bottom: 0; }
.book-pre { margin: 0 0 var(--sp-3); padding: var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-sm); white-space: pre-wrap; overflow-x: auto; }
.book-lang { margin: 0 0 var(--sp-2); }
.book-lang .tap-link { gap: var(--sp-1); }
.ch-num { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.list-item.is-todo { color: var(--text-3); }
.list-item.is-read .ch-num { background: var(--ok); color: var(--on-ok); }
.list-item.is-todo .ch-num { background: var(--surface-2); color: var(--text-3); }
.chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-top: var(--sp-4); }
.chapter-nav .btn { min-width: 0; padding: var(--sp-2) var(--sp-3); justify-content: space-between; white-space: normal; text-align: left; }
.chapter-nav .btn[rel="next"] { grid-column: 2; text-align: right; }
.nav-txt { display: flex; flex-direction: column; min-width: 0; font-size: var(--fs-sm); line-height: 1.3; }
.flip-x { transform: scaleX(-1); }

/* Reader settings (Play Books style): page colour + text size, remembered on the device. */
.reader-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: space-between; margin: 0 0 var(--sp-3); }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-pill); overflow: hidden; }
.seg-btn { min-height: var(--tap); min-width: 48px; padding: 0 var(--sp-3); border: 0; background: transparent; color: var(--text-2);
  font-size: var(--fs-sm); font-weight: 500; cursor: pointer; position: relative; overflow: hidden; }
.seg-wide { display: flex; } .seg-wide .seg-btn { flex: 1; min-height: 48px; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border-strong); }
.seg-btn[aria-pressed="true"] { background: var(--brand-soft); color: var(--on-brand-soft); font-weight: 700; }
#reader { --reader-scale: 1; font-size: calc(var(--fs-md) * var(--reader-scale)); transition: background-color var(--dur-3) var(--ease-emph), color var(--dur-3) var(--ease-emph); }
/* Each reader mode is a complete palette (independent of the app theme), so cards, flashcards, the mind
   map, links and notices inside it always contrast. Paper = warm light; Night = warm dark. */
#reader.reader-paper {
  --text: #2B2620; --text-2: #5A5248; --text-3: #6A6156; --surface: #FBF6EC; --surface-2: #F1EADC; --surface-raised: #FFFCF6;
  --border: #E2D8C6; --border-strong: #9C8F7C; --brand: #7A4E12; --on-brand: #FFFFFF; --brand-soft: #F3E3C6; --on-brand-soft: #4A2E05;
  --warn-soft: #F7E2C4; --md-on-warning-container: #4A2600;
  background: var(--surface); color: var(--text); color-scheme: light; }
#reader.reader-night {
  --text: #E9E2D6; --text-2: #BDB4A6; --text-3: #A69D90; --surface: #1B1A17; --surface-2: #2A2823; --surface-raised: #24221E;
  --border: #3A372F; --border-strong: #6E6658; --brand: #E8C48A; --on-brand: #2A1D05; --brand-soft: #3A3226; --on-brand-soft: #F2DDB8;
  --warn-soft: #3A2C14; --md-on-warning-container: #F5D9A8;
  background: var(--surface); color: var(--text); color-scheme: dark; }
#reader.reader-paper a, #reader.reader-night a { color: var(--brand); }
#reader.reader-paper .book-pre, #reader.reader-night .book-pre { color: inherit; }

/* Mind map: mermaid graph rendered server-side as a collapsible tree (no JS library). */
.mm-tree, .mm-tree ul { list-style: none; margin: 0; padding: 0; }
.mm-tree ul { margin-left: var(--sp-3); padding-left: var(--sp-3); border-left: 2px solid var(--border); }
.mm-tree li { margin: var(--sp-2) 0; }
.mm-node { display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-md); background: var(--surface-2); line-height: 1.45; }
.mm-tree summary.mm-node { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; list-style: none; background: var(--brand-soft); color: var(--on-brand-soft); font-weight: 600; }
.mm-tree summary::-webkit-details-marker { display: none; }
.mm-tree summary::before { content: "›"; display: inline-block; font-weight: 800; transition: transform var(--dur-2) var(--ease-out); }
.mm-tree details[open] > summary::before { transform: rotate(90deg); }
.mm-tree > li > details > summary.mm-node { background: var(--brand); color: var(--on-brand); font-size: var(--fs-md); }

/* Flashcards: tap to flip (transform only; reduced motion = instant swap). */
.book-body .fc-list, .fc-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-3); }
.fc { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; perspective: 1200px; border-radius: var(--r-lg); }
.fc-inner { display: grid; transform-style: preserve-3d; transition: transform var(--dur-3) var(--ease-out); }
.fc[aria-expanded="true"] .fc-inner { transform: rotateY(180deg); }
.fc-face { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--sp-2); min-height: 132px; padding: var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-raised);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: visibility 0s linear var(--dur-2); }
.fc-back { transform: rotateY(180deg); background: var(--brand-soft); color: var(--on-brand-soft); border-color: transparent; }
.fc[aria-expanded="false"] .fc-back, .fc[aria-expanded="true"] .fc-front { visibility: hidden; }
.fc-num { font-size: var(--fs-xs); font-weight: 800; color: var(--text-2); }
.fc-text { font-weight: 600; }
.fc-hint { margin-top: auto; font-size: var(--fs-xs); font-weight: 700; color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .fc-face { transition-delay: 0s; } }

/* ---------------------------------------------------------------- page transitions */
/* Cross-page "fade through" (M3) with the View Transitions API — Chrome/Android only, ignored elsewhere.
   App bars keep their own names so they stay put while the content changes. */
@view-transition { navigation: auto; }
.topbar { view-transition-name: topbar; }
.tabbar { view-transition-name: tabbar; }
::view-transition-old(root) { animation: 90ms var(--ease-accel) both vt-out; }
::view-transition-new(root) { animation: 210ms var(--ease-decel) 90ms both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Reading progress (chapter pages): thin bar under the top app bar */
.read-progress { position: fixed; left: 0; right: 0; top: var(--header-h); height: 3px; z-index: 19; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }

/* ---------------------------------------------------------------- motion */
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes grow { from { transform: scaleX(0); } }
@keyframes dlg-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ripple { from { transform: scale(0); opacity: .14; } to { transform: scale(1); opacity: 0; } }
/* M3 ripple (static/js/app.js adds the span on pointerdown) */
.ripple { position: absolute; border-radius: 50%; background: currentColor; pointer-events: none; z-index: 0;
  animation: ripple var(--dur-4) var(--ease-decel) forwards; }
.enter { animation: enter var(--dur-3) var(--ease-decel) both; }
.option.is-correct.just { animation: pop var(--dur-3) var(--ease-out); }
.option.is-wrong.just { animation: shake var(--dur-3) var(--ease-in-out); }
.toast { animation: toast-in var(--dur-2) var(--ease-out); }
.meter > i { animation: grow 600ms var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}