/* Stage Kit tokens: type, colour, grain and motion for a 1920x1080 stage.
   theme.js rewrites the custom properties below from one config object; these are the defaults. */
@font-face{font-family:"Inter";src:url(fonts/Inter-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:"Fragment Mono";src:url(fonts/FragmentMono-400-latin.woff2) format("woff2");font-weight:400;font-display:block}

:root{
  /* colour: one ground, one ink, one accent. The five accent tones are derived from --accent. */
  --ground:#FFFFFF;
  --ink:#0B0B0C; --ink-rgb:11,11,12;
  --ink-70:rgba(var(--ink-rgb),.70);
  --ink-50:rgba(var(--ink-rgb),.50);
  --ink-12:rgba(var(--ink-rgb),.12);   /* hairlines */
  --ink-06:rgba(var(--ink-rgb),.06);
  --card:rgba(255,255,255,.94); --card-solid:#FFFFFF;
  --accent:#2456FF; --accent-rgb:36,86,255;
  --accent-deep:#0F38CC; --accent-night:#0A1550; --accent-mid:#6C8DFF; --accent-ice:#CBD8FF; --accent-mist:#ECF1FF;
  --on-accent:#FFFFFF; --on-accent-rgb:255,255,255;
  --k-accent:#2456FF; --k-accent-rgb:36,86,255; --k-on:#FFFFFF; --k-on-rgb:255,255,255;   /* fixed copies, for scopes that swap the roles */

  /* type: Apple system faces first, bundled open fonts behind them */
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
  --text:var(--display);
  --mono:ui-monospace,"SF Mono","Fragment Mono",Menlo,monospace;
  --w-mega:800; --w-h1:700; --w-h2:700; --w-h3:600;
  --track:.55;   /* scales the negative tracking of the display sizes */
  --type:1;      /* scales every size */

  /* motion: three curves; three durations for entrances and builds (each transition has its own length) */
  --ease:cubic-bezier(.16,1,.3,1);      /* out: every entrance */
  --ease-in:cubic-bezier(.7,0,.84,0);   /* in: every exit */
  --ease-io:cubic-bezier(.87,0,.13,1);  /* in-out: wipes, covers, camera moves */
  --t-fast:.32s; --t:.7s; --t-slow:1.1s; --stagger:.07s; --speed:1;

  --radius:24px;
}

/* rendering: crisp, no filters on type */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;font-kerning:normal}
body{font-family:var(--text);color:var(--ink);background:var(--ground)}

/* type scale at 1920. A slide resizes a headline with --fs, so the global scale still applies. */
.sk-mega{font:var(--w-mega) calc(var(--fs,260px)*var(--type))/.86 var(--display);letter-spacing:calc(-.06em*var(--track));text-transform:uppercase;margin:0}
.sk-h1{font:var(--w-h1) calc(var(--fs,156px)*var(--type))/.94 var(--display);letter-spacing:calc(-.052em*var(--track));margin:0}
.sk-h2{font:var(--w-h2) calc(var(--fs,104px)*var(--type))/.96 var(--display);letter-spacing:calc(-.045em*var(--track));margin:0}
.sk-h3{font:var(--w-h3) calc(var(--fs,46px)*var(--type))/1.1 var(--display);letter-spacing:calc(-.025em*var(--track));margin:0}
.sk-lede{font:400 calc(var(--fs,40px)*var(--type))/1.3 var(--text);letter-spacing:-.012em;color:var(--ink-70);margin:0}
.sk-body{font:400 calc(var(--fs,30px)*var(--type))/1.42 var(--text);letter-spacing:-.006em;color:var(--ink-70);margin:0}
.sk-label{font:400 calc(var(--fs,22px)*var(--type))/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}
.sk-mega,.sk-h1,.sk-h2{word-spacing:.04em}
.sk-num{font-variant-numeric:tabular-nums}
.sk-accent{color:var(--accent)}
/* the one emphasis device in running type: an accent block behind one word */
.sk-hl{display:inline-block;background:var(--accent);color:var(--on-accent);padding:0 .14em;margin:0 -.02em;border-radius:.06em;line-height:1}

/* grain for any positioned panel: a whisper on the ground, heavier on the accent */
.sk-grain{position:relative;isolation:isolate}
.sk-grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -.55'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:300px 300px;opacity:.05;mix-blend-mode:multiply}
.sk-grain.sk-on-accent::after{opacity:.5;mix-blend-mode:soft-light}

/* the hatch: diagonal accent stripes, the kit's only pattern */
.sk-hatch{background:repeating-linear-gradient(135deg,var(--accent) 0 6px,var(--accent-mist) 6px 14px)}
.sk-hatch-soft{background:repeating-linear-gradient(135deg,var(--accent-mist) 0 7px,var(--card-solid) 7px 15px)}

/* ---------- entrances ----------
   A headline is written as lines: <span class="sk-mask"><span>One line</span></span>, with --i on each line for the stagger.
   Support text takes .sk-fade and a delay in --d. Both play when their slide gets .on (or any parent gets .sk-play). */
.sk-mask{display:block;overflow:hidden;padding:.16em .06em .14em;margin:-.16em -.06em -.14em}
.sk-mask>span{display:inline-block;transform:translateY(105%)}
.on .sk-mask>span,.sk-play .sk-mask>span{animation:sk-rise var(--t-slow) var(--ease) forwards;animation-delay:calc(var(--i,0)*var(--stagger) + var(--d,0s)/var(--speed))}
@keyframes sk-rise{to{transform:none}}
.sk-fade{opacity:0;transform:translateY(18px)}
.on .sk-fade,.sk-play .sk-fade{animation:sk-fadeup var(--t) var(--ease) forwards;animation-delay:calc(var(--d,0s)/var(--speed))}
@keyframes sk-fadeup{to{opacity:1;transform:none}}

/* fade: the whole line fades up, no mask */
[data-enter=fade] .sk-mask{overflow:visible}
[data-enter=fade] .sk-mask>span{transform:translateY(28px);opacity:0}
[data-enter=fade] .on .sk-mask>span,[data-enter=fade] .sk-play .sk-mask>span{animation-name:sk-fadeup;animation-duration:var(--t-slow)}

/* words and chars: deck.js splits each line into .sk-w (and .sk-c) units; each rises out of the line's mask */
[data-enter=words] .sk-mask>span,[data-enter=chars] .sk-mask>span{transform:none;animation:none!important}
.sk-w{display:inline-block;white-space:nowrap}
[data-enter=words] .sk-w,[data-enter=chars] .sk-c{display:inline-block;transform:translateY(110%)}
[data-enter=words] .on .sk-w,[data-enter=words] .sk-play .sk-w{animation:sk-rise var(--t-slow) var(--ease) forwards;animation-delay:calc(var(--i,0)*var(--stagger) + var(--n,0)*.045s/var(--speed) + var(--d,0s)/var(--speed))}
[data-enter=chars] .on .sk-c,[data-enter=chars] .sk-play .sk-c{animation:sk-rise var(--t-slow) var(--ease) forwards;animation-delay:calc(var(--i,0)*var(--stagger) + var(--n,0)*.018s/var(--speed) + var(--d,0s)/var(--speed))}

/* wipe: the line is uncovered left to right on the in-out curve */
[data-enter=wipe] .sk-mask{overflow:visible}
[data-enter=wipe] .sk-mask>span{transform:none;clip-path:inset(-20% 100% -20% -2%)}
[data-enter=wipe] .on .sk-mask>span,[data-enter=wipe] .sk-play .sk-mask>span{animation:sk-wipe var(--t-slow) var(--ease-io) forwards;animation-delay:calc(var(--i,0)*var(--stagger)*2 + var(--d,0s)/var(--speed))}
@keyframes sk-wipe{to{clip-path:inset(-20% -2% -20% -2%)}}

/* scale: the line settles forward from 94% */
[data-enter=scale] .sk-mask{overflow:visible}
[data-enter=scale] .sk-mask>span{transform:scale(.94) translateY(14px);transform-origin:0 100%;opacity:0}
[data-enter=scale] .on .sk-mask>span,[data-enter=scale] .sk-play .sk-mask>span{animation:sk-settle var(--t-slow) var(--ease) forwards;animation-delay:calc(var(--i,0)*var(--stagger) + var(--d,0s)/var(--speed))}
@keyframes sk-settle{to{opacity:1;transform:none}}

/* drop: the line falls into its clip from above */
[data-enter=drop] .sk-mask>span{transform:translateY(-105%)}
/* slide: the line comes in from the left */
[data-enter=slide] .sk-mask{overflow:visible}
[data-enter=slide] .sk-mask>span{transform:translateX(-72px);opacity:0}
[data-enter=slide] .on .sk-mask>span,[data-enter=slide] .sk-play .sk-mask>span{animation-name:sk-fadeup}
/* flip: the line swings up from flat */
[data-enter=flip] .sk-mask{overflow:visible}
[data-enter=flip] .sk-mask>span{transform:perspective(900px) rotateX(-82deg);transform-origin:50% 100%;opacity:0}
[data-enter=flip] .on .sk-mask>span,[data-enter=flip] .sk-play .sk-mask>span{animation-name:sk-settle}
/* type: letters switch on one after another and do not move */
[data-enter=type] .sk-mask{overflow:visible}
[data-enter=type] .sk-mask>span{transform:none;animation:none!important}
[data-enter=type] .sk-c{opacity:0}
[data-enter=type] .on .sk-c,[data-enter=type] .sk-play .sk-c{animation:sk-show .01s linear forwards;animation-delay:calc(var(--i,0)*var(--stagger)*5 + var(--n,0)*.03s/var(--speed) + var(--d,0s)/var(--speed))}
@keyframes sk-show{to{opacity:1}}

/* ---------- charts: add .anim to a parent to build them; each part takes its delay in --gd ---------- */
.gb{transform-box:fill-box;transform-origin:0 50%}                 /* a bar growing along x */
.gv{transform-box:fill-box;transform-origin:50% 100%}              /* a bar growing up */
.gv.gtop{transform-origin:50% 0}
.gdot{transform-box:fill-box;transform-origin:center}             /* a dot popping in */
.gl{stroke-dasharray:1;stroke-dashoffset:0}                        /* a line drawing on: give the path pathLength="1" */
.anim .gb{animation:g-x calc(1.3s/var(--speed)) var(--ease) both;animation-delay:calc(var(--gd,0s)/var(--speed))}
.anim .gv{animation:g-y calc(1.2s/var(--speed)) var(--ease) both;animation-delay:calc(var(--gd,0s)/var(--speed))}
.anim .gl{animation:g-draw calc(1.6s/var(--speed)) var(--ease-io) both;animation-delay:calc(var(--gd,0s)/var(--speed))}
.anim .gf{animation:g-fade var(--t) var(--ease) both;animation-delay:calc(var(--gd,0s)/var(--speed))}
.anim .gdot{animation:g-pop calc(.45s/var(--speed)) var(--ease) both;animation-delay:calc(var(--gd,0s)/var(--speed))}
.anim .grise{animation:g-rise calc(1.2s/var(--speed)) var(--ease) both;animation-delay:calc(var(--gd,.6s)/var(--speed))}
@keyframes g-x{from{transform:scaleX(0)}}
@keyframes g-y{from{transform:scaleY(0)}}
@keyframes g-draw{from{stroke-dashoffset:1}}
@keyframes g-fade{from{opacity:0}}
@keyframes g-pop{from{opacity:0;transform:scale(0)}}
@keyframes g-rise{from{opacity:0;transform:translateY(48px)}}

@media (prefers-reduced-motion:reduce){
  .sk-mask>span,.sk-fade,.sk-w,.sk-c{animation-duration:.01s!important;animation-delay:0s!important}
}