/* WhatXlabs presentations: one screen per slide, on a 16:9 canvas that scales to fit any screen
   (--u is one hundredth of its width). The page snaps slide to slide; each slide slides over the
   one before while the old one sinks back, then its content builds in (see js/deck.js).
   The engine and the shared parts come from the studio's deck (whatxlabs-studio/css/deck.css). */

html.deck { scroll-snap-type: y mandatory; }
html.deck.still, html.deck.moving { scroll-snap-type: none; }
.deck-body { --u: min(1vw, 1.7778vh); background: var(--paper); }
.cap { margin: 0; color: var(--mute); font: 500 calc(var(--u) * .74)/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.cap.pink { color: var(--pink); }
.caption { margin: calc(var(--u) * .7) 0 0; color: var(--mute); font-size: calc(var(--u) * .95); line-height: 1.4; }
.sketch { --pen: 1.5; }

/* ---------- slides ---------- */
.slide {
  position: relative;
  z-index: 0;
  height: 100vh;
  overflow: clip;
  background: var(--paper);
  box-shadow: 0 -1px 0 rgba(20, 20, 20, .06), 0 calc(var(--u) * -2) calc(var(--u) * 5) rgba(20, 20, 20, .07);
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.frame { position: absolute; inset: 0; background: var(--paper); transform-origin: 50% 0; }
/* placed without a transform, so photos inside can blend with the slide's paper */
.stage {
  position: absolute;
  left: calc(50% - var(--u) * 50);
  top: calc(50% - var(--u) * 28.125);
  width: calc(var(--u) * 100);
  height: calc(var(--u) * 56.25);
  padding: calc(var(--u) * 7.6) calc(var(--u) * 5) calc(var(--u) * 4.6);
}

/* the slide on its way out sinks back and fades while the next one slides over it */
@supports (animation-timeline: view()) {
  .slide { view-timeline: --slide block; }
  .frame { animation: dk-leave linear both; animation-timeline: --slide; animation-range: exit 0% exit 100%; }
}
@keyframes dk-leave { to { transform: translateY(56%) scale(.93); opacity: .1; } }

/* ---------- build-in ---------- */
.fx { opacity: 0; transform: translateY(calc(var(--u) * 1.6)); transition: opacity .7s ease var(--d, 0s), transform 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.on .fx { opacity: 1; transform: none; }
.slide:not(.on) *, .slide:not(.on) *::before, .still *, .still *::before, .still *::after { transition-duration: 0s !important; transition-delay: 0s !important; }

/* one title style on every content slide, and one size for feature text */
.g-title { margin: 0; font: 600 calc(var(--u) * 4.6)/.95 var(--sans); letter-spacing: -.05em; }
.sb-text { max-width: 16em; margin: calc(var(--u) * 2.2) 0 0; font: 400 calc(var(--u) * 2.3)/1.3 var(--sans); letter-spacing: -.02em; text-wrap: pretty; }

.ph { position: relative; aspect-ratio: var(--ar, 1); overflow: hidden; background: #E6E6E1; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 1.8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.on .ph img { transform: none; }
.ph.blend { overflow: visible; background: none; mix-blend-mode: multiply; }
.ph.blend img { object-fit: contain; }
.ph.marked { overflow: visible; }
.ph.marked img { transform: none; }
/* the forearm leaves the photo at its left and bottom edges: let it fade out there */
.ph.fade-lb {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%), linear-gradient(0deg, transparent, #000 13%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 10%), linear-gradient(0deg, transparent, #000 13%);
  mask-composite: intersect;
}
/* a cut-out: it stands on the paper with a soft shadow under it */
.ph.cut { overflow: visible; background: none; }
.ph.cut img { object-fit: contain; filter: drop-shadow(0 calc(var(--u) * 1.1) calc(var(--u) * 1.4) rgba(60, 40, 40, .16)); }

.marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* hidden until its turn: an undrawn dashed stroke would still show its round end as a dot */
.pen { fill: none; stroke: var(--pink); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .3, 1) var(--d, 0s), opacity 0s linear var(--d, 0s); }
.on .pen { stroke-dashoffset: 0; opacity: 1; }
/* an arrow's head flicks out from the tip once its shaft has reached it */
.pen-head { opacity: 0; transition: stroke-dashoffset .32s cubic-bezier(.3, .5, .3, 1) calc(var(--d, 0s) + .9s), opacity 0s linear calc(var(--d, 0s) + .9s); }
.on .pen-head { opacity: 1; }
.mark-label { position: absolute; padding: .1em .55em; border-radius: .4em; background: rgba(255, 255, 255, .86); color: var(--ink); font-size: calc(var(--u) * 1.15); white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) rotate(-2deg); transition: opacity .5s ease var(--d, 0s); pointer-events: none; }
.on .mark-label { opacity: 1; }

/* a word with a pencil mark of its own (a loop round it, a line under it), sized in em */
.pw { position: relative; display: inline-block; vertical-align: top; white-space: nowrap; }
.pw-mark { position: absolute; left: -.5em; top: -.45em; width: calc(100% + 1em); height: calc(100% + .9em); overflow: visible; pointer-events: none; }
.pw-mark .pen { stroke-width: 8; }

/* ---------- chrome ---------- */
.dk-top {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  height: max(48px, calc(var(--u) * 4.6));
  padding: 0 max(16px, calc(50vw - var(--u) * 45));
  transition: opacity .5s;
  pointer-events: none;
}
.dk-top > * { pointer-events: auto; }
.dk-brand { justify-self: start; gap: .55em; font-size: max(13px, calc(var(--u) * .95)); }
.dk-brand .logo { width: max(40px, calc(var(--u) * 3.2)); }
.dk-ch { display: flex; gap: 2px; }
.dk-ch a { padding: .5em .95em; border-radius: 999px; color: var(--mute); font: 500 max(11px, calc(var(--u) * .78))/1 var(--sans); text-decoration: none; transition: background .35s, color .35s; }
.dk-ch a:hover { color: var(--ink); }
.dk-ch a.is-on { background: var(--ink); color: #fff; }
.dk-fs { justify-self: end; display: inline-flex; align-items: center; gap: .6em; padding: .45em .5em .45em .9em; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--mute); font: 500 max(11px, calc(var(--u) * .74))/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; }
.dk-fs:hover { border-color: var(--ink); color: var(--ink); }
.dk-fs kbd { padding: .25em .45em; border-radius: 4px; background: rgba(20, 20, 20, .07); font: 500 .95em/1 var(--mono); letter-spacing: 0; }
.full .dk-fs span { display: none; }
.dk-foot { position: fixed; z-index: 30; left: max(16px, calc(50vw - var(--u) * 45)); right: max(16px, calc(50vw - var(--u) * 45)); bottom: max(12px, calc(var(--u) * 1.5)); display: flex; justify-content: space-between; color: var(--mute); font: 500 max(10px, calc(var(--u) * .72))/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; pointer-events: none; transition: opacity .5s; }
.dk-count { font-variant-numeric: tabular-nums; }
.dk-count b { color: var(--ink); font-weight: 500; }
.dk-bar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: 3px; pointer-events: none; }
.dk-bar i { position: absolute; inset: 0; background: var(--pink); transform: scaleX(var(--k, 0)); transform-origin: left; }
.dk-hint { position: fixed; z-index: 30; left: 50%; bottom: max(12px, calc(var(--u) * 1.5)); margin: 0; color: var(--mute); font: 500 max(10px, calc(var(--u) * .72))/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transform: translateX(-50%); transition: opacity .6s; pointer-events: none; }
.dk-hint::after { content: ' ↓'; }
.moved .dk-hint { opacity: 0; }
.idle { cursor: none; }
.idle .dk-top { opacity: .25; }

/* ---------- shared parts ---------- */
.t-more { max-width: 34em; margin: calc(var(--u) * 2.4) 0 0; color: var(--mute); font-size: calc(var(--u) * 1.15); line-height: 1.55; }
/* the paper ground lets photos blend inside the size container (it is its own blend group) */
.t-fig { display: grid; place-items: center; height: calc(var(--u) * 40); background: var(--paper); container-type: size; }
/* a photograph: it fades up and settles, its edges just softened into the paper */
.t-shot { width: min(100cqw, calc(100cqh * var(--ar, 1))); }
.t-shot img {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(0deg, transparent, #000 2.5%, #000 97.5%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 2.5%, #000 97.5%, transparent), linear-gradient(0deg, transparent, #000 2.5%, #000 97.5%, transparent);
  mask-composite: intersect;
}

/* section heads */
.g-head { display: grid; grid-template-columns: 46fr 44fr; align-items: baseline; gap: calc(var(--u) * 4); margin-bottom: calc(var(--u) * 2.2); }
.g-desc { max-width: 46em; margin: 0; color: var(--mute); font-size: calc(var(--u) * 1.15); line-height: 1.5; }
.g-lines p { margin: 0; color: var(--mute); font-size: calc(var(--u) * 1.15); line-height: 1.5; }
.g-lines .g-line1 { margin-bottom: calc(var(--u) * .35); color: var(--ink); font: 500 calc(var(--u) * 1.75)/1.2 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.g-lines .g-line1 + .g-line1 { margin-top: calc(var(--u) * .9); }
.g-note { margin: calc(var(--u) * 1.4) 0 0; padding-top: calc(var(--u) * 1); border-top: 1px solid var(--line); font-size: calc(var(--u) * 1.45); letter-spacing: -.01em; }

/* input, interface, output */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); max-width: calc(var(--u) * 46); margin-top: calc(var(--u) * 3); border: 1px solid var(--line); border-radius: calc(var(--u) * .9); overflow: hidden; }
.flow-node { position: relative; display: grid; align-content: start; gap: calc(var(--u) * .5); padding: calc(var(--u) * 1) calc(var(--u) * 1.2) calc(var(--u) * 1.2); }
.flow-node + .flow-node { border-left: 1px solid var(--line); }
.flow-node .cap { font-size: calc(var(--u) * .66); }
.flow-node b { font: 500 calc(var(--u) * 1.08)/1.3 var(--sans); }
.flow-if { background: var(--pink-soft); }
.flow-if .cap { color: var(--pink); }

/* steps along one dotted line, each with a dot */
.ta-row { position: relative; display: grid; gap: 0 calc(var(--u) * 2.6); min-height: 0; margin-top: calc(var(--u) * 2.4); }
.ta-row::before { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--u) * .45); border-top: 2px dotted rgba(20, 20, 20, .26); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.6, 0, .2, 1) .4s; }
.on .ta-row::before { transform: none; }
.ta-col { position: relative; display: flex; flex-direction: column; min-height: 0; padding-top: calc(var(--u) * 1.9); }
.ta-col::before { content: ''; position: absolute; left: 0; top: 0; width: calc(var(--u) * .9); height: calc(var(--u) * .9); border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 calc(var(--u) * .35) var(--paper); transform: scale(0); transition: transform .5s cubic-bezier(.2, 1.6, .4, 1) var(--d, 0s); }
.ta-col:last-child::before { background: var(--pink); }
.on .ta-col::before { transform: none; }
.ta-step { display: flex; align-items: baseline; gap: calc(var(--u) * .7); margin: 0 0 calc(var(--u) * 1.2); font: 500 calc(var(--u) * 1.2)/1.2 var(--sans); letter-spacing: -.01em; }
.ta-step i { color: var(--pink); font: 500 calc(var(--u) * .74)/1 var(--sans); letter-spacing: .2em; font-style: normal; }

/* the sleeve's cross-section in pencil; the second one flexes under a pink arrow */
.ta-forms { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2.4); }
.ta-form { margin: 0; text-align: center; }
.ta-form .caption { margin-top: calc(var(--u) * .5); }
/* the sleeve at rest is a button: a click squeezes it, the next lets it go */
.ta-press { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ta-press .caption { display: block; }
.ta-press .xs-arrow { opacity: 0; transition: opacity .25s ease; }
.ta-press.is-pressed .xs-arrow { opacity: 1; }
.ta-press:hover .xs-out, .ta-press:focus-visible .xs-out { stroke: var(--pink); }
.ta-press:focus-visible { outline: 2px solid var(--pink); outline-offset: 8px; border-radius: 10px; }
.ta-hint { display: block; margin-top: calc(var(--u) * .3); color: var(--pink); font-size: calc(var(--u) * 1.02); line-height: 1.2; }
.xs { display: block; width: 100%; height: auto; overflow: visible; }
.xs-ln { fill: none; stroke: #222220; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.xs-inner { stroke: #3B3B38; stroke-width: 1.6; }
.xs-gd { fill: none; stroke: #8E8E89; stroke-width: 1; }
.xs-tone { fill: rgba(80, 80, 74, .14); opacity: 0; transition: opacity .8s ease var(--d, 0s); }
.on .xs-tone { opacity: 1; }
.pen-k, .pen-g { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 1s cubic-bezier(.6, 0, .3, 1) var(--d, 0s), opacity 0s linear var(--d, 0s); }
.on .pen-k, .on .pen-g { stroke-dashoffset: 0; opacity: 1; }

/* observed beside applied */
.k-compare .stage { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.cmp { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--u) * 9) minmax(0, 1fr); min-height: 0; }
.cmp-col { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.cmp-col > .cap { margin-bottom: calc(var(--u) * .8); color: var(--ink); }
.cmp-grid { display: grid; gap: calc(var(--u) * .7); min-height: 0; }
.cmp-grid.stack { grid-template-rows: 1fr 1fr; }
.cmp-grid.single { grid-template-rows: 1fr; }
.cmp-grid .cell { min-height: 0; }
.cmp-grid .ph { height: 100%; aspect-ratio: auto; }
.cmp-bridge { position: relative; display: grid; place-items: center; }
.cmp-bridge svg { width: 100%; overflow: visible; }
.cmp-bridge .pen { stroke-width: 3.4; }
.cmp-bridge .hand { position: absolute; left: 0; right: 0; top: calc(50% + var(--u) * 2.2); font-size: calc(var(--u) * 1.15); line-height: 1.15; text-align: center; }

/* ---------- SnapBite ---------- */
/* the name is set like Flower Bowl's (.t-name); its line arrives word by word under it, each word
   rising out of its own slot */
.sb-tag { margin: calc(var(--u) * 2.4) 0 0; font: 700 calc(var(--u) * 3.2)/1.04 var(--sans); letter-spacing: -.05em; }
.sb-tag .ln { display: block; }
.sb-tag .ln + .ln { margin-top: .1em; }
/* a circled word after another: room for the loop, so it does not run through the word before */
.sb-tag .pw:not(:first-child) { margin-left: .3em; }
.wd { display: inline-block; vertical-align: top; overflow: clip; padding-bottom: .06em; line-height: 1.04; }
.wd > span { display: inline-block; transform: translateY(108%); transition: transform 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.on .wd > span { transform: none; }
.sb-tag .pw-mark .pen { stroke-width: 6.5; }

.k-sbcover .stage { display: grid; grid-template-columns: 40fr 50fr; align-items: center; gap: calc(var(--u) * 4); padding-top: calc(var(--u) * 7); }

/* what we love about fast food: a board of circled words round the middle */
.mm-board { position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 7.6); width: calc(var(--u) * 90); height: calc(var(--u) * 44.05); }
.mm-title { position: absolute; left: 0; top: 0; width: calc(var(--u) * 44); }
.mm-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mm-ph { position: absolute; }
.mm-ph img { width: 100%; height: auto; }
.mm-center { position: absolute; margin: 0; translate: -50% 0; font: 600 calc(var(--u) * 2.6)/1 var(--sans); letter-spacing: -.03em; white-space: nowrap; }
.mm-node { position: absolute; margin: 0; translate: -50% -50%; font: 500 calc(var(--u) * 2.3)/1.15 var(--sans); letter-spacing: -.02em; }
.mm-word { display: inline-block; white-space: nowrap; }
.mm-node .pw-mark .pen { stroke-width: 10; }

/* squeeze me, dense flavors and the app: words on the left, the picture on the right */
.k-sbsqueeze .stage, .k-sbflavors .stage, .k-sbapp .stage { display: grid; align-items: center; gap: calc(var(--u) * 4); }
.k-sbsqueeze .stage { grid-template-columns: 36fr 54fr; }
.k-sbflavors .stage { grid-template-columns: 36fr 54fr; }
.k-sbapp .stage { grid-template-columns: 50fr 40fr; }
.sb-media { display: grid; place-items: center; min-width: 0; }
.sb-media > .ph { width: 100%; }
.sb-flex { max-width: calc(var(--u) * 30); margin-top: calc(var(--u) * 4); padding-top: calc(var(--u) * 1.4); border-top: 1px solid var(--line); }
.sb-flex .ta-forms { padding: calc(var(--u) * 1.6) calc(var(--u) * 1.4) 0; }
/* dense flavors: the ingredients in the air, heading into an open SnapBite. Each flies in from further
   out (--ax, --ay: the way out from the open end), then drifts slowly back toward it. */
.fly { position: relative; width: min(100%, calc(var(--u) * 45)); aspect-ratio: var(--ar); }
.fly-p, .fly-sb { position: absolute; translate: -50% -50%; }
.fly-p span, .fly-sb span { display: block; }
.fly-p img, .fly-sb img { display: block; width: 100%; height: auto; }
.fly-sb img { filter: drop-shadow(0 calc(var(--u) * 1.1) calc(var(--u) * 1.4) rgba(60, 40, 40, .16)); }
.fly-p img { filter: drop-shadow(calc(var(--u) * .4) calc(var(--u) * 1.1) calc(var(--u) * .9) rgba(50, 35, 30, .2)); }
.fly-sb span { opacity: 0; transform: translateY(calc(var(--u) * 2)); transition: opacity .8s ease var(--d), transform 1.2s cubic-bezier(.2, .8, .2, 1) var(--d); }
.fly-p span { opacity: 0; transform: translate(calc(var(--ax) * var(--u) * 9), calc(var(--ay) * var(--u) * 9)) scale(.9); transition: opacity .7s ease var(--d), transform 1.4s cubic-bezier(.2, .8, .2, 1) var(--d); }
.on .fly-sb span, .on .fly-p span { opacity: 1; transform: none; }
.on .fly-p img { animation: fly-drift var(--t) ease-in-out calc(var(--d) + 1.4s) infinite alternate; }
@keyframes fly-drift { to { transform: translate(calc(var(--ax) * var(--u) * -.5), calc(var(--ay) * var(--u) * -.5)) rotate(3deg); } }

/* easy open and close: the SnapBite in 3D (js/snap3d.js) twisting shut and opening again beside
   its steps, which light up as it goes (data-step on the slide, is-on on the step); the scrubber
   under it winds the round by hand, a mark on it where each step begins */
.k-sbtwist .stage { display: grid; grid-template-columns: 34fr 58fr; align-items: center; gap: calc(var(--u) * 3); }
.tw-steps { margin-top: calc(var(--u) * 3); padding-top: calc(var(--u) * 1.6); border-top: 1px solid var(--line); gap: calc(var(--u) * 1.1); }
.tw-steps li { cursor: pointer; }
.tw-steps li > span { display: grid; gap: .2em; }
.tw-steps b { font-weight: 500; }
.tw-steps small { color: var(--mute); font: 400 calc(var(--u) * 1.08)/1.4 var(--sans); letter-spacing: 0; }
.k-sbtwist[data-step] .tw-steps li { color: rgba(20, 20, 20, .34); }
.k-sbtwist[data-step] .tw-steps li small { color: inherit; }
.k-sbtwist[data-step] .tw-steps li.is-on { color: var(--ink); }
.k-sbtwist[data-step] .tw-steps li.is-on small { color: var(--mute); }
.k-sbtwist .tw-steps li.is-on::before { transform: none; }
.k-sbtwist .sb-media > .bowl-host { width: 100%; }
.tw-ui { gap: calc(var(--u) * 2.4); }
.tw-ui .bowl-hint { white-space: nowrap; }
.tw-scrub { position: relative; width: calc(var(--u) * 24); height: calc(var(--u) * 2.4); cursor: pointer; touch-action: none; outline: none; }
.tw-track, .tw-fill { position: absolute; left: 0; top: 50%; height: 2px; transform: translateY(-50%); }
.tw-track { right: 0; background: var(--line); }
.tw-fill { width: calc(var(--k, 0) * 100%); background: var(--pink); }
.tw-dot { position: absolute; top: 50%; width: calc(var(--u) * .6); height: calc(var(--u) * .6); border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--mute); transform: translate(-50%, -50%); }
.tw-knob { position: absolute; left: calc(var(--k, 0) * 100%); top: 50%; width: calc(var(--u) * 1.25); height: calc(var(--u) * 1.25); border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 calc(var(--u) * .22) var(--paper); transform: translate(-50%, -50%); transition: transform .2s; }
.tw-scrub:hover .tw-knob, .tw-scrub.held .tw-knob { transform: translate(-50%, -50%) scale(1.22); }
.tw-scrub:focus-visible .tw-knob { box-shadow: 0 0 0 calc(var(--u) * .22) var(--paper), 0 0 0 calc(var(--u) * .36) var(--ink); }

/* the app: a phone with the meal going in and the score coming out */
.sb-phone { position: relative; justify-self: center; width: calc(var(--u) * 20.5); }
.pm { position: relative; aspect-ratio: 100 / 205; padding: calc(var(--u) * .55); border-radius: calc(var(--u) * 3.2); background: #1A1A1A; box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(20, 20, 20, .16), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.pm-screen { position: relative; display: flex; flex-direction: column; gap: calc(var(--u) * .8); height: 100%; padding: calc(var(--u) * .9) calc(var(--u) * 1.1) calc(var(--u) * 1.2); border-radius: calc(var(--u) * 2.7); background: #fff; overflow: hidden; font-size: calc(var(--u) * .7); line-height: 1.25; }
.pm-island { position: absolute; left: 50%; top: calc(var(--u) * .55); width: calc(var(--u) * 5.2); height: calc(var(--u) * 1.45); border-radius: 999px; background: #1A1A1A; translate: -50% 0; }
.pm-status { display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--u) * .5); font-size: calc(var(--u) * .62); }
.pm-status span { display: flex; gap: calc(var(--u) * .3); align-items: center; }
.pm-sig { width: calc(var(--u) * .95); height: calc(var(--u) * .55); background: linear-gradient(90deg, #141414 20%, transparent 20% 40%, #141414 40% 60%, transparent 60% 80%, #141414 80%); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.pm-bat { width: calc(var(--u) * 1.15); height: calc(var(--u) * .55); border: 1px solid #141414; border-radius: 2px; background: linear-gradient(90deg, #141414 70%, transparent 70%) content-box; padding: 1px; }
.pm-head { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--u) * .4); }
.pm-head b { font: 700 calc(var(--u) * 1.15)/1 var(--sans); letter-spacing: -.05em; }
.pm-photo { height: calc(var(--u) * 7.4); border-radius: calc(var(--u) * 1); overflow: hidden; }
.pm-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.pm-head span { font-weight: 600; font-size: calc(var(--u) * .74); }
.pm-meal { display: grid; gap: calc(var(--u) * .65); }
.pm-row { display: grid; gap: calc(var(--u) * .3); }
.pm-step { color: var(--mute); font-size: calc(var(--u) * .5); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.pm-picks { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .3); }
.pm-chip { padding: .32em .75em; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-size: calc(var(--u) * .64); white-space: nowrap; }
.pm-card { display: flex; align-items: center; gap: calc(var(--u) * 1.1); margin-top: auto; padding: calc(var(--u) * .8); border-radius: calc(var(--u) * 1.1); background: var(--paper); }
.pm-ring { position: relative; flex: none; width: calc(var(--u) * 5.4); aspect-ratio: 1; }
.pm-ring svg { display: block; width: 100%; height: 100%; }
.pm-track, .pm-arc { fill: none; stroke-width: 9; }
.pm-track { stroke: rgba(20, 20, 20, .08); }
.pm-arc { stroke: var(--pink); stroke-linecap: round; stroke-dasharray: var(--v) 1; stroke-dashoffset: var(--v); transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.5s cubic-bezier(.45, 0, .2, 1) var(--d, 0s); }
.on .pm-arc { stroke-dashoffset: 0; }
.pm-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 calc(var(--u) * 2)/1 var(--sans); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pm-verdict { display: grid; gap: calc(var(--u) * .2); }
.pm-verdict span { color: var(--mute); font-size: calc(var(--u) * .5); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.pm-verdict b { font: 600 calc(var(--u) * 1.05)/1.1 var(--sans); letter-spacing: -.02em; }
.pm-bars { display: grid; gap: calc(var(--u) * .45); }
.pm-bar { display: grid; gap: calc(var(--u) * .2); font-size: calc(var(--u) * .56); }
.pm-bar i { display: block; height: calc(var(--u) * .42); border-radius: 999px; background: rgba(20, 20, 20, .07); overflow: hidden; }
.pm-bar b { display: block; height: 100%; border-radius: inherit; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.on .pm-bar b { transform: scaleX(var(--v)); }
.pm-marks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pm-note { left: -26%; top: 51%; }

/* the course: three topics along the dotted line, then the challenge */
.k-sbcourse .stage { display: grid; align-content: space-between; }
.cr-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-row { margin-top: 0; }
.cr-row .ta-step { font-size: calc(var(--u) * 1.75); letter-spacing: -.02em; }
.cr-row .ta-step i { font-size: calc(var(--u) * .8); }
.cr-text { max-width: 21em; margin: 0; color: var(--mute); font-size: calc(var(--u) * 1.3); line-height: 1.5; }
.cr-rainbow { display: flex; gap: calc(var(--u) * .55); margin: 0 0 calc(var(--u) * 1.2); }
.cr-rainbow i { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); border-radius: 50%; }
.cr-challenge { display: grid; gap: calc(var(--u) * 1); padding-top: calc(var(--u) * 1.4); border-top: 1px solid var(--line); }
.cr-nums { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(var(--u) * 1) calc(var(--u) * 3.4); }
.cr-num { margin: 0; display: flex; align-items: baseline; gap: calc(var(--u) * .6); }
.cr-num b { font: 700 calc(var(--u) * 4.4)/1 var(--sans); letter-spacing: -.05em; }
.cr-num span { color: var(--mute); font: 500 calc(var(--u) * 1.3)/1.2 var(--sans); }
.cr-goal { margin: 0; font: 500 calc(var(--u) * 1.75)/1.2 var(--sans); letter-spacing: -.02em; }

/* close */
.k-sbend .stage { display: grid; place-content: center; justify-items: center; text-align: center; padding-top: calc(var(--u) * 6); }
.sb-end-name { font-size: calc(var(--u) * 6.4); }
.c-title { margin: calc(var(--u) * 3.4) 0 0; font: 700 calc(var(--u) * 5.2)/1.02 var(--sans); letter-spacing: -.05em; }
.c-title span { display: block; }
.c-title em { color: var(--pink); font-style: normal; white-space: nowrap; }
.c-sub { margin: calc(var(--u) * 2) 0 0; color: var(--mute); font: 500 calc(var(--u) * .8)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- Flower Bowl ---------- */
/* the title: the studio's product title, the four colours from above beside it */
.k-fbhero .stage { display: grid; grid-template-columns: 40fr 50fr; align-items: center; gap: calc(var(--u) * 4); padding-top: calc(var(--u) * 7); }
.t-name { margin: 0; font: 700 min(calc(var(--u) * 7.4), calc(var(--u) * 72 / var(--len))) / .92 var(--sans); letter-spacing: -.055em; white-space: nowrap; }
.t-line { max-width: 17em; margin: calc(var(--u) * 1.6) 0 0; font: 500 calc(var(--u) * 2.05)/1.18 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
/* a render: it carries its own shadow, so it sits straight on the paper */
.ph.plain { overflow: visible; background: none; }
.ph.plain img { object-fit: contain; }
.t-fig > .bowl-host { width: min(100cqw, calc((100cqh - var(--u) * 3.4) * var(--ar, 1))); }
.fb-colors { display: flex; flex-wrap: wrap; gap: calc(var(--u) * .6) calc(var(--u) * 1.7); margin: calc(var(--u) * 2.6) 0 0; padding: 0; list-style: none; color: var(--mute); font: 500 calc(var(--u) * 1)/1 var(--sans); }
.fb-colors li { display: flex; align-items: center; gap: .6em; }
.fb-colors i { width: calc(var(--u) * 1.35); height: calc(var(--u) * 1.35); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .08); }

/* the live bowl (js/bowl3d.js): a 3D scene laid exactly over its picture, which it then replaces.
   Its canvas overhangs the picture so the bowl can turn without being cut off; the pencil marks
   stay on top, fade while it is turned and come back once it has settled on its picture. */
.bowl-host { display: grid; justify-items: center; width: 100%; }
.bowl-host > .ph { width: 100%; }
.ph[data-bowl] > img, .ph[data-snap] > img { transition: opacity .5s; }
.ph[data-bowl].is-live > img, .ph[data-snap].is-live > img { opacity: 0; }
.bowl-canvas { position: absolute; z-index: 0; display: block; opacity: 0; cursor: grab; transition: opacity .5s; }
.bowl-canvas:active { cursor: grabbing; }
.is-live > .bowl-canvas { opacity: 1; }
.ph[data-bowl] .marks, .ph[data-bowl] .mark-label { z-index: 1; }
.ph[data-bowl] .marks { transition: opacity .4s; }
.ph[data-bowl].turned .marks, .on .ph[data-bowl].turned .mark-label { opacity: 0; transition: opacity .25s; }
.on .ph[data-bowl].was-turned:not(.turned) .mark-label { transition-delay: .25s; }
/* above the canvas, which overhangs it */
.bowl-ui { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); min-height: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 1); opacity: 0; pointer-events: none; transition: opacity .6s .4s; }
.bowl-host.is-live .bowl-ui { opacity: 1; pointer-events: auto; }
.bowl-swatches { display: flex; gap: calc(var(--u) * .6); }
.bowl-swatches button { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(20, 20, 20, .1); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.bowl-swatches button:hover { transform: scale(1.14); }
.bowl-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 calc(var(--u) * .18) var(--paper), 0 0 0 calc(var(--u) * .3) var(--ink); }
.bowl-hint { color: var(--mute); font: 500 max(10px, calc(var(--u) * .7))/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: opacity .6s; }
.bowl-hint { display: inline-flex; align-items: center; gap: .7em; }
.bowl-hint::before { content: ''; width: 1.5em; height: 1.5em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DD4589' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.6-5.9'/%3E%3Cpath d='M20 4v4.6h-4.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.bowl-ui.used .bowl-hint { opacity: 0; }

/* problem over solution, the scoop playing beside them */
.k-fbproblem .stage, .k-fbfood .stage { display: grid; grid-template-columns: 38fr 52fr; align-items: center; gap: calc(var(--u) * 4); }
.ps-text { max-width: 26em; margin: calc(var(--u) * 1.6) 0 0; font: 400 calc(var(--u) * 1.55)/1.38 var(--sans); letter-spacing: -.01em; text-wrap: pretty; }
/* one scoop, step by step; while it plays, the step the spoon is on stands out (js/bowl3d.js sets
   data-step on the slide) */
.sc-steps { display: grid; gap: calc(var(--u) * .45); margin: calc(var(--u) * 1.7) 0 0; padding: 0; list-style: none; }
.sc-steps li { position: relative; display: flex; align-items: baseline; gap: calc(var(--u) * .75); font: 500 calc(var(--u) * 1.3)/1.3 var(--sans); letter-spacing: -.01em; transition: opacity .7s ease var(--d, 0s), transform 1s cubic-bezier(.2, .8, .2, 1) var(--d, 0s), color .4s; }
.sc-steps i { color: var(--pink); font: 500 calc(var(--u) * .74)/1 var(--sans); letter-spacing: .2em; font-style: normal; }
.sc-steps li::before { content: ''; position: absolute; left: calc(var(--u) * -1.25); top: .5em; width: calc(var(--u) * .5); height: calc(var(--u) * .5); border-radius: 50%; background: var(--pink); transform: scale(0); transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.k-fbproblem[data-step] .sc-steps li { color: rgba(20, 20, 20, .34); }
.k-fbproblem[data-step="1"] .sc-steps [data-k="1"], .k-fbproblem[data-step="2"] .sc-steps [data-k="2"],
.k-fbproblem[data-step="3"] .sc-steps [data-k="3"], .k-fbproblem[data-step="4"] .sc-steps [data-k="4"] { color: var(--ink); }
.k-fbproblem[data-step="1"] .sc-steps [data-k="1"]::before, .k-fbproblem[data-step="2"] .sc-steps [data-k="2"]::before,
.k-fbproblem[data-step="3"] .sc-steps [data-k="3"]::before, .k-fbproblem[data-step="4"] .sc-steps [data-k="4"]::before { transform: none; }

/* the scoop: a little narrower than its column, so the spoon's handle stays on the slide as the
   spoon comes in */
.k-fbproblem .sb-media > .bowl-host { width: 90%; }

/* food separation */
.k-fbfood .sb-media > .bowl-host { width: calc(var(--u) * 43); }
.fb-points { display: grid; gap: calc(var(--u) * 1.5); max-width: calc(var(--u) * 32); margin: calc(var(--u) * 3.4) 0 0; padding: calc(var(--u) * 1.5) 0 0; border-top: 1px solid var(--line); list-style: none; }
.fb-points li { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--u) * .35) calc(var(--u) * .9); }
.fb-points i { grid-row: span 2; color: var(--pink); font: 500 calc(var(--u) * .74)/2 var(--sans); letter-spacing: .2em; font-style: normal; }
.fb-points b { font: 500 calc(var(--u) * 1.5)/1.2 var(--sans); letter-spacing: -.01em; }
.fb-points span { color: var(--mute); font-size: calc(var(--u) * 1.2); line-height: 1.45; }

/* in use: a child and an adult, side by side */
.k-fbinuse .stage { display: grid; grid-template-columns: 36fr 54fr; align-items: center; gap: calc(var(--u) * 4); }
.fb-lede { max-width: 17em; font-size: calc(var(--u) * 1.95); }
.fb-photos { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
.fb-ph { margin: 0; }
.fb-ph .ph { width: 100%; }

/* next steps along the dotted line, the two versions drawn in pencil underneath */
.k-fbnext .stage { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.fb-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fb-row .ta-step { font-size: calc(var(--u) * 1.5); letter-spacing: -.02em; }
.fb-row .cr-text { font-size: calc(var(--u) * 1.15); }
.fb-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: calc(var(--u) * 4); min-height: 0; margin-top: calc(var(--u) * 2.2); padding-top: calc(var(--u) * 1.2); border-top: 1px solid var(--line); }
.fb-vars { display: flex; gap: calc(var(--u) * 3); height: 100%; min-height: 0; }
.fb-var { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-height: 0; margin: 0; }
.fb-var-box { display: grid; place-items: center; width: calc(var(--u) * 15); min-height: 0; container-type: size; }
.fb-var-box .sketch { width: min(100cqw, calc(100cqh * var(--ar, 1))); --pen: 1.3; }
.fb-end { display: grid; justify-items: end; gap: calc(var(--u) * 1.6); }
.fb-end .fb-colors { margin: 0; }
.fb-end .c-sub { margin: 0; }

/* ---------- phones and portrait screens: one long story instead of fixed slides ---------- */
@media (orientation: portrait), (max-width: 760px) {
  html.deck { scroll-snap-type: none; }
  .deck-body { --u: 2.2vw; }
  .slide { height: auto; min-height: 100svh; overflow: visible; box-shadow: none; border-top: 1px solid var(--line); }
  .frame { position: relative; inset: auto; animation: none !important; }
  .stage { position: relative; left: auto; top: auto; display: block !important; width: auto; height: auto; padding: 84px 20px 64px !important; }
  .stage > * + * { margin-top: 26px; }
  .dk-top { padding: 0 16px; grid-template-columns: auto 1fr auto; }
  .dk-ch { justify-content: center; }
  .dk-fs, .dk-hint { display: none; }
  .dk-foot { left: 16px; right: 16px; }
  .cap, .dk-foot { font-size: 10.5px; }
  .caption { font-size: 13px; }
  .g-title { font-size: 36px; }
  .sb-text { font-size: 21px; }
  .t-more, .g-desc, .g-lines p, .cr-text { font-size: 15.5px; }
  .g-lines .g-line1 { font-size: 22px; }
  .g-head { grid-template-columns: 1fr; gap: 10px; }
  .g-note { font-size: 19px; }
  .t-fig { height: 92vw; }
  .mark-label { font-size: 12.5px; }
  /* the renders keep a margin, so their handwritten notes stay on the screen */
  .k-fbproblem .sb-media > .bowl-host, .k-fbfood .sb-media > .bowl-host { width: 82% !important; }
  .k-fbproblem .sb-media > .bowl-host { width: 78% !important; }
  .bowl-ui { margin-top: 14px; }
  .bowl-swatches button { width: 22px; height: 22px; }
  .bowl-hint { font-size: 10.5px; }
  .flow { grid-template-columns: 1fr; max-width: none; }
  .flow-node + .flow-node { border-top: 1px solid var(--line); border-left: 0; }
  .flow-node b { font-size: 15px; }
  .ta-row { grid-template-columns: 1fr !important; gap: 30px; }
  .ta-row::before, .ta-col::before { display: none; }
  .ta-col { padding-top: 0; }
  .ta-step { font-size: 18px; }
  .ta-step i { font-size: 10.5px; }
  .cmp { grid-template-columns: 1fr; gap: 30px; }
  .cmp-bridge { display: none; }
  .cmp-grid.stack { height: 92vw; }
  .cmp-grid.single { height: 72vw; }

  .sb-tag { font-size: 8.4vw; padding-left: 2.4vw; }
  .mm-board { position: relative; left: auto; top: auto; width: auto; height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 30px 34px; }
  .mm-title { position: static; width: 100%; }
  .mm-lines { display: none; }
  .mm-ph { position: static; width: calc(50% - 6px) !important; }
  .mm-board .mm-ph + .mm-ph { margin-left: -22px; }
  .mm-center, .mm-node { position: static; translate: none; }
  .mm-center { width: 100%; margin-top: -14px; text-align: center; font-size: 24px; }
  .mm-node { font-size: 21px; margin: 10px 8px; }
  .sb-flex { max-width: none; }
  .sb-flex .ta-forms { max-width: 330px; }
  .ta-hint { font-size: 13.5px; }
  .tw-steps { margin-top: 26px; padding-top: 18px; gap: 14px; }
  .tw-steps small { font-size: 14px; }
  .tw-ui { gap: 22px; }
  .tw-scrub { width: min(66vw, 300px); height: 30px; }
  .tw-dot { width: 8px; height: 8px; }
  .tw-knob { width: 17px; height: 17px; box-shadow: 0 0 0 3px var(--paper); }
  .sb-phone { width: min(62vw, 300px); margin: 40px auto 0; }
  .pm-marks, .pm-note { display: none; }
  .cr-rainbow i { width: 16px; height: 16px; }
  .cr-num b { font-size: 44px; }
  .cr-num span { font-size: 15px; }
  .cr-goal { font-size: 20px; }
  .t-name { font-size: min(17vw, calc(150vw / var(--len, 9))); }
  .t-line { font-size: 22px; }
  .fb-colors { font-size: 14px; gap: 10px 18px; }
  .fb-colors i { width: 16px; height: 16px; }
  .ps-text { font-size: 18px; }
  .sc-steps li { font-size: 17px; }
  .sc-steps li::before { left: -14px; width: 7px; height: 7px; }
  .sc-steps i { font-size: 10.5px; }
  .k-fbfood .sb-media > .ph { width: 100%; }
  .fb-points b { font-size: 18px; }
  .fb-points span { font-size: 15px; }
  .fb-points i { font-size: 10.5px; }
  .fb-lede { font-size: 20px; }
  .fb-photos { gap: 12px; }
  .fb-foot { grid-template-columns: 1fr; gap: 24px; }
  .fb-vars { height: auto; }
  .fb-var-box { width: 40vw; height: 40vw; }
  .fb-end { justify-items: start; }
  .c-title { font-size: 8.4vw; }
}

@media (prefers-reduced-motion: reduce) {
  .frame { animation: none !important; }
  .fx, .pen, .mark-label, .ph img, .wd > span, .pm-arc, .pm-bar b { transition: none !important; }
  .fly-p span, .fly-sb span { transition: none !important; }
  .fly-p img { animation: none !important; }
}