@font-face { font-family: "Inter"; src: url("../vendor/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("../vendor/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: block; }
@font-face { font-family: "Fraunces"; src: url("../vendor/fonts/fraunces-latin-opsz-normal.woff2") format("woff2"); font-weight: 100 900; font-display: block; }

:root {
  --bg: #0a0c12;
  --bg2: #10141d;
  --panel: #151a26;
  --panel2: #1c2333;
  --line: #2a3347;
  --ink: #f3f1ea;
  --dim: #a3aabb;
  --faint: #626c82;
  --bio: #ffb057;      /* biology / humans / warm */
  --bio2: #ff7a59;
  --ai: #5fd4e8;       /* the machine / cool */
  --ai2: #7c9cff;
  --attn: #c59bff;     /* attention */
  --ok: #6fdc8c;
  --bad: #ff6b6b;
  --gold: #ffd166;
  --sans: "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--ink); font-family: var(--sans); overflow: hidden; }
#viewport { position: fixed; inset: 0; overflow: hidden; background: #000; }
#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden; background: var(--bg);
}
#bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1200px 700px at 18% 0%, rgba(124,156,255,.10), transparent 60%),
    radial-gradient(1100px 800px at 100% 100%, rgba(255,176,87,.07), transparent 60%),
    linear-gradient(180deg, #0b0e15, #080a0f);
}
#scenes, .scene { position: absolute; inset: 0; }
.scene { visibility: hidden; opacity: 0; }
.scene svg.full { position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: visible; }
.scene canvas.full { position: absolute; inset: 0; width: 1920px; height: 1080px; }

/* ---------- caption ---------- */
#caption { position: absolute; left: 110px; top: 70px; width: 1700px; pointer-events: none; z-index: 5; }
#caption .kicker { font: 600 26px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ai); min-height: 26px; }
#caption .headline { font: 480 76px/1.04 var(--serif); font-variation-settings: "opsz" 120; letter-spacing: -.015em; margin: 18px 0 0; max-width: 1500px; text-wrap: balance; }
#caption .sub { font: 400 34px/1.32 var(--sans); color: var(--dim); margin: 20px 0 0; max-width: 1280px; text-wrap: pretty; }
#caption em { font-style: italic; color: var(--gold); }
#caption b, #caption strong { color: var(--ink); font-weight: 600; }
#caption code { font-family: var(--mono); font-size: .9em; color: var(--ai); }
#caption.compact .headline { font-size: 50px; }
#caption.compact .sub { font-size: 28px; margin-top: 12px; max-width: 1700px; }
#caption.compact { top: 44px; }
#caption.quote .headline { font-style: italic; font-size: 70px; max-width: 1650px; }
#caption.quote.big { top: 300px; }
#caption.quote.big .headline { font-size: 112px; line-height: 1.02; }
#caption.quote .headline::before { content: "“"; color: var(--bio); }
#caption.quote .headline::after { content: "”"; color: var(--bio); }
#caption.center { text-align: center; left: 110px; top: 300px; }
#caption.center .headline { font-size: 124px; margin-inline: auto; }
#caption.center .sub { margin-inline: auto; font-size: 40px; }
#caption.center .kicker { color: var(--bio); }

/* ---------- chrome ---------- */
#chrome { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
#part-label { position: absolute; left: 110px; bottom: 30px; font: 500 20px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
#counter { position: absolute; right: 110px; bottom: 30px; font: 500 20px/1 var(--mono); color: var(--faint); }
#progress { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.05); }
#progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ai2), var(--ai)); transition: width .5s ease; }

.navbtn {
  position: fixed; bottom: 14px; z-index: 30; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); background: rgba(20,24,34,.55); color: #cfd5e3;
  font: 400 26px/1 var(--sans); cursor: pointer; opacity: .0; transition: opacity .2s;
}
body:hover .navbtn, .navbtn:focus-visible { opacity: .55; }
.navbtn:hover { opacity: 1 !important; }
#nav-prev { right: 66px; } #nav-next { right: 14px; }
body.interactive .navbtn { opacity: .75; }
body.interactive #counter { right: 230px; }

/* ---------- notes drawer ---------- */
#notes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 38vh; overflow: auto;
  background: rgba(8,10,15,.94); border-top: 1px solid var(--line); padding: 18px 28px 22px;
  font: 400 18px/1.5 var(--sans); color: #dfe3ee; backdrop-filter: blur(8px);
}
#notes .meta { font: 500 13px/1 var(--mono); color: var(--ai); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; display: flex; gap: 24px; }
#notes .meta span:last-child { margin-left: auto; color: var(--gold); }
#notes p { margin: 0 0 .6em; max-width: 110ch; }
#notes .next { color: var(--faint); font-size: 15px; margin-top: 8px; }

/* ---------- overview ---------- */
#overview { position: fixed; inset: 0; z-index: 50; background: rgba(6,8,12,.96); overflow: auto; padding: 40px 6vw; }
#overview h2 { font: 500 30px var(--serif); margin: 0 0 6px; }
#overview .hint { color: var(--faint); font: 400 14px var(--mono); margin-bottom: 24px; }
#overview h3 { font: 600 13px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ai); margin: 26px 0 10px; }
#overview ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
#overview li { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; background: var(--panel); font: 400 16px/1.3 var(--sans); display: flex; gap: 12px; }
#overview li:hover { border-color: var(--ai); }
#overview li.cur { border-color: var(--gold); }
#overview li .n { font: 500 13px var(--mono); color: var(--faint); min-width: 22px; }
#overview li .t { margin-left: auto; font: 400 12px var(--mono); color: var(--faint); white-space: nowrap; }

#help { position: fixed; right: 20px; top: 20px; z-index: 60; background: rgba(8,10,15,.96); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; font: 400 15px/1.7 var(--sans); }
#help kbd { font: 500 13px var(--mono); background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; margin-right: 6px; color: var(--ai); }

/* ---------- presenter window ---------- */
body.presenter { overflow: auto; background: #07090d; }
body.presenter #viewport, body.presenter .navbtn { display: none; }
#presenter { padding: 28px 36px; max-width: 1200px; margin: 0 auto; }
#presenter .top { display: flex; align-items: baseline; gap: 24px; font: 500 16px var(--mono); color: var(--faint); }
#presenter .clock { margin-left: auto; font: 600 44px var(--mono); color: var(--gold); }
#presenter h1 { font: 500 40px/1.1 var(--serif); margin: 12px 0 4px; }
#presenter .step { font: 500 15px var(--mono); color: var(--ai); }
#presenter .notes { font: 400 24px/1.5 var(--sans); margin-top: 18px; color: #e6e9f2; }
#presenter .notes p { margin: 0 0 .7em; }
#presenter .next { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--dim); font: 400 18px var(--sans); }
#presenter .btns { margin-top: 20px; display: flex; gap: 10px; }
#presenter button { font: 500 16px var(--sans); padding: 10px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }

/* ---------- shared scene vocabulary ---------- */
.t-label { font: 500 24px var(--sans); fill: var(--dim); }
.t-small { font: 500 19px var(--mono); fill: var(--faint); letter-spacing: .04em; }
.t-num { font: 600 24px var(--mono); fill: var(--ink); }
.t-big { font: 500 40px var(--serif); fill: var(--ink); }
.glow-bio { filter: drop-shadow(0 0 10px rgba(255,176,87,.9)) drop-shadow(0 0 26px rgba(255,122,89,.55)); }
.glow-ai { filter: drop-shadow(0 0 8px rgba(95,212,232,.9)) drop-shadow(0 0 22px rgba(124,156,255,.5)); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); font: 500 26px var(--sans); color: var(--ink); }
.mono { font-family: var(--mono); }
.abs { position: absolute; }