/* Базовая палитра, типографика, сетка-«тетрадь». */
/* Layout: одна колонка. Пример пишется «в клетку» на листе тетради: одна цифра, один знак — одна клетка.
   Палитра: бумага, синяя паста (чернила), красная и зелёная ручки учителя. */
:root{
  --bg:#f4f8fd; --grid-faint:#e2ebf7; --paper:#fcfdff; --grid:#c6d6ec;
  --surface:#ffffff; --line:#b5c6df; --fg:#18233f; --muted:#55627f;
  --ink:#1d3b8b; --ink-fg:#ffffff; --red:#cf3328; --green:#17803f; --orange:#e0661a;
  --hand:"Neucha","Noto Sans Georgian","Segoe Print","Comic Sans MS",cursive;
  --ui:"Nunito","Noto Sans Georgian",system-ui,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0e1320; --grid-faint:#161e30; --paper:#121a2a; --grid:#26334d;
    --surface:#171f31; --line:#34415f; --fg:#e4ebfa; --muted:#9aa7c6;
    --ink:#93b8ff; --ink-fg:#0e1320; --red:#ff8a80; --green:#72d99c; --orange:#ffa24d; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1320; --grid-faint:#161e30; --paper:#121a2a; --grid:#26334d;
  --surface:#171f31; --line:#34415f; --fg:#e4ebfa; --muted:#9aa7c6;
  --ink:#93b8ff; --ink-fg:#0e1320; --red:#ff8a80; --green:#72d99c; --orange:#ffa24d; color-scheme:dark;
}
/* В Neucha нет казахских букв, и слово «жаттықтырғышы» рисовалось двумя шрифтами
   сразу. Caveat покрывает весь казахский алфавит, поэтому для него берём её целиком.
   Грузинскому отдельное правило не нужно: грузинских букв в Neucha нет вовсе,
   они целиком уходят в Noto, а цифры остаются рукописными. */
html[lang="kk"]{--hand:"Caveat","Neucha",cursive}

*{box-sizing:border-box}
body{
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid-faint) 1px,transparent 1px),linear-gradient(90deg,var(--grid-faint) 1px,transparent 1px);
  background-size:28px 28px;
  color:var(--fg); font:500 1rem/1.5 var(--ui);
  /* две строки сетки: содержимое тянется, футер прижимается к низу */
  min-height:100dvh; display:grid; grid-template-rows:1fr auto;
}
.wrap{max-width:40rem;margin:0 auto;padding-inline:1rem;padding-block:1.5rem 3rem;display:grid;gap:1.25rem}
h1{font:400 clamp(2rem,7vw,2.8rem)/1.05 var(--hand);color:var(--ink);margin:0;text-wrap:balance}
.lead{margin:.35rem 0 0;color:var(--muted);max-width:34rem}
button{font-family:var(--ui)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

[hidden]{display:none!important}