/* 図だけスライドの型（2026-10-29・fig_kata.py）。説明は fig_kata.py の一番上 */
html,body{margin:0;height:100%;background:#000;overflow:hidden;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:#1a120c url('kata/bg/shosai_room.jpg') center/cover;overflow:hidden}
.s{position:absolute;inset:0;display:none}.s.on{display:block}
/* 左上：章の見出し（motion_overlay.py の chap_png と同じ色） */
.hd{position:absolute;left:40px;top:30px;height:84px;display:flex;gap:10px;box-shadow:6px 6px 0 rgba(0,0,0,.27);z-index:5}
.hd i{font-style:normal;width:84px;display:flex;align-items:center;justify-content:center;font-size:56px;font-weight:900;color:#fff;
  background:linear-gradient(180deg,#5cc8fa,#185cd6);-webkit-text-stroke:2px #0d3c8c}
.hd b{display:flex;align-items:center;padding:0 24px;background:#fff;font-size:48px;font-weight:900;color:#111;white-space:nowrap}
/* 右上：全体像（今の章だけ青）。シャドの頭にかからないよう小さく右端へ（編集1） */
.ov{position:absolute;right:40px;top:30px;height:64px;display:flex;gap:6px;z-index:5}
.ov span{display:flex;align-items:center;gap:6px;padding:0 12px;border-radius:12px;background:rgba(255,255,255,.9);font-size:22px;font-weight:900;color:#64748b;white-space:nowrap}
.ov em{font-style:normal;width:30px;height:30px;border-radius:50%;background:#cbd5e1;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
.ov span.now{background:#1d4ed8;color:#fff}
.ov span[data-c]{cursor:pointer}.ov span[data-c]:not(.now):hover{background:#dbeafe;color:#1d4ed8}   /* 章をクリックで飛べる（2026-11-03） */.ov span.now em{background:#fff;color:#1d4ed8}
body.onempty .hd,body.onempty .ov,body.nohd .hd{display:none}
/* 左の枠：図を1つ */
.fr{position:absolute;left:60px;top:150px;width:1140px;height:640px;box-sizing:border-box;border-radius:28px;background:#fff;
  box-shadow:0 24px 60px rgba(0,0,0,.4);overflow:hidden;display:flex;flex-direction:column}
/* 動き（2026-10-29 シャド「スライドさせると話しづらい・前みたいな画面内のちょっとした動き」）：枠はふわっと出て、中身が順にぽんと出る。出る時は動きなしで消える */
.fr.in{animation:fin .35s cubic-bezier(.2,.75,.2,1) both}
@keyframes fin{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.fr.in .cd,.fr.in .rw,.fr.in .vsx,.fr.in .vs>span,.fr.in .bigtx p,.fr.in .band,.fr.in .tb tr{animation:pop .45s cubic-bezier(.2,.75,.2,1) both}
.fr.in :is(.cds,.rws,.vs)>:nth-child(1),.fr.in .bigtx p:first-child,.fr.in .tb tr:nth-child(2){animation-delay:.15s}
.fr.in :is(.cds,.rws,.vs)>:nth-child(2),.fr.in .bigtx .bsub,.fr.in .tb tr:nth-child(3){animation-delay:.3s}
.fr.in :is(.cds,.rws,.vs)>:nth-child(3),.fr.in .tb tr:nth-child(4){animation-delay:.45s}
.fr.in :is(.cds,.rws,.vs)>:nth-child(4){animation-delay:.6s}
.fr.in :is(.cds,.rws,.vs)>:nth-child(5){animation-delay:.75s}
.fr.in :is(.cds,.rws,.vs)>:nth-child(n+6){animation-delay:.9s}
.fr.in .band{animation-delay:.25s}
.shot{flex:1;min-height:0;padding:22px 22px 0;display:flex}
.shot img{width:100%;height:100%;box-sizing:border-box;border:3px solid #cbd5e1;border-radius:12px;background:#fff}
.band{background:#1d4ed8;color:#fff;font-size:36px;font-weight:900;padding:14px 28px;line-height:1.35}
.src{font-size:22px;font-weight:800;color:#64748b;padding:0 36px 20px}
.bigtx{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 56px}
.bigtx p{margin:0;font-size:72px;font-weight:900;line-height:1.35}
.bigtx .bsub{font-size:36px;color:#475569;margin-top:22px;line-height:1.5}
.bigtx em{font-style:normal;color:#f97316}
.cds{flex:1;display:grid;gap:20px;padding:30px;align-content:center}
.cd{border:5px solid;border-radius:24px;padding:20px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cd img{width:120px;height:120px;object-fit:contain}
.cd b{display:block;font-size:44px;font-weight:900;line-height:1.25;margin-top:6px}
.cd span{display:block;font-size:30px;font-weight:800;color:#334155;line-height:1.4;margin-top:6px}
.vs{flex:1;display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;padding:40px}
.vs>span{font-size:64px;color:#94a3b8;text-align:center;font-weight:900}
.vsx{border:5px solid;border-radius:24px;padding:34px 20px;text-align:center}
.vsx small{display:block;font-size:36px;font-weight:900}.vsx strong{display:block;font-size:60px;font-weight:900;line-height:1.3;margin-top:10px}
.rws{flex:1;display:grid;gap:22px;padding:34px;align-content:center}
.rw{display:flex;align-items:center;gap:24px;border:5px solid;border-radius:24px;padding:18px 26px}
.rw i{font-style:normal;flex:0 0 76px;height:76px;border-radius:50%;color:#fff;font-size:44px;font-weight:900;display:flex;align-items:center;justify-content:center}
.rw b{font-size:44px;font-weight:900;color:#0f172a;line-height:1.3}
.rw img{width:100px;height:100px;object-fit:contain;margin-left:auto}
.tb{flex:1;padding:34px;display:flex;align-items:center}
.tb table{width:100%;border-collapse:collapse;table-layout:fixed;border:3px solid #cbd5e1}
.tb th{background:#0f172a;color:#fff;font-size:32px;font-weight:900;text-align:left;padding:14px 20px}
.tb td{font-size:38px;font-weight:900;color:#0f172a;padding:18px 20px;border-top:3px solid #e2e8f0}
.raw{flex:1;position:relative}
/* クリックで全画面 */
.zm{cursor:zoom-in}
#zoom{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,.88);z-index:99;cursor:zoom-out}
#zoom.on{display:flex}
#zoom img,#zoom video{max-width:94vw;max-height:94vh;border-radius:12px;background:#fff}#zoom video{cursor:default;height:94vh}
#zoom .zbox{background:#fff;border-radius:28px;display:flex;flex-direction:column;overflow:hidden;transform-origin:center}
/* カードが5枚以上の時は小さく（はみ出さないように） */
.cds:has(.cd:nth-child(5)){gap:14px;padding:22px}
.cds:has(.cd:nth-child(5)) .cd{padding:12px 10px}
.cds:has(.cd:nth-child(5)) .cd img{width:76px;height:76px}
.cds:has(.cd:nth-child(5)) .cd b{font-size:38px}
.cds:has(.cd:nth-child(5)) .cd span{font-size:28px}
/* 英語の実物スクショ：左にスクショ、右に大事な文（ふりがな）＋日本語訳 */
.ens{flex:1;min-height:0;display:grid;grid-template-columns:400px 1fr;gap:24px;padding:22px 26px 14px}
.enl{display:flex;align-items:center}.enl img{width:100%;border:3px solid #cbd5e1;border-radius:12px}
.enr{display:flex;flex-direction:column;justify-content:center;gap:16px}
.en{border-left:8px solid #1d4ed8;padding:2px 0 2px 16px}
.enx{margin:0;font-size:29px;font-weight:700;color:#334155;line-height:1.75}
.enx rt{font-size:17px;font-weight:900;color:#c2410c}
.ja{margin:4px 0 0;font-size:34px;font-weight:900;color:#1d4ed8;line-height:1.35}
.ens.one{grid-template-columns:1fr;padding:30px 44px 18px}
.ens.one .enx{font-size:34px}.ens.one .enx rt{font-size:19px}.ens.one .ja{font-size:42px}
.band ruby rt{font-size:17px}.band:has(ruby){line-height:1.9;padding-top:6px}
.ja1{position:absolute;left:46px;background:#fde047;color:#0f172a;font-size:34px;font-weight:900;padding:4px 16px;border-radius:10px;box-shadow:0 4px 10px rgba(0,0,0,.2);pointer-events:none}
.shot.hasja{padding-top:86px}
/* 左上の見出し：変わった時だけ、番号がぽんと出て、文字が左からすっと出る（2026-10-29 シャド） */
.hd.in i{animation:hdn .45s cubic-bezier(.2,.75,.2,1) both}
.hd.in b{animation:hdb .5s .12s cubic-bezier(.2,.75,.2,1) both}
@keyframes hdn{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes hdb{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* 最後の1枚：スマホの画面を指がタップ（slide_kata の gift と同じ動き・kata.css から写した・2026-10-29 シャド「今まで通り画面を見本にしてクリック」） */
.gf-phone{position:absolute;left:600px;top:130px;width:620px;height:760px;border-radius:44px;background:#111827;padding:14px;box-sizing:border-box;box-shadow:0 20px 50px rgba(15,23,42,.25)}
.gf-scr{position:relative;background:#fff;border-radius:32px;height:100%;overflow:hidden;padding:0 0 14px}
.gf-vid{height:150px;background:linear-gradient(135deg,#1e3a8a,#2563eb);display:flex;align-items:center;justify-content:center}
.gf-play{width:76px;height:54px;border-radius:14px;background:#ef4444;position:relative}.gf-play:after{content:"";position:absolute;left:30px;top:15px;border-left:22px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.gf-ch{display:flex;align-items:center;gap:12px;margin:14px 20px 0}
.gf-av{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:0 0 56px}.gf-name{font-size:22px;color:#0f172a}
.gf-sub{position:relative;width:176px;height:48px;flex:0 0 176px}
.gf-sub span{position:absolute;inset:0;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:900}
.gf-sub0{background:#0f172a;color:#fff}.gf-sub1{background:#e2e8f0;color:#334155;opacity:0}
.gf-likerow{display:flex;gap:10px;margin:12px 20px 0}
.gf-like{position:relative;width:140px;height:44px}.gf-like span{position:absolute;inset:0;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:900}
.gf-like0{background:#f1f5f9;color:#0f172a}.gf-like1{background:#2563eb;color:#fff;opacity:0}
.gf-pill{width:90px;height:44px;border-radius:999px;background:#f1f5f9}
.gf-box{margin:12px 20px 0;background:#f1f5f9;border-radius:16px;padding:10px 16px}
.gf-lab{font-size:18px;font-weight:900;color:#64748b}
.gf-hi{margin-top:6px;background:#fef08a;border:3px solid #f59e0b;border-radius:12px;padding:4px 12px;font-size:21px;font-weight:900;color:#0f172a}
.gf-more{margin-top:4px;font-size:16px;color:#64748b}
.gf-sum{height:150px;box-sizing:border-box}
.gf-cm{position:absolute;left:0;right:0;top:470px}
.gf-pin{display:flex;gap:10px;margin-top:8px}.gf-av2{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 44px}
.gf-pintag{font-size:16px;font-weight:900;color:#64748b}.gf-q{font-size:22px;font-weight:900;color:#0f172a;line-height:1.35;min-height:60px}
.gf-reply{display:flex;gap:10px;align-items:center;margin-top:12px}
.gf-in{position:relative;flex:1;height:52px;border:3px solid #f59e0b;border-radius:999px;background:#fff;padding:0 16px;display:flex;align-items:center;overflow:hidden}
.gf-ph{font-size:20px;font-weight:800;color:#94a3b8}
.gf-type{position:absolute;left:16px;font-size:21px;font-weight:900;color:#0f172a;white-space:nowrap;overflow:hidden;width:0;border-right:3px solid transparent}
.gf-finger{position:absolute;left:900px;top:820px;opacity:0;z-index:5;filter:drop-shadow(0 6px 10px rgba(15,23,42,.35));pointer-events:none}
.gf-tap{position:absolute;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;border:5px solid #f97316;opacity:0;z-index:4;pointer-events:none}
.gf-t1{left:498px;top:206px}.gf-t2{left:104px;top:268px}.gf-t3{left:337px;top:663px}
@keyframes gf-finger{0%{left:900px;top:820px;opacity:0}6%{opacity:1}14%,20%{left:471px;top:201px;opacity:1}17%{transform:scale(.88)}
 32%,38%{left:77px;top:263px}35%{transform:scale(.88)}50%,56%{left:310px;top:658px}53%{transform:scale(.88)}70%{left:900px;top:820px;opacity:1}76%,100%{left:900px;top:820px;opacity:0}}
@keyframes gf-tap{0%{opacity:0;transform:scale(.4)}5%{opacity:.9}100%{opacity:0;transform:scale(1.4)}}
@keyframes gf-on{to{opacity:1}}@keyframes gf-off{to{opacity:0}}
@keyframes gf-type{from{width:0;border-right-color:#0f172a}to{width:calc(var(--n)*1em);border-right-color:#0f172a}}
@keyframes gf-sent{to{border-color:#16a34a;background:#f0fdf4}}
@keyframes gf-card{0%,100%{transform:none;box-shadow:none}50%{transform:scale(1.05);box-shadow:0 10px 26px rgba(249,115,22,.35);border-color:#f97316}}
.fr.in .gf-finger{animation:gf-finger 7s .6s ease-in-out both}
.fr.in .gf-t1{animation:gf-tap .6s 1.75s ease-out both}.fr.in .gf-t2{animation:gf-tap .6s 3.05s ease-out both}.fr.in .gf-t3{animation:gf-tap .6s 4.35s ease-out both}
.fr.in .gf-sub1{animation:gf-on .2s 1.85s both}.fr.in .gf-like1{animation:gf-on .2s 3.15s both}
.fr.in .gf-ph{animation:gf-off .2s 4.45s both}
.fr.in .gf-type{animation:gf-type 1.2s 4.6s steps(var(--n)) both}  /* 2026-10-21 速く（2.4秒→1.2秒） */
.fr.in .gf-in{animation:gf-sent .4s 6s both}
.fr.in .gf-c1{animation:gf-card 1s 1.5s both}.fr.in .gf-c2{animation:gf-card 1s 2.8s both}.fr.in .gf-c3{animation:gf-card 1s 4.1s both}
.fr .gift{position:relative;flex:1}
.fr .gift .gf-phone{left:34px;top:22px;transform:scale(.78);transform-origin:top left;z-index:10}   /* 指がカードや文字の上を通るように一番上（2026-10-29 シャド） */
.fr .gift .gfc{z-index:1;position:absolute;left:560px;top:150px;width:540px;display:grid;gap:18px}
.fr .gift .gfc .k{display:flex;align-items:center;gap:18px;padding:16px 22px;border:4px solid #cbd5e1;border-radius:22px;background:#fff}
.fr .gift .gfc img{width:84px;height:84px}.fr .gift .gfc b{font-size:38px;font-weight:900;color:#0f172a}
.fr .gift .gfb{z-index:1;position:absolute;left:560px;top:30px;width:540px;font-size:34px;font-weight:900;color:#1d4ed8;line-height:1.35}
.cd img+b,.vsx img+small{margin-top:6px}
.vsx img{width:110px;height:110px;object-fit:contain;display:block;margin:0 auto 6px}
.bigtx.hasic{flex-direction:row;align-items:center;gap:30px}.bigtx.hasic>div{flex:1}.bigtx.hasic>img{width:220px;height:220px;object-fit:contain}
/* ▶ボタン（deck.css の .open と同じ形・帯の右に置く） */
.band{display:flex;align-items:center;gap:16px}
.open{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;padding:8px 20px;border-radius:999px;background:#fff;border:4px solid #fff;color:#1d4ed8;font-size:26px;font-weight:900;text-decoration:none;cursor:pointer}
.open::before{content:"▶"}.open:hover{background:#1e40af;color:#fff}
/* 板書（2026-10-30）：1章＝1枚の板。x40〜1240・y140〜800 */
.fr:has(.bdg){left:40px;width:1200px;top:140px;height:660px}
.bdg{flex:1;min-height:0;display:grid;gap:16px;padding:20px}
.bst{display:flex;flex-direction:column;min-height:0}
.brw{display:grid;gap:12px}
.bsh{display:flex;flex-direction:column;min-height:0;border:3px solid #cbd5e1;border-radius:14px;overflow:hidden;background:#fff}
.bsh img{flex:1;min-height:0;width:100%;object-fit:contain;background:#fff}
.bcap{display:flex;align-items:center;gap:10px;background:#1d4ed8;color:#fff;font-size:26px;font-weight:900;padding:8px 14px;line-height:1.3}
.bcap .open{font-size:22px;padding:4px 14px}
.bit{display:flex;align-items:center;gap:14px;border:4px solid;border-radius:18px;padding:10px 16px}
.bit img{width:72px;height:72px;object-fit:contain;flex:0 0 72px}
.bit b{display:block;font-size:34px;font-weight:900;line-height:1.25}.bit span{display:block;font-size:26px;font-weight:800;color:#334155;line-height:1.35}
.btl{border:4px solid;border-radius:18px;padding:10px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.btl img{width:64px;height:64px;object-fit:contain}
.btl small{font-size:24px;font-weight:900;color:#475569}.btl b{font-size:38px;font-weight:900;line-height:1.2}
.bbn{display:flex;align-items:center;gap:16px;border-radius:18px;padding:12px 22px;color:#fff;font-size:38px;font-weight:900;line-height:1.3}
.bbn img{width:70px;height:70px;object-fit:contain;background:#fff;border-radius:14px;padding:4px}
.bbn em{font-style:normal;color:#fde047}
.bsrc{font-size:20px;font-weight:800;color:#64748b}
.fr.in .bdg>*,.fr.in .bst>*,.fr.in .brw>*{animation:pop .45s cubic-bezier(.2,.75,.2,1) both}
.fr.in .bdg>:nth-child(2),.fr.in .bst>:nth-child(2),.fr.in .brw>:nth-child(2){animation-delay:.12s}
.fr.in .bdg>:nth-child(3),.fr.in .bst>:nth-child(3),.fr.in .brw>:nth-child(3){animation-delay:.24s}
.fr.in .bst>:nth-child(4),.fr.in .brw>:nth-child(4){animation-delay:.36s}
.bsh video{flex:1;min-height:0;width:100%;object-fit:contain;background:#fff}
.brw,.bst{min-height:0}.bdg>*{min-height:0}

/* ── ホワイトボード風の板（2026-10-30 シャド「真っ白な板が書斎で光って目が疲れる」）write_fig_deck(..., wb=True) で <body class="wb">
   画像は使わず見た目だけ：少し灰色寄りの白・上が明るく下が少し暗いむら・細い銀色の枠・下に影（2026-10-30 シャド採用。マーカー置きはなし）
   大きさ：x40〜1300・y140〜811（1260×671。前の1200×660の左上のまま右と下だけ広げた・2026-10-30 シャド決定）。下の y820〜 は字幕 */
.wb .fr{left:40px!important;top:140px!important;width:1260px!important;height:671px!important;padding-right:20px}   /* 前（1200×660）の左上のまま、右を x1300・下を y811 まで広げる（2026-10-30 シャド決定）。中身の右端は x1280 まで */
.wb .fr{border-radius:10px;overflow:visible;
  background:radial-gradient(ellipse 70% 45% at 35% 0%,rgba(255,255,255,.55),transparent 70%),linear-gradient(180deg,#f1f2ef 0%,#e8e9e5 60%,#dfe0dc 100%);
  box-shadow:0 0 0 7px #d3d6da,0 0 0 9px #a3a8b0,inset 0 2px 0 rgba(255,255,255,.8),0 34px 40px -14px rgba(0,0,0,.6),0 10px 18px rgba(0,0,0,.25)}
.wb .fr>*{border-radius:6px}
.wb .bsh,.wb .tb table{background:#f8f8f5}.wb .bsh img,.wb .bsh video{background:#f8f8f5}
.wb .cd,.wb .bit,.wb .btl,.wb .rw,.wb .vsx{filter:saturate(.92)}
.wb :is(.cd,.bit,.btl,.rw,.vsx)[style*="#ffffff"]{background:#f6f6f3!important}

/* ── クリックで赤枠が動く（2026-10-30 見本のみ。シャド判断「やめる・赤枠は編集で入れる」→ 撮影用のデッキでは boxes/hl を使わない）（2026-10-30 シャド「赤枠が次々に動く所は維持率が落ちない」）──
   →・クリックのたびに、赤枠が次の場所へ動く。全部回ったら次のスライドへ。
   場所＝ .hl を付けた部品（並んだ順）と、画像の data-boxes="x,y,w,h;…"（画像の中の％）。並びは画面の上から下でなく書いた順 */
#rbox{position:absolute;border:7px solid #ef2b2b;border-radius:12px;box-shadow:0 0 0 3px rgba(255,255,255,.9),0 6px 18px rgba(239,43,43,.35);
  pointer-events:none;z-index:8;opacity:0;transition:left .35s cubic-bezier(.2,.75,.2,1),top .35s cubic-bezier(.2,.75,.2,1),width .35s cubic-bezier(.2,.75,.2,1),height .35s cubic-bezier(.2,.75,.2,1),opacity .2s}
#rbox.on{opacity:1}
/* 見出しと全体像を少し右へ（2026-10-30 シャド・OBSで確かめて）。見出しは板の中身の左端（x60）より少し内、全体像の右端は x1900 */
.wb .hd{left:72px}
.wb .ov{right:20px}
/* 統計の横棒（hbars） */
.hbw{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:4px 0}
.hbhd{font-size:22px;font-weight:800;color:#1d4ed8;background:#e8eef7;border-radius:8px;padding:6px 14px}
.hbrs{flex:1;display:flex;flex-direction:column;justify-content:space-around}
.hbr,.hbax{display:grid;grid-template-columns:470px 1fr 222px;align-items:center;gap:14px;min-width:0}
.hbr b{font-size:29px;font-weight:900;color:#0f172a;line-height:1.2}
.hbr strong{font-size:32px;font-weight:900;color:#1d4ed8;text-align:right;white-space:nowrap}
.hbt{position:relative;height:30px}
.hbt i{position:absolute;top:-14px;bottom:-14px;width:1px;background:#d6dae0}
.hbt em{position:absolute;left:0;top:0;bottom:0;background:#1f6fae;border-radius:2px}
.hbh b{color:#c2410c}.hbh em{background:#ea7a1f}.hbh strong{color:#c2410c}
.hbtk{height:22px}.hbtk span{position:absolute;transform:translateX(-50%);font-size:17px;font-weight:700;color:#64748b;white-space:nowrap}
.hbax strong{font-size:17px;font-weight:700;color:#64748b;text-align:right;padding-top:2px}
.hbft{font-size:19px;font-weight:700;color:#64748b;line-height:1.45}
.fr.in .hbr em{animation:grow .8s cubic-bezier(.2,.75,.2,1) both;transform-origin:left}
@keyframes grow{from{transform:scaleX(0)}to{transform:none}}
/* 板の中の4つ並び・見直しシートを大きく */
.bdg .brw:only-child{height:100%}
.bst.fill{justify-content:space-around;height:100%}
.bst.fill .bit b{font-size:38px}.bst.fill .bit span{font-size:32px}.bst.fill .bit img{width:96px;height:96px;flex-basis:96px}
.brw.col4 .bit{flex-direction:column;text-align:center;justify-content:center}.brw.col4 .bit b{font-size:32px}.brw.col4 .bit span{font-size:24px}
.hbr b{display:flex;align-items:center;gap:12px}.hbr b img{width:64px;height:64px;object-fit:contain;flex:0 0 64px}

/* ── スキル回・技術回の形（2026-10-30 シャド決定・OBS ⌃5：画面いっぱい＋シャドが左下に透過）──
   write_fig_deck(..., tech=True) で <body class="tech">。左下 x0〜450・y680〜1080 は人、y820〜 は字幕（その右側）。
   板は x40〜1880・y140〜660（上の帯）＋ x480〜1880・y660〜810（左下を空けた右下）。1画面に手順は1つ */
.tech #stage{background:#eef1f4}
.tech .fr{left:40px!important;top:130px!important;width:1840px!important;height:540px!important;border-radius:22px;background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.12)}   /* 板は y130〜670（左下の人 y680〜 にかからない）・横いっぱい */
.tech .fr .bdg{padding-bottom:20px}
.tech .hd{left:40px}.tech .ov{right:20px}
.tech .ov span{background:#fff;box-shadow:0 2px 6px rgba(15,23,42,.12)}.tech .ov span.now{background:#1d4ed8}
.tech .src,.tech .bsrc{padding-left:460px}
.stp{display:flex;align-items:center;gap:18px;border:4px solid;border-radius:20px;padding:14px 22px}
.stp i{font-style:normal;flex:0 0 64px;height:64px;border-radius:50%;color:#fff;font-size:36px;font-weight:900;display:flex;align-items:center;justify-content:center}
.stp img{width:80px;height:80px;object-fit:contain;flex:0 0 80px}
.stp b{display:block;font-size:38px;font-weight:900;line-height:1.25}.stp span{display:block;font-size:28px;font-weight:800;color:#334155;line-height:1.4}
.cdb{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#0f172a;min-height:0}
.cdb pre{flex:1;margin:0;padding:18px 22px;color:#e2e8f0;font:700 26px/1.5 Menlo,monospace;white-space:pre-wrap}
.tech .brr{margin-left:0}
.tech .btop{min-height:0}
.tech .fr .gift .gf-phone{transform:scale(.64)}.tech .fr .gift .gfc,.tech .fr .gift .gfb{left:460px}
/* スキル回（2026-10-30 シャド「前みたいに下までホワイトボード・俺がそこに入りこむ形・外枠を白、内枠をグレー」）
   外＝白、板＝ホワイトボード風のグレーを下まで（y130〜1050）。中身は上（〜y670）にだけ置き、左下の人と字幕の所は板だけ見える */
.tech #stage{background:#ffffff}
.tech .fr{height:920px!important;padding-bottom:380px;border-radius:14px;
  background:radial-gradient(ellipse 70% 40% at 35% 0%,rgba(255,255,255,.6),transparent 70%),linear-gradient(180deg,#f1f2ef 0%,#e8e9e5 60%,#dfe0dc 100%);
  box-shadow:0 0 0 6px #d3d6da,0 0 0 8px #a3a8b0,0 16px 30px rgba(0,0,0,.18)}
.tech .bsh,.tech .bsh img{background:#f8f8f5}
/* スキル回（2026-10-30 シャド直し「外がグレーで中が白・少しオフホワイトで目が疲れない」） */
.tech #stage{background:linear-gradient(180deg,#e6e7e3,#d9dad6)}
.tech .fr{background:#faf8f3!important;box-shadow:0 0 0 6px #c9ccd1,0 0 0 8px #a3a8b0,0 16px 30px rgba(0,0,0,.18)!important}
.tech .bsh,.tech .bsh img{background:#ffffff}
.tech .ov span{background:#faf8f3}
/* 2026-10-30 シャド「オフホワイトを解説回にも・今の解説回はグレーすぎ」 */
.wb .fr{background:#faf8f3!important}
.wb .bsh,.wb .bsh img,.wb .tb table{background:#ffffff}
/* ページ数（1 / 10）を右上の全体像の左に・全体像を見やすく（シャド「全体像がわからない」） */
.ov .pc{background:#0f172a!important;color:#fff!important;font-size:24px;padding:0 16px}
.ov span{font-size:24px;color:#334155}
.ov span em{background:#94a3b8}
/* スキル回：余白を減らす。中身は y800 まで、左下（人）の所だけ空ける（シャド「右下も使っていい」） */
.tech .fr{padding-bottom:250px!important}
.tech .bdg>.brw:first-child>:first-child{margin-bottom:130px}
.tech .bdg>.brw:first-child{height:100%}.tech .bsh img{object-fit:contain;object-position:top center}
.tech .stp b{font-size:34px}.tech .stp span{font-size:26px}
.tech .bdg>.brr,.tech .bdg>.cdb+.brr{margin-left:440px}
.hd.long b{font-size:36px;padding:0 18px}
/* スキル回の最後の1枚を大きく（2026-10-30 シャド「前みたいに・小さい」）。スマホは左下の人の右、カードはその右に大きく */
.tech .fr .gift .gf-phone{left:440px;top:10px;transform:scale(.86)}
.tech .fr .gift .gfb{left:1040px;top:40px;width:760px;font-size:44px}
.tech .fr .gift .gfc{left:1040px;top:190px;width:700px;gap:24px}
.tech .fr .gift .gfc .k{padding:22px 30px}.tech .fr .gift .gfc img{width:110px;height:110px}.tech .fr .gift .gfc b{font-size:50px}
/* スキル回：最初の何もない1枚もオフホワイト（2026-10-31 シャド） */
.tech.onempty #stage{background:#faf8f3}

/* G＝シャドが入る位置の目安（撮影前の確認用・2026-10-31）。解説回は右、スキル回は左下 */
#faceguide{position:absolute;left:1300px;top:0;width:620px;height:1080px;border:6px dashed #ef4444;box-sizing:border-box;z-index:99;display:none;pointer-events:none}
.tech #faceguide{left:0;top:680px;width:450px;height:400px}
body.guide #faceguide{display:block}