/* Reset, type scale, page frame. Nothing below weight 600 — the type is part of
   the toy, not a neutral delivery vehicle. */
@import url('../vendor/fonts/nunito.css');

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Nunito, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.375;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: 100svh;
  overscroll-behavior-y: none;
}

#app {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 var(--sp-4) calc(96px + env(safe-area-inset-bottom));
  min-height: 100svh;
}

h1, h2, h3, p { margin: 0; }

button { font: inherit; color: inherit; }

img { max-width: 100%; display: block; }

/* Type roles */
.t-title   { font-size: 22px; line-height: 28px; font-weight: 800; letter-spacing: -0.2px; }
.t-prompt  { font-size: 20px; line-height: 26px; font-weight: 800; letter-spacing: -0.2px; }
.t-body    { font-size: 16px; line-height: 22px; font-weight: 600; }
.t-caption {
  font-size: 12px; line-height: 16px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
}

.num { font-variant-numeric: tabular-nums; }

/* KaTeX inherits the page ink so formulas never look pasted in */
.tex { color: inherit; }
.tex-display { display: block; margin: var(--sp-2) 0; font-size: 1.25em; }
.katex { font-size: 1.05em; }

/* KaTeX's own fonts carry no Cyrillic, so anything inside \text{} — "см", "тең" —
   would render as tofu. Hand those runs back to Nunito; the maths italics,
   operators and fraction rules keep the KaTeX faces. */
.katex .text,
.katex .text .mord,
.katex .mord.text {
  font-family: Nunito, system-ui, sans-serif;
  font-weight: 600;
}

:focus-visible {
  outline: 3px solid var(--brown-400);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}