/* ============================================================
   WORKSHOP DECKS
   Self-contained on purpose: the site stylesheet is not loaded
   here, so a change to style.css can never alter what lands on
   the projector mid-session. Palette and type are copied from
   it deliberately rather than imported.
   ============================================================ */
:root {
  --bg: #050504;
  --primary: #FAC898;
  --secondary: #FAD1B6;
  --accent: #FF9180;
  --text: #D5D6D0;
  --muted: #8A8B87;
  --bright: #F0F0EC;
  --line: rgba(250, 200, 152, 0.14);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* the stage is always 1600x900; everything else is a fraction of it */
  --s: 1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ---------------------------------------------------- the gate -- */
.deck-gate, .deck-index {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  padding: 24px; text-align: center;
  overflow-y: auto;
}
.deck-gate[hidden], .deck-index[hidden] { display: none; }
.g-kicker {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 16px;
}
.deck-gate h1, .deck-index h1 {
  font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.08; color: var(--bright);
  margin-bottom: 14px; max-width: 18ch;
}
.deck-gate h1 { margin-inline: auto; }
#gate-form { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 22px; }
#gate-pw {
  flex: 1 1 220px; min-width: 0; padding: 14px 16px;
  font-family: var(--font); font-size: 1rem; color: var(--bright);
  background: rgba(255,255,255,0.04); border: 1px solid var(--line);
  border-radius: 10px;
}
#gate-pw:focus { outline: none; border-color: var(--primary); }
#gate-form button {
  padding: 14px 26px; font-family: var(--font); font-size: 0.95rem; font-weight: 600;
  color: #10100E; background: var(--primary); border: 0; border-radius: 10px; cursor: pointer;
}
#gate-form button:disabled { opacity: 0.55; cursor: default; }
.g-hint { margin-top: 16px; font-size: 0.86rem; color: var(--muted); min-height: 1.3em; }
.g-hint.is-error { color: var(--accent); }

/* --------------------------------------------------- the index -- */
.deck-index .d-wrap { max-width: 760px; }
.d-lede { color: var(--muted); line-height: 1.65; margin-bottom: 34px; }
.d-lede b { color: var(--primary); font-weight: 600; }
.d-cards { display: grid; gap: 12px; }
.d-card {
  display: grid; gap: 4px; text-align: left; text-decoration: none;
  padding: 22px 24px; border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255,255,255,0.03);
  transition: border-color .2s, background .2s;
}
.d-card:hover { border-color: rgba(250,200,152,0.3); background: rgba(255,255,255,0.055); }
.d-k { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); }
.d-t { font-size: 1.12rem; font-weight: 600; color: var(--bright); }
.d-n { font-size: 0.8rem; color: var(--muted); }
.d-back { display: inline-block; margin-top: 30px; color: var(--muted); font-size: 0.88rem; text-decoration: none; }
.d-back:hover { color: var(--primary); }

/* --------------------------------------------------- the stage -- */
/* The stage needs a box of its own: .deck positions against it, and in presenter
   mode that box is the preview pane rather than the whole window. */
#stage { position: fixed; inset: 0; }
#stage[hidden] { display: none; }
body.presenter #stage { position: absolute; inset: 0; }
.deck {
  position: absolute; top: 50%; left: 50%;
  width: 1600px; height: 900px;
  transform: translate(-50%, -50%) scale(var(--s));
  transform-origin: center center;
}
.slide {
  position: absolute; inset: 0;
  display: none;
  padding: 104px 120px;
  flex-direction: column;
  justify-content: center;
}
.slide.is-on { display: flex; }
.s-inner { width: 100%; }

.slide h1 {
  font-size: 94px; font-weight: 800; line-height: 1.03;
  letter-spacing: -0.035em; color: var(--bright); text-wrap: balance;
  max-width: 21ch;
}
.slide p { font-size: 30px; line-height: 1.5; color: var(--muted); max-width: 42ch; }
.slide strong { color: var(--text); font-weight: 600; }
.slide em { color: var(--muted); font-style: italic; }

.slide .s-kicker, .slide .s-eyebrow {
  font-size: 20px; font-weight: 700; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 26px;
}
.slide .s-eyebrow { color: var(--secondary); opacity: .85; letter-spacing: 0.13em; }
.slide .s-dek { font-size: 34px; margin-top: 28px; max-width: 38ch; }
.slide .s-sub { font-size: 32px; margin-top: 26px; max-width: 38ch; }
.slide > .s-inner > p + p { margin-top: 18px; }
.slide h1 + p { margin-top: 30px; }

/* cover and section: the hinge points of the day */
.slide.s-cover h1, .slide.s-section h1, .slide.s-end h1 { font-size: 108px; max-width: 17ch; }
.s-section { justify-content: flex-end; }
.s-section::before {
  content: ""; position: absolute; left: 120px; bottom: 0;
  width: 150px; height: 8px; background: var(--primary); border-radius: 4px;
  transform: translateY(-104px);
}
.s-section h1 { margin-bottom: 40px; }

/* the single-line statement, the one this deck is mostly made of */
.slide.s-statement h1 { font-size: 104px; max-width: 19ch; }

.slide ul, .slide ol { list-style: none; margin-top: 44px; font-size: 30px; max-width: 40ch; }
.slide ol { counter-reset: s; }
.slide li {
  font-size: 30px; line-height: 1.45; color: var(--text);
  padding-left: 46px; position: relative; margin-bottom: 22px;
}
.slide li:last-child { margin-bottom: 0; }
.slide ul li::before {
  content: ""; position: absolute; left: 0; top: 0.58em;
  width: 22px; height: 3px; background: var(--primary); border-radius: 2px;
}
.slide ol li { counter-increment: s; }
.slide ol li::before {
  content: counter(s); position: absolute; left: 0; top: -0.04em;
  font-size: 24px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.slide li strong { color: var(--bright); font-weight: 700; }
.slide.s-list h1 { font-size: 70px; max-width: 24ch; }
.slide.s-list ul { margin-top: 38px; max-width: 46ch; }

/* seven or more items: tighten the rhythm so the frame keeps its margins */
.slide.s-dense h1 { font-size: 62px; max-width: 26ch; }
.slide.s-dense ul, .slide.s-dense ol { margin-top: 30px; max-width: 50ch; }
.slide.s-dense li { font-size: 27px; margin-bottom: 15px; line-height: 1.38; }
.slide.s-dense .s-kicker, .slide.s-dense .s-eyebrow { margin-bottom: 18px; }
.slide.s-dense .s-cols { gap: 56px; }

/* quote */
.slide.s-quote blockquote {
  font-size: 56px; font-weight: 600; line-height: 1.26; letter-spacing: -0.02em;
  color: var(--bright); max-width: 30ch;
  padding-left: 46px; border-left: 6px solid var(--primary);
}
.slide .s-cite { margin-top: 30px; padding-left: 52px; font-size: 24px; }

/* one enormous figure */
.slide .s-fig { font-size: 230px; font-weight: 800; letter-spacing: -0.05em; line-height: 0.92; color: var(--primary); }
.slide .s-fig + .s-sub { margin-top: 40px; max-width: 40ch; font-size: 30px; }

/* two panels */
.slide .s-twohead { font-size: 62px; font-weight: 800; letter-spacing: -0.03em; color: var(--bright); margin-bottom: 48px; max-width: 24ch; }
.s-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.s-col { padding-left: 28px; border-left: 3px solid var(--line); }
.slide .s-col h3 { font-size: 30px; font-weight: 700; color: var(--primary); margin-bottom: 22px; letter-spacing: -0.01em; }
.slide .s-col p { font-size: 27px; line-height: 1.45; margin-bottom: 14px; max-width: none; }
.slide .s-col p:last-child { margin-bottom: 0; }
.slide .s-foot { margin-top: 46px; font-size: 25px; max-width: 72ch; color: var(--muted); }

/* an exercise card: what stays on screen while the room works */
.slide.s-prompt h1 { font-size: 76px; max-width: 22ch; }
.slide.s-prompt .s-kicker { color: var(--accent); }
.slide.s-prompt ol, .slide.s-prompt ul { margin-top: 40px; max-width: 44ch; }

/* full-bleed image, with a slot that is obvious when empty */
.s-image { padding: 0; justify-content: flex-end; }
.s-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.s-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5,5,4,0.94) 0%, rgba(5,5,4,0.45) 42%, rgba(5,5,4,0.1) 100%);
}
.s-img-empty {
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #0b0b09 0 22px, #0e0e0c 22px 44px);
  border: 2px dashed var(--line);
}
.s-img-empty::after { display: none; }
.slide .s-img-empty span {
  font-size: 22px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.s-image .s-inner { position: relative; padding: 0 120px 104px; }
.slide.s-image h1 { font-size: 82px; }

/* -------------------------------------------------------- chrome -- */
.deck-chrome {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  pointer-events: none; font-variant-numeric: tabular-nums;
}
.deck-chrome .bar { height: 3px; background: var(--primary); width: 0; transition: width .25s ease; }
.deck-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 22px; font-size: 13px; color: var(--muted); letter-spacing: 0.06em;
}
.deck-meta .right { display: flex; gap: 18px; align-items: center; }
.deck-timer { color: var(--primary); font-weight: 700; font-size: 15px; }
.deck-timer.is-over { color: var(--accent); }
.deck-timer[hidden] { display: none; }
body.is-clean .deck-chrome { opacity: 0; }

/* A talk deck is a public page with somewhere to go back to. The workshop
   decks sit behind the room and do not need this. */
.d-exit {
  position: fixed; top: 18px; left: 22px; z-index: 6;
  font-size: 13px; letter-spacing: 0.06em; color: var(--muted);
  text-decoration: none; opacity: .55; transition: opacity .2s ease, color .2s ease;
}
.d-exit:hover { opacity: 1; color: var(--primary); }
body.is-clean .d-exit { opacity: 0; pointer-events: none; }

/* --------------------------------------------------- overview -- */
.overview {
  position: fixed; inset: 0; z-index: 20; background: #050504;
  overflow-y: auto; padding: 28px; display: none;
}
.overview.is-on { display: block; }
.ov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.ov-cell {
  aspect-ratio: 16/9; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  padding: 14px; overflow: hidden; background: rgba(255,255,255,0.025); text-align: left;
  font-family: var(--font); color: var(--text); position: relative;
}
.ov-cell:hover, .ov-cell.is-here { border-color: var(--primary); background: rgba(250,200,152,0.07); }
.ov-n { position: absolute; top: 8px; right: 10px; font-size: 11px; color: var(--muted); }
.ov-k { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: 7px; }
.ov-t { font-size: 13px; line-height: 1.32; font-weight: 600; color: var(--bright);
        display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------- presenter window -- */
body.presenter { overflow: auto; background: #0a0a09; }
.pv { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; padding: 20px; height: 100vh; }
.pv-main { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; min-height: 0; }
.pv-side { display: grid; grid-template-rows: auto auto 1fr; gap: 14px; min-height: 0; }
.pv-box { border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,0.025); padding: 16px 18px; min-height: 0; }
.pv-lbl { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); margin-bottom: 10px; }
.pv-screen { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); }
.pv-screen .deck { transform-origin: center center; }
.pv-notes { overflow-y: auto; font-size: 16px; line-height: 1.6; color: var(--text); }
.pv-notes i { color: var(--muted); }
.pv-clocks { display: flex; gap: 20px; align-items: baseline; }
.pv-big { font-size: 40px; font-weight: 800; color: var(--bright); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pv-sm { font-size: 14px; color: var(--muted); }
.pv-next { font-size: 15px; color: var(--muted); line-height: 1.45; }
.pv-keys { font-size: 12px; color: var(--muted); line-height: 1.8; }
.pv-keys b { color: var(--primary); }

/* ------------------------------------------------- small screens -- */
@media (max-width: 760px) {
  .deck-meta { font-size: 11px; padding: 9px 14px; }
  .pv { grid-template-columns: 1fr; height: auto; }
}
@media print { body { overflow: visible; } .deck-chrome, .deck-gate, .d-exit { display: none; } }

/* ============================================================
   ANIMATED DIAGRAMS
   Every animation keys off .slide.is-on, so it plays when the
   slide comes up and replays on the way back. Nothing runs off
   screen. Reduced motion gets the finished state, not the show.
   ============================================================ */
.slide.s-diagram { padding: 76px 100px; }
.slide.s-diagram h1 { font-size: 58px; max-width: 30ch; margin-bottom: 8px; }
.slide .d-wrap { margin-top: 18px; }
.slide .d-cap { margin-top: 10px; font-size: 24px; color: var(--muted); max-width: 72ch; }
.d-svg { width: 100%; height: auto; display: block; color: var(--primary); }
.d-svg text { font-family: var(--font); fill: var(--text); }

/* shared furniture */
.d-step { fill: rgba(255,255,255,0.04); stroke: var(--line); stroke-width: 1.5; }
.d-gate { stroke: var(--accent); stroke-width: 2.5; fill: rgba(255,145,128,0.07); }
.d-steplbl { font-size: 20px; font-weight: 600; fill: var(--bright); text-anchor: middle; }
.d-gatelbl { fill: var(--accent); }
.d-link { stroke: var(--primary); stroke-width: 2; fill: none; opacity: .5; }
.d-lane-k { font-size: 21px; font-weight: 800; letter-spacing: 0.16em; fill: var(--primary); }
.d-lane-k2 { fill: var(--accent); }
.d-lane-s { font-size: 19px; fill: var(--muted); }
.d-note { font-size: 18px; fill: var(--muted); text-anchor: end; }
.d-rule { stroke: var(--line); stroke-width: 1; }
.d-dot { fill: var(--primary); opacity: 0; }
.d-dot-e { fill: var(--accent); }

/* 1. automate vs enhance: one lane never stops, the other waits for a person */
@keyframes d-run-a {
  0%   { transform: translateX(0);    opacity: 0; }
  6%   { opacity: 1; }
  92%  { transform: translateX(720px); opacity: 1; }
  100% { transform: translateX(720px); opacity: 0; }
}
@keyframes d-run-e {
  0%   { transform: translateX(0);    opacity: 0; }
  6%   { opacity: 1; }
  38%  { transform: translateX(480px); }
  64%  { transform: translateX(480px); }           /* the wait: somebody is deciding */
  92%  { transform: translateX(720px); opacity: 1; }
  100% { transform: translateX(720px); opacity: 0; }
}
@keyframes d-gate-pulse {
  0%, 36%, 100% { stroke-opacity: .55; fill-opacity: .07; }
  46%, 58%      { stroke-opacity: 1;   fill-opacity: .22; }
}
.slide.is-on .d-dot-a { animation: d-run-a 4.6s cubic-bezier(.45,0,.55,1) .4s infinite; }
.slide.is-on .d-dot-e { animation: d-run-e 4.6s cubic-bezier(.45,0,.55,1) .4s infinite; }
.slide.is-on .d-automate .d-gate { animation: d-gate-pulse 4.6s ease-in-out .4s infinite; }

/* 2. four levels: each tier arrives from the bottom up */
.d-tier rect { fill: rgba(255,255,255,0.035); stroke: var(--line); stroke-width: 1.5; }
.d-tier-n { font-size: 24px; font-weight: 700; fill: var(--bright); }
.d-tier-k { font-size: 18px; fill: var(--muted); }
.d-tier-m { font-size: 19px; font-weight: 600; fill: var(--primary); text-anchor: end; }
.d-axis-line { stroke: var(--primary); stroke-width: 1.5; fill: none; opacity: .45; }
.d-axis-t { font-size: 15px; letter-spacing: 0.1em; fill: var(--muted); text-anchor: middle; }
@keyframes d-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.slide.s-diagram .d-tier { opacity: 0; }
.slide.is-on .d-tier { animation: d-rise .62s cubic-bezier(.2,.7,.3,1) forwards; }
.slide.is-on .d-tier-1 { animation-delay: .25s; }
.slide.is-on .d-tier-2 { animation-delay: .62s; }
.slide.is-on .d-tier-3 { animation-delay: .99s; }
.slide.is-on .d-tier-4 { animation-delay: 1.36s; }

/* 3. the adoption system: nine people walk it, four experiments do not survive triage */
.d-stage rect { fill: rgba(255,255,255,0.03); stroke: var(--line); stroke-width: 1.5; }
.d-stage-n { font-size: 20px; font-weight: 800; fill: var(--primary); opacity: .55; }
.d-stage-t { font-size: 27px; font-weight: 700; fill: var(--bright); }
.d-stage-s { font-size: 17px; fill: var(--muted); }
.d-p { fill: var(--accent); }
@keyframes d-walk {
  0%,  10% { transform: translateX(0)     scale(.82); fill: #FF9180; }
  25%, 34% { transform: translateX(336px) scale(1);   fill: #FAD1B6; }
  49%, 58% { transform: translateX(672px) scale(1);   fill: #FAD1B6; }
  73%, 92% { transform: translateX(1008px) scale(1);  fill: #FAC898; }
  100%     { transform: translateX(1008px) scale(1);  fill: #FAC898; }
}
@keyframes d-walk-out {              /* the fun ones: they reach triage and stop there */
  0%,  10% { transform: translateX(0)     scale(.82); fill: #FF9180; opacity: 1; }
  25%, 34% { transform: translateX(336px) scale(1);   fill: #FAD1B6; opacity: 1; }
  49%      { transform: translateX(672px) scale(1);   opacity: 1; }
  62%      { transform: translateX(672px) translateY(90px) scale(.7); opacity: 0; }
  100%     { transform: translateX(672px) translateY(90px) scale(.7); opacity: 0; }
}
.slide.is-on .d-p { animation: d-walk 7.4s cubic-bezier(.5,0,.3,1) .5s 2 forwards; transform-box: fill-box; transform-origin: center; }
.slide.is-on .d-p-out { animation-name: d-walk-out; }
.slide.is-on .d-p-2 { animation-delay: .62s; }
.slide.is-on .d-p-3 { animation-delay: .74s; }
.slide.is-on .d-p-4 { animation-delay: .86s; }
.slide.is-on .d-p-5 { animation-delay: .98s; }
.slide.is-on .d-p-6 { animation-delay: 1.1s; }
.slide.is-on .d-p-7 { animation-delay: 1.22s; }
.slide.is-on .d-p-8 { animation-delay: 1.34s; }
.slide.is-on .d-p-9 { animation-delay: 1.46s; }

/* 4. task unbundling: nothing moves until he presses the key, and everything
   that moves lands somewhere visible and stays there. The first version ran on
   a timer and faded the tiles to nothing, so the room could neither finish
   reading the left column nor see where anything went. */
.d-task rect { fill: rgba(255,255,255,0.05); stroke: var(--line); stroke-width: 1.5; }
.d-task text { font-size: 19px; fill: var(--text); }
.d-task.d-keep rect { stroke: rgba(250,200,152,0.4); }
.d-col-k { font-size: 18px; font-weight: 800; letter-spacing: 0.15em; fill: var(--muted); }
.d-col-ai { fill: var(--accent); }
.d-col-h { fill: var(--primary); }
.d-col-rule { stroke: var(--line); stroke-width: 1.5; }
.d-arrive-k { font-size: 14px; font-weight: 800; letter-spacing: 0.14em; fill: var(--primary); opacity: .75; }
.d-arrive { font-size: 18px; fill: var(--muted); }

/* step 0: the destinations are labelled but empty, so the question is visible */
.slide.s-diagram .d-head-2, .slide.s-diagram .d-head-3,
.slide.s-diagram .d-rule-2, .slide.s-diagram .d-rule-3 { opacity: .35; }
.slide.s-diagram .d-arrive, .slide.s-diagram .d-arrive-0 { opacity: 0; }

/* step 1: they travel, land, and stay landed */
@keyframes d-move {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx), var(--dy)); }
}
@keyframes d-fade-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes d-light   { to { opacity: 1; } }

.slide.is-on[data-step="1"] .d-task {
  animation: d-move .85s cubic-bezier(.45,.05,.2,1) forwards;
}
.slide.is-on[data-step="1"] .d-task-2 { animation-delay: .10s; }
.slide.is-on[data-step="1"] .d-task-3 { animation-delay: .20s; }
.slide.is-on[data-step="1"] .d-task-4 { animation-delay: .30s; }
.slide.is-on[data-step="1"] .d-task-5 { animation-delay: .44s; }
.slide.is-on[data-step="1"] .d-task-6 { animation-delay: .54s; }
.slide.is-on[data-step="1"] .d-task-7 { animation-delay: .64s; }
.slide.is-on[data-step="1"] .d-task-8 { animation-delay: .74s; }

.slide.is-on[data-step="1"] .d-head-2, .slide.is-on[data-step="1"] .d-head-3,
.slide.is-on[data-step="1"] .d-rule-2, .slide.is-on[data-step="1"] .d-rule-3 {
  animation: d-light .5s ease-out .5s forwards;
}
.slide.is-on[data-step="1"] .d-arrive-0 { animation: d-fade-in .5s ease-out 1.5s forwards; }
.slide.is-on[data-step="1"] .d-arrive-1 { animation: d-fade-in .5s ease-out 1.7s forwards; }
.slide.is-on[data-step="1"] .d-arrive-2 { animation: d-fade-in .5s ease-out 1.9s forwards; }
.slide.is-on[data-step="1"] .d-arrive-3 { animation: d-fade-in .5s ease-out 2.1s forwards; }

/* a slide with an unplayed build says so, quietly, to him and not the room */
.deck-meta .build { color: var(--accent); }

/* ============================================================
   DIAGRAMELE ROMÂNEȘTI
   Aceleași reguli: animația pornește de la .slide.is-on și
   nimic nu depinde de ea ca să fie vizibil. Cu animațiile
   oprite, fiecare diagramă arată exact starea finală.
   ============================================================ */
.d-walllbl { font-size: 21px; font-weight: 800; letter-spacing: .1em; fill: var(--accent); text-anchor: middle; }
.d-wallsub { font-size: 18px; fill: var(--muted); text-anchor: middle; }
.d-wall rect { fill: rgba(255,145,128,.07); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 6; }
.d-open { fill: rgba(250,200,152,.07); stroke: var(--primary); stroke-width: 1.5; }
.d-openlbl { font-size: 21px; font-weight: 800; letter-spacing: .1em; fill: var(--primary); text-anchor: middle; }
.d-i-open { opacity: .75; }

/* the dot hits the wall of syntax, then starts over. the one below walks through. */
@keyframes d-i-stop {
  0%   { transform: translateX(0); }
  34%  { transform: translateX(224px); }
  44%  { transform: translateX(206px); }
  54%  { transform: translateX(224px); }
  64%  { transform: translateX(206px); }
  100% { transform: translateX(206px); }
}
@keyframes d-i-through {
  0%   { transform: translateX(0); }
  86%  { transform: translateX(950px); }
  100% { transform: translateX(950px); }
}
.d-invers .d-dot { opacity: 1; }
.slide.is-on .d-i-a { animation: d-i-stop 4.4s cubic-bezier(.4,0,.5,1) .3s infinite; }
.slide.is-on .d-i-b { animation: d-i-through 4.4s cubic-bezier(.3,0,.4,1) .3s infinite; }

/* the waves: each step rises into place, and stays up */
.d-axis { font-size: 19px; font-weight: 700; letter-spacing: .14em; fill: var(--muted); }
.d-valyr { font-size: 30px; font-weight: 800; fill: var(--primary); text-anchor: middle; }
.d-vallbl { font-size: 20px; fill: var(--muted); text-anchor: middle; }
.d-valuri .d-val-4 .d-valyr { fill: var(--accent); }
.d-valuri .d-val-4 rect { stroke: var(--accent); stroke-width: 2; fill: rgba(255,145,128,.06); }
@keyframes d-climb { from { transform: translateY(26px); } to { transform: translateY(0); } }
.slide.is-on .d-val { animation: d-climb .5s cubic-bezier(.2,.7,.3,1) both; }
.slide.is-on .d-val-1 { animation-delay: .15s; }
.slide.is-on .d-val-2 { animation-delay: .4s; }
.slide.is-on .d-val-3 { animation-delay: .65s; }
.slide.is-on .d-val-4 { animation-delay: .9s; }

/* three layers, built from the bottom up */
.d-stratk { font-size: 27px; font-weight: 800; letter-spacing: .1em; fill: var(--bright); }
.d-straturi .d-strat-3 .d-stratk { fill: var(--accent); }
.d-stratq { font-size: 21px; fill: var(--muted); text-anchor: end; }
.slide.is-on .d-strat { animation: d-climb .5s cubic-bezier(.2,.7,.3,1) both; }
.slide.is-on .d-strat-1 { animation-delay: .15s; }
.slide.is-on .d-strat-2 { animation-delay: .45s; }
.slide.is-on .d-strat-3 { animation-delay: .75s; }

/* the frontier we assume, and the one that is actually there */
.d-guess { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 10 8; fill: none; opacity: .55; }
.d-guesslbl { font-size: 19px; fill: var(--muted); text-anchor: end; }
.d-coast { stroke: var(--primary); stroke-width: 3.5; fill: none; stroke-linejoin: round; }
.d-coastlbl { font-size: 20px; font-weight: 700; fill: var(--primary); }
.d-coastlbl2 { fill: var(--primary); font-weight: 700; }
.d-fdot { fill: var(--primary); }
.d-fdot-b { fill: var(--accent); }
@keyframes d-draw { from { stroke-dashoffset: 1900; } to { stroke-dashoffset: 0; } }
.slide.is-on .d-coast { stroke-dasharray: 1900; animation: d-draw 1.5s cubic-bezier(.4,0,.3,1) .25s both; }
@keyframes d-pop { from { transform: scale(.2); } to { transform: scale(1); } }
.d-front .d-fdot { transform-box: fill-box; transform-origin: center; }
.slide.is-on .d-fdot { animation: d-pop .35s cubic-bezier(.2,.8,.3,1.2) both; }
.slide.is-on .d-fdot:nth-of-type(1) { animation-delay: 1.5s; }
.slide.is-on .d-fdot:nth-of-type(2) { animation-delay: 1.68s; }
.slide.is-on .d-fdot:nth-of-type(3) { animation-delay: 1.86s; }
.slide.is-on .d-fdot:nth-of-type(4) { animation-delay: 2.04s; }

/* closed book against open book */
.d-bad { fill: rgba(255,145,128,.07); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 7 6; }
.d-badlbl { font-size: 23px; font-weight: 700; fill: var(--accent); text-anchor: middle; }
.d-badsub { font-size: 19px; fill: var(--muted); text-anchor: middle; }
.d-good { fill: rgba(250,200,152,.08); stroke: var(--primary); stroke-width: 2; }
.d-goodlbl { font-size: 23px; font-weight: 700; fill: var(--primary); text-anchor: middle; }
.d-goodsub { font-size: 19px; fill: var(--muted); text-anchor: middle; }
.d-docslbl { font-size: 17px; font-weight: 700; fill: var(--bright); text-anchor: middle; }
@keyframes d-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-9px); } }
.slide.is-on .d-docs { animation: d-nudge 3.4s ease-in-out .4s infinite; }

@media (prefers-reduced-motion: reduce) {
  .slide.is-on .d-dot-a, .slide.is-on .d-dot-e, .slide.is-on .d-automate .d-gate,
  .slide.is-on .d-tier, .slide.is-on .d-p { animation: none !important; }
  .slide.s-diagram .d-tier { opacity: 1; }
  .d-dot { opacity: 1; }
  /* the build still has to happen, it just happens instantly */
  .slide.is-on[data-step="1"] .d-task { animation-duration: .01s !important; animation-delay: 0s !important; }
  .slide.is-on .d-i-a, .slide.is-on .d-i-b, .slide.is-on .d-val, .slide.is-on .d-strat,
  .slide.is-on .d-coast, .slide.is-on .d-fdot, .slide.is-on .d-docs { animation: none !important; }
  .slide.is-on .d-coast { stroke-dasharray: none; }
  .slide.is-on[data-step="1"] .d-arrive, .slide.is-on[data-step="1"] .d-arrive-0,
  .slide.is-on[data-step="1"] .d-head-2, .slide.is-on[data-step="1"] .d-head-3,
  .slide.is-on[data-step="1"] .d-rule-2, .slide.is-on[data-step="1"] .d-rule-3 {
    animation-duration: .01s !important; animation-delay: 0s !important;
  }
}

/* ============================================================
   SHEET ANCHOR
   Top corner of the slide: which printed sheet is open, and
   where in it. Three shapes, one per resource, printed on the
   sheets too so the room matches slide to paper without being
   told. Quiet on purpose; it is a signpost, not a headline.
   ============================================================ */
.slide .s-ref {
  position: absolute; top: 46px; right: 100px;
  display: flex; align-items: center; gap: 11px;
  margin: 0; font-size: 19px; letter-spacing: 0.02em;
  color: var(--muted); max-width: none;
}
.slide .s-ref .s-ref-n { font-weight: 500; }
.slide .s-ref b {
  color: var(--primary); font-weight: 700; letter-spacing: 0.04em;
  padding-left: 11px; margin-left: 2px; border-left: 1px solid var(--line);
}
.s-mark { width: 17px; height: 17px; flex: none; background: var(--primary); opacity: .92; }
/* workbook: a diamond. skills audit: a triangle. playbook: a square. */
.s-ref-wb .s-mark { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.s-ref-sa .s-mark { clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.s-ref-pb .s-mark { border-radius: 3px; }

/* the cover and section dividers run full bleed, so the anchor sits with them */
.slide.s-section .s-ref, .slide.s-cover .s-ref { top: 46px; }
.slide.s-image .s-ref { right: 100px; z-index: 2; }
.slide.s-diagram .s-ref { top: 38px; right: 100px; }

@media (max-width: 760px) { .slide .s-ref { font-size: 17px; right: 60px; } }
@media print { .slide .s-ref { display: none; } }

/* ---- story points: the bar grows with the weight, 13 is a different animal ---- */
.d-pt-n { font-size: 30px; font-weight: 800; fill: var(--primary); text-anchor: end; }
.d-pt-track { fill: rgba(255,255,255,0.03); stroke: var(--line); stroke-width: 1.2; }
.d-pt-bar { fill: var(--primary); opacity: .55; width: 0; }
.d-pt-l { font-size: 21px; fill: var(--text); }
.d-pt-stop .d-pt-n, .d-pt-stop .d-pt-l { fill: var(--accent); }
.d-pt-stop .d-pt-bar { fill: var(--accent); opacity: .7; }
@keyframes d-grow { from { width: 0; } to { width: var(--w); } }
@keyframes d-shake {
  0%, 82%, 100% { transform: translateX(0); }
  86% { transform: translateX(-7px); } 90% { transform: translateX(7px); }
  94% { transform: translateX(-4px); }
}
.slide.s-diagram .d-pt { opacity: 0; }
.slide.is-on .d-pt { animation: d-rise .45s ease-out forwards; }
.slide.is-on .d-pt-bar { animation: d-grow .7s cubic-bezier(.3,.8,.3,1) forwards; }
.slide.is-on .d-pt-1 { animation-delay: .2s; } .slide.is-on .d-pt-1 .d-pt-bar { animation-delay: .3s; }
.slide.is-on .d-pt-2 { animation-delay: .5s; } .slide.is-on .d-pt-2 .d-pt-bar { animation-delay: .6s; }
.slide.is-on .d-pt-3 { animation-delay: .8s; } .slide.is-on .d-pt-3 .d-pt-bar { animation-delay: .9s; }
.slide.is-on .d-pt-4 { animation-delay: 1.1s; } .slide.is-on .d-pt-4 .d-pt-bar { animation-delay: 1.2s; }
.slide.is-on .d-pt-5 { animation-delay: 1.4s; } .slide.is-on .d-pt-5 .d-pt-bar { animation-delay: 1.5s; }
.slide.is-on .d-pt-stop { animation: d-rise .45s ease-out 1.4s forwards, d-shake 2.4s ease-in-out 2.1s infinite;
                          transform-box: fill-box; transform-origin: center; }


/* ---- what actually matters ---- */
.d-van rect { fill: rgba(255,255,255,0.03); stroke: var(--line); stroke-width: 1.2; }
.d-van text { font-size: 21px; fill: var(--muted); }
.d-real rect { fill: rgba(250,200,152,0.05); stroke: rgba(250,200,152,0.4); stroke-width: 1.4; }
.d-real-t { font-size: 22px; font-weight: 700; fill: var(--bright); }
.d-real-s { font-size: 17px; fill: var(--muted); }
.slide.s-diagram .d-real, .slide.s-diagram .d-m-head { opacity: 0; }
@keyframes d-drop { 0%,100% { opacity: .25; transform: translateY(14px); } }
.slide.is-on .d-van { animation: d-drop .8s ease-out forwards; transform-box: fill-box; }
.slide.is-on .d-van-1 { animation-delay: .9s; } .slide.is-on .d-van-2 { animation-delay: 1.0s; }
.slide.is-on .d-van-3 { animation-delay: 1.1s; } .slide.is-on .d-van-4 { animation-delay: 1.2s; }
.slide.is-on .d-m-head { animation: d-fade-in .5s ease-out 1.3s forwards; }
.slide.is-on .d-real { animation: d-fade-in .5s ease-out forwards; }
.slide.is-on .d-real-1 { animation-delay: 1.5s; } .slide.is-on .d-real-2 { animation-delay: 1.7s; }
.slide.is-on .d-real-3 { animation-delay: 1.9s; } .slide.is-on .d-real-4 { animation-delay: 2.1s; }

/* ---- the six barrier cards, readable from the back of the room ---- */
.slide.s-cards { padding: 72px 90px; }
.slide.s-cards h1 { font-size: 50px; max-width: 32ch; margin-bottom: 6px; }
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.b-card {
  padding: 20px 22px; border: 1.5px solid var(--line); border-radius: 14px;
  background: rgba(255,255,255,0.03);
}
.slide[data-step="1"] .b-card.is-live { border-color: var(--accent); background: rgba(255,145,128,0.06); }
.b-card .n {
  display: block; font-size: 15px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 9px;
}
.slide[data-step="1"] .b-card.is-live .n { color: var(--accent); }
.b-card p { font-size: 20px; line-height: 1.42; color: var(--text); margin: 0; max-width: none; }

/* the ladder arrives rung by rung, so the overview slide is not a still life */
@media (prefers-reduced-motion: reduce) {
}

/* a line after a list is a closing instruction, not a fourth item */
.slide > .s-inner > ul + p,
.slide > .s-inner > ol + p { margin-top: 22px; }

/* ---- the four shifts: shown twice, not five times ----
   Once with the right column hidden, as the room they already run, and once
   complete at the end. No entrance animation: the only thing that distinguishes
   the two slides is whether the second column is there, and that must never
   depend on an animation finishing. */
.t-name { font-size: 24px; font-weight: 700; fill: var(--bright); }
.t-box { fill: rgba(255,255,255,0.035); stroke: var(--line); stroke-width: 1.4; }
.t-box-after { fill: rgba(250,200,152,0.06); stroke: rgba(250,200,152,0.45); }
.t-before { font-size: 20px; fill: var(--muted); }
.t-to { font-size: 20px; fill: var(--text); }
.t-arrow { font-size: 26px; fill: var(--primary); opacity: .6; }
.slide[data-focus="before"] .t-after { opacity: 0; }