/* ============================================================
   04 — Interactive workflow builder (dark showpiece)
   All selectors scoped under .builder
   ============================================================ */

.builder {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 var(--border-on-dark), inset 0 -1px 0 var(--border-on-dark);

  /* local palette, composed from tokens only */
  --b-panel:      color-mix(in oklab, var(--ink-800) 58%, transparent);
  --b-panel-2:    color-mix(in oklab, var(--ink-800) 40%, transparent);
  --b-recess:     color-mix(in oklab, var(--ink-950) 66%, transparent);
  --b-line:       var(--border-on-dark);
  --b-line-2:     color-mix(in oklab, var(--text-on-dark) 20%, transparent);
  --b-chip:       color-mix(in oklab, var(--text-on-dark) 5%, transparent);
  --b-chip-hover: color-mix(in oklab, var(--text-on-dark) 11%, transparent);
  --b-chip-fg:    color-mix(in oklab, var(--text-on-dark) 82%, transparent);
  --b-sel:        color-mix(in oklab, var(--violet-500) 30%, transparent);
  --b-sel-line:   color-mix(in oklab, var(--violet-400) 66%, transparent);

  /* focus ring gap matches the glass panel it lands on, not pure black,
     and it is composed onto each control's own shadow rather than replacing it */
  --b-ring:
    0 0 0 2px color-mix(in oklab, var(--ink-800) 58%, var(--ink-950)),
    0 0 0 4px var(--violet-300);
  --focus-ring: var(--b-ring);
}

/* off-screen symbol sprite */
.builder__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- ambient depth: concentric rings, not blur blobs ---------- */
.builder__aura {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.builder__aura::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(
      circle at 16% 30%,
      transparent 0 var(--s-16),
      color-mix(in oklab, var(--violet-300) 26%, transparent) var(--s-16) calc(var(--s-16) + 1px)
    );
  -webkit-mask-image: radial-gradient(circle at 16% 30%, var(--text-on-dark), transparent 66%);
          mask-image: radial-gradient(circle at 16% 30%, var(--text-on-dark), transparent 66%);
  opacity: .5;
}
.builder__aura::after {
  content: "";
  position: absolute;
  inset-block-start: -22%;
  inset-inline-start: -12%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: var(--r-pill);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--violet-600) 66%, transparent), transparent 100%);
  opacity: .55;
}

/* grain reads as film on a dark ground, not as dirt */
.builder.grain::before {
  z-index: 1;
  mix-blend-mode: screen;
  opacity: .14;
}

.builder__inner {
  position: relative;
  z-index: 2;
}

/* same head-to-content gap 03 and 06 use */
.builder .section-head {
  margin-bottom: clamp(var(--s-10), 4vw, var(--s-16));
}

/* ---------- layout ----------
   Small screens: the payoff (the plain-English rule) sits ABOVE the controls,
   so every toggle has visible feedback without scrolling. */
.builder__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "payoff"
    "panel"
    "preview"
    "code";
}
.builder__payoff   { grid-area: payoff; }
.builder__panel    { grid-area: panel; }
.builder__preview  { grid-area: preview; }
.builder__codewrap { grid-area: code; }

/* Desktop: controls own the left column and the rule they generate sits
   directly under them; the human sentence and the visual outcome own the
   right. Both columns terminate on the same baseline — no dead surface. */
@media (min-width: 1024px) {
  .builder__grid {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    grid-template-areas:
      "panel payoff"
      "panel preview"
      "code  preview";
    gap: var(--s-8);
  }
  .builder__payoff { align-self: start; }
  .builder__panel { display: flex; flex-direction: column; }
  /* the schedule control pins to the bottom edge of the glass */
  .builder__panel .builder__field:last-child {
    margin-top: auto;
    padding-top: var(--s-8);
  }
  .builder__codewrap { display: flex; flex-direction: column; }
  .builder__codewrap .builder__code { flex: 1 1 auto; }
}

/* ---------- the payoff: type on the ground, no slab ---------- */
.builder__payoff { min-width: 0; }

.builder__phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--b-line);
}
.builder__ptitle {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--lh-normal);
  color: var(--text-on-dark-muted);
}
.builder__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--violet-300);
  background: color-mix(in oklab, var(--violet-500) 14%, transparent);
  box-shadow: inset 0 0 0 1px var(--b-line);
}
.builder__pulse {
  flex: none;
  width: var(--s-2);
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: var(--mint-500);
  animation: builder-pulse calc(var(--dur-slower) * 3) var(--ease-in-out) infinite;
}
.builder__pulse.is-paused { animation-play-state: paused; }
@keyframes builder-pulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .4; transform: scale(.72); }
}

/* the emotional centre of the section — it outranks every label around it */
.builder__sentence {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-dark);
  text-wrap: pretty;
}
.builder__em {
  font-weight: var(--fw-semibold);
  background-image: linear-gradient(
    color-mix(in oklab, var(--violet-400) 78%, transparent),
    color-mix(in oklab, var(--violet-400) 78%, transparent)
  );
  background-size: 100% 0.08em;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 0.06em;
}

.builder__stat {
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-on-dark-muted);
  background: color-mix(in oklab, var(--mint-500) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mint-500) 26%, transparent);
}
.builder__statnum {
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
}

/* ---------- surfaces: glass controls vs recessed screen ---------- */
.builder__panel,
.builder__preview {
  border-radius: var(--r-xl);
  padding: clamp(var(--s-5), 2.8vw, var(--s-8));
  min-width: 0;
}
.builder__panel {
  background: var(--b-panel);
  box-shadow:
    inset 0 0 0 1px var(--b-line),
    inset 0 1px 0 color-mix(in oklab, var(--text-on-dark) 10%, transparent);
}
@supports (backdrop-filter: blur(1px)) {
  .builder__panel { backdrop-filter: blur(var(--s-3)); }
}
.builder__preview {
  background: var(--b-recess);
  box-shadow:
    inset 0 0 0 1px var(--b-line),
    inset 0 var(--s-2) var(--s-8) calc(-1 * var(--s-5)) var(--ink-950);
  /* the output grid sizes itself against this surface, not the viewport */
  container: bpv / inline-size;
}

/* ---------- control fields ---------- */
.builder__field + .builder__field { margin-top: var(--s-8); }

.builder__flabel {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin-bottom: var(--s-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--lh-normal);
  color: var(--text-on-dark);
}
.builder__hint {
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--text-on-dark-muted);
}

/* ---------- chips ---------- */
.builder__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.builder__chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: calc(var(--s-10) + var(--s-1)); /* 44px minimum touch target */
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-normal);
  line-height: var(--lh-snug);
  text-align: left;
  color: var(--b-chip-fg);
  background: var(--b-chip);
  box-shadow: inset 0 0 0 1px var(--b-line);
  transition:
    transform var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out);
}
.builder__chip-icon {
  flex: none;
  width: var(--s-5);
  height: var(--s-5);
  opacity: .82;
  transition: opacity var(--dur) var(--ease-out);
}

.builder__chip:hover {
  background: var(--b-chip-hover);
  color: var(--text-on-dark);
  transform: translateY(-1px);
}
.builder__chip[aria-checked="true"],
.builder__chip[aria-pressed="true"] {
  color: var(--text-on-dark);
  background: var(--b-sel);
  box-shadow: inset 0 0 0 1px var(--b-sel-line), var(--sh-accent);
}
.builder__chip[aria-checked="true"] .builder__chip-icon,
.builder__chip[aria-pressed="true"] .builder__chip-icon { opacity: 1; }

/* Blocked destination: readable, but with every selectable affordance removed —
   no fill, the lightest border in the group, and quieter text than its siblings. */
.builder__chip.is-blocked,
.builder__chip.is-blocked:hover {
  cursor: default;
  transform: none;
  color: var(--text-on-dark-muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text-on-dark) 8%, transparent);
}
.builder__chip.is-blocked .builder__chip-icon { opacity: .5; }

/* uppercase tracking leaves a trailing space after the last glyph — take it back
   off the right padding so the label sits optically centred in the pill */
.builder__chip-tag {
  padding-block: 0;
  padding-inline: var(--s-2) calc(var(--s-2) - 0.13em);
  border-radius: var(--r-pill);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--violet-300);
  background: color-mix(in oklab, var(--violet-500) 24%, transparent);
}
/* only the current source carries the tag — an empty one must not eat a flex gap */
.builder__chip-tag:empty { display: none; }

.builder__chip:active { transform: translateY(0) scale(.98); }

/* focus rings compose with the control's own shadow, they never replace it */
.builder__chip:focus-visible {
  box-shadow: inset 0 0 0 1px var(--b-line), var(--b-ring);
  border-radius: var(--r-pill);
}
.builder__chip[aria-checked="true"]:focus-visible,
.builder__chip[aria-pressed="true"]:focus-visible {
  box-shadow: inset 0 0 0 1px var(--b-sel-line), var(--b-ring), var(--sh-accent);
}

/* ---------- switches ---------- */
.builder__switches {
  display: grid;
  gap: var(--s-2);
}
.builder__switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  min-height: var(--s-14);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  text-align: left;
  background: var(--b-panel-2);
  box-shadow: inset 0 0 0 1px var(--b-line);
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.builder__switch:hover { background: var(--b-chip-hover); }
.builder__switch:focus-visible {
  box-shadow: inset 0 0 0 1px var(--b-line), var(--b-ring);
  border-radius: var(--r-md);
}
.builder__switch-text {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-on-dark);
}
.builder__switch-sub {
  display: block;
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--text-on-dark-muted);
}
.builder__switch-track {
  position: relative;
  flex: none;
  width: var(--s-10);
  height: var(--s-6);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--text-on-dark) 12%, transparent);
  box-shadow: inset 0 0 0 1px var(--b-line);
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.builder__switch-thumb {
  position: absolute;
  inset-block-start: var(--s-1);
  inset-inline-start: var(--s-1);
  width: var(--s-4);
  height: var(--s-4);
  border-radius: var(--r-pill);
  background: var(--text-on-dark);
  transition: transform var(--dur) var(--ease-out);
}
.builder__switch[aria-checked="true"] .builder__switch-track {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--b-sel-line), var(--sh-accent);
}
.builder__switch[aria-checked="true"] .builder__switch-thumb {
  transform: translateX(var(--s-4));
}

/* ---------- segmented schedule control ---------- */
.builder__seg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--s-1);
  border-radius: var(--r-pill);
  background: var(--b-panel-2);
  box-shadow: inset 0 0 0 1px var(--b-line);
  isolation: isolate;
}
.builder__seg-ind {
  position: absolute;
  z-index: -1;
  inset-block: var(--s-1);
  inset-inline-start: var(--s-1);
  width: calc(50% - var(--s-1));
  border-radius: var(--r-pill);
  background: var(--b-sel);
  box-shadow: inset 0 0 0 1px var(--b-sel-line), var(--sh-accent);
  transform: translateX(calc(var(--seg, 0) * 100%));
  transition: transform var(--dur-slow) var(--ease-expo);
}
.builder__seg-btn {
  min-height: calc(var(--s-10) + var(--s-1)); /* 44px minimum touch target */
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-on-dark-muted);
  transition: color var(--dur) var(--ease-out);
}
.builder__seg-btn:hover { color: var(--text-on-dark); }
.builder__seg-btn[aria-checked="true"] { color: var(--text-on-dark); }
.builder__seg-btn:focus-visible {
  box-shadow: var(--b-ring);
  border-radius: var(--r-pill);
}

/* ---------- origin node: source → fan-out, one dot per destination ---------- */
.builder__origin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  min-width: 0;
}
.builder__origin-node {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--s-10);
  height: var(--s-10);
  border-radius: var(--r-pill);
  color: var(--violet-300);
  background: color-mix(in oklab, var(--violet-500) 26%, transparent);
  box-shadow: inset 0 0 0 1px var(--b-sel-line);
}
.builder__origin-icon {
  width: var(--s-5);
  height: var(--s-5);
}
.builder__origin-node::before,
.builder__origin-node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--violet-400) 76%, transparent);
  opacity: 0;
  pointer-events: none;
}
.builder__origin.is-rippling .builder__origin-node::before {
  animation: builder-ring var(--dur-slower) var(--ease-out) 1;
}
.builder__origin.is-rippling .builder__origin-node::after {
  animation: builder-ring var(--dur-slower) var(--ease-out) var(--dur-fast) 1;
}
@keyframes builder-ring {
  from { opacity: .8; transform: scale(1); }
  to   { opacity: 0;  transform: scale(2.6); }
}

.builder__origin-text {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
}
.builder__origin-label {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--lh-normal);
  color: var(--violet-300);
}
.builder__origin-name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-on-dark);
  overflow-wrap: anywhere;
}
/* one dot per selected destination — the fan-out is literally count-driven */
.builder__origin-rail {
  flex: 1 1 var(--s-10);
  min-width: var(--s-8);
  height: var(--s-4);
  color: var(--violet-300);
  background-image: radial-gradient(
    circle at 50% 50%,
    currentColor 0 calc(var(--s-1) / 4),
    transparent calc(var(--s-1) / 2)
  );
  background-size: calc(100% / max(var(--fan, 1), 1)) 100%;
  background-repeat: repeat-x;
  opacity: calc(min(var(--fan, 0), 1) * 0.6);
  transition: opacity var(--dur) var(--ease-out);
}
.builder__origin-count {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-on-dark-muted);
  white-space: nowrap;
}

/* ---------- output cards ----------
   The preview is the selection, not the catalogue: a slot exists in the DOM for
   every platform but only occupies a cell while it is a selected destination.
   The source is filtered out upstream, so it can never take a cell here.

   Rows size to their own content. `grid-auto-rows: 1fr` used to force every row
   to the tallest one, so an odd destination count left the final card stretched
   to a 9:16 row's height around a 4:5 frame — ~130px of empty card. The card
   still fills its own row, so cards sitting side by side stay level. */
.builder__outputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  /* one card row's worth of floor, so dropping to 1 or 0 does not collapse
     the recessed screen into a sliver */
  min-height: var(--s-40);
}
.builder__slot:not(.is-on) { display: none; }

/* an author `display` silently outranks the UA's [hidden] rule — re-assert it */
.builder__empty[hidden] { display: none; }
.builder__empty {
  display: grid;
  place-content: center;
  min-height: var(--s-40);
  padding: var(--s-4);
  text-align: center;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-on-dark-muted);
}
.builder__empty:not([hidden]) + .builder__outputs { display: none; }
@container bpv (min-width: 380px) {
  .builder__outputs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
}

.builder__slot {
  position: relative;
  min-width: 0;
}

.builder__card {
  /* the preview frame scales with the card it lives in, at every width */
  --frame-h: clamp(var(--s-24), 62cqw, calc(var(--s-40) * 2));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  height: 100%;
  padding: var(--s-3);
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--ink-800) 46%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text-on-dark) 8%, transparent);
  transition: box-shadow var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
/* the accent wash is a fadeable layer so lighting up is a transition, not a swap */
.builder__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in oklab, var(--violet-500) 20%, transparent), transparent 62%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.builder__slot.is-on .builder__card {
  background: color-mix(in oklab, var(--ink-800) 82%, transparent);
  box-shadow: inset 0 0 0 1px var(--b-line-2);
}
.builder__slot.is-on .builder__card::before { opacity: 1; }

/* three narrower cards need less height per frame than two wide ones */
@container bpv (min-width: 380px) {
  .builder__card { --frame-h: clamp(var(--s-24), 46cqw, calc(var(--s-40) * 2)); }
}

.builder__card-head,
.builder__card-body,
.builder__card-foot { position: relative; }

.builder__card-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-width: 0;
}
.builder__card-icon {
  flex: none;
  width: var(--s-5);
  height: var(--s-5);
  color: var(--text-on-dark-muted);
  transition: color var(--dur) var(--ease-out);
}
.builder__slot.is-on .builder__card-icon { color: var(--violet-300); }
.builder__card-name {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--text-on-dark-muted);
  overflow-wrap: anywhere;
  transition: color var(--dur) var(--ease-out);
}
.builder__slot.is-on .builder__card-name { color: var(--text-on-dark); }

.builder__card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
}

/* the frame: aspect driven by state, height capped so a 9:16 never runs away */
.builder__frame {
  --arw: 9;
  --arh: 16;
  position: relative;
  display: block;
  width: min(100%, calc(var(--frame-h) * var(--arw) / var(--arh)));
  aspect-ratio: var(--arw) / var(--arh);
  border-radius: var(--r-xs);
  background: color-mix(in oklab, var(--text-on-dark) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text-on-dark) 12%, transparent);
  overflow: hidden;
  transition: background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.builder__slot.is-on .builder__frame {
  background: color-mix(in oklab, var(--violet-400) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--violet-300) 30%, transparent);
}
.builder__outputs.is-morphing .builder__slot.is-on .builder__frame {
  animation: builder-morph var(--dur-slow) var(--ease-expo) 1;
}
@keyframes builder-morph {
  from { opacity: .35; transform: scale(.9); }
  to   { opacity: 1;   transform: scale(1); }
}

/* the shot itself only exists where the post actually lands */
.builder__shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}
.builder__slot.is-on .builder__shot {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * var(--dur-fast) / 3);
}

/* subject stays put while the crop changes — that is what reframing means */
.builder__subject { position: absolute; inset: 0; }
.builder__subject::before,
.builder__subject::after {
  content: "";
  position: absolute;
  left: 50%;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--violet-300) 58%, transparent);
}
.builder__subject::before {
  top: 34%;
  height: 17%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.builder__subject::after {
  top: 48%;
  height: 26%;
  aspect-ratio: 1.5;
  transform: translateX(-50%);
  border-radius: var(--r-pill) var(--r-pill) var(--r-xs) var(--r-xs);
  background: color-mix(in oklab, var(--violet-300) 40%, transparent);
}

.builder__caps {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 9%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--s-1) / 2);
  transition: opacity var(--dur) var(--ease-out);
}
.builder__cap {
  height: calc(var(--s-1) / 2);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--text-on-dark) 72%, transparent);
}
.builder__cap:first-child { width: 64%; }
.builder__cap:last-child  { width: 42%; opacity: .7; }
.builder__outputs.is-nocaps .builder__caps { opacity: 0; }

/* the foreign badge you are stripping — visible only when you keep it */
.builder__wm {
  position: absolute;
  inset-block-start: 8%;
  inset-inline-end: 8%;
  width: 36%;
  height: var(--s-2);
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--coral-400) 78%, transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.builder__outputs.is-watermarked .builder__wm { opacity: 1; }

.builder__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-width: 0;
}
.builder__ratio {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: var(--lh-normal);
  color: var(--text-on-dark-muted);
  transition: color var(--dur) var(--ease-out);
}
.builder__slot.is-on .builder__ratio { color: var(--violet-300); }

/* when it lands — the schedule control has a face in the preview too */
/* a value, not a label — it stays at the body-adjacent step, not the 12px eyebrow */
.builder__when {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--text-on-dark-muted);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
}
.builder__slot.is-on .builder__when { opacity: 1; }

/* ---------- pseudo-code ---------- */
.builder__codewrap {
  position: relative;
  border-radius: var(--r-md);
  background: color-mix(in oklab, var(--ink-800) 66%, transparent);
  box-shadow: inset 0 0 0 1px var(--b-line);
  overflow: hidden;
  min-width: 0;
}
.builder__codelabel {
  display: block;
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  color: var(--text-on-dark-muted);
  border-bottom: 1px solid var(--b-line);
}
.builder__code {
  margin: 0;
  padding: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  white-space: pre-wrap;
  /* `anywhere` split identifiers mid-token — a 43-character destination list
     broke into 133px / 8px / 196px line boxes, one of them a single glyph.
     `break-word` only breaks a token that cannot fit on a line of its own. */
  overflow-wrap: break-word;
  color: var(--text-on-dark-muted);
  tab-size: 2;
}
/* Narrower than the shortest useful measure, stop wrapping and scroll instead —
   same treatment 06 gives its matrix, and the <pre> carries the region label
   and tab stop so the scroller stays keyboard reachable. */
@media (max-width: 30rem) {
  .builder__code {
    white-space: pre;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--b-line-2) transparent;
  }
}
/* the wrap clips its children, so the scroller's ring is drawn on the wrap */
.builder__code:focus-visible { outline: none; box-shadow: none; }
.builder__codewrap:has(.builder__code:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--b-line), var(--b-ring);
}
@media (forced-colors: active) {
  .builder__codewrap:has(.builder__code:focus-visible) {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }
}
.builder__k { color: var(--violet-300); }
.builder__v { color: var(--mint-500); }
.builder__p { color: var(--text-on-dark-muted); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .builder__slot.is-on .builder__shot { transition-delay: 0ms; }
  .builder__shot { transform: none; }
  .builder__pulse { animation: none; opacity: 1; }
  .builder__origin.is-rippling .builder__origin-node::before,
  .builder__origin.is-rippling .builder__origin-node::after,
  .builder__outputs.is-morphing .builder__slot.is-on .builder__frame { animation: none; }
}