/* Stage Kit deck: the stage, the slide, builds, the glass controls, the slide layouts and print.
   Needs tokens.css. The stage is 1920x1080 and deck.js scales it to fit the window. */
html,body{margin:0;height:100%;overflow:hidden;background:var(--ground)}
body{cursor:none}
body.pointer{cursor:default}
html{touch-action:pan-y pinch-zoom}

/* the light sits behind everything and covers the whole window; the stage is letterboxed on top of it */
#aura{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--ground)}
#stage{position:fixed;left:50%;top:50%;z-index:1;width:1920px;height:1080px;transform-origin:center;overflow:hidden}
#stage.unclip{overflow:visible}
#tr{position:fixed;inset:0;z-index:50;pointer-events:none}   /* cover transitions draw here, over the whole window */

.slide{position:absolute;inset:0;z-index:1;padding:96px 128px;box-sizing:border-box;display:flex;flex-direction:column;opacity:0;visibility:hidden;overflow:hidden}
.slide.on,.slide.leaving{opacity:1;visibility:visible}
.slide.leaving{z-index:2;pointer-events:none}
.slide>*{position:relative;z-index:2}

/* a flooded slide swaps the roles: the accent is the ground, and ink and accent both become the colour that reads on it.
   Every layout below is written with the tokens, so any slide can take the full camera. */
.slide[data-cam=full]{
  --ground:var(--k-accent);
  --ink:var(--k-on); --ink-rgb:var(--k-on-rgb);
  --ink-70:rgba(var(--k-on-rgb),.86); --ink-50:rgba(var(--k-on-rgb),.72); --ink-12:rgba(var(--k-on-rgb),.3); --ink-06:rgba(var(--k-on-rgb),.14);
  --accent:var(--k-on); --accent-rgb:var(--k-on-rgb); --on-accent:var(--k-accent); --on-accent-rgb:var(--k-accent-rgb);
  --accent-mist:rgba(var(--k-on-rgb),.2); --card:rgba(var(--k-on-rgb),.13); --card-solid:rgba(var(--k-on-rgb),.06);
  color:var(--ink);
}

/* chrome: a small mark top-left, one mono label top-right, a source line bottom-left */
.hdr{display:flex;justify-content:space-between;align-items:center;height:36px;flex:none}
.brand{display:flex;align-items:center;gap:12px;font:600 30px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.brand img{height:34px;width:auto;display:block}
.brand i{width:14px;height:14px;border-radius:50%;background:var(--accent);flex:none}
.src{position:absolute!important;left:128px;bottom:56px;max-width:1660px;font-size:19px}
.sk-body,.sk-lede{text-wrap:pretty}

/* builds: [data-step=n] appears on click n; [data-until=n] leaves on click n */
[data-step]{visibility:hidden}
[data-step].shown{visibility:visible}
[data-step]:not(.shown) .sk-mask>span,[data-step]:not(.shown).sk-fade,[data-step]:not(.shown) .sk-fade,[data-step]:not(.shown) .sk-w,[data-step]:not(.shown) .sk-c{animation:none!important}
.gone{display:none!important}
.swap{position:relative}
.swap>*{position:absolute;left:0;right:0}

/* ---------- layouts ---------- */
/* centre: a title or a section break */
.l-center{align-items:center;text-align:center}
.l-center .hdr{width:100%}
.l-center .sk-h1{margin-top:auto}
.l-center .sk-lede{margin-top:40px;margin-bottom:auto;padding-bottom:60px}
/* the mark above a centred title: a dot the portal transition can push into */
.orb{width:120px;height:120px;border-radius:50%;margin:150px auto 0;background:var(--accent);position:relative;flex:none}
.orb::after{content:"";position:absolute;inset:-22px;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.35);animation:orb 3.2s var(--ease-io) infinite}
@keyframes orb{0%{transform:scale(.86);opacity:0}40%{opacity:1}100%{transform:scale(1.5);opacity:0}}
.l-center .orb+.sk-h1{margin-top:64px}

/* statement: headline top-left, one visual on the bottom line */
.sk-h1.top{margin-top:64px}
.sk-lede.top{margin-top:30px}
.low{margin-top:auto;margin-bottom:76px}
.low svg{width:100%;height:auto;display:block;overflow:visible}

/* hero number: headline left, one counted number right, the chart under both */
.top2{display:grid;grid-template-columns:1fr auto;align-items:end;gap:48px;margin-top:40px}
.hero{position:relative;isolation:isolate;text-align:right}
.hero b{display:block;font:var(--w-h1) calc(260px*var(--type))/.8 var(--display);letter-spacing:calc(-.06em*var(--track));color:var(--accent);font-variant-numeric:tabular-nums}
.hero .cap{display:block;margin-top:26px;font:400 22px/1.45 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}
.glow::before{content:"";position:absolute;left:50%;top:42%;width:150%;height:200%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(var(--accent-rgb),.22),rgba(var(--accent-rgb),.08) 55%,rgba(var(--accent-rgb),0));z-index:-1;pointer-events:none}
.anim .glow::before{animation:g-glow calc(2.2s/var(--speed)) var(--ease) calc(.7s/var(--speed)) both}
.anim .hero b{animation:g-rise calc(1.2s/var(--speed)) var(--ease) calc(.6s/var(--speed)) both}
@keyframes g-glow{from{opacity:0;transform:translate(-50%,-50%) scale(.55)}}

/* rows: label, bar, value. The bar of each row fills in --rt, so rows can race at their real speeds. */
.rows{margin-top:auto;margin-bottom:76px;border-top:1px solid var(--ink-12)}
.rows>.sk-label{display:block;padding:20px 0 8px}
.row{display:grid;grid-template-columns:330px 1fr 260px;align-items:center;gap:28px;padding:13px 0;border-bottom:1px solid var(--ink-12);font:400 28px/1.2 var(--text);color:var(--ink-70)}
.row i{position:relative;height:18px;border-radius:9px;background:var(--ink-06);overflow:hidden}
.row i::after{content:"";position:absolute;inset:0;width:var(--w,100%);border-radius:9px;background:rgba(var(--ink-rgb),.42);transform-origin:0 50%}
.row b{font:var(--w-h2) 46px/1 var(--display);letter-spacing:-.03em;color:var(--ink);text-align:right}
.row.k,.row.k b{color:var(--accent)}
.row.k i::after{background:var(--accent)}
.on .rows:not([data-step]) .row i::after,.rows.shown .row i::after{animation:g-x var(--rt,1s) linear both;animation-delay:.5s}
.on .rows:not([data-step]) .row b,.rows.shown .row b{animation:g-fade .4s var(--ease) both;animation-delay:calc(.5s + var(--rt,1s))}

/* cells: three or four columns divided by hairlines */
.cells{display:grid;grid-template-columns:repeat(var(--n,4),1fr);margin-top:auto;margin-bottom:76px;border-top:1px solid var(--ink-12)}
.cell{padding:36px 36px 0 0;border-right:1px solid var(--ink-12);margin-right:36px}
.cell:last-child{border-right:0;margin-right:0}
.cell .sk-h3{color:var(--accent);--fs:54px}
.cell .sk-body{--fs:27px;margin-top:16px}
.cell .mini{height:150px;margin:0 0 26px}
.cell .mini svg{height:100%;width:auto;display:block;overflow:visible}

/* numbers: a two by two grid of large figures */
.nums{display:grid;grid-template-columns:1fr 1fr;gap:0 96px;margin-top:auto;margin-bottom:84px}
.num{border-top:1px solid var(--ink-12);padding:30px 0 34px}
.num b{display:block;font:var(--w-h1) calc(112px*var(--type))/.95 var(--display);letter-spacing:calc(-.05em*var(--track));color:var(--ink)}
.num:first-child b{color:var(--accent)}
.num span{display:block;margin-top:14px;font:400 30px/1.3 var(--text);color:var(--ink-70)}

/* pair: two giant words side by side */
.pair{flex:1;display:grid;grid-template-columns:1fr 1fr;align-items:center}
.half{padding-right:72px}
.half+.half{border-left:1px solid var(--ink-12);padding-left:72px}
.half .sk-mega{--fs:216px}
.half code{display:block;font:400 34px/1 var(--mono);color:var(--accent);margin:44px 0 22px}
.half .sk-body{max-width:660px}

/* card: a quiet panel, 1px hairline, no shadow */
.card{background:var(--card);border:1px solid var(--ink-12);border-radius:var(--radius);padding:40px 52px 38px;box-sizing:border-box}
.card>.sk-label{color:var(--accent)}
.card h3{font:var(--w-h3) 46px/1.12 var(--display);letter-spacing:-.022em;margin:20px 0 10px}
.card .meta{font:400 24px/1 var(--mono);color:var(--ink-50)}
.card .stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border-top:1px solid var(--ink-12)}
.card .stats div{padding:22px 0 0}
.card .stats span{display:block;font:400 22px/1 var(--mono);letter-spacing:.06em;color:var(--ink-50);margin-bottom:12px}
.card .stats b{display:block;font:var(--w-h3) 54px/1 var(--display);letter-spacing:-.025em}
.card .stats .k b{color:var(--accent)}

/* cols: two cards with numbered lists */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:auto;margin-bottom:84px}
.cols .card{padding:32px 40px 30px}
.cols .card>.sk-label{color:var(--ink)}
.cols .card.k>.sk-label{color:var(--accent)}
.cols ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:r}
.cols li{counter-increment:r;position:relative;padding:20px 0 20px 50px;border-top:1px solid var(--ink-12);font:500 32px/1.25 var(--text);letter-spacing:-.012em}
.cols li::before{content:counter(r);position:absolute;left:0;top:27px;font:400 24px/1 var(--mono);letter-spacing:0;color:var(--ink-50)}
.cols .card.k li::before{color:var(--accent)}

/* term: a command on the left, notes on the right */
.term{margin-top:auto;margin-bottom:76px;background:var(--card);border:1px solid var(--ink-12);border-radius:var(--radius);padding:44px 56px;display:grid;grid-template-columns:1fr 560px;gap:56px}
.term pre{margin:0;font:400 34px/1.8 var(--mono);color:var(--ink);white-space:pre-wrap}
.term pre i{font-style:normal;color:var(--accent)}
.term pre em{font-style:normal;color:var(--ink-50)}
.term aside{border-left:1px solid var(--ink-12);padding-left:48px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.term aside p{margin:0;font:400 26px/1.4 var(--text);color:var(--ink-70)}
.term aside code{font:400 23px/1.5 var(--mono);color:var(--accent)}

/* quote */
.pq{margin:auto 0;padding-bottom:40px;max-width:1500px;font:300 var(--pq,64px)/1.2 var(--display);letter-spacing:-.03em;color:var(--ink);quotes:none}
.pq em{display:block;margin-top:36px;font:400 22px/1.2 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}

/* media: copy left, a 16:9 frame right. Put a video or an image element in .frame; data-video on the slide plays it on entry. */
.mgrid{flex:1;display:grid;grid-template-columns:640px 1fr;gap:64px;align-items:center;padding-bottom:40px}
.frame{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--ink-12)}
.frame video,.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame .slot{position:absolute;inset:0;display:grid;place-items:center;font:400 22px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}
.slide.bleed{padding:0}
.slide.bleed>video,.slide.bleed>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ticket and code, for a flooded slide: an offer on the left, a QR tile of the same height on the right */
.duo{flex:1;display:flex;gap:72px;align-items:flex-start;justify-content:center;margin-top:44px}
.ticket,.qr{--accent:var(--k-accent);--accent-rgb:var(--k-accent-rgb);--on-accent:var(--k-on)}   /* white paper: the accent is the accent again */
.ticket{position:relative;flex:none;width:940px;height:540px;display:grid;grid-template-columns:1fr 180px;color:#0B0B0C;background:#fff;border-radius:34px;
  -webkit-mask:radial-gradient(circle 26px at 760px 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 26px at 760px 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 26px at 760px 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle 26px at 760px 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.ticket .main{position:relative;padding:52px 60px}
.ticket .sk-label{color:rgba(11,11,12,.5)!important}
.ticket .amt{position:absolute;left:54px;bottom:150px;font:var(--w-mega) 210px/.8 var(--display);letter-spacing:calc(-.065em*var(--track));color:var(--accent)}
.ticket .code{position:absolute;left:60px;bottom:54px;display:flex;gap:20px;align-items:center}
.ticket .code b{font:400 40px/1 var(--mono);letter-spacing:.3em;color:#0B0B0C}
.ticket .stub{border-left:2px dashed rgba(11,11,12,.12);display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.1) 0 7px,#fff 7px 15px)}
.ticket .stub span{writing-mode:vertical-rl;transform:rotate(180deg);font:400 22px/1 var(--mono);letter-spacing:.18em;color:var(--accent)}
.qrbox{flex:none;display:flex;flex-direction:column;align-items:center;gap:22px}
.qr{width:540px;height:540px;background:#fff;border-radius:34px;padding:40px;box-sizing:border-box}
.qr svg,.qr img{width:100%;height:100%;display:block}

/* close: the last slide, one large line and a contact */
.endcard{margin-top:auto;padding-bottom:40px}
.endcard .sk-label{display:block;margin-top:22px}
.endcard .big{font:var(--w-h1) calc(190px*var(--type))/.9 var(--display);letter-spacing:calc(-.052em*var(--track))}
.endcard .how{margin-top:40px;font:400 30px/1.35 var(--text);color:var(--ink-70)}
.endcard .how b{color:var(--ink);font-weight:600}

/* the hatched bar under a big figure */
.bar{height:26px;border-radius:3px;transform-origin:left;transform:scaleX(0)}
.on .bar{animation:g-x var(--t-slow) var(--ease) calc(.35s/var(--speed)) both;transform:none}

/* ---------- the glass controls: window-fixed, under the transition layer ---------- */
.sk-nav{position:fixed;z-index:40;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;color:var(--ink);overflow:hidden;
  background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(11,11,12,.04),0 6px 24px rgba(11,11,12,.07);
  opacity:.6;transition:opacity .35s ease}
[data-ground=dark] .sk-nav{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 24px rgba(0,0,0,.4)}
.sk-nav:hover,body.pointer .sk-nav,.sk-nav.hold{opacity:1}
.sk-nav[data-pos=br]{right:20px;bottom:20px}
.sk-nav[data-pos=bl]{left:20px;bottom:20px}
.sk-nav[data-pos=bc]{left:50%;bottom:20px;translate:-50% 0}
.sk-nav button{all:unset;cursor:pointer;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:inherit;flex:none;transition:background .2s,opacity .2s}
.sk-nav button:hover{background:rgba(255,255,255,.6)}
.sk-nav button:active{background:rgba(255,255,255,.85)}
[data-ground=dark] .sk-nav button:hover{background:rgba(255,255,255,.16)}
.sk-nav button[disabled]{opacity:.25;pointer-events:none}
.sk-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.sk-nav button[hidden]{display:none}
.sk-nav svg{width:16px;height:16px;display:block}
.sk-nav .pg{font:500 13px/1 var(--mono);letter-spacing:.04em;font-variant-numeric:tabular-nums;padding:0 6px;min-width:58px;text-align:center;white-space:nowrap}
.sk-nav .pg i{font-style:normal;opacity:.5}
/* one dot per click on this slide */
.sk-nav .st{display:flex;gap:6px;align-items:center;padding:0 4px 0 2px}
.sk-nav .st:empty{display:none}
.sk-nav .st i{width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(var(--ink-rgb),.35);transition:background .25s,box-shadow .25s,transform .25s}
.sk-nav .st i.done{background:rgba(var(--ink-rgb),.35);box-shadow:none}
.sk-nav .st i.now{background:var(--accent);box-shadow:none;transform:scale(1.15)}
/* scrub: a glass slider. The thumb sits on the current slide; drag it or click the track. */
.sk-nav .track{position:relative;width:min(300px,38vw);height:34px;margin:0 6px;cursor:pointer;touch-action:none}
.sk-nav .track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:rgba(var(--ink-rgb),.14)}
.sk-nav .track .fill{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--accent);width:calc(var(--p,0)*100%)}
.sk-nav .track .thumb{position:absolute;top:50%;left:calc(var(--p,0)*100%);width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(11,11,12,.18),0 4px 12px rgba(11,11,12,.14),inset 0 0 0 5px #fff,inset 0 0 0 11px var(--accent);transition:left .25s var(--ease),transform .2s}
.sk-nav .track.drag .thumb{transition:transform .2s;transform:scale(1.18)}
.sk-nav .track.drag .fill{transition:none}
/* dots: one per slide */
.sk-nav .dots{display:flex;gap:7px;align-items:center;padding:0 12px;height:34px}
.sk-nav .dots i{width:7px;height:7px;border-radius:50%;background:rgba(var(--ink-rgb),.28);cursor:pointer;transition:transform .3s var(--ease),background .3s}
.sk-nav .dots i.now{transform:scale(1.5);background:var(--accent)}
.sk-nav .dots i:hover{background:rgba(var(--ink-rgb),.6)}
.sk-hint{position:fixed;left:16px;bottom:14px;font:12px/1 var(--mono);letter-spacing:.04em;color:rgba(var(--ink-rgb),.34);transition:opacity .6s;z-index:39}
@media (pointer:coarse){.sk-nav{opacity:1}}
.sk-nav{scale:var(--nav-s,1);transform-origin:100% 100%}
.sk-nav[data-pos=bl]{transform-origin:0 100%}
.sk-nav[data-pos=bc]{transform-origin:50% 100%}

/* embedded in the studio: the page shows the pointer and hides the hint */
.embed body{cursor:default}
.embed .sk-hint{display:none}

/* ---------- print / PDF: every slide on its own page, every build shown, its own copy of the light ---------- */
.print,.print body{overflow:visible;height:auto}
.print #stage{position:relative;left:auto;top:auto;transform:none!important;height:auto;overflow:visible}
.print #aura,.print .sk-nav,.print .sk-hint{display:none}
.print .slide{position:relative;opacity:1;visibility:visible;height:1080px;break-after:page}
.print .slide>.aura-print{position:absolute;inset:0;z-index:0}
.print [data-step]{visibility:visible}
.print [data-until]{display:none}
.print .sk-mask>span,.print .sk-fade,.print .sk-w,.print .sk-c{animation:none!important;transform:none!important;opacity:1!important;clip-path:none!important}
.print .bar{transform:none;animation:none}
.print .row i::after,.print .row b{animation:none!important}
.print .tl::after{animation:none;transform:none}
@page{size:1920px 1080px;margin:0}

/* ---------- SVG charts inside slides: colours by class, so a chart follows the theme ---------- */
.chart text{font-family:var(--mono);letter-spacing:.06em}
.f-accent{fill:var(--accent)} .f-on{fill:var(--on-accent)} .f-ink{fill:var(--ink)} .f-ink70{fill:var(--ink-70)} .f-ink50{fill:var(--ink-50)}
.f-ink12{fill:rgba(var(--ink-rgb),.14)} .f-ink06{fill:var(--ink-06)} .f-ground{fill:var(--ground)} .f-none{fill:none}
.s-accent{stroke:var(--accent)} .s-ink{stroke:var(--ink)} .s-ink50{stroke:var(--ink-50)} .s-ink12{stroke:var(--ink-12)}
.hdr .sk-label{--fs:19px}
/* six: a three by two grid of short items */
.six{display:grid;grid-template-columns:repeat(3,1fr);gap:0 64px;margin-top:auto;margin-bottom:76px}
.six>div{border-top:1px solid var(--ink-12);padding:26px 0 32px}
.six .sk-h3{color:var(--accent);--fs:50px}
.six .sk-body{--fs:27px;margin-top:12px}

/* list: an agenda. Number, title, a mono note on the right */
.list{margin-top:auto;margin-bottom:76px;border-top:1px solid var(--ink-12)}
.list>div{display:grid;grid-template-columns:120px 1fr auto;align-items:baseline;padding:27px 0 29px;border-bottom:1px solid var(--ink-12)}
.list .n{font:400 24px/1 var(--mono);letter-spacing:.06em;color:var(--accent)}
.list b{font:var(--w-h3) calc(58px*var(--type))/1.05 var(--display);letter-spacing:calc(-.03em*var(--track))}
.list span:last-child{font:400 22px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}

/* section break: one word, bottom left, on the flooded field */
.brk{margin-top:auto;padding-bottom:40px}
.brk .sk-label{display:block;margin-bottom:34px}
.brk .sk-lede{margin-top:40px}

/* glass: panels that blur the light behind them. The same recipe as the controls. */
.glassrow{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:auto;margin-bottom:84px}
.glass{padding:34px 40px 38px;border-radius:var(--radius);box-sizing:border-box;
  background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(11,11,12,.04),0 6px 24px rgba(11,11,12,.07)}
[data-ground=dark] .glass{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 24px rgba(0,0,0,.4)}
.glass .sk-label{color:var(--ink-70)}
.slide[data-cam=full] .glass{background:rgba(var(--k-on-rgb),.14);border-color:rgba(var(--k-on-rgb),.3);box-shadow:inset 0 1px 0 rgba(var(--k-on-rgb),.3)}
.glass b{display:block;margin-top:26px;font:var(--w-h1) calc(96px*var(--type))/1 var(--display);letter-spacing:calc(-.045em*var(--track));color:var(--ink)}
.glass code{display:block;margin-top:18px;font:400 22px/1.3 var(--mono);color:var(--ink-70)}

/* table: hairline rows, keys in the first column */
.tblw{margin-top:auto;margin-bottom:84px}
.tbl{width:100%;border-collapse:collapse}
.tbl th{font:400 22px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50);text-align:left;padding:0 0 16px;border-bottom:1px solid var(--ink)}
.tbl td{padding:9px 24px 9px 0;border-bottom:1px solid var(--ink-12);font:400 30px/1.2 var(--text);color:var(--ink-70);vertical-align:middle}
.tbl td:first-child{width:520px;color:var(--ink-50);font-size:24px}
.tbl td:nth-child(2){color:var(--ink)}
.tbl kbd{display:inline-block;min-width:40px;height:40px;box-sizing:border-box;padding:0 12px;margin-right:8px;border:1px solid var(--ink-12);border-radius:10px;background:var(--card);font:400 21px/38px var(--mono);color:var(--ink);text-align:center}

/* timeline: steps on one line; the accent line draws left to right */
.tl{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),1fr);margin-top:auto;margin-bottom:84px}
.tl::before,.tl::after{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--ink-12)}
.tl::after{background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.on .tl::after{animation:tl-draw calc(1.6s/var(--speed)) var(--ease-io) calc(.5s/var(--speed)) forwards}
@keyframes tl-draw{to{transform:scaleX(1)}}
.tl>div{position:relative;z-index:1;padding:56px 44px 0 0}
.tl>div::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;box-sizing:border-box;border-radius:50%;background:var(--ground);border:2px solid var(--accent)}
.tl>div.k::before{background:var(--accent)}
.tl .sk-label{display:block;margin-bottom:16px}
.tl .sk-h3{--fs:54px}
.tl .sk-body{--fs:27px;margin-top:14px}

/* people: three portraits. Put an img inside .ph. */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:0 64px;margin-top:auto;margin-bottom:76px}
.person{border-top:1px solid var(--ink-12);padding-top:34px}
.person .ph{width:168px;height:168px;border-radius:50%;overflow:hidden;box-sizing:border-box;border:1px solid var(--ink-12);background:repeating-linear-gradient(135deg,var(--accent-mist) 0 7px,var(--card-solid) 7px 15px)}
.person .ph img{width:100%;height:100%;object-fit:cover;display:block}
.person .sk-h3{margin-top:30px}
.person .sk-label{display:block;margin-top:14px;color:var(--accent)}
.person .sk-body{--fs:27px;margin-top:16px}

/* takeaways: three numbered points */
.take{display:grid;grid-template-columns:repeat(3,1fr);gap:0 64px;margin-top:auto;margin-bottom:76px}
.take>div{border-top:1px solid var(--ink-12);padding-top:32px}
.take .n{display:block;font:var(--w-h1) calc(190px*var(--type))/.85 var(--display);letter-spacing:calc(-.06em*var(--track));color:var(--accent)}
.take p{margin:30px 0 0;font:var(--w-h3) calc(42px*var(--type))/1.16 var(--display);letter-spacing:calc(-.025em*var(--track));color:var(--ink);text-wrap:balance}
.f-ink30{fill:rgba(var(--ink-rgb),.3)}

/* ---------- picture frames ----------
   <figure class="pic"> holds an image, a video or generated art in .pic-in. Variants: polaroid, browser, phone, full.
   .sk-reveal uncovers the picture left to right while it settles from 112%; .fx-kenburns pushes in slowly while the slide is up. */
.pic{position:relative;margin:0;display:block;min-width:0}
.pic-in{position:relative;aspect-ratio:var(--ar,16/9);border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--ink-12);box-sizing:border-box;
  --accent:var(--k-accent);--accent-rgb:var(--k-accent-rgb);--on-accent:var(--k-on)}
.pic-in>img,.pic-in>video,.pic-in>.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pic figcaption{margin-top:16px;font:400 20px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}
.on .pic figcaption.sk-fade,.sk-play .pic figcaption.sk-fade{animation-delay:calc((var(--d,0s) + .55s)/var(--speed))}
.sk-reveal .pic-in{clip-path:inset(0 100% 0 0 round var(--radius))}
.sk-reveal .pic-in>*{transform:scale(1.12)}
.on .sk-reveal .pic-in,.sk-play .sk-reveal .pic-in{animation:sk-uncover calc(1.1s/var(--speed)) var(--ease-io) forwards;animation-delay:calc(var(--d,0s)/var(--speed))}
.on .sk-reveal .pic-in>*,.sk-play .sk-reveal .pic-in>*{animation:sk-unzoom calc(1.7s/var(--speed)) var(--ease) forwards;animation-delay:calc(var(--d,0s)/var(--speed))}
@keyframes sk-uncover{to{clip-path:inset(0 0 0 0 round var(--radius))}}
@keyframes sk-unzoom{to{transform:none}}
[data-step]:not(.shown) .sk-reveal .pic-in,[data-step]:not(.shown) .sk-reveal .pic-in>*,[data-step]:not(.shown).sk-reveal .pic-in,[data-step]:not(.shown).sk-reveal .pic-in>*{animation:none!important}
.on .fx-kenburns .pic-in>*{animation:sk-kb 24s linear forwards}
.on .sk-reveal.fx-kenburns .pic-in>*{animation:sk-unzoom calc(1.7s/var(--speed)) var(--ease) calc(var(--d,0s)/var(--speed)) forwards,sk-kb 24s linear calc(var(--d,0s)/var(--speed)) forwards}
@keyframes sk-kb{to{scale:1.14;translate:-2% -1.5%}}

/* generated art: six compositions drawn with gradients in the theme colours, for frames that have no picture yet */
.art{background-color:var(--card-solid)}
.art.a1{background-image:radial-gradient(62% 92% at 78% 112%,var(--accent) 0,rgba(var(--accent-rgb),.55) 38%,rgba(var(--accent-rgb),0) 72%),radial-gradient(52% 72% at 8% -12%,var(--accent-ice),rgba(var(--accent-rgb),0) 72%)}
.art.a2{background-image:radial-gradient(circle at 68% 47%,var(--on-accent) 0 8.6%,rgba(var(--accent-rgb),0) 9%),linear-gradient(180deg,var(--accent-ice) 0,var(--accent-mid) 47%,var(--accent) 47.2%,var(--accent-deep) 100%)}
.art.a3{background-image:radial-gradient(circle at 30% 62%,var(--accent) 0 23%,rgba(var(--accent-rgb),0) 23.4%),repeating-linear-gradient(135deg,var(--accent-mist) 0 9px,rgba(var(--accent-rgb),0) 9px 22px)}
.art.a4{background-image:conic-gradient(from 210deg at 62% 58%,var(--accent),var(--accent-ice),var(--accent-mid),var(--accent-deep),var(--accent))}
.art.a5{background-image:radial-gradient(circle,rgba(var(--accent-rgb),.55) 0 17%,rgba(var(--accent-rgb),0) 19%),linear-gradient(160deg,var(--accent-ice),var(--accent-mist) 60%,rgba(var(--accent-rgb),.3));background-size:44px 44px,100% 100%}
.art.a6{background-image:radial-gradient(circle at 40% 54%,rgba(var(--accent-rgb),0) 0 26%,var(--accent) 26.3% 28.6%,rgba(var(--accent-rgb),0) 29%),radial-gradient(circle at 62% 46%,var(--accent-mid) 0 20%,rgba(var(--accent-rgb),0) 20.4%),linear-gradient(200deg,var(--accent-mist),rgba(var(--accent-rgb),0) 70%)}

/* a full-bleed picture with a glass caption */
.slide>.pic.full{position:absolute;inset:0;z-index:0}
.pic.full .pic-in{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;border:0}
.slide.bleed>.glass.cap{position:absolute;left:96px;bottom:96px;width:840px;padding:44px 52px 48px;background:rgba(255,255,255,.64)}
[data-ground=dark] .slide.bleed>.glass.cap{background:rgba(10,10,12,.56)}
.cap .sk-label{display:block;margin-bottom:24px}
.cap .sk-body{margin-top:22px}

/* an instant photo: white paper, a square picture, the caption on the paper. Paper that overlaps may carry one soft shadow. */
.pic.polaroid{background:#fff;padding:22px 22px 0;border-radius:6px;box-shadow:0 18px 50px rgba(11,11,12,.16),0 2px 6px rgba(11,11,12,.08)}
.pic.polaroid .pic-in{aspect-ratio:1/1;border-radius:2px;border:0}
.pic.polaroid figcaption{height:92px;margin:0;display:grid;place-items:center;font:500 30px/1 var(--text);letter-spacing:-.01em;text-transform:none;color:#0B0B0C}
.pols{display:flex;justify-content:center;gap:56px;margin-top:auto;margin-bottom:64px}
.pols .pic{width:440px;flex:none}
.pols .p0{rotate:-5deg;translate:0 18px}
.pols .p1{rotate:2deg;translate:0 -14px;z-index:3}
.pols .p2{rotate:6deg;translate:0 22px}

/* a browser window */
.pic.browser{border:1px solid var(--ink-12);border-radius:var(--radius);overflow:hidden;background:var(--card-solid)}
.pic.browser .chrome{height:56px;display:flex;align-items:center;gap:10px;padding:0 22px;border-bottom:1px solid var(--ink-12);background:var(--card)}
.pic.browser .chrome i{width:13px;height:13px;border-radius:50%;background:rgba(var(--ink-rgb),.2);flex:none}
.pic.browser .chrome span{margin-left:16px;flex:1;max-width:620px;height:32px;border-radius:16px;background:var(--ink-06);padding:0 18px;font:400 17px/32px var(--mono);color:var(--ink-50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pic.browser .pic-in{aspect-ratio:16/10;border:0;border-radius:0}
.pic.browser.sk-reveal .pic-in{clip-path:inset(0 100% 0 0)}
.mgrid.flip{grid-template-columns:1fr 640px}
.mgrid.flip>div:first-child{order:2}

/* a phone, drawn in the ink colour */
.pic.phone{width:372px;padding:14px;border-radius:64px;background:var(--ink);box-sizing:border-box}
.pic.phone .pic-in{aspect-ratio:9/19.5;border-radius:50px;border:0}
.pic.phone .notch{position:absolute;left:50%;top:30px;width:104px;height:30px;margin-left:-52px;border-radius:15px;background:var(--ink);z-index:3}
.phg{flex:1;display:grid;grid-template-columns:1fr 372px;gap:120px;align-items:center;padding-right:96px}
.phg.flip{grid-template-columns:372px 1fr;padding:0 0 0 96px}
.phg.flip>div{order:2}
.pts{list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--ink-12)}
.pts li{padding:20px 0;border-bottom:1px solid var(--ink-12);font:400 30px/1.3 var(--text);color:var(--ink-70)}

/* gallery, collage, before and after, testimonial */
.gal{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:0 40px;margin-top:auto;margin-bottom:76px}
.l-gallery>.sk-h1,.l-pricing>.sk-h1{margin-bottom:40px}
.gal .sk-h3{margin-top:26px;--fs:40px}
.gal .sk-body{--fs:26px;margin-top:10px}
.colg{flex:1;min-height:0;display:grid;grid-template-columns:470px 1fr 420px;grid-template-rows:1fr 1fr;gap:28px;padding:44px 0 30px}
.colg-t{grid-row:1/3;align-self:center}
.colg .pic{display:flex;flex-direction:column;min-height:0}
.colg .pic-in{flex:1;aspect-ratio:auto;min-height:0}
.colg .c0{grid-column:2;grid-row:1/3}
.colg .c1{grid-column:3;grid-row:1}
.colg .c2{grid-column:3;grid-row:2}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:auto;margin-bottom:76px}
.cmp .sk-label{display:block;margin-bottom:18px}
.cmp .sk-label.k{color:var(--accent)}
.cmp .sk-body{--fs:27px;margin-top:20px}
.tst{flex:1;display:grid;grid-template-columns:520px 1fr;gap:88px;align-items:center;padding-bottom:30px}
.tst .pic-in{aspect-ratio:4/5}
.tst .pq{--pq:58px;margin:0;padding:0}
.who{margin:40px 0 0;display:flex;flex-direction:column;gap:14px}
.who b{font:600 34px/1.1 var(--display);letter-spacing:-.02em;color:var(--ink)}

/* statement: one sentence, centred on the height of the slide */
.say{margin:auto 0;padding-bottom:56px}
.say .sk-lede{margin-top:44px;max-width:1300px}

/* denser variants of the agenda and the grid */
.list.dense>div{padding:17px 0 19px}
.list.dense b{font-size:calc(46px*var(--type))}
.six.c4,.six.c5{gap:0 44px}
.six.c4 .sk-h3,.six.c5 .sk-h3{--fs:40px}
.six.c4 .sk-body,.six.c5 .sk-body{--fs:24px}

/* logo wall: a hairline grid of names or marks */
.logos{display:grid;grid-template-columns:repeat(var(--n,4),1fr);margin-top:auto;margin-bottom:76px;border-top:1px solid var(--ink-12);border-left:1px solid var(--ink-12)}
.logos>div{height:168px;display:grid;place-items:center;border-right:1px solid var(--ink-12);border-bottom:1px solid var(--ink-12)}
.logos b{font:var(--w-h3) 38px/1 var(--display);letter-spacing:-.025em;color:var(--ink-70)}
.logos img{max-width:62%;max-height:64px;object-fit:contain;display:block}

/* code: numbered lines, marked lines in the accent */
.cdg{flex:1;display:grid;grid-template-columns:560px 1fr;gap:72px;align-items:center;padding-bottom:30px}
.codebox{background:var(--card);border:1px solid var(--ink-12);border-radius:var(--radius);padding:30px 0 34px;overflow:hidden;min-width:0}
.codebox>.sk-label{display:block;padding:0 40px 22px;margin-bottom:22px;border-bottom:1px solid var(--ink-12);text-transform:none}
.codebox pre{margin:0;font:400 var(--cfs,30px)/1.62 var(--mono);color:var(--ink);tab-size:2}
.codebox .ln{display:block;white-space:pre;padding-right:40px}
.codebox .ln i{display:inline-block;width:86px;padding-right:28px;box-sizing:border-box;text-align:right;font-style:normal;color:var(--ink-50)}
.codebox .ln.k{background:rgba(var(--accent-rgb),.1);box-shadow:inset 3px 0 0 var(--accent)}

/* pricing: two or three plans, one filled with the accent */
.plans{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:28px;margin-top:auto;margin-bottom:76px}
.plan{background:var(--card);border:1px solid var(--ink-12);border-radius:var(--radius);padding:32px 40px 26px;box-sizing:border-box}
.plan b{display:block;margin-top:22px;font:var(--w-h1) calc(84px*var(--type))/1 var(--display);letter-spacing:calc(-.045em*var(--track));color:var(--ink)}
.plan .per{display:block;margin-top:12px;font:400 20px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}
.plan ul{list-style:none;margin:24px 0 0;padding:0}
.plan li{padding:13px 0;border-top:1px solid var(--ink-12);font:400 26px/1.3 var(--text);color:var(--ink-70)}
.plan.k{background:var(--accent);border-color:transparent;--ink-12:rgba(var(--on-accent-rgb),.3)}
.plan.k b{color:var(--on-accent)}
.plan.k .sk-label,.plan.k .per,.plan.k li{color:rgba(var(--on-accent-rgb),.86)}

/* funnel: centred bars that narrow, the count and the share of the first stage */
.fun{margin-top:auto;margin-bottom:76px;border-top:1px solid var(--ink-12)}
.fun>div{display:grid;grid-template-columns:300px 1fr 190px 110px;align-items:center;gap:28px;padding:16px 0;border-bottom:1px solid var(--ink-12);font:400 30px/1.2 var(--text);color:var(--ink-70)}
.fun i{display:block;height:64px;width:var(--w,100%);margin:0 auto;border-radius:8px;background:rgba(var(--ink-rgb),.16)}
.on .fun i{animation:g-x calc(1.1s/var(--speed)) var(--ease) both;animation-delay:calc(var(--gd,0s)/var(--speed))}
.fun b{font:var(--w-h2) 50px/1 var(--display);letter-spacing:-.03em;color:var(--ink);text-align:right}
.fun em{font:400 22px/1 var(--mono);font-style:normal;color:var(--ink-50);text-align:right}
.fun .k i{background:var(--accent)}
.fun .k b{color:var(--accent)}

/* donut: the ring on the right, the lead share in the middle, a legend under the headline */
.dng{flex:1;display:grid;grid-template-columns:1fr 600px;gap:88px;align-items:center;padding-bottom:30px}
.ring{position:relative;width:600px;height:600px}
.ring svg{width:100%;height:100%;display:block}
.ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.ring .mid b{font:var(--w-h1) calc(150px*var(--type))/.9 var(--display);letter-spacing:calc(-.055em*var(--track));color:var(--accent)}
.ring .mid .sk-label{max-width:250px;line-height:1.35}
.leg{margin-top:48px;border-top:1px solid var(--ink-12)}
.leg>div{display:grid;grid-template-columns:22px 1fr auto 96px;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--ink-12);font:400 30px/1.2 var(--text);color:var(--ink-70)}
.leg i{width:18px;height:18px;border-radius:50%}
.leg b{font:var(--w-h2) 40px/1 var(--display);letter-spacing:-.03em;color:var(--ink)}
.leg em{font:400 22px/1 var(--mono);font-style:normal;color:var(--ink-50);text-align:right}

/* roadmap: three columns, the first in the accent */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:0 56px;margin-top:auto;margin-bottom:76px}
.road>div{border-top:2px solid var(--ink-12);padding-top:28px}
.road>div.k{border-top-color:var(--accent)}
.road .k .sk-label{color:var(--accent)}
.road ul{list-style:none;margin:24px 0 0;padding:0}
.road li{padding:18px 0;border-top:1px solid var(--ink-12);font:var(--w-h3) 34px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
.road li:first-child{border-top:0;padding-top:0}

/* a QR code on the closing slide, and speaker notes (press N) */
.slide>.endqr{position:absolute;right:128px;bottom:136px;width:300px;height:300px;padding:24px;border-radius:24px}
.sk-notes{position:fixed;left:20px;bottom:20px;z-index:41;max-width:min(560px,70vw);padding:16px 20px 18px;border-radius:16px;font:400 16px/1.5 var(--text);color:var(--ink);white-space:pre-wrap;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.7)}
[data-ground=dark] .sk-notes{background:rgba(20,20,22,.72);border-color:rgba(255,255,255,.2)}
.sk-notes[hidden]{display:none}
.sk-notes:empty::before{content:"No notes on this slide.";color:var(--ink-50)}

.print .sk-reveal .pic-in{clip-path:none!important;animation:none!important}
.print .pic-in>*{transform:none!important;animation:none!important;scale:none!important;translate:none!important}
.print .fun i{animation:none!important}
.print .sk-notes{display:none}

/* ?shot in the address: a clean frame for a screenshot */
.shot .sk-nav,.shot .sk-hint,.shot .sk-notes{display:none}