/*!
 * taskforce 資料デザインシステム v1 — docs.taskf.co.jp/design/
 * 元: 凌霜会ホームカミングセッション（/ryoso-homecoming-2026/）の各メニューページ
 *
 * 使い方: <body class="tf"> に、画面の型 .tf-screen（16:9 の 1 画面）か .tf-doc（読む資料）を組み合わせる。
 * 変数は --tf-、部品は .tf- で始まる。資料の側の CSS とはぶつからない。
 * v1 は後から見た目を壊す変更をしない（足すのはよい）。壊す変更は v2/ を別に作る。
 */

/* ============ 1. トークン ============ */
:root{
  /* 色: 白基調のモノトーン。差し色（accent）は 1 画面に 1〜2 か所だけ */
  --tf-bg:#FFFFFF;        /* 地 */
  --tf-panel:#F3F3F2;     /* 面（タイル・カード） */
  --tf-panel-2:#E9E9E8;   /* 面のホバー */
  --tf-off:#DCDCDB;       /* 図の「まだ」「対象外」 */
  --tf-line:#E0E0DF;      /* 罫線・図の目盛り */
  --tf-line-2:#C9C9C8;    /* 枠線・点線 */
  --tf-fg:#16181D;        /* 文字・図の主線 */
  --tf-mute:#5E6066;      /* 補足の文字 */
  --tf-dim:#A3A4A8;       /* 章番号・年・飾り（本文には使わない） */
  --tf-accent:#FF3D00;    /* 差し色 */
  --tf-on-accent:#FFFFFF;
  --tf-ink-bg:#0F1013;    /* ターミナル */
  --tf-ink-fg:#C9CACD;
  --tf-ink-line:#3A3B40;
  --tf-shadow-lift:0 10px 26px rgba(22,24,29,.07);
  --tf-shadow-hover:0 14px 34px rgba(22,24,29,.08);
  --tf-shadow-sheet:0 30px 80px rgba(22,24,29,.18);

  /* 文字 */
  --tf-font-body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  --tf-font-num:"Barlow","Zen Kaku Gothic New",system-ui,sans-serif;
  --tf-font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --tf-fs:clamp(16px,min(1.12vw,2vh),30px); /* 基準の文字の大きさ。画面の大きさで伸び縮みする */

  /* 角丸: 外側ほど大きく、内側ほど小さく */
  --tf-r-sheet:26px;   /* モーダル */
  --tf-r-section:24px; /* 大きなまとまり */
  --tf-r-panel:22px;   /* タイル・カード */
  --tf-r-card:18px;    /* 面の中の面・図の枠 */
  --tf-r-inner:16px;   /* 小さな面 */
  --tf-r-sm:12px;
  --tf-r-pill:999px;

  /* 余白（em なので文字の大きさに比例する） */
  --tf-s1:.25em; --tf-s2:.5em; --tf-s3:.8em; --tf-s4:1.2em; --tf-s5:1.6em; --tf-s6:2.4em; --tf-s7:3.2em;
  --tf-gap-row:.8em; --tf-gap-col:1em;     /* タイル同士 */
  --tf-pad-x:max(20px,3vw);                 /* 画面の左右 */
  --tf-pad-y:3vh;                           /* 画面の上下 */

  /* 動き */
  --tf-ease:cubic-bezier(.2,.7,.2,1);       /* 基本。速く出て静かに止まる */
  --tf-ease-in:cubic-bezier(.55,0,.8,.2);   /* 消えるとき */
  --tf-ease-out:cubic-bezier(.15,.75,.25,1);/* 入ってくるとき */
  --tf-dur-hover:.2s;
  --tf-dur:.35s;
  --tf-dur-enter:.55s;
  --tf-stagger:.07s;
  color-scheme:light;
}
/* 文字の大きさの段（--tf-fs の倍数）。--tf-fs を変えた要素で計算し直すので、型の要素にも書く */
:root,.tf,.tf-screen,.tf-doc{
  --tf-t-display:min(6.9vw,13vh);              /* 表紙 */
  --tf-t-kpi:min(5.6vw,10vh);                  /* 大きな数字 */
  --tf-t-bigline:calc(var(--tf-fs)*2.2);       /* 一言で言い切る */
  --tf-t-h1:calc(var(--tf-fs)*2.05);           /* 章・ページの見出し */
  --tf-t-sheet:calc(var(--tf-fs)*1.9);         /* モーダルの見出し */
  --tf-t-statement:calc(var(--tf-fs)*1.7);     /* 主張 */
  --tf-t-h2:calc(var(--tf-fs)*1.55);           /* カードの見出し・節 */
  --tf-t-h3:calc(var(--tf-fs)*1.2);            /* タイルの見出し */
  --tf-t-lead:calc(var(--tf-fs)*1.1);          /* 導入文 */
  --tf-t-cap:calc(var(--tf-fs)*.95);           /* 説明 */
  --tf-t-fine:calc(var(--tf-fs)*.85);          /* 注・出典 */
  --tf-t-label:calc(var(--tf-fs)*.8);          /* 英字の小さなラベル */
}

/* ============ 2. 土台（body.tf の中だけに効く。:where で弱くして、部品の指定が必ず勝つようにする） ============ */
.tf{margin:0;background:var(--tf-bg);color:var(--tf-fg);font-family:var(--tf-font-body);font-size:var(--tf-fs);line-height:1.6;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
:where(.tf) *,:where(.tf) *::before,:where(.tf) *::after{box-sizing:border-box}
.tf [hidden]{display:none!important}
:where(.tf) button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:where(.tf) a{color:var(--tf-fg)}
.tf :focus-visible{outline:2px solid var(--tf-accent);outline-offset:3px;border-radius:8px}
:where(.tf) em{font-style:normal;color:var(--tf-fg);font-weight:500}
:where(.tf) svg text{font-family:var(--tf-font-body)}
:where(.tf) img{max-width:100%;height:auto}
/* 日本語の見出し・短い文は文節で折り返す（対応ブラウザだけ。lang="ja" が要る） */
:where(.tf) :where(h1,h2,h3,h4,.tf-statement,.tf-bigline,.tf-lead,.tf-so,.tf-card__title,.tf-card__sub,.tf-linecard__title,.tf-linecard__sub,.tf-cover__title){word-break:auto-phrase}
.tf-hl{color:var(--tf-accent)}
.tf-num{font-family:var(--tf-font-num);font-variant-numeric:tabular-nums}
.tf-mute{color:var(--tf-mute)}
.tf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ 3. 画面の型 ============ */
/* 3-1 スクリーン: 1 章 = 16:9 の 1 画面。見出しの行と、12 列のダッシュボード */
.tf-screen{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);gap:2.4vh;
  padding-block:max(var(--tf-pad-y),env(safe-area-inset-top,0px)) max(var(--tf-pad-y),env(safe-area-inset-bottom,0px));
  padding-left:max(var(--tf-pad-x),env(safe-area-inset-left,0px));padding-right:max(var(--tf-pad-x),env(safe-area-inset-right,0px))}

/* 3-2 ドキュメント: 上から読む資料（配布資料・説明ページ）。h2・h3・p は :where で弱くし、部品の指定を優先する */
.tf-doc{--tf-fs:17px;font-size:var(--tf-fs);max-width:var(--tf-doc-w,960px);margin-inline:auto;
  padding:max(56px,env(safe-area-inset-top,0px)) max(var(--tf-pad-x),env(safe-area-inset-right,0px)) 96px max(var(--tf-pad-x),env(safe-area-inset-left,0px))}
.tf-doc :where(h2){margin:2.6em 0 .9em;font-weight:400;font-size:var(--tf-t-h2);line-height:1.4;text-wrap:balance}
.tf-doc :where(h3){margin:2em 0 .6em;font-weight:500;font-size:var(--tf-t-h3);line-height:1.5}
.tf-doc :where(p){margin:0 0 1em}
.tf-doc :where(section){margin-top:var(--tf-s7)}
/* ドキュメントの中のカードは高さを決めず、図の面は最低の高さだけ持つ */
.tf-doc .tf-card{grid-template-rows:auto auto}
.tf-doc .tf-cards>.tf-card{grid-row:span 2;grid-template-rows:subgrid} /* 並んだカードの見出しの高さを揃える */
.tf-doc .tf-card__media{min-height:12em}
.tf-doc .tf-card--sm .tf-card__media{min-height:8em}
.tf-doc .tf-card__fill{position:static}
.tf-doc .tf-card__title{font-size:calc(var(--tf-fs)*1.3)}
.tf-doc .tf-card--sm .tf-card__title{font-size:calc(var(--tf-fs)*1.15)}

/* 3-3 見出しの行: 章番号（またはアイコン）・見出し・右端のボタン */
.tf-head{display:flex;align-items:center;gap:1.25em;min-width:0}
.tf-head__k{flex:none;font-family:var(--tf-font-num);font-weight:200;font-size:calc(var(--tf-fs)*2.6);line-height:1;color:var(--tf-dim)}
.tf-head__k svg{display:block;width:calc(var(--tf-fs)*2.3);height:calc(var(--tf-fs)*2.3);fill:none;stroke:var(--tf-dim);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.tf-head h1,.tf-head__title{flex:1;min-width:0;margin:0;font-weight:400;font-size:var(--tf-t-h1);line-height:1.25;letter-spacing:-.005em;text-wrap:balance}

/* 3-4 ダッシュボード: 12 列。子に style="--span:4" で幅、--rows で段数 */
.tf-dash{min-height:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(var(--rows,2),minmax(0,1fr));gap:var(--tf-gap-row) var(--tf-gap-col)}
.tf-dash>*{grid-column:span var(--span,12);min-width:0;min-height:0}
.tf-dash--auto{grid-template-rows:none;align-content:start}

/* 3-5 表紙 */
.tf-cover{position:relative;height:100vh;height:100dvh;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:2vh;overflow:hidden;
  padding-block:max(5vh,env(safe-area-inset-top,0px)) max(4vh,env(safe-area-inset-bottom,0px));
  padding-left:max(20px,3.4vw,env(safe-area-inset-left,0px));padding-right:max(20px,3.4vw,env(safe-area-inset-right,0px))}
.tf-cover__title{align-self:center;margin:0;font-weight:300;font-size:var(--tf-t-display);line-height:1.18;letter-spacing:-.03em}
.tf-cover__title>span{display:block;white-space:nowrap}
.tf-cover__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 2em;margin:0;color:var(--tf-mute);font-size:var(--tf-t-cap)}

/* 3-6 デッキ: 表紙と章（.tf-screen）を縦に並べ、1 画面ずつ止まる。<main class="tf-deck"> */
html:has(.tf-deck){scroll-snap-type:y mandatory}
.tf-deck>:is(.tf-screen,.tf-cover){scroll-snap-align:start;scroll-snap-stop:always}

/* ============ 4. 文字 ============ */
.tf-statement{margin:0 0 1em;max-width:30ch;font-weight:300;font-size:var(--tf-t-statement);line-height:1.5;color:var(--tf-mute);text-wrap:balance}
.tf-bigline{margin:0;font-weight:300;font-size:var(--tf-t-bigline);line-height:1.35;text-wrap:balance}
.tf-lead{margin:0 0 1.2em;max-width:52ch;font-size:var(--tf-t-lead);color:var(--tf-mute)}
.tf-cap{margin:.25em 0 0;font-size:var(--tf-t-cap);color:var(--tf-mute)}
.tf-fine{margin:.8em 0 0;font-size:var(--tf-t-fine);color:var(--tf-mute)}
.tf-label{font-family:var(--tf-font-num);font-weight:400;font-size:var(--tf-t-label);letter-spacing:.24em;text-transform:lowercase;color:var(--tf-mute)}
.tf-so{max-width:900px;margin-top:1em;padding:2px 0 2px 1.1em;border-left:2px solid var(--tf-fg)}
.tf-so--accent{border-left-color:var(--tf-accent)}
.tf-list{margin:0;padding:0;list-style:none;display:grid;gap:.6em;max-width:62ch}
.tf-list>li{position:relative;padding-left:1.5em;color:var(--tf-mute)}
.tf-list>li::before{content:"";position:absolute;left:0;top:.8em;width:.8em;height:1.5px;background:var(--tf-fg)}
.tf-divider{height:1px;margin:1.6em 0;border:0;background:var(--tf-line)}
.tf-kpi{display:flex;align-items:baseline;gap:.4em;margin:0;line-height:1}
.tf-kpi b{font-family:var(--tf-font-num);font-weight:200;font-size:var(--tf-t-kpi);letter-spacing:-.02em}
.tf-kpi span{font-size:calc(var(--tf-fs)*1.15);color:var(--tf-mute)}
.tf-kpi--sm b{font-size:min(3.4vw,6.2vh)}
.tf-code{margin:0 0 1em;padding:1em 1.2em;overflow-x:auto;background:var(--tf-panel);border-radius:var(--tf-r-sm);font-family:var(--tf-font-mono);font-size:var(--tf-t-fine);line-height:1.6;white-space:pre;color:var(--tf-fg)}
:where(.tf) code{font-family:var(--tf-font-mono);font-size:.9em}

/* ============ 5. 面（タイル・カード） ============ */
/* 5-1 タイル: ダッシュボードの 1 区画。灰色の面に見出しと図 */
.tf-tile{position:relative;display:flex;flex-direction:column;gap:.8em;min-width:0;min-height:0;overflow:hidden;
  padding:1.2em 1.35em;background:var(--tf-panel);border-radius:var(--tf-r-panel);animation:tf-rise var(--tf-dur-enter) var(--tf-ease) both;animation-delay:calc(var(--tf-i,0)*var(--tf-stagger))}
.tf-tile>h3,.tf-tile__title{margin:0;padding-right:calc(var(--tf-fs)*2.4);font-weight:500;font-size:var(--tf-t-h3);line-height:1.4}
.tf-tile__viz{position:relative;flex:1;min-height:0}
.tf-tile__viz>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tf-tile--bare{padding:0 .2em .6em;background:transparent;animation:none}

/* 5-2 カード: 上に図（白い面）、下に見出しと一言。押すと詳しい説明（モーダル）を開く */
.tf-cards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--tf-gap-row) var(--tf-gap-col);min-height:0}
.tf-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:1.3em;min-width:0;min-height:0;
  padding:1.1em 1.1em 1.6em;text-align:left;background:var(--tf-panel);border-radius:var(--tf-r-section);text-decoration:none;color:inherit;
  transition:background var(--tf-dur) var(--tf-ease);animation:tf-rise var(--tf-dur-enter) var(--tf-ease) both;animation-delay:calc(var(--tf-i,0)*var(--tf-stagger))}
.tf-card:is(a,button,[data-tf-open]):hover{background:var(--tf-panel-2)}
.tf-card__media{position:relative;display:block;min-height:0;overflow:hidden;background:var(--tf-bg);border-radius:var(--tf-r-inner);transition:transform var(--tf-dur) var(--tf-ease)}
.tf-card:is(a,button,[data-tf-open]):hover .tf-card__media{transform:scale(1.015)}
.tf-card__media>svg{position:absolute;inset:7% 5%;width:90%;height:86%;overflow:visible}
.tf-card__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tf-card__fill{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.8em;padding:1.2em 1.4em}
.tf-card__text{display:flex;flex-direction:column;gap:.5em;padding:0 .55em}
.tf-card__title{display:block;font-weight:500;font-size:var(--tf-t-h2);line-height:1.4;text-wrap:balance}
.tf-card__sub{display:block;font-size:calc(var(--tf-fs)*1.02);color:var(--tf-mute)}
.tf-card--sm{border-radius:var(--tf-r-panel);gap:.9em;padding:1em 1em 1.3em}
.tf-card--sm .tf-card__media>svg{inset:16% 5%;width:90%;height:68%}
.tf-card--sm .tf-card__title{font-size:calc(var(--tf-fs)*1.3)}
.tf-card--sm .tf-card__sub{font-size:calc(var(--tf-fs)*.98)}

/* 5-3 線のカード: 面を持たず、上の 1 本の線で区切る。ホバーで線とアイコンが差し色になる */
.tf-linecards{display:grid;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr));gap:1.6em 2vw}
.tf-linecard{display:flex;flex-direction:column;justify-content:flex-start;gap:1.1em;min-width:0;padding:2.2em .3em .5em;text-align:left;color:inherit;text-decoration:none;
  border-top:1.5px solid var(--tf-fg);transition:border-color var(--tf-dur) var(--tf-ease);animation:tf-rise var(--tf-dur-enter) var(--tf-ease) both;animation-delay:calc(var(--tf-i,0)*var(--tf-stagger))}
.tf-linecard__icon svg{display:block;width:calc(var(--tf-fs)*3);height:calc(var(--tf-fs)*3);fill:none;stroke:var(--tf-fg);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--tf-dur)}
.tf-linecard__title{display:block;font-weight:500;font-size:calc(var(--tf-fs)*1.6);line-height:1.35}
.tf-linecard__sub{display:block;margin-top:.3em;font-size:calc(var(--tf-fs)*.9);color:var(--tf-mute)}
.tf-linecard:is(a,button,[data-tf-open]):hover{border-top-color:var(--tf-accent)}
.tf-linecard:is(a,button,[data-tf-open]):hover .tf-linecard__icon svg{stroke:var(--tf-accent)}

/* 5-4 事実の札: モーダルや資料の中で、短い事実を並べる */
.tf-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1em;margin:0 0 1em}
.tf-fact{min-width:0;padding:1em 1.1em;background:var(--tf-panel);border-radius:var(--tf-r-inner)}
.tf-fact__date{display:block;margin-bottom:.35em;font-family:var(--tf-font-num);font-size:.9em;letter-spacing:.04em;color:var(--tf-dim)}
.tf-fact__big{margin-bottom:.4em;font-family:var(--tf-font-num);font-weight:200;font-size:2.2em;line-height:1.05}
.tf-fact h4,.tf-fact__title{margin:0 0 .35em;font-size:1em;font-weight:500;line-height:1.5}
.tf-fact p{margin:0;font-size:.92em;color:var(--tf-mute)}

/* 5-5 図の枠 */
.tf-figure{margin:0 0 1.2em;padding:1.2em 1.4em;background:var(--tf-panel);border-radius:var(--tf-r-card)}
.tf-figure>svg{display:block;width:100%;height:auto;max-height:42vh;overflow:visible}
.tf-figure>figcaption{margin-top:.8em;font-size:var(--tf-t-fine);color:var(--tf-mute)}

/* 5-6 表: 比べるときは .tf-table--compare（2 列目が「前」、3 列目が「後」） */
.tf-table{overflow-x:auto;margin:0 0 1.2em}
.tf-table table{width:100%;border-collapse:collapse;font-size:var(--tf-t-cap)}
.tf-table th,.tf-table td{padding:.6em .8em;text-align:left;border-bottom:1px solid var(--tf-line);vertical-align:top}
.tf-table thead th{font-weight:500;font-size:.9em;color:var(--tf-mute)}
.tf-table tbody th{font-weight:400;white-space:nowrap;color:var(--tf-mute)}
.tf-table--compare td:nth-child(2){color:var(--tf-mute)}
.tf-table--compare td:nth-child(3){font-weight:500;color:var(--tf-fg)}
.tf-table em{color:var(--tf-accent)}

/* ============ 6. 操作の部品 ============ */
/* 6-1 丸いボタン: ホーム・閉じるなど（灰色の面） */
.tf-iconbtn{flex:none;display:grid;place-items:center;width:calc(var(--tf-fs)*2.6);height:calc(var(--tf-fs)*2.6);border-radius:50%;background:var(--tf-panel);color:var(--tf-fg);transition:background var(--tf-dur-hover)}
.tf-iconbtn:hover{background:var(--tf-panel-2)}
.tf-iconbtn svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tf-iconbtn--sm{width:calc(var(--tf-fs)*2.2);height:calc(var(--tf-fs)*2.2)}
.tf-iconbtn--sm svg{width:42%;height:42%;stroke-width:2}

/* 6-2 i ボタン: タイル・カードの右上。詳しい説明を開く。ホバーで白黒が反転する */
.tf-info{position:absolute;top:1em;right:1em;z-index:3;display:grid;place-items:center;width:calc(var(--tf-fs)*1.9);height:calc(var(--tf-fs)*1.9);border-radius:50%;
  border:1.5px solid var(--tf-line-2);background:var(--tf-bg);transition:background var(--tf-dur-hover),border-color var(--tf-dur-hover)}
.tf-info svg{width:60%;height:60%;fill:none;stroke:var(--tf-fg);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tf-info:hover,:is(.tf-card,.tf-tile):hover>.tf-info{background:var(--tf-fg);border-color:var(--tf-fg)}
.tf-info:hover svg,:is(.tf-card,.tf-tile):hover>.tf-info svg{stroke:var(--tf-bg)}

/* 6-3 ボタン（文字）: 基本は墨。差し色は 1 画面に 1 つまで */
.tf-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:2.6em;padding:.55em 1.4em;border-radius:var(--tf-r-pill);
  background:var(--tf-fg);color:var(--tf-bg)!important;font-weight:500;line-height:1.3;text-decoration:none;transition:transform var(--tf-dur) var(--tf-ease),box-shadow var(--tf-dur) var(--tf-ease),background var(--tf-dur-hover)}
.tf-btn:hover{transform:translateY(-2px);box-shadow:var(--tf-shadow-lift)}
.tf-btn--ghost{background:transparent;color:var(--tf-fg)!important;box-shadow:inset 0 0 0 1.5px var(--tf-line-2)}
.tf-btn--ghost:hover{box-shadow:inset 0 0 0 1.5px var(--tf-fg)}
.tf-btn--accent{background:var(--tf-accent);color:var(--tf-on-accent)!important}
.tf-btn svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 6-4 札（バッジ） */
.tf-badge{display:inline-flex;align-items:center;gap:.3em;padding:.15em .8em;border-radius:var(--tf-r-pill);background:var(--tf-panel);color:var(--tf-mute);font-size:.85em;line-height:1.5;white-space:nowrap}
.tf-badge--ink{background:var(--tf-fg);color:var(--tf-bg)}
.tf-badge--accent{background:var(--tf-accent);color:var(--tf-on-accent)}
.tf-badge--line{background:transparent;box-shadow:inset 0 0 0 1.5px var(--tf-line-2)}

/* 6-5 切り替え（丸いつまみが滑る）。button に aria-pressed。docs.js がつまみを動かす */
.tf-seg{--b:calc(var(--tf-fs)*2.8);--p:6px;position:relative;display:inline-flex;padding:var(--p);background:var(--tf-panel);border-radius:var(--tf-r-pill);vertical-align:middle}
.tf-seg>button{position:relative;z-index:1;display:grid;place-items:center;width:var(--w,var(--b));height:var(--b);border-radius:var(--tf-r-pill);color:var(--tf-mute);white-space:nowrap;transition:color .25s}
.tf-seg>button:hover{color:var(--tf-fg)}
.tf-seg>button[aria-pressed="true"]{color:var(--tf-bg)}
.tf-seg>button svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tf-seg__knob{position:absolute;left:var(--p);top:var(--p);width:var(--w,var(--b));height:var(--b);border-radius:var(--tf-r-pill);background:var(--tf-fg);transform:translateX(calc(var(--i,0)*100%));transition:transform .4s var(--tf-ease)}
.tf-seg--text{--w:6.5em;--b:2.4em}

/* 6-6 モーダル: <dialog class="tf-modal">。開く側に data-tf-open="id"、閉じる側に data-tf-close */
.tf-modal{width:min(1100px,calc(100% - 6vw));max-width:none;max-height:88vh;overflow-y:auto;margin:auto;border:0;
  padding:clamp(22px,3.4vh,48px) clamp(22px,2.6vw,52px);background:var(--tf-bg);color:var(--tf-fg);border-radius:var(--tf-r-sheet);box-shadow:var(--tf-shadow-sheet)}
.tf-modal[open]{animation:tf-pop .28s var(--tf-ease) both}
.tf-modal::backdrop{background:rgba(22,24,29,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:tf-fade .2s both}
.tf-modal h2{margin:0 0 1.2em;font-weight:400;font-size:var(--tf-t-sheet);line-height:1.3;text-wrap:balance}
.tf-modal__x{position:sticky;top:0;float:right;margin:-6px -6px 0 12px;z-index:2}
.tf-modal .tf-lead,.tf-modal .tf-list{max-width:none}

/* ============ 7. 中身の部品 ============ */
/* 7-1 手順の進み: li に is-done / is-run / is-wait。data-tf-play で順に進む */
.tf-steps{margin:0;padding:1em 1.1em;list-style:none;display:grid;gap:.55em;background:var(--tf-bg);border-radius:var(--tf-r-inner)}
.tf-card__fill .tf-steps{background:var(--tf-panel)}
.tf-steps>li{display:flex;align-items:center;gap:.75em;font-size:1.05em;color:var(--tf-dim);transition:color .3s}
.tf-steps>li::before{content:"";flex:none;width:1.25em;height:1.25em;border-radius:50%;border:1.5px solid var(--tf-line-2);transition:all .3s}
.tf-steps>li.is-run{color:var(--tf-fg)}
.tf-steps>li.is-run::before{border-color:var(--tf-fg);border-top-color:transparent;animation:tf-spin .8s linear infinite}
.tf-steps>li.is-done{color:var(--tf-mute)}
.tf-steps>li.is-done::before{border-color:var(--tf-fg);background:var(--tf-fg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.tf-steps>li.is-wait{color:var(--tf-fg)}
.tf-steps>li.is-wait::before{border-color:var(--tf-accent);background:var(--tf-accent)}
.tf-steps__tag{margin-left:auto;padding:.1em .8em;border-radius:var(--tf-r-pill);background:var(--tf-accent);color:var(--tf-on-accent);font-size:.82em;opacity:0;transition:opacity .3s}
.tf-steps>li.is-wait .tf-steps__tag{opacity:1}

/* 7-2 吹き出し（頼む側の一言） */
.tf-bubble{align-self:flex-end;max-width:90%;margin:0;padding:.55em 1em;border-radius:18px 18px 4px 18px;background:var(--tf-fg);color:var(--tf-bg);font-size:calc(var(--tf-fs)*1.1)}

/* 7-3 年表: 横に並べ、今（is-now）だけ差し色 */
.tf-timeline{margin:0;padding:0;list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);text-align:center}
.tf-timeline>li{position:relative;display:grid;grid-template-rows:auto 2.6em auto auto;justify-items:center;padding:0 .4em;animation:tf-rise var(--tf-dur-enter) var(--tf-ease) both;animation-delay:calc(var(--tf-i,0)*var(--tf-stagger))}
.tf-timeline>li::before{content:"";grid-row:2;grid-column:1;align-self:center;justify-self:stretch;height:1.5px;margin:0 -.4em;background:var(--tf-fg)}
.tf-timeline>li::after{content:"";grid-row:2;grid-column:1;align-self:center;width:1em;height:1em;border-radius:50%;background:var(--tf-fg)}
.tf-timeline>li>:nth-child(1){grid-row:1;font-family:var(--tf-font-num);font-weight:300;font-size:calc(var(--tf-fs)*1.6);line-height:1.2}
.tf-timeline>li>:nth-child(2){grid-row:3;font-weight:500;font-size:calc(var(--tf-fs)*1.15);letter-spacing:.06em}
.tf-timeline>li>:nth-child(3){grid-row:4;margin-top:.3em;font-size:var(--tf-t-cap);color:var(--tf-mute)}
.tf-timeline>li.is-now>:nth-child(-n+2){color:var(--tf-accent)}
.tf-timeline>li.is-now::after{width:1.3em;height:1.3em;background:var(--tf-accent)}

/* 7-4 ターミナル（黒い面） */
.tf-term{min-width:0;margin:0 0 1em;padding:.9em 1.1em;overflow:hidden;background:var(--tf-ink-bg);color:var(--tf-ink-fg);border-radius:var(--tf-r-inner);font-family:var(--tf-font-mono);font-size:calc(var(--tf-fs)*.8);line-height:1.6}
.tf-term::before{content:"";display:block;width:9px;height:9px;margin-bottom:.8em;border-radius:50%;background:var(--tf-ink-line);box-shadow:15px 0 var(--tf-ink-line),30px 0 var(--tf-ink-line)}
.tf-term p{margin:0;white-space:pre-wrap}
.tf-term .is-strong{color:#FFFFFF}
.tf-term .is-accent{color:var(--tf-accent)}

/* ============ 8. 図（SVG）の色と動き ============ */
/* 色は属性ではなく class か style で付ける（属性には var() が効かない） */
.tf-fill-fg{fill:var(--tf-fg)} .tf-fill-mute{fill:var(--tf-mute)} .tf-fill-dim{fill:var(--tf-dim)} .tf-fill-off{fill:var(--tf-off)}
.tf-fill-bg{fill:var(--tf-bg)} .tf-fill-panel{fill:var(--tf-panel)} .tf-fill-accent{fill:var(--tf-accent)} .tf-fill-none{fill:none}
.tf-stroke-fg{stroke:var(--tf-fg)} .tf-stroke-mute{stroke:var(--tf-mute)} .tf-stroke-dim{stroke:var(--tf-dim)} .tf-stroke-line{stroke:var(--tf-line)}
.tf-stroke-line-2{stroke:var(--tf-line-2)} .tf-stroke-accent{stroke:var(--tf-accent)}
/* 線を引く: path に pathLength="1" を付ける */
.tf-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:tf-draw 1.6s var(--tf-ease) .3s forwards}
/* 今いる点が脈打つ */
.tf-pulse{transform-box:fill-box;transform-origin:center;animation:tf-pulse 2.4s ease-out infinite}
/* 棒が下から伸びる・左から伸びる（style="animation-delay:…" で順に） */
.tf-grow{transform-box:fill-box;transform-origin:bottom;animation:tf-grow .8s var(--tf-ease) both}
.tf-growx{transform-box:fill-box;transform-origin:left;animation:tf-growx .8s var(--tf-ease) both}
.tf-spin{transform-box:fill-box;transform-origin:center;animation:tf-spin 24s linear infinite}
/* 何にでも: 下から浮き上がって出る */
.tf-rise{animation:tf-rise var(--tf-dur-enter) var(--tf-ease) both;animation-delay:calc(var(--tf-i,0)*var(--tf-stagger))}

/* 並んだものは 0.07 秒ずつ遅れて出る */
:is(.tf-dash,.tf-cards,.tf-linecards,.tf-cols,.tf-timeline)>:nth-child(2){--tf-i:1}
:is(.tf-dash,.tf-cards,.tf-linecards,.tf-cols,.tf-timeline)>:nth-child(3){--tf-i:2}
:is(.tf-dash,.tf-cards,.tf-linecards,.tf-cols,.tf-timeline)>:nth-child(4){--tf-i:3}
:is(.tf-dash,.tf-cards,.tf-linecards,.tf-cols,.tf-timeline)>:nth-child(5){--tf-i:4}
:is(.tf-dash,.tf-cards,.tf-linecards,.tf-cols,.tf-timeline)>:nth-child(6){--tf-i:5}
:is(.tf-dash,.tf-cards,.tf-linecards,.tf-cols,.tf-timeline)>:nth-child(7){--tf-i:6}
:is(.tf-dash,.tf-cards,.tf-linecards,.tf-cols,.tf-timeline)>:nth-child(n+8){--tf-i:7}

/* 章を移るときの回転（入る側 .tf-turn-in、出る側 .tf-turn-out。--dir に 1 か -1） */
.tf-turn-stage{perspective:2200px;overflow-x:hidden}
.tf-turn-out{animation:tf-turn-out .5s var(--tf-ease-in) forwards;transform-origin:50% 50% -45vw;pointer-events:none}
.tf-turn-in{animation:tf-turn-in .65s var(--tf-ease-out) both;transform-origin:50% 50% -45vw}

@keyframes tf-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tf-fade{from{opacity:0}}
@keyframes tf-pop{from{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes tf-draw{to{stroke-dashoffset:0}}
@keyframes tf-pulse{0%{transform:scale(.6);opacity:.6}100%{transform:scale(2.4);opacity:0}}
@keyframes tf-grow{from{transform:scaleY(0)}}
@keyframes tf-growx{from{transform:scaleX(0)}}
@keyframes tf-spin{to{transform:rotate(360deg)}}
@keyframes tf-turn-out{to{transform:rotateY(calc(var(--dir,1) * -90deg));opacity:0}}
@keyframes tf-turn-in{from{transform:rotateY(calc(var(--dir,1) * 90deg));opacity:0}}

/* ============ 9. 狭い画面・縦長の画面: 16:9 をやめて縦に流す ============ */
@media (max-width:900px),(max-aspect-ratio:4/3){
  html:has(.tf-deck){scroll-snap-type:none}
  :root,.tf,.tf-screen,.tf-doc{--tf-fs:16px;--tf-t-display:clamp(2rem,9vw,3.4rem);--tf-t-kpi:3.4rem;--tf-gap-row:14px;--tf-gap-col:14px}
  .tf-doc{font-size:16px;padding-top:max(40px,env(safe-area-inset-top,0px))}
  .tf-screen,.tf-cover{height:auto;min-height:100vh;min-height:100dvh}
  .tf-screen{gap:3vh}
  .tf-head{gap:14px}
  .tf-head h1,.tf-head__title{font-size:1.5rem}
  .tf-head__k{font-size:2rem}
  .tf-head__k svg{width:28px;height:28px}
  .tf-iconbtn{width:40px;height:40px}
  .tf-dash{display:flex;flex-direction:column;gap:14px}
  .tf-tile__viz{min-height:240px;flex:none}
  .tf-cards{grid-template-columns:1fr}
  .tf-card{grid-template-rows:auto auto;padding:12px 12px 20px;gap:14px;border-radius:var(--tf-r-panel)}
  .tf-card__media{aspect-ratio:16/10}
  .tf-card--sm .tf-card__media{aspect-ratio:2/1}
  .tf-card__media:has(>.tf-card__fill){aspect-ratio:auto}
  .tf-card__fill{position:static;padding:18px 16px}
  .tf-card__title{font-size:1.3rem}
  .tf-card--sm .tf-card__title{font-size:1.2rem}
  .tf-linecards{grid-template-columns:1fr 1fr;gap:18px 14px}
  .tf-linecard{padding:14px 0 0}
  .tf-linecard__icon svg{width:34px;height:34px}
  .tf-linecard__title{font-size:1.3rem}
  .tf-cover__title>span{white-space:normal}
  .tf-cols{grid-template-columns:1fr}
  .tf-figure{padding:10px;overflow-x:auto}
  .tf-figure>svg{min-width:560px;max-height:none}
  .tf-table table{min-width:520px}
  .tf-modal{width:calc(100% - 24px);max-height:92vh;padding:22px 18px;border-radius:18px}
  .tf-modal h2{font-size:1.4rem}
  .tf-modal::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(22,24,29,.55)}
  /* 年表は縦に */
  .tf-timeline{grid-auto-flow:row;text-align:left}
  .tf-timeline>li{grid-template-columns:2em minmax(0,1fr);grid-template-rows:auto auto auto;justify-items:start;column-gap:12px;padding:0 0 18px}
  .tf-timeline>li::before{grid-row:1/4;grid-column:1;justify-self:center;align-self:stretch;width:1.5px;height:auto;margin:0 0 -18px}
  .tf-timeline>li:first-child::before{margin-top:.8em}
  .tf-timeline>li:last-child::before{display:none}
  .tf-timeline>li::after{grid-row:1;grid-column:1;justify-self:center;align-self:center}
  .tf-timeline>li>:nth-child(n){grid-column:2}
  .tf-timeline>li>:nth-child(1){grid-row:1}
  .tf-timeline>li>:nth-child(2){grid-row:2}
  .tf-timeline>li>:nth-child(3){grid-row:3}
}

/* ============ 10. 動きを減らす設定・印刷 ============ */
@media (prefers-reduced-motion:reduce){
  .tf *,.tf *::before,.tf *::after,.tf-modal::backdrop{animation:none!important;transition:none!important}
  .tf .tf-draw{stroke-dashoffset:0}
}
@media print{
  .tf{-webkit-print-color-adjust:exact;print-color-adjust:exact;overflow:visible}
  .tf *,.tf *::before,.tf *::after{animation:none!important;transition:none!important}
  .tf .tf-draw{stroke-dashoffset:0}
  .tf-screen,.tf-cover{height:auto;min-height:0;break-after:page}
  .tf-iconbtn,.tf-info,.tf-seg{display:none!important}
  .tf-card,.tf-tile,.tf-fact,.tf-figure{break-inside:avoid}
}