:root{
    /* ============ テーマ色（既定：インク・クラシック） ============
       テーマを切り替えるときは、references/themes.md から該当する :root ブロックをコピーし、
       この数行（--ink / --ink-rgb / --paper / --paper-rgb）をまとめて差し替える
       ほかの場所の rgba() はすべて var(--ink-rgb) / var(--paper-rgb) を参照しているので、個別に直す必要はない */
    --ink:#0a0a0b;
    --ink-rgb:10,10,11;
    --paper:#f1efea;
    --paper-rgb:241,239,234;
    --paper-tint:#e8e5de;
    --ink-tint:#18181a;
    --bg-solid-dark:var(--ink);
    --bg-solid-light:var(--paper);

    /* ============ フォント（テーマ共通で固定） ============ */
    --mono:"IBM Plex Mono",ui-monospace,monospace;
    --serif-en:"Playfair Display","Source Serif 4",Georgia,serif;
    --serif-body-en:"Source Serif 4",Georgia,serif;
    --serif-zh:"Noto Serif JP",serif;
    --sans-zh:"Noto Sans JP",sans-serif;

    /* ============ 強調色（朱。「進行中・育つ・いま」だけに使う） ============ */
    --accent:#b5372a;
    --accent-rgb:181,55,42;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink);font-family:var(--sans-zh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

  /* ============ 単色背景 ============ */
  body{background:var(--bg-solid-light)}
  body.light-bg{background:var(--bg-solid-light)}

  /* ============ Deck のコンテナとページ送り ============ */
  /* width: NSLIDES * 100vw。JS で実行時に補正する */
  #deck{position:fixed;inset:0;width:10000vw;height:100vh;display:flex;flex-wrap:nowrap;transition:none;z-index:10;will-change:transform}
  .slide{width:100vw;height:100vh;flex:0 0 100vw;position:relative;padding:6vh 6vw 10vh 6vw;display:flex;flex-direction:column;overflow:hidden}
  .slide.light{color:var(--ink);background:var(--paper)}
  .slide.dark{color:var(--paper);background:var(--ink)}

  /* 通常のページ：文字が読めるよう、覆いを濃くする */
  .slide::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background .7s ease}
  .slide.light::before{background:rgba(var(--paper-rgb),.78)}
  .slide.dark::before{background:rgba(var(--ink-rgb),.78)}
  /* Hero ページ：覆いを大きく薄くし、WebGL の背景をはっきり透かす */
  .slide.hero.light::before{background:rgba(var(--paper-rgb),.16);backdrop-filter:none}
  .slide.hero.dark::before{background:rgba(var(--ink-rgb),.12);backdrop-filter:none}
  /* Hero ページ：上下をわずかにぼかし、chrome/foot の部分を読めるようにする */
  .slide.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
  .slide.hero.light::after{background:linear-gradient(180deg,rgba(var(--paper-rgb),.28) 0%,rgba(var(--paper-rgb),0) 14%,rgba(var(--paper-rgb),0) 86%,rgba(var(--paper-rgb),.28) 100%)}
  .slide.hero.dark::after{background:linear-gradient(180deg,rgba(var(--ink-rgb),.32) 0%,rgba(var(--ink-rgb),0) 14%,rgba(var(--ink-rgb),0) 86%,rgba(var(--ink-rgb),.32) 100%)}

  /* ============ Magazine chrome：上部の meta と下部の foot ============
     （v1 のレイアウトと v2 の文字サイズをここにまとめた唯一の定義。ほかの場所で定義し直さない） */
  .chrome{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--mono);font-size:max(11px,.78vw);letter-spacing:.2em;text-transform:uppercase;opacity:.62}
  .chrome .left,.chrome .right{display:flex;gap:2.4em;align-items:center}
  .chrome .sep{width:40px;height:1px;background:currentColor;opacity:.4}
  .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:max(11px,.78vw);letter-spacing:.18em;text-transform:uppercase;opacity:.5}
  .foot .title{font-family:var(--serif-zh);font-weight:400;letter-spacing:.05em;text-transform:none;opacity:.75;font-size:13px}

  .tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:6px 14px;border:1px solid currentColor;opacity:.85}
  .rule{width:100%;height:1px;background:currentColor;opacity:.25;margin:3vh 0}
  .rule.v{width:1px;height:100%;margin:0}

  /* ============ フォントの使い分け ============
     · 明朝体（Noto Serif JP / Playfair）：大見出し、強調したい一文、数字
     · ゴシック体（Noto Sans JP）：本文、body、補足説明
     · 等幅（IBM Plex Mono）：kicker、meta の小さなラベル、foot の右側
  */
  .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.6;margin-bottom:2.6vh}
  .display{font-family:var(--serif-en);font-weight:700;font-size:11vw;line-height:.92;letter-spacing:-.025em}
  .display-zh{font-family:var(--serif-zh);font-weight:700;font-size:7.8vw;line-height:1.04;letter-spacing:-.005em}
  .h1-zh{font-family:var(--serif-zh);font-weight:700;font-size:4.6vw;line-height:1.12;letter-spacing:-.005em}
  .h2-zh{font-family:var(--serif-zh);font-weight:600;font-size:3.2vw;line-height:1.2;letter-spacing:0}
  .h3-zh{font-family:var(--serif-zh);font-weight:500;font-size:1.9vw;line-height:1.35}
  .body-zh{font-family:var(--sans-zh);font-weight:400;font-size:max(15px,1.22vw);line-height:1.75;opacity:.82;letter-spacing:.01em}
  .body-serif{font-family:var(--serif-zh);font-weight:400;font-size:max(15px,1.3vw);line-height:1.65;opacity:.88}
  .lead{font-family:var(--serif-zh);font-weight:400;font-size:1.75vw;line-height:1.5;opacity:.86}
  .meta{font-family:var(--mono);font-size:max(11px,.88vw);letter-spacing:.16em;text-transform:uppercase;opacity:.6}
  .big-num{font-family:var(--serif-en);font-weight:800;font-size:10vw;line-height:.85;letter-spacing:-.03em;font-feature-settings:"tnum"}
  .mid-num{font-family:var(--serif-en);font-weight:700;font-size:5.5vw;line-height:.88;letter-spacing:-.02em;font-feature-settings:"tnum"}
  .ghost{font-family:var(--serif-en);font-weight:900;font-size:34vw;line-height:.8;opacity:.06;letter-spacing:-.04em;position:absolute;font-feature-settings:"tnum"}
  em{font-style:italic;font-family:var(--serif-en)}
  .en{font-family:var(--serif-en);font-style:italic;font-weight:500}

  /* ============ レイアウト用のユーティリティ ============ */
  .col{display:flex;flex-direction:column;gap:2.4vh}
  .row{display:flex;align-items:center;gap:3vw}
  .grid-6{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:4vw 6vw;flex:1;align-content:center;padding:2vh 0}
  .grid-9{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3vh 4vw;flex:1;align-content:center}
  .grid-4{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4vh 6vw;flex:1;align-content:center}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;flex:1;align-content:center}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:4vw;flex:1;align-items:center}
  .split-55{display:grid;grid-template-columns:55fr 45fr;gap:5vw;flex:1;align-items:stretch}
  .fill{flex:1}
  .center{align-items:center;justify-content:center;text-align:center}
  .bottom-left{position:absolute;left:6vw;bottom:9vh;max-width:50vw}
  .bottom-right{position:absolute;right:6vw;bottom:9vh;max-width:50vw;text-align:right}
  .top-right{position:absolute;right:6vw;top:6vh;text-align:right}

  /* ============ Stat（数字の並び） ============ */
  .stat{display:flex;flex-direction:column;gap:1vh;align-items:flex-start}
  .stat .n{font-family:var(--serif-en);font-weight:800;font-size:8vw;line-height:.88;letter-spacing:-.03em;font-feature-settings:"tnum"}
  .stat .l{font-family:var(--sans-zh);font-size:max(13px,1.05vw);opacity:.7;margin-top:1vh;font-weight:400;line-height:1.5}
  .stat .m{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-bottom:.2vh}

  /* ============ Callout（引用枠） ============ */
  .callout{padding:3vh 2.4vw;border-left:3px solid currentColor;position:relative;font-family:var(--serif-zh);font-size:max(15px,1.2vw);line-height:1.55;opacity:.92}
  .slide.light .callout{background:rgba(var(--ink-rgb),.05)}
  .slide.dark .callout{background:rgba(var(--paper-rgb),.06)}
  .callout .cite{display:block;margin-top:1.6vh;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
  .callout .q-big{font-family:var(--serif-zh);font-weight:600;font-size:max(17px,1.6vw);line-height:1.42}

  /* ============ Platform（プラットフォームのカード） ============ */
  .plat{display:flex;flex-direction:column;justify-content:flex-end;padding:2vh 0;border-top:1px solid currentColor;border-color:rgba(127,127,127,.35)}
  .plat .name{font-family:var(--serif-zh);font-weight:700;font-size:1.8vw;margin-bottom:.6vh}
  .plat .nb{font-family:var(--serif-en);font-weight:700;font-size:3.2vw;letter-spacing:-.02em;line-height:1;font-feature-settings:"tnum"}
  .plat .sub{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-top:.6vh}
  .plat .fill{font-family:var(--sans-zh);font-weight:300;font-size:2.4vw;opacity:.28;letter-spacing:-.01em;line-height:1}

  /* ============ Rowline（表の行） ============ */
  .rowline{display:grid;grid-template-columns:1fr 2fr 1fr;gap:2vw;padding:2.2vh 0;border-top:1px solid currentColor;align-items:center;border-color:rgba(127,127,127,.25)}
  .rowline:last-child{border-bottom:1px solid currentColor;border-color:rgba(127,127,127,.25)}
  .rowline .k{font-family:var(--serif-zh);font-weight:700;font-size:1.7vw}
  .rowline .v{font-family:var(--sans-zh);font-weight:400;font-size:max(14px,1.2vw);opacity:.85;line-height:1.55}
  .rowline .m{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;justify-self:end}

  /* ============ Pillar（柱のカード） ============ */
  .pillar{display:flex;flex-direction:column;gap:1.8vh}
  .pillar .ic{font-family:var(--serif-en);font-style:italic;font-size:2.6vw;opacity:.45;font-weight:400}
  .pillar .ic svg{width:2.8vw;height:2.8vw;stroke-width:1.2;opacity:.7}
  .pillar .t{font-family:var(--serif-zh);font-weight:700;font-size:2.4vw;line-height:1.1}
  .pillar .d{font-family:var(--sans-zh);font-weight:400;font-size:max(14px,1.1vw);opacity:.76;line-height:1.6}

  /* ============ Signature / Highlight ============ */
  .sign{font-family:var(--serif-en);font-style:italic;font-weight:500;font-size:2vw;opacity:.7}
  .hi{position:relative;display:inline}
  .slide.dark .hi::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:-.05em;height:.28em;background:rgba(var(--paper-rgb),.15);z-index:-1}
  .slide.light .hi::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:-.05em;height:.28em;background:rgba(var(--ink-rgb),.08);z-index:-1}

  /* ============ Icons（Lucide via CDN） ============ */
  .ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
  .ico-lg,.ico-md,.ico-sm{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
  .ico-lg{width:2.6vw;height:2.6vw;stroke-width:1.2;display:inline-block}
  .ico-md{width:1.8vw;height:1.8vw;stroke-width:1.3;display:inline-block;vertical-align:-.4em}
  .ico-sm{width:1.1vw;height:1.1vw;stroke-width:1.4;display:inline-block;vertical-align:-.15em;opacity:.7}

  /* ============ 画像を入れる枠（重要：高さを固定し、下だけを切り取る） ============
     重要な制約：高さはインラインの height:Nvh で厳密に指定する。aspect-ratio は使わない（レイアウトが崩れる）
     object-position:top center で、上と左右は切らず、下だけを切り取る
  */
  .frame-img{overflow:hidden;position:relative;background:rgba(0,0,0,.04);box-sizing:border-box;width:100%;border-radius:4px}
  .slide.dark .frame-img{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
  .frame-img > img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
  .frame-img.fit-contain > img{object-fit:contain;object-position:center center}
  .frame-img.r-16x9{aspect-ratio:16/9;max-height:64vh}
  .frame-img.r-16x10{aspect-ratio:16/10;max-height:56vh}
  .frame-img.r-4x3{aspect-ratio:4/3;max-height:56vh}
  .frame-img.r-3x2{aspect-ratio:3/2;max-height:46vh}
  .frame-img.r-3x4{aspect-ratio:3/4;max-height:60vh}
  .frame-img.r-1x1{aspect-ratio:1/1;max-height:50vh}
  .frame-img.h-16{height:16vh}
  .frame-img.h-18{height:18vh}
  .frame-img.h-22{height:22vh}
  .frame-img.h-26{height:26vh}
  .frame-img.h-28{height:28vh}
  .frame-cap{display:flex;justify-content:space-between;align-items:baseline;gap:1vw;margin-top:.8vh;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.72}
  .frame-cap .pf{font-family:var(--serif-zh);font-weight:600;font-size:max(13px,1vw);letter-spacing:.04em;text-transform:none;opacity:.94}
  .frame-cap .nb{font-family:var(--serif-en);font-style:italic;font-size:max(15px,1.2vw);letter-spacing:.02em;text-transform:none;opacity:.88}
  .frame-cap .idx{font-family:var(--mono);opacity:.5}
  figure.tile{display:flex;flex-direction:column;margin:0;min-width:0}
  figure.tile > .frame-img{flex:0 0 auto}

  /* ============ ナビゲーション ============ */
  #nav{position:fixed;left:50%;bottom:2.6vh;transform:translateX(-50%);z-index:30;display:flex;gap:10px;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  #nav .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s ease;border:0;padding:0}
  #nav .dot:hover{background:rgba(255,255,255,.5);transform:scale(1.15)}
  #nav .dot.active{background:rgba(255,255,255,.95);width:22px;border-radius:999px}
  body.light-bg #nav{background:rgba(255,255,255,.25)}
  body.light-bg #nav .dot{background:rgba(var(--ink-rgb),.25)}
  body.light-bg #nav .dot.active{background:rgba(var(--ink-rgb),.9)}
  #hint{position:fixed;bottom:3vh;right:3vw;z-index:30;display:flex;align-items:center;gap:.65em;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.4;mix-blend-mode:difference;color:#aaa}
  #hint button{all:unset;display:inline-flex;align-items:center;gap:.45em;cursor:pointer;color:inherit;white-space:nowrap}
  #hint button:hover,#hint button:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:.35em}
  #hint .ppt-key{padding:.16em .38em;border:1px solid currentColor;border-radius:3px;letter-spacing:.08em}
  #hint .ppt-sep{opacity:.55}
  body.low-power #hint{opacity:.72;color:var(--paper);mix-blend-mode:normal}
  body.light-bg.low-power #hint{color:var(--ink)}


  /* ============================================================
     ============ LAYOUTS API · エージェント向けのクラス（v2）============
     layouts.md のひな形は、すべて下の命名に基づく。
     layouts.md に出てくるクラスは、必ず下で定義しておく。
     ============================================================ */

  /* ---------- .frame：各ページの本文を入れるコンテナ ---------- */
  .frame{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
  /* .frame に grid のクラスも付いているときは、grid の display:grid が flex より優先される */
  .frame.grid-2-7-5,
  .frame.grid-2-6-6,
  .frame.grid-2-8-4,
  .frame.grid-3-3,
  .frame.grid-6{display:grid}

  /* ---------- 見出しの階層（API 名。明朝体が中心） ---------- */
  .h-hero{
    font-family:var(--serif-zh);
    font-weight:900;
    font-size:10vw;
    line-height:.96;
    letter-spacing:-.02em;
  }
  .h-xl{
    font-family:var(--serif-zh);
    font-weight:700;
    font-size:6.2vw;
    line-height:1.08;
    letter-spacing:-.01em;
  }
  .h-sub{
    font-family:var(--serif-zh);
    font-weight:500;
    font-size:3.1vw;
    line-height:1.25;
    letter-spacing:0;
    opacity:.7;
  }
  .h-md{
    font-family:var(--serif-zh);
    font-weight:600;
    font-size:2.3vw;
    line-height:1.3;
  }
  /* 英語の見出し専用（Playfair の明朝系） */
  .h-hero-en,.h-xl-en{font-family:var(--serif-en);letter-spacing:-.025em}

  /* ---------- lead の導入文：定義は上の「フォントの使い分け」の部分（統合済み。二重に定義しない） ---------- */

  /* ---------- meta-row 下部のメタ情報 ---------- */
  .meta-row{
    display:flex;
    gap:1.2em;
    align-items:baseline;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:max(12px,.92vw);
    letter-spacing:.16em;
    text-transform:uppercase;
    opacity:.6;
  }

  /* ---------- stat-card（数字を大きく見せる用） ---------- */
  .stat-card{
    display:flex;
    flex-direction:column;
    gap:.8vh;
    align-items:flex-start;
    padding-top:1.6vh;
    border-top:1px solid currentColor;
    border-color:rgba(127,127,127,.3);
  }
  .stat-card .stat-label{
    font-family:var(--mono);
    font-size:max(10px,.78vw);
    letter-spacing:.24em;
    text-transform:uppercase;
    opacity:.55;
  }
  .stat-card .stat-nb{
    font-family:var(--serif-en);
    font-weight:800;
    font-size:5.8vw;
    line-height:.9;
    letter-spacing:-.03em;
    font-feature-settings:"tnum";
    margin-top:.4vh;
  }
  .stat-card .stat-nb .stat-unit{
    font-family:var(--serif-zh);
    font-weight:500;
    font-size:.38em;
    letter-spacing:0;
    opacity:.72;
    margin-left:.14em;
  }
  .stat-card .stat-note{
    font-family:var(--sans-zh);
    font-weight:400;
    font-size:max(13px,1.05vw);
    line-height:1.5;
    opacity:.72;
    margin-top:.6vh;
  }
  /* stat-card を grid-4（2x2）で使うときは数字を少し大きくする。上に見出しと引用文があるページでは、インラインの style で小さく上書きしてよい */
  .grid-4 .stat-card .stat-nb{font-size:5vw}
  /* 3つだけのときは、文字をもう少し大きくしてよい */
  .grid-3 .stat-card .stat-nb{font-size:6.8vw}

  /* ---------- pipeline（流れ図） ---------- */
  .pipeline-section{
    margin-top:4.4vh;
    padding-top:2.8vh;
    border-top:1px dashed rgba(127,127,127,.32);
  }
  .pipeline-section:first-of-type{
    border-top:0;
    padding-top:0;
    margin-top:3vh;
  }
  .pipeline-label{
    font-family:var(--mono);
    font-size:max(11px,.85vw);
    letter-spacing:.24em;
    text-transform:uppercase;
    opacity:.62;
    margin-bottom:2.2vh;
  }
  .pipeline{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:1.2vw;
  }
  .pipeline[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
  .pipeline[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
  .pipeline[data-cols="6"]{grid-template-columns:repeat(6,1fr)}
  .step{
    display:flex;
    flex-direction:column;
    gap:.8vh;
    padding-top:1.4vh;
    border-top:1px solid currentColor;
    border-color:rgba(127,127,127,.35);
  }
  .step-nb{
    font-family:var(--serif-en);
    font-style:italic;
    font-weight:500;
    font-size:1.15vw;
    opacity:.45;
  }
  .step-title{
    font-family:var(--sans-zh);
    font-weight:700;
    font-size:1.55vw;
    letter-spacing:.01em;
    line-height:1.2;
  }
  .step-desc{
    font-family:var(--sans-zh);
    font-weight:400;
    font-size:max(12px,.95vw);
    line-height:1.45;
    opacity:.72;
  }

  /* ---------- グリッド（layouts.md で使う） ---------- */
  /* これらのクラスは、どのコンテナに単独で付けても効く。.frame との複合セレクターには頼らない */
  .grid-2-7-5{display:grid;grid-template-columns:7fr 5fr;gap:3vw 4vh;align-items:start}
  .grid-2-6-6{display:grid;grid-template-columns:1fr 1fr;gap:3vw 4vh;align-items:start}
  .grid-2-8-4{display:grid;grid-template-columns:8fr 4fr;gap:3vw 4vh;align-items:start}
  .grid-3-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:minmax(0,1fr);
    gap:2.4vh 2vw;
  }
  /* grid-6 は旧スタイルで 3x2 として定義済み。ここでは align だけを補う */

  /* ---------- 画像 frame-img（layouts.md での主な名前） ---------- */
  /* 旧スタイルで定義済み。ここでは img-cap の別名と拡張を補う */
  figure.frame-img{margin:0;display:flex;flex-direction:column;min-width:0}
  /* 図の説明があるときは、画像を伸縮させ、説明を高さや比率が固定された枠の中に収める。
     そうしないと img の height:100% が figcaption を押し出し、overflow:hidden で切れてしまう */
  figure.frame-img:has(> .img-cap) > img{flex:1 1 auto;min-height:0;height:auto}
  .img-cap{
    display:block;
    flex:0 0 auto;
    padding:.7vh .9em .9vh;
    font-family:var(--mono);
    font-size:max(10px,.8vw);
    letter-spacing:.22em;
    text-transform:uppercase;
    opacity:.6;
  }
  /* callout src の別名 */
  .callout-src{
    display:block;
    margin-top:1.6vh;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.2em;
    text-transform:uppercase;
    opacity:.6;
  }

  /* ---------- chrome と foot：定義は上の「Magazine chrome」の部分（統合済み。二重に定義しない） ---------- */

  /* ============ アニメーションの仕組み（Motion One で動かす） ============
     すべての [data-anim] 要素は、初期状態では隠れている。ページ切り替えのたびに __playSlide(idx) が当該ページを JS で表示する。
     - cascade（既定）：DOM 順に 0.1s 間隔でフェードイン + y:16→0（開始遅延 0.15s）
     - hero（hero ページでは自動）：0.16s 間隔でフェードイン + y:14→0（開始遅延 0.2s）
     - quote（[data-anim="line"] を含む）：通常要素の後、line を 0.55s 間隔で 1 行ずつフェードイン
     - directional（[data-anim="left|right|divider"] を含む）：通常要素 → 左（0.35s） → 区切り線（0.9s） → 右（1.0s） の順
     - pipeline（data-animate="pipeline"）：切り替え時は各 step を半透明で待機し、キー・ホイール・スワイプで 1 ステップずつ進める
     Motion One を読み込めなかったとき（CDN が落ちていて、ローカルにもない）は、すべての [data-anim] を表示状態にする。
  */
  [data-anim]{opacity:1}
  body.motion-ready [data-anim]{opacity:0}
  body.motion-ready [data-anim="line"]{opacity:0;transform:translateY(10px)}
  body.motion-ready [data-animate="pipeline"] [data-anim="step"],
  body.motion-ready [data-animate="pipeline"] [data-anim="arrow"]{opacity:.15}
  body.low-power #deck{transition:none!important}
  body.low-power *,
  body.low-power *::before,
  body.low-power *::after{animation:none!important;transition:none!important}
  body.low-power.motion-ready [data-anim],
  body.low-power [data-anim]{opacity:1!important;transform:none!important}
  /* ESC の一覧のサムネイル：複製した slide はアニメーションを再生しないので、待機中の要素をすべて強制的に表示する */
  #overview [data-anim]{opacity:1!important;transform:none!important}

  /* ---------- 画面サイズに応じた縮退 ---------- */
  @media (max-width:900px){
    .display{font-size:16vw}
    .display-zh{font-size:12vw}
    .h1-zh{font-size:7vw}
    .h-hero{font-size:14vw}
    .h-xl{font-size:9vw}
    .pipeline{grid-template-columns:repeat(2,1fr)}
    .grid-2-7-5,.grid-2-6-6,.grid-2-8-4{grid-template-columns:1fr}
  }
  /* ============ 本デッキ用の補足 ============ */
  .slide a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
  .slide h1,.slide h2{word-break:auto-phrase}
  /* 60枚と日本語ラベルでヒントバーと重なるため、ドットの間隔を詰める */
  #nav{gap:6px}
  /* 75枚ではドットの列が 1920 幅でも 1000px を超え、同じ行のヒントバーと重なる。ヒントバーをドットの1段上（右下）に逃がす */
  #hint{bottom:calc(2.6vh + 34px)}

  /* ============ 前半（全体像型）の添え物 ============ */
  /* 右の列。添え物は列の中で縦横中央に置く */
  .aside{display:flex;align-items:center;justify-content:center;min-width:0;max-height:60vh}
  /* chrome の章名の前に置く約束の印（A: 時計の円弧 / B: 経験値バー） */
  .emblem{width:1.15em;height:1.15em;vertical-align:-.22em;margin-right:.55em;overflow:visible}
  .rowline .k .emblem{width:.9em;height:.9em;margin-right:.35em;vertical-align:-.08em;opacity:.8}
  .rowline .toc-p a{font-family:var(--mono);letter-spacing:.06em}
  /* 図の線と文字（viewBox 単位。§F-1）。<use> で呼ぶ <symbol> の中にも効くよう、子孫セレクタを使わず fg- の単独クラスにする */
  .fig{display:block;width:100%;height:auto;max-height:60vh;overflow:visible;color:var(--ink)}
  .fg-s{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
  .fg-s-thin{stroke-width:1.5}
  .fg-s-bold{stroke-width:4}
  .fg-dash{stroke-dasharray:4 4}
  .fg-dash-6{stroke-dasharray:6 6}
  .fg-acc{stroke:var(--accent)}
  .fg-f-paper{fill:var(--paper)}
  .fg-f-ink{fill:currentColor}
  .fg-f-acc{fill:var(--accent)}
  .fg-f-tint{fill:currentColor;fill-opacity:.08}
  .fg-f-hatch{fill:url(#hatch)}
  .fg-lb,.fg-num,.fg-tg,.fg-tok{fill:currentColor;stroke:none}
  .fg-lb{font-family:var(--sans-zh);font-size:22px;font-weight:500}
  .fg-num{font-family:var(--serif-en);font-weight:700;font-feature-settings:"tnum"}
  .fg-tg{font-family:var(--mono);font-size:18px;letter-spacing:.2em}
  .fg-tok{font-family:var(--serif-zh);font-weight:600;font-size:26px}
  /* 画像（公式スクリーンショット・写真）。縦横比を保ち、枠は細い墨の線。クレジットは下に1行 */
  .shot{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:.8vh;min-width:0}
  .shot img{display:block;width:auto;height:auto;max-width:100%;object-fit:contain;border:1px solid rgba(var(--ink-rgb),.25)}
  .shot.is-photo img{filter:grayscale(1)}
  .shot figcaption{font-family:var(--mono);font-size:max(11px,.72vw);letter-spacing:.04em;opacity:.6;line-height:1.4}
  /* p.8・p.10 の場面。静止代替を下に常に置き、透明な canvas を上に重ねる（§H-4） */
  .scene{position:relative;max-width:100%}
  .scene .scene-static,.scene .scene-canvas{position:absolute;inset:0;width:100%;height:100%;max-height:none}
  .scene .scene-canvas{opacity:0;pointer-events:none}
  .scene.is-live .scene-canvas{opacity:1}
  .scene.is-live .scene-static{visibility:hidden}
  #overview .scene .scene-static{visibility:visible!important}
  #overview .scene .scene-canvas{display:none}