/* steps.css (loaded last; owned by one pass)
   1. method map: the AI's self-check sits inside the loop
   2. the projector: the section pins and the scroll runs the eight posters through a gate
      (2a the stage, the reel, the gate; 2b the ruler 01 to 08; 2c stacked, for reduced motion)
   3. the side sheet: Your turn and each step's hands-on extras
   4. the self-check line in steps 3 to 7 ("Before you watch, the AI checks")
   5. posters in motion. steps-motion.js puts one state on each poster: m-armed (waiting in its
      first frame), m-play (running) or m-hold (paused). Motion is transform and opacity only and
      lives inside prefers-reduced-motion: no-preference, so reduced motion keeps the final state. */

/* =========================================================
   1. method map: the AI checks its own work, inside the loop
   ========================================================= */
.mm-check { position: absolute; left: 56.667%; top: 83.72%; z-index: 1; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; margin: 0; padding: 6px 16px 6px 6px; border-radius: var(--r-pill); background: var(--card); box-shadow: 0 0 0 1px oklch(0.52 0.105 80 / .3), 0 12px 24px -16px oklch(0.185 0.01 70 / .5); white-space: nowrap; }
.mm-check-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--signal); color: var(--ink); }
.mm-check-ic .ic { width: 16px; height: 16px; stroke-width: 2.6; }
.mm-check-t { display: flex; flex-direction: column; gap: 2px; }
.mm-check b { font-size: 14.5px; line-height: 1.15; letter-spacing: -0.005em; color: var(--ink); }
.mm-check small { font: 500 11px/1.15 var(--mono); letter-spacing: .04em; color: var(--signal-ink); }
@media (max-width: 999px) {
  .mm-check { position: relative; left: auto; top: auto; transform: none; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; align-items: center; padding: 4px 0 6px; background: none; box-shadow: none; white-space: normal; }
  .mm-check-ic { justify-self: center; width: 32px; height: 32px; box-shadow: 0 0 0 4px oklch(0.94 0.06 95 / .9); }
  .mm-check b { font-size: 16px; }
  .mm-check small { font-size: 12px; }
}


/* =========================================================
   2. the projector
   The eight steps run as a film strip through a projector gate. app.js mounts it (.pj-on) when
   motion is allowed: the section becomes a tall track (its extra height, --pj-len, is the scroll
   that drives the reel) and its stage pins for the whole track. The reel is the strip of paper
   posters with sprockets on both edges and blank leader before step 1 and after step 8; the
   poster in the middle sits in the gate, the others are dimmed by the loop (inline opacity).
   The ruler (01 to 08, a yellow playhead) sits under the film. Everything the loop moves is
   transform or opacity. Without .pj-on (reduced motion, no JS) the posters stack: see 2c.
   ========================================================= */
#steps.pj {
  --pj-base: oklch(0.235 0.012 72);  /* the film: a little lighter than the stage */
  --pj-perf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 0h24v22H0z M8.5 7h7a2.5 2.5 0 0 1 2.5 2.5v3a2.5 2.5 0 0 1-2.5 2.5h-7A2.5 2.5 0 0 1 6 12.5v-3A2.5 2.5 0 0 1 8.5 7z'/%3E%3C/svg%3E");
  position: relative; background: var(--dark); color: var(--on-dark-2);
}
/* the older deck rules (styles.css) would make the strip a sideways scroller and fade the posters */
#steps .deck-track { overflow: visible; scroll-snap-type: none; transition: none; }
#steps .deck-track > section:not(.is-current) .poster { opacity: 1; scale: none; }
#steps .pv-by.ch-joe { color: var(--on-dark-2); }
#steps .pv-by.ch-joe span::before { color: var(--signal); }
/* the poster-width extras and Your turn (stacked mode) */
#steps .chapter .ch-do { max-width: none; margin: 20px 0 0; }
#steps .chapter .ch-do .ch-act { max-width: none; margin: 0; }
#steps .chapter .pv-annex { margin: 24px 0 0; }

/* ---------- 2a. the stage, the reel, the gate ---------- */
#steps.pj-on { height: calc(100vh + var(--pj-len, 0px)); height: calc(100svh + var(--pj-len, 0px)); padding: 0; }
#steps.pj-on .pj-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; isolation: isolate; }
#steps.pj-on .pj-film { position: absolute; left: 0; right: 0; top: var(--pj-top, 82px); height: var(--pj-fh, 70vh); }
#steps.pj-on .pj-reel { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; width: max-content; height: var(--pj-rh, 100%); transform-origin: 0 0; will-change: transform; }
/* the perforations: the film base with holes that show the stage through */
#steps.pj-on .pj-reel::before, #steps.pj-on .pj-reel::after { content: ""; flex: none; height: var(--pj-spr, 22px); background: var(--pj-base); -webkit-mask: var(--pj-perf) 0 0 / 24px 100% repeat-x; mask: var(--pj-perf) 0 0 / 24px 100% repeat-x; }
#steps.pj-on .pj-strip { flex: 1 1 0; min-height: 0; display: flex; align-items: flex-start; gap: var(--pj-g, 40px); height: auto; overflow: clip; background: var(--pj-base); }
#steps.pj-on .pj-strip > * { flex: none; width: var(--pj-fw, 1200px); }
#steps.pj-on .pj-strip > section.chapter { padding: 12px 0 10px !important; margin: 0; background: none; will-change: opacity, transform; }
#steps.pj-on .chapter > .wrap { width: auto; margin: 0; }
/* a strip of equal frames: every poster takes the tallest one's height (set on wide screens only) */
#steps.pj-on .poster { display: flex; flex-direction: column; min-height: var(--pj-ph, 0px); }
#steps.pj-on .poster > .pv-vis { margin-block: auto; }
/* under each poster, its "What I did" line, like a subtitle burned into the frame */
#steps.pj-on .pv-by.ch-joe { gap: 12px; margin: 10px 0 0; padding: 0 10px; font-size: 15.5px; line-height: 1.45; }
#steps.pj-on .pv-by.ch-joe img { width: 28px; height: 28px; margin-top: 0; }
#steps.pj-on .pv-by.ch-joe span { max-width: 118ch; }
#steps.pj-on .pv-by.ch-joe span::before { display: inline; margin: 0 12px 0 0; }
/* Your turn and the extras live in the side sheet; the poster carries the buttons that open it */
#steps.pj-on .ch-do, #steps.pj-on .pv-mark { display: none; }

/* blank leader before step 1 and after step 8: empty frames and a word on the edge */
#steps.pj-on .pj-lead, #steps.pj-on .pj-tail { position: relative; align-self: stretch; }
.pj-lead::after, .pj-tail::after { content: ""; position: absolute; inset: 12px 0 10px; border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px oklch(1 0 0 / .07); }
.pj-lead span, .pj-tail span { position: absolute; top: 50%; font: 500 var(--t-label)/1 var(--mono); letter-spacing: .32em; text-transform: uppercase; color: var(--on-dark-soft); writing-mode: vertical-rl; white-space: nowrap; }
.pj-lead span { right: 28px; transform: translateY(-50%) rotate(180deg); }
.pj-tail span { left: 28px; transform: translateY(-50%); }

/* the gate: registration marks around the frame in the middle; the lit copy flashes as a poster locks in */
.pj-gate, .pj-gate i { position: absolute; pointer-events: none;
  background:
    linear-gradient(var(--gc) 0 0) 0 0 / 20px 1.5px, linear-gradient(var(--gc) 0 0) 0 0 / 1.5px 20px,
    linear-gradient(var(--gc) 0 0) 100% 0 / 20px 1.5px, linear-gradient(var(--gc) 0 0) 100% 0 / 1.5px 20px,
    linear-gradient(var(--gc) 0 0) 0 100% / 20px 1.5px, linear-gradient(var(--gc) 0 0) 0 100% / 1.5px 20px,
    linear-gradient(var(--gc) 0 0) 100% 100% / 20px 1.5px, linear-gradient(var(--gc) 0 0) 100% 100% / 1.5px 20px;
  background-repeat: no-repeat; }
.pj-gate { z-index: 2; --gc: oklch(0.72 0.016 78 / .55); }
.pj-gate i { inset: 0; --gc: var(--signal); opacity: 0; }
/* the shutter: the picture dims a little while the film advances */
.pj-veil { position: absolute; inset: 0; z-index: 1; background: var(--dark); opacity: 0; pointer-events: none; }
/* the neighbours at the sides: a click moves one step */
.pj-peek { position: absolute; z-index: 3; padding: 0; border: 0; background: none; color: var(--on-dark); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pj-peek[hidden] { display: none; }
.pj-peek-p { left: 0; }
.pj-peek-n { right: 0; }
.pj-peek span { position: absolute; top: 50%; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); background: oklch(0.165 0.008 70 / .86); box-shadow: 0 0 0 1px oklch(1 0 0 / .12); opacity: 0; transform: translateY(-50%); transition: opacity .2s; }
.pj-peek-p span { left: 14px; }
.pj-peek-n span { right: 14px; flex-direction: row-reverse; padding: 6px 6px 6px 12px; }
.pj-peek:hover span, .pj-peek:focus-visible span { opacity: 1; }
.pj-peek svg { flex: none; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: var(--signal); color: var(--ink); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pj-peek b { font: 500 var(--t-label)/1 var(--mono); letter-spacing: .08em; white-space: nowrap; }

/* on the poster: Your turn (and Try it where the step has hands-on extras) */
.pj-acts { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pj-yt, .pj-try { display: inline-flex; align-items: center; justify-content: center; height: 38px; border: 0; border-radius: var(--r-pill); font: 650 15px/1 var(--sans); letter-spacing: -0.005em; white-space: nowrap; transition: background-color .2s, box-shadow .2s, scale .15s; }
.pj-yt { gap: 9px; padding: 0 16px 0 5px; background: var(--signal); color: var(--ink); }
.pj-yt:hover { background: var(--signal-strong); }
.pj-yt i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--signal); }
.pj-yt .ic { width: 15px; height: 15px; stroke-width: 2.6; }
.pj-yt small { font: 500 var(--t-label)/1 var(--mono); letter-spacing: .04em; color: oklch(0.185 0.01 70 / .72); font-variant-numeric: tabular-nums; }
.pj-yt small:empty { display: none; }
.pj-yt.is-done i { background: var(--ink); color: var(--signal); box-shadow: 0 0 0 2px var(--signal-strong); }
.pj-try { padding: 0 16px; background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--ink); }
.pj-try:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.pj-yt:active, .pj-try:active { scale: .97; }

/* ---------- 2b. the ruler: 01 to 08, a yellow playhead that runs with the scroll ---------- */
.pj-stops { margin: 0; padding: 0; list-style: none; }
.pj-stops a { color: inherit; text-decoration: none; }
.pj-stops b { font-weight: 500; }
#steps.pj-on .pj-bar { position: absolute; z-index: 4; left: 50%; bottom: var(--pj-bb, 10px); width: min(1200px, calc(100% - 32px)); height: 50px; translate: -50% 0; display: flex; align-items: center; gap: 26px; }
.pj-now { flex: none; width: 196px; display: flex; flex-direction: column; gap: 7px; margin: 0; }
.pj-count { font: 500 var(--t-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-soft); font-variant-numeric: tabular-nums; }
.pj-count b { font-weight: 500; color: var(--signal); }
.pj-name { overflow: hidden; font-size: 17px; font-weight: 650; line-height: 1.15; letter-spacing: -0.01em; color: var(--on-dark); white-space: nowrap; text-overflow: ellipsis; }
#steps.pj-on .pj-ruler { position: relative; flex: 1; min-width: 0; height: 100%; }
/* the loop (steps 4 to 6), tinted as on the method map */
#steps.pj-on .pj-ruler::before { content: ""; position: absolute; left: calc(37.5% + 4px); width: calc(37.5% - 8px); top: 0; height: 32px; border-radius: 10px; background: oklch(0.86 0.165 92 / .07); box-shadow: inset 0 0 0 1px oklch(0.86 0.165 92 / .13); }
#steps.pj-on .pj-stops { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 32px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
#steps.pj-on .pj-stops li { display: grid; place-items: center; min-width: 0; }
#steps.pj-on .pj-stops a { position: relative; display: grid; place-items: center; min-width: 40px; height: 28px; padding: 0 7px; border-radius: 8px; color: var(--on-dark-soft); font: 500 13px/1 var(--mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; transition: color .2s, background-color .25s, box-shadow .25s; }
#steps.pj-on .pj-stops a::before { content: ""; position: absolute; inset: -8px -4px -18px; }
#steps.pj-on .pj-stops a:hover { color: var(--on-dark); background: var(--dark-3); }
#steps.pj-on .pj-stops a.is-past { color: var(--on-dark-2); }
#steps.pj-on .pj-stops a.is-done { box-shadow: inset 0 0 0 1.5px oklch(0.86 0.165 92 / .55); }
#steps.pj-on .pj-stops a[aria-current="step"] { background: var(--signal); color: var(--ink); box-shadow: none; }
#steps.pj-on .pj-stops a:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
/* each stop's name, above it on hover and keyboard focus */
#steps.pj-on .pj-stops span { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 5; padding: 7px 11px; border-radius: 8px; background: var(--on-dark); color: var(--ink); font: 600 13.5px/1.2 var(--sans); letter-spacing: 0; white-space: nowrap; box-shadow: 0 12px 24px -12px oklch(0 0 0 / .7); opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity .15s, transform .15s; }
#steps.pj-on .pj-stops a:hover span, #steps.pj-on .pj-stops a:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
/* the timecode ticks: one at each stop, three between; a baseline that fills to the playhead */
#steps.pj-on .pj-rail { position: absolute; z-index: 1; left: 0; right: 0; bottom: 1px; height: 14px;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(6.25% - .75px), var(--dark-mute) calc(6.25% - .75px) calc(6.25% + .75px), transparent calc(6.25% + .75px) 12.5%) 0 100% / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--dark-line) 0 1px, transparent 1px 3.125%) 0 100% / 100% 6px no-repeat,
    linear-gradient(var(--dark-line) 0 0) 0 100% / 100% 1px no-repeat; }
#steps.pj-on .pj-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
#steps.pj-on .pj-head { position: absolute; z-index: 3; left: 0; top: 33px; bottom: 0; width: 0; pointer-events: none; will-change: transform; }
#steps.pj-on .pj-head::before { content: ""; position: absolute; left: -1px; top: 4px; bottom: 0; width: 2px; border-radius: 1px; background: var(--signal); }
#steps.pj-on .pj-head::after { content: ""; position: absolute; left: -5px; top: 0; width: 10px; height: 7px; background: var(--signal); clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* back and next */
.pj-nav { flex: none; display: flex; gap: 8px; }
.pj-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--dark-3); color: var(--on-dark); transition: background-color .2s, color .2s, opacity .2s, scale .15s; }
.pj-nav button:hover { background: var(--on-dark); color: var(--ink); }
.pj-nav .pj-next { background: var(--signal); color: var(--ink); }
.pj-nav .pj-next:hover { background: var(--signal-strong); color: var(--ink); }
.pj-nav button:active { scale: .94; }
.pj-nav button:disabled { opacity: .3; cursor: default; background: var(--dark-3); color: var(--on-dark); scale: 1; }
.pj-nav button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.pj-nav svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pj-next.is-end svg { rotate: 90deg; }

/* phones: the ruler under a one-line readout, back and next at its ends; the posters pan up
   through the gate while they dwell (app.js), so nothing is scaled below its size */
@media (max-width: 699px) {
  #steps.pj-on .pj-strip > section.chapter { padding: 10px 0 10px !important; }
  #steps.pj-on .pv-by.ch-joe { margin-top: 12px; padding: 0 4px; font-size: 15px; }
  #steps.pj-on .pv-by.ch-joe img { width: 28px; height: 28px; }
  #steps.pj-on .pj-reel::before, #steps.pj-on .pj-reel::after { -webkit-mask-size: 16px 100%; mask-size: 16px 100%; }
  .pj-lead span, .pj-tail span, .pj-peek, .pj-lead::after, .pj-tail::after { display: none; }
  #steps.pj-on .pj-bar { width: calc(100% - 20px); height: 66px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; grid-template-rows: 16px 40px; column-gap: 8px; row-gap: 10px; }
  .pj-now { grid-column: 1 / -1; width: auto; flex-direction: row; align-items: baseline; gap: 10px; min-width: 0; }
  .pj-name { font-size: 15px; }
  .pj-nav { display: contents; }
  .pj-nav button { width: 40px; height: 40px; grid-row: 2; }
  .pj-prev { grid-column: 1; }
  .pj-next { grid-column: 3; }
  #steps.pj-on .pj-ruler { grid-column: 2; grid-row: 2; height: 40px; }
  #steps.pj-on .pj-ruler::before { height: 26px; top: 0; left: calc(37.5% + 2px); width: calc(37.5% - 4px); }
  #steps.pj-on .pj-stops { height: 26px; }
  #steps.pj-on .pj-stops a { min-width: 0; width: 100%; max-width: 32px; height: 22px; padding: 0; font-size: 11.5px; letter-spacing: 0; border-radius: 6px; }
  #steps.pj-on .pj-stops a::before { inset: -9px -2px -14px; }
  #steps.pj-on .pj-stops span { display: none; }
  #steps.pj-on .pj-head { top: 27px; }
  #steps.pj-on .pj-rail { height: 12px; }
  #steps.pj-on .pv-foot { flex-wrap: wrap; }
  .pj-acts { width: 100%; margin: 4px 0 0; }
  .pj-acts > * { flex: 1; height: 44px; }
}

/* ---------- 2c. stacked: reduced motion and no JS. The ruler is a list of links, the posters
   follow one another, and each keeps its extras and Your turn under it. ---------- */
#steps.pj:not(.pj-on) { padding: clamp(40px, 5vw, 64px) 0 var(--section-y); }
#steps.pj:not(.pj-on) .pj-bar { width: min(var(--wrap), calc(100% - 64px)); margin: 0 auto; }
#steps.pj:not(.pj-on) :is(.pj-now, .pj-nav, .pj-rail, .pj-head) { display: none; }
#steps.pj:not(.pj-on) .pj-stops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
#steps.pj:not(.pj-on) .pj-stops a { display: flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 14px 16px; border-radius: var(--r-s); background: var(--dark-2); box-shadow: inset 0 0 0 1px var(--dark-line); color: var(--on-dark); }
#steps.pj:not(.pj-on) .pj-stops a:hover { box-shadow: inset 0 0 0 1px var(--signal); }
#steps.pj:not(.pj-on) .pj-stops a[aria-current="step"] { box-shadow: inset 0 0 0 1.5px var(--signal); }
#steps.pj:not(.pj-on) .pj-stops b { font: 500 13px/1 var(--mono); letter-spacing: .06em; color: var(--signal); }
#steps.pj:not(.pj-on) .pj-stops span { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
#steps.pj:not(.pj-on) .pj-strip { display: block; height: auto; }
#steps.pj:not(.pj-on) .pj-strip > section { padding: clamp(40px, 5vw, 64px) 0 0 !important; }
@media (max-width: 699px) {
  #steps.pj:not(.pj-on) .pj-bar { width: calc(100% - 32px); }
  #steps.pj:not(.pj-on) .pj-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #steps.pj:not(.pj-on) .pj-stops a { min-height: 44px; padding: 12px; gap: 8px; }
  #steps.pj:not(.pj-on) .pj-stops span { font-size: 14px; }
}

/* =========================================================
   3. the side sheet: Your turn and a step's hands-on extras (a modal <dialog>: focus stays in
   it, Esc closes it, the page under it does not scroll; app.js stops the wheel, touch and keys)
   ========================================================= */
.pj-sheet { position: fixed; inset: 0 0 0 auto; width: min(560px, calc(100vw - 20px)); height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: var(--r-xl) 0 0 var(--r-xl); background: var(--paper); color: var(--text); box-shadow: -40px 0 80px -40px oklch(0 0 0 / .7); overflow: hidden; }
.pj-sheet[open] { display: flex; flex-direction: column; }
.pj-sheet::backdrop { background: oklch(0.12 0.008 70 / .62); opacity: 0; transition: opacity .3s; }
.pj-sheet.is-in::backdrop { opacity: 1; }
.pj-sh-top { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; padding: 26px 22px 20px 30px; border-bottom: 1px solid var(--line); }
.pj-sh-k { grid-column: 1; margin: 0 0 10px; font: 500 var(--t-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--signal-ink); font-variant-numeric: tabular-nums; }
.pj-sh-t { grid-column: 1; margin: 0; font-family: var(--display); font-size: 32px; font-weight: 500; line-height: 1.06; letter-spacing: -0.022em; color: var(--ink); }
.pj-sh-t:focus, .pj-sec-t:focus { outline: none; }
.pj-sh-x { grid-column: 2; grid-row: 1 / 3; align-self: center; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--paper-2); color: var(--ink); transition: background-color .2s, scale .15s; }
.pj-sh-x:hover { background: var(--line); }
.pj-sh-x:active { scale: .94; }
.pj-sh-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.pj-sh-body { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 22px 30px 30px; }
.pj-sec + .pj-sec { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.pj-sec-t { margin: 0; font-family: var(--display); font-size: 23px; font-weight: 560; line-height: 1.15; letter-spacing: -0.012em; color: var(--ink); }
.pj-sec-n { margin: 6px 0 16px; font: 500 var(--t-label)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.pj-sheet .ch-act { display: block; padding: 8px 18px 16px; }
.pj-sheet .tiles { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 0 12px; }
.pj-sheet .tiles li + li { border-top: 1px solid var(--line); }
.pj-sheet .tiles label { padding: 12px 0; }
.pj-sheet .ch-act > .drawer { margin: 0 0 10px; }
.pj-sheet .ch-act > .drawer:last-child { margin-bottom: 0; }
.pj-sheet .pv-annex { margin: 0; }
.pj-sheet .pv-annex + .pv-annex, .pj-sheet .pv-annex + .seam-pop { margin-top: 16px; }
.pj-sheet .vague .flip-grid { grid-template-columns: minmax(0, 1fr); }
.pj-sheet .pv-annex.vague .flip { min-height: 0; }
.pj-sheet .pv-annex.craft { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; }
.pj-sheet .seam-pop.is-open { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; }
.pj-sh-foot { flex: none; padding: 14px 22px 18px 30px; border-top: 1px solid var(--line); background: var(--paper); }
.pj-sh-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 8px 8px 8px 22px; border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--on-dark); text-align: left; transition: background-color .2s, scale .15s; }
.pj-sh-next:hover { background: var(--dark-3); }
.pj-sh-next:active { scale: .98; }
.pj-sh-next span { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pj-sh-next small { font: 500 var(--t-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--signal); }
.pj-sh-next b { overflow: hidden; font-size: 16px; font-weight: 650; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.pj-sh-next i { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--signal); color: var(--ink); }
.pj-sh-next svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 699px) {
  .pj-sheet { width: calc(100vw - 12px); border-radius: var(--r-l) 0 0 var(--r-l); }
  .pj-sh-top { padding: 20px 14px 16px 20px; }
  .pj-sh-t { font-size: 27px; }
  .pj-sh-body { padding: 20px 14px 24px 20px; }
  .pj-sh-foot { padding: 12px 14px 14px 20px; }
  .pj-sheet .ch-act { padding: 6px 14px 14px; }
}

/* =========================================================
   4. the self-check line: before you watch, the AI checks
   ========================================================= */
.pv-check { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 18px 0 0; }
.poster .pv-check + .pv-foot { margin-top: 14px; }
.pv-check-k { display: flex; align-items: center; gap: 9px; margin: 0; font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--signal-ink); white-space: nowrap; }
.pv-check-k .ic { width: 20px; height: 20px; padding: 3px; border-radius: 6px; background: var(--signal-soft); color: var(--signal-ink); stroke-width: 2; }
.pv-check ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin: 0; padding: 0; list-style: none; }
.pv-check li { position: relative; display: inline-flex; align-items: center; gap: 8px; padding-left: 24px; font-size: 14.5px; font-weight: 550; line-height: 1.25; color: var(--ink); white-space: nowrap; }
.pv-check li::before { content: ""; position: absolute; left: 0; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; border-radius: 50%; background: var(--ink); }
.pv-check li::after { content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 8px; margin-top: -6px; border: solid var(--signal); border-width: 0 2px 2px 0; rotate: 40deg; }
/* a contact sheet: stills at the key moments, one flagged */
.pv-cs { display: inline-grid; grid-template-columns: repeat(3, 7px); grid-auto-rows: 5px; gap: 1.5px; padding: 2px; border-radius: 3px; background: var(--ink); }
.pv-cs i { border-radius: 1px; background: var(--on-dark-soft); }
.pv-cs i:nth-child(5) { background: var(--signal); }
@media (max-width: 699px) {
  .pv-check { gap: 8px; margin-top: 16px; }
  .pv-check ul { gap: 6px 16px; }
  .pv-check li { font-size: 14px; }
}

/* =========================================================
   5. posters in motion
   ========================================================= */
.poster { --m-ease: cubic-bezier(.2, 0, 0, 1); --m-pop: cubic-bezier(.3, 1.5, .5, 1); }
.m-hold, .m-hold *, .m-hold *::before, .m-hold *::after { animation-play-state: paused !important; }

/* resting geometry the motion needs (also the static final state) */
.sv1 { --s1-gap: 44px; }
.sv1 .s1-ev::before { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px var(--card); opacity: 0; pointer-events: none; }
.sv1 .s1-l .s1-ev::before { left: 100%; margin-left: -4px; }
.sv1 .s1-r .s1-ev::before { right: 100%; margin-right: -4px; }
.sv1 .s1-l .s1-ev::after { transform-origin: 0 50%; }
.sv1 .s1-r .s1-ev::after { transform-origin: 100% 50%; }
.s1-l .s1-ev:nth-child(1) { --d: .5s; --k: 0; } .s1-r .s1-ev:nth-child(1) { --d: .65s; --k: 1; }
.s1-l .s1-ev:nth-child(2) { --d: .8s; --k: 2; } .s1-r .s1-ev:nth-child(2) { --d: .95s; --k: 3; }
.s1-l .s1-ev:nth-child(3) { --d: 1.1s; --k: 4; } .s1-r .s1-ev:nth-child(3) { --d: 1.25s; --k: 5; }
@media (max-width: 1099px) { .sv1 { --s1-gap: 32px; } }
@media (max-width: 899px) { .sv1 .s1-ev::before { display: none; } }

/* step 2: the playhead rides a full-width carrier (so it can move by transform), the played part lights */
.sv2 .s2-head { left: 0; right: 0; width: auto; background: none; animation: none; }
.sv2 .s2-head::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; border-radius: 1px; background: var(--signal); }
.s2-played { position: absolute; inset: 0; overflow: hidden; transform: translateX(-100%); pointer-events: none; }
.s2-played > span { position: absolute; inset: 0; transform: translateX(100%); }
.sv2 .s2-played .bt-wave rect { fill: var(--signal); opacity: .9; }
.sv2 .s2-word { animation: none; }
.sv2 .s2-word::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--signal); opacity: 0; pointer-events: none; }

/* step 4: the played part of the player bar */
.sv4 .rv-track::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 78%; border-radius: 3px; background: oklch(0.86 0.165 92 / .5); transform-origin: 0 50%; }
.sv4 .pin:nth-of-type(1), .sv4 .rv-notes li:nth-child(1) { --k: 0; } .sv4 .pin:nth-of-type(2), .sv4 .rv-notes li:nth-child(2) { --k: 1; }
.sv4 .pin:nth-of-type(3), .sv4 .rv-notes li:nth-child(3) { --k: 2; } .sv4 .pin:nth-of-type(4), .sv4 .rv-notes li:nth-child(4) { --k: 3; }
.sv4 .pin:nth-of-type(5), .sv4 .rv-notes li:nth-child(5) { --k: 4; } .sv4 .pin:nth-of-type(6), .sv4 .rv-notes li:nth-child(6) { --k: 5; }

/* step 5: the rail fills round by round; a thin bar on Next round while the rounds play themselves */
.sv5 .ladder-tabs::after { content: ""; position: absolute; left: 7px; top: 14px; bottom: 14px; width: 0; margin-left: -.5px; border-left: 2px solid var(--signal); transform-origin: 50% 0; transform: scaleY(var(--lp, 0)); transition: transform .5s cubic-bezier(.2, 0, 0, 1); pointer-events: none; }
.sv5 .ladder-nav .btn { position: relative; overflow: hidden; }
.s5-auto { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 1px; background: var(--ink); opacity: 0; transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }
.is-auto .s5-auto { opacity: .4; }
@media (max-width: 899px) { .sv5 .ladder-tabs::after { display: none; } }

/* step 6: the template's tokens (placed on the flow by steps-motion.js) */
.s6-tok { position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 3px; background: var(--signal); box-shadow: 0 0 0 3px var(--card); offset-rotate: 0deg; offset-anchor: center; opacity: 0; pointer-events: none; }
.sv6 .s6-spec li:nth-child(1), .sv6 .s6-stack figure:nth-child(1) { --k: 0; } .sv6 .s6-spec li:nth-child(2), .sv6 .s6-stack figure:nth-child(2) { --k: 1; }
.sv6 .s6-spec li:nth-child(3), .sv6 .s6-stack figure:nth-child(3) { --k: 2; } .sv6 .s6-spec li:nth-child(4) { --k: 3; }
.s6-tok:nth-of-type(2) { --k: 0; } .s6-tok:nth-of-type(3) { --k: 1; } .s6-tok:nth-of-type(4) { --k: 2; }
@media (max-width: 700px) { .s6-tok { display: none; } }

/* step 7: a playhead that sweeps the whole timeline, with the film time on it */
.sv7 .tl-rows { position: relative; --tl-x: 86px; }
.s7-sweep { position: absolute; z-index: 3; top: -14px; bottom: -6px; left: var(--tl-x); right: 0; opacity: 0; pointer-events: none; }
.s7-sweep::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 0; width: 2px; border-radius: 1px; background: var(--signal); }
.s7-sweep b { position: absolute; left: 0; top: -6px; padding: 3px 6px; border-radius: 5px; background: var(--signal); color: var(--ink); font: 500 11px/1.1 var(--mono); font-variant-numeric: tabular-nums; transform: translateX(-50%); }
.sv7.tl-audio .s7-sweep { visibility: hidden; }
@media (max-width: 620px) { .sv7 .tl-rows { --tl-x: 0px; } }

/* step 8: the YouTube player plays; the LinkedIn lines write themselves */
.sv8 .s8-yt .s8-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--signal); transform-origin: 0 50%; transform: scaleX(0); }
.sv8 .s8-line { transform-origin: 0 50%; }

/* the self-check ticks: when each poster reaches them */
#step-3 .poster { --m-check: 1.5s; }
#step-4 .poster { --m-check: 3.6s; }
#step-5 .poster { --m-check: .6s; }
#step-6 .poster { --m-check: 3.1s; }
#step-7 .poster { --m-check: 1.2s; }
.pv-check li:nth-child(1) { --k: 0; } .pv-check li:nth-child(2) { --k: 1; } .pv-check li:nth-child(3) { --k: 2; } .pv-check li:nth-child(4) { --k: 3; }
.pv-cs i:nth-child(1) { --c: 0; } .pv-cs i:nth-child(2) { --c: 1; } .pv-cs i:nth-child(3) { --c: 2; } .pv-cs i:nth-child(4) { --c: 3; } .pv-cs i:nth-child(5) { --c: 4; } .pv-cs i:nth-child(6) { --c: 5; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes m-up { from { opacity: 0; transform: translateY(14px); } }
  @keyframes m-in-l { from { opacity: 0; transform: translateX(-20px); } }
  @keyframes m-in-r { from { opacity: 0; transform: translateX(20px); } }
  @keyframes m-fade { from { opacity: 0; } }
  @keyframes m-draw { from { transform: scaleX(0); } }
  @keyframes m-pop { from { opacity: 0; transform: scale(.3); } }
  @keyframes m-drop { 0% { opacity: 0; transform: translateY(-26px) scale(.5); } 55% { opacity: 1; transform: translateY(3px) scale(1.08); } 100% { opacity: 1; transform: none; } }

  /* 1. the brief first, then each file slides in and draws its line to the brief;
        then, again and again, a dot runs from each file into the brief */
  .m-armed .sv1 .s1-brief, .m-armed .sv1 .s1-ev { opacity: 0; }
  .m-armed .sv1 .s1-ev::after { transform: scaleX(0); }
  .m-play .sv1 .s1-brief { animation: m-up .6s var(--m-ease) both; }
  .m-play .sv1 .s1-brief dl > div, .m-play .sv1 .s1-folder { animation: m-up .5s var(--m-ease) both; }
  .m-play .sv1 .s1-brief dl > div:nth-child(2) { animation-delay: .12s; }
  .m-play .sv1 .s1-brief dl > div:nth-child(3) { animation-delay: .24s; }
  .m-play .sv1 .s1-folder { animation-delay: .36s; }
  .m-play .sv1 .s1-l .s1-ev { animation: m-in-l .55s var(--m-ease) var(--d) both; }
  .m-play .sv1 .s1-r .s1-ev { animation: m-in-r .55s var(--m-ease) var(--d) both; }
  .m-play .sv1 .s1-ev::after { animation: m-draw .45s var(--m-ease) calc(var(--d) + .3s) both; }
  .m-play .sv1 .s1-l .s1-ev::before { animation: s1-feed-l 4.2s linear calc(2.1s + var(--k) * .7s) infinite both; }
  .m-play .sv1 .s1-r .s1-ev::before { animation: s1-feed-r 4.2s linear calc(2.1s + var(--k) * .7s) infinite both; }
  @keyframes s1-feed-l { 0% { opacity: 0; transform: translateX(0); } 5% { opacity: 1; } 24% { opacity: 1; transform: translateX(var(--s1-gap)); } 30%, 100% { opacity: 0; transform: translateX(var(--s1-gap)); } }
  @keyframes s1-feed-r { 0% { opacity: 0; transform: translateX(0); } 5% { opacity: 1; } 24% { opacity: 1; transform: translateX(calc(var(--s1-gap) * -1)); } 30%, 100% { opacity: 0; transform: translateX(calc(var(--s1-gap) * -1)); } }

  /* 2. the playhead runs through the waveform; each phrase lights with its picture */
  .m-play .sv2 .s2-head { animation: s2-run 8s linear infinite; }
  .m-play .sv2 .s2-played { animation: s2-out 8s linear infinite; }
  .m-play .sv2 .s2-played > span { animation: s2-in 8s linear infinite; }
  .m-play .sv2 .s2-beats li { animation: s2-dim 8s linear calc(var(--i) * 2s - 8s) infinite; }
  .m-play .sv2 .s2-word::before { animation: s2-ring 8s linear calc(var(--i) * 2s - 8s) infinite; }
  .m-play .sv2 .s2-beats img { animation: s2-lift 8s linear calc(var(--i) * 2s - 8s) infinite; }
  @keyframes s2-run { from { transform: translateX(0); } to { transform: translateX(100%); } }
  @keyframes s2-out { from { transform: translateX(-100%); } to { transform: translateX(0); } }
  @keyframes s2-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @keyframes s2-dim { 0%, 24% { opacity: 1; } 27%, 97% { opacity: .45; } 100% { opacity: 1; } }
  @keyframes s2-ring { 0%, 23% { opacity: 1; } 26%, 98% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes s2-lift { 0% { transform: translateY(-5px); } 23% { transform: translateY(-5px); } 27%, 97% { transform: none; } 100% { transform: translateY(-5px); } }

  /* 3. the strip runs; the verdicts land like stamps */
  .m-armed .sv3 .fs-frames { animation-play-state: paused; }
  .m-armed .sv3 .stamp { opacity: 0; }
  .sv3 .stamp { --r: 0deg; } .sv3 .stamp.no { --r: -1.5deg; }
  .m-play .sv3 .filmstrip { animation: m-in-r .7s var(--m-ease) both; }
  .m-play .sv3 .stamp { animation: m-stamp .45s var(--m-pop) both; }
  .m-play .sv3 .stamp:nth-child(1) { animation-delay: .4s; }
  .m-play .sv3 .stamp:nth-child(2) { animation-delay: .62s; }
  .m-play .sv3 .stamp:nth-child(3) { animation-delay: .9s; }
  .m-play .sv3 .stamp:nth-child(4) { animation-delay: 1.12s; }
  @keyframes m-stamp { from { opacity: 0; transform: scale(1.45) rotate(var(--r)); } to { opacity: 1; transform: scale(1) rotate(var(--r)); } }

  /* 4. the draft plays to 0:04 and stops; the pins drop in one by one, each note with its pin */
  .m-armed .sv4 .rv-track::before { transform: scaleX(0); }
  .m-armed .sv4 .rv-track i, .m-armed .sv4 .pin, .m-armed .sv4 .rv-notes li, .m-armed .sv4 .rv-keep { opacity: 0; }
  .m-play .sv4 .rv-track::before { animation: m-draw 1.1s cubic-bezier(.45, 0, .55, 1) both; }
  .m-play .sv4 .rv-track i { animation: m-pop .35s var(--m-pop) 1.02s both; }
  .m-play .sv4 .pin { animation: m-drop .55s var(--m-ease) calc(1.3s + var(--k) * .3s) both; }
  .m-play .sv4 .rv-notes li { animation: m-in-r .45s var(--m-ease) calc(1.42s + var(--k) * .3s) both; }
  .m-play .sv4 .rv-keep { animation: m-up .45s var(--m-ease) 3.2s both; }

  /* 5. the rounds play themselves (steps-motion.js); each new note slides in */
  .sv5 .ln-text.is-in { animation: m-up .4s var(--m-ease) both; }

  /* 6. the lock clicks, the template is read (type, colour, spacing, motion) and carried
        along the lines to every later section, which then takes it */
  .m-armed .sv6 .s6-spec li { opacity: .3; }
  .m-armed .sv6 .s6-spec li::before { transform: scale(0); }
  .m-armed .sv6 .s6-stack img, .m-armed .sv6 .s6-stack figcaption { opacity: .28; }
  .m-play .sv6 .s6-label .ic { animation: s6-lock .5s var(--m-pop) .15s both; }
  .m-play .sv6 .s6-spec li { animation: s6-take .3s ease-out calc(.9s + var(--k) * .14s) both; }
  .m-play .sv6 .s6-spec li::before { animation: m-pop .35s var(--m-pop) calc(.9s + var(--k) * .14s) both; }
  .m-play .sv6 .s6-tok { animation: s6-in 5s linear .3s infinite both; }
  .m-play .sv6 .s6-tok + .s6-tok { animation-name: s6-out; animation-delay: calc(.3s + var(--k) * .12s); }
  .m-play .sv6 .s6-stack img, .m-play .sv6 .s6-stack figcaption { animation: s6-take .5s var(--m-ease) calc(2.6s + var(--k) * .14s) both; }
  @keyframes s6-lock { from { transform: translateY(-5px) scale(1.25); } }
  @keyframes s6-take { from { opacity: .28; } }
  @keyframes s6-in { 0% { offset-distance: 0%; opacity: 0; } 3% { opacity: 1; } 14% { offset-distance: 100%; opacity: 1; } 17%, 100% { offset-distance: 100%; opacity: 0; } }
  @keyframes s6-out { 0%, 31% { offset-distance: 0%; opacity: 0; } 33% { offset-distance: 0%; opacity: 1; } 46% { offset-distance: 100%; opacity: 1; } 50%, 100% { offset-distance: 100%; opacity: 0; } }

  /* 7. the rows come in, then a playhead sweeps the film; the glitch flag blinks as it passes 0:10 */
  .m-armed .sv7 .tl-row, .m-armed .sv7 .cue-buttons button { opacity: 0; }
  .m-play .sv7 .tl-row { animation: m-up .5s var(--m-ease) both; }
  .m-play .sv7 .tl-row:nth-child(2) { animation-delay: .12s; }
  .m-play .sv7 .tl-row:nth-child(3) { animation-delay: .24s; }
  .m-play .sv7 .cue-buttons button { animation: m-up .45s var(--m-ease) .45s both; }
  .m-play .sv7 .cue-buttons button:nth-child(2) { animation-delay: .5s; }
  .m-play .sv7 .cue-buttons button:nth-child(3) { animation-delay: .55s; }
  .m-play .sv7 .cue-buttons button:nth-child(4) { animation-delay: .6s; }
  .m-play .sv7 .cue-buttons button:nth-child(5) { animation-delay: .65s; }
  .m-play .sv7 .cue-buttons button:nth-child(6) { animation-delay: .7s; }
  .m-play .sv7 .s7-sweep { opacity: 1; animation: s7-sweep 10s linear .8s infinite both; }
  .m-play .sv7 .tl-seam { animation: s7-blink 10s linear .8s infinite both; }
  .m-play .sv7 .tl-seam span { animation: s7-flag 10s ease-out .8s infinite both; }
  @keyframes s7-sweep { from { transform: translateX(0); } to { transform: translateX(100%); } }
  @keyframes s7-blink { 0%, 10.8% { opacity: 1; } 11.7% { opacity: .15; } 12.9% { opacity: 1; } 14.1% { opacity: .15; } 15.4%, 100% { opacity: 1; } }
  @keyframes s7-flag { 0%, 10.8% { transform: translateX(-50%) scale(1); } 12.4% { transform: translateX(-50%) scale(1.3); } 15%, 100% { transform: translateX(-50%) scale(1); } }

  /* 8. the three previews come up one by one; Instagram's crop closes in; the player plays */
  .m-armed .sv8 > figure { opacity: 0; }
  .m-play .sv8 > figure { animation: m-up .6s var(--m-ease) both; }
  .m-play .sv8 > figure:nth-child(2) { animation-delay: .25s; }
  .m-play .sv8 > figure:nth-child(3) { animation-delay: .5s; }
  .m-play .sv8 .s8-crop { animation: s8-crop .8s var(--m-ease) 1s both; }
  .m-play .sv8 .s8-line { animation: m-draw .5s var(--m-ease) .95s both; }
  .m-play .sv8 .s8-line.short { animation-delay: 1.08s; }
  .m-play .sv8 .s8-yt .s8-frame::after { animation: s8-play 7s linear 1.2s infinite both; }
  @keyframes s8-crop { from { opacity: 0; transform: scale(1.35); } }
  @keyframes s8-play { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* 3 to 7: the contact sheet fills, then each check is ticked */
  .m-armed .pv-cs i, .m-armed .pv-check li::after { opacity: 0; }
  .m-armed .pv-check li::before { transform: scale(0); }
  .m-play .pv-cs i { animation: m-fade .18s linear calc(var(--m-check, 1s) + var(--c) * .07s) both; }
  .m-play .pv-check li::before { animation: m-pop .35s var(--m-pop) calc(var(--m-check, 1s) + .45s + var(--k) * .2s) both; }
  .m-play .pv-check li::after { animation: m-fade .2s linear calc(var(--m-check, 1s) + .58s + var(--k) * .2s) both; }
}

/* every poster: what stays yours with any model, and what a better model speeds up (the page's spine) */
.pv-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.pv-lanes p { margin: 0; display: grid; gap: 4px; padding: 11px 14px 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }
.pv-lanes b { display: inline-flex; align-items: center; gap: 7px; font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pv-lanes b .ic { width: 14px; height: 14px; flex: none; }
.pv-stay { background: var(--paper-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.pv-stay b { color: var(--soft); }
.pv-fast { background: color-mix(in oklch, var(--signal) 16%, var(--card)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--signal) 55%, transparent); }
.pv-fast b { color: var(--signal-ink); }
@media (max-width: 760px) { .pv-lanes { grid-template-columns: 1fr; gap: 8px; } .pv-lanes p { font-size: 14px; } }
.pv-lanes span { text-wrap: pretty; }

/* step 5: the last frame is not a platform, it is the Skill the video leaves behind */
.s8-md { position: relative; padding: 16px 16px 14px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), 0 18px 34px -24px oklch(0.185 0.01 70 / .55); }
.s8-md::before { content: ""; position: absolute; inset: 7px -7px -7px 7px; z-index: -1; border-radius: 14px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); }
.s8-file { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 500 13px/1 var(--mono); color: var(--ink); }
.s8-file .ic { width: 16px; height: 16px; color: var(--signal-ink); }
.s8-md ol { margin: 0; padding: 0; list-style: none; counter-reset: s8; display: grid; gap: 8px; }
.s8-md li { counter-increment: s8; display: grid; grid-template-columns: 22px 1fr; font-size: 14.5px; line-height: 1.35; font-weight: 560; color: var(--ink); }
.s8-md li::before { content: counter(s8, decimal-leading-zero); font: 500 11px/1.8 var(--mono); color: var(--signal-ink); }
.s8-next { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 0; padding: 9px 12px; border-radius: var(--r-pill); background: var(--signal); color: var(--ink); font: 650 13.5px/1 var(--sans, inherit); }
.s8-next .ic { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .m-armed .sv8 .s8-md li, .m-armed .sv8 .s8-next { opacity: 0; }
  .m-play .sv8 .s8-md li { animation: m-up .45s var(--m-ease) both; }
  .m-play .sv8 .s8-md li:nth-child(1) { animation-delay: 1.1s; } .m-play .sv8 .s8-md li:nth-child(2) { animation-delay: 1.3s; } .m-play .sv8 .s8-md li:nth-child(3) { animation-delay: 1.5s; }
  .m-play .sv8 .s8-next { animation: m-up .5s var(--m-ease) 1.8s both; }
}
@media (max-width: 980px) { .sv8 .s8-skill { grid-column: 1 / -1; } }

/* phones: the projector gets the whole screen. The nav pill steps away inside it (the ruler already says
   which step), and the ruler drops its "Step n of 5" line (the lit stop is the step). */
@media (max-width: 699px) {
  .nav { transition: translate .35s cubic-bezier(.2, .7, .2, 1), opacity .25s; }
  .in-pj .nav { translate: 0 -120%; opacity: 0; pointer-events: none; }
  #steps.pj-on .pj-bar { height: 44px; grid-template-rows: 44px; row-gap: 0; }
  #steps.pj-on .pj-now { display: none; }
  #steps.pj-on .pj-ruler { grid-row: 1; height: 44px; }
  #steps.pj-on .pj-nav button { grid-row: 1; }
}
/* phones, step 1: the six files as a compact 3 x 2 of pictures with one short label */
@media (max-width: 699px) {
  .sv1 .s1-ev { padding: 5px; gap: 5px; }
  .sv1 .s1-ev img { width: 100%; aspect-ratio: 4 / 3; }
  .sv1 .s1-ev figcaption { font-size: 0; line-height: 1.2; }
  .sv1 .s1-ev figcaption b { font-size: 12.5px; }
  /* step 5: the YouTube card whole, then Instagram and the Skill side by side */
  .sv8 { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px 12px; }
  .sv8 .s8-yt { grid-column: 1 / -1; }
  .sv8 .s8-skill { grid-column: 2; }
  .sv8 .s8-ig figcaption span { display: none; }
  .s8-md { padding: 12px 12px 10px; }
  .s8-md li { font-size: 13px; grid-template-columns: 18px 1fr; }
  .s8-next { font-size: 12px; padding: 8px 10px; }
  .sv8 .s8-skill figcaption span { display: none; }
}
#steps.pj-on .pj-ruler::before { content: none; }

/* Your turn reads as a button: a pen (not a done-check), an arrow that nudges, a soft pulse around it */
.pj-yt { position: relative; height: 42px; gap: 10px; padding: 0 16px 0 6px; font-size: 15.5px; cursor: pointer; box-shadow: 0 6px 18px -8px oklch(0.55 0.14 85 / .8); }
.pj-yt:hover { translate: 0 -1px; box-shadow: 0 10px 24px -10px oklch(0.55 0.14 85 / .9); }
.pj-yt i { width: 30px; height: 30px; }
.pj-yt .pj-go { display: inline-block; font-weight: 700; margin-left: -2px; }
.pj-yt::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; box-shadow: 0 0 0 2px var(--signal); opacity: 0; pointer-events: none; }
.pj-try { height: 42px; cursor: pointer; }
.pj-try::after { content: " →"; white-space: pre; }
@media (prefers-reduced-motion: no-preference) {
  .step.is-active .pj-yt::after, .pj-yt::after { animation: pj-ring 2.6s cubic-bezier(.2, .7, .2, 1) 1s infinite; }
  .pj-yt .pj-go { animation: pj-nudge 2.6s ease-in-out 1s infinite; }
  .pj-yt.is-done::after, .pj-yt.is-done .pj-go { animation: none; }
}
@keyframes pj-ring { 0% { opacity: .9; inset: -2px; } 70%, 100% { opacity: 0; inset: -10px; } }
@keyframes pj-nudge { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 4px 0; } }