/* =========================================================
   教材ページ共通スタイル(A案「ノート」+ 部品のメリハリは比較のB案「淡い面」)
   各ページは <link rel="stylesheet" href="../../common/style.css"> で読み込む。
   ページ固有の部品だけをページ内の <style> に書く。
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Zen+Old+Mincho:wght@500;700&family=STIX+Two+Text:ital@0;1&display=swap");

/* ===== 色(すべてここで定義。明暗2テーマ) ===== */
:root {
  --bg: #F6F4EF;          /* 地: 生成りの紙 */
  --text: #2E2B27;
  --text-sub: #5A554C;
  --text-faint: #7A7468;
  --rule: #DDD8CE;        /* 区切り線 */
  --accent: #3D5A73;      /* 操作用の色(1色だけ) */
  --accent-strong: #2B4256;
  --fig-ground: #BDB6A8;  /* 図: 地面 */
  --fig-fill: #ECE7DC;    /* 図: 斜面・台などの面 */
  --fig-line: #8C8577;    /* 図: 補助線 */
  --fig-body: #FFFDF8;    /* 図: 物体 */
  --fig-body-line: #5A554C;
  /* 意味の色(全ページ共通)。線と文字で濃さを分けているものがある */
  --c-gravity: #B4533F;        /* 重力 */
  --c-normal: #2F6B4F;         /* 垂直抗力 */
  --c-friction: #A9822F;       /* 摩擦力(線) */
  --c-friction-text: #8A6A22;  /* 摩擦力(文字) */
  --c-velocity: #7B4F86;       /* 速度 */
  --c-displacement: #2D7480;   /* 変位 */
  --c-acceleration: #C0682B;   /* 加速度(2026-10-12) */
  --c-force: #35519A;          /* 一般の力(手・ひもで引く力、合力、分力)(2026-10-15) */
  --key: #B3302A;              /* 本文の強調(用語の初出・結論の一言の線)。教科書の赤字にあたる(2026-10-09) */
  /* 淡い面(2026-10-08 追加): 公式・式・例題・答えだけに使う */
  --panel: #E9E3D6;        /* 要点の囲み枠(公式) */
  --panel-soft: #EFEAE0;   /* 本文の式、例題の見出し帯、開いた答え */
  --panel-card: #FBF9F4;   /* 例題の本体 */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1F1E1B; --text: #E7E2D7; --text-sub: #B5AE9F; --text-faint: #8F8879;
    --rule: #3B3933; --accent: #9DB7CE; --accent-strong: #C0D3E3;
    --fig-ground: #5A564D; --fig-fill: #2B2925; --fig-line: #8F8879;
    --fig-body: #27251F; --fig-body-line: #CFC8BA;
    --c-gravity: #E08B77; --c-normal: #7EC09A; --c-friction: #D5B465; --c-friction-text: #D5B465;
    --c-velocity: #C39BD0; --c-displacement: #7FC3CC; --c-acceleration: #E8A06A; --c-force: #8EA5F2; --key: #F08C7E;
    --panel: #2E2B26; --panel-soft: #292722; --panel-card: #24221E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1F1E1B; --text: #E7E2D7; --text-sub: #B5AE9F; --text-faint: #8F8879;
  --rule: #3B3933; --accent: #9DB7CE; --accent-strong: #C0D3E3;
  --fig-ground: #5A564D; --fig-fill: #2B2925; --fig-line: #8F8879;
  --fig-body: #27251F; --fig-body-line: #CFC8BA;
  --c-gravity: #E08B77; --c-normal: #7EC09A; --c-friction: #D5B465; --c-friction-text: #D5B465;
  --c-velocity: #C39BD0; --c-displacement: #7FC3CC; --c-acceleration: #E8A06A; --c-force: #8EA5F2; --key: #F08C7E;
  --panel: #2E2B26; --panel-soft: #292722; --panel-card: #24221E;
  color-scheme: dark;
}

/* ===== 土台 ===== */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "BIZ UDPGothic", sans-serif;
  font-size: 17px;
  line-height: 1.9;
}
.page { max-width: 760px; margin: 0 auto; padding: 56px 16px 96px; }
a { color: var(--accent); }
a:hover { color: var(--accent-strong); }
p { margin: 0 0 16px; }

/* ===== 見出し ===== */
.crumb { font-size: 13px; color: var(--text-faint); letter-spacing: .08em; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
h1, h2, h3 { font-family: "Zen Old Mincho", serif; font-weight: 700; }
h1 { font-size: 34px; line-height: 1.5; margin: 40px 0 12px; }
h2 { font-size: 22px; line-height: 1.5; margin: 56px 0 12px; }
h3 { font-size: 18px; line-height: 1.5; margin: 32px 0 8px; }
.lead { color: var(--text-sub); margin-bottom: 36px; }

/* ===== 数式 =====
   変数は .m(斜体)、関数名・数字・記号は .mr(立体)。
   ベクトルは <span class="m vec">v</span> で文字の上に矢印 */
.m  { font-family: "STIX Two Text", serif; font-style: italic; font-size: 1.08em; }
.mr { font-family: "STIX Two Text", serif; font-size: 1.08em; }
/* 添字(v₁ の 1、v_AB の AB)。.mr の 1.08em が効くと本体の文字と同じ大きさになるので、小さく下げる */
sub.mr, sub.m { font-size: .68em; vertical-align: -.32em; line-height: 0; margin-left: .04em; }
sup.mr, sup.m { font-size: .68em; vertical-align: .5em; line-height: 0; margin-left: .04em; }
.vec { position: relative; display: inline-block; padding-top: .35em; line-height: 1; }
.vec::before {
  content: "→"; position: absolute; left: 50%; top: -.05em;
  transform: translateX(-45%); font-style: normal; font-size: .62em; line-height: 1;
}
.eq { text-align: center; font-size: 22px; padding: 12px 16px; margin: 8px 0 24px; overflow-x: auto; background: var(--panel-soft); border-radius: 4px; }
.eq .sep { margin: 0 12px; }
/* 式のひとまとまり。途中で改行させない(本文中の x = vt などもこれでくるむ) */
.eqp { display: inline-block; }
/* 式の後ろの小さな注記。例:(時刻 0 に原点を出発したとき) */
.fnote { display: inline-block; font-size: 15px; color: var(--text-sub); margin-left: .4em; }

/* ===== 触れる図 ===== */
.figure { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 28px 0; }
.figure svg, .figure canvas { width: 100%; height: auto; display: block; }
/* PC 幅で図が大きくなりすぎて、図とつまみが1画面に入らないのを防ぐ(2026-10-16)。
   高さで止まったときは、SVG の中で絵が真ん中に寄る */
.figure svg { max-width: 572px; max-height: 500px; margin: 0 auto; }
/* 図の文字とつまみの見出しを選択できないようにする。選択がつまみを含むと、PC でつまみを押したときに
   「選択した文字のドラッグ」になり、禁止カーソルが出てつまみが動かない(common/figure.js も選択を外す) */
.controls, .figure svg { -webkit-user-select: none; user-select: none; }
/* 図(SVG)の中の添字。変数の tspan(.var、14px 前後)の後に <tspan class="sub" dy="4">AB</tspan> と書き、
   続く文字は dy="-4" で戻す。立体の数式書体で、変数より小さくする */
svg .sub { font-family: "STIX Two Text", serif; font-style: normal; font-size: 9.5px; }
.controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; margin-top: 20px; }
.control-head { display: flex; justify-content: space-between; font-size: 15px; }
/* つまみ(2026-10-16): 丸を 22px にし、上でカーソルを指の形にする。左側の塗りの位置 --r(0〜1)は common/figure.js が入れる */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 32px; margin: 4px 0 0; padding: 0;
  background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) calc(11px + var(--r, 0) * (100% - 22px)), var(--rule) 0);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px; box-sizing: border-box;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--bg);
}
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--rule); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; box-sizing: border-box;
  border-radius: 50%; background: var(--accent); border: 3px solid var(--bg);
}
input[type="range"]:hover::-webkit-slider-thumb { background: var(--accent-strong); }
input[type="range"]:hover::-moz-range-thumb { background: var(--accent-strong); }
.readout { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 16px; font-size: 15px; color: var(--text-sub); }
.readout strong { color: var(--text); }
.v-gravity { color: var(--c-gravity); }
.v-normal { color: var(--c-normal); }
.v-friction { color: var(--c-friction-text); }
.v-velocity { color: var(--c-velocity); }
.v-displacement { color: var(--c-displacement); }
.v-acceleration { color: var(--c-acceleration); }
.v-force { color: var(--c-force); }

/* ===== 動画の枠(2026-10-17) =====
   動画の地はページと同じ紙の色なので、枠がないと動画の範囲が見分けられない。細い線だけで囲む */
figure.video video { box-sizing: border-box; border: 1px solid var(--fig-ground); border-radius: 6px; }

/* ===== ボタン(塗らずに枠線だけ) ===== */
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  min-height: 44px; padding: 0 18px;
  font: inherit; font-size: 16px;
  background: transparent; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px; cursor: pointer;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.link-btn {
  min-height: 44px; padding: 0; font: inherit;
  background: none; border: 0; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
}
.btn:focus-visible, .link-btn:focus-visible, summary:focus-visible,
input:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ===== 教科書の部品(2026-10-08 追加) ===== */
/* このページで分かること: 見出しの下に3行ほど */
.goals { margin: 0 0 32px; padding: 0; list-style: none; color: var(--text-sub); }
.goals li { padding-left: 1.2em; position: relative; margin-bottom: 4px; }
.goals li::before { content: "・"; position: absolute; left: 0; }

/* 要点の囲み枠(このページの公式)。淡い面に大きな文字で置く */
.keypoints { background: var(--panel); border-radius: 6px; padding: 24px 32px 16px; margin: 0 0 48px; }
.keypoints > .label { font-family: "Zen Old Mincho", serif; font-weight: 700; font-size: 15px; color: var(--accent); margin: 0 0 10px; letter-spacing: .1em; }
.keypoints dl { margin: 0; }
.keypoints dt { font-weight: 700; margin-top: 12px; }
.keypoints dd { margin: 0 0 12px; }
.keypoints .formula { font-size: 21px; padding: 4px 0; overflow-x: auto; }
.keypoints .label.kp-sub { margin-top: 20px; }   /* 「公式」の後の「用語」などの2つ目の見出し */
/* 式ではなく文の行(折り返しても名前の列の右にそろえる。ラベルは「要点」にする。2026-10-15) */
.keypoints .formula.kp-text { display: flex; align-items: baseline; }
.keypoints .formula.kp-text .fname { flex-shrink: 0; }
@media (max-width: 560px) { .keypoints .formula.kp-text { display: block; } }
.formula .fname { display: inline-block; min-width: 8.5em; font-size: 14px; color: var(--text-sub); margin-right: .6em; }   /* 公式の名前(左の列にそろえる) */

/* 項目: 番号つきの小見出し → 結論の一言 → 小さな図 → 短い説明 */
.step { margin-top: 56px; }
.step > h2 { margin-top: 0; }
.step-no { display: block; font-family: "STIX Two Text", serif; font-size: 20px; font-weight: 400; line-height: 1.3; color: var(--accent); }
/* 結論の一言: 黒の太字で、左に赤の細い線(2026-10-09) */
.point { font-weight: 700; border-left: 3px solid var(--key); padding: 2px 0 2px 14px; margin: 0 0 20px; }

/* 本文で用語が初めて出る所(2026-10-09)。赤の太字。本文の色はこれだけにする
   (紫や青の文字は本文の中で黒と見分けにくいという評価から。意味の色は図と数値表示だけで使う)
   例: <b class="term">速度</b> */
.term { font-weight: 700; color: var(--key); }

/* 前のページの続きであることを示す一文(h1 の下) */
.prev-note { font-size: 15px; color: var(--text-sub); border-top: 1px dashed var(--fig-ground); padding-top: 10px; margin: -16px 0 32px; }

/* 例題: 見出しの帯(.ex-head)→ 問題 → 解き方の手順 → 答え(.ans) */
.example { background: var(--panel-card); border: 1px solid var(--rule); border-radius: 6px; padding: 0 24px 14px; margin: 28px 0 8px; overflow: hidden; }
.example .ex-head { margin: 0 -24px 14px; padding: 8px 24px; background: var(--panel-soft); }
.example .no { font-family: "Zen Old Mincho", serif; font-weight: 700; color: var(--accent); margin-right: .8em; }
.example ol.steps { margin: 8px 0 12px; padding-left: 1.6em; }
.example ol.steps li { margin-bottom: 6px; }
.example ol.steps li::marker { color: var(--accent); font-weight: 700; }
.example .ans { margin: 0; padding-top: 10px; border-top: 1px dashed var(--fig-ground); }

/* 図の観察課題(図の直後)と確認の小問(2026-10-08 追加)。面は使わず、ラベルと細い線だけ */
.observe, .check { border-top: 1px dashed var(--fig-ground); padding: 12px 0 4px; margin: 16px 0 8px; }
.observe > .label, .check > .label { font-family: "Zen Old Mincho", serif; font-weight: 700; font-size: 15px; color: var(--accent); margin: 0 0 4px; letter-spacing: .08em; }
.observe details p, .check details p { color: var(--text-sub); }

/* 数値の表(例: 時刻と位置)。グラフの前に置く */
table.data { border-collapse: collapse; margin: 8px 0 20px; font-family: "STIX Two Text", serif; font-size: 17px; }
table.data th, table.data td { border-bottom: 1px solid var(--rule); padding: 4px 14px; text-align: center; }
table.data th { font-family: "BIZ UDPGothic", sans-serif; font-size: 14px; font-weight: 400; color: var(--text-sub); text-align: left; }
.table-wrap { overflow-x: auto; }

/* ===== 「図で確かめる」の後に出る、問題へ戻る帯(中身は common/figure.js が入れる。2026-10-16) ===== */
.fig-back { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: none;
  background: var(--bg); border-top: 1px solid var(--accent); }
.fig-back.on { display: block; }
.fig-back-inner { max-width: 760px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.fig-back-msg { margin: 0; font-size: 15px; color: var(--text-sub); flex: 1 1 auto; }
.fig-back-btns { display: flex; align-items: center; gap: 8px; }
.fig-back .btn { min-height: 40px; padding: 0 14px; font-size: 15px; }
.fig-back-close { min-width: 40px; min-height: 40px; font: inherit; font-size: 20px; line-height: 1;
  background: none; border: 0; color: var(--text-sub); cursor: pointer; }
.fig-back-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body.fig-back-on .page { padding-bottom: 160px; }

/* 練習問題を解法パターンごとにまとめるときの小見出し */
.pattern { font-size: 17px; margin: 40px 0 4px; }
.pattern + .pattern-note { color: var(--text-sub); font-size: 15px; margin: 0 0 8px; }

/* ===== 練習問題 ===== */
.problem { border-top: 1px solid var(--rule); padding: 16px 0 8px; }
/* 問題番号は枠つきのラベル(塗らない) */
.problem .no { display: inline-block; min-width: 3em; padding: 0 6px; margin-right: .8em; border: 1px solid var(--accent); border-radius: 4px; color: var(--accent-strong); font-weight: 700; font-size: 15px; line-height: 28px; text-align: center; }
/* 開いた答えは淡い面に入れる */
.problem details[open] { background: var(--panel-soft); border-radius: 4px; padding: 0 16px 4px; margin-bottom: 8px; }
/* 問題文に添える静止画(グラフなど) */
.qfig { max-width: 340px; margin: 4px 0 12px; }
.qfig svg { width: 100%; height: auto; display: block; }
.qfig text { font-size: 12px; }
.qfig .var { font-family: "STIX Two Text", serif; font-style: italic; font-size: 13px; }
details summary { cursor: pointer; color: var(--accent); padding: 8px 0; }
details p { color: var(--text-sub); }

/* ===== つまずきやすいところ ===== */
ul.traps { margin: 0; padding-left: 1.3em; }
ul.traps li { margin-bottom: 8px; }

/* ===== 前へ・次へ(unit-nav.js が中身を入れる) ===== */
.unit-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 72px; border-top: 1px solid var(--rule); padding-top: 20px; }
.unit-nav:empty { display: none; }
.unit-nav a { display: block; text-decoration: none; padding: 8px 0; min-height: 44px; }
.unit-nav a:hover .t { text-decoration: underline; text-underline-offset: 4px; }
.unit-nav .dir { display: block; font-size: 13px; color: var(--text-faint); }
.unit-nav .t { color: var(--accent); }
.unit-nav .next { grid-column: 2; text-align: right; }
.unit-nav .draft { font-size: 12px; color: var(--text-faint); margin-left: .4em; }

/* ===== この章の単元(unit-nav.js が作る。2026-10-10) =====
   冒頭はパンくずの下に折りたたみ、末尾は前へ・次への下に開いた形 */
.unit-toc { font-size: 15px; }
.unit-toc-top { border-bottom: 1px solid var(--rule); }
.unit-toc-top summary { padding: 10px 0; }
.unit-toc-top[open] { padding-bottom: 8px; }
.unit-toc .toc-pos { color: var(--text-faint); margin-left: .6em; font-size: 13px; }
.unit-toc-bottom { margin-top: 32px; }
.unit-toc .toc-head { font-family: "Zen Old Mincho", serif; font-weight: 700; color: var(--text-sub); margin: 0 0 4px; }
.toc-list { margin: 0 0 8px; padding-left: 1.8em; }
.toc-list li { padding: 3px 0; }
.toc-list li::marker { color: var(--text-faint); }
.toc-list a { text-decoration: none; }
.toc-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.toc-list .toc-here { font-weight: 700; }
/* このページの内容(page-toc.js が作る。2026-10-16)。「この章の単元」の下に同じ形の折りたたみで置く */
.page-toc-list { list-style: none; padding-left: 0; }
.page-toc-list .page-toc-no { display: inline-block; min-width: 1.6em; font-family: "STIX Two Text", serif; color: var(--text-faint); }
.page-toc-list .page-toc-other { margin-top: 4px; }
.step, h2 { scroll-margin-top: 16px; }
.toc-list .toc-here::after { content: "(このページ)"; font-weight: 400; font-size: 13px; color: var(--text-faint); }
.toc-list .draft { font-size: 12px; color: var(--text-faint); margin-left: .4em; }
.toc-all { margin: 0; font-size: 14px; }

/* ===== 塾の案内(枠のみ。中身は塾の了承後) ===== */
/* 淡い面で囲み、リンクは枠線のボタンにする(2026-10-11。淡い面を使う例外。AGENTS.md 7章) */
.juku { margin-top: 48px; background: var(--panel-soft); border-radius: 6px; padding: 20px 24px; font-size: 15px; color: var(--text); }
/* 中身は common/juku.js が入れる。中身がないあいだは枠ごと見せない(2026-10-11) */
.juku:empty { display: none; }
.juku p { margin: 0 0 12px; }
/* 「広告」の表示と、作者と教室の関係の注記(2026-10-12) */
.juku .juku-label { display: inline-block; font-size: 12px; line-height: 1.6; color: var(--text-sub); border: 1px solid var(--text-faint); border-radius: 3px; padding: 0 6px; margin: 0 0 8px; }
.juku .juku-note { font-size: 13px; color: var(--text-sub); margin-top: -4px; }
.juku .juku-head { font-family: "Zen Old Mincho", serif; font-weight: 700; font-size: 18px; margin-bottom: 8px; }
.juku a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--accent); border-radius: 4px; color: var(--accent); text-decoration: none;
}
.juku a:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
/* 線画つき(juku.js の illust: true)。PC 幅では右に、スマホ幅では文章の上に小さく置く */
.juku.has-fig { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 8px 24px; align-items: center; }
.juku .juku-fig { width: 100%; height: auto; display: block; }
@media (max-width: 560px) {
  .juku.has-fig { grid-template-columns: minmax(0, 1fr); }
  .juku .juku-fig { order: -1; width: 150px; justify-self: center; }
}

/* ===== 全ページ共通のフッター(中身は common/site-foot.js が入れる。2026-10-12) ===== */
.site-foot { margin-top: 72px; border-top: 1px solid var(--rule); padding-top: 20px; font-size: 13px; color: var(--text-faint); }
.site-foot p { margin: 0 0 8px; }
.site-foot a { color: var(--text-sub); text-underline-offset: 3px; }
.site-foot .site-foot-report { font-size: 14px; }

/* ===== スマホ幅 ===== */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .page { padding-top: 32px; }
  h1 { font-size: 26px; margin-top: 28px; }
  h2 { font-size: 20px; margin-top: 44px; }
  .controls { grid-template-columns: minmax(0, 1fr); }
  .eq { font-size: 18px; }
  .keypoints { padding: 18px 16px 8px; }
  .keypoints .formula { font-size: 18px; }
  .formula .fname { display: block; min-width: 0; margin: 4px 0 0; }
  .example { padding: 0 16px 12px; }
  .example .ex-head { margin: 0 -16px 12px; padding: 8px 16px; }
  .step { margin-top: 44px; }
  .unit-nav { grid-template-columns: minmax(0, 1fr); }
  .unit-nav .next { grid-column: 1; }
  /* 図は約 0.8 倍に縮んで文字が小さくなるので、図を左右の余白へ 12px ずつ広げ(約 0.87 倍)、
     図の文字も少し大きくする(各ページの .fig text 12px などより優先。2026-10-16) */
  .figure svg.fig { width: calc(100% + 24px); max-width: none; margin: 0 -12px; }
  svg.fig text { font-size: 13px; }
  svg.fig .tk { font-size: 12px; }
  svg.fig .var { font-size: 15px; }
  svg.fig .sub { font-size: 10px; }
  /* 図の端にある・間隔が狭いなど、大きくするとはみ出す・重なる文字は class="fs-fixed" で元の大きさのまま */
  svg.fig text.fs-fixed { font-size: 12px; }
  svg.fig .tk.fs-fixed { font-size: 11px; }
  /* 表は余白を詰めて、なるべく幅に収める */
  table.data { font-size: 16px; }
  table.data th, table.data td { padding: 4px 8px; }
  .fig-back-inner { padding: 6px 12px; }
  .fig-back-msg { flex-basis: 100%; font-size: 14px; }
  .fig-back .btn { padding: 0 10px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}