/* Short visual talk: one screen per spoken beat. Light theme only; loaded after thoughts.css. */
.talk-page{--era-none:#c3ccd4;--era-cells:#2e7a58;--era-animals:#2b5884;--era-dinos:#e09a1b;--era-us:#c8473a;--era-write:#8f2f24;--track:#eef1f4;--soft:#f3f5f7;--talk-max:1160px}
html:has(> body.talk-page){scroll-padding-top:58px;scroll-snap-type:y proximity}
.talk{width:100%}
.beat{position:relative;box-sizing:border-box;min-height:calc(100vh - 58px);min-height:calc(100svh - 58px);width:100%;max-width:var(--talk-max);margin:0 auto;padding:clamp(28px,6vh,72px) 20px;display:grid;align-items:center;justify-items:center;gap:clamp(18px,3.5vw,56px);scroll-snap-align:start}
.beat + .beat{border-top:1px solid var(--line)}
.beat.split{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.beat.split{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}.beat.split .beat-words{justify-self:start}}
.beat-visual{width:100%;display:grid;justify-items:center;min-width:0}
.beat-words{max-width:520px;min-width:0}
.beat-words p{margin:0;font:400 clamp(23px,2.45vw,34px)/1.38 var(--serif);color:var(--ink);text-wrap:pretty}
.beat-words p + p{margin-top:.6em}
html[lang=ar] .beat-words p{font-size:clamp(25px,2.6vw,36px);line-height:1.78}
.beat.solo{grid-template-columns:minmax(0,1fr);text-align:center}
.beat-final .beat-words{max-width:760px;text-align:center;justify-self:center}
.beat-final .beat-words p{font-size:clamp(28px,3.6vw,48px);line-height:1.28;font-weight:500}
.beat-number .beat-words{max-width:620px;text-align:center;justify-self:center}
.beat-number{align-content:center}
.beat-final .beat-words p + p{color:var(--accent);margin-top:.9em}
html[lang=ar] .beat-final .beat-words p{line-height:1.65}

/* Opening */
.talk-hero{text-align:center;grid-template-columns:minmax(0,1fr)!important;border-top:0}
.hero-inner{max-width:760px;display:grid;justify-items:center;gap:18px}
.talk-hero h1{font:600 clamp(42px,6.4vw,80px)/1.04 var(--serif);letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
html[lang=ar] .talk-hero h1{line-height:1.3;letter-spacing:0}
.talk-deck{font:400 clamp(20px,2.3vw,28px)/1.45 var(--serif);color:var(--ink-2)}
.byline{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;font:400 15px/1.5 var(--sans);color:var(--muted)}
.byline a{color:var(--ink);text-decoration:none}
.byline .sep{width:4px;height:4px;border-radius:50%;background:var(--line-2)}
.start{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:999px;padding:11px 20px;font:500 15px/1.2 var(--sans);color:var(--ink);background:#fff;text-decoration:none}
.btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-ink);color:#fff}
.start-hint{font:400 14px/1.5 var(--sans);color:var(--faint)}

/* Chat bubbles */
.chat{width:min(100%,500px);display:grid;gap:14px}
.bubble{margin:0;max-width:88%;padding:14px 18px;border-radius:22px;font:400 clamp(18px,1.9vw,22px)/1.45 var(--sans);overflow-wrap:anywhere}
.bubble.user{justify-self:end;background:var(--accent);color:#fff;border-end-end-radius:6px}
.bubble.ai{justify-self:start;background:var(--soft);color:var(--ink);border-end-start-radius:6px;position:relative}
.badge{justify-self:start;margin:0;font:600 14px/1 var(--sans);color:var(--era-cells);padding:7px 12px;border-radius:999px;background:#e8f3ed}
.typing{display:none}
.typing i{display:inline-block;width:7px;height:7px;margin-inline-end:5px;border-radius:50%;background:var(--faint)}
.bubble.picture{padding:12px;width:min(62%,220px)}
.bubble.picture .mini-clock{width:100%}

/* The big number */
.big{display:grid;justify-items:center;gap:10px;max-width:100%}
.big-number{margin:0;font:600 clamp(40px,8.6vw,124px)/1 var(--sans);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.big-unit{margin:0;font:400 clamp(18px,2vw,24px)/1.3 var(--sans);color:var(--muted)}

/* The day clock */
.clock-fig{margin:0;width:min(100%,470px);display:grid;justify-items:center}
.day-clock{width:100%;height:auto;display:block;overflow:visible}
.day-clock .track,.mini-clock .track{fill:none;stroke:var(--track);stroke-width:26}
.era{fill:none;stroke-width:26}
.era-none{stroke:var(--era-none)}.era-cells{stroke:var(--era-cells)}.era-animals{stroke:var(--era-animals)}
.era-dinos{stroke:var(--era-dinos);stroke-width:7}
.seps line{stroke:#fff;stroke-width:1.6}
.hl{font:500 14px/1 var(--sans);fill:var(--muted);text-anchor:middle}
.ct{font:600 46px/1 var(--sans);fill:var(--ink);text-anchor:middle;font-variant-numeric:tabular-nums}
html[lang=ar] .ct{font-size:42px}
.now{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.now-none{fill:var(--era-none)}.now-cells{fill:var(--era-cells)}.now-animals{fill:var(--era-animals)}
.o2 circle{fill:var(--ink)}
.o2 text{font:600 13px/1 var(--sans);fill:var(--ink-2);text-anchor:middle}
.lens circle{fill:rgba(200,71,58,.08);stroke:var(--era-us);stroke-width:2.2}
.lens line{stroke:var(--era-us);stroke-width:3;stroke-linecap:round}
.lens text{font:700 16px/1 var(--sans);fill:var(--era-us);text-anchor:middle}
.clock-caption{margin-top:10px;font:500 clamp(16px,1.6vw,19px)/1.45 var(--sans);color:var(--ink-2);text-align:center}
.band-note{margin:6px 0 0;font:400 14px/1.4 var(--sans);color:var(--muted)}
.legend{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font:400 14px/1.4 var(--sans);color:var(--muted)}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:7px;vertical-align:-1px}
.sw-none{background:var(--era-none)}.sw-cells{background:var(--era-cells)}.sw-animals{background:var(--era-animals)}.sw-dinos{background:var(--era-dinos)}.sw-us{background:var(--era-us)}.sw-write{background:var(--era-write)}
.mini-clock{display:block;width:100%;height:auto}

/* Zooming into the last minute and the last second */
.zoom{margin:0;width:min(100%,620px);display:grid;gap:8px}
.zoom-upper{margin:0;font:500 14px/1.3 var(--sans);color:var(--muted)}
.zoom-svg{width:100%;height:auto;display:block}
.span-bar,.bar-track{fill:var(--track)}
.span-end{fill:var(--ink)}
.funnel{fill:rgba(43,88,132,.07);stroke:var(--line-2);stroke-width:1}
.bar-us{fill:var(--era-us)}.bar-write{fill:var(--era-write)}
.tick{stroke:var(--line-2);stroke-width:1.5}
.blink-solid{fill:none;stroke:var(--ink);stroke-width:2}
.blink-dash{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:4 4}
.zoom-ends{margin:0;display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:500 14px/1.3 var(--sans);color:var(--muted)}
.zoom-ends strong{font-weight:600;color:var(--ink);text-align:center}
.zoom-key{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;font:500 clamp(15px,1.5vw,17px)/1.4 var(--sans);color:var(--ink-2)}
.blink-key{display:flex;align-items:center;gap:8px}
.eye{width:30px;height:18px;flex:none}
.eye-white{fill:#fff;stroke:var(--ink);stroke-width:1.6}
.eye-iris{fill:var(--ink)}
.eye-lid{fill:var(--ink-2);transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0)}

/* Same fact */
.same{width:min(100%,640px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,.8fr);align-items:center;gap:18px}
.same .bubble{max-width:none}
.eq{font:300 54px/1 var(--sans);color:var(--muted);text-align:center}
.same-clock{margin:0;display:grid;justify-items:center;gap:8px;font:500 15px/1.3 var(--sans);color:var(--ink-2)}
.same-clock .mini-clock{width:min(100%,180px)}
.same-label{grid-column:1 / -1;margin:6px 0 0;text-align:center;font:600 14px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
html[lang=ar] .same-label{letter-spacing:0;text-transform:none;font-size:16px}
@media (max-width:560px){.same{grid-template-columns:minmax(0,1fr)}.same .bubble{justify-self:center}}

/* Evidence */
.evi{width:min(100%,520px);display:grid;gap:24px}
.evi-row{display:grid;gap:8px}
.evi-label{margin:0;font:500 16px/1.4 var(--sans);color:var(--ink-2)}
.evi-track{margin:0;height:30px;border-radius:8px;background:var(--track);overflow:hidden}
.evi-fill{display:block;height:100%;border-radius:8px;background:var(--accent);transform-origin:0 50%}
html[dir=rtl] .evi-fill{transform-origin:100% 50%}
.evi-fill.third{width:33.3%;background:var(--era-none)}
.evi-fill.half{width:50%}
.evi-value{margin:0;font:600 18px/1.3 var(--sans);color:var(--ink)}
.evi-source{margin:0;font:400 14px/1.4 var(--sans)}
.evi-source a{color:var(--muted)}

/* Two kinds of answer */
.gap{width:min(100%,620px);display:grid;gap:16px}
@media (min-width:620px){.gap{grid-template-columns:1fr 1fr}}
.gap-card{border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;align-content:start;gap:10px;background:#fff}
.gap-card h3{margin:6px 0 0;font:600 24px/1.2 var(--serif);color:var(--ink)}
.gap-card p{margin:0;font:400 17px/1.5 var(--sans);color:var(--ink-2)}
.gap-card .gap-mini{font-size:16px;max-width:100%}
.gap-card .mini-clock{width:96px}
.gap-card.understanding{border-color:#bfd0e0;background:#f7fafc}

/* Controls */
.talk-nav{position:fixed;inset-block-end:16px;inset-inline-end:16px;z-index:40;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 6px 22px rgba(29,39,49,.09)}
.talk-nav button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:500 18px/1 var(--sans);color:var(--ink)}
.talk-nav button:hover{background:var(--soft)}
.talk-nav button:disabled{opacity:.35}
.talk-nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.talk-count{min-width:58px;text-align:center;font:500 13px/1 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}

/* After the talk */
.talk-notes{max-width:760px;margin:0 auto;padding:72px 20px 48px;border-top:1px solid var(--line)}
.talk-notes h2{margin:0 0 14px;font:600 26px/1.25 var(--serif);color:var(--ink)}
.talk-notes h2 + p{font:400 17px/1.65 var(--sans);color:var(--ink-2)}
.clock-table{width:100%;margin:22px 0 40px;border-collapse:collapse;font:400 15px/1.4 var(--sans)}
.clock-table th,.clock-table td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
.clock-table thead th{font-weight:600;color:var(--muted);font-size:13px;letter-spacing:.04em}
.clock-table tbody th{font-weight:500;color:var(--ink)}
.clock-table td{color:var(--ink-2);font-variant-numeric:tabular-nums}
.essay-link{margin:0 0 44px}
.essay-link a{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink)}
.essay-link a:hover{border-color:var(--accent)}
.essay-link strong{font:600 20px/1.3 var(--serif)}
.essay-link span:last-child{font:400 14px/1.4 var(--sans);color:var(--muted)}
.talk-sources{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.talk-sources li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.talk-sources .source-number{font:600 13px/1.6 var(--sans);color:var(--faint)}
.talk-sources .source-authors{margin:0;font:400 13px/1.5 var(--sans);color:var(--muted)}
.talk-sources .source-title{font:500 15px/1.45 var(--sans)}
.talk-sources .source-note{margin:4px 0 0;font:400 14px/1.55 var(--sans);color:var(--ink-2)}

/* Motion, only once the script knows which beat is on screen */
.js .beat.pending .grow{transform:scaleX(0)}
.grow{transform-box:fill-box;transform-origin:100% 50%;transition:transform .9s cubic-bezier(.2,.7,.2,1) .2s}
html[dir=rtl] .grow{transform-origin:0 50%}
.evi-fill.grow{transform-origin:0 50%}
html[dir=rtl] .evi-fill.grow{transform-origin:100% 50%}
.js .beat-chat.pending .answer-text,.js .beat-chat.pending .badge{opacity:0}
.js .beat-chat.play .typing{display:inline-flex;position:absolute;inset-inline-start:18px;inset-block-start:50%;transform:translateY(-50%);animation:typing 1s ease both}
.js .beat-chat.play .answer-text{animation:reveal .45s ease 1s both}
.js .beat-chat.play .badge{animation:reveal .45s ease 1.35s both}
.js .beat-second.play .eye-lid{animation:blink .34s ease-in-out 1.1s 1}
@keyframes typing{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
@keyframes reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes blink{0%,100%{transform:scaleY(0)}50%{transform:scaleY(1)}}

/* Full-screen presenting */
html:fullscreen{scroll-padding-top:0}
html:fullscreen .site-header,html:fullscreen .read-progress,html:fullscreen .site-footer,html:fullscreen .talk-notes{display:none}
html:fullscreen .beat{min-height:100vh}

@media (max-width:899px){.beat{padding-block:28px 84px}.beat-words{text-align:start;justify-self:stretch;max-width:none}.beat-final .beat-words,.beat-number .beat-words{text-align:center;justify-self:center;max-width:620px}}
@media (max-width:420px){.clock-fig{width:min(100%,340px)}.hl{font-size:15px}}
@media (prefers-reduced-motion:reduce){.talk-page *,.talk-page *::before,.talk-page *::after{animation:none!important;transition:none!important}html:has(> body.talk-page){scroll-behavior:auto}}
@media print{
  html:has(> body.talk-page){scroll-snap-type:none}
  .talk-page *,.talk-page *::before,.talk-page *::after{transition:none!important;animation:none!important}
  .talk-nav,.start,.start-hint,.read-progress{display:none!important}
  .beat{min-height:0;padding:22px 0;break-inside:avoid;border:0}
  .beat + .beat{border-top:1px solid var(--line)}
  .js .beat.pending .grow{transform:none}
  .js .beat-chat.pending .answer-text,.js .beat-chat.pending .badge{opacity:1}
  .clock-fig{width:300px}
}
