/* Клетки внутри — reader.css
   Статический файл: Fenom его не парсит, фигурные скобки безопасны.
   Палитра и типографика — по дизайн-макету «Дизайн сайта-книги». */

:root{
  --paper:#f4eede; --paper2:#fbf7ef; --paper3:#efe6d3;
  --ink:#2e2a24; --ink2:#7a6f5e; --terra:#b05a38; --teal:#2f7d76;
  --line:rgba(46,42,36,.13); --terra-soft:rgba(176,90,56,.12);
  --sheet-sh:0 -12px 55px rgba(45,32,15,.24); --card-sh:0 1px 3px rgba(45,35,20,.08);
  --reading-size:19px;
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
}
html.theme-dark, body.theme-dark{
  --paper:#1e1b16; --paper2:#262019; --paper3:#2f2820;
  --ink:#e8dcc5; --ink2:#a2967d; --terra:#d07a4f; --teal:#5fa79c;
  --line:rgba(232,220,197,.14); --terra-soft:rgba(208,122,79,.16);
  --sheet-sh:0 -12px 55px rgba(0,0,0,.5); --card-sh:0 1px 3px rgba(0,0,0,.3);
}
html.theme-dark{color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:'Literata',Georgia,serif;-webkit-text-size-adjust:100%;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background-image:var(--noise);
  opacity:.045;mix-blend-mode:multiply;pointer-events:none;z-index:90}
html.theme-dark body::before{mix-blend-mode:screen;opacity:.03}
img{max-width:100%;height:auto}
a{color:var(--teal);text-decoration:none}
h1,h2,h3{font-weight:600;line-height:1.25}
::selection{background:rgba(176,90,56,.22)}
button{font-family:inherit}

.mono,.kicker,.mono-link,.chapter-num,.volume,.toc-head,.term-cat,.badge,.sec-h{
  font-family:'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;
  font-size:11px;font-weight:500}
.mono-link{color:var(--teal)}
.sec-h{color:var(--ink2);margin:0 0 14px}
.orn{color:var(--terra);text-align:center;letter-spacing:.6em;margin:18px 0 0;opacity:.75;font-size:13px}
.orn.one{margin:6px 0 26px}

.btn{display:inline-block;background:var(--terra);color:#fff8ef;border-radius:999px;
  padding:13px 34px;font-size:15px;letter-spacing:.02em;border:none;cursor:pointer;
  box-shadow:0 2px 10px rgba(176,90,56,.28)}
.btn:hover{filter:brightness(1.06)}

/* ---------- шапка не-читалочных страниц ---------- */
.site-nav{display:flex;gap:18px;align-items:center;justify-content:space-between;
  height:54px;padding:0 20px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:45;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-nav .brand{color:var(--ink)}
.site-nav-links{display:flex;gap:18px;align-items:center}
/* шестерёнка настроек в шапке обычных страниц — чтобы музыку и тему
   можно было включить не только из главы */
.nav-settings{width:38px;height:38px;margin-right:-8px;border:none;background:none;
  color:var(--ink);cursor:pointer;border-radius:8px;display:flex;align-items:center;
  justify-content:center;transition:background .16s}
.nav-settings:hover{background:var(--terra-soft)}

/* мягкий переход между страницами: пока грузится, чуть притушаем содержимое */
body.is-loading .hub,body.is-loading main{opacity:.55;transition:opacity .12s}

/* ---------- главная ---------- */
/* main.book, а не .book: у карточки книги в каталоге тот же класс,
   и правило страницы вешало на неё отступы в 22px по бокам */
.hub,.glossary,.term-page,.static,main.book{max-width:760px;margin:0 auto;padding:0 22px 80px}
/* шапка главной — во всю ширину окна, а не по колонке текста */
.hub-hero{position:relative;margin:0 0 30px;width:100vw;margin-left:calc(50% - 50vw)}
/* Панорама 2048×768. Высота идёт от пропорций, contain — чтобы не срезать
   вшитые в постер растушёвки по краям. Упрётся в max-height на очень широких
   экранах — тогда картинка встанет по центру, поля растворятся в бумагу.

   Три слоя, и это важно: маска действует на элемент вместе с его содержимым,
   поэтому картинка живёт в ::before (маскируется), а растворение в бумагу —
   в ::after (не маскируется). Иначе маска гасит и сам градиент, и по нижнему
   краю остаётся видимая линия. */
.hub-hero-img{position:relative;width:100%;aspect-ratio:2048/768;max-height:min(66vh,700px)}
.hub-hero-img::before{content:'';position:absolute;inset:0;
  background:center/contain no-repeat url(/assets/books/home-hero.webp);
  /* края у постера уже растушёваны в кремовый, но он на пару тонов теплее
     бумаги сайта — узкой маской снимаем стык */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 4%,#000 96%,transparent 100%)}
.hub-hero-img::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,var(--paper) 0,transparent 10%,transparent 64%,var(--paper) 99%)}
/* В тёмной теме вшитая в постер кремовая дымка светится и обрывается
   прямоугольником. Гасим её круговой маской — картинка тает во тьму со всех
   сторон, а не стоит светлым окном. */
html.theme-dark .hub-hero-img::before{
  -webkit-mask-image:radial-gradient(116% 128% at 50% 42%,#000 30%,rgba(0,0,0,.5) 62%,transparent 88%);
  mask-image:radial-gradient(116% 128% at 50% 42%,#000 30%,rgba(0,0,0,.5) 62%,transparent 88%)}
html.theme-dark .hub-hero-img::after{
  background:linear-gradient(to bottom,var(--paper) 0,transparent 20%,transparent 56%,var(--paper) 97%)}
.hub-hero-txt{position:relative;text-align:center;margin-top:-84px;padding:0 22px}
@media(max-width:600px){
  /* Панорама 8:3 на телефоне вырождается в полоску 146px. Берём кадр повыше
     и показываем центральную часть — большое дерево и закат как раз посередине.
     Вшитые растушёвки по бокам при этом обрезаются, поэтому маску расширяем. */
  .hub-hero-img{aspect-ratio:16/10;max-height:44vh}
  .hub-hero-img::before{background-size:cover;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%)}
  .hub-hero-img::after{
    background:linear-gradient(to bottom,var(--paper) 0,transparent 16%,transparent 52%,var(--paper) 97%)}
  /* заголовок почти не наезжает, иначе кикер ложится на траву и не читается */
  .hub-hero-txt{margin-top:-26px}
}
.kicker{color:var(--terra);margin:0 0 6px}
.hub-title{font-size:clamp(2.6rem,11vw,4.4rem);margin:0;letter-spacing:-.01em;font-weight:600}
.hub-tag{color:var(--ink2);margin:2px 0 0}
.hub-about{font-size:17px;line-height:1.7;margin:0 0 44px}
.hub-about p{margin:0 0 1.1em}
.catalog-wrap,.gl-preview{margin:0 0 44px}
.catalog{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:600px){.catalog{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}}

/* ---------- карточка книги ---------- */
.book.card{background:var(--paper2);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--card-sh);overflow:hidden;color:var(--ink);display:flex;flex-direction:column;
  transition:transform .18s,box-shadow .18s}
.book.card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(45,35,20,.12)}
.book.card .cover{display:flex;align-items:center;justify-content:center;
  aspect-ratio:16/10;background:var(--paper3) center/cover no-repeat;
  border-radius:13px 13px 0 0}
.book.card .cover:not([style]){background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--paper3)),var(--paper3))}
.cover-stub{color:var(--accent,var(--ink2));opacity:.8}
.card-body{padding:14px;display:flex;flex-direction:column;gap:4px;flex:1}
.book.card .volume{color:var(--accent,var(--terra))}
.book.card .ttl{font-size:1.2rem;font-weight:600;line-height:1.2}
.book.card .tag{color:var(--ink2);font-size:.92rem}
.book.card .short{color:var(--ink2);font-size:.86rem;line-height:1.5;margin-top:4px}
.badge{display:inline-block;margin-top:10px;align-self:flex-start;color:var(--terra);
  border:1px solid var(--terra);border-radius:999px;padding:5px 12px}
.book.card.is-soon,.book.card.is-planned{opacity:.72}
.book.card.is-soon .badge,.book.card.is-planned .badge{color:var(--ink2);border-color:var(--line)}

/* ---------- страница книги ---------- */
.book-hero{margin:0 -22px 26px;position:relative}
/* постер книги показываем целиком: у него те же 16:9, что и у исходника,
   поэтому при aspect-ratio ничего не срезается — раньше фиксированные 320px
   отрезали герою голову */
.book-cover{position:relative;aspect-ratio:16/9;background:var(--paper3) center/cover no-repeat}
/* обложки нет — вместо пустого полотна узкая полоса в цвет книги */
.book-cover:not([style]){aspect-ratio:auto;height:min(20vh,140px);
  background:linear-gradient(165deg,color-mix(in srgb,var(--accent) 30%,var(--paper3)),var(--paper))}
.book-cover::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 58%,var(--paper) 100%)}
.book-hero-txt{position:relative;text-align:center;margin-top:-56px;padding:0 22px}
.book-title{font-size:clamp(2rem,8vw,3rem);margin:.1em 0 .15em}
.book-tag{color:var(--ink2);margin:0}
main.book .volume{color:var(--accent,var(--terra));margin:0}
.annotation{font-size:17px;line-height:1.7}
.annotation p{margin:0 0 1.1em}
.read-cta{text-align:center;margin:30px 0 40px}
.toc{margin-top:10px;border-top:1px solid var(--line);padding-top:20px}
.toc-head{color:var(--ink2);margin:0 0 10px}

/* ---------- читалка ---------- */
#reader{max-width:680px;margin:0 auto;padding:78px 22px 90px}
.chapter-num{color:var(--ink2);text-align:center;display:block;margin:0}
.chapter-title{font-size:clamp(1.9rem,7vw,2.6rem);text-align:center;margin:.15em 0 0}
.chapter-body{font-size:var(--reading-size);line-height:1.72}
.chapter-body p{margin:0;text-indent:1.6em}
.chapter-body p:first-of-type,.chapter-body .sep + p{text-indent:0}
.chapter-body .sep{border:0;text-align:center;margin:1.6em 0;height:1em;overflow:visible}
.chapter-body .sep::before{content:'* * *';color:var(--terra);letter-spacing:.5em;
  font-size:13px;opacity:.7}
.chapter-body em{font-style:italic}

figure.illus{margin:2em 0}
figure.illus img{width:100%;border-radius:6px;display:block}
figure.illus figcaption{font-size:.85em;color:var(--ink2);text-align:center;margin-top:.5em}
body.illus-off figure.illus{display:none}

a.term{color:var(--teal);border-bottom:1px dotted var(--teal);cursor:pointer}
body.hints-off a.term{color:inherit;border-bottom:none;pointer-events:none}

/* ---------- шапка читалки + прогресс ---------- */
#topbar{position:fixed;top:0;left:0;right:0;height:54px;z-index:40;display:flex;
  align-items:center;justify-content:space-between;padding:0 8px;
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);transition:transform .28s cubic-bezier(.4,0,.2,1)}
#topbar.hide{transform:translateY(-100%)}
#topbar button{width:44px;height:44px;background:none;border:none;
  color:var(--ink);cursor:pointer;border-radius:8px;display:flex;align-items:center;
  justify-content:center;flex:none}
#topbar .title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block;line-height:54px;text-align:center;padding:0 4px;
  color:var(--ink)}
#progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;pointer-events:none}
#progress-bar{height:100%;width:0;background:var(--terra);transition:width .12s linear;
  box-shadow:0 0 6px rgba(176,90,56,.4)}

/* ---------- навигация по главам ---------- */
.chapter-nav{display:grid;grid-template-columns:1fr;gap:12px;margin:56px 0 14px;
  border-top:1px solid var(--line);padding-top:26px}
@media(min-width:560px){.chapter-nav{grid-template-columns:1fr 1fr}}
.cn-link{display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:12px;
  border:1px solid var(--line);background:var(--paper2);color:var(--ink);min-height:64px}
.cn-link .mono{color:var(--terra)}
.cn-next{text-align:right;align-items:flex-end}
.chapter-nav .cn-next:only-child{grid-column:-2/-1}
.cn-t{font-size:.98rem}
.cn-up{display:block;text-align:center;color:var(--ink2);padding:14px}

/* ---------- шторки ---------- */
.overlay{position:fixed;inset:0;z-index:70;background:rgba(30,22,10,.34);display:none}
.overlay.open{display:block;animation:kv-fade .2s ease}
@keyframes kv-fade{from{opacity:0}to{opacity:1}}
@keyframes kv-up{from{transform:translateY(102%)}to{transform:translateY(0)}}
@keyframes kv-slidex{from{transform:translateX(-102%)}to{transform:translateX(0)}}
.sheet-bottom{position:absolute;left:0;right:0;bottom:0;background:var(--paper2);
  border-radius:18px 18px 0 0;box-shadow:var(--sheet-sh);max-height:88vh;overflow:auto;
  padding:10px 20px calc(20px + env(safe-area-inset-bottom));animation:kv-up .26s cubic-bezier(.3,0,.2,1)}
.sheet-side{position:absolute;top:0;left:0;bottom:0;width:min(340px,84vw);
  background:var(--paper2);overflow:auto;border-right:1px solid var(--line);
  padding:16px;animation:kv-slidex .26s cubic-bezier(.3,0,.2,1)}
.sheet-grip{width:44px;height:4px;border-radius:4px;background:var(--line);margin:2px auto 12px}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.sheet-head .mono{color:var(--ink2);margin:0;line-height:1.5}
.sheet-x{background:none;border:none;font-size:22px;line-height:1;color:var(--ink2);
  cursor:pointer;width:44px;height:44px;border-radius:8px}
.overlay .row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.overlay .row:last-child{border-bottom:none}
.row-t{display:flex;flex-direction:column;gap:3px;font-size:1.02rem}
.row-t em{font-style:normal;font-size:.8rem;color:var(--ink2)}
.tg{width:52px;height:30px;border-radius:16px;border:none;background:var(--line);
  cursor:pointer;position:relative;flex:none;transition:background .18s}
.tg::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;
  border-radius:50%;background:var(--paper2);transition:transform .18s;
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.tg.on{background:var(--terra)}
.tg.on::after{transform:translateX(22px)}
.seg{display:flex;gap:4px;background:var(--paper3);border-radius:10px;padding:4px;flex:none}
.seg button{border:none;background:none;color:var(--ink2);cursor:pointer;
  min-width:40px;height:36px;border-radius:7px;font-size:15px}
.seg button.on{background:var(--terra);color:#fff8ef}

/* ---------- подсказка ---------- */
.hint-sheet{padding:0 0 calc(14px + env(safe-area-inset-bottom))}
.hint-card{position:relative}
.hint-card .hint-img{width:100%;aspect-ratio:16/9;background:var(--paper3) center/cover no-repeat;
  border-radius:18px 18px 0 0;position:relative}
.hint-card .hint-img::after{content:'';position:absolute;inset:0;border-radius:18px 18px 0 0;
  background:linear-gradient(to bottom,transparent 30%,rgba(20,14,6,.55) 62%,rgba(20,14,6,.88) 100%)}

/* на десктопе шторки — не во всю ширину, а аккуратные карточки по центру */
@media (min-width:720px){
  .sheet-bottom{left:50%;right:auto;transform:translateX(-50%);
    width:min(460px,92vw);border-radius:18px;bottom:32px;max-height:82vh}
  #hint-sheet .sheet-bottom{top:50%;bottom:auto;transform:translate(-50%,-50%);
    width:min(420px,92vw);animation:kv-pop .2s cubic-bezier(.3,0,.2,1)}
  .hint-card .hint-img,.hint-card .hint-img::after{border-radius:18px 18px 0 0}
  .hint-card .hint-img{aspect-ratio:3/2}
  .sheet-grip{display:none}
}
@keyframes kv-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.hint-card .hint-cap{position:absolute;left:20px;right:60px;bottom:14px;z-index:2;color:#f6efe2}
.hint-card .hint-cap .term-cat{color:rgba(246,239,226,.72);margin:0 0 2px}
.hint-card .hint-cap h3{margin:0;font-size:1.6rem;color:#f6efe2}
.hint-card .hint-txt{padding:16px 20px 4px}
.hint-card .hint-txt h3{margin:0 0 8px;font-size:1.4rem}
.hint-card p{margin:0 0 14px;line-height:1.6}
.hint-x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;
  border:none;background:rgba(30,22,10,.5);color:#fff;font-size:19px;cursor:pointer}

/* ---------- оглавление ---------- */
.toc-book{display:block;color:var(--ink2);font-size:.9rem;padding:0 8px 12px;
  border-bottom:1px solid var(--line);margin-bottom:8px}
.toc-row{display:flex;gap:12px;padding:11px 8px;border-radius:8px;color:var(--ink)}
.toc-row .mono{color:var(--ink2);min-width:2.5em;flex:none;line-height:1.7}
.toc-row.read{color:var(--ink2)}
.toc-row.read .toc-t::after{content:' ✓';color:var(--teal);font-size:.85em}
.toc-row.current{background:var(--terra-soft);color:var(--terra)}
.toc-row.current .mono{color:var(--terra)}

/* ---------- глоссарий ---------- */
.glossary h1,.term-page h1,.static h1{font-size:clamp(1.8rem,7vw,2.4rem);margin:26px 0 18px}
.gl-cat{margin:0 0 40px}
.gl-cat-head,.gl-preview-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-bottom:12px}
.gl-cat-head h2{font-size:1.3rem;margin:0}
.gl-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media(min-width:720px){.gl-grid{grid-template-columns:repeat(3,1fr)}}
.gl-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gl-mini-grid .gl-mini:nth-child(n+9){display:none}
@media(min-width:560px){.gl-mini-grid{grid-template-columns:repeat(4,1fr)}}
.gl-card,.gl-mini{background:var(--paper2);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--card-sh);overflow:hidden;color:var(--ink);display:flex;flex-direction:column}
.gl-card .ci,.gl-mini .ci{aspect-ratio:1;background:var(--paper3) center/cover no-repeat}
.gl-card .ct{padding:10px 12px 2px;font-weight:600;line-height:1.2}
.gl-card .cs{padding:0 12px 12px;font-size:.85rem;color:var(--ink2);line-height:1.45;
  max-height:6.3em;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
.gl-mini .ct{padding:8px 10px 10px;font-size:.9rem;text-align:center}
.term-head{display:flex;gap:18px;align-items:center;margin:20px 0 24px}
.term-img{width:120px;height:120px;flex:none;border-radius:12px;padding:0;border:none;
  background:var(--paper3) center/cover no-repeat;position:relative;display:block}
button.term-img{cursor:zoom-in}
.zoom-ico{position:absolute;right:6px;bottom:6px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#f6efe2;
  background:rgba(30,22,10,.55);backdrop-filter:blur(4px);transition:background .16s}
button.term-img:hover .zoom-ico{background:var(--terra)}

/* просмотр картинки во весь экран */
#zoom-sheet{background:rgba(18,13,6,.86)}
#zoom-sheet.open{display:flex;align-items:center;justify-content:center;padding:24px}
.zoom-box{margin:0;max-width:min(1100px,94vw);max-height:88vh;display:flex;
  flex-direction:column;gap:12px;align-items:center}
.zoom-box img{max-width:100%;max-height:80vh;border-radius:10px;display:block;
  box-shadow:0 18px 60px rgba(0,0,0,.5)}
.zoom-box figcaption{color:rgba(246,239,226,.72)}
.zoom-x{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;
  border-radius:50%;border:none;background:rgba(246,239,226,.14);color:#f6efe2;
  font-size:24px;line-height:1;cursor:pointer}
.zoom-x:hover{background:rgba(246,239,226,.26)}
.term-cat{color:var(--ink2);margin:0 0 4px}
.term-head h1{margin:0;font-size:clamp(1.6rem,6vw,2.2rem)}
.term-body{font-size:17px;line-height:1.7}
.term-body p{margin:0 0 1.1em}
.term-src{font-size:.78rem;color:var(--ink2);margin:18px 0 0}
.term-related{margin-top:44px}

.empty-note{color:var(--ink2);font-size:.95rem;line-height:1.6;padding:18px;border:1px dashed var(--line);border-radius:12px}

/* ---------- статические страницы ---------- */
.static-body{font-size:17px;line-height:1.7}
.static-body p{margin:0 0 1.1em}
.static-body.lead{color:var(--ink2)}

/* ---------- мини-плеер ---------- */
#player{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;
  display:flex;gap:10px;align-items:center;background:var(--paper2);border:1px solid var(--line);
  border-radius:24px;padding:6px 12px;box-shadow:var(--card-sh)}
#player[hidden]{display:none}
#player button{background:none;border:none;cursor:pointer;font-size:15px;color:var(--ink)}
#music-vol{width:78px;accent-color:var(--terra)}

/* ---------- крошки, дисклеймер ---------- */
.crumbs{color:var(--ink2);font-size:.85rem;margin:18px 0 0}
.crumbs a{color:var(--ink2)}
.crumbs .breadcrumb{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs .breadcrumb-item + .breadcrumb-item::before{content:'/';margin-right:6px;opacity:.5}
.disclaimer{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--ink2);font-size:.8rem;line-height:1.55}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}