:root{--bp:#0E3B7A;--ink:#EAF2FF;--dim:#9CC3FF;--acc:#FFD166;--ok:#9CFFB0}
.deck{--f2:var(--ink);--f4:var(--dim);--yel:var(--acc);--grn:var(--ok);--hi:var(--ink);--mut:var(--dim);--tx:#cfe0ff;--ln:rgba(234,242,255,.5);--node:rgba(14,59,122,.9)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#071f45;color:var(--ink);font-family:'Stack Sans',sans-serif}
.deck{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
.slide{display:none;position:relative;width:min(100vw,calc(100vh * 16 / 9));aspect-ratio:16/9;container-type:inline-size;overflow:hidden;padding:5cqw 6cqw;
  background:var(--bp);background-image:linear-gradient(#ffffff10 1px,transparent 1px),linear-gradient(90deg,#ffffff10 1px,transparent 1px),linear-gradient(#ffffff22 1px,transparent 1px),linear-gradient(90deg,#ffffff22 1px,transparent 1px);background-size:1.5cqw 1.5cqw,1.5cqw 1.5cqw,7.5cqw 7.5cqw,7.5cqw 7.5cqw}
.slide::before{content:'';position:absolute;inset:1.2cqw;border:.12cqw solid rgba(234,242,255,.7);pointer-events:none}
.slide.on{display:block}
.kick{font:500 1.1cqw 'Stack Mono';letter-spacing:.4cqw;text-transform:uppercase;color:var(--dim)}
h1{font:800 11cqw/.9 'Stack Slab';letter-spacing:.8cqw;margin:1.5cqw 0 0;text-transform:uppercase}
h2{font:800 4.6cqw/1 'Stack Slab';letter-spacing:.2cqw;margin:.8cqw 0 2.4cqw;text-transform:uppercase}
.lede{font:400 2.6cqw/1.3 'Stack Sans';color:var(--tx);max-width:60cqw}.by{font:500 1.4cqw 'Stack Mono';color:var(--dim);margin-top:3cqw}.by span{color:var(--acc)}
.tb{position:absolute;right:1.2cqw;bottom:1.2cqw;display:grid;grid-template-columns:repeat(3,auto);border-left:.12cqw solid var(--ink);border-top:.12cqw solid var(--ink);font:500 1cqw 'Stack Mono'}
.tb div{padding:.6cqw 1cqw;border-right:.08cqw solid rgba(234,242,255,.5)}.tb small{display:block;font-size:.7cqw;color:var(--dim)}
ul,ol{margin:0;padding-left:2cqw}.big li{font:400 2.6cqw/1.35 'Stack Sans';margin:.9cqw 0}.small li{font:400 1.6cqw/1.4 'Stack Sans';margin:.5cqw 0;color:var(--tx)}
.cols{columns:2;column-gap:4cqw;margin-top:1.5cqw}
code{font:1.3cqw 'Stack Mono';color:var(--acc)}
.quote{font:italic 400 2.2cqw/1.35 'Stack Serif';max-width:70cqw;color:var(--tx)}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;margin-top:2cqw}
.three div{border:.14cqw solid var(--ln);padding:1.6cqw;background:rgba(255,255,255,.04)}
.three b{display:block;font:800 2.2cqw 'Stack Slab';letter-spacing:.1cqw;text-transform:uppercase}.three span{font:400 1.5cqw/1.35 'Stack Sans';color:var(--tx)}
.three.tall div{min-height:13cqw}
.note{font:500 1.35cqw/1.45 'Stack Mono';color:var(--dim);margin-top:2cqw;max-width:80cqw}.note b{color:var(--ink)}.note a{color:var(--acc)}
.layers{display:flex;flex-direction:column;gap:.8cqw}
.layers div{display:grid;grid-template-columns:24cqw 1fr;align-items:center;border:.14cqw solid var(--ln);padding:1cqw 1.4cqw;background:rgba(255,255,255,.04)}
.layers b{font:800 1.9cqw 'Stack Slab';text-transform:uppercase;letter-spacing:.15cqw}.layers span{font:500 1.4cqw 'Stack Mono';color:var(--tx)}
.flowbox{display:flex;align-items:center;flex-wrap:wrap;gap:1cqw 0;margin:2cqw 0}
.flowbox .n{font:600 1.7cqw 'Stack Mono';border:.16cqw solid var(--ink);padding:1cqw 1.4cqw;background:var(--node)}
.flowbox .e{padding:0 1cqw;text-align:center}.flowbox .e i{display:block;font:500 1.1cqw 'Stack Mono';font-style:normal;color:var(--acc)}.flowbox .e::after{content:'──▶';font:700 1.5cqw 'Stack Mono'}
.code{font:1.35cqw/1.5 'Stack Mono';background:rgba(0,0,0,.25);border:.12cqw solid var(--ln);padding:1.4cqw 1.8cqw;margin:0;white-space:pre;color:var(--ink)}
.viz{position:relative;width:100%;height:calc(100cqw * 330 / 1700 * 0.88);margin:1cqw 0}.viz.short{height:calc(100cqw * 330 / 1700 * 0.7)}
.vz-inner{position:absolute;left:0;top:0;width:1700px;height:330px;transform-origin:0 0}
.shots{display:grid;grid-template-columns:2fr 2fr 1fr 1.1fr;gap:1.2cqw;align-items:start}
.shots img{width:100%;border:.14cqw solid var(--ln);display:block}.shots img.tall{aspect-ratio:9/18;object-fit:cover;object-position:top}.shots img.sq{aspect-ratio:1;object-fit:cover;border-radius:50%}
.nums{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6cqw;margin-top:3cqw}
.nums b{display:block;font:800 5.6cqw/1 'Stack Slab'}.nums span{font:400 1.4cqw/1.3 'Stack Sans';color:var(--tx)}
.try{list-style:none;padding:0}.try li{display:flex;gap:2cqw;align-items:baseline;margin:1.2cqw 0}.try code{font-size:1.6cqw;background:var(--node);border:.12cqw solid var(--ln);padding:.6cqw 1cqw;white-space:nowrap}.try span{font:400 1.8cqw 'Stack Sans';color:var(--tx)}
.f{opacity:0;transform:translateY(1cqw);transition:opacity .35s,transform .35s}.f.in{opacity:1;transform:none}
.dk-ui{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:10px;align-items:center;font:600 14px 'Stack Mono';color:var(--dim);z-index:50}
.dk-ui button{width:44px;height:44px;border-radius:50%;border:1px solid var(--ln);background:rgba(7,31,69,.8);color:var(--ink);font-size:24px}
.dk-bar{position:fixed;left:0;right:0;top:0;height:3px;z-index:50}.dk-bar i{display:block;height:100%;background:var(--acc)}
/* phones in portrait: a readable scrolling list, all builds shown */
@media (max-aspect-ratio:1/1){
  .deck{position:static;display:block;padding:0 0 80px}
  .slide{display:block;width:100%;aspect-ratio:auto;min-height:0;padding:28px 22px 30px;border-bottom:4px solid #071f45;container-type:inline-size}
  .slide::before{inset:8px}
  .kick{font-size:12px;letter-spacing:3px}h1{font-size:64px}h2{font-size:32px;margin:6px 0 16px}
  .lede{font-size:20px}.by{font-size:13px}.tb{position:static;margin-top:18px;font-size:10px}.tb small{font-size:8px}
  .big li{font-size:19px}.small li{font-size:15px}.cols{columns:1}code{font-size:13px}.quote{font-size:18px}
  .three{grid-template-columns:1fr;gap:10px}.three b{font-size:20px}.three span{font-size:15px}.three.tall div{min-height:0}
  .note{font-size:13px}.layers div{grid-template-columns:1fr;gap:4px}.layers b{font-size:17px}.layers span{font-size:13px}
  .flowbox .n{font-size:14px;padding:8px 10px}.flowbox .e i{font-size:11px}.flowbox .e::after{font-size:13px}
  .code{font-size:11px;overflow-x:auto}.nums{grid-template-columns:1fr 1fr;gap:14px}.nums b{font-size:40px}.nums span{font-size:13px}
  .try li{flex-direction:column;gap:4px}.try code{font-size:12px;white-space:normal;word-break:break-all}.try span{font-size:15px}
  .shots{grid-template-columns:1fr 1fr}.f{opacity:1;transform:none}.dk-ui{display:none}
}

.notes{display:none}
.two{display:grid;grid-template-columns:1.35fr 1fr;gap:3cqw;align-items:start}
.flipbox{position:relative;aspect-ratio:16/10;border:.14cqw solid var(--ln);overflow:hidden;background:#000}.flipbox img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.archlive{display:flex;flex-direction:column;gap:.7cqw}
.al-row{display:grid;grid-template-columns:15cqw 1fr;align-items:center;gap:1cqw}
.al-row b{font:800 1.5cqw 'Stack Slab';letter-spacing:.12cqw;text-transform:uppercase}
.al-row div{display:flex;flex-wrap:wrap;gap:.5cqw}
.al-row span{font:500 1.05cqw 'Stack Mono';border:.12cqw solid var(--ln);padding:.35cqw .7cqw;background:var(--node);transition:background .2s}
.al-row span.was{border-color:var(--ok)}.al-row span.hot{background:var(--acc);color:#0E3B7A;border-color:var(--acc)}
.dk-notes{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(3,14,34,.96);border-top:2px solid var(--acc);padding:14px 22px 70px;display:none;font:15px/1.45 'Stack Sans'}
.dk-notes.on{display:block}.nt-t{display:flex;justify-content:space-between;font:600 14px 'Stack Mono';color:var(--acc)}.dk-notes p{font-size:19px;margin:8px 0;max-width:70em}.nt-next{font:13px 'Stack Mono';color:var(--dim)}
@media print{
  @page{size:16in 9in;margin:0}
  html,body{background:#0E3B7A}
  .deck{position:static;display:block}
  .slide{display:block!important;width:16in;height:9in;aspect-ratio:auto;page-break-after:always;break-after:page}
  .f{opacity:1!important;transform:none!important}
  .dk-ui,.dk-bar,.dk-notes,.rv-fab{display:none!important}
}
@media (max-aspect-ratio:1/1){.two{grid-template-columns:1fr}.al-row{grid-template-columns:1fr}.al-row b{font-size:15px}.al-row span{font-size:12px;padding:4px 7px}}
.fam{display:grid;grid-template-columns:1fr 1fr;gap:.9cqw 2.5cqw;margin-top:.5cqw}
.fam div{font:500 1.35cqw/1.35 'Stack Mono';color:var(--tx);border-left:.3cqw solid var(--acc);padding:.4cqw 1cqw}.fam b{display:block;font:800 1.6cqw 'Stack Slab';letter-spacing:.15cqw;text-transform:uppercase;color:var(--ink)}
.chain{display:flex;flex-direction:column;align-items:flex-start;gap:.3cqw;font:600 1.5cqw 'Stack Mono'}.chain span{border:.14cqw solid var(--ink);padding:.6cqw 1cqw;background:var(--node)}.chain i{font-style:normal;color:var(--acc);padding-left:2cqw}
.two .code{font-size:1.15cqw}
.shots.three-up{grid-template-columns:1fr 1fr 1fr;max-width:62cqw}.shots.five{grid-template-columns:2fr 2fr 2fr 1fr 1.1fr}
.disp{display:flex;flex-direction:column;gap:.8cqw}.disp span{font:700 1.8cqw 'Stack Mono';padding:.8cqw 1.2cqw;border:.16cqw solid var(--ln)}.disp .ok{border-color:var(--ok);color:var(--ok)}.disp .bad{border-color:#ff8a7a;color:#ff8a7a}
/* Caravan's own identity: paper, ink, orange */
.slide.cara{--bp:#f5efe2;--ink:#17201e;--dim:#5d625b;--acc:#f2572a;--ok:#4e7a45;--tx:#2a3431;--ln:rgba(23,32,30,.3);--node:#fffaf0;--f2:#17201e;--f4:#5d625b;--yel:#f2572a;--grn:#4e7a45;--hi:#17201e;--mut:#5d625b;
  background:#f5efe2;background-image:linear-gradient(90deg,transparent 0,transparent calc(100% - .8cqw),#f2572a calc(100% - .8cqw));color:#17201e}
.slide.cara::before{border-color:rgba(23,32,30,.35)}.slide.cara h2{color:#17201e}.slide.cara .kick{color:#c93f1c}
.slide.cara .code{background:#13201e;color:#eef1e8;border-color:#13201e}.slide.cara .disp .bad{color:#c93f1c;border-color:#c93f1c}.slide.cara .disp .ok{color:#4e7a45;border-color:#4e7a45}
@media (max-aspect-ratio:1/1){.fam{grid-template-columns:1fr}.fam div{font-size:13px}.fam b{font-size:15px}.chain{font-size:13px}.disp span{font-size:15px}.shots.three-up,.shots.five{grid-template-columns:1fr 1fr}.two .code{font-size:11px}}
.shots.three-up{max-width:52cqw}.shots.three-up img{max-height:22cqw;object-fit:cover;object-position:top}.shots.three-up img.sq{aspect-ratio:1;max-height:17cqw}
.shots.five img{max-height:24cqw;object-fit:cover;object-position:top}

/* embedded in presenter.html: the slide only */
html.embed .dk-ui,html.embed .dk-bar,html.embed .dk-notes,html.embed .rv-fab,html.embed [class^="rv-"]{display:none!important}
/* questions slide */
.qa{display:grid;grid-template-columns:auto 1fr;gap:5vw;align-items:center;margin-top:3vh}
.qa img{width:min(32vh,26vw);height:auto;image-rendering:pixelated;border-radius:10px;box-shadow:0 1vh 4vh rgba(0,0,0,.25)}
.qa .qa-url{font-family:var(--mono,monospace);font-size:2.4vw;margin:0 0 2vh}
.qa .qa-links{font-size:1.6vw;line-height:1.7}

.shots.gal{grid-template-columns:repeat(4,1fr)}.shots.gal img{aspect-ratio:16/9;object-fit:cover;object-position:0 0}
.shots.three-up.cw{max-width:none;margin-top:.8cqw;grid-template-columns:repeat(3,1fr)}.shots.three-up.cw img{aspect-ratio:16/7;object-fit:cover;object-position:0 0;max-height:8.5cqw}
.two.cwtop .flipbox{max-height:17cqw}
/* the live 3D contribution calendar on "What it produced" */
.cal3d{position:relative;margin-top:1.2cqw;height:25cqw}
.cal3d canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
.cal3d canvas:active{cursor:grabbing}
.cal3d-cap{position:absolute;left:0;bottom:0;font:500 1.25cqw/1.3 'Stack Mono',monospace;color:var(--dim);pointer-events:none}
.cal3d-cap b{display:block;font:800 2.4cqw/1.1 'Stack Slab';color:var(--acc)}
.cal3d.nogl{display:none}
@media (max-width:760px){.cal3d{height:52vw;margin-top:18px}.cal3d-cap{font-size:12px}.cal3d-cap b{font-size:22px}}
.cal3d .cal3d-mon{position:absolute;transform:translate(-50%,4px);font:600 1.05cqw 'Stack Mono',monospace;color:var(--dim);pointer-events:none;text-shadow:0 1px 4px #0008}