@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --blue: #075be8; --ink: #102033; --muted: #526477;
  --line: #dce5ed; --cyan: #167f75; --wash: #f4f8fc;
  --header: 76px; --space-section: clamp(64px, 7vw, 112px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header) + 24px); scrollbar-color: #91a7bb #f4f8fc; }
body { margin: 0; color: var(--ink); background: #fff; font-family: 'Manrope', 'Noto Sans Thai', sans-serif; line-height: 1.7; }
::selection { color: #fff; background: var(--blue); }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--blue); text-underline-offset: 5px; }
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
button:hover, a:hover { color: var(--blue); }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 20; background: white; padding: 12px 20px; }
.skip-link:focus { top: 12px; }
.site-header { height: var(--header); position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 32px; padding: 0 clamp(20px, 4vw, 64px); }
.brand { font-size: 28px; font-weight: 800; letter-spacing: -.04em; color: var(--ink); text-decoration: none; line-height: 1; }
.brand span { font-size: 11px; vertical-align: top; margin-left: 2px; }
.course { font-size: 14px; font-weight: 700; letter-spacing: .12em; color: var(--muted); }
#fullscreen { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px; min-height: 44px; font-size: 14px; }
.reading-progress { position: fixed; top: var(--header); height: 2px; width: 100%; z-index: 11; pointer-events: none; }
#progress { height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--blue); }
.flow-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.flow-status { min-height: 3.6em; color: var(--blue); font-weight: 600; margin-block: 16px; }
.agent-node { transition: background-color 180ms ease-out, border-color 180ms ease-out; }
.agent-node.flow-active { background: var(--wash); border-color: var(--blue); }
.nav-link, .source-button { transition: background-color 140ms ease-out, color 140ms ease-out; }
.subnav-link, summary, #fullscreen, dialog .close { transition: color 140ms ease-out, background-color 140ms ease-out; }
.compare tbody td, .compare tbody th { transition: background-color 150ms ease-out; }
@media (hover: hover) {
  .compare tbody tr:hover td, .compare tbody tr:hover th { background-color: #eaf2ff; }
  #fullscreen:hover, dialog .close:hover { background-color: var(--wash); }
}
summary:active, .source-button:active { color: var(--cyan); }
@media (prefers-reduced-motion: reduce) {
  .agent-node, .nav-link, .source-button, .subnav-link, summary, #fullscreen, dialog .close, .compare tbody td, .compare tbody th { transition: none; }
}
.page-shell { max-width: 1540px; margin: auto; display: grid; grid-template-columns: 244px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding: 0 clamp(24px, 4vw, 64px); }
.sidebar { align-self: start; position: sticky; top: calc(var(--header) + 32px); padding-top: 48px; padding-bottom: 32px; max-height: calc(100svh - var(--header) - 32px); overflow-y: auto; }
.sidebar summary { font-weight: 700; font-size: 16px; list-style: none; }
.sidebar summary::-webkit-details-marker { display: none; }
.contents-count { display: block; font-weight: 400; color: var(--muted); font-size: 14px; margin-top: 4px; }
.nav-group { margin: 28px 0 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.nav-link { display: flex; gap: 12px; color: var(--muted); text-decoration: none; font-size: 14px; line-height: 1.6; padding: 10px 12px; margin: 2px 0; border-radius: 6px; min-height: 44px; }
.nav-link span { font-variant-numeric: tabular-nums; color: #6c8094; flex: none; }
.nav-link:hover { background: var(--wash); }
.nav-link[aria-current="location"] { background: #eaf2ff; color: #064ab8; font-weight: 700; }
.nav-link[aria-current="location"] span { color: #064ab8; }
main { min-width: 0; }
.overview { padding: 56px 0 48px; border-bottom: 1px solid var(--line); }
.overview h1 { font-size: clamp(44px, 5.5vw, 76px); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 20px; font-weight: 800; }
.overview h1 span { color: var(--blue); }
.overview > p { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.65; font-weight: 500; }
.overview-meta { display: flex; flex-wrap: wrap; gap: 24px; color: var(--muted); font-size: 14px; margin-top: 28px; }
.presentation-motion-controls { position: fixed; bottom: 12px; right: 12px; z-index: 12; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; max-width: calc(100vw - 24px); background: white; border: 1px solid var(--line); border-radius: 12px; }
.site-footer { padding-bottom: 110px; }
.presentation-motion-controls button { background: var(--wash); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; min-height: 44px; font-size: 14px; }
.presentation-motion-controls button:disabled { cursor: default; color: var(--muted); }
.overview h1 span, .overview-meta span { display: inline-block; }
.lesson { padding: var(--space-section) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.speaker-profile { padding: var(--space-section) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 24px; }
.speaker-name { font-size: clamp(24px, 3vw, 36px); line-height: 1.4; margin: 0 0 12px; overflow-wrap: anywhere; color: var(--blue); }
.speaker-profile > p { max-width: 72ch; }
.speaker-photo { margin: 32px 0 40px; }
.speaker-photo img { display: block; width: 100%; height: auto; }
.speaker-photo figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.speaker-experience { margin: 24px 0 0; }
.speaker-experience > div { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 2.4fr); gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.speaker-experience dt { font-weight: 700; }
.speaker-experience dd { margin: 0; color: var(--muted); line-height: 1.85; }
@media (max-width: 600px) { .speaker-experience > div { grid-template-columns: 1fr; gap: 8px; } }
.lesson-title { font-size: clamp(28px, 3vw, 44px); font-weight: 600; line-height: 1.45; letter-spacing: 0; text-wrap: balance; margin: 0 0 20px; max-width: 28ch; }
.lesson-title em { font-style: normal; color: var(--blue); }
.lead { color: var(--muted); font-size: 19px; line-height: 1.8; max-width: 70ch; margin: 0 0 36px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.card { padding-top: 24px; border-top: 2px solid var(--blue); min-width: 0; }
.num { font-size: 13px; font-weight: 700; color: var(--cyan); overflow-wrap: anywhere; }
.card h3 { font-size: 22px; line-height: 1.6; margin: 12px 0; font-weight: 600; text-wrap: balance; }
.card p { font-size: 17px; color: var(--muted); margin: 0; }
.example { font-size: 14px; color: var(--muted); margin-top: 24px; }
.example b { color: var(--ink); font-weight: 600; }
.takeaway { margin-top: 36px; background: var(--wash); padding: 20px 24px; font-size: 17px; line-height: 1.8; border-radius: 8px; }
.source-button { display: inline-block; margin-left: 12px; padding: 8px 0; min-height: 44px; border: 0; background: none; color: var(--blue); font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contrast { background: var(--wash); padding: 32px; border-radius: 12px; }
.contrast.active { background: var(--ink); color: #fff; }
.contrast small { font-size: 14px; color: var(--muted); }
.contrast.active small { color: #8ce2d8; }
.contrast h3 { font-size: clamp(23px, 2.2vw, 30px); line-height: 1.6; margin: 20px 0; font-weight: 600; }
.contrast p { font-size: 17px; margin: 0; }
.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 48px; }
.era { border-top: 2px solid #bdd1e8; padding: 28px 16px 0 0; position: relative; }
.era::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); position: absolute; top: -6px; left: 0; }
.era small { font-size: 13px; color: var(--muted); }
.era strong { display: block; font-size: 19px; line-height: 1.5; margin-top: 16px; overflow-wrap: anywhere; }
.era p { font-size: 16px; color: var(--muted); margin-bottom: 0; }
.six { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.priority { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.priority b { color: var(--blue); font-size: 18px; font-variant-numeric: tabular-nums; }
.priority strong { font-size: 20px; font-weight: 600; }
.priority p { font-size: 16px; color: var(--muted); margin: 8px 0 0; }
.chat { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.statement { font-size: clamp(21px, 2vw, 28px); line-height: 1.9; }
.statement em { color: var(--blue); font-style: normal; }
.chatbox { border: 1px solid var(--line); border-radius: 12px; padding: 28px; }
.chatbox label { color: var(--muted); font-size: 14px; }
.prompt { background: #edf4ff; border-radius: 8px; padding: 16px; margin: 12px 0 24px; font-size: 16px; }
.answer { font-size: 16px; line-height: 1.9; margin-top: 12px; }
.caption, .mini { font-size: 14px; line-height: 1.8; color: var(--muted); margin-top: 20px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.compare { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.8; text-align: left; }
.compare th { background: var(--wash); padding: 16px 20px; font-weight: 600; }
.compare td { padding: 20px; border-top: 1px solid var(--line); vertical-align: top; }
.compare td:first-child { color: var(--blue); font-weight: 600; }
.visual-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.reference { width: 100%; background: var(--wash); border: 0; border-radius: 12px; padding: 16px; cursor: zoom-in; }
.reference img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: contain; }
.insights { display: grid; gap: 28px; }
.insights h3 { font-size: 21px; margin: 0 0 8px; font-weight: 600; }
.insights p { font-size: 16px; line-height: 1.8; margin: 0; color: var(--muted); }
.speaker-notes { margin-top: 28px; }
.speaker-notes summary { cursor: pointer; color: var(--muted); font-size: 14px; padding: 12px 0; min-height: 44px; }
.speaker-notes[open] summary { color: var(--blue); }
.note-body { padding: 8px 0 0; max-width: 72ch; font-size: 17px; line-height: 1.95; }
.note-body p { margin-top: 0; }
.sources { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 20px; font-size: 14px; }
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 36px 0 48px; color: var(--muted); font-size: 14px; }
.site-footer a { padding: 8px 0; }
dialog { width: min(1100px, 94vw); max-height: 92svh; border: none; border-radius: 12px; padding: 24px; color: var(--ink); }
dialog::backdrop { background: #102033c9; }
dialog .close { display: block; margin: 0 0 16px auto; background: var(--wash); border: none; border-radius: 8px; padding: 10px 20px; min-height: 44px; }
dialog img { display: block; margin: auto; max-width: 100%; max-height: 70svh; object-fit: contain; }
dialog p { text-align: center; font-size: 14px; color: var(--muted); }
@media (max-width: 1100px) {
  .page-shell { grid-template-columns: 204px minmax(0, 1fr); gap: 32px; }
  .cards { gap: 20px; }
  .timeline { grid-template-columns: 1fr; margin-top: 32px; }
  .era { border-top: 0; border-left: 2px solid #bdd1e8; padding: 0 0 28px 24px; }
  .era::before { top: 8px; left: -6px; }
  .era strong { margin: 4px 0; }
  .era p { margin: 4px 0 0; }
  .visual-layout, .chat { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  :root { --header: 64px; --space-section: 56px; }
  .site-header { gap: 16px; padding: 0 20px; }
  .brand { font-size: 25px; }
  .course { font-size: 11px; letter-spacing: .06em; }
  #fullscreen { padding: 8px 10px; font-size: 13px; }
  .page-shell { display: block; padding: 0 24px; }
  .sidebar { position: static; padding: 0; max-height: none; overflow: visible; border-bottom: 1px solid var(--line); }
  .sidebar summary { cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; }
  .sidebar summary::after { content: '+'; font-size: 20px; }
  .sidebar details[open] summary::after { content: '−'; }
  .contents-count { display: none; }
  #contents-list { padding-bottom: 20px; }
  .nav-group:first-child { margin-top: 0; }
  .overview { padding: 40px 0; }
  .overview h1 { font-size: clamp(38px, 10vw, 64px); }
  .overview > p { font-size: 23px; }
  .lesson-title { font-size: 30px; }
  .lesson-title br { display: none; }
  .lead { font-size: 18px; margin-bottom: 28px; }
  .cards, .two, .six { grid-template-columns: 1fr; }
  .card { padding: 20px 0 8px; }
  .card h3 { margin: 8px 0; }
  .example { margin-top: 16px; }
  .takeaway { padding: 20px; }
  .contrast { padding: 24px; }
  .compare { min-width: 620px; font-size: 15px; }
  .compare td, .compare th { padding: 16px; }
  .speaker-notes { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media print {
  .site-header, .sidebar, .reading-progress, .skip-link, .source-button, #image-dialog { display: none; }
  .page-shell { display: block; padding: 0; }
  .lesson { break-inside: avoid; padding: 32px 0; }
  .table-wrap { overflow: visible; }
  .compare { min-width: 0; }
}

/* Original reference content: complete text, natural English wrapping. */
.source-lesson .lesson-title { max-width: 34ch; font-size: clamp(28px, 3vw, 42px); line-height: 1.3; }
.source-subtitle { color: var(--blue); font-size: 24px; font-weight: 600; line-height: 1.5; margin: 24px 0; }
.source-group-title { font-size: 21px; margin: 40px 0 24px; line-height: 1.5; }
.source-columns, .source-priorities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.source-block { border-top: 1px solid var(--line); padding-top: 20px; }
.source-block h3 { font-size: 20px; line-height: 1.5; margin: 0 0 16px; }
.source-block p { color: var(--muted); font-size: 17px; line-height: 1.8; margin: 0; }
.source-lesson ul { padding-left: 22px; margin: 16px 0 0; }
.source-lesson li { margin: 8px 0; font-size: 17px; }
.source-comparison h3 { font-size: 25px; }
.source-comparison p { font-size: 17px; }
.source-comparison h3 + ul { margin-top: 8px; }
.source-timeline { display: grid; gap: 0; }
.source-era { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 36px; padding: 28px 0; border-top: 1px solid var(--line); }
.source-era-date span { color: var(--blue); font-size: 24px; font-weight: 700; }
.source-era-date p { font-size: 16px; color: var(--muted); }
.source-era h3 { margin: 0; font-size: 23px; }
.source-era ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
.source-repeat { margin-top: 32px; max-width: 65ch; }
.original-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; font-size: 14px; }
.original-actions .source-button { margin-left: 0; }
.original-figure { margin: 32px 0 0; }
.original-scroll { overflow: auto; border: 1px solid var(--line); border-radius: 12px; }
.original-image { display: block; padding: 0; border: 0; background: white; width: 100%; cursor: zoom-in; }
.original-image img { display: block; width: 100%; height: auto; }
.original-figure figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; }
.source-lesson[id="12"] .original-image { min-width: 1100px; }
@media (max-width: 1100px) { .source-columns, .source-priorities { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .source-era { grid-template-columns: 1fr; gap: 8px; }
  .source-era-date { display: flex; gap: 20px; align-items: center; }
  .source-era ul { grid-template-columns: 1fr; }
  .source-lesson[id="11"] .original-image { min-width: 640px; }
}

/* Editorial teaching layouts: comparison, chronological spine, model catalogue. */
.subnav-link { display: block; padding: 10px 12px 10px 40px; color: var(--blue); font-size: 13px; line-height: 1.7; min-height: 44px; }
.ui-walkthrough { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); scroll-margin-top: 32px; }
.ui-walkthrough > h3 { font-size: 28px; line-height: 1.6; margin: 0 0 16px; }
.assistant-pair h3 { font-size: 26px; line-height: 1.5; margin: 0 0 16px; }
.assistant-pair h4 { font-size: 18px; line-height: 1.6; margin: 28px 0 12px; }
.assistant-pair ul { padding-left: 24px; }
.subscription-table { min-width: 920px; }
.usecase-facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px 24px; margin-top: 24px; }
.usecase-facts dt { font-weight: 600; }
.usecase-facts dd { margin: 0; color: var(--muted); }
.ecosystem-reference { margin: 32px 0; }
.ecosystem-reference a { display: block; }
.ecosystem-reference img { display: block; width: 100%; height: auto; }
.ecosystem-reference figcaption { margin-top: 16px; color: var(--muted); font-size: 14px; }
@media (max-width: 800px) { .usecase-facts { grid-template-columns: 1fr; gap: 8px; } .usecase-facts dt:not(:first-child) { margin-top: 12px; } }
.feature-matrix { min-width: 860px; table-layout: fixed; }
.feature-matrix caption { text-align: left; padding-bottom: 16px; font-weight: 600; }
.feature-matrix th, .feature-matrix td { width: 25%; vertical-align: top; text-align: left; }
.feature-matrix tbody th { font-weight: 600; }
.plan-group { margin-block: 48px; scroll-margin-top: 100px; }
.plan-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-block: 24px 40px; }
.all-plan-matrix { width: max-content; min-width: 100%; table-layout: fixed; }
.all-plan-matrix th, .all-plan-matrix td { min-width: 180px; max-width: 220px; width: 200px; vertical-align: top; overflow-wrap: anywhere; }
.all-plan-matrix caption { text-align: left; padding: 16px 20px; }
.all-plan-matrix tbody th { position: sticky; left: 0; border-top: 1px solid var(--line); }
.all-plan-matrix tbody tr:first-child td { color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; }
.plan-group .table-wrap:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.feature-matrix tbody tr:first-child td { font-size: 28px; color: var(--blue); font-weight: 700; font-variant-numeric: tabular-nums; }
.agent-diagram { margin: 40px 0; padding: 32px; background: var(--wash); border: 1px solid var(--line); border-radius: 12px; }
.agent-diagram figcaption { font-weight: 600; margin-bottom: 32px; }
.agent-node { padding: 20px; border: 1px solid var(--line); background: white; border-radius: 12px; }
.agent-node b, .agent-node span, .agent-node small { display: block; }
.agent-node span { margin-top: 8px; }
.agent-node small { margin-top: 12px; color: var(--muted); }
.main-node { max-width: 580px; margin-inline: auto; text-align: center; }
.agent-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; position: relative; padding-top: 24px; border-top: 1px solid var(--blue); }
.agent-branches .agent-node { position: relative; }
.agent-branches .agent-node::before { content: ''; position: absolute; height: 24px; width: 1px; background: var(--blue); left: 50%; top: -25px; }
.flow-arrow { text-align: center; color: var(--blue); font-size: 28px; line-height: 1; padding: 12px 0; }
.flow-branch-label { text-align: center; padding: 16px 0; color: var(--muted); }
.approval-node { border-color: var(--cyan); }
.loop-note { text-align: center; color: var(--blue); padding: 16px; border-bottom: 1px solid var(--line); }
@media (max-width: 800px) {
  .agent-diagram { padding: 16px; }
  .agent-branches { grid-template-columns: 1fr; border-top: 0; padding-top: 0; gap: 16px; }
  .agent-branches .agent-node::before { display: none; }
}
.subscription-table caption { text-align: left; font-weight: 600; padding: 0 0 16px; }
.subscription-table th:first-child { width: 18%; }
.subscription-table th:nth-child(2) { width: 13%; }
.subscription-table td { vertical-align: top; }
.subscription-table tbody th, .decision-table tbody th { text-align: left; vertical-align: top; background: var(--wash); }
.plan-price { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.decision-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 0; margin: 32px 0; list-style: none; counter-reset: route; }
.decision-flow li { border-top: 1px solid var(--blue); padding-top: 16px; counter-increment: route; }
.decision-flow li::before { content: counter(route) '. '; color: var(--blue); font-weight: 600; }
.decision-flow span { display: block; margin-top: 8px; color: var(--muted); }
@media (max-width: 800px) { .decision-flow { grid-template-columns: 1fr; } }
.ui-demo { margin-top: 36px; }
.ui-demo > h3 { font-size: 22px; line-height: 1.6; margin: 0 0 20px; }
.ui-demo figure { margin: 0; }
.ui-screenshot { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.ui-screenshot img { display: block; width: 100%; height: auto; }
.ui-demo figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; }
.ui-points { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 28px 0 48px; }
.ui-points dt { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.ui-points dd { margin: 0; color: var(--muted); font-size: 15px; }
.ui-video { aspect-ratio: 16 / 9; background: #102033; border-radius: 12px; overflow: hidden; }
.ui-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-fallback { font-size: 14px; color: var(--muted); }
@media (max-width: 800px) {
  .ui-points { grid-template-columns: 1fr; gap: 20px; }
  .ui-walkthrough > h3 { font-size: 25px; }
}
.ai-definition { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; background: var(--wash); padding: 32px; }
.ai-definition > p { margin: 0; font-size: 25px; line-height: 1.8; }
.ai-definition strong { color: var(--blue); font-weight: 600; }
.ai-definition > div { color: var(--muted); font-size: 17px; max-width: 65ch; }
.ai-components { margin: 0; }
.ai-components > div { display: grid; grid-template-columns: 240px minmax(0,1fr); gap: 32px; padding: 24px 0; border-top: 1px solid var(--line); }
.ai-components dt { font-weight: 600; font-size: 20px; }
.ai-components dd { margin: 0; color: var(--muted); font-size: 17px; max-width: 70ch; }
.ai-pipeline { margin: 0; }
.pipeline-lane { padding: 24px; background: var(--wash); margin-bottom: 16px; }
.pipeline-lane h3 { font-size: 20px; margin: 0 0 20px; }
.pipeline-lane h3 span { color: var(--muted); font-size: 15px; font-weight: 500; margin-left: 12px; }
.pipeline-lane ol { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 32px; padding: 0; margin: 0; list-style: none; }
.pipeline-lane li { position: relative; font-size: 16px; padding: 12px 0; border-top: 1px solid #a8c9ee; }
.pipeline-lane li:not(:last-child)::after { content: '→'; position: absolute; right: -24px; color: var(--blue); }
.ai-pipeline figcaption { color: var(--muted); font-size: 14px; line-height: 1.8; }
@media (max-width: 1100px) {
  .ai-definition { grid-template-columns: 1fr; gap: 20px; }
  .ai-components > div { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 600px) {
  .ai-definition { padding: 24px; }
  .ai-definition > p { font-size: 22px; }
  .pipeline-lane ol { grid-template-columns: 1fr; gap: 20px; }
  .pipeline-lane li:not(:last-child)::after { content: '↓'; right: auto; left: 0; bottom: -24px; }
}
.shift-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; border-top: 1px solid var(--line); }
.shift-grid article { padding: 32px; }
.shift-past { background: var(--wash); }
.shift-now { background: #102e54; color: #fff; }
.shift-date { font-size: 15px; font-weight: 600; margin: 0 0 24px; }
.shift-now .shift-date { color: #a8e8e0; }
.shift-grid h3 { font-size: 27px; font-weight: 600; line-height: 1.6; margin: 0 0 20px; }
.shift-grid blockquote { margin: 0 0 32px; font-size: 19px; line-height: 1.9; }
.shift-grid blockquote + h3 { font-size: 16px; margin-bottom: 8px; }
.shift-grid ul { padding-left: 20px; }
.evolution { margin-top: 40px; }
.evolution-era { display: grid; grid-template-columns: 160px 1fr; gap: 40px; }
.evolution-date { font-size: 16px; font-weight: 600; color: var(--blue); margin: 0; padding-top: 8px; font-variant-numeric: tabular-nums; }
.evolution-copy { position: relative; border-left: 1px solid #a8c9ee; padding: 0 0 40px 36px; }
.evolution-copy::before { content: ''; position: absolute; left: -6px; top: 15px; width: 11px; height: 11px; border-radius: 50%; background: var(--blue); }
.evolution-copy h3 { font-size: 28px; margin: 0; line-height: 1.5; }
.evolution-idea { margin: 8px 0 12px; color: var(--cyan); font-weight: 600; font-size: 19px; }
.evolution-copy ul { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; color: var(--muted); }
.evolution-copy li { margin: 0; }
.evolution-era:last-child .evolution-copy { border-color: transparent; padding-bottom: 8px; }
.replay { min-height: 44px; margin-top: 24px; padding: 8px 20px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.replay:disabled { cursor: default; opacity: .6; }
.product-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.product-pair > article { border-top: 2px solid var(--blue); padding-top: 24px; }
.product-pair h3 { font-size: 28px; margin: 0 0 12px; }
.product-pair .product-definition { color: var(--ink); font-size: 21px; font-weight: 600; }
.product-pair p, .product-pair li { font-size: 17px; color: var(--muted); }
.product-pair ol { padding-left: 24px; }
.product-pair li { margin-bottom: 8px; }
.product-pair h4 { margin: 28px 0 12px; font-size: 18px; }
.prompt-example { background: var(--wash); padding: 20px; margin-top: 24px; }
.prompt-example p { margin: 8px 0 0; }
.work-cycle { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.work-cycle span { flex: 1; font-size: 16px; font-weight: 600; min-width: 140px; }
.work-cycle span:not(:last-child)::after { content: '→'; display: inline-block; margin-left: 16px; color: var(--blue); }
.catalogue-note { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 0 0 32px; max-width: 75ch; }
.model-category { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 2fr); gap: 40px; border-top: 1px solid var(--line); padding: 36px 0; }
.category-intro h3 { font-size: 25px; line-height: 1.45; margin: 0 0 16px; text-wrap: balance; }
.category-intro p { color: var(--muted); font-size: 16px; margin: 0 0 20px; }
.category-intro .modality-flow { color: var(--cyan); font-weight: 600; font-size: 14px; }
.model-list { margin: 0; }
.model-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.model-row:first-child { padding-top: 0; }
.model-row dt { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.model-row dt a { text-decoration-thickness: 1px; }
.access { display: block; font-size: 12px; line-height: 1.7; font-weight: 500; color: var(--muted); margin-top: 8px; }
.model-row dd { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.use-example { font-size: 16px; margin: 24px 0 0; }
.use-example b { color: var(--cyan); display: block; margin-bottom: 8px; }
.licensing { border-top: 1px solid var(--line); font-size: 16px; }
.licensing summary, .case-study summary { cursor: pointer; min-height: 44px; padding: 12px 0; color: var(--blue); }
.licensing p { max-width: 72ch; color: var(--muted); }
.comparison-heading { font-size: 25px; line-height: 1.6; margin: 48px 0 24px; }
.criteria-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 24px; }
.criteria-grid article { border-top: 1px solid var(--line); padding-top: 16px; }
.criteria-grid h3 { font-size: 19px; margin: 0 0 8px; }
.criteria-grid p { font-size: 16px; color: var(--muted); margin: 0; }
.family { display: grid; grid-template-columns: 200px minmax(0,1fr); gap: 40px; border-top: 1px solid var(--line); padding: 32px 0; }
.family-identity h3 { font-size: 24px; margin: 0 0 8px; line-height: 1.5; }
.family-identity p { font-size: 15px; color: var(--muted); margin: 0 0 16px; }
.family-identity a { font-size: 14px; }
.family-body h4 { font-size: 19px; margin: 0 0 8px; }
.family-body p { color: var(--muted); font-size: 16px; margin: 0 0 24px; }
.family-body p:last-child { margin-bottom: 0; }
.case-study { font-size: 15px; }
.case-study[open] { background: var(--wash); padding: 0 20px 20px; }
.case-study p { margin-top: 12px; }
.evaluation-plan { background: var(--wash); padding: 28px; margin-top: 24px; }
.evaluation-plan h3 { font-size: 24px; margin-top: 0; }
.evaluation-plan ol { padding-left: 24px; }
.evaluation-plan li { margin-bottom: 16px; }
.evaluation-plan p { font-size: 16px; color: var(--muted); }
@media (max-width: 1100px) {
  .shift-grid, .product-pair { grid-template-columns: 1fr; }
  .model-category { grid-template-columns: 1fr; gap: 12px; }
  .category-intro h3 { margin-bottom: 8px; }
  .category-intro p { max-width: 65ch; }
  .family { grid-template-columns: 160px minmax(0,1fr); gap: 24px; }
}
@media (max-width: 600px) {
  .shift-grid article { padding: 24px; }
  .shift-grid h3 { font-size: 24px; }
  .evolution-era { grid-template-columns: 1fr; gap: 12px; }
  .evolution-date { padding-left: 28px; }
  .evolution-copy { padding-left: 28px; padding-bottom: 28px; }
  .evolution-copy h3 { font-size: 25px; }
  .evolution-copy ul { display: block; }
  .model-row { grid-template-columns: 1fr; gap: 8px; }
  .criteria-grid, .family { grid-template-columns: 1fr; }
  .family { gap: 24px; }
  .family-identity p { margin-bottom: 8px; }
  .work-cycle { flex-direction: column; }
  .work-cycle span:not(:last-child)::after { content: '↓'; }
  .source-lesson[id="4"] .original-image { min-width: 800px; }
}
@media print {
  .replay { display: none; }
  .original-scroll { overflow: visible; }
  .original-image { min-width: 0 !important; }
}