/* The Lab as a keynote (venture-lab P8–P9; docs/venture-lab/keynote-direction.md). A dark house, a lit slide per app,
   and you are watching from the presenter's laptop. The house is dark and the slides are lit in every look, so each
   slide takes the paper tokens and its words read at AA whatever the page wears. The bezel is a box-shadow spread:
   no measured box moves, and the container breakpoint in lab.css still decides one column or two.
   Tropes, never people. Nothing here makes a sound. */

/* the house */
#lab .lab-shelf{--house:#08090b;--paper:#08090b;--ink:#f3f2ea;--mute:#a5a59c;--line:#f3f2ea;--shadow:#d2f783;
  --bez:clamp(14px,2.6vw,32px);position:relative;padding-block:clamp(36px,6vw,72px) clamp(48px,7vw,88px);
  background:radial-gradient(ellipse 60% 420px at 50% 0,rgba(243,242,234,.09),transparent 70%),var(--house);color:var(--ink);
  box-shadow:0 0 0 100vmax var(--house);clip-path:inset(0 -100vmax)}
@media (min-width:980px){#lab .lab-shelf{grid-template-columns:216px minmax(0,1fr);column-gap:clamp(44px,4.6vw,64px)}}
#lab .lab-rail li,#lab .lab-rail ol{border-color:rgba(243,242,234,.22)}
@media (max-width:979px){#lab .lab-rail a{border-color:rgba(243,242,234,.4)}}
#lab .lab-reef{padding-top:var(--bez)}

/* off screen the Lab's animations pause (keynote.js sets kn-away). Paused is not stopped: each one resumes where it left off */
#lab.kn-away *, #lab.kn-away *::before, #lab.kn-away *::after { animation-play-state: paused !important }

/* the opening card, house lights down */
.kn-open{grid-column:1/-1;margin:0 0 calc(var(--bez) + clamp(28px,5vw,56px));text-align:center}
.kn-open .kn-eye{margin:0;font:700 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.kn-open .kn-title{margin:14px auto 0;max-width:18ch;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(30px,6.4vw,76px);line-height:1.02;text-wrap:balance}
.kn-open .kn-title em{font-style:normal;color:var(--lime)}
.kn-open .kn-sub{margin:16px auto 0;max-width:44ch;color:var(--mute);font-size:clamp(15px,1.4vw,18px)}

/* the slides: lit screens with a bezel */
#lab .lab-coral{--paper:#f7f6f1;--ink:#0b0b0c;--mute:#55554f;--line:#0b0b0c;--shadow:#0b0b0c;--plate:#fff;--acc:var(--lime);
  position:relative;padding:clamp(20px,3vw,36px) 0 clamp(24px,4vw,44px);border-top:0;
  margin-bottom:calc(2*var(--bez) + clamp(32px,6vw,72px));background:var(--paper);color:var(--ink);
  box-shadow:0 0 0 var(--bez) var(--paper),0 0 0 calc(var(--bez) + 2px) #2b2c31,0 24px 90px calc(var(--bez) + 8px) rgba(210,247,131,.07)}
#lab .lab-coral:first-child{padding-top:clamp(20px,3vw,36px)}
#lab #lab-datareef{--acc:var(--cyan)}
#lab #lab-innernet{--acc:var(--lime)}
#lab #lab-dossier{--acc:var(--yellow)}
#lab #lab-met{--acc:var(--pink)}
#lab #lab-delicious{--acc:var(--red)}
#lab #lab-superstyleguide{--acc:var(--lav)}
#lab #lab-tango{--acc:var(--lime)}

/* the product page inside each slide: an eyebrow, a giant name, one line, a Visit link, spec tiles, a footnote */
#lab .lab-coral .lab-top{justify-content:center}
#lab .lab-coral h3{text-align:center}
#lab .lab-coral h3::after{content:"";display:block;width:min(64%,440px);height:.34em;margin:.06em auto 0;background:var(--acc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V8H162V30A6 6 0 0 1 150 30V8H98V16A4 4 0 0 1 90 16V8H42V22A6 6 0 0 1 30 22V8H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V8H162V30A6 6 0 0 1 150 30V8H98V16A4 4 0 0 1 90 16V8H42V22A6 6 0 0 1 30 22V8H0Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
#lab .lab-coral p.lab-blurb::after{content:"¹";font-size:.6em;vertical-align:super;line-height:0}
#lab .lab-coral .lab-host{background:var(--acc)}
#lab .lab-coral .lab-host::before{content:"Visit";font-weight:400;opacity:.8}
#lab .lab-coral .lab-pts{display:grid;gap:10px}
#lab .lab-coral .lab-pts li{padding:14px 16px;background:var(--plate);border:2px solid var(--line);border-radius:14px;box-shadow:4px 4px 0 var(--shadow)}
#lab .lab-coral .lab-pts li:first-child{background:var(--acc)}
#lab .lab-coral .lab-pts li:first-child::before{color:#0b0b0c}
.kn-fine{margin:clamp(18px,3cqi,28px) auto 0;max-width:60ch;text-align:center;font:400 12px/1.5 var(--mono);color:var(--mute)}

/* the acid is motion only: the name drips in and the plate melts in as the slide lands */
@media (prefers-reduced-motion:no-preference){
  .kn-on .lab-coral h3::after{transition:clip-path .9s cubic-bezier(.3,1.4,.5,1) .15s}
  .kn-on .lab-coral:not(.kn-in) h3::after{clip-path:inset(0 0 78% 0)}
  .kn-on .lab-coral .lab-hero>figure{transition:filter 1.1s ease,transform 1.1s cubic-bezier(.2,1.3,.4,1),opacity .8s ease}
  .kn-on .lab-coral:not(.kn-in) .lab-hero>figure{filter:saturate(2.6) hue-rotate(80deg);transform:skewY(-3deg) scale(.94);opacity:.35}
}

/* the speaker notes: real text in every slide. Inline below each slide on small screens; on a big screen they move to
   the presenter view and the inline copy stays for screen readers. */
.kn-note{margin:clamp(20px,3cqi,32px) 0 0;padding:12px 14px;background:#141518;color:#f3f2ea;border-left:4px solid var(--acc);font:400 13px/1.5 var(--mono)}
.kn-note b{display:block;margin-bottom:3px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a5a59c}

/* the presenter view: the presenter's laptop, turned to face you */
.kn-pv{display:none}
@media (min-width:980px) and (min-height:760px){
  .lab-shelf.kn-on .kn-pv{display:block;margin:0 0 18px;padding:12px;background:#141518;color:#f3f2ea;border:1.5px solid #34353b;border-radius:10px;
    font:700 11px/1.35 var(--mono);text-transform:none;letter-spacing:0}
  .lab-shelf.kn-on .kn-note{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}
.kn-pv-h{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:#a5a59c}
.kn-rec{color:#ff6b68}
.kn-rec::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#ff6b68;vertical-align:1px}
.kn-warn{margin:8px 0 0;padding:6px 8px;background:#f6f08a;color:#0b0b0c;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.kn-pv-t{display:flex;justify-content:space-between;margin:10px 0 0;font-size:20px;letter-spacing:.02em}
.kn-pv-t span:last-child{color:#a5a59c;font-size:12px;align-self:end}
.kn-pv-note{margin:10px 0 0;padding:8px 0 0;border-top:1px solid #34353b;font-weight:400;font-size:12px;line-height:1.5;min-height:7.5em}
.kn-pv-next{margin:8px 0 0;color:#a5a59c;font-weight:400}
.kn-pv-next b{color:#f3f2ea}
.kn-sign{display:block;margin:10px 0 0;padding:6px 0;border:2px solid #5a3436;border-radius:6px;color:#5a3436;text-align:center;
  font:900 12px/1 "Archivo",system-ui,sans-serif;font-stretch:125%;letter-spacing:.18em;text-transform:uppercase}
.kn-clap .kn-sign{border-color:#ff6b68;color:#ff6b68;box-shadow:0 0 18px rgba(255,107,104,.55),inset 0 0 10px rgba(255,107,104,.35)}
@media (prefers-reduced-motion:no-preference){
  .kn-rec::before{animation:kn-blink 1.2s steps(2,jump-none) infinite}
  .kn-sign{transition:color .2s,border-color .2s,box-shadow .2s}
}
@keyframes kn-blink{50%{opacity:0}}

/* stage moments: a visual gag inside each hero figure, aria-hidden, its punchline told in that slide's note */
#lab .lab-hero>figure{position:relative}
.kn-moment{display:none}
.kn-on .kn-moment{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit;font:700 12px/1.2 var(--mono);color:#0b0b0c}
.kn-moment>*{position:absolute;opacity:0}
.kn-save{left:50%;bottom:10px;max-width:calc(100% - 20px);width:max-content;padding:7px 10px;background:var(--acc);color:#0b0b0c;border:2px solid #0b0b0c;
  box-shadow:3px 3px 0 #0b0b0c;font:700 11px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.04em;text-align:center;transform:translateX(-50%)}
.kn-saved .kn-save{opacity:1}
.kn-still .kn-moment>*:not(.kn-save){display:none}
@media (prefers-reduced-motion:no-preference){
  .kn-save{transition:opacity .3s,transform .45s cubic-bezier(.2,1.6,.4,1)}
  .kn-moment:not(.kn-saved) .kn-save{transform:translateX(-50%) translateY(8px) scale(.9)}
}

/* 19 Data Reef: the countdown slips into a hold */
.kn-cd,.kn-hold{left:50%;top:44%;padding:8px 14px;background:rgba(11,11,12,.86);color:#a3e7f4;font:700 clamp(18px,4cqi,34px)/1 var(--mono);transform:translate(-50%,-50%)}
.kn-hold{color:#ff6b68;white-space:nowrap;font-size:clamp(14px,3cqi,24px)}
.kn-run .kn-cd{opacity:1}
.kn-run.kn-held .kn-cd{opacity:0}
.kn-held .kn-hold{opacity:1}
.kn-saved .kn-hold{opacity:0;transition:opacity .4s}

/* 01 The InnerNet: the chant, three times, louder */
.kn-stamp{padding:6px 10px;background:var(--acc);border:2px solid #0b0b0c;box-shadow:3px 3px 0 #0b0b0c;font:900 clamp(12px,2.6cqi,20px)/1 "Archivo",system-ui,sans-serif;font-stretch:125%;text-transform:uppercase;white-space:nowrap}
.kn-stamp:nth-child(1){left:8%;top:14%;font-size:clamp(11px,2cqi,15px)}
.kn-stamp:nth-child(2){right:8%;top:32%;font-size:clamp(13px,2.8cqi,21px)}
.kn-stamp:nth-child(3){left:0;right:0;top:52%;width:max-content;margin:auto;font-size:clamp(16px,3.6cqi,28px)}
.kn-drop{width:9px;height:13px;top:-16px;background:#a3e7f4;border:1.5px solid #0b0b0c;border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.kn-drop:nth-of-type(1){left:22%}
.kn-drop:nth-of-type(2){left:58%}
.kn-drop:nth-of-type(3){left:81%}
.kn-run .kn-stamp{animation:kn-stamp 2.4s cubic-bezier(.2,1.5,.4,1) both}
.kn-run .kn-stamp:nth-child(2){animation-delay:.45s}
.kn-run .kn-stamp:nth-child(3){animation-delay:.9s}
.kn-run .kn-drop{animation:kn-drop 1.1s ease-in 1.5s both}
.kn-run .kn-drop:nth-of-type(2){animation-delay:1.7s}
.kn-run .kn-drop:nth-of-type(3){animation-delay:1.9s}
@keyframes kn-stamp{0%{opacity:0;transform:scale(.5) rotate(-8deg)}14%{opacity:1;transform:scale(1.08) rotate(-3deg)}22%,80%{opacity:1;transform:scale(1) rotate(-3deg)}100%{opacity:0;transform:scale(1) rotate(-3deg)}}
@keyframes kn-drop{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(240px)}}

/* 02 Dossier: three products, which turn out to be one file */
.kn-card{left:50%;top:40%;width:min(64%,250px);padding:10px 12px;background:#fff;border:2px solid #0b0b0c;box-shadow:4px 4px 0 #0b0b0c;text-align:center;transform:translate(-50%,-50%)}
.kn-card:nth-child(1){--x:-38%;--r:-6deg}
.kn-card:nth-child(2){--x:-50%;--r:0deg;--y:-14px}
.kn-card:nth-child(3){--x:-62%;--r:6deg}
.kn-run .kn-card{animation:kn-card 2.6s cubic-bezier(.3,1.3,.5,1) both}
.kn-run .kn-card:nth-child(2){animation-delay:.35s}
.kn-run .kn-card:nth-child(3){animation-delay:.7s}
.kn-one{left:50%;top:40%;padding:10px 14px;background:var(--acc);border:2px solid #0b0b0c;box-shadow:4px 4px 0 #0b0b0c;font:900 clamp(13px,2.8cqi,20px)/1.1 "Archivo",system-ui,sans-serif;font-stretch:125%;text-transform:uppercase;white-space:nowrap;transform:translate(-50%,-50%)}
.kn-run .kn-one{animation:kn-one 1.6s cubic-bezier(.2,1.6,.4,1) 2.4s both}
@keyframes kn-card{0%{opacity:0;transform:translate(var(--x),-50%) translateY(30px) rotate(var(--r))}
  15%,62%{opacity:1;transform:translate(var(--x),-50%) translateY(var(--y,0px)) rotate(var(--r))}
  90%,100%{opacity:0;transform:translate(-50%,-50%) rotate(0deg) scale(.9)}}
@keyframes kn-one{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}25%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}

/* 03 Met.: the unbreakable glass cracks */
.kn-label{left:50%;top:22%;padding:6px 10px;background:#fff;border:2px solid #0b0b0c;font:900 clamp(13px,3cqi,22px)/1 "Archivo",system-ui,sans-serif;font-stretch:125%;text-transform:uppercase;transform:translateX(-50%)}
.kn-crack{inset:0;width:100%;height:100%;overflow:visible}
.kn-crack path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.kn-crack .a{stroke:#0b0b0c;stroke-width:1.3}
.kn-crack .b{stroke:#fff;stroke-width:.55}
.kn-run .kn-label{animation:kn-label 2.4s ease both}
.kn-run .kn-crack{opacity:1}
.kn-run .kn-crack path{animation:kn-draw .5s cubic-bezier(.6,0,.9,.5) 1s forwards}
.kn-saved .kn-crack{opacity:.55;transition:opacity .6s}
@keyframes kn-label{0%{opacity:0;transform:translateX(-50%) translateY(-8px)}12%,70%{opacity:1;transform:translateX(-50%)}76%{transform:translateX(-50%) rotate(-4deg)}100%{opacity:0;transform:translateX(-50%) translateY(40px) rotate(-14deg)}}
@keyframes kn-draw{to{stroke-dashoffset:0}}

/* 06 Delicious: the live demo crashes the whole page */
.kn-pill{left:50%;top:44%;padding:9px 14px;background:#0b0b0c;color:#fff;border-radius:999px;font:700 clamp(12px,2.4cqi,16px)/1 var(--mono);white-space:nowrap;transform:translate(-50%,-50%)}
.kn-run .kn-pill{animation:kn-pill 1.1s ease both}
@keyframes kn-pill{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}25%,80%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}}
.kn-bsod{position:fixed;inset:0;z-index:90;display:grid;align-content:center;gap:14px;padding:var(--pad);background:#1b3fd1;color:#fff;pointer-events:none;font:400 clamp(13px,1.4vw,18px)/1.5 var(--mono)}
.kn-bsod p{margin:0;max-width:62ch}
.kn-bsod b{justify-self:start;padding:2px 8px;background:#fff;color:#1b3fd1}

/* 05 SuperStyleGuide: a style review of the presenter's black sweater */
.kn-review{left:50%;top:38%;width:min(78%,300px);padding:12px;background:#fff;border:2px solid #0b0b0c;box-shadow:4px 4px 0 #0b0b0c;transform:translate(-50%,-50%)}
.kn-review b{display:block;margin-bottom:4px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#55554f}
.kn-review span{display:block;font:900 clamp(13px,2.6cqi,18px)/1.15 "Archivo",system-ui,sans-serif;font-stretch:120%;text-transform:uppercase}
.kn-review em{display:flex;gap:6px;margin-top:10px}
.kn-review i{flex:1;height:22px;border:1.5px solid #0b0b0c;border-radius:4px;background:#0b0b0c}
.kn-review i:nth-child(2){background:#1a1a1c}
.kn-review i:nth-child(3){background:#111}
.kn-review i:nth-child(4){background:#0e0e10}
.kn-review i:nth-child(5){background:#161618}
.kn-run .kn-review{animation:kn-review 3s cubic-bezier(.2,1.3,.4,1) both}
.kn-run .kn-review i{animation:kn-swatch .5s ease forwards}
.kn-run .kn-review i:nth-child(1){animation-delay:1.1s;--to:#ffaeb4}
.kn-run .kn-review i:nth-child(2){animation-delay:1.25s;--to:#f6f08a}
.kn-run .kn-review i:nth-child(3){animation-delay:1.4s;--to:#d2f783}
.kn-run .kn-review i:nth-child(4){animation-delay:1.55s;--to:#a3e7f4}
.kn-run .kn-review i:nth-child(5){animation-delay:1.7s;--to:#c9bdf6}
@keyframes kn-review{0%{opacity:0;transform:translate(-50%,-40%)}12%,82%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-50%,-50%)}}
@keyframes kn-swatch{to{background:var(--to)}}

/* 04 Tango: the rock anthem we could not license */
.kn-lower{left:10px;right:10px;bottom:54px;display:flex;align-items:center;gap:10px;padding:8px 10px;background:#0b0b0c;color:#f3f2ea;font-size:clamp(9px,1.6cqi,12px);letter-spacing:.04em;text-transform:uppercase}
.kn-eq{display:flex;align-items:flex-end;gap:2px;height:18px;flex:none}
.kn-eq i{width:3px;height:100%;background:var(--acc);transform-origin:bottom;transform:scaleY(.3)}
.kn-run .kn-lower{animation:kn-lower 3.2s cubic-bezier(.2,1.2,.4,1) both}
.kn-run .kn-eq i{animation:kn-eq .42s ease-in-out 7 alternate}
.kn-run .kn-eq i:nth-child(2){animation-delay:.1s}
.kn-run .kn-eq i:nth-child(3){animation-delay:.2s}
.kn-run .kn-eq i:nth-child(4){animation-delay:.05s}
.kn-run .kn-eq i:nth-child(5){animation-delay:.15s}
@keyframes kn-lower{0%{opacity:0;transform:translateX(-24px)}10%,85%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes kn-eq{to{transform:scaleY(1)}}

/* the crowd: an audience of one, and the presenter can see you */
.kn-crowd{margin:0 0 0;padding:clamp(8px,2vw,20px) 0 0;text-align:center}
.kn-crowd .kn-sign{display:inline-block;margin:0 auto 18px;padding:8px 18px;font-size:14px}
.kn-heads{display:grid;gap:4px;justify-items:center;margin:0 auto;max-width:560px}
.kn-heads div{display:flex;justify-content:center;gap:4px}
.kn-heads i{display:block;width:clamp(18px,4.4vw,34px);height:clamp(22px,5.4vw,42px);
  background:radial-gradient(circle at 50% 30%,#2b2c31 0 27%,transparent 28%),radial-gradient(ellipse 50% 42% at 50% 100%,#2b2c31 0 98%,transparent 100%)}
.kn-heads div:nth-child(2) i{opacity:.8}
.kn-heads div:nth-child(3) i{opacity:.62}
.kn-heads i.kn-you{position:relative;z-index:2;background:radial-gradient(circle at 50% 30%,#d2f783 0 27%,transparent 28%),radial-gradient(ellipse 50% 42% at 50% 100%,#d2f783 0 98%,transparent 100%);opacity:1}
.kn-heads i.kn-you::after{content:"← you";position:absolute;z-index:1;left:calc(100% + 4px);top:22%;padding:3px 5px;white-space:nowrap;font:700 11px/1 var(--mono);color:#d2f783;background:#0b0b0c;border:1px solid #d2f783}
.kn-crowd p{margin:16px auto 0;max-width:44ch;color:var(--mute);font-size:15px}
.kn-clapbtn{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:16px;padding:0 22px;background:var(--lime);color:#0b0b0c;border:2px solid #0b0b0c;
  box-shadow:4px 4px 0 #f3f2ea;font:900 15px/1 "Archivo",system-ui,sans-serif;font-stretch:125%;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.kn-clapbtn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #f3f2ea}
.kn-crowd p.kn-claps{min-height:1.5em;margin-top:10px;color:var(--ink);font:700 12px/1.5 var(--mono)}
@media (prefers-reduced-motion:no-preference){
  .kn-hop{animation:kn-hop .5s cubic-bezier(.2,1.8,.4,1)}
  @keyframes kn-hop{40%{transform:translateY(-10px)}}
}

/* the encore: the house lights go down again, and it hands over to Shift Happens */
.kn-encore{position:relative;margin-top:clamp(56px,9vw,120px);padding:clamp(56px,9vw,120px) 0 clamp(64px,10vw,140px);text-align:center;
  background:#05040c;color:#f3f2ea;box-shadow:0 0 0 100vmax #05040c;clip-path:inset(0 -100vmax)}
.kn-encore .kn-eye{margin:0;font:700 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a5a59c}
.kn-omt{margin:18px 0 0;font-weight:900;font-stretch:125%;text-transform:uppercase;font-size:clamp(34px,8vw,104px);line-height:1;text-wrap:balance}
.kn-next{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:28px;padding:0 22px;background:#c9bdf6;color:#0b0b0c;border:2px solid #f3f2ea;
  box-shadow:4px 4px 0 #f3f2ea;font:900 15px/1 "Archivo",system-ui,sans-serif;font-stretch:125%;text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.kn-next:hover{text-decoration:underline;text-underline-offset:3px}