/* Deck layer on top of the Data Nova design system. Uses tokens only: no literal colours, fonts or off-scale spacing.
   Slides are authored at 1920x1080 and scaled to fit the window (see deck.js). */

html, body { margin: 0; height: 100%; }
body { background: var(--dn-surface); overflow: hidden; }
body.all { overflow: auto; height: auto; }

/* ---- presentation frame ------------------------------------------------ */
.frame { position: fixed; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: center center; }
.slide { display: none; width: 1920px; height: 1080px; position: relative; box-sizing: border-box; overflow: hidden;
  padding: 96px 112px; background: var(--dn-surface); color: var(--dn-text); font-family: var(--dn-font-body);
  font-size: var(--dn-text-body-size); line-height: 1.5; }
.slide.active { display: block; }
body.all .frame { position: static; transform: none !important; width: auto; height: auto; }
body.all .slide { display: block; margin: 0 auto 48px; }

/* ---- type -------------------------------------------------------------- */
.eyebrow { font-family: var(--dn-font-mono); font-size: var(--dn-text-label-size); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dn-accent-ink); }

.h1 { font-family: var(--dn-font-heading); font-weight: 700; font-size: var(--dn-text-h1-size); line-height: 1.08;
  color: var(--dn-text-strong); margin: 48px 0 0; max-width: 1500px; }
.h1c { font-family: var(--dn-font-heading); font-weight: 700; font-size: var(--dn-text-h1-compact-size); line-height: 1.1;
  color: var(--dn-text-strong); margin: 0; }
.h2 { font-family: var(--dn-font-heading); font-weight: 700; font-size: var(--dn-text-h2-size); line-height: 1.15;
  color: var(--dn-text-strong); margin: 24px 0 0; max-width: 1600px; }
.h3 { font-family: var(--dn-font-heading); font-weight: 700; font-size: var(--dn-text-h3-size); line-height: 1.15;
  color: var(--dn-text-strong); margin: 0; }
.h4 { font-family: var(--dn-font-heading); font-weight: 600; font-size: var(--dn-text-h4-size); line-height: 1.2;
  color: var(--dn-text-strong); margin: 0; }
.body { font-size: var(--dn-text-body-size); line-height: 1.5; color: var(--dn-text); }
.small { font-size: var(--dn-text-small-size); line-height: 1.4; color: var(--dn-text); }
.muted { color: var(--dn-text-muted); }
.label { font-family: var(--dn-font-mono); font-size: var(--dn-text-label-size); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dn-text-muted); }
.mono { font-family: var(--dn-font-mono); font-size: var(--dn-text-small-size); color: var(--dn-accent-secondary); }
.strong { color: var(--dn-text-strong); font-weight: 600; }
.takeaway { position: absolute; left: 112px; right: 112px; bottom: 136px; padding: 24px 32px; background: var(--das-band); border-radius: 12px;
  font-family: var(--dn-font-heading); font-weight: 600; font-size: var(--dn-slide-size-300); line-height: 1.25; color: var(--dn-text-strong); margin: 0;
  max-width: none; box-sizing: border-box; }
.takeaway.legend { font-family: var(--dn-font-body); font-weight: 400; font-size: var(--dn-text-small-size); color: var(--dn-text); }
.ink-ok { color: var(--dn-success-ink); }
.ink-warn { color: var(--dn-warning-ink); }
.ink-bad { color: var(--dn-error-ink); }
.ink-accent { color: var(--dn-accent-ink); }
.ink-violet { color: var(--dn-accent-secondary); }

/* ---- furniture --------------------------------------------------------- */
.credit { position: absolute; left: 112px; bottom: 64px; font-family: var(--dn-font-mono); font-size: var(--dn-text-label-size);
  color: var(--dn-text-strong); }
.credit span { opacity: 0.65; }
.pageno { position: absolute; right: 112px; bottom: 64px; font-family: var(--dn-font-mono); font-size: var(--dn-text-label-size);
  color: var(--dn-text-muted); }
.mark { width: var(--dn-brand-mark-size); height: var(--dn-brand-mark-size); border-radius: var(--dn-radius-full);
  border: 2px solid var(--dn-border-strong); display: block; }
.rule { width: 64px; height: 2px; background: var(--dn-accent); flex: none; }

/* ---- layout helpers ---------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.g8 { gap: 8px; } .g16 { gap: 16px; } .g24 { gap: 24px; } .g32 { gap: 32px; } .g48 { gap: 48px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; } .mt48 { margin-top: 48px; } .mt64 { margin-top: 64px; }
.center-v { box-sizing: border-box; height: 100%; display: flex; flex-direction: column; justify-content: center; }

.card { background: var(--dn-surface-raised); border: 1px solid var(--dn-border); border-radius: 12px;
  box-shadow: var(--dn-shadow-card); padding: 32px; box-sizing: border-box; }
.card.flat { box-shadow: none; }
.card.roomy { padding: 40px 32px; }
.card.snug { padding: 24px 32px; }
.card.navy { background: var(--dn-surface); border-color: var(--dn-border); }

.icon { width: var(--dn-icon-lg); height: var(--dn-icon-lg); flex: none; }
.icon-xl { width: var(--dn-icon-xl); height: var(--dn-icon-xl); flex: none; }
.item { display: flex; gap: 24px; align-items: flex-start; }
.item .icon { margin-top: 4px; }
.list { display: flex; flex-direction: column; gap: 16px; }

/* ---- table ------------------------------------------------------------- */
table.cmp { width: 100%; border-collapse: collapse; margin-top: 48px; }
table.cmp th { font-family: var(--dn-font-mono); font-size: var(--dn-text-label-size); letter-spacing: 0.08em; text-transform: uppercase;
  text-align: left; color: var(--dn-text-muted); padding: 16px 24px; border-bottom: 2px solid var(--dn-border-strong); }
table.cmp td { font-size: var(--dn-text-small-size); padding: 32px 24px; border-bottom: 1px solid var(--dn-border); color: var(--dn-text);
  vertical-align: middle; }
table.cmp.tight td { padding: 20px 24px; }
table.cmp td:first-child { font-family: var(--dn-font-heading); font-weight: 600; color: var(--dn-text-strong); width: 440px; }

/* ---- map --------------------------------------------------------------- */
.plot { position: relative; width: 1696px; height: 648px; margin-top: 24px; }
.plot .box { position: absolute; left: 208px; top: 0; right: 0; bottom: 64px; border: 1px solid var(--dn-border-strong);
  border-radius: 12px; background: var(--dn-surface-raised); }
.plot .vline { position: absolute; left: 952px; top: 0; bottom: 64px; width: 1px; background: var(--dn-border-input); }
.plot .hline { position: absolute; left: 208px; right: 0; top: 292px; height: 1px; background: var(--dn-border-input); }
.plot .ax { position: absolute; font-family: var(--dn-font-mono); font-size: var(--dn-slide-size-200); font-weight: 700; color: var(--dn-text); }
.pt { position: absolute; display: flex; align-items: center; gap: 24px; font-family: var(--dn-font-heading); font-weight: 600;
  font-size: var(--dn-text-h4-size); color: var(--dn-text-strong); white-space: nowrap; }
.pt b { width: 72px; height: 72px; border-radius: var(--dn-radius-full); display: flex; align-items: center; justify-content: center;
  background: var(--dn-surface-raised); color: var(--dn-text-strong); border: 2px solid var(--dn-text-strong); font-family: var(--dn-font-heading); font-size: var(--dn-text-small-size); }
.pt.hot b { border-color: var(--dn-highlight-ink); color: var(--dn-text-strong); }

/* ---- speaker notes (not part of the slide) ------------------------------ */
#notes { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; max-height: 38vh; overflow: auto;
  padding: 24px 48px; background: var(--dn-surface-subtle); color: var(--dn-text); border-top: 1px solid var(--dn-border-strong);
  font-family: var(--dn-font-body); font-size: 20px; line-height: 1.5; }
#notes.on { display: block; }
#hint { position: fixed; right: 24px; top: 16px; z-index: 10; font-family: var(--dn-font-mono); font-size: 14px; color: var(--dn-text-muted);
  opacity: 0; transition: opacity var(--dn-duration-base, 180ms); }
body:hover #hint { opacity: 1; }
body.all #hint, body.all #notes { display: none; }
@media print {
  body { overflow: visible; }
  .frame { position: static; transform: none !important; }
  .slide { display: block; page-break-after: always; margin: 0; }
  #notes, #hint { display: none !important; }
  @page { size: 1920px 1080px; margin: 0; }
}

/* ---- additions: examples, badge, vocab table, map ----------------------------------------------------- */
.nowrap { white-space: nowrap; }
.ex { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.ex .stack { min-width: 0; }
.shot { flex: 1; min-height: 360px; border: 2px dashed var(--dn-border-strong); border-radius: 12px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; background: var(--dn-surface-subtle); }
.card.stretch { display: flex; flex-direction: column; }
.split { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--dn-separator); }
.trap { padding-bottom: 0; }
table.vocab td:first-child { width: 260px; }
table.vocab td:nth-child(2) { width: 180px; }
table.vocab td:nth-child(3) { width: 560px; }
table.cmp.vocab td { padding: 12px 24px; }

/* ---- section dividers: giant numeral, title overlaid ---------------------------------------------------- */
.sect { position: relative; height: 100%; }
/* placed with top, not transform, so the slide-in animation (which animates transform) cannot move it */
.sect-num { position: absolute; left: -12px; top: calc(50% - 377px); font-family: var(--dn-font-heading); font-weight: 700;
  font-size: 640px; line-height: 0.8; letter-spacing: -0.04em; color: var(--dn-text-muted); }
/* title and subtitle share one panel in the page colour, which cuts the numeral behind them */
.sect-title { position: absolute; left: 488px; top: 50%; transform: translateY(44%); background: var(--dn-surface); padding: 24px 32px 24px 32px; max-width: 1160px; }
.sect-sub { margin-top: 24px; }

/* title slide: the three chapters as a quiet row above the credit line */
.agenda { position: absolute; left: 112px; right: 112px; bottom: 136px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.agenda .ag { border-top: 1px solid var(--dn-border-strong); padding-top: 16px; }
.agenda .ag .h4 { margin-top: 8px; }

/* closing slide: the speaker and where to find them */
.bye { height: 100%; display: flex; align-items: center; gap: 96px; padding-bottom: 64px; box-sizing: border-box; }
.portrait { width: 520px; height: 520px; flex: none; object-fit: cover; border-radius: var(--dn-radius-full); border: 2px solid var(--dn-border-strong); display: block; }
.bye-text { flex: 1; min-width: 0; }
.links { margin-top: 48px; border-top: 1px solid var(--dn-separator-strong); }
.link { display: flex; align-items: baseline; gap: 32px; padding: 20px 0; border-bottom: 1px solid var(--dn-separator-strong); }
.link .label { width: 200px; flex: none; }
.link .mono-url { font-family: var(--dn-font-mono); font-size: var(--dn-text-small-size); color: var(--dn-text-strong); }

/* plain typographic lists: a hairline between items, no boxes or icons */
.lines { margin-top: 16px; border-top: 1px solid var(--dn-separator-strong); }
.line { padding: 24px 0; border-bottom: 1px solid var(--dn-separator-strong); }

/* ---- Data Alchemy: rose-gold openers, ink cards ---------------------------------------------------------- */
.slide.opener { background: var(--das-rose-gold); }
.sect-title { background: var(--das-rose-gold); }
.sect-num { color: var(--dn-accent); }
.inkcard { background: var(--das-ink); border-color: var(--das-ink); box-shadow: none;
  --dn-text-strong: var(--das-parchment); --dn-text: var(--das-parchment); --dn-text-muted: var(--dn-bookend-muted); }
.rose { color: var(--das-rose-gold); }
.opener .label { color: var(--dn-text-muted); }
.plot .vline, .plot .hline { background: var(--dn-text-muted); }

/* code panels */
.codecard { display: flex; flex-direction: column; padding: 24px 32px; }
.code { margin: 16px 0 0; font-family: var(--dn-font-mono); font-size: var(--dn-slide-size-100); line-height: 1.45; color: var(--dn-text-strong);
  white-space: pre; overflow: hidden; }
.code mark { background: var(--das-gold-tint-15); color: var(--dn-text-strong); padding: 0 4px; border-radius: 4px; }

/* agenda: three chapters, numbered, hairline between */
.agenda-list { margin-top: 48px; border-top: 1px solid var(--dn-border-strong); }
.chap { display: flex; align-items: baseline; gap: 48px; padding: 28px 0; border-bottom: 1px solid var(--dn-border-strong); }
.chap-num { font-family: var(--dn-font-heading); font-weight: 700; font-size: var(--dn-slide-size-400); color: var(--dn-accent); width: 120px; flex: none; }
/* recordings in the example slot */
.clip { width: 100%; flex: 1; min-height: 0; border-radius: 12px; background: var(--das-ink); object-fit: contain; display: block; }
.ex.wide { grid-template-columns: 2fr 1fr; gap: 32px; height: 616px; }
.ex.wide { grid-template-rows: minmax(0, 1fr); }
.ex.wide .stack { min-height: 0; height: 100%; }
.ex.wide .clip { height: 100%; flex: none; }
/* divider panel anchored at the bottom, so a two-line title grows upward instead of off the slide */
.sect .sect-title { top: auto; bottom: 198px; transform: none; }
/* agenda with four chapters */
.agenda-list { margin-top: 32px; }
.chap { padding: 20px 0; }

/* who does what: step, agent, you */
table.cmp.who th { font-size: var(--dn-text-label-size); }
table.cmp.who th .icon { width: var(--dn-icon-lg); height: var(--dn-icon-lg); }
table.cmp.who td { padding: 20px 24px; }
table.cmp.who td:first-child { width: 240px; }
table.cmp.who td:last-child { color: var(--dn-accent-ink); }

/* ---- four-up grid and flow diagram (concepts and roles) ----------------- */
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: stretch; }
.grid4 > .card { padding: 40px 32px; }
.flow { display: flex; align-items: stretch; gap: 12px; }
.fnode { flex: 1; background: var(--dn-surface-raised); border: 1px solid var(--dn-border); border-radius: 12px; padding: 20px 20px;
  box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.fnode.you { border: 2px solid var(--dn-text-strong); }
.fnode.gate { background: var(--das-band); border-color: var(--dn-border-strong); }
.farrow { display: flex; align-items: center; flex: none; }
table.cmp.vtight td { padding: 12px 24px; }
table.cmp.vtight th { padding: 12px 24px; }
table.cmp.vtight td:first-child { width: 280px; }
/* agenda with five or six chapters */
.agenda-list.dense { margin-top: 24px; }
.agenda-list.dense .chap { padding: 12px 0; gap: 40px; }
.agenda-list.dense .h3 { font-size: var(--dn-text-h4-size); }
.agenda-list.dense .chap-num { font-size: var(--dn-slide-size-300); width: 96px; }
.hold { visibility: hidden; }
/* a column added on this step of a build fades in when its slide opens */
.slide.active .fresh { animation: dn-reveal 0.6s ease-out both; }
@keyframes dn-reveal { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .slide.active .fresh { animation: none; } }
/* morph between slides: the moving names travel, the rest of the new slide fades in behind them */
.slide.morphed .morph-fade { animation: dn-fade 0.5s 0.35s ease-out both; }
.slide.morphed table.cmp td:not(.fresh), .slide.morphed table.cmp th:not(.fresh) { animation: dn-rule 0.6s 0.25s ease-out both; }
.slide.morphed .fresh { animation: dn-reveal 0.6s 0.7s ease-out both; }
@keyframes dn-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dn-rule { from { border-color: transparent; } }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.tile { background: var(--dn-surface-raised); border: 1px solid var(--dn-border); border-radius: 12px; box-shadow: var(--dn-shadow-card);
  height: 300px; padding: 32px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
.tile .name { font-family: var(--dn-font-heading); font-weight: 700; font-size: var(--dn-text-h3-size); color: var(--dn-text-strong); align-self: flex-start; }
.blkname { display: inline-block; }

/* ---- transitions: every slide settles in; builds play themselves; reduced motion gets plain cuts ---- */
@keyframes dn-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dn-numeral { from { opacity: 0; transform: translateX(160px); } to { opacity: 1; transform: none; } }
.slide.active .eyebrow { animation: dn-rise 0.45s ease-out both; }
.slide.active .h2 { animation: dn-rise 0.5s 0.06s ease-out both; }
.slide.active .sect-num { animation: dn-numeral 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.slide.active .sect-title { animation: dn-rise 0.6s 0.35s ease-out both; }
.slide.active .stagger > * { animation: dn-rise 0.55s ease-out both; animation-delay: calc(0.25s + var(--i, 0) * 0.12s); }
.slide.active .seq > * { animation: dn-rise 0.45s ease-out both; animation-delay: calc(0.3s + var(--i, 0) * 0.2s); }
.slide.active .seq.later > *, .slide.active .stagger.later > * { animation-delay: calc(1.8s + var(--i, 0) * 0.2s); }
.slide.active .later:not(.seq):not(.stagger) { animation: dn-rise 0.5s 1.6s ease-out both; }
.slide.active .late { animation: dn-rise 0.6s 1.2s ease-out both; }
.slide.active table.autoplay thead { animation: dn-rise 0.4s 0.2s ease-out both; }
.slide.active table.autoplay tbody td { animation: dn-rise 0.45s ease-out both; animation-delay: calc(0.45s + var(--r, 0) * 0.42s + var(--c, 0) * 0.14s); }
.slide.active .ex > .card { animation: dn-rise 0.6s 0.35s ease-out both; }
.slide.active .takeaway { animation: dn-rise 0.6s 1.6s ease-out both; }
/* a morph carries its own motion: nothing on that slide rises underneath it */
.slide.active.morphed .stagger > *, .slide.active.morphed .eyebrow, .slide.active.morphed .h2:not(.fresh),
.slide.active.morphed .sect-num, .slide.active.morphed .sect-title { animation: none; }
.slide.active .h2.fresh { animation: dn-reveal 0.6s 0.55s ease-out both; }
@media (prefers-reduced-motion: reduce) { .slide.active * { animation: none !important; transition: none !important; } }

/* ---- image viewer: a tall render at full width, scrolling in its frame, expandable ------------------- */
.viewer { position: relative; height: 100%; border: 1px solid var(--dn-border); border-radius: 12px; overflow: hidden;
  background: var(--dn-surface-raised); }
.viewer-scroll { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; outline: none; }
.viewer-scroll img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.viewer-bar { position: absolute; top: 16px; right: 24px; display: flex; gap: 12px; }
.vbtn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--dn-border);
  background: var(--dn-surface-raised); color: var(--dn-text); font: 500 18px/1 var(--dn-font-body);
  text-decoration: none; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.vbtn:hover { border-color: var(--dn-border-strong); }
.icon-sm { width: 18px; height: 18px; flex: none; }
.lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(20,14,8,.88); overflow-y: auto; overscroll-behavior: contain;
  display: none; cursor: zoom-out; }
.lightbox.on { display: block; animation: dn-reveal .3s ease-out both; }
.lightbox img { display: block; width: min(92vw, 1080px); height: auto; margin: 4vh auto; border-radius: 8px; cursor: auto; }
.lightbox .vbtn { position: fixed; top: 20px; right: 24px; }
body.all .viewer-bar { display: none; }
/* example card beside a video or render: fixed height, so the text is a step smaller and the splits tighter */
.ex.wide .card .body { font-size: 32px; line-height: 1.35 !important; }
.ex.wide .card .split { margin-top: 20px; padding-top: 20px; }

/* ---- overview (A): every slide as a small tile; click one to go there ------------------------------- */
body.grid { overflow: auto; height: auto; background: var(--dn-surface-subtle); }
body.grid .frame { position: static; transform: none !important; width: auto; height: auto; padding: 32px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 24px; counter-reset: tile; }
body.grid .slide { display: block; zoom: 0.15; cursor: pointer; border-radius: 48px; counter-increment: tile;
  outline: 8px solid var(--dn-border); transition: outline-color .15s; }
body.grid .slide:hover { outline: 16px solid var(--dn-border-strong); }
body.grid .slide.current { outline: 24px solid var(--dn-accent); }
body.grid .slide * { animation: none !important; transition: none !important; pointer-events: none; }
body.grid #hint, body.grid #notes, body.grid .viewer-bar { display: none; }

/* ---- black screen (B) ------------------------------------------------------------------------------- */
#black { display: none; position: fixed; inset: 0; z-index: 3000; background: #000; cursor: none; }
body.black #black { display: block; }

/* ---- presenter view (S opens it): current slide, next slide, notes, timer ---------------------------- */
body.presenter { background: var(--das-ink); }
body.presenter .frame { left: 24px; top: 72px; transform-origin: top left; border-radius: 8px; overflow: hidden; }
body.presenter #black, body.presenter #hint, body.presenter #notes { display: none !important; }
#pbar { position: fixed; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; gap: 32px; padding: 0 24px;
  font-family: var(--dn-font-mono); font-size: 22px; color: var(--dn-surface); }
#ptimer { font: inherit; color: inherit; background: none; border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 4px 12px; cursor: pointer; }
#pclock { opacity: .7; }
#pflag { display: none; margin-left: auto; padding: 4px 12px; border-radius: 6px; background: var(--dn-accent); color: var(--dn-surface); }
body.presenter.black #pflag { display: inline-block; }
#pnext { position: fixed; top: 72px; }
#pnext .plabel, #pnotes::before { font-family: var(--dn-font-mono); font-size: 14px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dn-surface); opacity: .6; display: block; height: 28px; }
#pnext .slide { display: block; border-radius: 48px; }
#pnext .slide * { animation: none !important; transition: none !important; }
#pnotes { position: fixed; bottom: 24px; overflow: auto; color: var(--dn-surface); font-size: 24px; line-height: 1.5; white-space: pre-wrap; }
#pnotes::before { content: "Notes"; }
/* about me: website and LinkedIn at body size, each with its icon */
.contact { display: flex; gap: 48px; flex-wrap: wrap; }
.contact .body { display: inline-flex; align-items: center; gap: 16px; font-weight: 500; }
#toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 3100; padding: 12px 20px; border-radius: 8px;
  background: var(--das-ink); color: var(--dn-surface); font-family: var(--dn-font-body); font-size: 18px; opacity: 0; pointer-events: none;
  transition: opacity .2s; }
#toast.on { opacity: 1; }
#pkeys { position: fixed; left: 24px; display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--dn-surface); font-size: 17px; opacity: .8; }
#pkeys span { display: inline-flex; align-items: center; gap: 8px; }
#pkeys kbd { font-family: var(--dn-font-mono); font-size: 15px; min-width: 28px; text-align: center; padding: 3px 8px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.35); border-bottom-width: 2px; }
#pkeys kbd + kbd { margin-left: -2px; }
/* fullscreen is presenting: no key hint (the overview and presenter view list the keys) */
:fullscreen #hint { display: none !important; }
.bye .lines.compact .line { padding: 16px 0; }
/* chat vs agent: chat as a vertical line, the agent as a loop on a 3x3 grid (nodes at the corners, arrows between) */
.farrow.col { justify-content: center; }
.loop { display: grid; grid-template-columns: 1fr 56px 1fr; grid-template-rows: auto 48px auto;
  grid-template-areas: "a ab b" "da . bc" "d cd c"; }
.lnode { background: var(--dn-surface-raised); color: var(--dn-text); border-radius: 12px; padding: 20px; }
.larr { display: flex; align-items: center; justify-content: center; }
.inkcard .larr .muted { color: var(--dn-surface); opacity: .7; }
.inkcard .lnode { --dn-text-strong: var(--das-ink); --dn-text: var(--das-ink); --dn-text-muted: var(--das-ink-muted); color: var(--dn-text); }
.lnode { padding: 14px 18px; }
.chatline .fnode { padding: 14px 18px; }
.chatline .farrow { height: 28px; }
.chatline .farrow svg, .larr svg { width: 22px; height: 22px; }
.loop { grid-template-columns: 1fr 44px 1fr; grid-template-rows: auto 36px auto; }
.chatline .cap, .lnode .cap { font-size: 22px; line-height: 1.3; margin-top: 4px; }
.chatline .fnode, .lnode { padding: 12px 18px; }
/* phase cards: the step count as a figure */
.stepcount { text-align: right; flex: none; }
.stepcount .h2 { margin: 0; line-height: 1; }
/* roles: one colour and icon each, the same on the four-roles slide and in the flow */
.r-you { background: var(--dn-accent-ink); color: var(--das-parchment); }
.r-op { background: var(--das-ink); color: var(--das-parchment); }
.r-build { background: var(--dn-violet); color: var(--das-parchment); }
.r-orch { background: var(--dn-success-ink); color: var(--das-parchment); }
.r-gate { background: var(--das-rose-gold); color: var(--das-ink); }
.rbadge { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.rbadge svg { width: 44px; height: 44px; }
.inkcard .rbadge.r-you { background: var(--das-rose-gold); color: var(--das-ink); }
.rchip { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 14px; border-radius: 999px;
  font-family: var(--dn-font-mono); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; width: fit-content; }
.rchip svg { width: 18px; height: 18px; }
.rnode { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; }
.r-build { background: var(--dn-violet-tint-15); color: var(--dn-accent-secondary); }
/* the report flow as a grid, so the gate's loop back to the operator can be drawn under the two boxes it joins */
.flowgrid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr auto 1fr; column-gap: 12px; }
.flowgrid > .fnode, .flowgrid > .farrow { grid-row: 1; }
.backloop { grid-row: 2; grid-column: 3 / 6; position: relative; height: 96px; }
.bl-line { position: absolute; top: 0; left: calc(25% - 14px); right: calc(25% - 14px); height: 40px;
  border: 2px solid var(--dn-text-muted); border-top: none; border-radius: 0 0 12px 12px; }
.bl-line::before { content: ""; position: absolute; left: -9px; top: 0; transform: translateY(-100%);
  border: 8px solid transparent; border-bottom: 12px solid var(--dn-text-muted); border-top: none; }
.bl-label { position: absolute; top: 52px; left: 0; right: 0; text-align: center; font-size: 22px; color: var(--dn-text-muted); }
.rnode { min-height: 170px; }
.rchip { font-size: 20px; padding: 6px 14px; }
.rchip svg { width: 20px; height: 20px; }
/* who signs the gates: both cards one height, so the human gate card does not change size when delegation arrives */
.gatepair > .card { height: 340px; }
/* the brief: four build tiles, the done-means card, and the rest of the brief as chips */
.btiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.btile { display: flex; gap: 20px; align-items: flex-start; background: var(--dn-surface-raised); border: 1px solid var(--dn-border);
  border-radius: 12px; padding: 22px 24px; }
.btile .cap, .card .cap { font-size: 22px; line-height: 1.35; margin-top: 4px; }
.bchip { display: inline-block; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--dn-border-strong); font-size: 20px; color: var(--dn-text); }
.inkcard .cap { color: var(--dn-text-muted); }
.bfig { margin: 0; font-size: 64px; line-height: 1.05; }
.btile svg { flex: none; }
.bchip { font-size: 20px; padding: 4px 16px; }
/* what it changed: model names as chips, and the empty state when there is no report */
.mchip { font-family: var(--dn-font-mono); font-size: 20px; padding: 4px 12px; border-radius: 8px; background: var(--dn-surface-subtle); border: 1px solid var(--dn-border); }
.mchip.more { background: none; color: var(--dn-text-muted); }
.shot.live { border-style: solid; border-width: 1px; border-color: var(--dn-border); background: var(--dn-surface-raised); height: 100%; }
/* profile (about me, thank you): a ringed portrait, facts with icons */
.portrait-ring { flex: none; padding: 12px; border-radius: var(--dn-radius-full); background: var(--das-rose-gold); }
.opener .portrait-ring { background: var(--das-parchment); }
.portrait-ring .portrait { width: 480px; height: 480px; border: none; }
.facts { display: flex; flex-direction: column; gap: 20px; }
.fact { display: flex; align-items: center; gap: 24px; }
.fact svg { flex: none; }
.tick { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; }
/* three prompts: the prompt as text on a light panel */
.prompt { margin-top: 20px; padding: 20px 22px; border-radius: 12px; background: var(--dn-surface-subtle); font-size: 22px; line-height: 1.45; color: var(--dn-text); flex: 1; }
/* publishing the MCP report: a tighter card */
.mcpcard { padding: 32px 28px; }
.mcpcard .cap { font-size: 20px; }
.snode .cap { font-size: 20px; line-height: 1.3; margin-top: 4px; }
/* a portrait render shown whole inside the viewer */
.viewer.fit .viewer-scroll { display: flex; justify-content: center; background: var(--dn-surface-subtle); }
.viewer.fit .viewer-scroll img { width: auto; height: 100%; }
#notes { white-space: pre-wrap; }
/* mission control slide: four light rows */
.mcrow { padding: 16px 0; border-bottom: 1px solid var(--dn-separator); }
.mcrow .cap { font-size: 22px; line-height: 1.35; margin-top: 4px; }
/* code shows what you type: no ligatures (>= stays two characters) */
.code, pre.code { font-variant-ligatures: none; font-feature-settings: "calt" 0, "liga" 0; }
/* feedback: a large QR code on a white tile, the ask beside it */
.feedback { height: 100%; display: flex; align-items: center; gap: 96px; padding-bottom: 64px; box-sizing: border-box; }
.qrbox { flex: none; width: 520px; height: 520px; padding: 24px; box-sizing: border-box; background: #fff; border-radius: 12px; }
.qrbox img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }