/* Layout: оглавление уроков и страница урока на «тетради в клетку»; пометки синей и красной ручкой.
   Цвета величин сквозные: «всего»/путь — синий, «в одном»/скорость — зелёный, «сколько»/время — оранжевый.
   Множества — как в учебнике: A жёлтым, B синим, общее выходит зелёным, объединение обводим красным. */
:root {
  --paper: #F6F8FC;
  --grid: #DEE6F1;
  --card: #FFFFFF;
  --line: #CAD4E3;
  --ink: #1C2640;
  --ink-soft: #586380;
  --pen: #2447B5;
  --red: #CC3A2C;
  --ok: #187A4B;
  --dist: #2C66D2;
  --speed: #137A58;
  --time: #B5620B;
  --setA: #F6CF4A;
  --setB: #93BCF7;
  --setAB: #9FCF78;
  --f-head: "Rubik", "Nunito", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #111726; --grid: #1A2234; --card: #192131; --line: #2C384F;
    --ink: #E6EBF5; --ink-soft: #A2ADC3; --pen: #93AEFF; --red: #FF7D6F; --ok: #55D195;
    --dist: #78A8FF; --speed: #4FCB98; --time: #FFB257;
    --setA: #7A6214; --setB: #2A4C80; --setAB: #3F6B2D;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #111726; --grid: #1A2234; --card: #192131; --line: #2C384F;
  --ink: #E6EBF5; --ink-soft: #A2ADC3; --pen: #93AEFF; --red: #FF7D6F; --ok: #55D195;
  --dist: #78A8FF; --speed: #4FCB98; --time: #FFB257;
  --setA: #7A6214; --setB: #2A4C80; --setAB: #3F6B2D;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
}
.wrap {
  max-width: 740px;
  margin: 0 auto;
  padding-inline: 16px;
  padding-block: 20px 56px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
#lesson-body { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
p { margin: 0; max-width: 65ch; }
h1, h2, h3 { margin: 0; font-family: var(--f-head); text-wrap: balance; }
h1 { font-weight: 700; font-size: clamp(28px, 7vw, 40px); line-height: 1.1; }
h2 { font-weight: 600; font-size: 22px; line-height: 1.2; }
h3 { font-weight: 600; font-size: 18px; line-height: 1.25; }
a { color: var(--pen); }
ul, ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }

.sub { color: var(--ink-soft); font-weight: 600; }
.eyebrow {
  font-family: var(--f-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.head, .l-head, header.hub-head { display: flex; flex-direction: column; gap: 4px; }
.sheet {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.hand { font-family: var(--f-hand); font-weight: 700; font-size: 25px; line-height: 1.15; color: var(--red); }
.hand.ok { color: var(--ok); }
.hand.pen { color: var(--pen); }

/* верхняя полоса урока */
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.back { font-family: var(--f-head); font-weight: 600; text-decoration: none; padding: 4px 2px; }
.topbar .where { font-size: 14px; color: var(--ink-soft); font-weight: 700; text-align: right; }

/* оглавление */
.now {
  border: 2px solid var(--pen);
  background: color-mix(in srgb, var(--pen) 6%, var(--card));
}
.now a.big {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--ink);
}
.now a.big b { font-family: var(--f-head); font-size: 21px; font-weight: 600; color: var(--pen); }
.now .row { display: flex; flex-wrap: wrap; gap: 10px; }
.lessons { display: flex; flex-direction: column; }
.lesson-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 4px;
  border-top: 1.5px dashed var(--line);
  text-decoration: none;
  color: var(--ink);
}
.lesson-row:first-child { border-top: none; }
.lesson-row .n { font-family: var(--f-head); font-weight: 700; font-size: 20px; color: var(--pen); font-variant-numeric: tabular-nums; }
.lesson-row .t { font-weight: 700; line-height: 1.3; }
.lesson-row .t small { display: block; font-weight: 600; color: var(--ink-soft); font-size: 14px; }
.lesson-row.soon .n, .lesson-row.soon .t { color: var(--ink-soft); }
.chip {
  font-size: 13px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip.ready { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, var(--card)); }
.chip.wait { color: var(--ink-soft); background: color-mix(in srgb, var(--ink-soft) 12%, var(--card)); }
a.lesson-row:hover .t, a.lesson-row:focus-visible .t { color: var(--pen); }

/* величины */
.qs, .qv, .qt { font-weight: 800; padding: 0 0.28em; border-radius: 6px; white-space: nowrap; }
.qs { color: var(--dist); background: color-mix(in srgb, var(--dist) 14%, var(--card)); }
.qv { color: var(--speed); background: color-mix(in srgb, var(--speed) 14%, var(--card)); }
.qt { color: var(--time); background: color-mix(in srgb, var(--time) 14%, var(--card)); }

/* кнопки */
.btn {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 16px;
  padding: 9px 15px;
  border-radius: 10px;
  border: 2px solid var(--pen);
  background: var(--pen);
  color: var(--card);
  cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--pen); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn:focus-visible, .seg-btn:focus-visible, .f-row:focus-visible, .jumps button:focus-visible, input:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pen) 55%, transparent);
  outline-offset: 2px;
}
.controls { display: flex; flex-wrap: wrap; gap: 10px; }

/* быстрый переход к номерам */
.jumps { display: flex; flex-wrap: wrap; gap: 6px; }
.jumps button {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 15px;
  min-width: 38px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--pen);
  cursor: pointer;
}
.jumps .pg { font-size: 13px; font-weight: 700; color: var(--ink-soft); align-self: center; margin-left: 4px; }

/* главное */
.idea { font-size: 19px; line-height: 1.55; }
dl.words { margin: 0; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 14px; }
dl.words dt { font-family: var(--f-head); font-weight: 600; color: var(--pen); }
dl.words dd { margin: 0; }
.steps-list { counter-reset: s; list-style: none; padding: 0; }
.steps-list li { counter-increment: s; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
.steps-list li::before {
  content: counter(s);
  font-family: var(--f-head);
  font-weight: 700;
  color: var(--card);
  background: var(--pen);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 14px;
  margin-top: 1px;
}

/* карточки заданий */
.t-card { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1.5px dashed var(--line); scroll-margin-top: 70px; }
.t-card:first-of-type { border-top: none; padding-top: 0; }
.t-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.t-num { font-family: var(--f-head); font-weight: 700; font-size: 22px; color: var(--pen); }
.tag { font-size: 12.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tag.pic { color: var(--ink-soft); background: color-mix(in srgb, var(--ink-soft) 12%, var(--card)); }
.tag.warn { color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--card)); }
.tag.key { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, var(--card)); }
.t-cond {
  background: color-mix(in srgb, var(--pen) 6%, var(--card));
  border-radius: 10px;
  padding: 10px 12px;
}
.t-sol { display: flex; flex-direction: column; gap: 6px; }
.calc { font-family: var(--f-head); font-weight: 600; font-size: 19px; font-variant-numeric: tabular-nums; }
.calc .why { font-family: var(--f-body); font-weight: 600; font-size: 15px; color: var(--ink-soft); }
.expr {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: clamp(20px, 5.6vw, 26px);
  font-variant-numeric: tabular-nums;
  color: var(--pen);
  background: color-mix(in srgb, var(--pen) 8%, var(--card));
  border: 2px dashed color-mix(in srgb, var(--pen) 45%, var(--card));
  border-radius: 10px;
  padding: 8px 12px;
  overflow-x: auto;
  white-space: nowrap;
}
.ans { font-weight: 800; }
.warnbox {
  border-left: 0;
  background: color-mix(in srgb, var(--red) 9%, var(--card));
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 15.5px;
}
.warnbox b { color: var(--red); }
.tip { font-size: 16px; color: var(--ink-soft); }
.tip b { color: var(--ink); }
.tbl-wrap { overflow-x: auto; }
table.calc-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.calc-table th, .calc-table td { border-bottom: 1.5px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
.calc-table th { font-size: 13px; color: var(--ink-soft); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.calc-table td:first-child, .calc-table td:last-child { font-family: var(--f-head); font-weight: 600; white-space: nowrap; }
.calc-table td:last-child { color: var(--pen); }
.calc-table tr.bad td:last-child { color: var(--red); }
.link-out { font-weight: 700; }

/* виджет: круги множеств */
.venn { display: flex; flex-direction: column; gap: 10px; }
.venn-svg { width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; }
.venn-svg .v-base { fill: var(--card); }
.venn-svg .v-fa { fill: var(--setA); opacity: 0; transition: opacity .3s; }
.venn-svg .v-fb { fill: var(--setB); opacity: 0; transition: opacity .3s; }
.venn-svg .v-fab { fill: var(--setAB); opacity: 0; transition: opacity .3s; }
.venn-svg .v-halo circle { fill: none; stroke: var(--red); stroke-width: 9; opacity: 0; transition: opacity .3s; }
.venn-svg .v-line { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.venn-svg .v-lbl { font-family: var(--f-head); font-weight: 700; font-size: 24px; fill: var(--ink); text-anchor: middle; }
.venn-svg .v-el { font-family: var(--f-body); font-weight: 800; font-size: 16px; fill: var(--ink); text-anchor: middle; transition: opacity .3s; }
.venn-svg .v-el.dim { opacity: 0.3; }
.venn[data-mode="A"] .v-fa,
.venn[data-mode="B"] .v-fb,
.venn[data-mode="AB"] .v-fab,
.venn[data-mode="U"] .v-fa, .venn[data-mode="U"] .v-fb, .venn[data-mode="U"] .v-fab,
.venn[data-mode="U"] .v-halo circle { opacity: 1; }
.seg-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.seg-btn {
  font-family: var(--f-head);
  font-weight: 600;
  font-size: 17px;
  min-width: 64px;
  padding: 7px 12px;
  border-radius: 10px;
  border: 2px solid var(--line);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.seg-btn[aria-pressed="true"] { border-color: var(--pen); background: color-mix(in srgb, var(--pen) 10%, var(--card)); color: var(--pen); }
.v-out { font-family: var(--f-head); font-weight: 600; font-size: 19px; text-align: center; overflow-wrap: anywhere; }
.v-hint { text-align: center; color: var(--ink-soft); font-weight: 600; font-size: 15.5px; margin: 0 auto; }

/* виджет: плитки «сколько в одном» */
.tiles { display: flex; flex-direction: column; gap: 10px; }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.tile {
  border: 2px dashed color-mix(in srgb, var(--dist) 40%, var(--card));
  border-radius: 9px;
  padding: 5px 2px;
  text-align: center;
  line-height: 1.1;
  background: var(--card);
  transition: background-color .3s, border-color .3s;
}
.tile small { display: block; font-size: 11px; font-weight: 800; color: var(--time); }
.tile b { display: block; font-family: var(--f-head); font-size: 18px; color: var(--dist); }
.tile span { display: block; font-size: 11px; color: var(--ink-soft); font-weight: 700; }
.tile.on { border-style: solid; border-color: var(--dist); background: color-mix(in srgb, var(--dist) 15%, var(--card)); }
.readout { display: flex; flex-wrap: wrap; gap: 4px 18px; font-weight: 700; }
.readout b { font-family: var(--f-head); font-size: 20px; }
.readout .c1 { color: var(--time); }
.readout .c2 { color: var(--dist); }

/* виджет: треугольник формул */
.tri-grid { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; align-items: center; }
.tri-svg { width: 100%; max-width: 200px; height: auto; display: block; justify-self: center; }
.tri-shape { fill: color-mix(in srgb, var(--pen) 6%, var(--card)); stroke: var(--pen); stroke-width: 3; stroke-linejoin: round; }
.tri-line { stroke: var(--pen); stroke-width: 3; stroke-linecap: round; }
.tri-svg text { font-family: var(--f-head); font-weight: 700; text-anchor: middle; transition: opacity .3s; }
.c-dist { fill: var(--dist); color: var(--dist); }
.c-speed { fill: var(--speed); color: var(--speed); }
.c-time { fill: var(--time); color: var(--time); }
.tri-svg .hid { opacity: 0.12; }
.finger { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 5 4; opacity: 0; transition: opacity .3s; }
.finger.on { opacity: 1; }
.f-list { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.f-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; font: inherit; color: var(--ink);
  background: var(--card); border: 2px solid var(--line); border-radius: 10px;
  padding: 8px 12px; cursor: pointer;
}
.f-row .fx { font-family: var(--f-head); font-weight: 700; font-size: 19px; }
.f-row .fx span { font-weight: 800; }
.f-row small { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.f-row.on { border-color: var(--pen); background: color-mix(in srgb, var(--pen) 9%, var(--card)); }

/* виджет: умножение столбиком */
.colmul { display: flex; flex-direction: column; gap: 10px; }
.cm-board {
  align-self: flex-start;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background-color: var(--card);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
}
.cm-grid { display: grid; font-family: var(--f-head); font-weight: 600; font-variant-numeric: tabular-nums; }
.cm-cell { width: 28px; height: 36px; display: grid; place-items: center; font-size: 28px; line-height: 1; }
.cm-carry { height: 22px; font-size: 16px; color: var(--red); font-weight: 700; }
.cm-sign { color: var(--ink-soft); }
.cm-rule { grid-column: 1 / -1; border-top: 3px solid var(--ink); margin: 2px 0 4px; }
.cm-res { color: var(--pen); }
.cm-hide { visibility: hidden; }
.cm-now { background: color-mix(in srgb, var(--setA) 70%, transparent); border-radius: 6px; }
.cm-msg { font-weight: 700; min-height: 3em; }

/* статичные рисунки: площадь, множества */
.ar-svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; }
.ar-a { fill: var(--setA); }
.ar-b { fill: var(--setB); }
.ar-line { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.ar-t { font-family: var(--f-head); font-weight: 600; font-size: 18px; fill: var(--ink); text-anchor: middle; }
.ar-t.big { font-size: 22px; fill: var(--pen); }
.st-pair { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; }
.st-pair figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 140px; max-width: 220px; }
.st-pair figcaption { font-family: var(--f-head); font-weight: 600; font-size: 18px; }
.st-eq { font-family: var(--f-head); font-weight: 700; font-size: 30px; color: var(--pen); }
.st-svg { width: 100%; height: auto; display: block; }
.st-base { fill: var(--card); }
.st-y { fill: var(--setA); }
.st-b { fill: var(--setB); }
.st-g { fill: var(--setAB); }
.st-c { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.st-halo { fill: none; stroke: var(--red); stroke-width: 9; }
.st-lbl { font-family: var(--f-head); font-weight: 700; font-size: 20px; fill: var(--ink); text-anchor: middle; }

/* виджет: доли клеточек */
.fracgrid { display: flex; flex-direction: column; gap: 10px; }
.fg-grid { display: grid; gap: 3px; align-self: center; }
.fg-cell { width: 40px; height: 40px; border: 2px solid var(--line); border-radius: 5px; background: var(--card); transition: background-color .25s, border-color .25s; }
.fg-cell.on { background: color-mix(in srgb, var(--pen) 55%, var(--card)); border-color: var(--pen); }

/* виджет: разбиение на части */
.split { display: flex; flex-direction: column; gap: 10px; }
.sp-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sp-box { border: 2px dashed var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sp-box.out { border-color: var(--red); }
.sp-box b { font-family: var(--f-head); font-weight: 600; font-size: 15px; }
.sp-box.out b { color: var(--red); }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chip { padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 15px; background: color-mix(in srgb, var(--pen) 11%, var(--card)); }
.sp-chip.bad { background: color-mix(in srgb, var(--red) 15%, var(--card)); color: var(--red); }
.sp-out { font-weight: 800; }
.sp-out.ok { color: var(--ok); }
.sp-out.bad { color: var(--red); }

/* виджет: древние цифры */
.numerals { display: flex; flex-direction: column; gap: 12px; }
.nm-row { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr); gap: 4px 14px; align-items: baseline; }
.nm-row > span:first-child { font-weight: 800; color: var(--ink-soft); font-size: 14px; }
.nm-rom { font-family: var(--f-head); font-weight: 700; font-size: 30px; letter-spacing: 0.06em; color: var(--pen); overflow-wrap: anywhere; }
.nm-egy { font-family: "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", sans-serif; font-size: 50px; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; word-break: break-all; }
.calc-table td.nm-egy { font-family: "Noto Sans Egyptian Hieroglyphs", "Segoe UI Historic", sans-serif; font-size: 46px; line-height: 1.1; font-weight: 400; color: var(--ink); }
.nm-sub { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.nm-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nm-in input, .nr-in input {
  width: 150px; font: inherit; font-family: var(--f-head); font-weight: 600; font-size: 22px;
  padding: 7px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.nm-err { color: var(--red); font-weight: 700; }

/* виджет: классы и разряды */
.numread { display: flex; flex-direction: column; gap: 12px; }
.nr-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nr-in input { width: 230px; }
.nr-wrap { overflow-x: auto; }
table.nr-table { border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0 auto; }
.nr-table th { font-size: 12px; font-weight: 800; color: var(--ink-soft); padding: 3px 2px; text-align: center; }
.nr-table th.cls { font-size: 13px; color: var(--pen); border-bottom: 2px solid var(--pen); }
.nr-table td { font-family: var(--f-head); font-weight: 700; font-size: 24px; width: 30px; height: 40px; text-align: center; border: 1.5px solid var(--line); }
.nr-table td.gap, .nr-table th.gap { border: none; width: 8px; padding: 0; }
.nr-table td.empty { color: var(--line); }
.nr-words { font-weight: 700; font-size: 18px; color: var(--pen); }
.nr-sum { font-family: var(--f-head); font-weight: 600; font-size: 17px; overflow-wrap: anywhere; }

/* виджет: сравнение многозначных чисел */
.cmpnum { display: flex; flex-direction: column; gap: 12px; }
.cp-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cp-in input {
  width: 170px; font: inherit; font-family: var(--f-head); font-weight: 600; font-size: 20px;
  padding: 6px 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.nr-table td.hot { background: color-mix(in srgb, var(--setA) 75%, transparent); }
.nr-table td.extra { background: color-mix(in srgb, var(--setB) 60%, transparent); }
.cp-sign { font-family: var(--f-head); font-weight: 700; font-size: 26px; color: var(--pen); text-align: center; overflow-wrap: anywhere; }
.cp-why { font-weight: 600; text-align: center; color: var(--ink-soft); }

/* тренажёр */
.tasks { display: flex; flex-direction: column; gap: 14px; }
.task { display: flex; flex-direction: column; gap: 8px; }
.task + .task { border-top: 1.5px dashed var(--line); padding-top: 14px; }
.task-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.task-row input {
  width: 100px; font: inherit; font-family: var(--f-head); font-weight: 600; font-size: 20px;
  padding: 7px 10px; border: 2px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink);
}
.unit { font-weight: 700; margin-right: 6px; }
.task-msg { font-weight: 700; min-height: 1.5em; }
.task-msg.good { color: var(--ok); }
.task-msg.bad { color: var(--red); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.loading { color: var(--ink-soft); font-weight: 700; padding: 30px 0; text-align: center; }
footer { color: var(--ink-soft); font-size: 14px; text-align: center; }

@media (max-width: 520px) {
  .sheet { padding: 16px 14px; }
  .tri-grid { grid-template-columns: 1fr; }
  .tri-svg { max-width: 170px; }
  .idea { font-size: 18px; }
  dl.words { grid-template-columns: 1fr; gap: 2px; }
  dl.words dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- обвязка сайта ---------- */
.site-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logo { font-family: var(--f-head); font-weight: 700; font-size: 20px; color: var(--ink); text-decoration: none; }
.logo span { color: var(--pen); }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.crumbs a { color: var(--pen); text-decoration: none; }
.crumbs .sep { color: var(--line); }
.hero { display: flex; flex-direction: column; gap: 6px; padding-block: 4px; }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.grid-cards.wide { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); text-decoration: none; min-width: 0;
}
a.card-link { border-color: var(--pen); background: color-mix(in srgb, var(--pen) 6%, var(--card)); }
a.card-link:hover b, a.card-link:focus-visible b { text-decoration: underline; }
.card-link b { font-family: var(--f-head); font-weight: 600; font-size: 19px; color: var(--pen); overflow-wrap: anywhere; hyphens: auto; }
.card-link small { color: var(--ink-soft); font-weight: 600; font-size: 14px; line-height: 1.35; }
.card-link.off b { color: var(--ink-soft); }
.card-link.off { border-style: dashed; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pager a {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink); text-decoration: none; font-weight: 700; min-width: 0;
}
.pager a small { color: var(--pen); font-family: var(--f-head); font-weight: 600; font-size: 14px; }
.pager .next { text-align: right; }