/* Krispy Kreme: the wall from the film. Grey tile, white tube, colour only where the product is. */
[data-project="krispy-kreme"]{--kk-ink:#16181a;--kk-wall:#a9abac;--kk-wall-d:#8f9192;--kk-grout:rgba(40,42,44,.17);--kk-hi:rgba(255,255,255,.22);--kk-low:#8e8f90;--kk-green:#1c7a56;--kk-red:#b23247;--kk-cream:#f4ecd8;--kk-bezel:#1f1a18;--kk-tile-w:calc(100vw*87.4/1920);--kk-tile-h:calc(100vw*93/1920);--kk-film-floor:#a1a1a1;overflow-x:clip}
.kk{--tile:linear-gradient(var(--kk-grout) 1.5px,transparent 1.5px),linear-gradient(90deg,var(--kk-grout) 1.5px,transparent 1.5px),linear-gradient(var(--kk-hi) 1px,transparent 1px),linear-gradient(90deg,var(--kk-hi) 1px,transparent 1px);position:relative;color:var(--kk-ink);padding:0;max-width:none;margin:0;overflow:visible}
.kk .kk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.kk-defs{position:absolute}
[data-project="krispy-kreme"] .site-header{position:relative;z-index:6;background:transparent;border:0}
[data-project="krispy-kreme"] #main{margin-top:-76px}
@media(max-width:850px){[data-project="krispy-kreme"] #main{margin-top:-70px}}

/* wall */
.kk-hero{background-color:var(--kk-wall);background-image:radial-gradient(60% 40% at 22% 12%,rgba(255,255,255,.34),transparent 70%),radial-gradient(50% 44% at 80% 34%,rgba(255,255,255,.2),transparent 72%),linear-gradient(transparent 58%,var(--kk-film-floor) 100%),var(--tile);background-size:auto,auto,auto,var(--kk-tile-w) var(--kk-tile-h),var(--kk-tile-w) var(--kk-tile-h),var(--kk-tile-w) var(--kk-tile-h),var(--kk-tile-w) var(--kk-tile-h);background-position:0 0,0 0,0 0,left calc(100vw*44/1920) bottom var(--kk-seam,0px),left calc(100vw*44/1920) bottom var(--kk-seam,0px),left calc(100vw*44/1920) bottom calc(var(--kk-seam,0px) - 2px),left calc(100vw*44/1920 + 2px) bottom var(--kk-seam,0px)}
.kk-pin{background-color:var(--kk-low);background-image:var(--tile);background-size:104px 72px;background-position:0 0,0 0,0 2px,2px 0}

/* opening */
.kk .kk-hero{position:relative;max-width:none;width:100%;margin:0;border:0;box-sizing:border-box;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:84px clamp(16px,3vw,44px) 22px}
.kk-title{margin:0;font:inherit;letter-spacing:0;line-height:1;flex:1 1 auto;min-height:0;display:flex;align-items:flex-start}
.kk-title-art{position:relative;display:block;width:min(100%,calc((100svh - 248px)*var(--dr)));flex:none}
.kk-neon{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(5px 9px 5px rgba(20,22,24,.34))}
.kk-neon-m{display:none}
.kk-tube-edge{stroke:#7b7d7f}.kk-tube-core{stroke:#fff}.kk-tube-shade{stroke:#e4e6e8}
.kk-o{position:absolute;left:var(--dx);top:var(--dy);width:var(--dd);aspect-ratio:1;translate:-50% -50%}
.kk-hero-foot{display:grid;grid-template-columns:auto auto 1fr auto;grid-template-areas:"p p p a" "t c . l";gap:12px 40px;align-items:baseline;font-size:15px;line-height:1.35;position:relative;z-index:1}
.kk-intro{display:contents}
.kk-intro p{grid-area:p;margin:0;font-size:clamp(20px,2.2vw,32px);line-height:1.15;letter-spacing:-.015em;font-weight:500;max-width:none}
.kk .kk-topline span{display:inline}
.kk-topline{grid-area:t;display:flex;gap:20px;margin:0;padding:0;border:0;flex-wrap:wrap}.kk-topline a{text-decoration:underline;text-underline-offset:3px;padding-block:6px;margin-block:-6px}
.kk-cat{grid-area:c;font-weight:700}
.kk-watch{grid-area:a;justify-self:end;align-self:center;background:var(--kk-ink);color:#fff;border-radius:99px;padding:10px 20px;white-space:nowrap;font-weight:700;font-size:15px;transition:background .2s}
.kk-watch:hover,.kk-watch:focus-visible{background:var(--kk-green)}
.kk-capline{grid-area:l;display:flex;justify-content:flex-end;align-items:baseline;gap:12px 32px;padding:0;margin:0}.kk-capline span:last-child{flex:none;white-space:nowrap}

/* doughnut */
.kk-spin{display:block;width:100%;height:100%;will-change:transform}
.kk-spin svg{display:block;width:100%;height:100%;overflow:visible}
.kk-fall{display:none}

/* film */
.kk-stage{position:relative;background:var(--kk-wall)}
.kk-pin{position:relative;padding:32px clamp(16px,3vw,44px)}
.kk .kk-film{margin:0;padding:0;max-width:none;width:auto}
.kk-cam{position:relative;width:100%;aspect-ratio:16/9;background:#999}
.kk-cam video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#999;max-width:none}
.kk-screens{position:absolute;left:2.65625%;top:41.7593%;width:95%;height:31.1111%;overflow:hidden;pointer-events:none}
.kk-seam{position:absolute;top:0;bottom:0;width:.7675%;background:var(--kk-bezel)}
.kk-seam-1{left:32.62%}.kk-seam-2{left:66.23%}
.kk-roller{display:none;position:absolute;left:0;top:0;width:8.114%;aspect-ratio:1;touch-action:pan-y;cursor:grab;pointer-events:auto;outline:0;transform-origin:50% 100%}
.kk-roller:active{cursor:grabbing}
.kk-roller::before{content:"";position:absolute;inset:-22%}
.kk-js:not(.kk-motion) .kk-roller::before{inset:-45%}
.kk-roller:focus-visible .kk-squash{outline:3px solid var(--kk-ink);outline-offset:3px;border-radius:50%}
.kk-squash{display:block;position:relative;width:100%;height:100%;transform-origin:50% 100%}
.kk-shadow{position:absolute;left:8%;right:8%;bottom:-3%;height:10%;border-radius:50%;background:rgba(5,40,28,.5);filter:blur(3px)}
.kk-film.kk-film figcaption{display:flex;justify-content:space-between;gap:2px 14px;align-items:center;padding:12px 0 0;margin:0;font-size:14px;border:0;color:var(--kk-ink);flex-wrap:wrap;white-space:nowrap;max-width:none}.kk-film figcaption>span{margin-right:auto;color:var(--kk-ink);font-size:inherit}
.kk-film.kk-film figcaption a{text-decoration:underline;text-underline-offset:3px;color:inherit}
.kk-film.kk-film figcaption a,.kk-watch-btn{min-height:40px;display:inline-flex;align-items:center}
.kk-watch-btn{background:none;border:0;padding:0;cursor:pointer;color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:700}
/* it only exists once the script can open the film */
.kk-watch-btn[hidden]{display:none}
.kk-film.kk-film figcaption a:focus-visible,.kk-watch-btn:focus-visible{outline:2px solid var(--kk-ink);outline-offset:3px}

/* words */
.kk .kk-story{margin:0;padding:0;max-width:none;width:auto;border:0}
.kk-beat p{margin:0}.kk-range-lead{max-width:60ch}.kk-beat-format p{max-width:66ch}.kk-lede{max-width:24em}
.kk-about{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:0}
.kk-lede{font-size:clamp(28px,min(4vw,5.4vh),62px);line-height:1.1;letter-spacing:-.02em;font-weight:500}
.kk-beat-idea,.kk-beat-format,.kk-beat-range{padding:30px 0 0}
.kk-range-lead{font-size:clamp(18px,1.55vw,22px);line-height:1.34}
.kk-beat-format p{font-size:clamp(18px,min(2.1vw,3.3vh),34px);line-height:1.3}
.kk-range{margin:14px 0 0;display:flex;flex-direction:column;gap:18px;max-width:none}
.kk-word{display:block;position:relative;max-width:100%}
.kk-word-svg{display:block;width:min(100%,calc(var(--kk-word-h,clamp(84px,14vw,190px))*var(--r)));height:auto;overflow:visible;filter:drop-shadow(4px 7px 4px rgba(20,22,24,.32))}
.kk-only-m{display:none}
.kk-hint{display:none;margin:0}

/* the ending: same wall, one last display. Her sentence and the cover share the bezel and the green ticker, as the film's screens do. */
.kk-end{--seam:clamp(6px,.77vw,12px);--gut:clamp(10px,3vw,44px);background-color:var(--kk-wall);background-image:radial-gradient(60% 34% at 74% 8%,rgba(255,255,255,.3),transparent 70%),linear-gradient(transparent 62%,var(--kk-film-floor) 100%),var(--tile);background-size:auto,auto,var(--kk-tile-w) var(--kk-tile-h),var(--kk-tile-w) var(--kk-tile-h),var(--kk-tile-w) var(--kk-tile-h),var(--kk-tile-w) var(--kk-tile-h);background-position:0 0,0 0,0 0,0 0,0 2px,2px 0;padding:clamp(56px,9vh,104px) var(--gut) clamp(40px,6vh,72px)}
.kk-display{display:grid;grid-template-columns:38.2fr 61.8fr;gap:0 var(--seam);background:var(--kk-bezel);border:var(--seam) solid var(--kk-bezel);border-radius:4px;box-shadow:0 26px 38px -20px rgba(20,22,24,.55),0 3px 7px rgba(20,22,24,.3)}
.kk-aim{container-type:inline-size;background:var(--kk-cream);min-width:0;display:flex;align-items:center}
.kk-aim p{margin:0;padding:0 7cqw;font-size:8.8cqw;line-height:1.08;letter-spacing:-.025em;font-weight:500;color:var(--kk-red);max-width:none}
.kk-cover{margin:0;min-width:0;background:var(--kk-cream)}
.kk-cover img{display:block;width:100%;height:auto}
.kk-tick{grid-column:1/-1;position:relative;overflow:hidden;background:var(--kk-green);color:#fff;margin-top:var(--seam);font-size:clamp(14px,1.4vw,20px);line-height:1;white-space:nowrap;padding:.72em 0}
.kk-tick-run{display:inline-flex;gap:3em;padding-left:1em}
.kk-tick i{position:absolute;top:0;bottom:0;left:calc((100% - var(--seam))*.382);width:var(--seam);background:var(--kk-bezel)}

/* a placard and the way out, on the wall, on the display's own column line */
.kk-facts.kk-facts{display:flex;flex-direction:column;gap:clamp(20px,3vh,32px);width:auto;max-width:none;box-sizing:border-box;background:none;padding:0;margin:0;border:0;color:var(--kk-ink)}
.kk-facts.kk-facts h2{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--kk-ink);letter-spacing:0;text-transform:none}
.kk-facts.kk-facts p{color:var(--kk-ink);margin:0;font-size:clamp(20px,1.9vw,28px);line-height:1.15;letter-spacing:-.01em}
.kk-facts.kk-facts p.original-context{margin-top:6px;font-size:15px;color:var(--kk-ink);letter-spacing:0;line-height:1.3}
.kk-end{display:grid;grid-template-columns:38.2fr 61.8fr;gap:clamp(36px,6vh,64px) var(--seam)}
.kk-display{grid-column:1/-1}
.kk-next.kk-next{background:none;border:0;margin:0;padding:0;color:var(--kk-ink);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);overflow:visible;gap:clamp(16px,2.4vw,36px);align-items:end;min-width:0}
.kk-next.kk-next>div{padding:0;margin:0;align-self:end;display:block;max-width:none;width:auto}
.kk-next.kk-next>div>span:first-child{display:block;font-size:14px;font-weight:700;color:var(--kk-ink);margin-bottom:6px}
.kk-next.kk-next strong{display:block;font-size:clamp(26px,2.9vw,50px);overflow-wrap:normal;line-height:1;letter-spacing:-.03em;font-weight:500;color:var(--kk-ink)}
.kk-next.kk-next .case-next-arrow{display:block;margin-top:12px;font-size:clamp(22px,2.4vw,34px);color:var(--kk-ink);transition:transform .25s}
.kk-next.kk-next:hover .case-next-arrow,.kk-next.kk-next:focus-visible .case-next-arrow{transform:translate(4px,-4px)}
.kk-next.kk-next figure{margin:0;width:100%;max-width:none;height:auto;aspect-ratio:auto;border:var(--seam) solid var(--kk-bezel);border-radius:4px;background:var(--kk-bezel);box-shadow:0 18px 26px -16px rgba(20,22,24,.55);overflow:hidden}
.kk-next.kk-next figure img{display:block;width:100%;height:auto;aspect-ratio:808/632;max-height:none;object-fit:cover;transform:none;margin:0}
.kk-next.kk-next:focus-visible{outline:3px solid var(--kk-ink);outline-offset:6px}

@media(max-aspect-ratio:1/1),(max-width:820px) and (max-aspect-ratio:13/10){
 .kk-neon-d{display:none}.kk-neon-m{display:block}
 .kk-title-art{width:min(100%,calc((100svh - 330px)*var(--mr)))}
 .kk-o{left:var(--mx);top:var(--my);width:var(--md)}
 .kk-hero{padding-top:78px}
 .kk-hero-foot{grid-template-columns:1fr auto;grid-template-areas:"p p" "a a" "t t" "c c" "l l";gap:10px 14px}
 .kk-watch{justify-self:start}
 .kk-capline{justify-content:space-between}
 .kk-end{grid-template-columns:1fr}
 .kk-display{grid-template-columns:1fr;gap:var(--seam) 0}
 .kk-aim p{padding:9cqw 7cqw;font-size:clamp(28px,8.4cqw,62px);line-height:1.08}
 .kk-tick{margin-top:0}
 .kk-tick i{display:none}
 .kk-facts.kk-facts{flex-direction:row;gap:0 20px}
 .kk-facts.kk-facts>div{flex:1 1 0;min-width:0}
 .kk-next.kk-next{grid-template-columns:1fr}
 .kk-next.kk-next strong{font-size:clamp(30px,8.4vw,56px)}
 .kk-only-d{display:none}.kk-only-m{display:block}
 .kk-story{--kk-word-h:118px}
 .kk-hero,.kk-pin,.kk-end{--kk-tile-w:104px;--kk-tile-h:72px;--kk-low:var(--kk-film-floor)}
 .kk-hero{background-image:radial-gradient(60% 40% at 22% 12%,rgba(255,255,255,.34),transparent 70%),radial-gradient(50% 44% at 80% 34%,rgba(255,255,255,.2),transparent 72%),linear-gradient(transparent 62%,var(--kk-low) 100%),var(--tile);background-position:0 0,0 0,0 0,0 0,0 0,0 2px,2px 0}
}

/* live page: krispy-kreme.js has run */
.kk-js .kk-roller{display:block}
.kk-js .kk-hint{display:block;font-weight:700;padding-top:14px}
.kk-cue{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;margin:-17% 0 0 -17%;border-radius:50%;background:var(--kk-ink);opacity:0;transition:opacity .18s;pointer-events:none}
.kk-cue::after{content:"";position:absolute;left:38%;top:27%;border-style:solid;border-width:0;width:34%;height:46%;background:#fff;clip-path:polygon(0 0,100% 50%,0 100%)}
.kk-held .kk-cue{opacity:1}
.kk-dim{position:absolute;top:0;bottom:0;background:rgba(18,20,22,.62);opacity:0;pointer-events:none}

/* draw-on, set before first paint: it finishes by itself, so it is safe if the script never loads */
.kk-anim .kk-neon .kk-tubes path{stroke-dasharray:1;stroke-dashoffset:1;animation:kk-draw 1.25s cubic-bezier(.5,.05,.2,1) forwards;animation-delay:calc(var(--i)*18ms)}
@keyframes kk-draw{to{stroke-dashoffset:0}}
.kk-anim .kk-o .kk-spin{animation:kk-pop .9s cubic-bezier(.3,1.5,.5,1) 1.05s both}
@keyframes kk-pop{from{transform:translateX(70%) rotate(150deg) scale(.2);opacity:0}to{transform:none;opacity:1}}
.kk-anim .kk-tick-run{animation:kk-run 46s linear infinite}
@keyframes kk-run{to{transform:translateX(-50%)}}

/* motion: pinned stage and camera, only once the script is really running */
.kk-motion .kk-stage{height:560vh;height:560svh}
.kk-motion .kk-pin{position:sticky;top:0;height:100vh;height:100svh;padding:0;overflow:hidden}
.kk-motion .kk .kk-film{position:absolute;inset:0;width:auto;height:auto}
.kk-motion .kk-cam{position:absolute;left:0;top:0;width:1920px;height:1080px;aspect-ratio:auto;transform-origin:0 0;will-change:transform;background:none}
/* the film's floor and grid carried on below the frame, inside the camera, so they scale with it */
.kk-motion .kk-cam.kk-joined::after{content:"";position:absolute;left:0;top:calc(100% - 170px);width:100%;height:calc(var(--kk-wall-h,0px) + 170px);pointer-events:none;-webkit-mask-image:linear-gradient(transparent,#000 170px);mask-image:linear-gradient(transparent,#000 170px);background-color:var(--kk-film-floor);background-image:linear-gradient(90deg,rgba(40,42,44,.34) 2.5px,transparent 2.5px),linear-gradient(rgba(40,42,44,.34) 2.5px,transparent 2.5px),linear-gradient(90deg,rgba(255,255,255,.22) 1.5px,transparent 1.5px),linear-gradient(rgba(255,255,255,.22) 1.5px,transparent 1.5px);background-size:87.4px 96px;background-position:44px 39px,44px 39px,46.5px 39px,44px 41.5px}
.kk-motion .kk-cam.kk-fadetop::after{content:"";position:absolute;left:-400px;right:-400px;bottom:-22%;height:50%;background:linear-gradient(transparent,var(--kk-low) 48%,var(--kk-low) 60%,transparent);pointer-events:none}
.kk-motion .kk-cam.kk-fadetop::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(var(--kk-low) .5%,rgba(161,161,161,.72) 4%,rgba(161,161,161,.3) 9%,transparent 15%);pointer-events:none}
.kk-motion .kk-film.kk-film figcaption{position:absolute;left:0;right:0;bottom:0;min-height:46px;box-sizing:border-box;padding:0 clamp(16px,3vw,44px);z-index:3;flex-wrap:nowrap;background:var(--kk-green);border-top:var(--kk-bar,6px) solid var(--kk-bezel);color:#fff}
.kk-motion .kk-film.kk-film figcaption>span{color:#fff;overflow:hidden;text-overflow:ellipsis}
/* white on the green, and drawn inside the bar so the pin never clips it: the padding makes room for the ring without moving the text */
.kk-motion .kk-film.kk-film figcaption a,.kk-motion .kk-film.kk-film .kk-watch-btn{padding-inline:7px;margin-inline:-7px}
.kk-motion .kk-film.kk-film figcaption a:focus-visible,.kk-motion .kk-film.kk-film .kk-watch-btn:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.kk-motion .kk .kk-story{position:absolute;left:clamp(16px,3vw,44px);right:clamp(16px,3vw,44px);top:0;bottom:auto;z-index:2;pointer-events:none;will-change:transform}
.kk-motion .kk-beat{position:absolute;left:0;right:0;top:0;padding:0;opacity:0;will-change:opacity,transform}
.kk-motion .kk-beat-range{opacity:1}
.kk-motion .kk-range-lead{max-width:none;width:max-content;max-width:100%}
.kk-motion .kk-range-lead,.kk-motion .kk-word{opacity:0;will-change:opacity,transform}
.kk-motion .kk-range{margin:8px 0 0;display:block;position:relative}
.kk-motion .kk-word{position:absolute;left:0;right:0;top:0}
.kk-motion .kk-hint{position:absolute;left:0;top:0;opacity:0;padding:0;font-size:clamp(28px,min(4vw,5.4vh),62px);line-height:1.1;letter-spacing:-.02em;font-weight:500}
.kk-arrows{white-space:nowrap}
.kk-motion .kk-word-svg path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--kk-d,1))}
.kk-motion .kk-fall{display:block;position:absolute;left:0;top:0;width:100px;height:100px;z-index:5;pointer-events:none;transform-origin:0 0;will-change:transform}
.kk-motion .kk-screens{pointer-events:none;z-index:2}
/* at a zoom stop the doughnut is scenery: pointers and swipes go straight to the page */
.kk-motion .kk-roller{pointer-events:none;cursor:default;opacity:0}
.kk-motion .kk-roller::before{pointer-events:none}
.kk-motion .kk-roller.kk-live{pointer-events:auto;cursor:grab}
.kk-motion .kk-roller.kk-live:active{cursor:grabbing}
@media(max-height:520px) and (min-aspect-ratio:13/10){.kk .kk-hero{padding-top:66px;gap:10px}.kk-title-art{width:min(100%,calc((100svh - 196px)*var(--dr)))}.kk-intro p{font-size:18px}.kk-hero-foot{gap:6px 28px;font-size:13px}}
@media(max-height:520px) and (min-aspect-ratio:13/10) and (max-width:760px){.kk-hero-foot{grid-template-columns:auto 1fr auto;grid-template-areas:"p p a" "t t c" "l l l"}.kk-capline{justify-content:space-between}.kk-title-art{width:min(100%,calc((100svh - 214px)*var(--dr)))}}
/* landscape phones: less wall, smaller words, nothing under the caption */
.kk-short .kk-lede{font-size:clamp(18px,5.4vh,26px)}
.kk-short .kk-about{margin-bottom:4px;font-size:12px}
.kk-short .kk-beat-format p{font-size:14px;line-height:1.3;max-width:none}
.kk-short .kk-range-lead{font-size:13px;line-height:1.25}
.kk-short .kk-hint{font-size:clamp(18px,5.4vh,26px)}
.kk-short .kk-film.kk-film figcaption{font-size:12px;min-height:34px;--kk-bar:3px}
.kk-short .kk-film.kk-film figcaption a,.kk-short .kk-watch-btn{min-height:28px}
.kk-short .kk-range{margin-top:4px}
@media(max-aspect-ratio:1/1),(max-width:820px) and (max-aspect-ratio:13/10){
 .kk-motion .kk-range{margin-top:12px}
 .kk-film.kk-film figcaption{font-size:13px;gap:2px 14px}
 /* sized by height as well, or a near-square window has no room for them; phones and portrait tablets keep their width-based size */
 .kk-lede,.kk-motion .kk-hint{font-size:clamp(30px,9.6vw,64px);font-size:clamp(24px,min(9.6vw,6.6svh),64px);line-height:1.08}
 .kk-beat-format p,.kk-range-lead{font-size:clamp(18px,5.1vw,30px);font-size:clamp(18px,min(5.1vw,3.5svh),30px);line-height:1.3;max-width:none}
 .kk-about{font-size:clamp(14px,3.6vw,18px)}
}

/* "Watch film": lights down, nothing on top of her film */
.kk-theatre{position:fixed;inset:0;width:100vw;width:100dvw;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;color:#fff;overflow:hidden;overscroll-behavior:contain;background-color:#121315;background-image:linear-gradient(rgba(255,255,255,.035) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(255,255,255,.035) 1.5px,transparent 1.5px);background-size:calc(100vw*87.4/1920) calc(100vw*93/1920)}
.kk-theatre[open]{display:flex;flex-direction:column;animation:kk-lights .3s ease-out}
.kk-theatre::backdrop{background:#121315}
@keyframes kk-lights{from{opacity:0}to{opacity:1}}
.kk-theatre-bar{flex:none;display:flex;align-items:center;gap:8px 20px;flex-wrap:wrap;padding:12px clamp(16px,3vw,44px);font-size:15px;line-height:1.2}
.kk-theatre-bar>span{margin-right:auto;font-weight:500}
.kk-theatre-bar a{text-decoration:underline;text-underline-offset:3px;color:inherit}
.kk-theatre-close{min-height:40px;padding:0 18px;border:0;border-radius:99px;background:#fff;color:var(--kk-ink);font-weight:700;font-size:15px;cursor:pointer}
.kk-theatre-close:hover{background:var(--kk-cream)}
.kk-theatre-close:focus-visible,.kk-theatre-bar a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.kk-theatre-frame{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 clamp(0px,3vw,44px) clamp(0px,2vw,28px)}
.kk-theatre video{display:block;width:100%;max-width:calc((100vh - 96px)*16/9);max-width:calc((100dvh - 96px)*16/9);height:auto;aspect-ratio:16/9;background:#000;outline:0;animation:kk-film-in .36s cubic-bezier(.2,.8,.2,1)}
@keyframes kk-film-in{from{transform:scale(.965)}to{transform:none}}
@media(max-width:560px){.kk-theatre-bar>span{flex:1 1 100%}.kk-theatre-bar a{margin-right:auto}}

@media print{
 .kk-anim .kk-neon .kk-tubes path,.kk-motion .kk-word-svg path{stroke-dasharray:none!important;stroke-dashoffset:0!important;animation:none!important}
 .kk-motion .kk-stage{height:auto!important}
 .kk-motion .kk-pin{position:static!important;height:auto!important;overflow:visible!important;padding:24px}
 .kk-motion .kk .kk-film{position:static!important}
 .kk-motion .kk-cam{position:relative!important;width:100%!important;height:auto!important;aspect-ratio:16/9;transform:none!important}
 .kk-motion .kk-cam::before,.kk-motion .kk-cam::after,.kk-dim,.kk-roller,.kk-motion .kk-fall,.kk-js .kk-hint,.kk-tick,.kk-theatre{display:none!important}
 .kk-motion .kk-film figcaption{position:static!important}
 .kk-motion .kk .kk-story{position:static!important;transform:none!important}
 .kk-motion .kk-beat,.kk-motion .kk-range-lead,.kk-motion .kk-word{position:static!important;opacity:1!important;transform:none!important;padding-top:14px}
 .kk-motion .kk-word-svg{--kk-word-h:90px}
 .kk-motion .kk-range{display:block!important}
 .kk-o{visibility:visible!important}
 .kk-anim .kk-o .kk-spin{animation:none!important;transform:none!important;opacity:1!important}
 .kk-hero{min-height:0!important}
 .kk-title-art{width:100%!important}
}