/* ============================================================================
   Whiteprint — the redline on a clean report
   Stable-Edge Filtering for Passive OT Device Classification
   Hand-rolled, dependency-free deck. Designed at 1920×1080.
   ========================================================================== */

/* ---- fonts (self-hosted, offline) ---------------------------------------- */
@font-face { font-family:'Inter'; font-weight:400; font-display:swap;
  src:url('assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap;
  src:url('assets/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:700; font-display:swap;
  src:url('assets/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-display:swap;
  src:url('assets/fonts/plex-mono-500.woff2') format('woff2'); }

/* ---- design tokens ------------------------------------------------------- */
:root{
  --paper:#FFFFFF;
  --navy:#0A1A3F;
  --kpmg:#00338D;
  --cobalt:#1E49E2;
  --ink:#16181D;
  --slate:#5B6472;
  --hair:#E3E7EF;
  --paper-tint:#F4F6FA;
  --amber:#E8531B;          /* the single warm accent — rationed to 3 places */
  --letterbox:#02060f;

  --sans:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html,body{margin:0;height:100%;background:var(--letterbox);overflow:hidden;
  font-family:var(--sans);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.mono{font-family:var(--mono);font-weight:500;}
[hidden]{display:none !important;}   /* must beat .overlay{display:grid} */

/* ---- letterbox + scaling stage ------------------------------------------ */
#app{position:fixed;inset:0;overflow:hidden;background:var(--letterbox);}
#stage{position:absolute;top:50%;left:50%;width:1920px;height:1080px;
  transform:translate(-50%,-50%) scale(1);transform-origin:center center;
  background:var(--paper);box-shadow:0 40px 120px rgba(0,0,0,.55);}
.deck{position:absolute;inset:0;}

/* ---- slides -------------------------------------------------------------- */
.slide{position:absolute;inset:0;background:var(--paper);color:var(--ink);
  display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;
  padding:132px 110px 116px 172px;align-content:start;
  opacity:0;visibility:hidden;transform:translateX(40px);pointer-events:none;
  transition:opacity .42s var(--ease),transform .42s var(--ease),
             visibility 0s linear .42s;}
.slide.is-current{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .42s var(--ease),transform .42s var(--ease),visibility 0s;}
.slide.is-past{transform:translateX(-40px);}

/* the binding rule — sits in the left margin, clear of the text column */
.slide::before{content:'';position:absolute;left:104px;top:0;bottom:0;width:6px;
  background:var(--kpmg);}

/* navy bookends */
.slide--navy{background:var(--navy);color:var(--paper);
  grid-template-columns:1fr;place-items:center;padding:120px;text-align:center;}
.slide--navy::before{display:none;}
.mark{position:absolute;top:64px;left:64px;width:28px;height:28px;background:var(--kpmg);}

/* ---- columns ------------------------------------------------------------- */
.col-left{grid-column:1 / 7;min-width:0;}
.col-right{grid-column:7 / 13;align-self:center;min-width:0;}
.bookend{max-width:1500px;}

/* ---- type ---------------------------------------------------------------- */
.kicker{font-weight:600;font-size:18px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--slate);margin:0 0 20px;}
.kicker--navy{color:var(--cobalt);}
.kicker-sub{font-weight:400;letter-spacing:0;text-transform:none;color:var(--slate);}

.hero{font-weight:700;font-size:124px;line-height:1.03;letter-spacing:-.02em;
  margin:0 0 32px;color:var(--paper);}
.title{font-weight:600;font-size:62px;line-height:1.08;letter-spacing:-.01em;
  color:var(--kpmg);margin:0 0 26px;max-width:16ch;}
.title--stack{max-width:none;}
.takeaway{font-weight:700;font-size:72px;line-height:1.08;letter-spacing:-.01em;
  color:var(--paper);margin:0 0 32px;max-width:20ch;}

.hook{font-weight:600;font-size:38px;line-height:1.25;color:var(--cobalt);margin:0 0 48px;}
.credit{font-size:21px;line-height:1.6;color:rgba(255,255,255,.62);margin:0;}

.lede{list-style:none;margin:0;padding:0;max-width:26em;}
.lede li{font-weight:400;font-size:27px;line-height:1.4;color:var(--ink);margin:0 0 .5em;}
.lede em{font-style:normal;color:var(--kpmg);font-weight:600;}
.lede strong{color:var(--ink);font-weight:700;}
.rq{font-weight:600;font-size:30px;line-height:1.3;color:var(--cobalt);
  margin:.45em 0 0;max-width:24em;}

.accent-cobalt{color:var(--cobalt);}
.accent-kpmg{color:var(--kpmg);}

/* slide 4 big number */
.bignum{margin-top:26px;}
.bignum__val{display:block;font-size:56px;line-height:1;letter-spacing:-.01em;color:var(--ink);}
.bignum__val .arrow{color:var(--slate);margin:0 .08em;}
.bignum__sub{display:block;font-size:23px;color:var(--slate);margin-top:10px;letter-spacing:.01em;}

/* slide 5 mechanism chain */
.chain{list-style:none;margin:0 0 8px;padding:0;max-width:25em;}
.chain li{display:flex;gap:20px;align-items:flex-start;font-size:25px;line-height:1.36;
  color:var(--ink);margin:0 0 .5em;}
.chain .step{flex:0 0 auto;width:38px;height:38px;border:2px solid var(--kpmg);border-radius:50%;
  display:grid;place-items:center;font-size:20px;color:var(--kpmg);margin-top:2px;}
.chain .step-txt{min-width:0;}
.chain strong{font-weight:700;}
.ann{display:inline-block;font-size:19px;color:var(--slate);margin-top:5px;}
.footnote{font-size:21px;color:var(--slate);margin:14px 0 0;max-width:34em;line-height:1.4;}

/* slide 3 ledger */
.ledger-head{font-size:18px;letter-spacing:.18em;color:var(--slate);margin:0 0 16px;}
.ledger{margin:0;border-top:1px solid var(--hair);}
.ledger__row{display:flex;align-items:baseline;gap:24px;padding:13px 2px;
  border-bottom:1px solid var(--hair);}
.ledger__row dt{margin:0;font-size:44px;line-height:1;color:var(--kpmg);min-width:140px;}
.ledger__row dd{margin:0;font-size:21px;color:var(--slate);letter-spacing:.02em;}
.ledger-foot{font-size:19px;color:var(--slate);margin:16px 0 0;}

/* slide 3 prune diagram */
.prune{width:100%;max-width:660px;height:auto;margin-top:34px;}
.prune .pnodes circle{fill:var(--kpmg);}
.prune .pedge-keep line{stroke:var(--cobalt);stroke-width:2.5;}
.prune .pedge-drop line{stroke:var(--hair);stroke-width:2;stroke-dasharray:4 5;
  transition:opacity .5s var(--ease);}
.prune.is-pruned .pedge-drop line{opacity:0;}
.prune-label{font-size:18px;fill:var(--cobalt);}
.prune-label--drop{fill:var(--slate);}

/* slide 2 schematic */
.schematic{width:100%;max-width:600px;height:auto;}
.schematic .bus{stroke:var(--kpmg);stroke-width:3;}
.schematic .nodes circle{fill:var(--kpmg);}
.schematic .edge-steady{fill:none;stroke:var(--cobalt);stroke-width:2.5;}
.schematic .edge-transient{fill:none;stroke:var(--hair);stroke-width:2;stroke-dasharray:5 6;}
.schematic .tap{stroke:var(--slate);stroke-width:2;stroke-dasharray:3 4;}
.schematic .probe{fill:none;stroke:var(--kpmg);stroke-width:2;}
.schematic .probe-label{fill:var(--kpmg);font-size:18px;}
.schematic .cap{fill:var(--slate);font-size:20px;}
.schematic .cap--warn{fill:var(--ink);font-weight:600;}

/* slide 6 takeaway */
.takeaway-sub{font-size:38px;line-height:1.4;color:var(--paper);margin:0 0 40px;max-width:26ch;}
.burn{transition:color .2s var(--ease);}        /* paper → amber on final beat */
.burn.is-burnt{color:var(--amber);font-weight:600;}
.practitioner{list-style:none;margin:0 0 36px;padding:0;
  display:flex;gap:16px 56px;flex-wrap:wrap;justify-content:center;}
.practitioner li{font-size:25px;color:rgba(255,255,255,.9);}
.practitioner em{font-style:normal;color:var(--cobalt);font-weight:500;}
.credit--end{font-size:19px;}

/* ---- figure: rq2 bar chart ---------------------------------------------- */
.chart,.matrices{width:100%;}
.chart svg,.matrices svg{width:100%;height:auto;aspect-ratio:760 / 520;display:block;}
.fig-axis-title{font-family:var(--mono);font-weight:500;font-size:20px;fill:var(--slate);}
.fig-tick{font-family:var(--mono);font-weight:500;font-size:22px;fill:var(--slate);}
.fig-grid{stroke:var(--hair);stroke-width:1;}
.fig-zero{stroke:var(--kpmg);stroke-width:2;}
.fig-xlabel{font-family:var(--mono);font-weight:500;font-size:24px;fill:var(--slate);}
.fig-pval{font-family:var(--mono);font-weight:500;font-size:20px;fill:var(--slate);}
.fig-whisk{stroke:var(--ink);stroke-width:2;}

.bar-neutral,.whisk-neutral{opacity:0;transition:opacity .4s var(--ease);}
.chart.show-neutral .bar-neutral,.chart.show-neutral .whisk-neutral{opacity:1;}
.maint-extra{opacity:0;transition:opacity .3s var(--ease) .45s;}
.chart.ignite .maint-extra{opacity:1;}
.bar-maint{transform:scaleY(0);transform-box:fill-box;transform-origin:top;
  fill:var(--kpmg);transition:transform .7s var(--ease),fill .15s linear .55s;}
.chart.ignite .bar-maint{transform:scaleY(1);fill:var(--amber);}

/* ---- figure: confusion matrices ----------------------------------------- */
.fig-panel{font-family:var(--mono);font-weight:500;font-size:26px;fill:var(--kpmg);letter-spacing:.04em;}
.fig-cmlabel{font-family:var(--mono);font-weight:500;font-size:22px;fill:var(--slate);}
.fig-cmval{font-family:var(--mono);font-weight:500;font-size:20px;}
.fig-undercap{font-family:var(--mono);font-weight:500;font-size:17px;fill:var(--slate);}
.leak-arc{fill:none;stroke:var(--amber);stroke-width:2.5;}
.leak-label{font-family:var(--mono);font-weight:500;font-size:20px;fill:var(--amber);}
#leakRect,#drainRect{transition:fill .6s var(--ease),stroke .6s var(--ease),stroke-width .6s var(--ease);}
#connector{opacity:0;transition:opacity .35s var(--ease) .35s;}
.matrices.leaked #connector{opacity:1;}

/* ---- running rail -------------------------------------------------------- */
.rail{position:absolute;left:172px;right:110px;bottom:40px;
  display:flex;align-items:center;gap:24px;z-index:5;
  transition:opacity .3s var(--ease);}
.rail--hidden{opacity:0;}
.ladder{list-style:none;display:flex;gap:10px;margin:0;padding:0;}
.ladder li{width:42px;height:4px;background:var(--hair);border-radius:2px;
  transition:background .3s var(--ease);}
.ladder li.is-active{background:var(--cobalt);}
.rail__title{flex:1;font-size:18px;color:var(--slate);}
.rail__count{font-size:18px;color:var(--slate);}

/* ---- beat reveal --------------------------------------------------------- */
[data-beat]{opacity:0;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);}
[data-beat].is-in{opacity:1;transform:none;}

/* ---- overlays + hints ---------------------------------------------------- */
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;
  background:rgba(2,6,15,.93);color:var(--paper);padding:80px;}
.overlay__inner{max-width:1120px;}
.overlay__label{font-size:18px;letter-spacing:.18em;color:var(--cobalt);margin:0 0 28px;}
.overlay__body{font-size:36px;line-height:1.5;font-weight:400;margin:0;}
.overlay__keys{list-style:none;margin:0;padding:0;font-size:26px;line-height:2.1;}
.overlay__keys kbd{font-family:var(--mono);font-size:20px;border:1px solid var(--slate);
  border-radius:5px;padding:2px 10px;margin-right:6px;}
.overlay__hint{font-size:18px;color:var(--slate);margin:40px 0 0;}

.boot-hint{position:absolute;bottom:40px;right:110px;font-size:18px;color:var(--slate);
  z-index:6;transition:opacity .5s var(--ease);}
.boot-hint.is-gone{opacity:0;}

/* ===========================================================================
   LAB SLIDES (4 · 5) — "building the lab". Blue/cobalt only; amber stays
   rationed to the result→mechanism→takeaway crescendo.
   ========================================================================== */

/* pseudocode block (device loop · scenario loop) */
.code{font-family:var(--mono);font-weight:500;font-size:18px;line-height:1.5;
  white-space:pre;overflow:hidden;color:var(--ink);
  background:var(--paper-tint);border:1px solid var(--hair);
  border-left:3px solid var(--kpmg);border-radius:7px;
  padding:18px 22px;margin:6px 0 22px;max-width:32em;}
.code .c{color:var(--slate);}            /* comment */
.code .k{color:var(--cobalt);font-weight:500;}  /* keyword */
.code .s{color:var(--kpmg);}             /* string */

/* "runs 24/7" credibility strip */
.realstrip{font-size:20px;color:var(--slate);margin:2px 0 0;letter-spacing:.01em;}
.realstrip .rs-k{color:var(--kpmg);font-weight:600;letter-spacing:.08em;}
.realstrip b{color:var(--ink);font-weight:600;}

/* scenario list (slide 5 right column) */
.scenlist{margin:0;border-top:1px solid var(--hair);}
.scen{display:flex;align-items:baseline;gap:18px;padding:13px 4px 13px 14px;
  border-bottom:1px solid var(--hair);position:relative;}
.scen dt{margin:0;flex:0 0 auto;min-width:150px;font-size:22px;color:var(--kpmg);}
.scen dd{margin:0;font-size:20px;line-height:1.34;color:var(--slate);}
.scen dd em{font-style:normal;color:var(--ink);font-weight:600;}
.scen--key{background:var(--paper-tint);}
.scen--key::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--cobalt);}
.scen--key dt{color:var(--cobalt);}
.scen-note{display:block;font-size:16px;color:var(--cobalt);margin-top:4px;letter-spacing:.01em;}

/* ---- lab map schematic (slide 4) ---------------------------------------- */
.labmap{width:100%;max-width:790px;height:auto;display:block;}
.labmap .chip{fill:var(--paper-tint);stroke:var(--hair);stroke-width:1.5;}
.labmap .chip-ctrl{fill:#fff;stroke:var(--kpmg);stroke-width:2;}
.labmap .nodes circle{fill:var(--kpmg);}
.labmap .lm-cls{fill:var(--kpmg);font-family:var(--sans);font-weight:700;font-size:17px;}
.labmap .lm-ann{fill:var(--slate);font-size:13px;}
.labmap .seg{stroke:var(--kpmg);stroke-width:3;}
.labmap .seg-dot{fill:var(--kpmg);}
.labmap .drop{stroke:var(--hair);stroke-width:1.6;}
.labmap .lm-seg-label{fill:var(--slate);font-size:14px;}
.labmap .tap{stroke:var(--slate);stroke-width:1.6;stroke-dasharray:3 4;}
.labmap .probe{fill:none;stroke:var(--kpmg);stroke-width:2;}
.labmap .lm-probe{fill:var(--kpmg);font-size:14px;}
.labmap .pbox{fill:var(--paper-tint);stroke:var(--hair);stroke-width:1.5;}
.labmap .pwire{stroke:var(--kpmg);stroke-width:2;fill:none;}
.labmap .pbox-txt{fill:var(--ink);font-size:15px;}
.labmap .lm-cap{fill:var(--slate);font-size:15px;}

/* ---- bottling-factory figure (slide 4) ---------------------------------- */
.slide__body--wide{grid-column:1 / 13;min-width:0;}
.title--wide{max-width:none;margin:0 0 14px;}
.factory{margin:0;display:flex;flex-direction:column;align-items:center;}
.factory .labfac{display:block;width:100%;max-width:1540px;height:auto;margin:0 auto;}
/* factory diagram internals (moved out of the inline svg <style>) */
.labfac{font-family:'Inter',sans-serif;}
.labfac .zone{fill:#FFFFFF;stroke:#E3E7EF;stroke-width:1.5;}
.labfac .zone-tint{fill:#F4F6FA;stroke:#E3E7EF;stroke-width:1.5;}
.labfac .kick{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;
letter-spacing:.22em;fill:#5B6472;}
.labfac .kick-sub{font-family:'Inter',sans-serif;font-weight:400;font-size:12px;
letter-spacing:.02em;fill:#5B6472;}
.labfac .stage-card{fill:#FFFFFF;stroke:#00338D;stroke-width:2;}
.labfac .stage-title{font-family:'Inter',sans-serif;font-weight:600;font-size:16px;fill:#16181D;}
.labfac .stage-sub{font-family:'Inter',sans-serif;font-weight:400;font-size:11.5px;fill:#5B6472;}
.labfac .ctrl-bar{fill:#00338D;}
.labfac .ctrl-txt{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:12px;
letter-spacing:.04em;fill:#FFFFFF;}
.labfac .conv{stroke:#1E49E2;stroke-width:2;fill:none;}
.labfac .glyph-blue{stroke:#00338D;stroke-width:1.6;fill:none;}
.labfac .glyph-blue-f{fill:#00338D;}
.labfac .glyph-cobalt{stroke:#1E49E2;stroke-width:1.6;fill:none;}
.labfac .glyph-cobalt-f{fill:#1E49E2;}
.labfac .glyph-slate{stroke:#5B6472;stroke-width:1.6;fill:none;}
.labfac .glyph-slate-f{fill:#5B6472;}
.labfac .dev{fill:#F4F6FA;stroke:#E3E7EF;stroke-width:1.5;}
.labfac .dev-name{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:13px;fill:#16181D;}
.labfac .dev-sub{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:10px;
letter-spacing:.02em;fill:#5B6472;}
.labfac .accent-hmi{fill:#1E49E2;}
.labfac .accent-eng{fill:#00338D;}
.labfac .accent-hist{fill:#0A1A3F;}
.labfac .accent-strip-slate{fill:#5B6472;}
.factory__cap{margin:18px 0 0;font-size:19px;color:var(--slate);text-align:center;}

/* ===========================================================================
   COLD-OPEN / ATTRACT SCREEN — shown before slide 1, dismissed on any input.
   A living who-talks-to-whom graph: steady edges pulse, transient ones flicker.
   ========================================================================== */
.intro{position:absolute;inset:0;z-index:10;background:var(--navy);color:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px;cursor:pointer;
  opacity:1;transition:opacity .6s var(--ease);}
.intro--gone{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--ease),visibility 0s linear .6s;}
.intro .mark2{position:absolute;top:64px;left:64px;width:28px;height:28px;background:var(--kpmg);}
.intro-kicker{font-weight:600;font-size:20px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cobalt);margin:0 0 28px;}
.intro-q{font-weight:700;font-size:76px;line-height:1.06;letter-spacing:-.02em;
  color:var(--paper);margin:0;max-width:19ch;}
.intro-graph{width:min(1080px,88%);height:auto;margin:40px 0 30px;}
.intro-credit{font-size:21px;line-height:1.65;color:rgba(255,255,255,.6);margin:0;}
.intro-hint{position:absolute;bottom:60px;font-size:20px;color:rgba(255,255,255,.5);
  animation:introhint 2.4s var(--ease) infinite;}
@keyframes introhint{0%,100%{opacity:.28}50%{opacity:.85}}

.intro-graph .gn{fill:var(--paper);animation:gpulse 3.6s var(--ease) infinite;}
.intro-graph .gn.hub{fill:var(--cobalt);}
.intro-graph .ek{stroke:var(--cobalt);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:2 9;animation:gflow 2.8s linear infinite;}
.intro-graph .et{stroke:#9fb0e8;stroke-width:1.6;stroke-dasharray:5 6;opacity:0;
  animation:gtrans 5.5s var(--ease) infinite;}
@keyframes gflow{to{stroke-dashoffset:-44;}}
@keyframes gtrans{0%{opacity:0}15%{opacity:.55}45%{opacity:.55}60%{opacity:0}100%{opacity:0}}
@keyframes gpulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---- reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .slide,[data-beat],.rail,.boot-hint,.burn,
  .prune .pedge-drop line{transition:opacity .12s linear !important;}
  .slide{transform:none !important;}
  [data-beat]{transform:none !important;}
  .bar-maint,.maint-extra,.bar-neutral,.whisk-neutral,
  #leakRect,#drainRect,#connector{transition-duration:.12s !important;}
  .intro,.intro--gone{transition-duration:.12s !important;}
  .intro-graph .ek,.intro-graph .et,.intro-graph .gn,.intro-hint{animation:none !important;}
  .intro-graph .et{opacity:.4;}
  .intro-graph .gn{opacity:.9;}
}