@import url('tokens.css?cb=20261028d');
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--ink);font-synthesis:none}
.reveal{font:var(--type-body)/1.4 var(--sans);color:var(--ink)}
.reveal .slides{text-align:left}
.reveal .slides section.leaf{width:1600px;height:900px;padding:0;background:var(--paper);overflow:hidden;box-sizing:border-box}
.reveal .slides section.stack{padding:0}
.reveal h1,.reveal h2,.reveal h3,.reveal p,.reveal figure{margin:0;font:inherit;color:inherit;text-transform:none;text-shadow:none}
/* Speaker notes are a read-aloud script, so its paragraphs need a gap the reset above removes. */
.reveal .speaker-notes p+p{margin-top:.75em}
.reveal h1,.reveal h2{font-weight:500;letter-spacing:-.065em;line-height:1.02}
.reveal h1{font-size:var(--type-display);line-height:.95;letter-spacing:-.07em}
.reveal h2{font-size:var(--type-title)}
.reveal h3{font-size:var(--type-subtitle);font-weight:500;line-height:1.08;letter-spacing:-.05em}
.reveal strong{font-weight:600}
.reveal img,.reveal svg{margin:0;border:0;box-shadow:none;max-width:100%;max-height:100%;background:none}
.reveal a{color:inherit;text-underline-offset:5px}
.reveal code{font-family:var(--mono)}
.reveal h1:focus,.reveal h2:focus{outline:none}

/* Chrome, injected by deck.js from each slide's data attributes. */
.rail{position:absolute;inset:0 auto 0 0;width:76px;border-right:1px solid var(--ink);background:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0 30px}
.rail-mark,.rail-number{font:var(--type-mark)/1 var(--pixel)}
.rail-title{writing-mode:vertical-rl;transform:rotate(180deg);font:500 var(--type-detail)/1 var(--sans);letter-spacing:-.04em}
.masthead{position:absolute;left:76px;right:0;top:0;height:70px;border-bottom:1px solid var(--ink);padding:0 48px;display:flex;align-items:center;justify-content:space-between;font:var(--type-label)/1 var(--mono)}
.wordmark{font:600 var(--type-detail)/1 var(--sans);letter-spacing:-.045em}
.slide-body{position:absolute;left:76px;right:0;top:70px;bottom:64px;padding:48px}
.slide-footer{position:absolute;left:76px;right:0;bottom:0;height:64px;border-top:1px solid var(--ink);padding:0 48px;display:flex;align-items:center;justify-content:space-between;font:var(--type-meta)/1 var(--mono)}
.deck-buttons{display:flex;gap:10px;align-items:center}
.deck-buttons button{width:46px;height:44px;padding:0;border:1px solid var(--ink);background:transparent;color:inherit;font:var(--type-detail)/1 var(--mono);cursor:pointer}
.deck-buttons button:hover{background:var(--ink);color:var(--paper)}
.deck-buttons button:disabled{opacity:.25;cursor:default}
.page-number{min-width:100px;text-align:center}
.reveal button:focus-visible,.reveal input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* New design, in progress: a full-bleed gradient slide without the rail or masthead. */
.reveal .slides section.leaf.blank{background:var(--white) url('assets/bg-gradient.webp?cb=20261027b') center/cover no-repeat}
/* New-design slides keep the footer's slide controls in Geist Mono, pinned bottom-right:
   buttons at the corner text's size, the page number smaller on the same baseline. The progress bar is hidden while one is showing. */
.blank .rail,.blank .masthead,.blank .slide-footer>span{display:none}
.reveal .blank .slide-footer{left:auto;right:40px;bottom:40px;height:auto;border:0;padding:0;font:400 var(--type-detail)/1 var(--mono);color:var(--white);mix-blend-mode:overlay}
.blank .deck-buttons{gap:24px;align-items:baseline}
.blank .deck-buttons button{position:relative;width:auto;height:auto;border:0;font:inherit}
/* The arrows draw small; an invisible 44px target keeps them easy to tap. */
.blank .deck-buttons button::before{content:'';position:absolute;inset:50% auto auto 50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.blank .deck-buttons button:hover{background:none;color:inherit;opacity:.6}
.blank .deck-buttons button:disabled:hover{opacity:.25}
.blank .page-number{min-width:0;font-size:var(--type-pager);font-variant-numeric:tabular-nums}
.reveal .blank button:focus-visible{outline-color:var(--white)}
.reveal:has(.slides section.blank.present) .progress{visibility:hidden}
/* The venue line pins to the top-left corner and the speaker's name to the bottom-left; the
   title and tagline center vertically. */
.blank .slide-body{inset:0;padding:40px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
/* New-design body text is Archivo Regular. Its capitals start .115em below the line box and
   .045em inside it; the negative margins put the letters on the 40px padding. */
.reveal .blank .venue,.reveal .blank .speaker,.reveal .blank .tagline{margin-left:-.045em;font:400 var(--type-detail)/1 var(--archivo);color:var(--white);mix-blend-mode:overlay}
.reveal .blank .venue{position:absolute;top:40px;left:40px;margin-top:-.115em}
.reveal .blank .speaker{position:absolute;bottom:40px;left:40px}
.reveal .blank .tagline{margin-top:8px;font-size:var(--type-cover-tagline)}
/* Decorative spec drawing, snapped to the right edge at 80% of the slide height, blended into the
   background. plus-darker is WebKit-only; other browsers fall back to multiply. */
.reveal .blank .spec-drawing{position:absolute;top:50%;right:0;height:80%;width:auto;max-height:none;max-width:none;transform:translateY(-50%);opacity:.4;mix-blend-mode:multiply;pointer-events:none}
@supports (mix-blend-mode:plus-darker){.reveal .blank .spec-drawing{mix-blend-mode:plus-darker}}
/* Nabla's ink sits .071em above its line box and .023em inside its left edge; the margins
   cancel that, so the visible letters center true and sit on the 40px left padding. */
.reveal .blank h1{position:relative;margin:.071em 0 0 -.023em;font:400 var(--type-cover)/1 var(--nabla);letter-spacing:0;text-transform:uppercase;font-variation-settings:'EDPT' 120,'EHLT' 6;font-palette:--nabla-gold}
/* Speaker profile: photo, name, role and a small links QR code, stacked at the slide's center.
   The photo is a transparent cutout, cropped to a circle on a translucent white disc. */
.blank.profile .slide-body{align-items:center}
.reveal .profile-card{display:flex;flex-direction:column;align-items:center;text-align:center}
.reveal .profile-photo{display:block;width:300px;height:300px;max-width:none;max-height:none;margin:0 0 32px;border-radius:50%;object-fit:cover;object-position:50% 20%;background:rgb(255 255 255 / .35)}
.reveal .blank.profile h2{margin:0;font:400 var(--type-subtitle)/1 var(--archivo);letter-spacing:0;text-transform:none;color:var(--white)}
.reveal .blank.profile .role{margin:12px 0 0;font:400 var(--type-detail)/1 var(--archivo);color:var(--white);mix-blend-mode:overlay}
/* The profile slide moves the venue line top-right and puts the talk title top-left in its
   place, styled the same. */
.reveal .blank.profile .venue{left:auto;right:40px;margin-left:0}
.reveal .blank .deck-title{position:absolute;top:40px;left:40px;margin:-.115em 0 0 -.045em;font:400 var(--type-detail)/1 var(--archivo);color:var(--white);mix-blend-mode:overlay}
/* Centered statement: one Nabla title at the slide's center, with the profile slide's corners. */
.blank.centered .slide-body{align-items:center}
.reveal .blank.centered h2{margin:.071em 0 0;text-align:center;font:400 var(--type-cover)/1 var(--nabla);letter-spacing:0;text-transform:uppercase;font-variation-settings:'EDPT' 120,'EHLT' 6;font-palette:--nabla-gold}
.reveal .blank.centered .venue{left:auto;right:40px;margin-left:0}
/* Pile of other people's "what is taste" posts, dropped onto the centered title by deck.js. */
.reveal .wtf-pile{position:absolute;inset:0;pointer-events:none}
.reveal .wtf-pile img{position:absolute;left:0;top:0;max-width:none;max-height:none;height:auto;visibility:hidden;border:6px solid var(--white);box-shadow:0 24px 60px rgb(0 0 0 / .4)}
.reveal .wtf-pile .w-wide{width:540px}
.reveal .wtf-pile .w-mid{width:440px}
.reveal .wtf-pile .w-small{width:420px}
.reveal .wtf-pile .w-tall{width:300px}
.reveal .wtf-trigger,.reveal .swap-trigger{position:absolute}
/* Prompt peek: a small ? button bottom-left opens the prompt behind the slide. The popover wipes
   open from its bottom-left corner to its top-right; reduced motion only fades it. */
.reveal .peek-button{position:absolute;left:40px;bottom:40px;z-index:20;width:36px;height:36px;border:1.5px solid var(--white);border-radius:50%;padding:0;background:none;color:var(--white);font:400 var(--type-label)/1 var(--mono);cursor:pointer;mix-blend-mode:overlay}
.reveal .peek-button:hover,.reveal .peek-button[aria-expanded="true"]{mix-blend-mode:normal;background:var(--white);color:var(--ink)}
.reveal .peek{position:absolute;left:40px;bottom:92px;z-index:19;width:560px;visibility:hidden;opacity:0;clip-path:inset(100% 100% 0 0 round 24px);transform:scale(.92);transform-origin:0 100%;filter:drop-shadow(0 24px 48px rgb(0 0 0 / .35));transition:clip-path .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),opacity .2s,visibility 0s .45s}
.reveal .peek.open{visibility:visible;opacity:1;clip-path:inset(0 0 0 0 round 24px);transform:none;transition-delay:0s}
/* One corner radius for cards and the framed shots and videos beside them. */
.reveal{--card-radius:24px}
.reveal .peek-card{padding:28px 32px;border-radius:var(--card-radius);background:var(--white);color:var(--ink);font:400 var(--type-label)/1.4 var(--archivo)}
.reveal .peek-card .peek-label{margin:0 0 16px;font:400 var(--type-meta)/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.reveal .peek-card ol{margin:0;padding:0;list-style:none;display:grid;gap:16px}
.reveal .peek-card li{display:grid;grid-template-columns:72px 1fr;align-items:baseline}
.reveal .peek-card li span{font:400 var(--type-meta)/1 var(--mono);color:var(--muted)}
.reveal .peek-card li p{margin:0}
.reveal .peek-card a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.reveal .peek-wide{width:760px}
.reveal .peek-card img{border-radius:8px;box-shadow:0 0 0 1px rgb(0 0 0 / .1)}
.reveal .peek img{display:block;width:100%;height:auto;max-width:none;max-height:none}
@media (prefers-reduced-motion:reduce){.reveal .peek,.reveal .peek.open{clip-path:none;transform:none}}
/* Truths: four points arrive one by one on entry (deck.js), then one fragment lays the
   definition over them while they dim. */
.blank.truths .slide-body{align-items:center}
.reveal .blank.truths .venue{left:auto;right:40px;margin-left:0}
.reveal .truth-list{width:1240px;margin:0;padding:0;list-style:none;counter-reset:truth;display:grid;gap:30px;transition:opacity .5s ease,filter .5s ease}
.reveal .truth-list li{display:grid;grid-template-columns:80px 1fr;align-items:baseline;font:400 var(--type-subtitle)/1.15 var(--archivo);color:var(--white);counter-increment:truth}
.reveal .truth-list li::before{content:counter(truth,decimal-leading-zero);font:400 var(--type-detail)/1 var(--mono);opacity:.7}
.reveal .truths:has(.truth-line.visible) .truth-list{opacity:.15;filter:blur(3px)}
.reveal .slides .truth-line{position:absolute;left:50%;top:50%;width:1240px;margin:0;transform:translate(-50%,-46%);font:400 var(--type-title)/1.1 var(--archivo);color:var(--white);text-align:center;text-wrap:balance;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1),visibility .45s}
.reveal .slides .truth-line.visible{transform:translate(-50%,-50%)}
@media (prefers-reduced-motion:reduce){.reveal .truth-list,.reveal .slides .truth-line{transition:none}.reveal .truths:has(.truth-line.visible) .truth-list{filter:none}}
/* Sameness: the opening claim over three generated pages, each white-framed like the pile. */
.blank.sameness .slide-body{align-items:center;gap:56px}
.reveal .blank.sameness .venue{left:auto;right:40px;margin-left:0}
.reveal .blank.sameness h2{margin:0;font:400 var(--type-title)/1.1 var(--archivo);letter-spacing:0;text-transform:none;text-align:center;color:var(--white)}
.reveal .same-row{display:flex;align-items:center;justify-content:center;gap:32px}
.reveal .same-row img{display:block;height:280px;width:auto;max-width:none;max-height:none;border:6px solid var(--white);box-shadow:0 24px 60px rgb(0 0 0 / .35)}
/* Claim: a statement in the new design, with two supporting points beneath it. */
.reveal .blank.claim .venue{left:auto;right:40px;margin-left:0}
.blank.claim .slide-body{align-items:center}
.reveal .claim-body{width:1240px}
.reveal .blank.claim h2{margin:0 0 0 -.04em;font:400 var(--type-display)/1 var(--archivo);letter-spacing:-.01em;text-transform:none;color:var(--white)}
.reveal .claim-tail{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:64px;padding-top:28px;border-top:1.5px solid rgb(255 255 255 / .5)}
.reveal .claim-tail p{margin:0;font:400 var(--type-body)/1.35 var(--archivo);color:var(--white)}
/* Build or borrow: each claim column is a mono label, a name and one line */
.reveal .claim-body.bob-body{width:1520px}
/* Build or borrow: two drawn circles with a text block in each part, centered without transforms */
.reveal .venn{position:relative;width:1520px;height:600px;color:var(--white)}
.reveal .venn-art{position:absolute;inset:0;width:100%;height:100%}
.reveal .venn-ring{fill:none;stroke:rgb(255 255 255 / .7);stroke-width:2}
.reveal .venn-lens{fill:rgb(255 255 255 / .14)}
.reveal .venn-in,.reveal .venn-out{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center}
.reveal .venn-in{text-align:center}
.reveal .venn-in p{margin:0;font:400 var(--type-body)/1.35 var(--archivo)}
.reveal .venn-in-left{left:420px;width:240px}
.reveal .venn-in-mid{left:680px;width:160px}
.reveal .venn-in-right{left:860px;width:240px}
.reveal .venn-out p{margin:0;font:400 var(--type-detail)/1.3 var(--archivo);text-wrap:balance}
.reveal .venn-out-left{left:0;width:370px;text-align:right}
.reveal .venn-out-right{right:0;width:370px;text-align:left}
.reveal .venn .bob-name{margin-bottom:12px;font:400 var(--type-mark)/1.1 var(--archivo)}
/* Steps: the talk's four steps as names only, each under a thin white rule with its number. */
.reveal .blank.steps .venue{left:auto;right:40px;margin-left:0}
.blank.steps .slide-body{align-items:center}
.reveal .steps-body{width:1240px}
.reveal .blank.steps h2{margin:0 0 0 -.04em;font:400 var(--type-title)/1.05 var(--archivo);letter-spacing:-.01em;text-transform:none;color:var(--white)}
.reveal .step-row{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:96px 0 0;padding:0;list-style:none}
.reveal .step-row li{padding-top:24px;border-top:1.5px solid rgb(255 255 255 / .5);font:400 var(--type-subtitle)/1 var(--archivo);color:var(--white)}
.reveal .step-row span{display:block;margin-bottom:20px;font:400 var(--type-detail)/1 var(--mono);opacity:.75}
/* Quote shot: one pasted post alone in the middle, square-cornered like the other pasted shots. */
.reveal .blank.quote .venue{left:auto;right:40px;margin-left:0}
.blank.quote .slide-body{align-items:center}
/* Work: four 16:9 shots in a 2 × 2 grid; only the side projects carry a caption, their URL.
   A QR code a quarter of the shot's width can sit in a shot's bottom-right corner. */
.blank.work .slide-body{align-items:center}
.reveal .blank.work .venue{left:auto;right:40px;margin-left:0}
.reveal .work-grid{display:grid;grid-template-columns:repeat(2,576px);gap:32px;align-items:start}
.reveal .work-grid figure{margin:0}
.reveal .work-grid img{display:block;width:576px;height:324px;max-width:none;max-height:none;object-fit:cover;border:6px solid var(--white);box-shadow:0 24px 60px rgb(0 0 0 / .35)}
.reveal .work-shot{position:relative}
.reveal .work-grid .work-qr{position:absolute;right:18px;bottom:18px;display:block}
.reveal .work-grid .work-qr img{width:144px;height:144px;border:0;border-radius:var(--card-radius);box-shadow:0 8px 24px rgb(0 0 0 / .35)}
.reveal .work-grid figcaption{margin:14px 0 0;font:400 var(--type-detail)/1 var(--archivo);color:var(--white)}
.reveal .quote-shot{margin:0}
.reveal .quote-shot img{display:block;width:auto;height:720px;max-width:none;max-height:none;border:6px solid var(--white);box-shadow:0 24px 60px rgb(0 0 0 / .35)}
/* Just copy: the claim on the left, a tall screenshot of near-identical games on the right,
   square-cornered like the other pasted screenshots. */
.reveal .blank.copies .venue{left:auto;right:40px;margin-left:0}
.blank.copies .slide-body{align-items:center}
.reveal .copies-body{display:grid;grid-template-columns:1fr 452px;gap:96px;align-items:center;width:1520px}
.reveal .blank.copies h2{margin:0 0 0 -.04em;font:400 var(--type-display)/1 var(--archivo);letter-spacing:-.01em;text-transform:none;color:var(--white)}
.reveal .copies-line{margin:48px 0 0;padding-top:28px;border-top:1.5px solid rgb(255 255 255 / .5);font:400 var(--type-subtitle)/1.1 var(--archivo);color:var(--white)}
.reveal .copies-shot{margin:0}
/* Everything is a Remix: the same claim, beside a 16:9 video thumbnail that links out. */
.reveal .copies-body.remix-body{grid-template-columns:1fr 800px}
.reveal .remix-body .copies-shot img{width:800px}
.reveal .copies-by{margin:16px 0 0;font:400 var(--type-detail)/1.2 var(--archivo);color:var(--white);opacity:.8}
.reveal .copies-shot img{display:block;width:452px;height:auto;max-width:none;max-height:none;border:6px solid var(--white);box-shadow:0 24px 60px rgb(0 0 0 / .35)}
/* Skill: a paper stack of the skill's sheet and its recording (same ratio), beside a card
   with the install command, the run command and a QR code to the repo. */
.reveal .likes-grid.ed-grid{grid-template-columns:820px minmax(0,1fr);gap:64px;align-items:center}
.reveal .ed-stack{width:820px;cursor:pointer}
.reveal .ed-stack .paper{display:block;width:100%;height:auto;aspect-ratio:2000/1471;object-fit:cover;max-width:none;max-height:none;border:6px solid var(--white);border-radius:var(--card-radius);background:var(--white);box-shadow:0 24px 60px rgb(0 0 0 / .3)}
.reveal .ed-step{margin:0 0 10px;font:400 var(--type-meta)/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.reveal .ed-code{margin:0;font:400 var(--type-label)/1.45 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.reveal .ed-card .prompt-actions{margin:16px 0 28px}
.reveal .ed-qr{display:flex;align-items:center;gap:20px;margin-top:28px;padding-top:24px;border-top:1.5px solid rgb(21 21 19 / .12)}
.reveal .ed-qr img{display:block;width:120px;height:120px;max-width:none;max-height:none;border-radius:var(--card-radius)}
.reveal .ed-qr p{margin:0;font:400 var(--type-meta)/1.4 var(--mono);color:var(--muted)}
/* Study prompt: when to use it, beside the prompt card. */
.reveal .study-use{margin:0;font:400 var(--type-subtitle)/1.15 var(--archivo);color:var(--white)}
.reveal .study-use span{display:block;margin-bottom:20px;font:400 var(--type-detail)/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;opacity:.75}
/* Reference jobs: the steps row with three columns, each with a line under its name. */
.reveal .jobs-body{width:1520px}
.reveal .step-row.three{grid-template-columns:repeat(3,1fr);gap:48px;margin-top:80px}
.reveal .step-row li p{margin:20px 0 0;font:400 var(--type-detail)/1.35 var(--archivo);opacity:.75}
/* Step opener: the new-design act divider. A mono step number, the step name in Nabla, and
   its one line in Archivo under a thin white rule. */
.blank.act-open .slide-body{align-items:center}
.reveal .blank.act-open .venue{left:auto;right:40px;margin-left:0}
.reveal .act-open-body{width:1240px}
.reveal .act-step{margin:0 0 24px;font:400 var(--type-detail)/1 var(--mono);color:var(--white);opacity:.75}
.reveal .blank.act-open h2{margin:.071em 0 0 -.023em;font:400 var(--type-cover)/1 var(--nabla);letter-spacing:0;text-transform:uppercase;font-variation-settings:'EDPT' 120,'EHLT' 6;font-palette:--nabla-gold}
.reveal .swap-letter{display:inline-block}
.reveal .act-line{margin:56px 0 0;padding-top:28px;border-top:1.5px solid rgb(255 255 255 / .5);font:400 var(--type-subtitle)/1.2 var(--archivo);color:var(--white)}
/* Finds: reference sites grouped by category, each a 16:9 thumbnail and its name linking out.
   Hovering or focusing one shows a large shot of the page that follows the pointer (deck.js). */
.blank.finds .slide-body{align-items:center}
.reveal .blank.finds .venue{left:auto;right:40px;margin-left:0}
.reveal .finds-body{width:1520px}
.reveal .blank.finds h2{margin:0 0 48px -.04em;font:400 var(--type-title)/1.05 var(--archivo);letter-spacing:-.01em;text-transform:none;color:var(--white)}
.reveal .find-groups{display:flex;flex-wrap:wrap;justify-content:space-between;gap:36px 32px}
.reveal .find-label{margin:0 0 12px;font:400 var(--type-meta)/1 var(--mono);color:var(--white);opacity:.75}
.reveal .find-group ul{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.reveal .find-group li{width:140px}
.reveal .find-group a{display:block;color:var(--white);text-decoration:none;outline:none}
.reveal .find-group img{display:block;width:140px;height:79px;max-width:none;max-height:none;object-fit:cover;box-shadow:0 0 0 1.5px rgb(255 255 255 / .45);transition:box-shadow .2s,transform .2s}
.reveal .find-group span{display:block;margin-top:10px;font:400 var(--type-meta)/1.2 var(--archivo)}
.reveal .find-group a:is(:hover,:focus-visible) img{box-shadow:0 0 0 3px var(--white);transform:translateY(-3px)}
.reveal .find-group a:focus-visible span{text-decoration:underline;text-underline-offset:4px}
.reveal .find-preview{position:absolute;left:0;top:0;z-index:30;width:800px;height:450px;visibility:hidden;opacity:0;pointer-events:none;border:6px solid var(--white);background:var(--white);box-shadow:0 32px 80px rgb(0 0 0 / .45)}
.reveal .find-preview img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
@media (prefers-reduced-motion:reduce){.reveal .find-group img{transition:none}}
/* Likes: where to download your own likes, under thin white rules, beside the prompt on a white
   card with the peek card's corners. The list column, then the card, arrive after the title. */
.blank.likes .slide-body{align-items:center}
.reveal .blank.likes .venue{left:auto;right:40px;margin-left:0}
.reveal .likes-body{width:1520px}
.reveal .blank.likes h2{margin:0 0 56px -.04em;font:400 var(--type-title)/1.05 var(--archivo);letter-spacing:-.01em;text-transform:none;color:var(--white)}
.reveal .likes-grid{display:grid;grid-template-columns:1fr 680px;gap:80px;align-items:start}
.reveal .like-list{margin:0;padding:0;list-style:none;border-bottom:1.5px solid rgb(255 255 255 / .5)}
.reveal .like-list li{display:grid;grid-template-columns:220px 1fr;align-items:baseline;padding:16px 0;border-top:1.5px solid rgb(255 255 255 / .5);color:var(--white)}
.reveal .like-list span{font:400 var(--type-body)/1.1 var(--archivo)}
.reveal .like-list p{margin:0;font:400 var(--type-detail)/1.2 var(--archivo);opacity:.75}
.reveal .prompt-card{padding:32px 36px 36px;border-radius:var(--card-radius);background:var(--white);color:var(--ink);box-shadow:0 24px 60px rgb(0 0 0 / .25)}
.reveal .prompt-card-label{display:flex;justify-content:space-between;margin:0 0 20px;font:400 var(--type-meta)/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.reveal .prompt-card .prompt-text{margin:0;padding:0;font:400 var(--type-detail)/1.4 var(--archivo)}
.reveal .prompt-card .slot-word{padding:0 .15em;background:var(--accent);color:var(--ink)}
.reveal .prompt-card .prompt-actions{padding:0;margin-top:28px}
.reveal .prompt-card .prompt-actions button{border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);padding:12px 22px}
.reveal .prompt-card .prompt-actions button:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.reveal .prompt-card .prompt-actions button:focus-visible{outline-color:var(--ink)}
.reveal .prompt-card .prompt-actions .status{color:var(--muted)}
/* Prompt switch: pill tabs on the gradient over a stack of paper cards in one grid cell, so the
   stack is as tall as its longest prompt and switching never moves the slide. The back card
   peeks out top-right; deck.js swaps the cards with GSAP. */
.reveal .prompt-tabs{display:flex;gap:8px;margin:0 0 40px}
.reveal .prompt-tabs button{border:1.5px solid rgb(255 255 255 / .5);border-radius:999px;padding:10px 18px;background:none;color:var(--white);font:400 var(--type-meta)/1 var(--mono);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.reveal .prompt-tabs button:hover{border-color:var(--white)}
.reveal .prompt-tabs button[aria-selected="true"]{background:var(--white);border-color:var(--white);color:var(--ink)}
.reveal .prompt-tabs button:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.reveal .prompt-panel[hidden]{display:none}
.reveal .paper-stack{display:grid}
.reveal .paper{grid-area:1/1;position:relative;z-index:1;transform:translate(-6px,-16px) rotate(2deg) scale(.97)}
.reveal .paper.front{z-index:2;transform:none}
.reveal .paper:not(.front){box-shadow:0 12px 30px rgb(0 0 0 / .18)}
@media (prefers-reduced-motion:reduce){.reveal .prompt-tabs button{transition:none}}
/* Agent steps: the likes list, numbered. */
.reveal ol.agent-steps{counter-reset:step}
.reveal .agent-steps li{grid-template-columns:72px 180px 1fr;counter-increment:step}
.reveal .agent-steps li::before{content:counter(step,decimal-leading-zero);font:400 var(--type-detail)/1 var(--mono);color:var(--white);opacity:.7}
/* Grok Bot mascot, bottom-left on its slide; deck.js replays xAI's idle loop into the two paths.
   The 92-unit viewBox leaves 18.4 units around the head, so the box sits 37px out from the
   head's 40px margin. */
.reveal .grok-mascot{position:absolute;left:3px;bottom:3px;width:184px;height:184px;overflow:visible;pointer-events:none}
.reveal .grok-mascot-head{fill:#0a0a0a}
.reveal .grok-mascot-eyes{fill:#fff}
/* Taste test: PizzaYap's real bot session, framed like the pile, beside its prompt card. */
.blank.taste-test .slide-body,.blank.taste-library .slide-body,.blank.component-library .slide-body{align-items:center}
.reveal .blank.taste-test .venue,.reveal .blank.taste-library .venue,.reveal .blank.component-library .venue,.reveal .blank.trained .venue{left:auto;right:40px;margin-left:0}
.reveal .tt-grid{grid-template-columns:700px 1fr}
.reveal .tt-shot{margin:0}
.reveal .tt-shot img{display:block;width:700px;height:auto;max-width:none;max-height:none;border:6px solid var(--white);border-radius:var(--card-radius);box-shadow:0 24px 60px rgb(0 0 0 / .3)}
/* Taste library: the screen recording beside a card of the prompt's six steps; Copy takes the
   full prompt from a hidden <pre>. The video's corners are the app window's, so the frame's inner
   radius must stay above about 11px to hide them. */
.reveal .tl-grid{grid-template-columns:760px 1fr}
.reveal .tl-video{margin:0}
.reveal .tl-video video{display:block;width:760px;height:auto;max-width:none;max-height:none;border:6px solid var(--white);border-radius:var(--card-radius);background:var(--white);box-shadow:0 24px 60px rgb(0 0 0 / .3)}
/* Close: the recap in the route slide's four columns with a line each, the take-home list
   beside a white QR card, and Q&A in the cover title type */
.reveal .step-row.recap-row{margin-top:80px}
.reveal .title-lead{margin:28px 0 0;font:400 var(--type-body)/1.35 var(--archivo);color:var(--white)}
.blank.take-home .slide-body{align-items:center}
.reveal .blank.take-home .venue{left:auto;right:40px;margin-left:0}
.reveal .likes-grid.th-grid{grid-template-columns:minmax(0,1fr) 400px;gap:120px;align-items:center}
.reveal .th-qr{display:grid;place-content:center;gap:12px;width:400px;height:400px;background:var(--white);border-radius:var(--card-radius);box-shadow:0 24px 60px rgb(0 0 0 / .3);text-align:center}
/* Take it home, centered: the title, the slides QR card, then one line under it */
.reveal .likes-body.th-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.reveal .blank.likes .th-center h2{margin:0 0 48px}
.reveal .th-stack{display:flex;flex-direction:column;align-items:center;gap:36px}
.reveal .th-line{margin:0;font:400 var(--type-body)/1.3 var(--archivo);color:var(--white)}
.reveal .th-qr p{margin:0;font:400 var(--type-label)/1.3 var(--mono);color:var(--muted)}
.reveal .th-qr img{display:block;width:320px;height:320px;max-width:none;max-height:none}
.reveal .blank.qa-open .slide-body{flex-direction:column;justify-content:center}
.reveal .qa-line{margin:48px 0 0;text-align:center;font:400 var(--type-subtitle)/1.2 var(--archivo);color:var(--white)}
/* Workshop: the take-home layout with a lead line, a fee line under the steps, and the form's QR card */
/* The course name is long, so the title drops to the subtitle size to stay on one line (PizzaYap, 29 October 2026) */
.reveal .blank.likes.workshop h2{font-size:var(--type-subtitle);margin-bottom:0}
.reveal .workshop .title-lead{margin:24px 0 40px}
.reveal .ws-fee{margin:28px 0 0;font:400 var(--type-detail)/1.3 var(--archivo);color:var(--white)}
.reveal .ws-fee p{margin:0}
.reveal .ws-price{display:flex;align-items:baseline;gap:20px;margin-bottom:8px}
.reveal .ws-now{font-size:var(--type-subtitle);line-height:1.1}
.reveal .ws-qr{height:auto;padding:28px 0 24px;text-decoration:none}
/* App showcase: a white-framed recording beside the app name, its maker and the real thing it remixes */
.blank.app-show .slide-body{align-items:center}
.reveal .blank.app-show .venue{left:auto;right:40px;margin-left:0}
.reveal .app-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:72px;align-items:center;width:1520px}
.reveal .app-video{margin:0}
.reveal .app-video video{display:block;height:700px;width:auto;max-width:980px;max-height:none;border:6px solid var(--white);border-radius:var(--card-radius);background:var(--white);box-shadow:0 24px 60px rgb(0 0 0 / .3)}
.reveal .app-pending{display:grid;place-items:center;width:980px;height:700px;border:2px dashed rgb(255 255 255 / .6);border-radius:var(--card-radius)}
.reveal .app-pending p{margin:0;font:400 var(--type-label)/1 var(--mono);color:var(--white)}
.reveal .blank.app-show h2{margin:0 0 12px -.04em;font:400 var(--type-subtitle)/1.05 var(--archivo);letter-spacing:-.01em;text-transform:none;color:var(--white)}
.reveal .app-by{margin:0 0 48px;font:400 var(--type-detail)/1.2 var(--archivo);color:var(--white);opacity:.8}
.reveal .app-label{margin:0 0 10px;padding-top:20px;border-top:1.5px solid rgb(255 255 255 / .5);font:400 var(--type-label)/1 var(--mono);color:var(--white);opacity:.75}
.reveal .app-real{margin:0;font:400 var(--type-body)/1.3 var(--archivo);color:var(--white);text-wrap:balance}
/* Component library: a wide screen recording beside numbered steps under thin white rules */
.reveal .likes-grid.cl-grid{grid-template-columns:940px minmax(0,1fr);gap:64px;align-items:center}
.reveal .cl-video video{width:940px}
.reveal ol.cl-steps{counter-reset:step}
.reveal .cl-steps li{grid-template-columns:64px 1fr;row-gap:8px;counter-increment:step}
.reveal .cl-steps li::before{content:counter(step,decimal-leading-zero);grid-row:span 2;font:400 var(--type-detail)/1.1 var(--mono);color:var(--white);opacity:.7}
.reveal .cl-steps p{grid-column:2;text-wrap:balance}
.reveal ol.library-steps{counter-reset:step;margin:0;padding:0;list-style:none;border-bottom:1.5px solid rgb(21 21 19 / .12)}
.reveal .library-steps li{display:grid;grid-template-columns:52px 104px 1fr;align-items:baseline;padding:11px 0;border-top:1.5px solid rgb(21 21 19 / .12);counter-increment:step}
.reveal .library-steps li::before{content:counter(step,decimal-leading-zero);font:400 var(--type-meta)/1 var(--mono);color:var(--muted)}
.reveal .library-steps span{font:400 var(--type-detail)/1.2 var(--archivo)}
.reveal .library-steps p{margin:0;font:400 var(--type-meta)/1.3 var(--archivo);color:var(--muted)}
/* Before and after: three pairs in one grid cell. Both shots in a pair take the taller one's
   ratio (--ratio on the row) and letterbox in their own edge color, so neither is cropped. The first shows on entry; each → brings the
   next pair and retires the one before. */
.blank.trained .slide-body{align-items:center}
.reveal .trained-body{width:1520px}
.reveal .blank.trained h2,.reveal .blank.taste-test h2,.reveal .blank.taste-library h2,.reveal .blank.component-library h2{margin:0 0 32px -.04em;font:400 var(--type-title)/1.05 var(--archivo);letter-spacing:-.01em;text-transform:none;color:var(--white)}
.reveal .ba-stage{display:grid}
.reveal .slides section .pair{grid-area:1/1;margin:0;transition:opacity .45s ease,transform .6s cubic-bezier(.16,1,.3,1),visibility .45s}
.reveal .slides section .pair.fragment:not(.visible){transform:translateY(24px)}
.reveal .slides section.trained .ba-stage:has(.pair-2.visible) .pair-1,
.reveal .slides section.trained .ba-stage:has(.pair-3.visible) .pair-2.fragment.visible{opacity:0;visibility:hidden;transform:translateY(-24px)}
.reveal .pair-label{display:flex;gap:20px;align-items:baseline;margin:0 0 18px;font:400 var(--type-body)/1 var(--archivo);color:var(--white)}
.reveal .pair-label span{font:400 var(--type-detail)/1 var(--mono);opacity:.7}
.reveal .pair-row{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.reveal .pair-tag{margin:0 0 26px;font:400 var(--type-meta)/1 var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--white);opacity:.75}
.reveal .pair-frame{position:relative}
.reveal .pair-frame img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio,auto);object-fit:contain;max-width:none;max-height:none;border:6px solid var(--white);border-radius:var(--card-radius);box-shadow:0 24px 60px rgb(0 0 0 / .3)}
.reveal .auto-swap{cursor:pointer}
@media (prefers-reduced-motion:reduce){.reveal .slides section .pair{transition:none}}
.reveal .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.reveal .profile-qr{display:block;width:132px;height:132px;max-width:none;max-height:none;margin-top:40px;border-radius:var(--card-radius)}

/* Text roles. */
.reveal .eyebrow{font:var(--type-label)/1.3 var(--mono);text-transform:uppercase;letter-spacing:.02em;margin-bottom:24px}
.reveal .lede{font-size:var(--type-body);line-height:1.4;max-width:32ch;margin-top:28px}
.reveal .small{font:var(--type-detail)/1.4 var(--sans)}
.reveal .caption{font:var(--type-meta)/1.5 var(--mono)}
.reveal .muted{color:var(--muted)}
.below{margin-top:30px!important}

/* Layouts. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;height:100%;align-items:center}
.split>div{min-width:0}
.blackbar{height:58px;padding:0 26px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:space-between;font:var(--type-label)/1 var(--mono)}
.qr{width:260px;height:260px;border:2px dashed var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;font:var(--type-label)/1.4 var(--mono);background:var(--paper)}
.rows{margin-top:36px;border-top:1px solid var(--ink)}
.row{display:grid;grid-template-columns:56px 1fr auto;align-items:start;gap:20px;padding:22px 0;border-bottom:1px solid var(--ink)}
.row .index{font:var(--type-label)/1.5 var(--mono);padding-top:5px}
.row strong{display:block;font-weight:500}
.row span.detail{display:block;margin-top:6px;font:var(--type-detail)/1.35 var(--sans)}
.rows.pairs .row{grid-template-columns:300px 1fr;font-size:var(--type-detail);padding:18px 0}
.rows.pairs .row strong{font-weight:600}
.statement .slide-body{display:flex;flex-direction:column;justify-content:space-between}
.statement h2{font-size:var(--type-display);max-width:18ch}
.statement-tail{display:flex;gap:70px;border-top:1px solid var(--ink);padding-top:30px}
.statement-tail>p{flex:1}
.columns{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);margin-top:42px}
.columns>div{padding:35px 38px;min-width:0}
.columns>div+div{border-left:1px solid var(--ink)}
.columns h3{margin-bottom:24px}
.columns p+p{margin-top:16px}
.columns .eyebrow{margin-bottom:18px}
.columns .accent{background:var(--accent)}
.columns .tinted{background:var(--tint)}
.pipeline{display:grid;grid-template-columns:repeat(4,1fr);margin-top:66px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.pipeline>div{position:relative;padding:32px 24px 38px;min-width:0}
.pipeline>div:first-child{padding-left:0}
.pipeline>div+div{border-left:1px solid var(--ink)}
.pipeline>div:not(:last-child):after{content:'→';position:absolute;right:-18px;top:37px;z-index:1;background:var(--paper);font:var(--type-body)/1 var(--mono);padding:0 5px}
.pipeline .index{display:block;font:var(--type-mark)/1 var(--pixel);margin-bottom:28px}
.pipeline h3{font-size:var(--type-body);margin-bottom:18px;letter-spacing:-.035em}
.pipeline p{font-size:var(--type-detail);line-height:1.4}
.pipeline.three{grid-template-columns:repeat(3,1fr)}
.pipeline.plain>div:after{content:none!important}
.file-spec{border:1px solid var(--ink);margin-top:32px}
.file-spec .spec-row{padding:17px 26px;border-bottom:1px solid var(--ink);display:grid;grid-template-columns:300px 1fr;gap:25px;align-items:baseline}
.file-spec .spec-row:last-child{border-bottom:0}
.file-spec .spec-row code{font:var(--type-detail)/1.4 var(--mono)}
.file-spec .spec-row p{font-size:var(--type-detail)}
.files-tree{font:var(--type-detail)/1.6 var(--mono);padding:30px 36px;background:var(--ink);color:var(--paper);white-space:pre;margin:0}
.files-tree .hl{color:var(--accent)}

/* Platform downloads: a ruled list beside a copyable prompt. */

/* Act dividers. */
.act{background:var(--accent)!important}
.act .rail{background:var(--ink);color:var(--accent)}
.act .slide-body{display:flex;flex-direction:column;justify-content:space-between}
.act-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:40px}
.act h2{font-size:var(--type-number);letter-spacing:-.07em;line-height:.9;align-self:flex-end}
.act-number{font:var(--type-break)/.85 var(--pixel);letter-spacing:-.06em}
.act-bottom{border-top:1px solid var(--ink);padding-top:32px;display:flex;justify-content:space-between;align-items:flex-end;gap:60px}
.act-bottom .lede{margin-top:0;max-width:26ch}

/* Drawn figures. */
.reveal .figure{margin-top:36px}
.figure svg{display:block;width:100%;height:auto}
.figure+p{margin-top:18px}
.figure-caption{display:flex;justify-content:space-between;gap:40px;margin-top:14px}
.svg-label{font:var(--type-label)/1 var(--mono);fill:var(--ink)}
.svg-label.muted{fill:var(--muted)}
.svg-head{font:500 var(--type-subtitle)/1 var(--sans);letter-spacing:-.05em;fill:var(--ink)}
.svg-body{font:var(--type-detail)/1 var(--sans);fill:var(--ink)}
.svg-mark{font:var(--type-label)/1 var(--mono);fill:var(--paper);font-weight:500}

/* Reference sources. */
.refs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border:1px solid var(--ink)}
.refs>div{padding:28px 26px;min-width:0;display:flex;flex-direction:column;gap:18px}
.refs>div+div{border-left:1px solid var(--ink)}
.refs h3{font-size:var(--type-body);letter-spacing:-.035em}
.refs p{font-size:var(--type-detail);line-height:1.35}
.refs .slot{margin-top:auto;border:2px dashed var(--line);padding:18px;min-height:150px;font:var(--type-meta)/1.5 var(--mono);color:var(--muted)}

/* Prompt cards. */
.prompt .slide-body{display:grid;grid-template-columns:440px 1fr;gap:56px;padding-top:42px}
.prompt-title{padding-right:36px;border-right:1px solid var(--ink);display:flex;flex-direction:column}
.prompt-title .big-number{display:block;font:var(--type-number)/1 var(--pixel);margin:20px 0 30px}
.prompt-title .use-when{margin-top:auto;border-top:1px solid var(--ink);padding-top:22px}
.prompt-stack{display:flex;flex-direction:column;gap:24px;min-width:0}
.prompt-box{background:var(--ink);color:var(--paper);display:flex;flex-direction:column}
.prompt-box .blackbar{border-bottom:1px solid var(--muted)}
.prompt-text{padding:30px 34px;font:var(--type-detail)/1.5 var(--sans)}
.prompt-text .slot-word{color:var(--accent)}
.prompt-actions{display:flex;align-items:center;gap:22px;padding:0 34px 28px}
.prompt-actions button{border:1px solid var(--paper);background:transparent;color:var(--paper);font:var(--type-label)/1 var(--mono);padding:13px 18px;cursor:pointer}
.prompt-actions button:hover{background:var(--accent);color:var(--ink);border-color:var(--accent)}
.prompt-actions button:focus-visible{outline-color:var(--accent)}
.prompt-actions .status{font:var(--type-meta)/1 var(--mono);color:var(--accent)}
.prompt.compact .slide-body{padding-top:32px}
.prompt.compact .prompt-stack{gap:16px}
.prompt.compact .prompt-text{padding:18px 30px}
.prompt.compact .prompt-actions{padding-bottom:16px}

/* Audit report. */
.report{margin-top:34px;border:1px solid var(--ink)}
.report .r{display:grid;grid-template-columns:250px 1fr 330px;gap:24px;padding:18px 26px;border-bottom:1px solid var(--ink);font:var(--type-label)/1.4 var(--mono);align-items:baseline}
.report .r:last-child{border-bottom:0}
.report .r.head{background:var(--ink);color:var(--paper)}
.report .fix{color:var(--ink);background:var(--accent);padding:2px 8px;justify-self:start}

/* Q&A. */
.qa{background:var(--accent)!important}
.qa .rail{background:var(--ink);color:var(--accent)}
.qa .slide-body{display:flex;flex-direction:column;justify-content:space-between}

.reveal .progress{color:var(--ink);height:3px}
.noscript{padding:30px;background:var(--paper);font:var(--type-detail)/1.4 var(--sans)}
@media(prefers-reduced-motion:reduce){.reveal *{transition:none!important;animation:none!important}}
@media print{body{background:var(--paper)}.deck-buttons,.prompt-actions,.stage-bar button{display:none!important}.reveal .slides section.leaf{overflow:hidden!important}.reveal .progress{display:none!important}}