/* 9/13 SurfLabの紙色と大きな文字を引き継ぐ、次回下書き用のレイアウト。 */
body{word-break:auto-phrase}
.slide:nth-child(n){background:var(--paper)}
.slide:has(.chapter){background:#edf5f6}
.draft-cover{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;align-items:center}
.draft-cover h1{font-size:clamp(40px,4.3vw,68px);line-height:1.38}
.draft-cover figure img{border:0;mix-blend-mode:multiply}
.draft-cover .cover-sub{font-weight:500;line-height:1.8;font-size:clamp(21px,1.8vw,28px)}
.draft-cover .eyebrow{font-size:18px}
.chapter h2{font-size:clamp(46px,5.4vw,78px);line-height:1.4;margin-bottom:30px}
.chapter .chapter-number{font-size:22px;color:var(--blue-strong);font-weight:800;letter-spacing:.12em;margin-bottom:22px}
.chapter .lead{font-weight:500}
.theme-pair{display:grid;grid-template-columns:1fr 1fr;gap:55px;margin-top:48px}
.theme-pair>div{border-top:3px solid var(--blue-strong);padding-top:22px}
.theme-pair h3{font-size:clamp(28px,2.6vw,42px);margin-bottom:20px}
.theme-pair p{font-size:clamp(22px,1.85vw,30px)}
.transition{font-size:clamp(18px,1.4vw,23px);color:var(--blue-strong);margin-top:34px;font-weight:700}
.source-list{display:grid;gap:24px;margin-top:30px}
.source-list article{padding-left:25px;border-left:4px solid var(--line)}
.source-list h3{font-size:clamp(23px,2vw,32px);margin-bottom:8px}
.source-list p{font-size:clamp(19px,1.55vw,25px)}
.source-list a{font-size:18px;text-underline-offset:4px}
.horse-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:35px;align-items:center}
.horse-layout img{border:0;max-height:48vh;object-fit:contain;mix-blend-mode:multiply}
.horse-layout .lead{font-size:clamp(25px,2.1vw,34px);margin-top:0}
.horse-layout .small{font-size:clamp(20px,1.65vw,27px)}
.quiet-source{font-size:14px;color:var(--muted);margin-top:18px;line-height:1.5}
.statement{font-size:clamp(32px,3.1vw,50px);font-weight:800;line-height:1.65;margin-top:28px}
.demo-intro{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center}
.demo-intro img{border:2px solid var(--ink);box-shadow:10px 10px 0 var(--blue)}
.demo-film{width:min(100%,calc(60vh * 16 / 9));margin-inline:auto}
.demo-film video{width:100%;max-height:60vh;object-fit:contain}
.demo-film figcaption{text-align:center;font-size:16px}
.demo-request{max-width:1050px;padding:28px 34px;border-left:6px solid var(--blue-strong);background:#edf5f6;margin:25px 0}
.demo-request p{font-size:clamp(25px,2.3vw,37px);font-weight:700;line-height:1.7}
.demo-link{display:inline-block;padding:12px 22px;font-size:20px;font-weight:700;border:2px solid var(--ink);background:var(--yellow);text-decoration:none}
.observation{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:40px}
.observation article{border-top:3px solid var(--line);padding-top:22px}
.observation h3{font-size:clamp(26px,2.4vw,38px);margin-bottom:14px}
.observation p{font-size:clamp(21px,1.8vw,28px)}
.closing h2{font-size:clamp(40px,4.5vw,70px);line-height:1.45}
.closing .lead{font-weight:500;margin-top:30px}
.closing-thanks{font-size:20px;color:var(--muted);margin-top:60px}
@media(max-height:800px) and (min-width:901px){.slide{padding-top:42px;padding-bottom:65px}.theme-pair{margin-top:30px}.source-list{gap:20px}.source-list h3{font-size:25px}.source-list p{font-size:21px}.chapter h2{font-size:61px}.transition{margin-top:24px}.horse-layout img{max-height:45vh}}
@media(max-width:768px),(max-width:1024px) and (pointer:coarse){
  .slide{padding:34px 26px 74px;justify-content:center;overflow:visible}
  .slide-content{margin:0 auto}
  h2{font-size:30px;line-height:1.5;margin-bottom:24px}
  .draft-cover,.horse-layout,.demo-intro{grid-template-columns:1fr;gap:25px}
  .draft-cover h1{font-size:clamp(29px,8.7vw,38px)!important;line-height:1.4}
  .draft-cover .eyebrow{font-size:15px;margin-bottom:18px}
  .draft-cover .cover-sub{font-size:20px;margin-top:18px}
  .draft-cover img{max-height:32vh;object-fit:contain}
  .chapter h2{font-size:39px;line-height:1.5}
  .chapter .chapter-number{font-size:18px}
  .chapter .lead,.lead{font-size:22px;line-height:1.8}
  .theme-pair{grid-template-columns:1fr;gap:28px;margin-top:24px}
  .theme-pair>div{padding-top:16px}
  .theme-pair h3{font-size:27px;margin-bottom:12px}
  .theme-pair p,.source-list p{font-size:18px}
  .source-list article{padding-left:15px}
  .source-list h3{font-size:23px;line-height:1.5}
  .source-list a{font-size:16px}
  .horse-layout img{max-height:35vh}
  .horse-layout .lead{font-size:24px}
  .horse-layout .small{font-size:19px}
  .statement{font-size:27px;line-height:1.8}
  .transition{font-size:17px;margin-top:26px}
  .quiet-source{font-size:13px}
  .demo-film{width:100%}.demo-film video{max-height:none}
  .demo-film figcaption{font-size:14px}
  .demo-request{padding:20px;margin-block:20px}.demo-request p{font-size:23px}
  .demo-link{font-size:18px;padding:12px 15px}
  .observation{grid-template-columns:1fr;gap:24px;margin-top:25px}
  .observation article{padding-top:16px}.observation h3{font-size:26px;margin-bottom:8px}.observation p{font-size:19px}
  .closing h2{font-size:clamp(29px,8.7vw,35px)}.closing .lead{font-size:21px}.closing-thanks{font-size:17px;margin-top:38px}
}
.concept-figure{margin:12px auto 0;text-align:center}
.concept-figure img{width:auto;max-width:100%;max-height:59vh;object-fit:contain;border:0;mix-blend-mode:multiply;margin-inline:auto}
.concept-figure.roster img{max-height:57vh}
.model-list{display:grid;gap:16px;margin:30px 0}
.model-list article{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;border-bottom:1px solid var(--line);padding:12px 0}
.model-list h3{font-size:clamp(25px,2.4vw,38px);margin:0}
.model-list p{font-size:clamp(23px,2vw,31px);margin:0}
@media(max-width:768px),(max-width:1024px) and (pointer:coarse){
 .concept-figure img,.concept-figure.roster img{max-height:none;width:100%}
 .model-list{gap:18px;margin:20px 0}.model-list article{grid-template-columns:1fr;gap:6px;padding:10px 0}
 .model-list h3{font-size:25px}.model-list p{font-size:20px}
}
.official-model-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:34px 0 32px}
.official-model-image{position:relative;margin:0 0 22px;background:#08090a;aspect-ratio:1.8}
.official-model-image img{width:100%;height:100%;object-fit:contain;border:0}
.official-model-grid h3{font-size:clamp(28px,2.7vw,43px);line-height:1.25;margin-bottom:16px;letter-spacing:-.02em}
.official-model-grid h3 span{display:block;font-size:22px;color:var(--muted);font-weight:600;margin-bottom:5px;letter-spacing:0}
.official-model-grid p{font-size:clamp(22px,1.8vw,29px);line-height:1.6}
.openai-models article:first-child img{object-fit:cover}
.official-astra-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:white;font:600 46px/1 Arial,sans-serif;text-shadow:0 2px 12px #000;pointer-events:none}
.anthropic-models .official-model-image{background:#f1f0e8;padding:20px}
.anthropic-models .official-model-image img{object-fit:contain}
@media(max-width:768px),(max-width:1024px) and (pointer:coarse){
 .official-model-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px;margin:24px 0}
 .official-model-image{margin-bottom:14px}.official-model-grid h3{font-size:25px;margin-bottom:10px}
 .official-model-grid h3 span{font-size:17px}.official-model-grid p{font-size:18px}
 .official-astra-label{font-size:30px}.anthropic-models .official-model-image{padding:12px}
}
@media(max-width:360px){.official-model-grid{grid-template-columns:1fr}.official-model-image{max-width:240px}.official-model-grid p br{display:none}}
/* 公式モデル一覧の画像背景色を保持する。 */
.anthropic-models article:nth-child(1) .official-model-image{background:#6DA7EC}
.anthropic-models article:nth-child(2) .official-model-image{background:#F09978}
.anthropic-models article:nth-child(3) .official-model-image{background:#F0EEE6}
.anthropic-models article:nth-child(4) .official-model-image{background:#BCD1CA}

/* 第3部（Jev）：流れ・確からしさの棒・QR・2048・結果表。 */
.observation .route,.theme-pair .route{color:var(--blue-strong);font-weight:800;margin-top:12px}
.jev-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:22px;align-items:stretch;margin:36px 0 10px}
.jev-flow>div{border:2px solid var(--ink);background:white;padding:24px 22px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.jev-flow>div.picked{background:var(--yellow)}
.jev-flow span{font-size:clamp(17px,1.35vw,23px);color:var(--muted);font-weight:700;margin-bottom:10px}
.jev-flow strong{font-size:clamp(24px,2.2vw,36px);line-height:1.5}
.jev-flow i{align-self:center;font-style:normal;font-size:clamp(30px,2.8vw,46px);font-weight:800;color:var(--blue-strong)}
.prob-bars{display:grid;gap:14px;margin:26px 0 8px;max-width:1100px}
.prob-bars>div{display:grid;grid-template-columns:minmax(150px,.9fr) 3fr 90px;gap:18px;align-items:center}
.prob-bars span,.prob-bars em{font-size:clamp(21px,1.8vw,30px);font-weight:700;font-style:normal}
.prob-bars em{text-align:right}
.prob-bars b{display:block;height:30px;background:#edf1f0;border:2px solid var(--ink)}
.prob-bars b i{display:block;height:100%;background:var(--blue-strong)}
.prob-bars .picked span,.prob-bars .picked em{color:var(--blue-strong)}
.demo-backup{margin-top:26px}
.demo-backup summary{font-size:18px;color:var(--muted);cursor:pointer}
.demo-backup .demo-film{margin-top:16px}
.qr-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.qr-code{text-align:center}
.qr-code img{width:min(100%,56vh);margin-inline:auto;border:0;image-rendering:pixelated}
.qr-code figcaption{font-size:18px}
.game-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.board-2048{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:10px;background:#bbada0;border-radius:8px;width:min(100%,52vh);margin-inline:auto}
.board-2048 i{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#cdc1b4;border-radius:5px;font-style:normal;font-weight:800;font-size:clamp(24px,2.6vw,44px);color:#776e65}
.board-2048 i:not(:empty){background:#eee4da}
.lane-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 36px;margin:30px 0 10px}
.lane-grid article{border-top:4px solid var(--line);padding-top:18px}
.lane-grid article.jev{border-color:var(--blue-strong)}
.lane-grid h3{font-size:clamp(25px,2.3vw,37px);margin-bottom:10px}
.lane-grid p{font-size:clamp(21px,1.8vw,29px)}
.result-table{display:grid;margin:26px auto 12px;max-width:1150px;border-top:3px solid var(--ink)}
.result-table>div{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;padding:14px 8px;border-bottom:1px solid var(--line);align-items:center}
.result-table span{font-size:clamp(22px,2vw,33px);font-weight:700}
.result-table span+span{text-align:right;font-variant-numeric:tabular-nums}
.result-table .head span{font-size:clamp(17px,1.35vw,23px);color:var(--muted)}
.result-table .jev span{color:var(--blue-strong)}
@media(max-width:768px),(max-width:1024px) and (pointer:coarse){
 .jev-flow{grid-template-columns:1fr;gap:10px;margin:20px 0}.jev-flow i{transform:rotate(90deg);justify-self:center}
 .jev-flow>div{padding:16px}.jev-flow strong{font-size:22px}.jev-flow span{font-size:15px}
 .prob-bars>div{grid-template-columns:1fr 60px;gap:6px 10px}.prob-bars b{grid-column:1/-1;grid-row:2;height:22px}
 .prob-bars span,.prob-bars em{font-size:19px}
 .qr-layout,.game-layout{grid-template-columns:1fr;gap:26px}.qr-code img{width:min(100%,260px)}
 .board-2048{width:min(100%,300px)}.board-2048 i{font-size:26px}
 .lane-grid{grid-template-columns:1fr;gap:18px;margin:18px 0}.lane-grid h3{font-size:24px}.lane-grid p{font-size:18px}
 .result-table>div{grid-template-columns:1.6fr 1fr 1fr;gap:8px;padding:10px 2px}.result-table span{font-size:17px}.result-table .head span{font-size:14px}
}
.theme-pair p.metric{font-size:clamp(50px,5vw,88px);line-height:1.25;margin:4px 0 6px}
.theme-pair p.metric span{font-size:.4em}
@media(max-width:768px),(max-width:1024px) and (pointer:coarse){.theme-pair p.metric{font-size:44px}}
@media(max-width:360px){.theme-pair p.metric{font-size:36px!important}}
.observation article:has(.route),.theme-pair>div:has(.route){display:flex;flex-direction:column}
.observation .route,.theme-pair .route{margin-top:auto;padding-top:12px}
.route-map .jev-flow.start{grid-template-columns:1fr auto 1fr;max-width:1000px;margin:24px auto 0}
.route-map .branch{text-align:center;color:var(--blue-strong);font-weight:800;margin:18px 0 14px}
.route-map .dests{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.route-map .dests div{border:2px solid var(--ink);background:#edf5f6;padding:22px 12px;text-align:center;font-size:clamp(21px,1.8vw,30px);font-weight:800;line-height:1.45}
@media(max-width:768px),(max-width:1024px) and (pointer:coarse){
 .route-map .jev-flow.start{grid-template-columns:1fr}.route-map .dests{grid-template-columns:1fr 1fr;gap:10px}
 .route-map .dests div{font-size:18px;padding:12px 8px}.route-map .branch{font-size:17px}
}
.route-map .dests div{display:flex;align-items:center;justify-content:center}

/* 07: 関係図と、AIが操作する道具の3例を同じ画面に収める。 */
.concept-figure.harness-overview img{max-height:34vh}
.tool-examples{border:2px solid var(--blue-strong);background:#edf5f6;padding:16px 24px;margin-top:18px}
.tool-examples>h3{font-size:clamp(24px,2vw,34px);line-height:1.4;margin-bottom:12px}
.tool-examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tool-examples-grid article+article{border-left:1px solid var(--line);padding-left:24px}
.tool-examples-grid h4{font-size:clamp(22px,1.8vw,30px);font-weight:800;line-height:1.4;margin-bottom:6px}
.tool-examples-grid p{font-size:clamp(20px,1.5vw,25px);line-height:1.5}
@media(max-width:768px),(max-width:1024px) and (pointer:coarse){
 .concept-figure.harness-overview img{max-height:none}
 .tool-examples{padding:18px;margin-top:22px}
 .tool-examples>h3{font-size:23px;margin-bottom:18px}
 .tool-examples-grid{grid-template-columns:1fr;gap:16px}
 .tool-examples-grid article+article{border-left:0;border-top:1px solid var(--line);padding:16px 0 0}
 .tool-examples-grid h4{font-size:22px}.tool-examples-grid p{font-size:19px}
}

/* 2026-10-04: 4つの話を、目次と同じ画像で案内する。 */
.agenda-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:28px 0}
.agenda-grid article{border-top:3px solid var(--blue-strong);padding-top:16px}
.agenda-grid img{width:100%;aspect-ratio:16/9;object-fit:contain;border:0;background:#f4f3ed;margin-bottom:18px}
.agenda-grid h3{font-size:clamp(22px,1.85vw,30px);line-height:1.5;margin:0 0 12px}
.agenda-grid h3 span{color:var(--blue-strong)}
.agenda-grid p{font-size:clamp(18px,1.5vw,24px);line-height:1.55}
.chapter-visual{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;text-align:left}
.chapter-visual h2{font-size:clamp(38px,4.25vw,64px);line-height:1.45;margin-bottom:24px}
.chapter-visual .chapter-number{font-size:20px;letter-spacing:0;margin-bottom:24px}
.chapter-visual .lead{font-size:25px;line-height:1.65}
.chapter-visual img{width:100%;object-fit:contain;max-height:51vh;border:0}
.cast-figure img{max-height:52vh}
.cast-caption{text-align:center;font-size:27px;font-weight:700;margin:20px 0 0}
.roles-three{margin-top:30px;gap:30px}
.roles-three .role-analogy{font-size:20px;color:var(--blue-strong);font-weight:700;margin-bottom:14px}
.roles-three h3{font-size:clamp(27px,2.25vw,36px);line-height:1.4}
.roles-three p{font-size:clamp(22px,1.7vw,28px);line-height:1.7}
.product-names{font-size:30px;font-weight:700;color:var(--blue-strong);margin-top:8px}
.example-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin-top:20px}
.example-strip p{font-size:23px;line-height:1.6}
.example-strip b{display:block;font-size:27px;color:var(--blue-strong);margin-bottom:5px}
.concept-figure.harness-types img{max-height:56vh}
.official-model-grid.models-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.openai-models .official-model-image img{object-fit:cover}
.tool-locations{margin-top:30px;gap:55px}
.tool-locations p{font-size:27px;line-height:1.7}
.paint-demo{display:grid;grid-template-columns:1fr 1.2fr;gap:34px;align-items:center}
.paint-demo .demo-request{padding:18px 22px;margin-top:15px}
.paint-demo .demo-request p{font-size:28px;line-height:1.65}
.paint-demo .small{font-size:22px;line-height:1.65;margin-top:24px}
.paint-demo video{display:block;width:100%;aspect-ratio:16/9;background:#102d3c}
.paint-demo figcaption{font-size:17px;line-height:1.6;text-align:center;margin-top:12px}
.eyebrow{color:var(--blue-strong);font-size:20px;font-weight:700;line-height:1.5;margin-bottom:20px}
@media(max-width:768px),(max-width:1024px) and (pointer:coarse){
 .agenda-grid{grid-template-columns:1fr 1fr;gap:24px 18px;margin:22px 0}
 .agenda-grid h3{font-size:20px}.agenda-grid p{font-size:17px}.agenda-grid img{margin-bottom:12px}
 .chapter-visual,.paint-demo{grid-template-columns:1fr;gap:28px}
 .chapter-visual h2{font-size:34px}.chapter-visual .chapter-number{font-size:17px;margin-bottom:18px}
 .chapter-visual .lead{font-size:21px}.chapter-visual img{max-height:35vh}
 .cast-figure img,.concept-figure.harness-types img{max-height:none}
 .cast-caption{font-size:20px;text-align:left;margin-top:18px}
 .roles-three .role-analogy{font-size:17px;margin-bottom:8px}.roles-three h3{font-size:25px}.roles-three p{font-size:19px}
 .product-names{font-size:24px}.example-strip{grid-template-columns:1fr;gap:16px}
 .example-strip p{font-size:19px}.example-strip b{font-size:22px}
 .official-model-grid.models-three{grid-template-columns:1fr;gap:24px}
 .models-three .official-model-image{max-width:300px}.tool-locations p{font-size:22px}
 .paint-demo .demo-request p{font-size:23px}.paint-demo .small{font-size:19px}.paint-demo figcaption{font-size:15px}
 .eyebrow{font-size:17px;margin-bottom:18px}
}

/* AとBの操作画面を、章扉に並べる。 */

/* A/B/Cを先に見渡してから、各実演へ進む。 */
.demo-abc-overview{text-align:left}
.demo-abc-overview h2{font-size:clamp(36px,3.6vw,54px);margin:16px 0 28px}
.demo-abc-overview .chapter-number{font-size:20px;letter-spacing:0}
.demo-abc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.demo-abc-cards article{min-width:0}
.demo-abc-cards figure{height:30vh;max-height:270px;min-height:190px;margin:0 0 18px;display:flex;align-items:center;justify-content:center;background:#fffdf7}
.demo-abc-cards img{width:100%;height:100%;object-fit:contain}
.demo-abc-cards h3{font-size:30px;margin:0 0 10px}
.demo-abc-cards h3 span{color:#167191;margin-right:10px}
.demo-abc-cards p{font-size:23px;line-height:1.6;margin:0}
.demo-abc-overview .transition{margin-top:32px}
.photopea-intro img{max-height:52vh;width:100%;object-fit:contain}
@media(max-width:768px){
 .demo-abc-overview h2{font-size:32px}.demo-abc-overview .chapter-number{font-size:17px}
 .demo-abc-cards{grid-template-columns:1fr;gap:28px}
 .demo-abc-cards figure{height:auto;min-height:0;max-height:none}
 .demo-abc-cards img{height:190px}
 .demo-abc-cards h3{font-size:25px}.demo-abc-cards p{font-size:20px}
 .photopea-intro img{max-height:55vh}
}