/* Case-study kit (site/case-kit.tsx). site.css draws the blocks (.two-col .block, .impact__pill, .grid-3 .step, .stats,
   .plain-stack, .panel, .tradeoff, .notice); the other case studies then space and colour them in their own scope
   (tiktok-gate.css under #tiktok-full-content, site.css under .page-case-amazon / .page-case-element). This file brings
   the same values over under `.ck-case`, so a case study built from the kit reads like them. Served at
   /assets/zds/case-kit.css; a case page that uses the kit links it. */

/* The design system's loader (the same 3 × 3 scan Robot Lab shows while its scene loads), inlined by the build. */
/* Loader family.
   Loops live on the leaves and animate only opacity and the individual scale / translate / rotate
   properties (plus the orbit's stroke dash), so a pose can be frozen and released. They match only
   [data-state='pending'][data-visible]. Enter and exit live on .z-loader__visual. Solid fills only. */

.z-loader {
  --loader-size: 36px;
  --loader-beat: 1200ms;
  --loader-rest: .26;
  --loader-ink: var(--z-color-ink);
  --loader-gap: 12px;
  --loader-glyph-stroke: 2.8;
  --loader-orbit-stroke: 3;
  --loader-settle: 240ms;
  position: relative;
  display: inline-grid;
  grid-template-areas: 'slot' 'status';
  justify-items: center;
  align-content: center;
  gap: var(--loader-gap);
  min-width: 0;
  color: var(--loader-ink);
}

.z-loader[data-size='sm'] {
  --loader-size: 20px;
  --loader-gap: 8px;
  --loader-glyph-stroke: 4;
  --loader-orbit-stroke: 3.6;
}

.z-loader[data-size='lg'] {
  --loader-size: 52px;
  --loader-gap: 16px;
  --loader-glyph-stroke: 2.3;
  --loader-orbit-stroke: 2.6;
}

.z-loader[data-size='xl'] {
  --loader-size: 96px;
  --loader-gap: 24px;
  --loader-glyph-stroke: 1.7;
  --loader-orbit-stroke: 2;
}

.z-loader[data-tempo='slow'] { --loader-beat: 1800ms; }
.z-loader[data-tempo='fast'] { --loader-beat: 800ms; }
.z-loader[data-tone='blue'] { --loader-ink: var(--z-color-blue-action); }

.z-loader[data-layout='inline'] {
  grid-template-areas: 'slot status';
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 12px;
}

.z-loader[data-layout='bare'] { gap: 0; }

/* ---------- Lifecycle: nothing for 160ms, then the mark; the layout is reserved throughout ---------- */

.z-loader__visual {
  position: relative;
  display: grid;
  grid-area: slot;
  place-items: center;
  width: var(--loader-size);
  height: var(--loader-size);
  opacity: 0;
  scale: .92;
  transition:
    opacity var(--z-motion-exit) var(--z-ease-in),
    scale var(--z-motion-exit) var(--z-ease-in);
}

.z-loader:is([data-visible], [data-shown]):not([data-state='cancelled'], [data-state='idle']) .z-loader__visual {
  opacity: 1;
  scale: 1;
  transition:
    opacity var(--z-motion-feedback) var(--z-ease-out),
    scale var(--loader-settle) var(--z-ease-out);
}

.z-loader__status {
  grid-area: status;
  max-width: 100%;
  min-height: var(--z-type-caption-leading);
  color: var(--z-color-caption);
  font: 500 var(--z-type-caption) / var(--z-type-caption-leading) var(--z-font-interface);
  text-align: center;
  transition:
    opacity var(--z-motion-feedback) var(--z-ease-out) 60ms,
    color var(--z-motion-feedback) var(--z-ease-out);
}

.z-loader:is([data-size='lg'], [data-size='xl']) .z-loader__status {
  font-size: var(--z-type-small);
  line-height: var(--z-type-small-leading);
}

.z-loader[data-layout='inline'] .z-loader__status { text-align: left; }
.z-loader[data-state='pending']:not([data-visible]) .z-loader__status { opacity: 0; transition: none; }
.z-loader[data-state='success'] .z-loader__status { color: var(--z-color-ink-secondary); }
.z-loader[data-state='error'] .z-loader__status { color: var(--z-color-danger); }

/* Escalation changes the words, never the tempo; each step fades the new words in. */
.z-loader[data-state='pending'][data-visible][data-wait='1'] .z-loader__status { animation: z-loader-say var(--loader-settle) var(--z-ease-out); }
.z-loader[data-state='pending'][data-visible][data-wait='2'] .z-loader__status { animation: z-loader-say-again var(--loader-settle) var(--z-ease-out); }

.z-loader:is([data-layout='bare'], [data-variant='word']) .z-loader__status,
.z-loader__progress {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Paused: offscreen, hidden tab, reduced motion or a paused ancestor. The loop resumes where it stopped. */
.z-loader[data-active='false'] :is(.z-loader__mark, .z-loader__mark *) { animation-play-state: paused; }

/* ---------- Leaves ---------- */

.z-loader__mark {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.z-loader__mark i {
  position: absolute;
  display: block;
  background: currentColor;
  font-style: normal;
  opacity: var(--loader-rest);
  transition:
    opacity var(--z-motion-feedback) var(--z-ease-out),
    scale var(--loader-settle) var(--z-ease-out),
    translate var(--loader-settle) var(--z-ease-out),
    rotate var(--loader-settle) var(--z-ease-out);
}

.z-loader__mark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
}

/* Converge (Agent): four options drawn into one answer. Together they pick up speed toward the middle, meet as one
   dot that blooms (the answer), then let go along the next axes. The group turns an eighth only while they are one,
   so nothing is seen spinning and each round the options come from a new direction: across, then diagonal. Two
   rounds make the loop, a quarter turn in all, which looks the same as the start. */
.z-loader[data-variant='converge'] .z-loader__mark i {
  inset: 39%;
  border-radius: 50%;
  scale: .7;
  translate: calc(var(--dx) * 130%) calc(var(--dy) * 130%);
}

.z-loader[data-variant='converge'][data-state='pending'][data-visible] .z-loader__mark {
  animation: z-loader-converge-turn calc(var(--loader-beat) * 4) linear infinite;
}

.z-loader[data-variant='converge'][data-state='pending'][data-visible] .z-loader__mark i {
  animation: z-loader-converge calc(var(--loader-beat) * 2) linear infinite;
}

/* Scan (Agent): a light passes diagonally through a field of possibilities. */
.z-loader[data-variant='scan'] .z-loader__mark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--loader-size) / 9);
}

.z-loader[data-variant='scan'] .z-loader__mark i {
  position: static;
  border-radius: 22%;
  scale: .86;
}

.z-loader[data-variant='scan'][data-state='pending'][data-visible] .z-loader__mark i {
  animation: z-loader-glint calc(var(--loader-beat) * 2) ease-in-out infinite;
  animation-delay: calc(var(--d) * var(--loader-beat) / 6 - var(--loader-beat) * 2);
}

/* Helix (Agent): a travelling wave, for something long being put together. */
.z-loader[data-variant='helix'] .z-loader__visual { width: calc(var(--loader-size) * 1.5); }

.z-loader[data-variant='helix'] .z-loader__mark {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.z-loader[data-variant='helix'] .z-loader__mark i {
  position: static;
  width: 7%;
  height: 64%;
  border-radius: var(--z-radius-pill);
  scale: 1 .3;
}

.z-loader[data-variant='helix'][data-state='pending'][data-visible] .z-loader__mark i {
  animation: z-loader-helix calc(var(--loader-beat) * 1.5) ease-in-out infinite;
  animation-delay: calc(var(--i) * var(--loader-beat) / -8);
}

/* Ripple (Agent): signals going out to another party, from a steady source. */
.z-loader[data-variant='ripple'] .z-loader__mark i {
  inset: 0;
  border: calc(var(--loader-size) / 24 + .5px) solid currentColor;
  border-radius: 50%;
  background: none;
  opacity: 0;
  scale: .15;
}

.z-loader[data-variant='ripple'] .z-loader__mark i[data-part='core'] {
  inset: 39%;
  border: 0;
  background: currentColor;
  opacity: 1;
  scale: 1;
}

.z-loader[data-variant='ripple'][data-state='pending'][data-visible] .z-loader__mark i:not([data-part]) {
  animation: z-loader-ripple calc(var(--loader-beat) * 2) var(--z-ease-out) infinite;
  animation-delay: calc(var(--i) * var(--loader-beat) * -2 / 3);
}

.z-loader[data-variant='ripple'][data-state='pending'][data-visible] .z-loader__mark i[data-part='core'] {
  animation: z-loader-breathe-core calc(var(--loader-beat) * 2) ease-in-out infinite;
}

/* Word (Agent): the words are the loader. A per-glyph opacity glint, never a moving fill. */
.z-loader[data-variant='word'] { --loader-rest: .4; }

.z-loader[data-variant='word'] .z-loader__visual {
  width: auto;
  height: auto;
  min-height: 20px;
}

.z-loader[data-variant='word'] .z-loader__mark {
  width: auto;
  height: auto;
  font: 500 var(--z-type-small) / var(--z-type-small-leading) var(--z-font-interface);
}

.z-loader[data-variant='word'][data-size='sm'] .z-loader__mark { font-size: var(--z-type-caption); }

.z-loader[data-variant='word'][data-size='lg'] .z-loader__mark {
  font: 600 18px / 28px var(--z-font-body);
}

.z-loader[data-variant='word'][data-size='xl'] .z-loader__mark {
  font: 600 var(--z-type-variant) / var(--z-type-variant-leading) var(--z-font-body);
}

.z-loader__word {
  display: inline-block;
  white-space: pre;
}

.z-loader[data-variant='word'] .z-loader__mark i {
  position: static;
  display: inline;
  background: none;
}

.z-loader[data-variant='word'][data-state='pending'] .z-loader__word::after {
  content: '…';
  opacity: var(--loader-rest);
}

.z-loader[data-variant='word'][data-state='pending'][data-visible] .z-loader__mark i {
  animation: z-loader-glint-word var(--cycle) cubic-bezier(.4, 0, .6, 1) infinite;
  animation-delay: calc(var(--i) / var(--n) * var(--pass) - var(--cycle));
}

.z-loader[data-variant='word']:not([data-state='pending']) .z-loader__mark i { opacity: 1; }
.z-loader[data-variant='word'][data-state='success'] .z-loader__mark { color: var(--z-color-ink); }
.z-loader[data-variant='word'][data-state='error'] .z-loader__mark { color: var(--z-color-danger); }

/* Orbit (General): an arc chasing itself. Measured, it counts from 12 o'clock; done, the ring closes. */
.z-loader__track,
.z-loader__arc {
  stroke-width: var(--loader-orbit-stroke);
  transition:
    opacity var(--z-motion-feedback) var(--z-ease-out),
    stroke var(--z-motion-feedback) var(--z-ease-out);
}

.z-loader__track { stroke: color-mix(in srgb, currentColor 14%, transparent); }

.z-loader__spin {
  transform-box: view-box;
  transform-origin: 50% 50%;
  rotate: 0deg;
  transition: rotate var(--z-motion-replay) var(--z-ease-out);
}

.z-loader__arc {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  stroke-dashoffset: 0;
  transition:
    stroke-dasharray var(--loader-settle) var(--z-ease-out),
    stroke-dashoffset var(--loader-settle) var(--z-ease-out),
    opacity var(--z-motion-feedback) var(--z-ease-out);
}

.z-loader[data-variant='orbit'][data-state='pending'][data-visible]:not([data-measured]) .z-loader__spin {
  animation: z-loader-spin var(--loader-beat) linear infinite;
}

.z-loader[data-variant='orbit'][data-state='pending'][data-visible]:not([data-measured]) .z-loader__arc {
  animation: z-loader-arc calc(var(--loader-beat) * 1.5) cubic-bezier(.45, 0, .55, 1) infinite;
}

.z-loader[data-variant='orbit'][data-measured] .z-loader__arc { stroke-dasharray: calc(var(--loader-progress) * 100) 100; }
.z-loader[data-variant='orbit'][data-state='success'] .z-loader__arc { stroke-dasharray: 100 0; }

.z-loader[data-variant='orbit']:is([data-state='error'], [data-state='cancelled'], [data-state='idle']) .z-loader__arc {
  stroke-dasharray: 0 100;
  opacity: 0;
}

/* Dots (General): three beats, half of every cycle at rest. For waiting on someone else. */
.z-loader[data-variant='dots'] { --loader-rest: .3; }

.z-loader[data-variant='dots'] .z-loader__mark {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: calc(var(--loader-size) / 7);
}

.z-loader[data-variant='dots'] .z-loader__mark i {
  position: static;
  aspect-ratio: 1;
  border-radius: 50%;
}

.z-loader[data-variant='dots'][data-state='pending'][data-visible] .z-loader__mark i {
  animation: z-loader-dots var(--loader-beat) infinite;
  animation-delay: calc(var(--i) * var(--loader-beat) / 6 - var(--loader-beat));
}

/* Line (General): a region is loading. It travels, grows when measured, fills when done. */
.z-loader[data-variant='line'] .z-loader__visual {
  width: calc(var(--loader-size) * 3.4);
  max-width: 100%;
  height: auto;
  scale: 1;
}

.z-loader[data-variant='line'] .z-loader__mark {
  height: 3px;
  overflow: hidden;
  border-radius: var(--z-radius-pill);
  background: color-mix(in srgb, var(--z-color-ink) 10%, transparent);
  transition: background-color var(--z-motion-feedback) var(--z-ease-out);
}

.z-loader[data-variant='line'][data-size='sm'] .z-loader__mark { height: 2px; }
.z-loader[data-variant='line']:is([data-size='lg'], [data-size='xl']) .z-loader__mark { height: 4px; }
.z-loader[data-variant='line'][data-size='xl'] .z-loader__visual { width: calc(var(--loader-size) * 2.6); }

.z-loader[data-variant='line'] .z-loader__mark i {
  inset: 0;
  border-radius: var(--z-radius-pill);
  background: var(--z-color-blue-action);
  opacity: 0;
  scale: 0 1;
  transform-origin: left center;
}

.z-loader[data-variant='line'][data-state='pending'][data-visible]:not([data-measured]) .z-loader__mark i {
  animation: z-loader-travel var(--loader-beat) cubic-bezier(.45, 0, .55, 1) infinite;
}

.z-loader[data-variant='line'][data-measured] .z-loader__mark i {
  opacity: 1;
  scale: var(--loader-progress) 1;
}

.z-loader[data-variant='line'][data-state='success'] .z-loader__mark i {
  opacity: 1;
  translate: 0 0;
  scale: 1 1;
}

.z-loader[data-variant='line'][data-state='error'] .z-loader__mark { background: color-mix(in srgb, var(--z-color-danger) 24%, transparent); }
.z-loader[data-variant='line']:is([data-state='error'], [data-state='cancelled']) .z-loader__mark i { opacity: 0; }

/* Skeleton (General): the shape arrives before the data. It only breathes, so the layout never moves. */
.z-loader[data-variant='skeleton'] { --loader-rest: 1; }

.z-loader[data-variant='skeleton'] .z-loader__visual {
  width: calc(var(--loader-size) * 6);
  max-width: 100%;
  height: auto;
  scale: 1;
}

.z-loader[data-variant='skeleton'][data-size='lg'] .z-loader__visual { width: calc(var(--loader-size) * 5.4); }
.z-loader[data-variant='skeleton'][data-size='xl'] .z-loader__visual { width: calc(var(--loader-size) * 3.6); }
.z-loader[data-variant='skeleton'][data-size='sm'] .z-loader__visual { width: calc(var(--loader-size) * 8); }

.z-loader[data-variant='skeleton'] .z-loader__mark {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 20%;
  align-items: center;
  gap: 14px 12px;
}

.z-loader[data-variant='skeleton'] .z-loader__mark i {
  position: static;
  background: color-mix(in srgb, var(--z-color-ink) 9%, transparent);
}

.z-loader__mark [data-part='icon'] {
  width: 24px;
  height: 24px;
  border-radius: var(--z-radius-media);
}

.z-loader__mark [data-part='line'] {
  width: var(--w);
  height: 10px;
  border-radius: var(--z-radius-pill);
}

.z-loader__mark [data-part='value'] {
  justify-self: end;
  width: 100%;
  height: 10px;
  border-radius: var(--z-radius-pill);
}

.z-loader[data-variant='skeleton'][data-size='sm'] .z-loader__mark { gap: 10px 8px; }
.z-loader[data-variant='skeleton'][data-size='sm'] [data-part='icon'] { width: 16px; height: 16px; }
.z-loader[data-variant='skeleton'][data-size='sm'] :is([data-part='line'], [data-part='value']) { height: 8px; }
.z-loader[data-variant='skeleton'][data-size='xl'] .z-loader__mark { gap: 18px 14px; }
.z-loader[data-variant='skeleton'][data-size='xl'] [data-part='icon'] { width: 32px; height: 32px; }
.z-loader[data-variant='skeleton'][data-size='xl'] :is([data-part='line'], [data-part='value']) { height: 12px; }

.z-loader[data-variant='skeleton'][data-state='pending'][data-visible] .z-loader__mark i {
  animation: z-loader-breathe 1800ms ease-in-out infinite;
  animation-delay: calc((var(--col) * .18 + var(--row) * .12) * -1800ms);
}

/* ---------- Hand-off: the check or the cross takes the mark's place ---------- */

.z-loader__glyph {
  position: absolute;
  top: 20%;
  left: 50%;
  width: auto;
  height: 60%;
  aspect-ratio: 1;
  overflow: visible;
  fill: none;
  translate: -50% 0;
  pointer-events: none;
}

.z-loader[data-variant='orbit'] .z-loader__glyph {
  top: 26%;
  height: 48%;
}

.z-loader__glyph path {
  stroke: currentColor;
  stroke-width: var(--loader-glyph-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
}

.z-loader[data-glyph][data-state='success'] .z-loader__glyph { color: var(--z-color-success); }
.z-loader[data-glyph][data-state='error'] .z-loader__glyph { color: var(--z-color-danger); }

.z-loader[data-glyph][data-state='success'] .z-loader__check,
.z-loader[data-glyph][data-state='error'] .z-loader__cross {
  opacity: 1;
  stroke-dashoffset: 0;
  transition:
    stroke-dashoffset var(--z-motion-replay) var(--z-ease-out) 120ms,
    opacity 0s linear 120ms;
}

/* The leaves let go as the glyph draws: converge closes on one point, the others settle and fade. */
.z-loader[data-glyph]:is([data-state='success'], [data-state='error']) .z-loader__mark i {
  opacity: 0;
  scale: .5;
}

.z-loader[data-variant='converge'][data-state='success'] .z-loader__mark i { translate: 0 0; }
.z-loader[data-variant='converge'][data-state='error'] .z-loader__mark i { translate: calc(var(--dx) * 190%) calc(var(--dy) * 190%); }
.z-loader[data-variant='scan']:is([data-state='success'], [data-state='error']) .z-loader__mark i { transition-delay: calc(var(--d) * 28ms); }
.z-loader[data-variant='helix']:is([data-state='success'], [data-state='error']) .z-loader__mark i { scale: 1 .1; transition-delay: calc(var(--i) * 18ms); }
.z-loader[data-variant='dots']:is([data-state='success'], [data-state='error']) .z-loader__mark i { translate: 0 0; }
.z-loader[data-variant='ripple']:is([data-state='success'], [data-state='error']) .z-loader__mark i { scale: .3; }

/* The orbit's ring closes before its check draws, so the track stays as the frame. */
.z-loader[data-variant='orbit'][data-state='success'] .z-loader__arc { stroke: var(--z-color-success); }

/* ---------- Swap: the wait becomes the thing, in the same cell; height never animates ---------- */

.z-loader[data-handoff='swap'] { justify-items: stretch; }

.z-loader__content {
  grid-area: slot;
  min-width: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 4px;
}

.z-loader[data-handoff='swap'] .z-loader__visual { justify-self: center; }

.z-loader[data-handoff='swap'][data-state='success'] .z-loader__content {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition:
    opacity var(--loader-settle) var(--z-ease-out) 120ms,
    translate var(--loader-settle) var(--z-ease-out) 120ms,
    visibility 0s linear 120ms;
}

.z-loader[data-handoff='swap'][data-state='success'] .z-loader__visual {
  opacity: 0;
  transition: opacity var(--z-motion-feedback) var(--z-ease-out);
}

/* ---------- Still pose: reduced motion (set by the component) or a preview ---------- */

.z-loader[data-still],
.z-loader[data-still] * {
  animation: none !important;
  transition: none !important;
}

.z-loader[data-still][data-state='pending'] .z-loader__mark i { opacity: .5; }
.z-loader[data-still][data-variant='converge'][data-state='pending'] .z-loader__mark i { scale: .85; translate: calc(var(--dx) * 70%) calc(var(--dy) * 70%); }
.z-loader[data-still][data-variant='scan'][data-state='pending'] .z-loader__mark i { opacity: calc(.9 - var(--d) * .14); scale: 1; }
.z-loader[data-still][data-variant='helix'][data-state='pending'] .z-loader__mark i { scale: 1 calc(.35 + var(--i) * .08); }
.z-loader[data-still][data-variant='ripple'][data-state='pending'] .z-loader__mark i:not([data-part]) { opacity: calc(.6 - var(--i) * .18); scale: calc(.45 + var(--i) * .25); }
.z-loader[data-still][data-variant='ripple'][data-state='pending'] .z-loader__mark i[data-part='core'] { opacity: 1; }
.z-loader[data-still][data-variant='dots'][data-state='pending'] .z-loader__mark i { opacity: calc(.4 + var(--i) * .25); }
.z-loader[data-still][data-variant='word'] .z-loader__mark i,
.z-loader[data-still][data-variant='word'][data-state='pending'] .z-loader__word::after { opacity: 1; }
.z-loader[data-still][data-variant='orbit'][data-state='pending']:not([data-measured]) .z-loader__arc { stroke-dasharray: 75 25; }
.z-loader[data-still][data-variant='line'][data-state='pending']:not([data-measured]) .z-loader__mark i { opacity: 1; scale: .4 1; }
.z-loader[data-still][data-variant='skeleton'][data-state='pending'] .z-loader__mark i { opacity: .8; }
.z-loader[data-still] .z-loader__glyph path { stroke-dasharray: none; }

/* ---------- Keyframes ---------- */

/* One round per two beats: drawn in (ease-in, gathering speed), met, a bloom, then let go on expo-out. */
@keyframes z-loader-converge {
  0% {
    opacity: var(--loader-rest); scale: .7; translate: calc(var(--dx) * 130%) calc(var(--dy) * 130%);
    animation-timing-function: cubic-bezier(.55, 0, .8, .35);
  }
  40% { opacity: 1; scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  48% { scale: 1.28; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
  58% { opacity: 1; scale: 1; translate: 0 0; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  100% { opacity: var(--loader-rest); scale: .7; translate: calc(var(--dx) * 130%) calc(var(--dy) * 130%); }
}

/* Two rounds: an eighth while the dots are one (40-58% of each round), then held. */
@keyframes z-loader-converge-turn {
  0%, 20% { rotate: 0deg; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  29%, 70% { rotate: 45deg; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
  79%, 100% { rotate: 90deg; }
}

@keyframes z-loader-glint {
  0% { opacity: var(--loader-rest); scale: .86; }
  15% { opacity: 1; scale: 1; }
  40%, 100% { opacity: var(--loader-rest); scale: .86; }
}

@keyframes z-loader-helix {
  0%, 100% { opacity: .3; scale: 1 .3; translate: 0 -12%; }
  50% { opacity: 1; scale: 1 1; translate: 0 12%; }
}

@keyframes z-loader-ripple {
  0% { opacity: 0; scale: .15; }
  20% { opacity: .8; }
  100% { opacity: 0; scale: 1; }
}

@keyframes z-loader-breathe-core {
  0%, 100% { scale: .9; }
  15% { scale: 1.12; }
}

@keyframes z-loader-glint-word {
  0% { opacity: var(--loader-rest); }
  14% { opacity: 1; }
  28%, 100% { opacity: var(--loader-rest); }
}

@keyframes z-loader-spin {
  to { rotate: 360deg; }
}

@keyframes z-loader-arc {
  0% { stroke-dasharray: 22 78; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 64 36; stroke-dashoffset: -29; }
  100% { stroke-dasharray: 22 78; stroke-dashoffset: -100; }
}

@keyframes z-loader-dots {
  0% { opacity: var(--loader-rest); translate: 0 0; animation-timing-function: var(--z-ease-out); }
  20% { opacity: 1; translate: 0 calc(var(--loader-size) / -8); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  50%, 100% { opacity: var(--loader-rest); translate: 0 0; }
}

@keyframes z-loader-travel {
  0% { opacity: 0; scale: .4 1; translate: -40% 0; }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; scale: .4 1; translate: 100% 0; }
}

@keyframes z-loader-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes z-loader-say {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes z-loader-say-again {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Before hydration a reduced-motion reader gets no loop either. */
@media (prefers-reduced-motion: reduce) {
  .z-loader,
  .z-loader * {
    animation: none !important;
    transition: none !important;
  }
}

@media (prefers-contrast: more) {
  .z-loader { --loader-rest: .5; }
  .z-loader[data-variant='word'] { --loader-rest: 1; }
  .z-loader__track { stroke: color-mix(in srgb, currentColor 40%, transparent); }
}

@media (forced-colors: active) {
  .z-loader { color: CanvasText; }

  .z-loader__mark i,
  .z-loader[data-variant='line'] .z-loader__mark i {
    background: CanvasText;
    forced-color-adjust: none;
  }

  .z-loader[data-variant='word'] .z-loader__mark i { background: none; }

  .z-loader[data-variant='line'] .z-loader__mark,
  .z-loader[data-variant='skeleton'] .z-loader__mark i {
    background: GrayText;
    forced-color-adjust: none;
  }

  .z-loader__track { stroke: GrayText; }
  .z-loader__arc,
  .z-loader__glyph path { stroke: CanvasText; }
}

/* ---------- Sections: the grey page, with white bands between (TikTok's Research bands) ---------- */
.ck-case { padding-bottom: 0; }
.ck-case > section:last-child:not(.ck-band) { padding-bottom: 96px; }
.ck-case > section.ck-band {
  width: 100vw; width: 100cqw; max-width: none;
  margin-inline: calc(50% - 50vw); margin-inline: calc(50% - 50cqw);
  padding: clamp(96px, 8vw, 128px) max(var(--pad), calc((100cqw - var(--page)) / 2 + var(--pad))) 128px;
  background: var(--white);
}
.ck-case > section.ck-band + section { padding-top: 128px; }

/* ---------- Heads ---------- */
.ck-case .case-pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; justify-self: center; }
.ck-case > section:not(.ck-band) .case-pills .pill { box-shadow: none; }
.ck-case .case-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-case .case-head--left { row-gap: 20px; }
.ck-case .case-head--left .case-tags .pill--tag {
  padding: 6px 16px; background: var(--bg); box-shadow: none;
  font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink);
}
.ck-case :is(.case-title, .ck-title, .ck-sub, .block h3, .step h3) { text-wrap: balance; }

/* A section's title inside a chapter; a second one in the same section starts a new group. */
.ck-case .ck-title:not(:first-child) { margin-top: 64px; }

/* A part's title: 24/700 as TikTok's list titles; 64px from the part above, 16px to its own text. */
.ck-case .ck-sub { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink); }
.ck-case .ck-sub:not(:first-child) { margin-top: 32px; }
.ck-case :is(.case-head, .ck-title) + .ck-sub { margin-top: 0; }
.ck-case .ck-sub + :is(.plain-block, .ck-columns) { margin-top: -16px; }

/* ---------- Text ---------- */
.ck-case strong { color: var(--ink); }
.ck-case code {
  padding: 1px 6px; border-radius: 6px; background: rgb(26 26 26 / 6%);
  font: 500 .86em / inherit var(--z-font-code, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--ink);
}
/* Bullets as Amazon and Element set them: a "•" hung in a 24px indent. */
.ck-case ul { list-style: none; padding-left: 0; }
.ck-case ul > li { position: relative; padding-inline-start: 24px; }
.ck-case ul > li::before { content: "•"; position: absolute; left: 0; top: 0; color: inherit; }
.ck-case ol li::marker { color: var(--muted); }
/* A list belongs to the sentence that introduces it, and the sentence after it to the list. */
.ck-case .plain-block + .ck-list,
.ck-case .ck-list + .plain-block { margin-top: -16px; }

/* ---------- Cards: pairs (with an arrow) and rows, as TikTok's Problem / Impact cards ---------- */
.ck-case .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; justify-content: stretch; }
.ck-case .two-col:has(> .ck-arrow) { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
.ck-case :is(.two-col, .grid-3, .ck-card-stack) > .block { padding: 24px; border-radius: var(--r-card); background: var(--white); gap: 12px; }
.ck-card-stack { display: grid; gap: 24px; align-content: start; }
.ck-case .ck-band :is(.two-col, .grid-3, .ck-card-stack) > .block { background: var(--bg); }
.ck-case :is(.two-col, .grid-3, .ck-card-stack) > .block.block--blue { background: #ccddff; }
.ck-case .block > .impact__pill { margin-bottom: 4px; }
.ck-case :is(.two-col, .grid-3, .ck-card-stack) > .block h3 { margin-bottom: 4px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink-2); }
.ck-case .block :is(p, li) { color: var(--ink-2); }
.ck-case .block--blue :is(h3, p, li) { color: var(--ink); }
.ck-arrow { align-self: center; justify-self: center; font-size: 60px; line-height: 72px; font-weight: 600; color: var(--ink); }

/* ---------- Numbered steps: white cards as in the Process rows, four to a row when asked ---------- */
.ck-case .step { padding: 24px; border-radius: var(--r-card); background: var(--white); }
.ck-case .ck-band .step { background: var(--bg); }
.ck-case .step .num { font-size: 24px; }
.ck-case .grid-3.ck-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.ck-case .ck-grid-4 .step h3 { font-size: 20px; line-height: 28px; }

/* ---------- Headline numbers (Element's overview), optionally with a bar ---------- */
.ck-case .stat { text-align: center; align-content: start; }
.ck-case .ck-stats--1 { grid-template-columns: minmax(0, 1fr); }
.ck-case .ck-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-case .ck-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-case .ck-band .stats { background: var(--bg); }
.ck-case .stats > .kicker { grid-column: 1 / -1; text-align: center; }
.ck-case .stat.is-accent b { color: var(--blue-btn); }
.ck-bar { position: relative; display: block; height: 8px; margin-top: 12px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.ck-band .ck-bar { background: #e1e0e6; }
.ck-bar > i { position: absolute; inset-block: 0; border-radius: inherit; background: var(--ink); }
.stat.is-accent .ck-bar > i { background: var(--blue-btn); }

/* ---------- Numbered findings (Amazon's research insights), two to a row where there is room ---------- */
.ck-case .ck-findings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ck-case .ck-findings .plain-block { gap: 16px; align-content: start; padding: 24px; border-radius: var(--r-card); background: var(--white); }
.ck-case .ck-band .ck-findings .plain-block { background: var(--bg); }
.ck-case .ck-findings .num { width: 48px; height: 48px; font-size: 24px; line-height: 32px; font-weight: 700; }
.ck-case .ck-findings p { margin: 0; color: var(--ink-2); }
.ck-case .ck-findings p + p { margin-top: -6px; }

/* ---------- Outcome lists (TikTok's Potential Solution Impacts) ---------- */
.ck-case .ck-outcomes { gap: 16px; }
.ck-case .ck-outcomes .plain-block { gap: 0; }
.ck-case .ck-outcomes h3 { margin-bottom: 16px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink); }
.ck-case .ck-outcomes li { color: var(--ink); }

/* ---------- Rationale card (TikTok's Design Rationale & Strategy) and the evidence in it ---------- */
.ck-case .ck-rationale { padding: 24px; gap: 16px; border-radius: var(--r-card); background: var(--white); }
.ck-case .ck-band .ck-rationale { background: var(--bg); }
.ck-case .ck-rationale > h3 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink); }
.ck-case .ck-rationale :is(p, li) { color: var(--ink); }
.ck-evidence { display: grid; gap: 8px; padding-block: 8px; }
.ck-evidence .stats { padding: 0; border-radius: 0; background: none; gap: 24px; }
.ck-case .ck-evidence .stat { text-align: left; }
.ck-evidence .stat b { font-size: 36px; line-height: 44px; }
.ck-evidence .stat span { font-size: 16px; line-height: 24px; text-align: left; }

/* ---------- Trade-off, notice, note, the large sentence ---------- */
.ck-case > section:not(.ck-band) .tradeoff { background: var(--white); }
.ck-case > section:not(.ck-band) .tradeoff__card { background: var(--bg); }
.ck-case .tradeoff__card { gap: 12px; }
.ck-case .tradeoff__card p { color: var(--ink-2); }
.ck-case > section:not(.ck-band) .notice:not(.notice--dark) { background: var(--white); }

.ck-case .case-note { font-size: 18px; line-height: 26px; font-weight: 500; color: var(--ink-2); text-align: left; }
.ck-case :is(.stats, .figure, .two-col, .grid-3) + .case-note { margin-top: -16px; }

.ck-takeaway { display: grid; grid-template-columns: minmax(0, 800px); justify-content: center; padding-block: 32px; }
.ck-takeaway p { font-size: 36px; line-height: 44px; font-weight: 600; color: var(--ink); text-align: center; text-wrap: balance; }

/* ---------- "Scroll down to continue" (TikTok's case-continue) ---------- */
.ck-case .case-continue { display: grid; gap: 16px; margin-top: 64px; }
.ck-case .case-continue__rule { display: flex; align-items: center; gap: 24px; }
.ck-case .case-continue__rule::before,
.ck-case .case-continue__rule::after { content: ""; flex: 1 1 0; height: 1px; background: var(--line); }
.ck-case .case-continue .mouse-cue i { animation: mouse-wheel 1.6s ease-in-out infinite; }
.ck-case .case-continue p { font-size: 12px; line-height: 18px; font-weight: 500; color: var(--z-color-caption, #6b6b6b); text-align: center; }

/* ---------- Placeholders for images still to come, and the hero without its video ---------- */
.ck-placeholder {
  width: 100%; min-width: 0; min-height: 340px; padding: 32px;
  border: 1px dashed #c9c8ce; border-radius: var(--r-card); background: var(--white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-align: center; color: var(--z-color-caption, #6b6b6b);
}
.ck-band .ck-placeholder { background: var(--bg); }
.ck-placeholder > span { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; }
.ck-placeholder > p { max-width: 640px; font-size: 16px; line-height: 26px; color: inherit; }
.ck-placeholder--short { min-height: 220px; }
.ck-placeholders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }

.ck-hero-backdrop { position: absolute; inset: 0; z-index: 0; display: grid; place-items: start center; padding: 112px var(--z-gutter) 0; text-align: center; background: radial-gradient(120% 80% at 50% 100%, #26304f 0%, var(--z-color-ink) 60%); color: rgb(255 255 255 / 40%); font: 600 var(--z-type-eyebrow) / var(--z-type-eyebrow-leading) var(--z-font-interface); letter-spacing: var(--z-tracking-eyebrow); }
.ck-wordmark { color: #fff; font-size: clamp(30px, 5vw, 54px); line-height: 1.15; font-weight: 600; text-align: center; }
.case-hero__lede { max-width: 720px; margin-inline: auto; font-size: 18px; line-height: 28px; color: rgb(255 255 255 / 82%); text-align: center; text-wrap: balance; }

/* ---------- Hero film (site/prototype.tsx HeroFilm): the flow on two phones beside the title ----------
   Discovery on the left, the purchase on the right, each phone's inner edge 432px from the centre so the wordmark
   (808px at its largest) sits between them. A phone is as wide as fits three ways: 15vw, the room beside the wordmark
   (24px from the window's edge), and the band between the nav (96px) and the facts (their offset, plus about 160px of
   their own), its caption and gap taking 36px; it sits in the middle of that band. The phone in play is lit;
   client.tsx moves the beats. Narrower than 1200px or lower than 620px there is no room, so the backdrop is the
   gradient alone. */
.ck-film {
  --film-band: calc(100dvh - 96px - clamp(40px, 8.9dvh, 80px) - 160px);
  --film-w: min(15vw, 236px, calc((var(--film-band) - 36px) / 2.164), calc(50vw - 456px));
  overflow: hidden; background: radial-gradient(120% 80% at 50% 100%, #26304f 0%, var(--z-color-ink) 60%);
}
.ck-film__phone {
  position: absolute; top: calc(96px + var(--film-band) / 2); width: var(--film-w); display: grid; gap: 16px;
  translate: 0 -50%; opacity: .4; scale: .96;
  transition: opacity var(--z-motion-media) var(--z-ease-out), scale var(--z-motion-media) var(--z-ease-out);
}
.ck-film__phone:first-child { right: calc(50% + 432px); }
.ck-film__phone:last-child { left: calc(50% + 432px); }
.ck-film__phone[data-on] { opacity: 1; scale: 1; }
.ck-film__captions { position: relative; height: var(--z-type-eyebrow-leading); }
.ck-film__captions p {
  position: absolute; inset: 0; margin: 0; text-align: center; white-space: nowrap; opacity: 0;
  color: rgb(255 255 255 / 72%); font: 600 var(--z-type-eyebrow) / var(--z-type-eyebrow-leading) var(--z-font-interface); letter-spacing: var(--z-tracking-eyebrow);
  transition: opacity var(--z-motion-media) var(--z-ease-out);
}
.ck-film__screen {
  position: relative; aspect-ratio: 390 / 844; overflow: hidden; border-radius: calc(var(--film-w) * .12); background: #05070d;
  box-shadow: 0 0 0 calc(var(--film-w) * .03) #05070d, 0 0 0 calc(var(--film-w) * .03 + 1px) rgb(255 255 255 / 14%), 0 24px 64px rgb(0 0 0 / 45%);
}
.ck-film__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--z-motion-media) var(--z-ease-out); }
.ck-film__captions p[data-shown], .ck-film__screen img[data-shown] { opacity: 1; }
.ck-film__tap {
  position: absolute; left: 50%; top: 90%; width: 18%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; opacity: 0; pointer-events: none;
  background: rgb(255 255 255 / 50%); box-shadow: 0 0 0 2px rgb(255 255 255 / 85%), 0 4px 16px rgb(0 0 0 / 30%);
}
.ck-film__tap[data-tapping] { animation: ck-film-tap 700ms var(--z-ease-out) both; }
@keyframes ck-film-tap {
  0% { opacity: 0; scale: .5; }
  35% { opacity: 1; scale: 1; }
  60% { opacity: 1; scale: .84; }
  100% { opacity: 0; scale: 1.15; }
}
@media (max-width: 1199.98px), (max-height: 619.98px) { .ck-film__phone { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ck-film__phone { opacity: 1; scale: 1; }
  .ck-film__phone, .ck-film__captions p, .ck-film__screen img { transition: none; }
}

/* ---------- Prototype (site/prototype.tsx): the phone inline, the places to jump to, the floating copy ----------
   White on the grey page, grey on a white band (as the kit's cards). */
.ck-proto { display: grid; grid-template-columns: minmax(0, 456px) minmax(0, 1fr); gap: 48px; align-items: center; }
.ck-proto__stage { display: grid; place-items: center; padding: 32px 16px; border-radius: var(--r-block); background: var(--white); scroll-margin-top: 88px; }
.ck-proto__frame { display: block; width: 382px; max-width: 100%; aspect-ratio: 382 / 752; border: 0; background: transparent; }
.ck-proto__side { display: grid; gap: 24px; align-content: center; min-width: 0; }
.ck-case .ck-proto__lead { margin: 0; font-size: 18px; line-height: 28px; color: var(--ink-2); }
.ck-proto__stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ck-proto__stop {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%;
  padding: 16px 20px; border: 0; border-radius: var(--r-card); background: var(--white); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--z-motion-feedback) var(--z-ease-out), box-shadow var(--z-motion-feedback) var(--z-ease-out), scale var(--z-motion-feedback) var(--z-ease-out);
}
.ck-proto__stop:active { scale: var(--z-press-scale); transition-duration: var(--z-motion-feedback), var(--z-motion-feedback), var(--z-motion-press); }
.ck-proto__tag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 72px; padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--bg); font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap;
}
.ck-band :is(.ck-proto__stage, .ck-proto__stop) { background: var(--bg); }
.ck-band .ck-proto__tag, .ck-proto__stop[aria-current] .ck-proto__tag { background: var(--white); }
.ck-proto__stop[aria-current] { background: #ccddff; }
.ck-proto__tag--start { color: var(--blue-btn); }
.ck-proto__text { display: grid; gap: 2px; min-width: 0; }
.ck-proto__text strong { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--ink); }
.ck-proto__text > span { font-size: 14px; line-height: 20px; color: var(--muted); }
.ck-proto__stop > .ico:last-child { color: var(--muted); transition: translate var(--z-motion-feedback) var(--z-ease-out), color var(--z-motion-feedback) var(--z-ease-out); }
.ck-proto__stop[aria-current] > .ico:last-child { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .ck-proto__stop:hover:not([aria-current]) { background: #f0f0f0; }
  .ck-band .ck-proto__stop:hover:not([aria-current]) { background: #ececec; }
  .ck-proto__stop:hover > .ico:last-child { translate: 4px 0; color: var(--ink); }
}

/* A line under a design that opens the floating prototype at its screen. */
.ck-proto-link { margin: 0; }
.ck-proto-link button {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 14px; border: 0; border-radius: var(--r-pill);
  background: var(--white); box-shadow: inset 0 0 0 1px #e6e6e6; color: var(--blue-btn);
  font: inherit; font-size: 16px; line-height: 24px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--z-motion-feedback) var(--z-ease-out), scale var(--z-motion-feedback) var(--z-ease-out);
}
.ck-band .ck-proto-link button { background: var(--bg); box-shadow: none; }
.ck-proto-link button:active { scale: var(--z-press-scale); }
.ck-proto-link .ico:last-child { transition: translate var(--z-motion-feedback) var(--z-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .ck-proto-link button:hover { box-shadow: 0 8px 24px #4b6bf32b; }
  .ck-proto-link button:hover .ico:last-child { translate: 4px 0; }
}

/* The floating copy (moved into <body> by client.tsx) and the corner button that opens it. Both come in from 16px
   below and leave the same way; `[data-open]` is their shown state. */
.ck-proto-dock {
  position: fixed; z-index: 90; right: 24px; bottom: 24px; display: grid; grid-template-rows: auto minmax(0, 1fr);
  width: 380px; height: min(772px, calc(100dvh - 48px)); padding: 8px 8px 4px; border-radius: var(--r-block);
  background: var(--white); box-shadow: 0 0 0 1px rgb(14 18 32 / 6%), 0 24px 64px rgb(14 18 32 / 24%);
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--z-motion-exit) var(--z-ease-out), transform var(--z-motion-exit) var(--z-ease-out);
}
.ck-proto-dock[data-open] { opacity: 1; transform: none; transition-duration: var(--z-motion-enter); }
.ck-proto-dock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 4px 12px; }
.ck-proto-dock__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
.ck-proto-dock__close {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--bg); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--z-motion-feedback) var(--z-ease-out), scale var(--z-motion-feedback) var(--z-ease-out);
}
.ck-proto-dock__close:active { scale: var(--z-press-scale); }
@media (hover: hover) and (pointer: fine) { .ck-proto-dock__close:hover { background: #ececec; } }
.ck-proto-dock__frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.ck-proto-launch {
  position: fixed; z-index: 89; right: 24px; bottom: 24px; border: 0; font-family: inherit;
  box-shadow: 0 8px 24px #4b6bf32b; opacity: 0; transform: translateY(16px);
  transition:
    translate 250ms var(--z-ease-out), box-shadow var(--z-motion-feedback) var(--z-ease-out), scale var(--z-motion-feedback) var(--z-ease-out),
    background-color var(--z-motion-feedback) var(--z-ease-out), opacity var(--z-motion-exit) var(--z-ease-out), transform var(--z-motion-exit) var(--z-ease-out);
}
.ck-proto-launch[data-open] { opacity: 1; transform: none; transition-duration: 250ms, var(--z-motion-feedback), var(--z-motion-feedback), var(--z-motion-feedback), var(--z-motion-enter), var(--z-motion-enter); }
:is(.ck-proto-dock, .ck-proto-launch)[hidden] { display: none; }
.ck-proto-locked, .ck-proto-locked body { overflow: hidden; }
@media (max-width: 1080px) {
  .ck-proto { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ck-proto__side { max-width: 640px; }
}
@media (max-width: 809.98px) {
  .ck-proto__stage { padding: 16px 8px; }
  .ck-proto__frame { width: min(100%, 382px); }
  .ck-proto__stop { gap: 12px; padding: 14px 16px; }
  .ck-proto__tag { min-width: 0; padding: 4px 10px; font-size: 12px; line-height: 16px; }
  .ck-proto__text strong { font-size: 16px; line-height: 24px; }
  .ck-proto-dock { inset: 0; width: auto; height: auto; padding: max(8px, env(safe-area-inset-top)) 8px max(4px, env(safe-area-inset-bottom)); border-radius: 0; }
  .ck-proto-launch { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .ck-proto-dock, .ck-proto-launch { transform: none; }
}

/* ---------- Side by side (Columns / Column): equal columns, each a stack with the section's rhythm ---------- */
.ck-columns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
.ck-column { display: grid; gap: 32px; align-content: start; min-width: 0; }
.ck-column > * { min-width: 0; }

/* ---------- Blocks from the older case studies ---------- */
/* Panel: a card holding blocks; cards inside it take the other surface. */
.ck-case .ck-panel { display: grid; gap: 20px; padding: 36px; border-radius: var(--r-card); background: var(--white); }
.ck-case .ck-band .ck-panel { background: var(--bg); }
.ck-case .ck-panel.ck-panel--blue { background: #ccddff; }
.ck-case .ck-panel :is(.two-col, .grid-3, .ck-card-stack) > .block:not(.block--blue) { background: var(--bg); }
.ck-case .ck-band .ck-panel :is(.two-col, .grid-3, .ck-card-stack) > .block:not(.block--blue) { background: var(--white); }
.ck-panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ck-panel__head .num { width: 48px; height: 48px; font-size: 24px; line-height: 32px; }

/* Notice: TikTok's amber [CONFIDENTIAL], the coral [UNDER NDA] on dark. */
.ck-case .ck-notice strong { font-weight: 600; color: #bd9156; }
.ck-case .ck-notice.notice--dark strong { color: #ffaa93; }
.ck-case .ck-notice.notice--dark .btn { background: var(--blue-btn); }

/* How might we: one question between marks (TikTok, Amazon), or several numbered (Element). */
.ck-hmw { display: grid; grid-template-columns: minmax(0, 800px); justify-content: center; padding-block: 32px; }
.ck-hmw__mark { font-size: 60px; line-height: 72px; font-weight: 600; color: var(--ink); }
.ck-hmw__mark--end { text-align: right; }
.ck-hmw__text { font-size: 36px; line-height: 44px; font-weight: 600; color: var(--ink) !important; text-align: center; text-wrap: balance; }
.ck-case .ck-hmw-list { padding: 24px 24px 8px; gap: 36px; }
.ck-case .ck-hmw-list .hmw-items { display: grid; gap: 48px; }

/* Opportunity / Goal: a heading over a blue card each. */
.ck-case .ck-directions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.ck-case .ck-directions .col-group { grid-template-rows: auto 1fr; gap: 12px; }
.ck-case .ck-directions .col-group h2 { margin-bottom: 0; }
.ck-case .ck-directions .block { display: grid; gap: 16px; align-content: start; height: 100%; padding: 24px; border-radius: var(--r-card); background: #ccddff; }
.ck-direction { display: grid; gap: 4px; }
.ck-case .ck-direction h3 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink); }
.ck-case .ck-direction :is(p, li) { color: var(--ink); }

/* Overview: the image beside its text, in one white card. */
.ck-case .ck-overview { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-case .ck-band .ck-overview { background: var(--bg); }
.ck-case .ck-overview .figure img { width: 100%; height: auto; }
.ck-case .ck-overview .split__body { display: grid; gap: 12px; align-content: start; }
.ck-case .ck-overview .ck-placeholder { background: var(--bg); }

/* Options: a row that scrolls sideways, an option at a time (the next one shows at the edge). */
.ck-options { display: grid; gap: 12px; }
.ck-options__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 92%; gap: 24px;
  overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; padding-bottom: 12px;
  scrollbar-color: #8e8e8e #e6e6e6;
}
.ck-option { display: grid; grid-template-columns: 262px minmax(0, 1fr); gap: 36px; align-items: center; scroll-snap-align: start; }
.ck-option__media { margin: 0; justify-self: center; width: 100%; }
.ck-option__media img { display: block; width: auto; max-width: 262px; max-height: 540px; margin-inline: auto; }
.ck-option__media .ck-placeholder { min-height: 480px; padding: 16px; }
.ck-option__body { display: grid; gap: 12px; align-content: start; padding: 36px; border-radius: var(--r-card); background: var(--white); }
.ck-band .ck-option__body { background: var(--bg); }
.ck-case .ck-option__body h3 { margin-bottom: 12px; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink-2); }
.ck-case .ck-option__label { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--ink-2); }
.ck-case .ck-option__body ul + .ck-option__label { margin-top: 12px; }
.ck-options__hint { font-size: 14px; line-height: 20px; color: var(--z-color-caption, #66666e) !important; text-align: center; }

/* Recommendations panel. */
.ck-quotes__title { display: grid; gap: 12px; justify-items: start; }
.ck-case .ck-band .ck-quotes { background: var(--bg); }
.ck-case .ck-band .ck-quotes .quote { background: var(--white); }

/* ---------- Narrower screens: the breakpoints the case pages use ---------- */
@media (max-width: 1279.98px) {
  .ck-case .ck-directions,
  .ck-case .ck-overview { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ck-case .two-col,
  .ck-case .two-col:has(> .ck-arrow) { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ck-arrow { rotate: 90deg; line-height: 1; }
  .ck-case .grid-3.ck-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099.98px) {
  .ck-case .ck-findings { grid-template-columns: minmax(0, 1fr); }
  .ck-columns { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 900px) {
  .ck-case .case-head--left .case-tags .pill--tag { font-size: 18px; line-height: 26px; }
}
@media (max-width: 809.98px) {
  .ck-case > section.ck-band { padding: 64px var(--pad); }
  .ck-case > section.ck-band + section { padding-top: 64px; }
  .ck-case > section:last-child:not(.ck-band) { padding-bottom: 64px; }
  .ck-case .ck-title:not(:first-child) { margin-top: 32px; }
  .ck-case .ck-sub:not(:first-child) { margin-top: 16px; }
  .ck-case :is(.ck-stats--2, .ck-stats--3),
  .ck-placeholders { grid-template-columns: minmax(0, 1fr); }
  .ck-case .grid-3.ck-grid-4 { gap: 12px; }
  .ck-case .ck-grid-4 .step { padding: 16px; }
  .ck-case .ck-grid-4 .step h3 { font-size: 17px; line-height: 24px; }
  .ck-case .stats { padding: 32px 24px; gap: 24px; }
  .ck-evidence .stats { padding: 0; }
  .ck-takeaway { padding-block: 8px; }
  .ck-takeaway p { font-size: 24px; line-height: 32px; }
  .ck-placeholder { min-height: 240px; padding: 24px; }
  .ck-case .ck-panel { padding: 24px; }
  .ck-hmw__text { font-size: 24px; line-height: 32px; }
  .ck-hmw__mark { font-size: 40px; line-height: 48px; }
  .ck-option { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ck-option__body { padding: 24px; }
  .ck-options__track { grid-auto-columns: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .ck-case .case-continue .mouse-cue i { animation: none; }
}

/* ---------- Look: a block's text size and colour, chosen in the editor (site/edit.ts `look`) ----------
   Size scales the block's own type a step down or up (.875×, 1.125×, 1.25×) from the sizes the case pages give each role,
   phone sizes included; colour is one of the palette's. Pills, labels and the numbers in black circles keep theirs. */
.ck-case {
  --ck-p: 18px; --ck-p-lh: 28px; --ck-h3: 24px; --ck-h3-lh: 32px; --ck-h2: 36px; --ck-h2-lh: 44px;
  --ck-big: 36px; --ck-big-lh: 44px; --ck-h1: 48px; --ck-h1-lh: 56px; --ck-num: 48px; --ck-num-lh: 56px;
}
@media (max-width: 1279.98px) { .ck-case { --ck-h1: 40px; --ck-h1-lh: 48px; } }
@media (max-width: 809.98px) {
  .ck-case { --ck-p: 16px; --ck-p-lh: 26px; --ck-h2: 28px; --ck-h2-lh: 36px; --ck-big: 24px; --ck-big-lh: 32px; --ck-h1: 30px; --ck-h1-lh: 38px; --ck-num: 36px; --ck-num-lh: 44px; }
}
[data-ck-size="s"] { --ck-scale: .875; }
[data-ck-size="l"] { --ck-scale: 1.125; }
[data-ck-size="xl"] { --ck-scale: 1.25; }
.ck-case [data-ck-size] :is(p, li, figcaption, .stat span),
.ck-case :is(p, li)[data-ck-size] { font-size: calc(var(--ck-p) * var(--ck-scale)) !important; line-height: calc(var(--ck-p-lh) * var(--ck-scale)) !important; }
.ck-case [data-ck-size] h3,
.ck-case h3[data-ck-size] { font-size: calc(var(--ck-h3) * var(--ck-scale)) !important; line-height: calc(var(--ck-h3-lh) * var(--ck-scale)) !important; }
.ck-case [data-ck-size] h2,
.ck-case h2[data-ck-size] { font-size: calc(var(--ck-h2) * var(--ck-scale)) !important; line-height: calc(var(--ck-h2-lh) * var(--ck-scale)) !important; }
.ck-case .ck-takeaway[data-ck-size] p { font-size: calc(var(--ck-big) * var(--ck-scale)) !important; line-height: calc(var(--ck-big-lh) * var(--ck-scale)) !important; }
.ck-case [data-ck-size] .case-title { font-size: calc(var(--ck-h1) * var(--ck-scale)) !important; line-height: calc(var(--ck-h1-lh) * var(--ck-scale)) !important; }
.ck-case [data-ck-size] .stat b { font-size: calc(var(--ck-num) * var(--ck-scale)) !important; line-height: calc(var(--ck-num-lh) * var(--ck-scale)) !important; }

[data-ck-color="ink"] { --ck-color: var(--z-color-ink, #1a1a1a); }
[data-ck-color="secondary"] { --ck-color: var(--z-color-ink-secondary, #383838); }
[data-ck-color="caption"] { --ck-color: var(--z-color-caption, #66666e); }
[data-ck-color="blue"] { --ck-color: var(--z-color-blue-action, #4b6bf3); }
[data-ck-color="success"] { --ck-color: var(--z-color-success, #1b7a4f); }
[data-ck-color="danger"] { --ck-color: var(--z-color-danger, #c2362a); }
.ck-case [data-ck-color],
.ck-case [data-ck-color] :is(p, li, h2, h3, b, strong, figcaption, .case-title, .stat span):not(:is(.impact__pill, .tradeoff__pill) *) { color: var(--ck-color) !important; }

/* ---------- Blueprint cover (site/cover.tsx): every design in white line on a near-black field ----------
   One 12s cycle, all CSS: the lines draw in, spreading out from the reference cell (from .3s, --d: its distance in
   cells); a band of light sweeps left to right and leaves the lit designs lit, the rest dimmed (from 2.8s); the focus
   closes on one design (from 5.2s); the last frame holds, then the grid fades (from 10.9s). client.tsx starts the cycle
   again, or first plays the opening film (`.ck-cover__motion`, [data-stage="robot"]) and hands its last line over to
   the reference cell ([data-handoff], `.ck-cover__morph`). The resting styles are the last frame, so reduced motion
   (motion.css stops every animation) shows it at once. One accent: the focus, in the design system's blue. */
.ck-cover {
  --cols: 21; --rows: 4;
  --cover-bg: #050608; --cover-line: #ffffff; --cover-accent: var(--z-color-blue-action, #4b6bf3);
  overflow: hidden; isolation: isolate; background: var(--cover-bg);
}
.ck-cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(rgb(255 255 255 / 2.2%) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(255 255 255 / 2.2%) 1px, transparent 1px) 0 0 / 24px 24px;
}
.ck-cover__motion {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; pointer-events: none;
  background: var(--cover-bg); opacity: 0; transition: opacity 800ms var(--z-ease-out, ease-out);
}
.ck-cover[data-stage="robot"] .ck-cover__motion { opacity: 1; transition-duration: 600ms; }
.ck-cover__grid {
  position: absolute; z-index: 1; inset: 92px 40px 28px; display: grid; gap: 10px 4px;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  animation: ck-cover-cycle 12s linear both;
}
@keyframes ck-cover-cycle { 0%, 91% { opacity: 1; } 98%, 100% { opacity: 0; } }
/* While the film plays, the grid waits, hidden, at its start. */
.ck-cover[data-stage="robot"] :is(.ck-cover__grid, .ck-cover__sweep) { visibility: hidden; }
.ck-cover[data-stage="robot"] *, .ck-cover[data-stage="robot"] *::before, .ck-cover[data-stage="robot"] *::after { animation-play-state: paused !important; }
/* Each cell's place in the layout showing: declared on the cell, where its --c21/--r21/--d21 … are. */
.ck-cover__cell { --col: var(--c21); --row: var(--r21); --d: var(--d21); position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.ck-cover__cell svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ck-cover__cell path {
  --rest: .2;
  fill: #fff; fill-opacity: 0; stroke: var(--cover-line); stroke-width: 1.4; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 0; opacity: var(--rest);
  animation: ck-cover-draw 1.5s var(--z-ease-out, cubic-bezier(.16, 1, .3, 1)) both, ck-cover-dim .9s var(--z-ease-out, ease-out) both;
  animation-delay: calc(.3s + var(--d) * 42ms), calc(2.8s + var(--col) / var(--cols) * 2.3s);
  transition: opacity 200ms ease-out, fill-opacity 200ms ease-out;
}
.ck-cover__cell[data-lit] path {
  --rest: 1; fill-opacity: .05;
  animation-name: ck-cover-draw, ck-cover-light;
}
.ck-cover__cell p {
  display: grid; margin: 4px 0 0; text-align: center; color: #fff; opacity: .32;
  font: 500 10px / 13px var(--z-font-code, ui-monospace, Menlo, monospace); letter-spacing: .02em; white-space: nowrap;
  animation: ck-cover-label .6s ease-out both; animation-delay: calc(3s + var(--col) / var(--cols) * 2.3s);
}
.ck-cover__cell[data-lit] p { opacity: .82; }
.ck-cover__cell[data-reference] p span:first-child {
  justify-self: center; padding: 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 55%);
}
@keyframes ck-cover-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ck-cover-dim { from { opacity: 1; } to { opacity: var(--rest); } }
@keyframes ck-cover-light { 0% { opacity: 1; fill-opacity: 0; } 45% { opacity: 1; fill-opacity: .18; } 100% { opacity: 1; fill-opacity: .05; } }
@keyframes ck-cover-label { from { opacity: 0; } }

/* The band of light, once a cycle. */
.ck-cover__sweep {
  position: absolute; inset: 0 auto 0 0; z-index: 2; width: 30%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 4%) 38%, rgb(255 255 255 / 13%) 50%, rgb(255 255 255 / 4%) 62%, transparent);
  animation: ck-cover-sweep 2.6s cubic-bezier(.45, .05, .35, 1) 2.7s both;
}
@keyframes ck-cover-sweep { 0% { translate: -100% 0; opacity: 1; } 92% { opacity: 1; } 100% { translate: 340% 0; opacity: 0; } }

/* The focus: the design fills with the accent, corner brackets close in, cross-hairs run out, the numbers come up. */
.ck-cover__cell[data-focus] path { stroke: #fff; fill: var(--cover-accent); fill-opacity: .45; }
.ck-cover__cell[data-focus] path { animation-name: ck-cover-draw, ck-cover-focus-fill; }
@keyframes ck-cover-focus-fill { 0%, 70% { opacity: 1; fill-opacity: 0; } 100% { opacity: 1; fill-opacity: .45; } }
.ck-cover__cell[data-focus] path { animation-duration: 1.5s, 3.2s; }
.ck-cover__cell[data-focus]::before {
  content: ""; position: absolute; inset: -8px -6px; pointer-events: none;
  --b: 12px; --w: 1.5px; --c: #fff;
  background:
    linear-gradient(var(--c), var(--c)) top left / var(--b) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) top left / var(--w) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) top right / var(--b) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) top right / var(--w) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / var(--b) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom left / var(--w) var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / var(--b) var(--w) no-repeat, linear-gradient(var(--c), var(--c)) bottom right / var(--w) var(--b) no-repeat;
  animation: ck-cover-focus .8s var(--z-ease-out, ease-out) 5.2s both;
}
@keyframes ck-cover-focus { from { opacity: 0; scale: 1.35; } }
.ck-cover__cross { position: absolute; inset: 0 0 18px; pointer-events: none; }
.ck-cover__cross::before, .ck-cover__cross::after { content: ""; position: absolute; opacity: .35; animation: ck-cover-cross 1.2s var(--z-ease-out, ease-out) 5.3s both; }
.ck-cover__cross::before { left: -300vw; right: -300vw; top: 50%; height: 1px; background: repeating-linear-gradient(90deg, #fff 0 6px, transparent 6px 12px); }
.ck-cover__cross::after { top: -300vh; bottom: -300vh; left: 50%; width: 1px; background: repeating-linear-gradient(#fff 0 6px, transparent 6px 12px); }
@keyframes ck-cover-cross { from { opacity: 0; scale: 0; } }
.ck-cover__note {
  position: absolute; top: 18%; left: 50%; z-index: 2; translate: calc(-1 * var(--col) / max(var(--cols) - 1, 1) * 100%) -130%;
  padding: 5px 10px; border-radius: 999px; background: var(--cover-accent); color: #fff; white-space: nowrap;
  font: 600 11px / 14px var(--z-font-code, ui-monospace, Menlo, monospace);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%), 0 8px 24px rgb(0 0 0 / 50%);
  animation: ck-cover-note .6s var(--z-ease-out, ease-out) 5.9s both;
}
@keyframes ck-cover-note { from { opacity: 0; margin-top: 8px; } }

/* Until the film is ready: Robot Lab's loader in a dark glass panel in the middle of the screen, above the title card
   where they meet. */
.ck-cover__loading {
  position: absolute; z-index: 6; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; gap: 10px;
  padding: 22px 26px; border-radius: 20px; pointer-events: none; opacity: 0; visibility: hidden;
  background: rgb(18 20 26 / 78%); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%), 0 18px 48px rgb(0 0 0 / 40%);
  transition: opacity 320ms var(--z-ease-out, ease-out), visibility 0s linear 320ms;
}
.ck-cover__loading .z-loader { --loader-ink: #eef2ec; }
.ck-cover__loading .ck-loading__file { color: rgb(255 255 255 / 55%); }
.ck-cover__loading .ck-loading__bar { background: rgb(255 255 255 / 12%); }
.ck-cover__loading .ck-loading__bar i { background: #8fa6ff; }
.ck-cover__loading p { margin: 0; font: 500 13px / 20px var(--z-font-interface); color: rgb(255 255 255 / 72%); white-space: nowrap; }
/* client.tsx lifts the panel out of the cover onto the hero, so it sits above the title card too. */
.case-hero > .ck-cover__loading { z-index: 30; }
.case-hero:has(> .ck-cover[data-stage="robot"]:not([data-film-ready])) > .ck-cover__loading,
.ck-cover[data-stage="robot"]:not([data-film-ready]) .ck-cover__loading { opacity: 1; visibility: visible; transition-delay: 0s; }

/* The film's last line, carried into the reference cell (client.tsx); the cell's own line waits until it lands. */
.ck-cover__morph { position: absolute; z-index: 3; left: 0; top: 0; overflow: visible; pointer-events: none; transform-origin: 0 0; }
.ck-cover__morph path { fill: #fff; fill-opacity: 0; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ck-cover[data-handoff] .ck-cover__cell[data-reference] path { animation-duration: 0s, .9s; }
.ck-cover[data-morph] .ck-cover__cell[data-reference] path { visibility: hidden; }

.ck-cover[data-paused], .ck-cover[data-paused] *, .ck-cover[data-paused] *::before, .ck-cover[data-paused] *::after { animation-play-state: paused !important; }
@media (hover: hover) and (pointer: fine) {
  .ck-cover__cell:hover path { opacity: 1 !important; fill-opacity: .14 !important; }
  .ck-cover__cell:hover p { opacity: 1 !important; }
}
@media (max-width: 1279.98px) { .ck-cover { --cols: 14; --rows: 6; } .ck-cover__cell { --col: var(--c14); --row: var(--r14); --d: var(--d14); } }
@media (max-width: 809.98px) {
  .ck-cover { --cols: 9; --rows: 9; }
  .ck-cover__cell { --col: var(--c9); --row: var(--r9); --d: var(--d9); }
  .ck-cover__grid { inset: 76px 16px 16px; gap: 6px 2px; }
  .ck-cover__cell p { display: none; }
  /* Under the focus, clear of its brackets. */
  .ck-cover__note { top: auto; bottom: -14px; translate: calc(-1 * var(--col) / max(var(--cols) - 1, 1) * 100%) 100%; }
}

/* The hero over the cover: the title in a liquid-glass card at the lower left, the facts in a glass strip under it.
   Liquid glass: see-through, what lies behind softened, lifted and (in Chromium) bent by #ck-liquid-glass; a light rim
   brightest at the top-left (::before, a masked gradient border), a sheen across the top (::after), a soft shadow.
   Browsers without SVG backdrop filters keep the first backdrop-filter. The cover stays pointable around them. */
.ck-cover__filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.case-hero--blueprint { padding-inline: 40px; background: #050608; }
.case-hero--blueprint .case-hero__inner { pointer-events: none; }
.case-hero--blueprint :is(.case-hero__identity, .case-meta) {
  isolation: isolate; pointer-events: auto; border-radius: 28px;
  background:
    linear-gradient(150deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 2%) 38%, rgb(255 255 255 / 0%) 60%, rgb(255 255 255 / 6%)),
    rgb(8 10 14 / 18%);
  -webkit-backdrop-filter: blur(9px) saturate(1.7) brightness(1.18);
  backdrop-filter: blur(9px) saturate(1.7) brightness(1.18);
  backdrop-filter: url(#ck-liquid-glass) blur(9px) saturate(1.7) brightness(1.18);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 34%),
    inset 1px 0 0 rgb(255 255 255 / 12%),
    inset 0 -1px 0 rgb(255 255 255 / 8%),
    inset 0 0 28px rgb(255 255 255 / 5%),
    0 24px 64px rgb(0 0 0 / 45%);
}
.case-hero--blueprint :is(.case-hero__identity, .case-meta)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / 70%), rgb(255 255 255 / 10%) 28%, rgb(255 255 255 / 4%) 62%, rgb(255 255 255 / 38%));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.case-hero--blueprint .case-hero__identity::after {
  content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 55%; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 18% 0%, rgb(255 255 255 / 12%), transparent 60%);
}
.case-hero--blueprint :is(h1, .case-hero__lede, .ck-wordmark, .case-meta) { text-shadow: 0 1px 12px rgb(0 0 0 / 45%); }
/* The title card and the facts strip stack from the bottom in a grid at every width, so a longer title or a taller
   strip (English is longer) pushes the card up instead of under the strip. client.tsx tells the opening film where
   both sit (`<app>:avoid`), so the robot and its labels keep clear of them. */
.case-hero--blueprint .case-hero__inner {
  display: grid; grid-template-rows: minmax(0, 1fr) auto auto; align-content: end; gap: 16px;
  padding: 96px 0 clamp(24px, 4dvh, 40px);
}
.case-hero--blueprint .case-hero__identity {
  position: relative; inset: auto; transform: none; align-self: end;
  width: min(660px, 100%); padding: 30px 36px; gap: 12px; justify-items: start; text-align: left;
}
.case-hero--blueprint .ck-wordmark {
  display: inline-flex; align-items: center; gap: 10px; text-align: left; color: rgb(255 255 255 / 82%);
  font: 600 var(--z-type-eyebrow, 12px) / var(--z-type-eyebrow-leading, 18px) var(--z-font-interface); letter-spacing: var(--z-tracking-eyebrow, .08em); text-transform: uppercase;
}
.case-hero--blueprint .ck-wordmark::before { content: ""; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 4px; background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 100% no-repeat; }
.case-hero--blueprint h1 { font-size: clamp(30px, 2.9vw, 42px); line-height: 1.14; font-weight: 600; text-align: left; letter-spacing: -.01em; text-wrap: balance; }
.case-hero--blueprint .case-hero__lede { margin: 0; max-width: none; font-size: 16px; line-height: 26px; text-align: left; text-wrap: pretty; }
.case-hero--blueprint .case-meta {
  position: relative; inset: auto; width: auto; padding: 14px 4px;
  grid-template-columns: 1fr 1.6fr 1.1fr 1.6fr; gap: 0; font-size: 14px; line-height: 21px;
}
.case-hero--blueprint .case-meta > div { padding-inline: 20px; }
.case-hero--blueprint .case-meta > div + div { box-shadow: inset 1px 0 rgb(255 255 255 / 16%); }
.case-hero--blueprint .case-meta strong { font-weight: 600; color: rgb(255 255 255 / 70%); }
/* A short window: a tighter card, so the robot keeps the room above it. */
@media (min-width: 810px) and (max-height: 820px) {
  .case-hero--blueprint .case-hero__inner { padding-top: 84px; gap: 12px; }
  .case-hero--blueprint .case-hero__identity { padding: 22px 28px; gap: 8px; }
  .case-hero--blueprint h1 { font-size: clamp(28px, 2.5vw, 36px); }
  .case-hero--blueprint .case-hero__lede { font-size: 15px; line-height: 23px; }
  .case-hero--blueprint .case-meta { padding-block: 10px; font-size: 13px; line-height: 19px; }
}
@media (max-width: 1279.98px) {
  .case-hero--blueprint .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .case-hero--blueprint .case-meta > div:nth-child(3) { box-shadow: none; }
}
@media (max-width: 809.98px) {
  .case-hero--blueprint { padding-inline: 16px; }
  .case-hero--blueprint .case-hero__inner { gap: 10px; padding: 76px 0 16px; }
  .case-hero--blueprint .case-hero__identity { width: 100%; }
  .case-hero--blueprint .case-hero__identity { padding: 18px 18px; gap: 8px; }
  .case-hero--blueprint h1 { font-size: 23px; line-height: 29px; }
  .case-hero--blueprint .case-hero__lede { font-size: 14px; line-height: 21px; }
  /* On a phone the strip keeps the robot and the stage, side by side, so the robot keeps the room above the card. */
  .case-hero--blueprint .case-meta { padding: 12px 4px; font-size: 12.5px; line-height: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-hero--blueprint .case-meta > div { padding-inline: 14px; }
  .case-hero--blueprint .case-meta > div:is(:nth-child(1), :nth-child(2)) { display: none; }
  .case-hero--blueprint .case-meta > div:nth-child(3) { box-shadow: none; }
  .case-hero--blueprint .case-meta > div:nth-child(4) { box-shadow: inset 1px 0 rgb(255 255 255 / 16%); }
}

/* ---------- Part divider (PartHead): a hairline, a large light number, the part's name, title, lead, its chapters ----------
   On the page's own grey, no colour block: it reads as a chapter opening, not as a banner. */
.ck-part { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 56px; align-items: start; }
/* A part opens the section that starts it: the room under its heading matches the section's room above it. */
.ck-case .ck-part + * { margin-top: calc(clamp(96px, 8vw, 128px) - 32px); }
.ck-part__num {
  font: 400 clamp(80px, 9vw, 128px) / .8 var(--z-font-interface); letter-spacing: -.05em; color: var(--z-color-blue-action, #4b6bf3);
  font-variant-numeric: tabular-nums;
}
.ck-part__text { display: grid; gap: 12px; max-width: 820px; }
.ck-case .ck-part__kicker {
  margin: 0; color: var(--z-color-blue-action, #4b6bf3);
  font: 600 var(--z-type-eyebrow, 12px) / var(--z-type-eyebrow-leading, 18px) var(--z-font-interface); letter-spacing: var(--z-tracking-eyebrow, .08em); text-transform: uppercase;
}
.ck-case .ck-part h2 { font-size: 44px; line-height: 52px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.ck-case .ck-part__lead { margin: 4px 0 0; font-size: 19px; line-height: 30px; color: var(--ink-2); text-wrap: pretty; }
.ck-case .ck-part__index { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ck-case .ck-part__index li { padding: 0; }
.ck-case .ck-part__index li::before { content: none; }
.ck-part__index a {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; border-radius: 999px;
  background: var(--white); color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none;
  transition: background-color var(--z-motion-feedback, 160ms) var(--z-ease-out, ease-out), color var(--z-motion-feedback, 160ms) var(--z-ease-out, ease-out);
}
.ck-part__index a b { font: 600 12px / 20px var(--z-font-code, ui-monospace, Menlo, monospace); color: var(--z-color-blue-action, #4b6bf3); }
.ck-band .ck-part__index a { background: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .ck-part__index a:hover { background: var(--z-color-accent-soft, #edf1ff); color: var(--z-color-blue-ink, #3f5ad9); }
}
@media (max-width: 809.98px) {
  .ck-part { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ck-case .ck-part + * { margin-top: 32px; }
  .ck-case .ck-part h2 { font-size: 30px; line-height: 38px; }
  .ck-case .ck-part__lead { font-size: 17px; line-height: 27px; }
  .ck-part__index a { padding: 6px 12px 6px 10px; font-size: 14px; }
}

/* ---------- Result panel (ResultPanel): the final design beside its numbers ---------- */
.ck-result {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 48px; align-items: center;
  padding: 32px 40px 32px 24px; border-radius: var(--r-block, 32px); background: var(--white); box-shadow: 0 8px 24px rgb(26 26 26 / 5%);
}
.ck-band .ck-result { background: var(--bg); box-shadow: none; }
.ck-result__media { display: grid; gap: 8px; margin: 0; }
.ck-result__media img { display: block; width: 100%; height: auto; }
.ck-case .ck-result__media figcaption { text-align: center; font-size: 14px; line-height: 20px; color: var(--z-color-caption, #66666e); }
.ck-result__body { display: grid; gap: 10px; min-width: 0; }
.ck-case .ck-result__kicker {
  margin: 0; color: var(--z-color-blue-action, #4b6bf3);
  font: 600 13px / 18px var(--z-font-interface); letter-spacing: .04em;
}
.ck-case .ck-result h2 { font-size: 32px; line-height: 40px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.ck-case .ck-result__lead { margin: 0; font-size: 17px; line-height: 27px; color: var(--ink-2); }
.ck-result__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 18px 0 0; }
.ck-result__grid > div { display: grid; gap: 6px; align-content: start; padding: 18px 20px 18px 0; border-top: 1px solid var(--line, #e6e6e6); }
.ck-result__grid > div:nth-child(3n + 2), .ck-result__grid > div:nth-child(3n + 3) { padding-left: 20px; box-shadow: inset 1px 0 var(--line, #e6e6e6); }
.ck-case .ck-result dt { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--z-color-caption, #66666e); }
.ck-result dd { display: grid; gap: 6px; margin: 0; }
.ck-result dd b { font: 600 34px / 40px var(--z-font-interface); letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-result dd b small { margin-left: 4px; font-size: 16px; font-weight: 600; color: var(--ink-2); }
.ck-result .is-accent dd b { color: var(--z-color-blue-action, #4b6bf3); }
.ck-result dd span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; line-height: 18px; color: var(--z-color-caption, #66666e); }
.ck-result dd em {
  padding: 1px 8px; border-radius: 999px; background: var(--z-color-accent-soft, #edf1ff); color: var(--z-color-blue-ink, #3f5ad9);
  font: 600 12px / 18px var(--z-font-interface); font-style: normal; font-variant-numeric: tabular-nums;
}
@media (max-width: 1099.98px) {
  .ck-result { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .ck-result__media { max-width: 420px; justify-self: center; }
}
@media (max-width: 809.98px) {
  .ck-result { padding: 20px 18px; gap: 8px; }
  .ck-case .ck-result h2 { font-size: 24px; line-height: 32px; }
  .ck-case .ck-result__lead { font-size: 15px; line-height: 23px; }
  .ck-result__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-result__grid > div { padding: 14px 12px 14px 0; }
  .ck-result__grid > div:nth-child(3n + 2), .ck-result__grid > div:nth-child(3n + 3) { padding-left: 0; box-shadow: none; }
  .ck-result__grid > div:nth-child(2n) { padding-left: 12px; box-shadow: inset 1px 0 var(--line, #e6e6e6); }
  .ck-result dd b { font-size: 26px; line-height: 32px; }
}

/* ---------- Annotated figure (AnnotatedFigure): a picture with its parts named ---------- */
.ck-anno { display: grid; gap: 16px; margin: 0; }
.ck-anno__stage { position: relative; width: 100%; overflow: hidden; }
.ck-anno__canvas { position: relative; width: 100%; }
.ck-anno__canvas > img { display: block; width: 100%; height: 100%; }
.ck-anno__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ck-anno__lines line { stroke: #1a1a1a; stroke-opacity: .5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ck-anno__dot {
  position: absolute; width: 12px; height: 12px; translate: -50% -50%; border-radius: 50%;
  background: var(--white); box-shadow: inset 0 0 0 2px #1a1a1a, 0 0 0 3px rgb(255 255 255 / 70%);
}
.ck-anno__dot b { display: none; }
.ck-anno__dot.is-accent { width: 14px; height: 14px; background: var(--z-color-blue-action, #4b6bf3); box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgb(75 107 243 / 28%); }
.ck-case .ck-anno__label {
  position: absolute; display: grid; gap: 2px; margin: 0; width: max-content; max-width: 220px; translate: 0 -50%;
  padding-left: 10px; border-left: 1px solid rgb(26 26 26 / 50%);
}
.ck-case .ck-anno__label[data-side="left"] { translate: -100% -50%; padding: 0 10px 0 0; border-left: 0; border-right: 1px solid rgb(26 26 26 / 50%); text-align: right; }
.ck-case .ck-anno__label strong { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--ink); }
.ck-case .ck-anno__label span { font-size: 13px; line-height: 18px; color: var(--z-color-caption, #66666e); }
.ck-case .ck-anno__label.is-accent strong { color: var(--z-color-blue-action, #4b6bf3); font-size: 17px; line-height: 24px; }
.ck-case .ck-anno__label.is-accent { border-color: var(--z-color-blue-action, #4b6bf3); }
.ck-anno__key { display: none; }
.ck-case .ck-anno figcaption { text-align: center; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink-2); }
@media (max-width: 809.98px) {
  .ck-anno__lines, .ck-case .ck-anno__label { display: none; }
  /* The picture without the labels' margins: the canvas widened so the crop fills the width. */
  .ck-anno__stage[style*="--crop-w"] .ck-anno__canvas { width: calc(100% * 100 / var(--crop-w)); margin-left: calc(-100% * var(--crop-l) / var(--crop-w)); }
  .ck-anno__dot { width: 20px; height: 20px; display: grid; place-items: center; background: #1a1a1a; box-shadow: 0 0 0 2px var(--white); }
  .ck-anno__dot.is-accent { background: var(--z-color-blue-action, #4b6bf3); box-shadow: 0 0 0 2px var(--white); }
  .ck-anno__dot b { display: block; font: 600 11px / 1 var(--z-font-interface); color: #fff; }
  .ck-case .ck-anno__key { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .ck-case .ck-anno__key li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 0; }
  .ck-case .ck-anno__key li::before { content: none; }
  .ck-anno__key b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1a1a1a; color: #fff; font: 600 11px / 1 var(--z-font-interface); }
  .ck-anno__key li.is-accent b { background: var(--z-color-blue-action, #4b6bf3); }
  .ck-case .ck-anno__key p { display: grid; gap: 2px; margin: 0; }
  .ck-case .ck-anno__key strong { font-size: 15px; line-height: 21px; color: var(--ink); }
  .ck-case .ck-anno__key span { font-size: 13px; line-height: 18px; color: var(--z-color-caption, #66666e); }
}

/* ---------- Floating guide (FloatingGuide): the part's live tool, one tap away ---------- */
.ck-guide { position: fixed; z-index: 88; right: 24px; bottom: 24px; }
.ck-guide[hidden], .ck-guide__item[hidden] { display: none; }
.ck-guide__item {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 16px; border: 0; border-radius: 999px;
  background: rgb(26 26 26 / 88%); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  color: #fff; font: 600 15px / 22px var(--z-font-interface); cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), 0 12px 32px rgb(14 18 32 / 28%);
  animation: ck-guide-in 320ms var(--z-ease-out, cubic-bezier(.16, 1, .3, 1)) both;
  transition: background-color 160ms ease-out, scale 160ms ease-out;
}
.ck-guide__item > i { width: 8px; height: 8px; border-radius: 50%; background: #6488ff; box-shadow: 0 0 0 4px rgb(100 136 255 / 25%); animation: ck-guide-pulse 1.8s ease-in-out infinite; }
.ck-guide__arrow { color: rgb(255 255 255 / 70%); transition: translate 160ms ease-out; }
.ck-guide__item[data-dir="up"] .ck-guide__arrow { rotate: 180deg; }
.ck-guide__item:active { scale: .97; }
@media (hover: hover) and (pointer: fine) {
  .ck-guide__item:hover { background: var(--z-color-blue-action, #4b6bf3); }
  .ck-guide__item:hover .ck-guide__arrow { translate: 0 2px; color: #fff; }
}
@keyframes ck-guide-in { from { opacity: 0; translate: 0 16px; } }
@keyframes ck-guide-pulse { 50% { box-shadow: 0 0 0 7px rgb(100 136 255 / 0%); } }
@media (max-width: 809.98px) {
  .ck-guide { left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; justify-content: center; }
  .ck-guide__item { font-size: 14px; padding: 11px 16px 11px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ck-guide__item, .ck-guide__item > i { animation: none; } }

/* The training loss chart: one series, narrower than the page. */
.ck-loss svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ---------- Figures in a frame: line drawings on the blue-ink, renders on the page's grey ---------- */
.ck-case .figure picture { display: block; }
.ck-case .figure:is(.ck-figure--blueprint, .ck-figure--studio) img { display: block; width: 100%; height: auto; border-radius: var(--r-card, 24px); }
.ck-case .figure.ck-figure--blueprint img { background: var(--z-color-blue-ink, #3f5ad9); }
.ck-case .figure.ck-figure--studio img { background: var(--z-color-canvas, #f5f4f6); }
.ck-case .ck-band .figure.ck-figure--studio img { box-shadow: inset 0 0 0 1px var(--line, #e6e6e6); }

/* The key to a drawing's numbered callouts. */
.ck-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 24px; }
.ck-legend li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 0; }
.ck-case .ck-legend li::before { content: none; }
.ck-legend li > span {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--z-color-blue-ink, #3f5ad9); color: #fff; font: 600 13px / 1 var(--z-font-interface);
}
.ck-case .ck-legend p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-2); }

/* ---------- Blueprint sheet (BlueprintSheet): one comparison on the blue-ink, columns headed and measured ---------- */
.ck-sheet {
  display: grid; gap: 0; margin: 0; padding: 28px 28px 24px; border-radius: var(--r-card, 24px); color: #fff;
  background:
    linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--z-color-blue-ink, #3f5ad9);
}
.ck-sheet__groups, .ck-sheet__heads, .ck-sheet__cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.ck-sheet__groups { gap: 0 16px; margin-bottom: 10px; }
.ck-case .ck-sheet__groups p {
  margin: 0; padding-bottom: 8px; border-bottom: 1px solid rgb(255 255 255 / 40%); text-align: center; color: #fff;
  font: 600 14px / 20px var(--z-font-code, ui-monospace, Menlo, monospace);
}
.ck-case .ck-sheet__caption { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 22%); color: rgb(255 255 255 / 80%); font-size: 14px; line-height: 21px; }
.ck-case .ck-sheet__heads p { margin: 0; text-align: center; color: #fff; font: 600 var(--z-type-eyebrow, 12px) / 18px var(--z-font-interface); letter-spacing: var(--z-tracking-eyebrow, .08em); text-transform: uppercase; }
.ck-sheet > img { display: block; width: 100%; height: auto; }
.ck-sheet dl { margin: 0; }
.ck-sheet__cols dl { display: grid; gap: 4px; justify-self: center; min-width: min(180px, 100%); }
.ck-sheet :is(.ck-sheet__cols, .ck-sheet__conditions) div { display: flex; justify-content: space-between; gap: 16px; }
.ck-case .ck-sheet dt { color: rgb(255 255 255 / 72%); font-size: 14px; line-height: 20px; font-weight: 500; }
.ck-case .ck-sheet dd { margin: 0; color: #fff; font: 600 14px / 20px var(--z-font-code, ui-monospace, Menlo, monospace); }
.ck-sheet__conditions {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px 32px;
  margin-top: 20px !important; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 22%);
}
.ck-sheet__key { display: none; }
@media (max-width: 809.98px) {
  .ck-sheet { padding: 20px 14px 18px; }
  /* On a phone the values stand alone under each column, their names once above them. */
  .ck-case .ck-sheet__key { display: block; margin: 8px 0 4px; text-align: center; color: rgb(255 255 255 / 72%); font-size: 11px; line-height: 15px; }
  .ck-sheet__cols dt { display: none; }
  .ck-case .ck-sheet__groups p { font-size: 11px; line-height: 15px; padding-bottom: 6px; }
  .ck-case .ck-sheet__caption { font-size: 12px; line-height: 18px; }
  .ck-sheet__groups { gap: 0 8px; }
  .ck-sheet__cols dl { min-width: 0; width: 100%; padding-inline: 4px; }
  .ck-sheet :is(.ck-sheet__cols) div { display: grid; gap: 0; text-align: center; }
  .ck-case .ck-sheet dt { font-size: 11px; line-height: 15px; }
  .ck-case .ck-sheet dd { font-size: 12px; line-height: 17px; }
  .ck-case .ck-sheet__heads p { font-size: 10px; letter-spacing: .04em; }
}

/* ---------- Simulator inline (SimEmbed) and a render that becomes a model (ModelEmbed) ----------
   The stage is one screen high, less the nav and the card's own head, between 540 and 720px (a phone: 560–720px), so
   the whole card fits a screen;
   the app inside lays itself out to that height. */
.ck-sim { display: grid; gap: 16px; padding: 20px; border-radius: var(--r-block, 32px); background: var(--white); box-shadow: 0 8px 24px rgb(26 26 26 / 6%); }
.ck-band .ck-sim { background: var(--bg); box-shadow: none; }
.ck-sim__head { display: grid; gap: 6px; max-width: 800px; padding: 4px 8px 0; }
.ck-case .ck-sim__tag {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--z-color-blue-action, #4b6bf3);
  font: 600 var(--z-type-eyebrow, 12px) / 18px var(--z-font-interface); letter-spacing: var(--z-tracking-eyebrow, .08em); text-transform: uppercase;
}
.ck-sim__tag i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgb(75 107 243 / 18%); }
.ck-case .ck-sim h3 { font-size: 24px; line-height: 32px; font-weight: 600; color: var(--ink); }
.ck-case .ck-sim__lead { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink-2); }
.ck-sim__stage { overflow: hidden; height: clamp(540px, calc(100svh - 250px), 720px); border-radius: var(--r-card, 24px); background: var(--z-color-canvas, #f5f4f6); }
.ck-sim__stage iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 809.98px) {
  .ck-sim { gap: 12px; padding: 12px; border-radius: var(--r-card, 24px); }
  .ck-sim__head { padding: 6px 6px 0; }
  .ck-case .ck-sim h3 { font-size: 20px; line-height: 28px; }
  .ck-case .ck-sim__lead { font-size: 15px; line-height: 22px; }
  .ck-sim__stage { height: clamp(560px, calc(100svh - 200px), 720px); border-radius: 18px; }
}

.ck-model { display: grid; gap: 16px; margin: 0; }
.ck-model__stage { position: relative; overflow: hidden; border-radius: var(--r-card, 24px); background: var(--z-color-canvas, #f5f4f6); aspect-ratio: 920 / 820; }
.ck-model__stage > :is(img, iframe) { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; }
.ck-model__turn {
  position: absolute; left: 50%; bottom: 20px; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; cursor: pointer;
  font: 600 15px / 22px var(--z-font-interface); box-shadow: 0 8px 24px rgb(26 26 26 / 18%);
  transition: scale 160ms ease-out, background-color 160ms ease-out;
}
.ck-model__turn:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .ck-model__turn:hover { background: var(--z-color-blue-action, #4b6bf3); } }
.ck-model[data-live] .ck-model__turn { display: none; }
.ck-case .ck-model figcaption { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink-2); }

/* ---------- Charts (site/charts.tsx) ---------- */
.ck-chart, .ck-dumbbell { display: grid; gap: 16px; margin: 0; padding: 28px; border-radius: var(--r-card, 24px); background: var(--white); }
.ck-band :is(.ck-chart, .ck-dumbbell) { background: var(--bg); }
.ck-chart__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.ck-case .ck-chart__legend li { display: inline-flex; align-items: center; gap: 8px; padding: 0; font-size: 14px; line-height: 20px; color: var(--ink-2); }
.ck-case .ck-chart__legend li::before { content: none; }
.ck-key { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ck-key--blue { background: #6488ff; }
.ck-key--grey { background: #85858d; }
.ck-key--ring { width: 12px; height: 12px; box-shadow: inset 0 0 0 2px #1a1a1a; }
.ck-key--blue-ring { width: 12px; height: 12px; box-shadow: inset 0 0 0 2px #4b6bf3; }
.ck-key--diamond { width: 9px; height: 9px; border-radius: 1px; rotate: 45deg; background: #4b6bf3; }
.ck-chart__panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ck-chart__panel { display: grid; gap: 4px; min-width: 0; }
.ck-chart__panel svg { display: block; width: 100%; height: auto; overflow: visible; }
.ck-case .ck-chart__title { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.ck-chart__tick { font: 500 11px var(--z-font-interface); fill: #66666e; font-variant-numeric: tabular-nums; }
.ck-chart__mark { font: 600 12px var(--z-font-interface); fill: #1a1a1a; }
.ck-chart__panel circle { transition: r 120ms ease-out; }
.ck-chart__panel circle:hover { r: 6.5; }
.ck-case .ck-chart__x { margin: -8px 0 0; text-align: center; font-size: 14px; line-height: 20px; color: var(--z-color-caption, #66666e); }
.ck-case :is(.ck-chart, .ck-dumbbell) figcaption { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink-2); }

.ck-dumbbell { --track: minmax(0, 1fr); row-gap: 0; }
.ck-dumbbell > .ck-chart__legend { margin-bottom: 20px; }
.ck-dumbbell > figcaption { margin-top: 16px; }
.ck-dumbbell__row { display: grid; grid-template-columns: repeat(var(--cols), 64px) var(--track); align-items: center; gap: 12px; min-height: 26px; }
.ck-dumbbell__row--head { align-items: end; margin-bottom: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--line, #e6e6e6); }
.ck-case .ck-dumbbell__row--head span { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--z-color-caption, #66666e); }
.ck-dumbbell__target { font: 500 12px / 16px var(--z-font-code, ui-monospace, Menlo, monospace); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ck-dumbbell__track { position: relative; height: 18px; background: linear-gradient(var(--line, #e6e6e6), var(--line, #e6e6e6)) 0 50% / 100% 1px no-repeat; }
.ck-dumbbell__line { position: absolute; top: 50%; height: 2px; translate: 0 -50%; background: #b4c3ff; border-radius: 2px; }
.ck-dumbbell__dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; translate: -50% -50%; box-shadow: 0 0 0 2px var(--white); }
.ck-band .ck-dumbbell__dot { box-shadow: 0 0 0 2px var(--bg); }
.ck-dumbbell__dot--from { background: #85858d; }
.ck-dumbbell__dot--to { background: #6488ff; }
.ck-dumbbell__dot.ck-dumbbell__dot--retried { box-sizing: border-box; border: 2px solid #4b6bf3; background: var(--white); }
.ck-dumbbell__row--axis { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line, #e6e6e6); }
.ck-dumbbell__row--axis .ck-dumbbell__track { background: none; }
.ck-dumbbell__row--axis b { position: absolute; top: 0; translate: -50% 0; font: 500 11px / 16px var(--z-font-interface); color: #66666e; white-space: nowrap; }
@media (max-width: 809.98px) {
  .ck-chart, .ck-dumbbell { padding: 18px 14px; }
  .ck-chart__panels { grid-template-columns: minmax(0, 1fr); }
  .ck-dumbbell__row { grid-template-columns: repeat(var(--cols), 44px) var(--track); gap: 6px; }
  .ck-dumbbell__target { font-size: 10px; }
  .ck-case .ck-dumbbell__row--head span { font-size: 10px; line-height: 13px; }
}

/* Blocks that sit in a column: one card per row for findings, two to a row for steps and numbers. */
.ck-case .ck-column .ck-findings { grid-template-columns: minmax(0, 1fr); }
.ck-case .ck-column .grid-3.ck-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-case .ck-column .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 32px; gap: 24px; }

/* ---------- The leg draft's rhythm (pages/leg-inverse-design.tsx) ----------
   A plain section closes with the same room a band opens with, so no block sits on a band's edge; the method's three
   findings stand under the drawing's three panels. */
.page-case-leg .ck-case > section:not(.ck-band):has(+ .ck-band) { padding-bottom: 128px; }
.page-case-leg #method .ck-findings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-case-leg #method .figure + .ck-findings { margin-top: -8px; }
@media (max-width: 1099.98px) { .page-case-leg #method .ck-findings { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 809.98px) {
  /* The labels here are a word or two: they keep their own width. */
  .page-case-leg .ck-case .block > .impact__pill { width: auto; justify-self: start; }
  .page-case-leg .ck-case > section:not(.ck-band):has(+ .ck-band) { padding-bottom: 64px; }
}

/* ---------- Loading veil (LoadingVeil): the scan loader and a line, over an app until it is ready ----------
   client.tsx drops it ([data-loaded] on the stage) once the frame has loaded and, for apps that say so, reports ready. */
.ck-loading {
  position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 12px;
  background: var(--z-color-canvas, #f5f4f6); pointer-events: none;
  transition: opacity 320ms var(--z-ease-out, ease-out), visibility 0s linear 320ms;
}
.ck-case .ck-loading p { margin: 0; font: 500 13px / 20px var(--z-font-interface); color: var(--z-color-caption, #66666e); }
/* The file being downloaded (mono: name · loaded / total · n / count) and its share, once the app reports progress. */
.ck-loading__file { min-height: 16px; font: 500 11.5px / 16px var(--z-font-code, ui-monospace, Menlo, monospace); color: var(--z-color-caption, #66666e); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-loading__bar { position: relative; width: 168px; height: 3px; overflow: hidden; border-radius: 999px; background: rgb(26 26 26 / 8%); opacity: 0; transition: opacity 200ms ease-out; }
.ck-loading__bar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: inherit; background: var(--z-color-blue-action, #4b6bf3); transition: width 160ms linear; }
[data-progress] > .ck-loading__bar { opacity: 1; }
[data-progress-veil]:not([data-progress]) > :is(.ck-loading__file, .ck-loading__bar) { display: none; }

:is(.ck-sim__stage, .ck-model__stage) { position: relative; }
:is(.ck-sim__stage, .ck-model__stage)[data-loaded] > .ck-loading { opacity: 0; visibility: hidden; }
.ck-model:not([data-live]) .ck-loading { display: none; }