/*
  /workshops: a script, step by step. Depends on tokens.css and site.css.
  Class prefix .wk- (page) and .vg- (step vignettes inside device screens).

  Modes
    base                 no JS, or narrower than 64rem: a vertical sequence. The rail
                         is a sticky bar at the top; each step carries its own device.
    .wk-js + >= 64rem    scrollytelling: sticky stage (rail, device, tray) on the
                         right, step panels scroll on the left. js/ludi/workshop.js
                         marks the active step and flies the chips.

  Colour: tokens only. The one exception is the workshop's own brand teal, used
  inside device screens (.wk-device scope), where it stands for the product UI.

  Sections
    1. Role shapes
    2. Hero and bead string
    3. Journey: base layout, rail, steps, flow, chips
    4. Devices (laptop sibling of the phone frame)
    5. Stage mode (JS, wide)
    6. Vignettes
    7. Ledger, engine, CTA
    8. Reduced motion
*/

/* 1. Role shapes -------------------------------------------------------
   Same vocabulary as .ludi-role and .ludi-strip: square = capture,
   circle = generate, diamond = decide, arch = facilitate. */

:is(.wk-shape, .wk-chip, .wk-flow__from, .wk-step, .wk-ledger__item) { --role: var(--ludi-role-capture); --role-text: var(--ludi-role-capture-text); }
:is(.wk-shape, .wk-chip, .wk-flow__from, .wk-step, .wk-ledger__item)[data-role="generate"] { --role: var(--ludi-role-generate); --role-text: var(--ludi-role-generate-text); }
:is(.wk-shape, .wk-chip, .wk-flow__from, .wk-step, .wk-ledger__item)[data-role="decide"] { --role: var(--ludi-role-decide); --role-text: var(--ludi-role-decide-text); }
:is(.wk-shape, .wk-chip, .wk-flow__from, .wk-step, .wk-ledger__item)[data-role="facilitate"] { --role: var(--ludi-role-facilitate); --role-text: var(--ludi-role-facilitate-text); }

.wk-shape {
  --size: 2rem;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 22%;
  background: var(--role);
  color: var(--ludi-ink-900);
  font-family: var(--ludi-font-display);
  font-weight: var(--ludi-weight-bold);
  font-size: calc(var(--size) * 0.46);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.wk-shape[data-role="generate"] { border-radius: 50%; }
.wk-shape[data-role="decide"] { border-radius: 14%; transform: rotate(45deg) scale(0.84); }
.wk-shape[data-role="decide"] > span { transform: rotate(-45deg) scale(1.19); }
.wk-shape[data-role="facilitate"] { border-radius: 50% 50% 16% 16%; }
.wk-shape--xs { --size: 1.15rem; }
.wk-shape--lg { --size: 2.75rem; }

/* 2. Hero ------------------------------------------------------------- */

.wk-hero {
  padding-block: var(--ludi-space-8) var(--ludi-space-7);
  overflow: clip;
}

.wk-hero__copy {
  display: grid;
  gap: var(--ludi-space-5);
  justify-items: start;
}

.wk-hero__title {
  font-family: var(--ludi-font-display);
  font-weight: var(--ludi-weight-bold);
  font-size: clamp(3rem, 1.4rem + 6.4vw, 7.25rem);
  line-height: 0.94;
  letter-spacing: -0.04em;
  max-width: 11ch;
  text-wrap: balance;
}

.wk-hero__lead {
  font-size: var(--ludi-text-lg);
  line-height: 1.45;
  max-width: 40ch;
  text-wrap: pretty;
}

.wk-hero__example {
  color: var(--ludi-color-text-muted);
  max-width: 50ch;
}

.wk-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ludi-space-3);
  padding-top: var(--ludi-space-2);
}

@media (min-width: 64rem) {
  .wk-hero__copy {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--ludi-space-8);
    align-items: end;
  }
  .wk-hero__copy > .wk-hero__title { grid-row: 1 / span 3; }
  .wk-hero__copy > :is(.wk-hero__lead, .wk-hero__example, .wk-hero__actions) { grid-column: 2; }
}

/* The bead string: ten steps hung on one thread. Bead centres follow the same
   quadratic sag as the SVG path (y given per item by the view, in % of --h). */
.wk-beads { margin-top: var(--ludi-space-8); }

.wk-beads__line {
  --h: 7rem;
  --bead: 3rem;
  position: relative;
}

.wk-beads__string {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: var(--h);
  overflow: visible;
}
.wk-beads__string path {
  fill: none;
  stroke: var(--ludi-color-text);
  stroke-width: 2;
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
}

.wk-beads__list {
  position: relative;
  display: flex;
}

.wk-beads__item {
  flex: 1 1 0;
  min-width: 0;
  padding-top: calc(var(--y) * var(--h) / 100 - var(--bead) / 2);
}

.wk-bead {
  display: grid;
  justify-items: center;
  gap: var(--ludi-space-2);
  padding-inline: var(--ludi-space-1);
  color: var(--ludi-color-text);
  text-align: center;
  text-decoration: none;
}
.wk-bead .wk-shape {
  --size: var(--bead);
  box-shadow: 0 0 0 4px var(--ludi-color-bg);
  transition: translate var(--ludi-duration-base) var(--ludi-ease-out);
}
.wk-bead:hover .wk-shape { translate: 0 -4px; }
.wk-bead__title {
  font-family: var(--ludi-font-display);
  font-weight: var(--ludi-weight-semibold);
  font-size: var(--ludi-text-sm);
  line-height: 1.15;
  text-wrap: balance;
}
.wk-bead__min { font-size: var(--ludi-text-xs); color: var(--ludi-color-text-muted); margin-top: -0.25rem; }

.wk-beads__total {
  margin-top: var(--ludi-space-5);
  font-size: var(--ludi-text-sm);
  color: var(--ludi-color-text-muted);
}

@media (max-width: 47.99rem) {
  .wk-beads__line { --h: 4rem; --bead: 1.9rem; }
  .wk-bead__title, .wk-bead__min {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .wk-bead { padding-inline: 0; }
}

/* The page's one load moment: the thread is strung, then the beads drop on. */
@media (prefers-reduced-motion: no-preference) {
  .wk-beads__string { animation: wk-string 900ms var(--ludi-ease-out) both; }
  .wk-beads__item { animation: wk-bead-drop 520ms var(--ludi-ease-out) both; animation-delay: calc(300ms + var(--i) * 55ms); }
}
@keyframes wk-string { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes wk-bead-drop {
  from { opacity: 0; transform: translateY(-1.5rem) rotate(-14deg); }
  70% { transform: translateY(0.2rem) rotate(3deg); }
  to { opacity: 1; transform: none; }
}

/* 3. Journey (base: no JS or narrow) ------------------------------------ */

.wk-journey { position: relative; border-top: 1px solid var(--ludi-color-line); }

.wk-stage {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-inline: calc(-1 * var(--ludi-gutter));
  padding: var(--ludi-space-2) var(--ludi-gutter);
  box-shadow: 0 10px 18px -14px rgb(4 12 18 / 0.7);
}
.wk-stage__screens,
.wk-stage__tray { display: none; }

/* Rail: ten nodes, progress line behind them. */
.wk-rail { --wk-progress: 0; }
.wk-rail__list {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.wk-rail__list::before,
.wk-rail__list::after {
  content: "";
  position: absolute;
  top: calc(var(--node, 1.6rem) / 2 + 3px);
  left: calc(var(--node, 1.6rem) / 2 + 3px);
  height: 2px;
}
.wk-rail__list::before {
  right: calc(var(--node, 1.6rem) / 2 + 3px);
  background: repeating-linear-gradient(to right, var(--ludi-color-line-strong) 0 6px, transparent 6px 11px);
}
.wk-rail__list::after {
  width: calc((100% - var(--node, 1.6rem) - 6px) * var(--wk-progress));
  background: var(--ludi-color-text);
  transition: width var(--ludi-duration-slow) var(--ludi-ease-out);
}

.wk-rail__node {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 0.7rem;
  padding: 3px;
  border-radius: var(--ludi-radius-sm);
  color: var(--ludi-color-text);
  text-decoration: none;
}
.wk-rail__node .wk-shape {
  --size: var(--node, 1.6rem);
  background: var(--ludi-color-bg);
  color: var(--ludi-color-text);
  box-shadow: inset 0 0 0 2px var(--role);
  transition: scale var(--ludi-duration-base) var(--ludi-ease-out), background-color var(--ludi-duration-base);
}
.wk-rail__node.is-done .wk-shape,
.wk-rail__node[aria-current] .wk-shape {
  background: var(--role);
  color: var(--ludi-ink-900);
  box-shadow: none;
}
.wk-rail__node[aria-current] .wk-shape {
  scale: 1.22;
  box-shadow: 0 0 0 3px var(--ludi-color-bg), 0 0 0 5px var(--role);
}
.wk-rail__node:hover .wk-shape { scale: 1.12; }
.wk-rail__node[aria-current]:hover .wk-shape { scale: 1.22; }
.wk-rail__node.is-pulse .wk-shape { animation: wk-pulse 600ms var(--ludi-ease-out); }
@keyframes wk-pulse { 40% { scale: 1.45; } }

.wk-rail__min {
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--ludi-color-text-subtle);
  font-variant-numeric: tabular-nums;
}
.wk-rail__node[aria-current] .wk-rail__min { color: var(--ludi-color-text); font-weight: var(--ludi-weight-bold); }

@media (max-width: 29.99rem) {
  .wk-rail__min { display: none; }
}

/* Steps */
.wk-step {
  padding-block: var(--ludi-space-7);
  border-bottom: 1px solid var(--ludi-color-line);
  scroll-margin-top: 4.25rem;
}
.wk-step:last-child { border-bottom: 0; }

.wk-step__card { display: grid; gap: var(--ludi-space-4); align-content: start; }

.wk-step__head { display: flex; align-items: center; gap: var(--ludi-space-4); }
.wk-step__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  font-size: var(--ludi-text-sm);
  color: var(--ludi-color-text-muted);
}
.wk-step__min { font-variant-numeric: tabular-nums; }
.wk-ai {
  padding: 0.1rem 0.6rem;
  border-radius: var(--ludi-radius-pill);
  background: color-mix(in srgb, var(--ludi-role-generate) 32%, var(--ludi-color-bg));
  color: var(--ludi-role-generate-text);
  font-weight: var(--ludi-weight-bold);
}

.wk-step__title {
  font-family: var(--ludi-font-display);
  font-weight: var(--ludi-weight-bold);
  font-size: clamp(1.875rem, 1.35rem + 1.8vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: var(--ludi-tracking-display);
}
.wk-step__what { max-width: 52ch; text-wrap: pretty; }

.wk-step__device {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--ludi-text-sm);
  color: var(--ludi-color-text-muted);
}
.wk-step__device::before {
  /* tiny device glyph: laptop = wide, phone = tall */
  content: "";
  width: 1.15rem;
  height: 0.75rem;
  border: 2px solid currentColor;
  border-radius: 2px 2px 0 0;
  border-bottom-width: 3px;
}
.wk-step__device[data-device="phone"]::before { width: 0.6rem; height: 1rem; border-radius: 3px; border-bottom-width: 2px; }

/* What a step uses and what it produces. */
.wk-flow {
  display: grid;
  gap: var(--ludi-space-4);
  margin-top: var(--ludi-space-2);
  padding: var(--ludi-space-4) var(--ludi-space-5);
  border: 1.5px solid var(--ludi-color-line-strong);
  border-radius: var(--ludi-radius-md);
  background: var(--ludi-color-surface);
}
.wk-flow__part { display: grid; gap: var(--ludi-space-2); align-content: start; }
.wk-flow__part--out { padding-top: var(--ludi-space-4); border-top: 1px dashed var(--ludi-color-line-strong); }
.wk-flow__label {
  font-size: var(--ludi-text-xs);
  font-weight: var(--ludi-weight-bold);
  color: var(--ludi-color-text-muted);
}
.wk-flow__item { display: grid; gap: 0.35rem; justify-items: start; }
.wk-flow__item + .wk-flow__item { margin-top: var(--ludi-space-2); }
.wk-flow__what { font-weight: var(--ludi-weight-semibold); }
.wk-flow__none { color: var(--ludi-color-text-muted); font-style: italic; }
.wk-flow__from {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--ludi-text-sm);
  color: var(--ludi-color-link);
  text-underline-offset: 0.2em;
}
.wk-flow__from::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 2px;
  background: var(--role);
}
.wk-flow__from[data-role="generate"]::before { border-radius: 50%; }
.wk-flow__from[data-role="decide"]::before { transform: rotate(45deg) scale(0.85); }
.wk-flow__from[data-role="facilitate"]::before { border-radius: 50% 50% 2px 2px; }
.wk-flow__chips { padding-top: 0.2rem; }

/* Chips: the concrete items that travel along the thread. Paper tokens, with
   a mark in the colour (and shape) of the step that made them. */
.wk-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }

.wk-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  max-width: 100%;
  padding: 0.28rem 0.7rem 0.28rem 0.55rem;
  border: 1.5px solid var(--ludi-color-text);
  border-radius: var(--ludi-radius-sm);
  background: var(--ludi-color-surface);
  box-shadow: 2px 2px 0 var(--ludi-color-line-strong);
  font-size: var(--ludi-text-sm);
  font-weight: var(--ludi-weight-semibold);
  line-height: 1.25;
}
.wk-chip::before {
  content: "";
  flex: none;
  width: 0.6em;
  height: 0.6em;
  border-radius: 2px;
  background: var(--role);
}
.wk-chip[data-role="generate"]::before { border-radius: 50%; }
.wk-chip[data-role="decide"]::before { transform: rotate(45deg) scale(0.85); }
.wk-chip[data-role="facilitate"]::before { border-radius: 50% 50% 2px 2px; }
.wk-chip.is-dropped {
  border-style: dashed;
  box-shadow: none;
  color: var(--ludi-color-text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* Inline device (base mode): the step's own stage. */
.wk-step__media {
  margin-top: var(--ludi-space-3);
  padding: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  border-radius: var(--ludi-radius-lg);
  background:
    radial-gradient(ellipse 70% 60% at 45% 35%, rgb(72 172 215 / 0.14), transparent 70%),
    var(--ludi-color-bg);
}
/* Captions under the inline device (narrow screens; same cues as the stage). */
.wk-step__caption {
  margin: var(--ludi-space-3) 0 0;
  min-height: 1.4em;
  font-size: var(--ludi-text-sm);
  color: var(--ludi-color-text-muted);
  text-align: center;
}
.wk-step__caption:empty { visibility: hidden; }

@media (min-width: 56rem) {
  .wk-step__card {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--ludi-space-7);
  }
  .wk-step__card > * { grid-column: 1; }
  .wk-step__card > .wk-step__media { grid-column: 2; grid-row: 1 / span 6; align-self: start; margin-top: 0; }
}

/* 4. Devices -----------------------------------------------------------
   .ludi-device comes from site.css; this adds the laptop and the vignette
   layer. The brand teal is scoped here. */

.wk-device {
  --wk-teal: #0D9488;
  --wk-teal-deep: color-mix(in srgb, var(--wk-teal) 72%, var(--ludi-ink-900));
  --wk-tint: color-mix(in srgb, var(--wk-teal) 13%, #fff);
  --wk-tint-2: color-mix(in srgb, var(--wk-teal) 30%, #fff);
}

.wk-device .ludi-device__screen,
.wk-device .ludi-device__phone-screen,
.wk-laptop__screen { background: var(--ludi-chalk-50); }

.wk-device__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wk-device.is-missing video.wk-device__media { display: none; }
.wk-device .ludi-device__toggle { z-index: 2; }

.wk-device--laptop .ludi-device__host { margin-right: 21cqi; margin-bottom: 11cqi; }
.wk-device--laptop .ludi-device__toggle { bottom: calc(11cqi + 2.2cqi); }

.wk-laptop {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40cqi;
  filter: drop-shadow(0 2.4cqi 2.4cqi rgb(4 12 18 / 0.55));
}
.wk-laptop__screen {
  box-sizing: content-box;
  position: relative;
  overflow: hidden;
  width: calc(100% - 2.6cqi);
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  border: 1cqi solid var(--ludi-device-bezel);
  border-bottom-width: 1.4cqi;
  border-radius: 1.4cqi 1.4cqi 0 0;
  box-shadow: 0 0 0 1px var(--ludi-device-bezel-edge);
}
.wk-laptop__base {
  position: relative;
  height: 1.7cqi;
  margin-inline: -3%;
  border-radius: 0.3cqi 0.3cqi 1.6cqi 1.6cqi;
  background: linear-gradient(to bottom, var(--ludi-device-bezel-edge), var(--ludi-device-bezel) 70%);
}
.wk-laptop__base::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 14%;
  height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 0.8cqi 0.8cqi;
  background: rgb(0 0 0 / 0.35);
}

/* 5. Stage mode (JS, wide) ------------------------------------------- */

@media (min-width: 64rem) {
  .wk-js .wk-journey__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--ludi-space-7);
    align-items: start;
  }

  .wk-js .wk-stage {
    --node: 2.1rem;
    grid-column: 2;
    grid-row: 1;
    top: var(--ludi-space-3);
    height: calc(100svh - 2 * var(--ludi-space-3));
    display: flex;
    flex-direction: column;
    gap: var(--ludi-space-4);
    margin: var(--ludi-space-3) calc(-1 * max(var(--ludi-gutter), (100vw - var(--ludi-container)) / 2)) var(--ludi-space-3) 0;
    padding: var(--ludi-space-5) max(var(--ludi-gutter), (100vw - var(--ludi-container)) / 2) var(--ludi-space-5) var(--ludi-space-6);
    border-radius: var(--ludi-radius-lg) 0 0 var(--ludi-radius-lg);
    background:
      radial-gradient(ellipse 60% 45% at 50% 42%, rgb(72 172 215 / 0.13), transparent 70%),
      var(--ludi-color-bg);
    box-shadow: none;
  }

  /* The screens take whatever height the rail and tray leave, and the device
     scales to fit it (size container: its own content never pushes back). */
  .wk-js .wk-stage__screens {
    flex: 1 1 0;
    min-height: 12rem;
    container-type: size;
    display: grid;
    place-items: center;
  }
  .wk-js .wk-stage__layer {
    width: min(100cqw, 100cqh * 1.48);
    display: grid;
    gap: var(--ludi-space-2);
  }
  .wk-js .wk-stage__layer--laptop { width: min(100cqw, 100cqh * 1.72); }
  .wk-js .wk-stage__layer[hidden] { display: none; }
  .wk-stage__caption {
    min-height: 1.4em;
    font-size: var(--ludi-text-sm);
    color: var(--ludi-color-text-muted);
    text-align: center;
  }
  .wk-stage__caption:empty { display: none; }

  .wk-js .wk-stage__tray {
    display: block;
    flex: none;
    min-height: 10.5rem;
    padding-top: var(--ludi-space-4);
    border-top: 1px solid var(--ludi-color-line);
  }

  /* Room after the last step so it can reach the centre while the stage is pinned. */
  .wk-js .wk-steps { grid-column: 1; grid-row: 1; padding-block: 8svh 12svh; }
  .wk-js .wk-step {
    min-height: 88svh;
    display: flex;
    align-items: center;
    padding-block: var(--ludi-space-8);
    border-bottom: 0;
    scroll-margin-top: 0;
  }
  .wk-js .wk-step__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-left: var(--ludi-space-5);
    border-left: 3px solid transparent;
    transition: border-color var(--ludi-duration-base) var(--ludi-ease-out);
  }
  .wk-js .wk-step__card > * { grid-column: 1; }
  .wk-js .wk-step.is-active .wk-step__card { border-left-color: var(--role); }
  .wk-js .wk-step__media { display: none; }
  /* The stage tray shows the chips; the panel keeps them for screen readers. */
  .wk-js .wk-flow__chips {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
}

/* Tray: what arrives, what leaves. */
.wk-tray {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--ludi-space-5);
}
.wk-tray[hidden] { display: none; }
.wk-tray__row { display: grid; gap: var(--ludi-space-2); align-content: start; min-width: 0; }
.wk-tray__row--out { padding-left: var(--ludi-space-5); border-left: 2px dashed var(--ludi-color-line-strong); }
.wk-tray__label { font-size: var(--ludi-text-xs); font-weight: var(--ludi-weight-bold); color: var(--ludi-color-text-subtle); }
.wk-tray__body { display: grid; gap: var(--ludi-space-3); }
.wk-tray__group { display: grid; gap: 0.4rem; }
.wk-tray__src {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--ludi-text-sm);
  font-weight: var(--ludi-weight-semibold);
  line-height: 1.25;
}
.wk-tray__src .wk-shape { font-size: 0.6875rem; }
.wk-tray__empty, .wk-tray__note { font-size: var(--ludi-text-sm); color: var(--ludi-color-text-muted); font-style: italic; }
.wk-tray__note { font-size: var(--ludi-text-xs); }

.wk-tray .wk-chips { gap: 0.35rem; }
.wk-tray .wk-chip {
  display: inline-block;
  max-width: 26ch;
  padding: 0.2rem 0.55rem;
  border-color: var(--ludi-ink-900);
  background: var(--ludi-chalk-50);
  color: var(--ludi-ink-900);
  box-shadow: 2px 2px 0 rgb(4 12 18 / 0.55);
  font-size: var(--ludi-text-xs);
}
.wk-tray .wk-chip::before { display: inline-block; margin-right: 0.4em; vertical-align: 0.02em; }
.wk-tray__row--in .wk-chip { max-width: min(26ch, calc(50% - 0.2rem)); }
.wk-tray .wk-chip.is-dropped {
  background: transparent;
  border-color: var(--ludi-color-line-strong);
  color: var(--ludi-color-text-subtle);
  box-shadow: none;
}

/* Chips in flight (JS). Transforms only, composited. */
.wk-chip.is-flying { will-change: transform, opacity; position: relative; z-index: 30; }

/* Stage entrance for a new layer: a short settle, not a slideshow. */
@media (prefers-reduced-motion: no-preference) {
  .wk-js .wk-stage__layer:not([hidden]) { animation: wk-layer-in 360ms var(--ludi-ease-out); }
}
@keyframes wk-layer-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

/* 6. Vignettes -------------------------------------------------------
   Sized in em off a font-size given in cqi of the .ludi-device container,
   so a vignette keeps its proportions from the hero-size stage to a phone. */

.wk-vg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 4% 5%;
  background: var(--ludi-chalk-50);
  color: var(--ludi-ink-900);
  font-family: var(--ludi-font-body);
  line-height: 1.22;
}
.wk-vg--host { font-size: 1.72cqi; }
.wk-device--laptop .wk-vg--host { font-size: 1.55cqi; }
.wk-vg--laptop { font-size: 0.86cqi; padding: 3.5% 4%; }
.wk-vg--phone { font-size: 1.22cqi; padding: 0; }
.wk-vg p, .wk-vg ol, .wk-vg ul { margin: 0; padding: 0; }
.wk-vg b { font-weight: var(--ludi-weight-bold); }

.vg-frame { display: flex; flex-direction: column; gap: 0.9em; height: 100%; min-height: 0; }
.vg-center { align-items: center; justify-content: center; text-align: center; }
.vg-bar { display: flex; justify-content: space-between; align-items: center; gap: 1em; font-family: var(--ludi-font-display); font-size: 1.12em; }
.vg-brand { font-family: var(--ludi-font-body); font-size: 0.8em; font-weight: 700; color: var(--wk-teal-deep); }
.vg-timer, .vg-pill {
  padding: 0.15em 0.65em;
  border-radius: 99em;
  background: var(--wk-tint);
  color: var(--wk-teal-deep);
  font-family: var(--ludi-font-body);
  font-size: 0.82em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vg-pill { background: var(--ludi-chalk-100); color: var(--ludi-ink-700); }
.vg-timer--ring { box-shadow: inset 0 0 0 0.16em var(--wk-teal); background: #fff; }
.vg-meta { font-size: 0.82em; color: var(--ludi-ink-600); }
.vg-label { font-size: 0.78em; font-weight: 700; color: var(--wk-teal-deep); }
.vg-h { font-family: var(--ludi-font-display); font-weight: 700; font-size: 1.3em; line-height: 1.1; }
.vg-eyebrow { font-size: 0.78em; font-weight: 700; color: var(--wk-teal-deep); }
.vg-display { font-family: var(--ludi-font-display); font-weight: 700; font-size: 2.35em; line-height: 1.02; letter-spacing: -0.02em; }
.vg-display b { color: var(--wk-teal); }
.vg-btn {
  display: inline-block;
  align-self: flex-start;
  padding: 0.45em 1em;
  border-radius: 99em;
  background: var(--wk-teal);
  color: var(--ludi-chalk-50);
  font-size: 0.82em;
  font-weight: 700;
  white-space: nowrap;
}
.vg-btn--ghost { background: transparent; color: var(--ludi-ink-700); box-shadow: inset 0 0 0 0.12em var(--ludi-chalk-300); }
.vg-btn--line { background: transparent; color: var(--wk-teal-deep); box-shadow: inset 0 0 0 0.14em var(--wk-teal); }
.vg-input {
  padding: 0.6em 0.8em;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: inset 0 0 0 0.13em var(--wk-teal);
  font-size: 1.04em;
  font-weight: 600;
}
.vg-typed { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; vertical-align: bottom; }
.vg-typed--slow { display: block; white-space: normal; overflow: visible; font-weight: 500; }
.vg-typed::after {
  content: "";
  display: inline-block;
  width: 0.09em;
  height: 1em;
  margin-left: 0.08em;
  vertical-align: -0.12em;
  background: var(--wk-teal);
}

/* Phone screens: room for the notch. */
.vg-phone {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  height: 100%;
  padding: 22% 8% 10%;
}
.vg-phone.vg-center { padding-top: 10%; }

/* Territory cards */
.vg-cover { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.6em; align-items: center; height: 100%; }
.vg-cover__copy { display: grid; gap: 0.9em; }
.vg-avatars { display: inline-flex; vertical-align: middle; margin-right: 0.4em; }
.vg-avatars i { width: 1.15em; height: 1.15em; margin-right: -0.35em; border-radius: 50%; border: 0.13em solid var(--ludi-chalk-50); background: var(--wk-tint-2); }
.vg-avatars i:nth-child(2n) { background: var(--wk-teal); }
.vg-fan { position: relative; height: 82%; }
.vg-tcard {
  position: absolute;
  inset: 6% 16%;
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  padding: 1em;
  border-radius: 0.9em;
  background: var(--wk-teal);
  color: var(--ludi-chalk-50);
  box-shadow: 0 0.6em 1.4em -0.6em rgb(19 35 46 / 0.55);
}
.vg-tcard b { margin-top: auto; font-family: var(--ludi-font-display); font-size: 1.55em; line-height: 1.04; }
.vg-tcard--ghost { background: var(--wk-tint-2); transform: rotate(-10deg) translateX(-16%); }
.vg-tcard--ghost2 { background: color-mix(in srgb, var(--wk-teal) 60%, #fff); transform: rotate(8deg) translateX(14%); }
.vg-tcard--front { transform: rotate(-2deg); }
/* With a laptop in front of the big screen's lower right, the fan sits high. */
.wk-device--laptop .vg-cover { align-items: start; }
.wk-device--laptop .vg-fan { height: 60%; margin-top: 6%; }
.vg-tcard__num { font-family: var(--ludi-font-display); font-weight: 700; font-size: 2em; line-height: 1; }
.vg-tcard__tag { align-self: flex-start; padding: 0.1em 0.6em; border-radius: 99em; background: rgb(255 255 255 / 0.22); font-size: 0.78em; font-weight: 700; }
.vg-tcard__thesis { font-size: 0.95em; line-height: 1.3; }
.vg-tcard--mini { position: static; inset: auto; padding: 0.8em 1.2em; }
.vg-tcard--mini b { margin: 0; font-size: 1.15em; }

.vg-open { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; gap: 0.9em 1.1em; height: 100%; }
.vg-tcard--open { position: static; inset: auto; grid-row: 1 / span 2; padding: 1.2em; }
.vg-tcard--open .vg-tcard__num { font-size: 0.9em; opacity: 0.85; }
.vg-tcard--open b { margin-top: 0; font-size: 1.7em; }
.vg-takeaways { list-style: none; display: grid; gap: 0.55em; align-content: center; }
.vg-takeaways li { padding: 0.6em 0.75em; border-radius: 0.5em; background: var(--wk-tint); font-size: 0.92em; font-weight: 600; }
.vg-open .vg-btn { justify-self: start; }

/* Crazy cards */
.vg-rounds { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8em; min-height: 0; }
.vg-round { display: flex; flex-direction: column; gap: 0.45em; padding: 0.8em; border-radius: 0.7em; background: var(--ludi-chalk-100); }
.vg-round span { font-size: 0.86em; font-weight: 700; }
.vg-round i { position: relative; flex: 1; border-radius: 0.4em; background: var(--ludi-chalk-200); overflow: hidden; }
.vg-round i::after { content: ""; position: absolute; inset: auto 0 0; height: calc(var(--n) / 24 * 100%); background: var(--wk-teal); transform-origin: bottom; }
.vg-round em { font-style: normal; font-family: var(--ludi-font-display); font-weight: 700; font-size: 1.4em; font-variant-numeric: tabular-nums; }
.vg-round.is-live { box-shadow: inset 0 0 0 0.15em var(--wk-teal); background: #fff; }
.vg-round.is-done i::after { background: var(--wk-teal-deep); }

.vg-sprint { flex: 1; display: grid; gap: 0.7em; align-content: center; padding: 1.3em; border-radius: 0.8em; background: var(--wk-tint); }
.vg-prompt { font-family: var(--ludi-font-display); font-size: 1.4em; font-weight: 600; line-height: 1.15; max-width: 30ch; }
.vg-minicards { display: flex; gap: 0.5em; }
.vg-minicards i { flex: 1; height: 2.1em; border-radius: 0.4em; background: var(--ludi-chalk-200); }
.vg-minicards .is-full { background: var(--wk-teal); }
.vg-minicards .is-live { background: #fff; box-shadow: inset 0 0 0 0.15em var(--wk-teal); }

/* Card table */
.vg-tables { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0.65em; align-content: center; }
.vg-table { display: flex; align-items: flex-end; justify-content: center; gap: 0.22em; aspect-ratio: 1.3; padding: 0.4em; border-radius: 0.5em; background: var(--ludi-chalk-100); }
.vg-table i { width: 22%; height: 58%; border-radius: 0.2em; background: var(--ludi-chalk-200); }
.vg-table i.on { background: var(--wk-teal); }

.vg-forge { display: grid; grid-template-columns: 1fr 2.3fr 1fr; gap: 0.8em; height: 100%; }
.vg-forge__col { display: flex; flex-direction: column; gap: 0.45em; padding: 0.65em; border-radius: 0.6em; background: var(--ludi-chalk-100); min-width: 0; }
.vg-mcard {
  padding: 0.45em 0.55em;
  border-left: 0.3em solid var(--wk-tint-2);
  border-radius: 0.35em;
  background: #fff;
  box-shadow: 0 0.1em 0.25em rgb(19 35 46 / 0.15);
  font-size: 0.8em;
  font-weight: 600;
}
.vg-forge__table {
  position: relative;
  border-radius: 0.6em;
  background:
    radial-gradient(circle at 1px 1px, rgb(13 148 136 / 0.22) 1px, transparent 1.4px) 0 0 / 1.2em 1.2em,
    var(--wk-tint);
}
.vg-dcard {
  position: absolute;
  width: 36%;
  aspect-ratio: 0.74;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.3em;
  padding: 0.6em;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0 0.4em 0.9em -0.3em rgb(19 35 46 / 0.38);
  font-size: 0.86em;
  font-weight: 700;
  line-height: 1.15;
}
.vg-dcard--territory { left: 6%; top: 7%; background: var(--wk-teal); color: var(--ludi-chalk-50); transform: rotate(-5deg); }
.vg-dcard--target { right: 7%; top: 9%; transform: rotate(4deg); box-shadow: inset 0 0 0 0.13em var(--ludi-ink-500), 0 0.4em 0.9em -0.3em rgb(19 35 46 / 0.38); }
.vg-dcard--drag { left: 9%; bottom: 5%; border-top: 0.5em solid var(--wk-tint-2); transform: rotate(-3deg); }
.vg-dcard--result {
  left: 34%;
  top: 30%;
  width: 42%;
  aspect-ratio: auto;
  min-height: 34%;
  background: var(--wk-teal-deep);
  color: var(--ludi-chalk-50);
  box-shadow: 0 0 0 0.25em rgb(243 183 59 / 0.85), 0 0.8em 1.4em -0.4em rgb(19 35 46 / 0.6);
}
.vg-dcard em, .vg-idea em {
  align-self: flex-start;
  padding: 0.05em 0.5em;
  border-radius: 99em;
  background: var(--ludi-marigold-400);
  color: var(--ludi-ink-900);
  font-style: normal;
  font-size: 0.8em;
  font-weight: 700;
}
.vg-forge__deck .vg-slot {
  min-height: 2.6em;
  padding: 0.45em;
  border: 0.12em dashed var(--ludi-chalk-300);
  border-radius: 0.35em;
  font-size: 0.76em;
  font-weight: 600;
}
.vg-forge__deck .vg-slot.is-star { border-style: solid; border-color: var(--wk-teal); background: #fff; }
.vg-forge__deck .vg-slot.is-star::before { content: "★ "; color: var(--ludi-marigold-700); }
.vg-forge__deck .vg-btn { margin-top: auto; align-self: stretch; text-align: center; font-size: 0.74em; }

/* One room */
.vg-room { position: relative; flex: 1; display: grid; place-items: center; }
.vg-room__name { position: absolute; z-index: 1; font-family: var(--ludi-font-display); font-weight: 700; font-size: 1.7em; color: var(--wk-teal-deep); }
.vg-room__dots { position: relative; height: 92%; aspect-ratio: 1; border-radius: 50%; background: var(--wk-tint); box-shadow: inset 0 0 0 0.2em var(--wk-teal); }
.vg-room__dots i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5em;
  height: 1.5em;
  margin: -0.75em;
  border-radius: 50%;
  background: var(--wk-teal);
  transform: rotate(calc(var(--i) * 15deg)) translateX(8.4em);
}
.vg-room__dots i:nth-child(3n) { background: var(--wk-teal-deep); }
.vg-room__dots i:nth-child(3n + 1) { background: var(--wk-tint-2); }
.vg-check { position: relative; width: 4.5em; height: 4.5em; border-radius: 50%; background: var(--wk-teal); }
.vg-check::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 1.2em;
  height: 2.2em;
  border: solid var(--ludi-chalk-50);
  border-width: 0 0.45em 0.45em 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Board */
.vg-board { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 0.6em; min-height: 0; }
.vg-idea {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  padding: 0.6em 0.7em;
  border-top: 0.35em solid var(--wk-tint-2);
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0 0.15em 0.4em -0.1em rgb(19 35 46 / 0.25);
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.2;
}
.vg-idea.is-pick { box-shadow: 0 0 0 0.2em var(--wk-teal); }
.vg-idea.is-new { border-top-color: var(--ludi-marigold-400); background: var(--wk-teal-deep); color: var(--ludi-chalk-50); }
.vg-idea.is-drop { opacity: 0.45; text-decoration: line-through; }
.vg-idea--big { min-height: 6em; justify-content: flex-end; padding: 1em; font-family: var(--ludi-font-display); font-size: 1.15em; }
.vg-actions { display: flex; gap: 0.5em; }

/* Vote */
.vg-bars { flex: 1; list-style: none; display: grid; gap: 0.45em; align-content: center; }
.vg-bars li { position: relative; height: 2.15em; border-radius: 0.4em; background: var(--ludi-chalk-100); overflow: hidden; }
.vg-bars li::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.4em;
  background: var(--ludi-chalk-300);
  transform: scaleX(var(--v));
  transform-origin: left;
}
.vg-bars li.is-top::before { background: var(--wk-teal); }
.vg-bars span { position: relative; padding-inline: 0.8em; font-size: 0.86em; font-weight: 700; line-height: 2.5em; white-space: nowrap; }
.vg-bars li.is-top span { color: var(--ludi-chalk-50); }
.vg-points { display: flex; align-items: center; gap: 0.35em; font-size: 0.9em; font-weight: 700; }
.vg-points i { width: 1em; height: 1em; border-radius: 50%; background: var(--wk-teal); }
.vg-points i.is-spent { background: var(--ludi-chalk-300); }
.vg-points span { margin-left: 0.4em; }
.vg-vote {
  position: relative;
  padding: 0.7em 2.6em 0.7em 0.8em;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgb(19 35 46 / 0.16);
  font-size: 0.86em;
  font-weight: 600;
}
.vg-vote::after {
  content: "+";
  position: absolute;
  right: 0.6em;
  top: 50%;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--wk-tint);
  color: var(--wk-teal-deep);
  font-weight: 700;
  transform: translateY(-50%);
}
.vg-vote.is-on { box-shadow: 0 0 0 0.16em var(--wk-teal); }
.vg-vote.is-on::after { content: "1"; background: var(--wk-teal); color: var(--ludi-chalk-50); }

/* Timers */
.vg-clock { font-family: var(--ludi-font-display); font-weight: 700; font-size: 6.2em; line-height: 1; letter-spacing: -0.03em; color: var(--wk-teal-deep); font-variant-numeric: tabular-nums; }
.vg-clock--sm { font-size: 4em; }
.vg-progress { display: block; width: 70%; height: 0.7em; border-radius: 99em; background: var(--ludi-chalk-200); overflow: hidden; }
.vg-progress i { display: block; height: 100%; background: var(--wk-teal); transform: scaleX(0.97); transform-origin: left; }
.vg-progress--long { width: 100%; }
.vg-progress--long i { transform: scaleX(0.79); }

/* Teams */
.vg-teams { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8em; }
.vg-team { display: flex; flex-direction: column; gap: 0.3em; padding: 0.85em; border-top: 0.4em solid var(--wk-teal); border-radius: 0.7em; background: var(--ludi-chalk-100); }
.vg-team:nth-child(2) { border-top-color: var(--wk-teal-deep); }
.vg-team:nth-child(3) { border-top-color: var(--wk-tint-2); }
.vg-team:nth-child(4) { border-top-color: var(--ludi-ink-700); }
.vg-team b { font-family: var(--ludi-font-display); font-size: 1.2em; }
.vg-team span { font-size: 0.78em; color: var(--ludi-ink-600); }
.vg-team p { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: auto; }
.vg-team p i { width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--wk-tint-2); }
.vg-team p i:nth-child(2n) { background: var(--wk-teal); }
.vg-bigtag { padding: 0.25em 0.6em; border-radius: 0.3em; background: var(--wk-teal); color: var(--ludi-chalk-50); font-family: var(--ludi-font-display); font-weight: 700; font-size: 2.6em; transform: rotate(-3deg); }

/* Prototype */
.vg-subs { flex: 1; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6em; }
.vg-subs li { display: flex; flex-direction: column; justify-content: center; gap: 0.2em; padding: 0.8em; border-radius: 0.6em; background: var(--ludi-chalk-100); font-size: 0.86em; color: var(--ludi-ink-600); }
.vg-subs b { font-family: var(--ludi-font-display); font-size: 1.2em; color: var(--ludi-ink-900); }
.vg-subs li.is-in { background: #fff; box-shadow: inset 0 0 0 0.15em var(--wk-teal); }
.vg-subs li.is-in b::after { content: " ✓"; color: var(--wk-teal); }
.vg-textarea { display: grid; gap: 0.45em; align-content: start; min-height: 9em; padding: 0.75em; border-radius: 0.5em; background: #fff; box-shadow: inset 0 0 0 0.13em var(--wk-teal); font-size: 0.88em; }
.vg-link { color: var(--wk-teal-deep); text-decoration: underline; word-break: break-all; font-weight: 600; }

/* Carousel */
.vg-carousel__body { flex: 1; display: grid; grid-template-columns: 2fr 1fr; gap: 1em; min-height: 0; }
.vg-concept { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6em; padding: 1.4em; border-radius: 0.9em; background: var(--wk-teal); color: var(--ludi-chalk-50); }
.vg-concept .vg-label { color: var(--ludi-chalk-50); opacity: 0.88; }
.vg-concept b { font-family: var(--ludi-font-display); font-size: 1.95em; line-height: 1.05; }
.vg-dots4 { display: flex; gap: 0.35em; }
.vg-dots4 i { width: 0.6em; height: 0.6em; border-radius: 50%; background: rgb(255 255 255 / 0.35); }
.vg-dots4 i.is-on { background: var(--ludi-chalk-50); }
.vg-stream { order: -1; list-style: none; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5em; overflow: hidden; }
.vg-stream li { align-self: flex-start; padding: 0.35em 0.8em; border-radius: 1em 1em 1em 0.2em; background: #fff; box-shadow: 0 0.15em 0.4em -0.1em rgb(19 35 46 / 0.3); font-size: 0.95em; font-weight: 700; }
.vg-stream li:nth-child(even) { align-self: flex-end; border-radius: 1em 1em 0.2em 1em; }
.vg-carousel__body { grid-template-columns: 1fr 2.2fr; }
.vg-emoji { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; }
.vg-emoji span { padding: 0.3em 0; border-radius: 0.5em; background: #fff; box-shadow: 0 0.06em 0.18em rgb(19 35 46 / 0.18); font-size: 1.8em; text-align: center; }
.vg-emoji span.is-on { box-shadow: 0 0 0 0.09em var(--wk-teal); }

/* Vignette motion: only on the active step, only when motion is welcome.
   Each loop shows the one thing that step is about. */
@media (prefers-reduced-motion: no-preference) {
  .is-active .vg-tcard--front,
  .is-active .vg-tcard--open { animation: vg-bob 4.5s var(--ludi-ease-in-out) infinite; }
  .is-active .vg-pulse { animation: vg-pulse 2.4s var(--ludi-ease-out) infinite; }
  .is-active .vg-round.is-live i::after { animation: vg-fill 5s var(--ludi-ease-out) infinite; }
  .is-active .vg-typed:not(.vg-typed--slow) { animation: vg-type 4.5s steps(40, end) infinite; }
  .is-active .vg-typed::after { animation: vg-blink 1s steps(1) infinite; }
  .is-active .vg-dcard--drag { animation: vg-drag 6s var(--ludi-ease-in-out) infinite; }
  .is-active .vg-dcard--result { animation: vg-result 6s var(--ludi-ease-out) infinite; }
  .is-active .vg-room__dots i { animation: vg-gather 1.1s var(--ludi-ease-out) both; animation-delay: calc(var(--i) * 45ms); }
  .is-active .vg-idea.is-new { animation: vg-pop 700ms var(--ludi-ease-out) 400ms both; }
  .is-active .vg-idea.is-pick { animation: vg-pulse 2.4s var(--ludi-ease-out) infinite; }
  .is-active .vg-bars li::before { animation: vg-grow 1.2s var(--ludi-ease-out) both; }
  .is-active .vg-bars li:nth-child(2)::before { animation-delay: 80ms; }
  .is-active .vg-bars li:nth-child(3)::before { animation-delay: 160ms; }
  .is-active .vg-bars li:nth-child(4)::before { animation-delay: 240ms; }
  .is-active .vg-bars li:nth-child(n + 5)::before { animation-delay: 320ms; }
  .is-active .vg-progress i { animation: vg-drain 40s linear infinite; }
  .is-active .vg-team p i { animation: vg-pop 500ms var(--ludi-ease-out) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
  .is-active .vg-stream li { animation: vg-float 5s var(--ludi-ease-out) infinite both; animation-delay: calc(var(--d) * 0.9s); }
}
@keyframes vg-bob { 50% { transform: rotate(0.5deg) translateY(-0.25em); } }
@keyframes vg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(13 148 136 / 0.5); } 60% { box-shadow: 0 0 0 0.6em rgb(13 148 136 / 0); } }
@keyframes vg-fill { from { transform: scaleY(0.4); } }
@keyframes vg-type { 0% { max-width: 0; } 70%, 100% { max-width: 100%; } }
@keyframes vg-blink { 50% { opacity: 0; } }
@keyframes vg-drag {
  0%, 8% { transform: rotate(-3deg); opacity: 1; }
  34% { transform: translate(118%, -112%) rotate(9deg); opacity: 1; }
  42% { transform: translate(118%, -112%) rotate(9deg) scale(0.85); opacity: 0; }
  92% { transform: translate(118%, -112%) scale(0.85); opacity: 0; }
  100% { transform: rotate(-3deg); opacity: 1; }
}
@keyframes vg-result {
  0%, 38% { transform: scale(0.4); opacity: 0; }
  48% { transform: scale(1.06); opacity: 1; }
  54%, 88% { transform: none; opacity: 1; }
  96%, 100% { transform: scale(0.9); opacity: 0; }
}
@keyframes vg-gather { from { opacity: 0; transform: rotate(calc(var(--i) * 15deg + 90deg)) translateX(30em); } }
@keyframes vg-pop { from { opacity: 0; transform: scale(0.5); } 70% { transform: scale(1.08); } }
@keyframes vg-grow { from { transform: scaleX(0); } }
@keyframes vg-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes vg-float {
  0% { opacity: 0; transform: translateY(2.5em); }
  12%, 70% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-1.5em); }
}

/* 7. Ledger, engine, CTA ---------------------------------------------- */

.wk-leave { background: var(--ludi-color-bg-sunken); border-top: 1px solid var(--ludi-color-line); }

.wk-ledger {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: var(--ludi-space-7) var(--ludi-space-5);
}
@media (min-width: 48rem) {
  .wk-ledger { grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr)); gap: var(--ludi-space-7) var(--ludi-space-6); }
}
.wk-ledger__link {
  display: grid;
  gap: var(--ludi-space-2);
  justify-items: start;
  color: var(--ludi-color-text);
  text-decoration: none;
}
/* A stack of paper: one sheet per few items, offset like a deck on a table. */
.wk-ledger__stack {
  position: relative;
  width: 4.75rem;
  height: 3.25rem;
  margin: 1.8rem 0 var(--ludi-space-3);
}
.wk-ledger__stack i {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--ludi-color-text);
  border-radius: 6px;
  background: var(--ludi-color-surface);
  transform: translate(calc(var(--k) * 4px), calc(var(--k) * -4px)) rotate(calc(var(--k) * -1.2deg));
  transition: transform var(--ludi-duration-base) var(--ludi-ease-out);
}
.wk-ledger__stack i:last-child {
  background: linear-gradient(to bottom, var(--role) 0 0.55rem, var(--ludi-color-surface) 0.55rem);
}
.wk-ledger__link:hover .wk-ledger__stack i { transform: translate(calc(var(--k) * 7px), calc(var(--k) * -5px)) rotate(calc(var(--k) * -3deg)); }
.wk-ledger__n {
  font-family: var(--ludi-font-display);
  font-weight: var(--ludi-weight-bold);
  font-size: var(--ludi-text-2xl);
  line-height: 1;
  letter-spacing: var(--ludi-tracking-display);
}
.wk-ledger__what { color: var(--ludi-color-text-muted); max-width: 28ch; }
.wk-ledger__step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--ludi-space-1);
  color: var(--ludi-color-link);
  font-size: var(--ludi-text-sm);
  font-weight: var(--ludi-weight-bold);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.2em;
}
.wk-ledger__step .wk-shape { font-size: 0.6875rem; }

.wk-engine { border-top: 1px solid var(--ludi-color-line); }
.wk-engine__grid { display: grid; gap: var(--ludi-space-7); align-items: center; }
.wk-engine__copy { display: grid; gap: var(--ludi-space-4); justify-items: start; }
.wk-engine__rows { display: grid; gap: var(--ludi-space-5); }
.wk-engine__row { display: grid; gap: var(--ludi-space-2); justify-items: start; }
.wk-engine__label { font-size: var(--ludi-text-sm); color: var(--ludi-color-text-muted); }
/* The same shapes, strung on a shorter and shorter thread. */
.wk-mini { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; }
.wk-mini::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 50%;
  height: 2px;
  background: var(--ludi-color-text);
}
.wk-mini .wk-shape { position: relative; --size: 1.35rem; }
@media (min-width: 64rem) {
  .wk-engine__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--ludi-space-9); }
}

.wk-cta__inner { display: grid; gap: var(--ludi-space-4); justify-items: start; }

/* 8. Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .wk-rail__list::after,
  .wk-rail__node .wk-shape,
  .wk-js .wk-step__card,
  .wk-ledger__stack i,
  .wk-bead .wk-shape { transition: none; }
  .wk-rail__node.is-pulse .wk-shape { animation: none; }
}