/* deck.css — dark, calm, 3b1b-inspired. Fixed 1920×1080 canvas scaled to the window. */
:root {
  color-scheme: dark;
  --bg: #0f1115;
  --bg2: #171a21;
  --bg3: #1f232c;
  --line: #2b313b;
  --ink: #ece8df;
  --ink2: #b9bcc3;
  --muted: #858b95;
  --blue: #58c4dd;
  --yellow: #f2c94c;
  --orange: #ec8a4f;
  --teal: #5cd0b3;
  --pink: #e87ba4;
  --violet: #9085e9;
  --serif: "New York", ui-serif, "Iowan Old Style", "Charter", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Inter", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #08090b; overflow: hidden; cursor: default; touch-action: manipulation; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
body.blackout #stage { opacity: 0; }

#stage {
  position: fixed; left: 50%; top: 50%;
  width: 1920px; height: 1080px;
  background: radial-gradient(120% 90% at 50% 40%, #13161c 0%, var(--bg) 70%);
  overflow: hidden; transition: opacity .4s;
}
#progress { position: absolute; left: 0; bottom: 0; height: 3px; background: #2a2f38; transition: width .5s var(--ease); z-index: 10; }

/* ---------- slides ---------- */
.slide {
  position: absolute; inset: 0; padding: 104px 140px;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.slide.active { opacity: 1; visibility: visible; transition: opacity .5s ease; }

/* ---------- steps ---------- */
[data-in], [data-out] { transition: opacity .6s var(--ease), transform .7s var(--ease), filter .6s; }
[data-in]:not(.shown), [data-out]:not(.shown) { opacity: 0; transform: translateY(26px); pointer-events: none; }
[data-fx="fade"]:not(.shown) { transform: none; }
[data-fx="scale"]:not(.shown) { transform: scale(.92); }
[data-fx="left"]:not(.shown) { transform: translateX(-40px); }
[data-dim] { transition: opacity .6s var(--ease); }
.dimmed { opacity: .28 !important; }

/* ---------- type ---------- */
.kicker { font: 600 26px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 26px; }
h1 { font: 400 132px/1.02 var(--serif); letter-spacing: -.01em; }
h2 { font: 400 76px/1.08 var(--serif); letter-spacing: -.005em; }
h3 { font: 600 40px/1.2 var(--sans); }
p, li { font: 400 40px/1.35 var(--sans); color: var(--ink2); }
/* No lonely last words; numbers stay glued to their units via   in the text. */
p, li, blockquote, figcaption, .source, .how, .what, .when { text-wrap: pretty; }
h1, h2, h3, .what { text-wrap: balance; }
.nw { white-space: nowrap; }
.big { font: 400 56px/1.2 var(--serif); color: var(--ink); }
.num { font-family: var(--sans); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -.02em; }
.small { font-size: 28px; color: var(--muted); }
.source { position: absolute; left: 140px; bottom: 44px; font: 400 22px/1.3 var(--sans); color: var(--muted); max-width: 1640px; }
.blue { color: var(--blue); } .yellow { color: var(--yellow); } .orange { color: var(--orange); } .teal { color: var(--teal); }
em { font-style: italic; color: var(--ink); }

/* ---------- title ---------- */
#titel { display: flex; flex-direction: column; justify-content: center; }
#titel h1 { max-width: 1400px; }
#titel .sub { font: 400 52px/1.2 var(--serif); color: var(--ink2); margin-top: 24px; font-style: italic; }
#titel .meta { margin-top: 80px; font-size: 30px; color: var(--muted); }
.poll {
  position: absolute; left: 140px; right: 140px; bottom: 120px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 24px; padding: 44px 56px;
  display: flex; align-items: center; gap: 40px;
}
.poll .hand { font-size: 80px; line-height: 1; }
.poll p { font: 400 48px/1.25 var(--serif); color: var(--ink); }

/* ---------- slack mock ---------- */
.slack {
  position: absolute; left: 140px; top: 96px; width: 1080px; bottom: 96px;
  background: #1a1d21; border: 1px solid #2c2f34; border-radius: 22px; overflow: hidden;
  font-family: Lato, var(--sans); box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.slack .bar { height: 76px; display: flex; align-items: center; gap: 16px; padding: 0 32px; border-bottom: 1px solid #2c2f34; font: 700 30px/1 var(--sans); color: #e8e8e8; }
.slack .bar span { font-weight: 400; color: #a3a3a3; font-size: 26px; }
.slack .msgs { padding: 22px 32px; display: flex; flex-direction: column; gap: 22px; }
.msg { display: grid; grid-template-columns: 64px 1fr; gap: 18px; }
.msg .av { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; font: 700 28px/1 var(--sans); color: #fff; }
.msg .who { font: 700 30px/1.2 var(--sans); color: #f2f2f2; }
.msg .who .tag { font: 600 15px/1 var(--sans); letter-spacing: .06em; color: #b0b0b0; background: #34373c; border-radius: 6px; padding: 4px 8px; margin-left: 10px; vertical-align: 3px; }
.msg .who .t { font: 400 20px/1 var(--sans); color: #8d8d8d; margin-left: 12px; }
.msg .txt { font: 400 31px/1.36 var(--sans); color: #d6d6d6; margin-top: 4px; }
.mention { color: #4fb3f6; background: rgba(29,155,209,.14); border-radius: 5px; padding: 0 4px; }
.av.ben { background: #3b5f7a; } .av.kol { background: #7a5a3b; } .av.bot { background: linear-gradient(135deg, #ff7a59, #c84bff 60%, #4b7bff); }
.side { position: absolute; left: 1290px; right: 110px; top: 96px; bottom: 96px; display: flex; flex-direction: column; justify-content: center; gap: 36px; }
.clock { font: 700 64px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.clock small { display: block; font: 400 26px/1.3 var(--sans); color: var(--muted); margin-top: 10px; }

/* ---------- media ---------- */
.frame { border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.45); }
.frame video, .frame img { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.placeholder {
  border: 3px dashed #3a414c; border-radius: 18px; display: grid; place-items: center; text-align: center;
  color: var(--muted); font: 400 30px/1.4 var(--sans); padding: 40px; background: rgba(255,255,255,.02);
}

/* ---------- cards / stats ---------- */
.stat { display: flex; flex-direction: column; gap: 14px; }
.stat .n { font: 700 120px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--ink); }
.stat .l { font: 400 36px/1.3 var(--sans); color: var(--ink2); max-width: 760px; }
.card { background: var(--bg2); border: 1px solid var(--line); border-radius: 22px; padding: 40px 44px; }

/* ---------- charts ---------- */
svg text { font-family: var(--sans); fill: var(--ink2); }
svg .axis { stroke: #3a414c; stroke-width: 2; fill: none; }
svg .grid { stroke: #232831; stroke-width: 1.5; }
svg .tick { font-size: 24px; fill: var(--muted); }
svg .lbl { font-size: 28px; fill: var(--ink); font-weight: 600; }
svg .lbl2 { font-size: 24px; fill: var(--ink2); }

/* ---------- unverified placeholders (remove class when filled) ---------- */
.todo { color: var(--yellow) !important; outline: 2px dashed rgba(242,201,76,.45); outline-offset: 4px; border-radius: 4px; }

/* staggered reveals: style="--d:1.2s" */
[data-in].shown { transition-delay: var(--d, 0s); }

/* ---------- slack thread grows from the bottom ---------- */
.slack .msgs { position: absolute; left: 32px; right: 32px; top: 76px; bottom: 26px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 0; gap: 0; }
.msg { margin-top: 24px; max-height: 420px; overflow: hidden; flex-shrink: 0; }
.msg[data-in] { transition: opacity .6s var(--ease), transform .7s var(--ease), max-height .8s var(--ease), margin .8s var(--ease); }
.msg[data-in]:not(.shown) { max-height: 0; margin-top: 0; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,9,11,.82); z-index: 5; }

/* ---------- hero numbers ---------- */
.hero { position: absolute; left: 140px; right: 140px; top: 300px; display: flex; flex-direction: column; gap: 30px; }
.hero .n { font: 700 150px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--ink); }
.hero .l { font: 400 46px/1.3 var(--serif); color: var(--ink2); max-width: 1400px; }

/* ---------- next word ---------- */
.narrow, .nextword { position: absolute; left: 140px; right: 140px; top: 170px; }
.trio { display: flex; gap: 40px; margin-top: 70px; }
.trio .card { width: 440px; display: flex; flex-direction: column; gap: 24px; }
.trio .ico { font-size: 96px; line-height: 1; color: var(--blue); }
.sentence { font: 400 72px/1.2 var(--serif); margin: 10px 0 40px; color: var(--ink); }
.slot { display: inline-grid; } .slot > * { grid-area: 1 / 1; }
.slot .w { color: var(--yellow); } .slot .blank { color: var(--muted); }
.bars { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.bars .row { display: grid; grid-template-columns: 300px 1000px 140px; align-items: center; gap: 24px; }
.bars .word { font: 400 40px/1 var(--sans); color: var(--ink); }
.bars .b { height: 38px; width: 0; background: var(--blue); border-radius: 0 6px 6px 0; transition: width 1.1s var(--ease) .2s; }
.bars.shown .b { width: var(--w); }
.bars .row:first-child .b { background: var(--yellow); }
.bars .pct { font: 600 34px/1 var(--sans); color: var(--ink2); font-variant-numeric: tabular-nums; }

/* ---------- METR captions ---------- */
.metr-q { max-width: 1500px; }
.metr-cap { position: absolute; left: 330px; top: 330px; width: 760px; }
.metr-cap .when { font: 600 26px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
.metr-cap .what { font: 400 50px/1.15 var(--serif); color: var(--ink); margin-top: 14px; }
.metr-cap .how { font: 400 32px/1.35 var(--sans); color: var(--ink2); margin-top: 14px; }
.metr-cap > div { transition: opacity .5s var(--ease), transform .6s var(--ease); }

/* ---------- Amri ---------- */
.story { position: absolute; left: 140px; right: 140px; top: 170px; }
ul.plain { list-style: none; margin-top: 50px; display: flex; flex-direction: column; gap: 22px; }
ul.plain li { font-size: 46px; color: var(--ink2); }
ul.plain li::before { content: "—  "; color: var(--blue); }
.vids { position: absolute; left: 140px; right: 140px; top: 190px; display: flex; gap: 40px; align-items: flex-start; }
.vids.one { justify-content: center; }

/* ---------- beyond code ---------- */
.ladder { position: absolute; left: 140px; top: 220px; display: flex; flex-direction: column; gap: 56px; }
.rung { font: 400 76px/1 var(--serif); color: var(--ink); display: flex; align-items: center; gap: 36px; }
.rung .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--blue); }
.rung:nth-child(3) .dot { background: var(--yellow); }
.mathcard { position: absolute; left: 140px; right: 140px; bottom: 120px; }

/* ---------- news ---------- */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 70px; }
.three .card { min-height: 520px; display: flex; flex-direction: column; gap: 26px; }
.three .big3 { font-size: 90px; line-height: 1; color: var(--blue); }
.three h3 { font-size: 44px; }
.three p { font-size: 34px; }

/* ---------- ending ---------- */
.center { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,17,21,.85); }
.end { position: absolute; left: 140px; right: 140px; top: 200px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.end .card { display: flex; flex-direction: column; gap: 18px; min-height: 420px; justify-content: center; }
.end .dates { grid-column: 1 / -1; font: 400 34px/1.4 var(--sans); color: var(--muted); margin-top: 30px; }

.hero .n.serif { font: 400 140px/1 var(--serif); letter-spacing: -.01em; }

/* ---------- price: shrinking bars ---------- */
.shrink { position: absolute; left: 140px; right: 140px; top: 420px; display: flex; flex-direction: column; gap: 44px; }
.srow { display: grid; grid-template-columns: 260px auto 1fr; align-items: center; gap: 36px; }
.srow .sl { font: 400 40px/1 var(--sans); color: var(--ink2); }
.srow .sb { height: 90px; width: 0; background: var(--yellow); border-radius: 0 10px 10px 0; transition: width 1.2s var(--ease) .15s; }
.srow.shown .sb, #pris.active .srow:not([data-in]) .sb { width: var(--w); }
.srow .sv { font: 700 64px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- beyond code ---------- */
.flow { display: flex; align-items: center; gap: 36px; margin-top: 20px; font: 400 72px/1.1 var(--serif); color: var(--ink); }
.flow .arr { color: var(--muted); font-family: var(--sans); }
.three.math { margin-top: 90px; }
.three.math .card { min-height: 0; gap: 18px; }
.three.math h3 { font: 400 46px/1.15 var(--serif); color: var(--ink); }

.phase { position: absolute; left: 140px; right: 140px; top: 170px; }
.end .card p:not(.big):not(.small) { font-size: 32px; }
svg .halo { paint-order: stroke; stroke: #0f1115; stroke-width: 7px; stroke-linejoin: round; }

/* ---------- same prompt, 2019 vs 2026 ---------- */
#dikt .prompt { font-style: italic; margin-top: 10px; }
.poems { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 56px; }
.poem { min-height: 560px; }
.poem .who { font: 600 26px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 28px; }
.poem.new .who { color: var(--yellow); }
.poem .words { font: 400 38px/1.45 var(--serif); color: var(--ink); white-space: pre-line; }
.poem.old .words { font-style: italic; color: var(--ink2); }
.poem .w { opacity: 0; transition: opacity .25s ease; }
.poem.shown .w { opacity: 1; transition-delay: var(--d); }
.chips { display: flex; flex-wrap: wrap; gap: 18px; margin: 36px 0 56px; }
.chips span { font: 500 34px/1 var(--sans); color: var(--ink); background: var(--bg2); border: 1px solid var(--line); border-radius: 40px; padding: 18px 30px; }
.era { font: 600 26px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ---------- reinforcement learning ---------- */
.rlloop { display: flex; align-items: center; gap: 28px; margin-top: 70px; }
.rnode { font: 600 42px/1 var(--sans); color: var(--ink); background: var(--bg2); border: 2px solid var(--yellow); border-radius: 60px; padding: 30px 44px; position: relative; }
.rarr { font: 400 56px/1 var(--sans); color: var(--muted); }
.rnode .pts { position: absolute; right: -22px; top: -26px; font: 700 34px/1 var(--sans); color: #0f1115; background: var(--teal); border-radius: 30px; padding: 10px 16px; animation: pts 1.6s ease-in-out infinite; }
@keyframes pts { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.rback { font: 400 36px/1.3 var(--sans); color: var(--ink2); margin-top: 34px; }
.graders { margin-top: 60px; }
.graders .card { min-height: 0; gap: 14px; }
.graders.four { grid-template-columns: repeat(4, 1fr); gap: 28px; }

/* ---------- full-slide overlay used for quotes and examples ---------- */
.center.over { background: radial-gradient(120% 90% at 50% 40%, #13161c 0%, var(--bg) 70%); padding: 0 140px; }
.quote { max-width: 1400px; }
.quote p { font: italic 400 60px/1.3 var(--serif); color: var(--ink); }
.quote cite { display: block; margin-top: 40px; font: 400 32px/1.3 var(--sans); font-style: normal; color: var(--muted); }

/* ---------- what's next ---------- */
.ahead { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 80px; }
.ahead .card { display: flex; flex-direction: column; gap: 22px; padding: 56px; }
.ahead h3 { font: 400 64px/1.1 var(--serif); color: var(--ink); }
.ahead p { font-size: 38px; }

/* ---------- swapping kicker/heading in place ---------- */
.swap { display: grid; } .swap > span { grid-area: 1 / 1; }
h2 .paren { font-size: .62em; color: var(--muted); }
svg .pulse { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }

/* ---------- RL: better than any example ---------- */
.superhuman { width: 100%; }
.superhuman .three { margin-top: 64px; }
.superhuman .card { min-height: 0; gap: 22px; }
.superhuman h3 { font: 400 46px/1.15 var(--serif); color: var(--ink); }

/* ---------- a really long task ---------- */
.ask { font: italic 400 46px/1.3 var(--serif); color: var(--ink); margin-top: 34px; max-width: 1500px; }
.abloop { margin-top: 56px; gap: 22px; }
.abloop .rnode { font-size: 36px; padding: 26px 36px; }
.rounds { position: absolute; left: 140px; right: 140px; top: 700px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.rd { display: flex; gap: 12px; justify-content: center; padding: 18px; background: var(--bg2); border: 1px solid var(--line); border-radius: 18px;
  opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.rounds.shown .rd { opacity: 1; transform: none; transition-delay: calc(var(--i) * .45s + .2s); }
.rd span { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font: 700 28px/1 var(--sans); color: var(--ink2); background: var(--bg3); }
.rd span.win { background: var(--yellow); color: #1a1a1a; }
.days { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 400 28px/1 var(--sans); color: var(--muted); }
.lt-sum { position: absolute; left: 140px; right: 140px; top: 870px; }
.lt-oai { position: absolute; left: 140px; right: 140px; top: 950px; font-size: 32px; }

/* ---------- research: wall of reactions ---------- */
.qwall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 40px; width: 100%; align-items: start; }
.qwall figure { border-left: 4px solid var(--line); padding-left: 26px; }
.qwall blockquote { font: italic 400 31px/1.36 var(--serif); color: var(--ink); }
.qwall figcaption { margin-top: 16px; font: 400 24px/1.3 var(--sans); color: var(--muted); }

/* ---------- pay more, see more ---------- */
.spend { position: absolute; left: 140px; right: 140px; top: 400px; display: flex; gap: 160px; }
.spend .clock { font-size: 96px; margin-top: 18px; }
.labcharts { position: absolute; left: 140px; right: 140px; top: 262px; display: flex; justify-content: space-between; }
.labcharts figcaption { margin-top: 18px; font: 400 26px/1.3 var(--sans); color: var(--ink2); max-width: 820px; }
.labcharts figcaption b { color: var(--ink); font-weight: 600; }
.frame.light, .frame.light img { background: #fff; }
.frame.light { border-color: #3a414c; }
.rsi { position: absolute; left: 140px; right: 140px; top: 890px; display: flex; flex-direction: column; gap: 12px; }
.rsi .big { font-size: 50px; }

/* ---------- Wait But Why ---------- */
.wbw { position: absolute; left: 140px; top: 270px; width: 960px; height: 683px; }
.wbw .frame { position: absolute; inset: 0; }
.wbwside { position: absolute; left: 1160px; right: 140px; top: 330px; display: grid; }
.wbwside > * { grid-area: 1 / 1; }  /* each line takes the previous one's place */
.wbwside p:not(.big) { font-size: 36px; }

/* ---------- Slack notice in front of the agent scene ---------- */
.notis { position: absolute; left: 0; right: 0; top: 250px; bottom: 0; background: rgba(15, 17, 21, .72); display: flex; justify-content: center; align-items: flex-start; padding-top: 150px; }
.notis-card { width: 1040px; padding: 30px 40px 38px; border-radius: 30px; background: #262b35; border: 1px solid #3a414c; box-shadow: 0 40px 100px rgba(0,0,0,.6); transition: transform .7s var(--ease); }
.notis:not(.shown) .notis-card { transform: translateY(-60px) scale(.97); }
.notis-app { display: flex; align-items: center; gap: 14px; font: 600 24px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.notis-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #3a2f45; color: var(--ink); font-size: 24px; letter-spacing: 0; }
.notis-tid { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.notis-body { display: flex; gap: 28px; margin-top: 26px; }
.notis-av { flex: none; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 18px; background: var(--teal); color: var(--bg); font: 700 44px/1 var(--sans); }
.notis-from { font: 700 36px/1.2 var(--sans); color: var(--ink); }
.notis-body p { margin-top: 8px; font: 400 42px/1.3 var(--sans); color: var(--ink); text-wrap: pretty; }

/* ---------- maths: checking is easy, solving is hard ---------- */
.mpane { position: absolute; left: 140px; right: 140px; top: 330px; bottom: 100px; }
.mq { font: 400 40px/1.3 var(--sans); color: var(--ink2); }
.mpunch { position: absolute; left: 0; right: 0; bottom: 20px; }
.proof { display: flex; flex-direction: column; gap: 16px; margin-top: 44px; max-width: 1240px; }
.pl { display: flex; justify-content: space-between; align-items: center; padding: 22px 34px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
  font: 400 40px/1.2 "SF Mono", Menlo, monospace; color: var(--ink); white-space: pre; }
.pl .mk { font: 700 40px/1 var(--sans); color: var(--teal); opacity: 0; transition: opacity .4s ease; }
.mpane.shown .pl .mk { opacity: 1; transition-delay: calc(var(--i) * .4s + .4s); }
#bevis[data-step="1"] .pl .mk { opacity: 1; transition-delay: calc(var(--i) * .4s + .2s); }
.stairs { position: absolute; left: 0; top: 0; bottom: 40px; width: 1070px; display: flex; align-items: flex-end; gap: 25px; border-bottom: 3px solid var(--line); }
.stair { width: 340px; height: var(--h); display: flex; flex-direction: column; gap: 8px; padding: 26px 30px; background: #18222c; border: 2px solid var(--blue); border-bottom: 0; border-radius: 18px 18px 0 0;
  clip-path: inset(100% 0 0 0); transition: clip-path .9s var(--ease); }
.mpane.shown .stair { clip-path: inset(0 0 0 0); transition-delay: calc(var(--i) * .5s + .2s); }
.stair b { font: 600 38px/1.15 var(--sans); color: var(--ink); }
.stair small { font: 400 28px/1 var(--sans); color: var(--muted); }
.stair.top { background: #2c2610; border-color: var(--yellow); }
.human { position: absolute; left: -24px; right: -40px; bottom: 420px; border-top: 3px dashed var(--muted); z-index: 1; pointer-events: none; }
.human span { position: absolute; left: 24px; bottom: 12px; font: 400 30px/1 var(--sans); color: var(--ink2); }
.mceil { position: absolute; left: 1170px; right: 0; top: 150px; font-size: 54px; }

/* ---------- recursive self-improvement: stages, then Anthropic's 26 % chart ---------- */
.stagewrap { position: absolute; left: 140px; top: 290px; }
.stages g[data-in] { transform: translateY(18px); }
.stages g.shown { transform: none; }
.rsichart { position: absolute; left: 140px; right: 140px; top: 270px; display: flex; gap: 56px; align-items: flex-start; }
.rsichart .frame { flex: none; }
.rsiside { display: flex; flex-direction: column; gap: 22px; padding-top: 40px; }
.rsiside .clock { font-size: 150px; }

/* ---------- Sudoku: solving is hard, checking takes a second ---------- */
.sudoku { position: absolute; left: 0; top: 0; width: 600px; height: 600px; border: 3px solid var(--ink2); border-radius: 10px; background-color: var(--bg2);
  background-image: linear-gradient(to right, var(--ink2) 3px, transparent 3px), linear-gradient(to bottom, var(--ink2) 3px, transparent 3px),
    linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 198px 198px, 198px 198px, 66px 66px, 66px 66px; background-position: -1.5px -1.5px, -1.5px -1.5px, 0 0, 0 0; }
.sgrid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 66px); grid-template-rows: repeat(9, 66px); }
.sgrid span { display: grid; place-items: center; font: 600 40px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
.sgrid.sol span { color: var(--blue); opacity: 0; transform: scale(.5); transition: opacity .3s var(--ease), transform .4s var(--ease); }
.sgrid.sol.shown span { opacity: 1; transform: none; transition-delay: calc(var(--i) * 30ms); }
.chk i { position: absolute; background: rgba(92, 208, 179, .3); opacity: 0; }
.chk i.row { left: 0; width: 594px; top: calc(var(--r) * 66px); height: 66px; }
.chk i.col { top: 0; height: 594px; left: calc(var(--c) * 66px); width: 66px; }
.chk i.box { left: calc(var(--c) * 66px); top: calc(var(--r) * 66px); width: 198px; height: 198px; }
.chk.shown i { animation: sweep .45s ease-out var(--t) both; }
@keyframes sweep { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.okframe { position: absolute; inset: -3px; border: 3px solid var(--teal); border-radius: 10px; opacity: 0; transition: opacity .5s; }
.chk.shown .okframe { opacity: 1; transition-delay: 2.45s; }
.sside { position: absolute; left: 700px; right: 0; top: 0; bottom: 50px; display: flex; flex-direction: column; gap: 44px; }
.sside .big { margin-top: auto; }
.checks { display: flex; flex-direction: column; gap: 22px; }
.checks div { font: 500 44px/1 var(--sans); color: var(--ink); }
.checks span { margin-left: 10px; font-weight: 700; color: var(--teal); }

/* ---------- practice curve: a program scores every attempt ---------- */
.practice { display: block; margin-top: 26px; }
.practice .dot { opacity: 0; transform: scale(.2); transform-box: fill-box; transform-origin: center; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.practice g.shown .dot { opacity: 1; transform: none; transition-delay: var(--d); }
.practice .tag { opacity: 0; transition: opacity .4s var(--ease); }
.practice g.shown .tag { opacity: 1; transition-delay: var(--d); }

/* ---------- Riksdagshuset i 3D: near full screen, loops while people sit down ---------- */
.tour { position: absolute; inset: 0; display: grid; place-items: center; }
.tour .frame { width: 1824px; height: 1026px; }

/* ---------- the labs behind the compute share: one column per segment ---------- */
.labs { position: absolute; left: 140px; top: 690px; width: 1640px; height: 300px; }
.labs-h { font: 400 44px/1 var(--serif); color: var(--ink); }
.labcol { position: absolute; top: 78px; display: flex; flex-direction: column; gap: 26px; padding-left: 20px; border-left: 4px solid var(--c); }
.labcol.us { left: 0; --c: var(--blue); }
.labcol.cn { left: 1230px; --c: var(--orange); }
.labcol.eu { left: 1476px; --c: var(--yellow); }
.labrow { display: flex; gap: 56px; align-items: center; }
.lab { display: inline-flex; align-items: center; gap: 12px; font: 600 28px/1 var(--sans); color: var(--ink); white-space: nowrap;
  opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.labs.shown .lab { opacity: 1; transform: none; transition-delay: var(--d); }
.lab img { width: 34px; height: 34px; }
.labrow.big .lab { font-size: 50px; gap: 18px; }
.labrow.big .lab img { width: 60px; height: 60px; }

/* ---------- the plunging price of thought (Epoch AI chart) ---------- */
.thought .tsub { font: 400 44px/1.2 var(--serif); font-style: italic; color: var(--ink2); margin-top: 16px; }
.thought figure { position: absolute; left: 140px; top: 330px; display: flex; align-items: flex-end; gap: 48px; }
.thought .frame { width: 974px; height: 640px; }
.thought figcaption { width: 560px; font: 400 26px/1.35 var(--sans); color: var(--ink2); }
.thought figcaption b { color: var(--ink); font-weight: 600; }

/* ---------- closing takeaways (last slide) ---------- */
.takeaway { width: 1560px; display: grid; gap: 48px; }
.takeaway p { font: 400 78px/1.2 var(--serif); color: var(--ink); text-wrap: balance; }
.takeaway b { font-weight: 400; color: var(--yellow); }
.thanks { display: grid; gap: 40px; justify-items: center; text-align: center; }
.thanks h1 { font-size: 160px; }
.thanks p { font: italic 400 76px/1.1 var(--serif); color: var(--ink2); }

/* ---------- English edition: longer lines ---------- */
.poem.new .words { font-size: 32px; }

/* ---------- language switch (title slide only) ---------- */
.lang {
  position: absolute; top: 56px; right: 72px; z-index: 5;
  display: inline-flex; gap: 4px; padding: 6px;
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--bg2) 80%, transparent);
  cursor: default;
}
.lang a, .lang span {
  display: inline-block; padding: 12px 24px; border-radius: 999px;
  font: 600 22px/1 var(--sans); letter-spacing: .14em; text-decoration: none; white-space: nowrap;
  color: var(--muted); transition: color .2s, background-color .2s;
}
.lang a { cursor: pointer; }
.lang a:hover, .lang a:focus-visible { color: var(--ink); background: var(--bg3); outline: none; }
.lang span[aria-current] { color: var(--bg); background: var(--blue); }