/* ===========================================================
   Листайка — общая основа.

   Идея палитры: лист бумаги на тёплом столе. Фон — тёплая бумажная
   белизна, карточки — чистый белый лист, потому что печатают на
   белом. Единственный цвет действия — лисий оранжевый: цвет
   маскота ЛИСтайки, глубокий, а не неоновый, — «нежный, не вырви
   глаз». Холодная искра одна на весь сайт — синь тетрадной линовки
   (она же на самих листах), ею помечены возраст и подписка.
   Роли поменялись местами: раньше индиго нажимали, а янтарь метил;
   теперь оранжевый нажимают, а линовка метит.

   Правило, из которого растёт всё остальное: на сайте видно либо
   настоящий продукт (лист из previews/), либо линию, нарисованную
   тем же пером. Стоковых картинок нет и не будет.

   Второе правило — воздух. Между блоками пусто, тени почти не видно,
   границы тонкие. Всё внимание достаётся листу: он тут единственное
   цветное пятно, и так и задумано.
   =========================================================== */

/* ---------- шрифты ----------

   Лежат у нас, а не на чужом CDN: сайт открывают в школах и садах,
   где половина внешних доменов закрыта, а без шрифта страница
   разъезжается. Скачаны только кириллица и латиница — по два файла
   на семейство вместо восьми, вместе меньше 90 КБ.

   Manrope — заголовки: геометрия, крупные круги, уверенно смотрится
   на больших кеглях. Onest — весь текст и интерфейс: гуманистический,
   с высоким ростом строчных, читается на дешёвых экранах.
   Оба переменные, поэтому одного файла хватает на все начертания. */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/onest-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/onest-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --desk:    #F9F7F3;   /* фон страницы: тёплая бумажная белизна */
  --desk-2:  #F1EDE5;   /* подложка потемнее: полосы, поля ввода */
  --sheet:   #FFFFFF;   /* бумага: карточки и панели */
  --panel:   #FFFFFF;   /* то, что обрамляет: шапка, подвал, кнопки */

  --ink:     #211B12;   /* грифель, нажали сильно */
  --ink-2:   #6A6156;
  --ink-3:   #9A9080;
  --line:    #E8E2D6;
  --line-2:  #F2EEE6;   /* совсем тихая линия: внутри карточек */

  /* Лисий оранжевый тёмный нарочно: на кнопке белая надпись, и ей
     нужен контраст 4.5, а «нежность» дают мягкие заливки rule-soft,
     а не бледная кнопка. Проверено: 5.2 с белым, 4.8 текстом на фоне. */
  --rule:      #C2410C; /* лисий оранжевый — всё нажимаемое */
  --rule-2:    #9A3412; /* нажали */
  --rule-soft: rgba(194,65,12,.09);
  --mark:      #3B5BC9; /* синь тетрадной линовки — возраст и подписка */
  --mark-soft: rgba(59,91,201,.11);

  /* Тени почти не видно: на светлом фоне карточку держит граница,
     а тень только отрывает её от страницы. Крупный радиус размытия
     с отрицательным разбросом — мягкое пятно, а не тёмный ободок. */
  --shadow-card:  0 1px 2px rgba(38,30,18,.04);
  --shadow-lift:  0 2px 6px rgba(38,30,18,.05), 0 16px 32px -12px rgba(38,30,18,.14);
  --shadow-sheet: 0 2px 6px rgba(38,30,18,.05), 0 24px 48px -14px rgba(38,30,18,.18);

  --display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --sans: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 8px;
  --r:    12px;  /* мелочи: кнопки, поля */
  --r-lg: 20px;  /* карточки и блоки */
  --r-pill: 999px;

  --wrap: 1160px;
  --pad: 24px;
  --topbar: 64px;

  /* Стекло осталось одно — на шапке и на липкой панели генератора.
     Держим переменными, потому что панель живёт в другом файле. */
  --glass-2:    rgba(255,255,255,.72);
  --glass-line: rgba(232,226,214,.9);
  --glass-blur: saturate(1.6) blur(14px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --desk:    #141009;
    --desk-2:  #1E1810;
    --sheet:   #201A11;
    --panel:   #191510;

    --ink:     #F2EDE3;
    --ink-2:   #B4AA97;
    --ink-3:   #8A8171;
    --line:    #362D1F;
    --line-2:  #2A2317;

    --rule:      #F49E52;
    --rule-2:    #FDB271;
    --rule-soft: rgba(244,158,82,.15);
    --mark:      #93A7F5;
    --mark-soft: rgba(147,167,245,.15);

    --shadow-card:  0 1px 2px rgba(0,0,0,.3);
    --shadow-lift:  0 2px 6px rgba(0,0,0,.35), 0 16px 32px -12px rgba(0,0,0,.5);
    --shadow-sheet: 0 2px 6px rgba(0,0,0,.35), 0 24px 48px -14px rgba(0,0,0,.55);

    --glass-2:    rgba(25,21,16,.72);
    --glass-line: rgba(54,45,31,.9);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  position: relative;   /* под свечение первого экрана, см. ниже */
  background: var(--desk);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Обёртка содержимого. Одна ширина на весь сайт: главная, разделы и
   документы не должны расходиться на пиксели. */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* Фокус виден всегда и выглядит одинаково везде: пунктирная рамка —
   из мира прописей, там пунктиром показывают, где вести линию. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px dashed var(--rule);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---------- шапка ---------- */

/* Липкая: на длинных страницах разделов иначе некуда вернуться,
   кроме как прокруткой вверх. Высота зафиксирована переменной —
   на неё опирается липкая панель генератора. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--topbar);
  padding: 0 var(--pad);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.wordmark {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.wordmark:hover { color: var(--rule); }

.crumb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Навигация подставляется сборщиком между метками «шапка»: ссылка на
   тарифы существует не всегда, а держать её руками в трёх рукописных
   страницах — значит однажды оставить битую. */
.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}
.site-nav a {
  padding: 8px 13px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background-color .15s;
}
.site-nav a:hover { color: var(--ink); background: var(--desk-2); }
.site-nav a[aria-current="page"] { color: var(--ink); background: var(--desk-2); }
/* «Подписка» — отдельный ребёнок шапки, а не пункт навигации: на
   телефоне навигация прокручивается, а единственная платная дверь
   обязана стоять на месте. Селектор по .topbar, потому что сборщик
   ставит её после </nav>. */
.topbar .nav-pro {
  padding: 8px 15px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  color: #fff;
  background: var(--rule);
  font-weight: 600;
}
.topbar .nav-pro:hover { color: #fff; background: var(--rule-2); }

/* В тёмной теме оранжевый светлее фона, и белая надпись на нём не
   читается. Меняем не цвет кнопки, а цвет надписи: кнопка обязана
   остаться той же — она одна на странице и её узнают. */
@media (prefers-color-scheme: dark) {
  .topbar .nav-pro, .topbar .nav-pro:hover { color: #141009; }
}

@media (max-width: 900px) {
  /* Две строки: логотип и «Подписка» по краям первой, навигация —
     вторая, прокручивается вбок. Правый край навигации тает маской:
     видно, что список продолжается, без обрезанных наполовину слов. */
  .topbar { flex-wrap: wrap; padding: 10px var(--pad); gap: 6px 12px; }
  .crumb { display: none; }
  .topbar .nav-pro { order: 2; margin-left: auto; }
  .site-nav {
    order: 3;
    margin-left: 0;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 34px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding: 7px 11px; }
}
@media (max-width: 620px) {
  /* 20, а не 18: владелица смотрела с телефона и попросила «нормальные
     отступы с боков» — текст у самой кромки читается теснее, чем есть. */
  :root { --pad: 20px; }
}

/* ---------- кнопки ---------- */

.btn {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, background-color .15s, transform .12s, box-shadow .15s, color .15s;
}
.btn:hover { border-color: var(--ink-3); background: var(--desk-2); }
.btn:active { transform: translateY(1px); }

/* Оранжевая кнопка — единственное сплошное цветное пятно в интерфейсе.
   Поэтому на странице она одна: если их две, ни одна не главная. */
.btn-primary {
  background: var(--rule);
  border-color: var(--rule);
  color: #fff;
  box-shadow: 0 1px 2px rgba(194,65,12,.22), 0 8px 20px -8px rgba(194,65,12,.45);
}
.btn-primary:hover { background: var(--rule-2); border-color: var(--rule-2); color: #fff; }
@media (prefers-color-scheme: dark) {
  .btn-primary, .btn-primary:hover { color: #141009; }
  .btn-primary { box-shadow: 0 8px 20px -10px rgba(244,158,82,.5); }
}
.btn-lg { padding: 15px 28px; font-size: 17px; }
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- метки ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.badge-pro {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  color: var(--mark);
  background: var(--mark-soft);
  font-weight: 600;
}
.badge-pro svg { width: 10px; height: 10px; }

/* Открытое подпиской помечаем на том же месте и тем же размером, что
   и закрытое, — меняется только знак. Подписчик, увидевший тот же
   замок, что и до оплаты, решает, что деньги ушли впустую. */
.badge-open {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  color: var(--rule);
  background: var(--rule-soft);
  font-weight: 600;
}
.badge-open svg { width: 10px; height: 10px; }

/* ---------- окно «что открылось» ----------

   Показывается один раз после того, как ключ заработал. Человек,
   оплативший подписку, возвращается на тот же сайт и не видит
   разницы: платное лежит вперемешку с бесплатным, а замки просто
   исчезли. Список того, что открылось, со ссылками прямо в задание —
   это и есть момент, ради которого платили. */
.unlock {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(33,27,18,.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  overflow: auto;
}
.unlock[hidden] { display: none; }
.unlock-panel {
  width: min(560px, 100%);
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sheet);
  padding: 30px 30px 26px;
}
.unlock-panel h2 {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.028em;
  margin: 0 0 6px;
}
.unlock-panel .unlock-lede { margin: 0 0 18px; color: var(--ink-2); font-size: 15.5px; }
.unlock-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 6px; }
.unlock-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
}
.unlock-list a:hover { border-color: var(--rule); background: var(--rule-soft); }
.unlock-list .who {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.unlock-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.unlock-foot .aside-note { color: var(--ink-3); font-size: 13.5px; }

/* ---------- заголовок блока ---------- */

.sec-head { margin: 0 0 24px; }
.sec-head h2 {
  font-family: var(--display);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.sec-head p { margin: 0; color: var(--ink-2); max-width: 62ch; font-size: 16.5px; }

/* ---------- фильтр каталога ---------- */

/* Возраст ребёнка — первое, что человек знает про свою задачу, и
   единственное, по чему он умеет искать. Поэтому фильтр один и он
   по возрасту: два фильтра сразу заставляют выбирать дважды. */
.hubs { margin: -6px 0 16px; }
.aud-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}
.aud-tab {
  appearance: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--sheet);
  color: var(--ink-2);
  transition: border-color .15s, background-color .15s, color .15s;
}
.aud-tab .n {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  color: var(--ink-3);
  margin-left: 7px;
}
.aud-tab:hover { border-color: var(--ink-3); color: var(--ink); }
.aud-tab[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--desk);
  font-weight: 600;
}
.aud-tab[aria-pressed="true"] .n { color: rgba(255,255,255,.6); }
@media (prefers-color-scheme: dark) {
  .aud-tab[aria-pressed="true"] { color: #141009; }
  .aud-tab[aria-pressed="true"] .n { color: rgba(20,16,9,.55); }
}

/* ---------- карточка вида задания ---------- */

/* Внутри карточки — настоящий лист из previews/, обрезанный по верхней
   трети: там заголовок и первые упражнения, по ним вид задания узнаётся
   без подписи. Рисовать вместо этого условную иконку значит показывать
   не тот продукт, который распечатают. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 18px;
}
.tcard {
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow-card);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.tcard:hover {
  border-color: var(--rule);
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.tcard-shot {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
}
.tcard-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .4s cubic-bezier(.22,.9,.3,1);
}
/* Лист чуть подаётся вперёд под курсором: видно, что это картинка
   листа, а не фон карточки. */
.tcard:hover .tcard-shot img { transform: scale(1.035); }

/* Лист в превью белый всегда — он и на бумаге белый. В тёмной теме
   гасим яркость, чтобы карточки не били по глазам. */
@media (prefers-color-scheme: dark) {
  .tcard-shot { background: #D8D2C6; }
  .tcard-shot img { opacity: .84; }
}

.tcard-body { padding: 14px 16px 15px; display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; }
.tcard-title { font-size: 15.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.tcard-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* На телефоне каталог в две колонки. Одна колонка растягивала карточку
   на пол-экрана, и главная выходила тринадцать тысяч пикселей: до
   подвала не долистывал никто. Лист в превью узнаваем и на 160px. */
@media (max-width: 620px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tcard-body { padding: 10px 12px 12px; gap: 6px; }
  .tcard-title { font-size: 13.5px; }
}

/* замок на платном */
.tcard-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 10px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 45%, rgba(33,27,18,.28));
}
.tcard-lock span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.95);
  color: #3448A6;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}
.tcard-lock svg { width: 11px; height: 11px; }

/* ---------- подвал ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  margin-top: 80px;
  padding: 52px 0 64px;
  background: var(--panel);
}
.site-foot .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.foot-col h3 {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink-3);
}
.foot-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.foot-col a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; }
.foot-col a:hover { color: var(--rule); }
.foot-about .wordmark { font-size: 21px; }
.foot-about p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); max-width: 34ch; }

@media (max-width: 760px) {
  .site-foot .wrap { grid-template-columns: 1fr 1fr; gap: 28px; }
  .foot-about { grid-column: 1 / -1; }
}

/* Однострочный подвал остаётся там, где колонки лишние: на экране
   генератора. Ссылки на документы нужны и там. */
.foot { border-top: 1px solid var(--line); padding: 26px var(--pad) 48px; background: var(--panel); }
.foot p { max-width: var(--wrap); margin: 0 auto; font-size: 13.5px; color: var(--ink-3); }
.foot a { color: var(--ink-2); }

/* ===========================================================
   Стекло и воздух

   Просьба владелицы: «сейчас модный глазморфизм, хочется красоты
   и аккуратности». Стекло осталось ровно в одном месте — на липкой
   шапке, где под ней действительно что-то едет и размывать есть что.

   На карточках его больше нет. Полупрозрачная карточка поверх
   полупрозрачного фона снижает контраст подписи, а каталог читают
   учителя и логопеды с дешёвых школьных ноутбуков. Красоту теперь
   держат воздух между блоками и мягкая тень, а не мутность.
   =========================================================== */

/* Единственная подсветка на сайте: тёплое лисье свечение под первым
   экраном, одинаковое на всех страницах. Не пятна по всей странице,
   как было раньше: их приходилось размывать стеклом, и вместе
   получалась муть. Слева — едва заметный отсвет линовки. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 6%, rgba(194,65,12,.09), transparent 68%),
    radial-gradient(48% 60% at 8% 0%, rgba(59,91,201,.05), transparent 70%);
}
@media (prefers-color-scheme: dark) {
  body::before {
    background:
      radial-gradient(60% 70% at 78% 6%, rgba(244,158,82,.12), transparent 68%),
      radial-gradient(48% 60% at 8% 0%, rgba(147,167,245,.06), transparent 70%);
  }
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .topbar {
    background: color-mix(in srgb, var(--panel) 72%, transparent);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
  }
}

/* Просили меньше прозрачности или больше контраста — отдаём плотное.
   Тот же ответ и для печати: на бумаге ни размытия, ни свечения нет,
   а серый фон съел бы тонер. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body::before { display: none; }
  .topbar {
    background: var(--panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media print {
  body::before { display: none; }
  .topbar, .tcard, .pick-tariff, .keybox, .checkout, .thanks, .shot {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}